How to Build a Basic CRUD App with Marionette.js: A Step-by-Step Guide

はじめに このガイドでは、marionette jsを使用して完全なcrud（作成、読み取り、更新、削除）アプリケーションを作成する方法を学びます。 このチュートリアルでは、データ操作を効率的に管理するアプリケーションの設定方法を示します。まず、 basic crud app marionettejs というback4appプロジェクトを設定します。これは、アプリケーションの強力なバックエンドとして機能します。 プロジェクトを設定した後、コレクションとフィールドを定義することで柔軟なデータベーススキーマを設計します。これは手動で行うことも、back4app aiエージェントの支援を受けることもできます。このアプローチにより、バックエンドが整理され、crud操作を信頼性高く処理できるようになります。 次に、back4app admin appを使用して、コレクションを簡単に管理します。これにより、作成、読み取り、更新、削除の操作を容易に行うことができます。 最後に、marionette jsのフロントエンドをback4appと統合します。rest/graphql（または該当する場合はparse sdk）を使用し、バックエンドのセキュリティを高度なアクセス制御で確保します。 このチュートリアルの終わりまでに、crud操作をサポートし、ユーザー認証と安全なデータ管理を備えた本番環境向けのwebアプリケーションを持つことができます。 重要なポイント 堅牢なバックエンドを使用してデータを効果的に管理するcrudアプリケーションを構築します。 スケーラブルなバックエンドを作成し、それをmarionette jsフロントエンドに接続する方法についての洞察を得ます。 データ操作を簡素化するために、ノーコード管理インターフェース（back4app admin app）を使用する方法を学びます。 アプリケーションを迅速に立ち上げるためのデプロイメント技術、特にdockerコンテナ化を理解します。 前提条件 始める前に、以下のものを用意してください 新しいプロジェクトが設定されたback4appアカウント。 ガイダンスについては、 back4appの始め方 https //www back4app com/docs/get started/new parse app を参照してください。 marionette js開発環境。 marionette jsのボイラープレートまたはスターターキットを使用できます。node js（バージョン14以上）がインストールされていることを確認してください。 javascript、marionette js、およびrest apiの基本的な理解。 詳細については、 marionette jsのドキュメント https //marionettejs com/docs/master/ を参照してください。 ステップ1 – プロジェクト設定 新しいback4appプロジェクトの作成 back4appアカウントにログインします。 「新しいアプリ」ボタンをクリックします ダッシュボードで。 プロジェクトに名前を付けます： basic crud app marionettejs とプロンプトを完了します。 新しいプロジェクトを作成 プロジェクトを作成すると、それがダッシュボードに表示され、バックエンドの設定と管理の基盤を提供します。 ステップ2 – データベーススキーマの設計 データモデルの作成 このcrudアプリでは、いくつかのコレクションを定義します。ここでは、データベースを支えるフィールドとデータ型を含む、作成する可能性のあるコレクションの例を示します。 1\ アイテムコレクション このコレクションは各アイテムの詳細を保持しています。 フィールド データ型 説明 id オブジェクトid 自動生成された一意の識別子。 タイトル 文字列 アイテムの名前。 説明 文字列 アイテムに関する短い要約。 作成日時 日付 アイテムが作成された時刻。 更新日時 日付 最後の更新のタイムスタンプ。 2\ ユーザーコレクション このコレクションはユーザーの資格情報とプロフィールの詳細を保存します。 フィールド データ型 説明 id オブジェクトid 自動生成された一意の識別子。 ユーザー名 文字列 ユーザーのユニーク識別子。 メール 文字列 ユニークなメールアドレス。 パスワードハッシュ 文字列 ユーザー認証のための暗号化されたパスワード。 作成日時 日付 アカウント作成のタイムスタンプ。 更新日時 日付 最後のアカウント更新のタイムスタンプ。 これらのコレクションをback4appダッシュボードで手動で追加するには、それぞれの新しいクラスを作成し、対応するフィールドを定義します。 新しいクラスを作成 データ型を選択し、名前を提供し、デフォルト値を設定し、必要に応じて必須としてマークすることでフィールドを作成できます。 カラムを作成 スキーマ作成のためのback4app aiエージェントの活用 back4app aiエージェントは、記述的なプロンプトからコレクションとフィールドを生成することでスキーマ作成を簡素化します。 aiエージェントの使用方法 aiエージェントを起動する back4appダッシュボードメニューまたはプロジェクト設定からアクセスします。 データモデルを説明する 必要なコレクションとフィールドを概説した詳細なプロンプトを貼り付けます。 レビューと確認 提案されたスキーマを確認し、プロジェクトに適用します。 サンプルプロンプト create these collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated) \ title string \ description string \ created at date (auto generated) \ updated at date (auto updated) 2\) collection users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto generated) \ updated at date (auto updated) この方法は時間を節約し、データベーススキーマの一貫性を確保します。 ステップ3 – 管理アプリの有効化とcrud操作の実行 管理アプリの概要 back4app管理アプリは、バックエンドデータを管理するためのノーコードのドラッグアンドドロップインターフェースを提供します。レコードの作成、読み取り、更新、削除などのcrud操作を簡素化します。 管理アプリの有効化 「その他」メニューを開く あなたのback4appダッシュボードで。 「管理者アプリ」を選択 その後、クリックします 「管理者アプリを有効にする」。 管理者資格情報を設定する 管理者ユーザーを作成することで、デフォルトの役割を構成します。例えば、 b4aadminuser 管理者アプリを有効にする アクティベーション後、管理者アプリにサインインしてコレクションを管理します。 管理者アプリダッシュボード crudタスクのための管理者アプリの使用 レコードの作成： 「レコードを追加」ボタンを使用して、コレクションに新しいエントリを挿入します。 レコードの読み取り/更新： レコードをクリックして、その詳細を表示または変更します。 レコードの削除： 削除オプションを使用して、古いレコードを削除します。 この直感的なインターフェースは、データ管理を簡素化することでユーザーのインタラクションを改善します。 ステップ 4 – marionette js と back4app の接続 バックエンドが管理アプリを介して設定されたら、次のステップは marionette js フロントエンドを back4app と統合することです。 オプション a parse sdk を使用する（該当する場合） parse sdk をインストールする npm install parse marionette js アプリケーションで parse を初期化する 設定ファイルを作成します（例 app/parseconfig js ) // app/parseconfig js import parse from 'parse'; // ここに back4app の資格情報を挿入します parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; marionette ビューに parse を統合する 例えば、アイテムを取得してレンダリングするビューを作成します // app/views/itemsview\ js import { view } from 'backbone marionette'; import parse from ' /parseconfig'; export default view\ extend({ template template(` \<h2>アイテム\</h2> \<ul> <% items foreach(function(item) { %> \<li><%= item get("title") %> — <%= item get("description") %>\</li> <% }); %> \</ul> `), initialize() { this items = \[]; this fetchitems(); }, async fetchitems() { const items = parse object extend("items"); const query = new parse query(items); try { const results = await query find(); this items = results; this render(); } catch (error) { console error("アイテムの取得中にエラーが発生しました ", error); } }, serializedata() { return { items this items }; } }); オプション b rest または graphql を使用する parse sdk が選択肢でない場合、rest または graphql コールを使用して back4app と対話できます。例えば、rest を介してアイテムを取得するには // example rest call to retrieve items async function fetchitems() { try { const response = await fetch('https //parseapi back4app com/classes/items', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); const data = await response json(); console log('retrieved items ', data results); } catch (error) { console error('error retrieving items ', error); } } fetchitems(); これらのapi呼び出しを必要に応じてmarionette jsのビューまたはコントローラーに組み込んでください。 ステップ5 – バックエンドのセキュリティ アクセス制御リスト (acl) の設定 オブジェクトにaclを設定することでデータを保護します。たとえば、所有者のみがアクセスできるアイテムを作成するには async function createprivateitem(itemdata, owneruser) { const items = parse object extend('items'); const item = new items(); item set('title', itemdata title); item set('description', itemdata description); // configure acl restrict access solely to the owner const acl = new parse acl(owneruser); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { const saveditem = await item save(); console log('created private item ', saveditem); } catch (error) { console error('error saving private item ', error); } } クラスレベルの権限 (clp) の設定 back4appのダッシュボードで、各コレクションのclpを設定してデフォルトのアクセスルールを強制し、認可されたユーザーのみが機密データにアクセスできるようにします。 ステップ6 – ユーザー認証 ユーザーアカウントの作成 back4appは、認証管理のためにparseのuserクラスを利用します。あなたのmarionette jsアプリでは、以下のようにユーザー登録とログインを処理します // app/views/authview\ js import { view } from 'backbone marionette'; import parse from ' /parseconfig'; export default view\ extend({ template template(` \<form id="signup form"> \<input type="text" id="username" placeholder="username" required /> \<input type="password" id="password" placeholder="password" required /> \<input type="email" id="email" placeholder="email" required /> \<button type="submit">sign up\</button> \</form> `), events { 'submit #signup form' 'handlesignup' }, async handlesignup(e) { e preventdefault(); const username = this $('#username') val(); const password = this $('#password') val(); const email = this $('#email') val(); const user = new parse user(); user set('username', username); user set('password', password); user set('email', email); try { await user signup(); alert('registration successful!'); } catch (error) { alert('sign up error ' + error message); } } }); ログインやセッション管理についても同様のパターンを適用できます。ソーシャルログインやパスワードリセットなどの追加機能は、back4appのダッシュボードを通じて設定できます。 ステップ7 – marionette js フロントエンドのウェブデプロイメント back4appのウェブデプロイメント機能を使用すると、githubリポジトリをリンクすることで、marionette jsフロントエンドをシームレスにホストできます。 7 1 – プロダクションバージョンのビルド ターミナルでプロジェクトディレクトリに移動します。 ビルドコマンドを実行します npm run build これにより、最適化された静的ファイル（html、js、css、画像）を含む build フォルダーが生成されます。 ビルドを確認します build フォルダーに必要なアセットとともに index html ファイルが含まれていることを確認します。 7 2 – ソースコードの整理とアップロード リポジトリには、marionette jsフロントエンドのすべてのソースコードが含まれている必要があります。例のファイル構造は次のとおりです basic crud app marionettejs frontend/ ├── node modules/ ├── public/ │ └── index html ├── app/ │ ├── app js │ ├── parseconfig js │ └── views/ │ ├── itemsview\ js │ └── authview\ js ├── package json └── readme md 例の設定ファイル app/parseconfig js // app/parseconfig js import parse from 'parse'; // insert your back4app credentials here parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; 例のアプリケーションファイル app/app js import marionette from 'backbone marionette'; import itemsview from ' /views/itemsview'; // initialize the marionette application const app = new marionette application({ region '#app' }); app on('start', function() { const itemsview = new itemsview(); app showview(itemsview); }); app start(); githubへのコミット gitリポジトリを初期化する （まだ行っていない場合） git init ファイルをステージする git add 変更をコミットする git commit m "marionette jsフロントエンドの初期コミット" githubにリポジトリを作成する （例 basic crud app marionettejs frontend ） コードをプッシュする git remote add origin https //github com/your username/basic crud app marionettejs frontend git git push u origin main 7 3 – リポジトリをwebデプロイメントに統合する webデプロイメントにアクセスする back4appダッシュボードで、プロジェクト（basic crud app marionettejs）を選択し、 webデプロイメント をクリックします。 githubに接続する プロンプトに従ってgithubアカウントをリンクし、back4appがリポジトリにアクセスできるようにします。 リポジトリとブランチを選択する リポジトリ（例 basic crud app marionettejs frontend ）とブランチ（例 main ）を選択します。 7 4 – デプロイメントの設定 追加設定を指定してください ビルドコマンド プリビルドの build フォルダーがない場合、ビルドコマンドを設定してください（例 npm run build )。back4appはデプロイ中にこれを実行します。 出力ディレクトリ 静的ファイルを含むフォルダーとして build を指定してください。 環境変数 デプロイ設定に必要な環境変数（apiキーなど）を提供してください。 7 5 – marionette jsアプリケーションのdocker化 デプロイにdockerを好む場合は、リポジトリに dockerfile を含めてアプリケーションをコンテナ化してください \# use an official node image for building the app from node 16 alpine as build \# set working directory workdir /app \# copy dependency files and install dependencies copy package json / run npm install \# copy the app source code copy \# build the application run npm run build \# use nginx to serve the build files from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 必要に応じて、dockerオプションを使用するようにwebデプロイを設定してください。 7 6 – アプリケーションのデプロイ デプロイボタンをクリック： デプロイ設定を最終確認し、「 デプロイ 」をクリックします。 ビルドを監視： back4appがgithubコードを取得し、ビルドコマンドを実行し、コンテナをデプロイします。 urlを取得： デプロイが完了すると、back4appがmarionette jsアプリケーションがホストされているurlを提供します。 7 7 – デプロイの確認 提供されたurlにアクセス： ブラウザでデプロイurlを開きます。 アプリケーションをテスト： アプリケーションが正しく読み込まれ、すべての機能（ルート、アセット）が動作していることを確認します。 必要に応じてトラブルシューティング： ブラウザの開発者ツールを使用し、問題が発生した場合はback4appのデプロイログを確認します。 ステップ8 – 結論と次のステップ よくやりました！あなたはmarionette jsとback4appを使用してcrudアプリケーションを成功裏に構築しました。 「 basic crud app marionettejs 」という名前のプロジェクトを設定し、アイテムとユーザーのための詳細なデータベースコレクションを作成し、admin appを通じてデータを管理しました。 また、marionette jsのフロントエンドをバックエンドに接続し、強力なセキュリティ対策を実装しました。 今後の改善点： フロントエンドを洗練させる： 詳細ビュー、検索機能、リアルタイム更新などの機能を追加します。 バックエンド機能の拡張： cloud functions、サードパーティapi、または高度なロールベースのアクセス制御の統合を検討してください。 さらなる学習： より高度な最適化や統合のために、 back4appのドキュメント https //www back4app com/docs を探求してください。 このチュートリアルに従うことで、あなたはmarionette jsとback4appを使用して堅牢でスケーラブルなcrudアプリケーションを構築する知識を持っています。楽しいコーディングを！