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

概要 このガイドでは、knockout jsを使用してフル機能のcrud（作成、読み取り、更新、削除）アプリケーションを作成する方法を学びます。 このチュートリアルでは、back4appをバックエンドサービスとして活用しながら、ウェブアプリ内で基本的な操作を実装する方法を示します。 まず、 basic crud app knockout というタイトルのback4appプロジェクトを設定し、アプリケーションのための信頼性のあるデータ管理システムを確立します。 その後、コレクションとフィールドを定義することで、柔軟なデータベーススキーマを設計します。これは手動で行うことも、back4app aiエージェントの支援を受けることもでき、アプリがすべてのcrud操作を効果的に処理できるようにします。 次に、使いやすいドラッグアンドドロップツールであるback4app admin appを使用して、コレクションを簡単に管理します。このインターフェースは、crud操作を実行するプロセスを簡素化します。 最後に、rest api呼び出しを使用してknockout jsフロントエンドをback4appと統合します。この統合では、適切なアクセス制御を伴う安全なバックエンドの実践もカバーします。 このチュートリアルの終わりまでに、基本的なcrud機能をサポートし、ユーザー認証を含み、堅牢なデータ管理機能を備えた本番環境向けのウェブアプリを構築することができます。 主なポイント back4appを使用してデータを効率的に管理するcrudアプリケーションの開発方法を理解する。 スケーラブルなバックエンドを設計し、それをknockout jsフロントエンドとリンクさせる実践的な経験を得る。 作成、読み取り、更新、削除操作を実行するためのノーコード管理ツール（back4app admin app）を使用する方法を学ぶ。 ウェブアプリを迅速に立ち上げるためのデプロイメント戦略、特にdockerコンテナ化を発見する。 前提条件 始める前に、次のものを用意してください back4appアカウントとアクティブなプロジェクト。 ガイダンスが必要な場合は、 https //www back4app com/docs/get started/new parse app を参照してください。 knockout jsのために設定された開発環境。 cdnを介してライブラリを含めるか、モジュラーセットアップを好む場合はnpmを介してインストールしてください。 javascript、knockout js、およびrest apiの基本的な知識。 入門のために https //knockoutjs com/documentation/introduction html を参照してください。 ステップ 1 – プロジェクトの初期化 back4appプロジェクトの設定 back4appアカウントにアクセスします。 ダッシュボードから「新しいアプリ」オプションを選択します。 プロジェクト名を入力します： basic crud app knockout そしてセットアッププロセスを完了します。 新しいプロジェクトを作成 作成されると、プロジェクトはダッシュボードに表示され、バックエンド構成の基盤を形成します。 ステップ 2 – データベーススキーマの作成 データ構造の設計 このcrudアプリでは、いくつかのコレクションを作成します。以下は、データベース設計のガイドとなるサンプルコレクションと推奨されるフィールドおよびデータ型です。このスキーマは基本的なcrud操作をサポートします。 1 アイテムコレクション true left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type 2 ユーザーコレクション true left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type これらのコレクションは、back4appダッシュボードで新しいクラスを追加し、フィールドを定義することで手動で作成できます。 新しいクラスを作成 データ型を選択し、フィールドに名前を付け、デフォルト値を設定し、必須フィールドにマークを付けてフィールドを定義します。 カラムを作成 スキーマ自動化のためのback4app aiエージェントの使用 back4app aiエージェントは、ダッシュボードから直接スキーマ生成を簡素化します。説明に基づいてコレクションとフィールドを自動的に作成できます。 aiエージェントを使用する手順 aiエージェントを起動する back4appダッシュボードまたはプロジェクト設定からアクセスします。 データモデルを詳細に説明する 必要なコレクションとフィールドをリストした説明的なプロンプトを貼り付けます。 レビューと適用 エージェントがスキーマを提案します。提案をレビューし、プロジェクトに統合するために確認します。 サンプルプロンプト create the following 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 – knockout jsをback4appに接続する バックエンドが整ったので、rest apiコールを使用してknockout jsフロントエンドを統合する時が来ました。 crud操作のためのrest apiの使用 parse sdkは通常knockout jsと一緒に使用されないため、apiコールを直接行います。以下はcrudタスクを処理する方法の例です。 アイテム取得の例 // example rest call to retrieve items function fetchitems() { fetch('https //parseapi back4app com/classes/items', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }) then(response => response json()) then(data => { viewmodel items(data results); }) catch(error => console error('error retrieving items ', error)); } fetchitems(); knockout js viewmodelの例 以下はアイテムを管理するためのviewmodelの例です function appviewmodel() { var self = this; self items = ko observablearray(\[]); self newtitle = ko observable(""); self newdescription = ko observable(""); self additem = function() { var newitem = { title self newtitle(), description self newdescription() }; fetch('https //parseapi back4app com/classes/items', { method 'post', headers { 'content type' 'application/json', 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, body json stringify(newitem) }) then(response => response json()) then(data => { self items push(data); self newtitle(""); self newdescription(""); }) catch(error => console error('error adding item ', error)); }; self deleteitem = function(item) { fetch('https //parseapi back4app com/classes/items/' + item objectid, { method 'delete', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }) then(() => { self items remove(item); }) catch(error => console error('error deleting item ', error)); }; // additional methods for update and read operations can be added similarly } // activate knockout js ko applybindings(new appviewmodel()); このviewmodelは、knockout jsのobservableを使用して状態を管理しながら、アイテムの作成と削除のためのapi呼び出しを統合します。 ステップ5 – バックエンドのセキュリティ アクセス制御リスト (acl) 各オブジェクトにaclを割り当ててデータを保護します。たとえば、アイテムを作成者のみにアクセス可能にするには function createsecureitem(itemdata, owneruserid) { var newitem = { title itemdata title, description itemdata description, acl { " " { "read" false, "write" false }, \[owneruserid] { "read" true, "write" true } } }; fetch('https //parseapi back4app com/classes/items', { method 'post', headers { 'content type' 'application/json', 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, body json stringify(newitem) }) then(response => response json()) then(data => console log('secure item created ', data)) catch(error => console error('error creating item ', error)); } クラスレベルの権限 (clp) back4appのダッシュボード内で、各コレクションのclpを設定し、認証されたユーザーまたは権限のあるユーザーのみが機密情報にアクセスできるようにします。 ステップ6 – ユーザー認証の実装 ユーザーアカウントの設定 back4appは、認証を管理するためにユーザークラスを使用します。あなたのknockout jsアプリでは、rest api呼び出しを使用してユーザー登録とログインを処理します。 例 ユーザー登録 function registeruser(username, password, email) { var user = { username username, password password, email email }; fetch('https //parseapi back4app com/users', { method 'post', headers { 'content type' 'application/json', 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, body json stringify(user) }) then(response => response json()) then(data => alert('registration successful!')) catch(error => alert('registration error ' + error message)); } ユーザーログインとセッション管理についても同様のアプローチを取ることができます。メール確認やパスワードリセットなどの追加機能は、back4appを通じて設定できます。 ステップ7 – webデプロイメントを使用したknockout jsフロントエンドのデプロイ back4appのwebデプロイメント機能を使用すると、githubリポジトリをリンクすることで、knockout jsフロントエンドを簡単にホストできます。次の手順に従ってください 7 1 プロダクションファイルをビルドする ターミナルでプロジェクトディレクトリを開きます。 ビルドプロセスを実行します webpackのようなビルドツールを使用している場合は、適切なコマンドを実行します（例 npm run build ) でアセットをコンパイルします。 ビルドを確認します ビルドフォルダに index html とすべての必要な静的アセットが含まれていることを確認します。 7 2 コードを整理してgithubにコミットする リポジトリには、knockout jsフロントエンドのすべてのソースファイルが含まれている必要があります。例の構造は次のようになります basic crud app knockout frontend/ ├── node modules/ ├── public/ │ └── index html ├── src/ │ ├── index js │ ├── appviewmodel js │ └── styles css ├── package json └── readme md サンプルファイル src/appviewmodel js function appviewmodel() { var self = this; self items = ko observablearray(\[]); self newtitle = ko observable(""); self newdescription = ko observable(""); self additem = function() { var itemdata = { title self newtitle(), description self newdescription() }; fetch('https //parseapi back4app com/classes/items', { method 'post', headers { 'content type' 'application/json', 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, body json stringify(itemdata) }) then(response => response json()) then(data => { self items push(data); self newtitle(""); self newdescription(""); }) catch(error => console error('error adding item ', error)); }; // additional crud methods (update, delete) can be defined similarly } // apply knockout bindings ko applybindings(new appviewmodel()); コードをgithubにコミットしてプッシュする gitを初期化する（まだ行っていない場合）： git init ファイルをステージする： git add 変更をコミットする： git commit m "knockout jsフロントエンドの初期コミット" githubリポジトリを作成する （例： basic crud app knockout frontend ） コードをプッシュする： git remote add origin https //github com/your username/basic crud app knockout frontend git git push u origin main 7 3 githubリポジトリとwebデプロイメントのリンク webデプロイメント機能にアクセスする： back4appダッシュボードでプロジェクト（basic crud app knockout）を選択し、 webデプロイメント をクリックします。 githubに接続する： プロンプトに従ってgithubアカウントを統合します。 リポジトリとブランチを選択する： リポジトリ（例： basic crud app knockout frontend ）とコードを含むブランチ（例： main ）を選択します。 7 4 デプロイメント設定 ビルドコマンド リポジトリにプリビルドフォルダが含まれていない場合は、ビルドコマンドを指定してください（例 npm run build )。 出力ディレクトリ 静的ファイルを含むフォルダに設定してください（例 build または public )。 環境変数 apiキーなど、必要な環境変数を追加してください。 7 5 アプリケーションをdockerでコンテナ化する（オプション） dockerを使用したい場合は、リポジトリに dockerfile を含めてください # use an official node image for building from node 16 alpine as build \# set working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy source code and build the app copy run npm run build \# use nginx to serve the static files from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 7 6 アプリケーションのデプロイ デプロイボタンをクリック： 設定を構成した後、デプロイを開始します。 プロセスを監視： back4appがコードを取得し、必要に応じてビルドし、コンテナ化されたアプリをデプロイします。 アプリにアクセス： 完了すると、back4appがknockout jsアプリにアクセスするためのurlを提供します。 7 7 デプロイのテスト 提供されたurlを開く： アプリが正しく読み込まれるか確認します。 テストを実行： すべてのルートとアセット（css、js、画像）が機能していることを確認します。 必要に応じてデバッグ： 開発者ツールを使用してエラーを検査し、back4appのデプロイメントログを参照します。 ステップ8 – 結論と今後の方向性 よくやった！あなたはknockout jsとback4appを使用して基本的なcrudアプリケーションを成功裏に構築しました。 「 basic crud app knockout 」という名前のプロジェクトを設定し、アイテムとユーザーの詳細なコレクションを作成し、admin appを通じてデータを管理しました。 さらに、rest api呼び出しを使用してknockout jsのフロントエンドとバックエンドを統合し、安全なアクセス制御を実装しました。 次のステップ： フロントエンドを拡張する： 詳細なアイテムビュー、検索機能、またはライブ更新などの機能でアプリを強化します。 高度なバックエンドロジックを追加する： cloud functionsを使用するか、サードパーティサービスを統合することを検討してください。 さらに深く掘り下げる： さらなる最適化と高度な統合のために、 https //www back4app com/docs を参照してください。 このチュートリアルに従うことで、あなたはknockout jsを使用してback4appで堅牢でスケーラブルなcrudアプリを構築する知識を得ました。コーディングを楽しんでください！