How to Build a CRUD App with Backbone.js? A Step-by-Step Tutorial

イントロダクション このガイドでは、backbone jsを使用して機能的なcrud（作成、読み取り、更新、削除）アプリケーションを作成する方法を学びます。 このウォークスルーでは、データを効果的に操作および管理するcrudシステムを構築する方法を示すことで、ウェブアプリケーションのコア操作を理解するのに役立ちます。 まず、アプリケーションの信頼できるバックエンドとして機能する「 basic crud app backbone 」というタイトルのback4appプロジェクトを設定します。 その後、特定のコレクションとフィールドを定義することで、柔軟なデータベーススキーマを設計します。これは手動で行うことも、back4app aiエージェントの支援を受けることもできます。このプロセスにより、データ構造がシームレスなcrudインタラクションに合わせて調整されます。 次に、ドラッグアンドドロップインターフェースを備えた直感的なback4app管理アプリを使用して、データコレクションを簡単に扱います。このツールはcrud操作を簡素化し、バックエンドデータ管理を簡単にします。 最後に、rest apiを使用してbackbone jsフロントエンドをback4appに接続し、標準api呼び出しに基づいてバックエンドと対話します。また、堅牢なアクセス制御を使用してデータを保護する方法も学びます。 このチュートリアルの結論では、crud機能をサポートし、ユーザー認証と高度なデータ管理機能を含む、商用利用可能なウェブアプリケーションを構築します。 重要なポイント 信頼できるバックエンドサービスを使用してデータを効果的に処理するcrudアプリケーションの構築技術を習得する。 スケーラブルなデータベース設計を作成し、backbone jsフロントエンドと統合するための戦略を発見する。 back4app admin appのドラッグアンドドロップ機能を使用して、作成、読み取り、更新、削除のタスクを簡素化する方法を学ぶ。 アプリケーションを迅速に立ち上げるためのデプロイメント方法、特にdockerコンテナ化に慣れる。 前提条件 始める前に、次のものを用意してください back4appアカウントとアクティブなプロジェクト。 ガイダンスが必要な場合は、 back4appの始め方 https //www back4app com/docs/get started/new parse app を参照してください。 backbone jsの開発環境。 npmのようなパッケージマネージャーを介してbackbone jsを含めるか、cdnから直接リンクすることができます。 javascript、backbone js、およびrestful apiの基本的な理解。 必要に応じて、 backbone jsのドキュメント https //backbonejs org/#getting started を確認してください。 ステップ1 – プロジェクトの初期化 back4appプロジェクトの作成 back4appアカウントにサインインします。 「新しいアプリ」ボタンをクリックします ダッシュボードから。 プロジェクトに名前を付けます： basic crud app backbone そして、設定するためのプロンプトに従います。 新しいプロジェクトを作成 プロジェクトが作成されると、ダッシュボードに表示され、アプリケーションのバックエンドとして設定する準備が整います。 ステップ2 – データベーススキーマの作成 データモデルの定義 このcrudアプリケーションでは、いくつかのコレクションを設定します。以下は、スキーマを確立するために必要なフィールドとタイプを持つサンプルコレクションです。これにより、アプリがすべてのcrud操作を実行できるようになります。 1\ アイテムコレクション このコレクションは各アイテムの詳細を保持します。 フィールド データ型 説明 id オブジェクトid 自動生成された一意の識別子。 タイトル 文字列 アイテムの名前またはタイトル。 説明 文字列 アイテムの簡単な概要。 作成日時 日付 アイテムが追加された日時を示します。 更新日時 日付 最新の更新のタイムスタンプ。 2\ ユーザーコレクション このコレクションはユーザーの詳細と認証情報を保存します。 フィールド データ型 説明 id オブジェクトid 自動生成された一意の識別子。 ユーザー名 文字列 ユーザーのユニーク識別子。 メール 文字列 ユーザーのユニークなメールアドレス。 パスワードハッシュ 文字列 安全にハッシュ化されたパスワード。 作成日時 日付 アカウント作成のタイムスタンプ。 更新日時 日付 ユーザーデータの最終変更タイムスタンプ。 これらのコレクションは、back4appダッシュボードを介して手動で作成できます。各コレクションの新しいクラスを追加し、対応するフィールドを設定します。 新しいクラスを作成 データタイプを選択し、フィールド名を設定し、必要に応じてデフォルト値を提供し、フィールドを必須としてマークします。 カラムを作成 スキーマ作成のためのback4app aiエージェントの活用 back4app aiエージェントは、データベーススキーマの作成を自動化するための便利なユーティリティです。 希望するコレクションとフィールドの説明的なプロンプトを入力することで、aiエージェントは必要なデータベース構造を迅速に生成し、時間を節約し、一貫性を確保します。 aiエージェントの使用方法 aiエージェントにアクセスする back4appダッシュボードにログインし、ナビゲーションまたはプロジェクト設定でaiエージェントを見つけます。 データモデルの詳細を記述する 必要なコレクションとフィールドを概説するプロンプトを入力します。 レビューと実装 提案されたスキーマを評価し、プロジェクトに変更を適用します。 サンプルプロンプト create the following collections for 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) aiエージェントを利用することで、スキーマがアプリケーションの要件に適切に構造化されます。 ステップ3 – 管理アプリの有効化とcrud操作の管理 管理アプリの紹介 back4app管理アプリは、バックエンドデータを効率的に管理するためのノーコードインターフェースです。 直感的なドラッグアンドドロップデザインにより、レコードの追加、表示、変更、削除などのcrud操作を非常に簡単に実行できます。 管理者アプリの有効化 「その他」メニューを開く あなたのback4appダッシュボードから。 「管理者アプリ」を選択 そして次に選択します 「管理者アプリを有効にする」。 管理者資格情報を設定する 初期管理者アカウントを作成することによって。このステップでは、役割（例えば b4aadminuser ) とシステムコレクションも確立されます。 管理者アプリを有効にする 有効化後、管理者アプリにログインしてデータをシームレスに管理します。 管理者アプリダッシュボード 管理者アプリを使用したcrud操作の管理 管理者アプリ内でできること： 新しいエントリを追加： どのコレクションでも「レコードを追加」オプションを使用して新しいエントリを作成します（例えば、アイテム）。 レコードを表示/変更： レコードをクリックしてその詳細を確認または変更します。 レコードを削除： 削除機能を利用して不要なデータを削除します。 このインターフェースは、すべてのデータ管理タスクを合理化することによってユーザーエクスペリエンスを向上させます。 ステップ4 – backbone jsとback4appの接続 バックエンドが設定されたので、backbone jsフロントエンドをback4appと統合する時が来ました。 rest api呼び出しを使用したbackbone jsの利用 parse sdkはbackbone jsに特化していないため、backboneの組み込みモデル、コレクション、ビューをrest api呼び出しと組み合わせてback4appと対話します。 backboneモデルとコレクションの設定 アイテムのモデルとそれに対応するコレクションを定義することから始めます。例えば // models/item js var item = backbone model extend({ urlroot 'https //parseapi back4app com/classes/items', idattribute 'objectid', defaults { title '', description '' } }); export default item; // collections/itemscollection js import item from ' /models/item'; var itemscollection = backbone collection extend({ model item, url 'https //parseapi back4app com/classes/items', parse function(response) { return response results; } }); export default itemscollection; crud操作のためのbackboneビューの構築 アイテムのリストをレンダリングし、追加、編集、削除などのユーザーアクションを処理するビューを作成します。 // views/itemsview\ js import backbone from 'backbone'; import from 'underscore'; import itemscollection from ' /collections/itemscollection'; var itemsview = backbone view\ extend({ el '#app', initialize function() { this collection = new itemscollection(); this listento(this collection, 'sync update', this render); this collection fetch({ headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); }, events { 'click #add item' 'additem', 'click delete item' 'deleteitem', 'click edit item' 'edititem', 'click #save edit' 'saveedit' }, render function() { var template = template(` \<h2>items\</h2> \<div> \<input id="new title" type="text" placeholder="title"> \<input id="new description" type="text" placeholder="description"> \<button id="add item">add item\</button> \</div> \<ul> <% collection each(function(item) { %> \<li data id="<%= item id %>"> \<strong><%= item get('title') %>\</strong> <%= item get('description') %> \<button class="edit item">edit\</button> \<button class="delete item">delete\</button> \</li> <% }); %> \</ul> \<div id="edit section" style="display\ none;"> \<input id="edit title" type="text"> \<input id="edit description" type="text"> \<button id="save edit">save\</button> \</div> `); this $el html(template({ collection this collection })); return this; }, additem function() { var title = this $('#new title') val(); var description = this $('#new description') val(); var newitem = this collection create( { title title, description description }, { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, wait true, success function() { console log('item added successfully '); }, error function(error) { console error('failed to add item ', error); } } ); }, deleteitem function(e) { var itemid = $(e currenttarget) closest('li') data('id'); var item = this collection get(itemid); item destroy({ headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, success function() { console log('item removed '); }, error function(error) { console error('error deleting item ', error); } }); }, edititem function(e) { var itemid = $(e currenttarget) closest('li') data('id'); var item = this collection get(itemid); this $('#edit section') show(); this $('#edit title') val(item get('title')); this $('#edit description') val(item get('description')); this currenteditid = itemid; }, saveedit function() { var newtitle = this $('#edit title') val(); var newdescription = this $('#edit description') val(); var item = this collection get(this currenteditid); item save( { title newtitle, description newdescription }, { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, success function() { console log('item updated '); }, error function(error) { console error('update failed ', error); } } ); this $('#edit section') hide(); } }); export default itemsview; このビューはrest apiを使用してback4appからアイテムを取得し、レコードの追加、編集、削除を可能にします。 ステップ 5 – バックエンドのセキュリティ アクセス制御リスト (acl) の実装 オブジェクトにaclを設定することでデータを保護します。たとえば、アイテムのアクセスをその作成者のみに制限するには function createsecureitem(itemdata, owner) { var item = backbone model extend({ urlroot 'https //parseapi back4app com/classes/items' }); var item = new item(); item set({ title itemdata title, description itemdata description }); // assume a custom api call or configuration that assigns acls based on the owner // here you would include acl headers or a similar mechanism as needed item save(null, { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, success function(saveditem) { console log('secure item created ', saveditem); }, error function(err) { console error('error creating secure item ', err); } }); } クラスレベルの権限 (clp) の設定 back4appダッシュボード内で、各コレクションのclpを設定して、認可されたユーザーのみが機密データにアクセスまたは変更できるようにします。 ステップ 6 – ユーザー認証 backbone jsでのユーザーアカウントの設定 back4appは、認証のためにparseのuserクラスに似たユーザー管理システムを利用しています。あなたのbackbone jsアプリケーションでは、back4app rest apiへのajax呼び出しを使用してユーザー登録とログインを処理できます。 例えば、新しいユーザーを登録するには function signupuser(username, password, email) { $ ajax({ url 'https //parseapi back4app com/users', method 'post', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, data json stringify({ username username, password password, email email }), success function(response) { alert('user registered successfully!'); }, error function(error) { alert('error during registration ' + error responsejson error); } }); } ユーザーのログインやセッション管理にも同様の方法を適用できます。 ステップ7 – backbone jsフロントエンドのデプロイ back4appのwebデプロイ機能を使用すると、githubリポジトリをリンクすることで、backbone jsアプリケーションをシームレスにホストできます。 7 1 プロダクションビルドの作成 ターミナルでプロジェクトディレクトリを開きます。 ビルドプロセスを実行します タスクランナーやバンドラー（webpackやgulpなど）を使用している場合は、コマンドを実行します（例えば、 npm run build ) で最適化された静的アセットを生成します。 ビルドを確認します ビルド出力ディレクトリにメインhtmlファイルとすべての必要なアセットフォルダが含まれていることを確認します。 7 2 ソースコードの整理とプッシュ あなたのgithubリポジトリには、backbone jsアプリのすべてのソースファイルが含まれている必要があります。典型的な構造は次のようになります basic crud app backbone/ \| bower components/ \| public/ \| └── index html \| src/ \| ├── models/ \| │ └── item js \| ├── collections/ \| │ └── itemscollection js \| ├── views/ \| │ └── itemsview\ js \| └── app js \| package json \| readme md サンプル構成ファイル src/app js import backbone from 'backbone'; import itemsview from ' /views/itemsview'; $(document) ready(function() { new itemsview(); }); githubにプッシュする gitを初期化する（未実行の場合）： git init ファイルをステージする： git add 変更をコミットする： git commit m "backbone jsフロントエンドコードの初期コミット" githubリポジトリを作成する （例えば、 basic crud app backbone )。 リポジトリをプッシュする： git remote add origin https //github com/your username/basic crud app backbone git git push u origin main 7 3 あなたのリポジトリをback4app webデプロイメントに統合する webデプロイメントセクションにアクセスする あなたのback4appダッシュボードで、プロジェクトに移動し、 webデプロイメント オプションをクリックします。 githubアカウントをリンクする back4appがあなたのリポジトリにアクセスすることを許可するための指示に従ってください。 リポジトリとブランチを選択する あなたの basic crud app backbone リポジトリとメインブランチを選択します。 7 4 デプロイメント設定 追加設定を提供します ビルドコマンド 事前にビルドされたアセットが存在しない場合、アプリをビルドするためのコマンドを指定してください（例 npm run build )。 出力ディレクトリ 静的ファイルを含むフォルダを指定してください（例 public または dist )。 環境変数 必要なapiキーや設定を追加してください。 7 5 backbone jsプロジェクトのdocker化 デプロイメントにdockerを選択する場合、次のような dockerfile を含めてください \# use an official node image to build the application from node 16 alpine as builder \# set working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy the entire project and build the app copy run npm run build \# use nginx to serve the static files from nginx\ stable alpine copy from=builder /app/public /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 必要に応じて、back4appをdockerデプロイメントを使用するように設定します。 7 6 アプリケーションの起動 デプロイボタンをクリック： 設定が完了したら、「 デプロイ 」を押します。 ビルドを監視： back4appはあなたのコードを取得し、ビルドプロセスを実行し、コンテナ化されたアプリをデプロイします。 ライブurlを取得： デプロイ後、あなたのbackbone jsアプリがホストされているurlが提供されます。 7 7 デプロイメントの確認 提供されたurlにアクセス： ブラウザでurlを開いて、アプリが正しく読み込まれることを確認します。 機能をテスト： ナビゲーション、データ取得、crud操作が期待通りに動作することを確認します。 トラブルシューティング： ブラウザツールとback4appのログを使用して、問題を解決します。 ステップ8 – 結論と今後の方向性 素晴らしい仕事です！あなたはbackbone jsとback4appを使用してcrudアプリケーションを成功裏に構築しました。 あなたは「 basic crud app backbone 」というプロジェクトを設定し、アイテムとユーザーの詳細なコレクションを定義し、admin appを使用してバックエンドを管理しました。 さらに、rest api呼び出しを介してbackbone jsフロントエンドを統合し、重要なセキュリティ対策を適用しました。 次のステップ： フロントエンドの強化： より詳細なビュー、検索機能、リアルタイム更新を備えたbackbone jsアプリを拡張してください。 新機能の追加： より高度なバックエンドロジック、サードパーティapi、または洗練されたアクセス制御の統合を検討してください。 さらなる学習： パフォーマンスの改善やカスタム統合に関する詳細情報は、 back4appのドキュメント https //www back4app com/docs を訪れてください。 このチュートリアルに従うことで、あなたはback4appを使用してbackbone jsアプリケーションのための堅牢でスケーラブルなcrudバックエンドを作成する専門知識を持っています。コーディングを楽しみ、新しい機能を探求してください！