How to Build CRUD App with JavaScript?

概要 このチュートリアルでは、javascriptを使用して完全なcrud（作成、読み取り、更新、削除）アプリケーションを構築する方法を学びます。 バック4アプリを利用して、バックエンドデータを簡単に管理します。このガイドでは、バック4アプリプロジェクトの設定から、javascriptアプリケーションをparse javascript sdkまたはrest apiと統合するまでの基本的なcrud操作をカバーします。 最初に、バック4アプリで「 basic crud app javascript 」というプロジェクトを設定します。これは堅牢なバックエンドソリューションを提供します。 次に、アプリケーションの要件に合わせてデータスキーマを定義します。これは手動で行うか、バック4アプリのaiエージェントの助けを借りて行います。 次に、使いやすいバック4アプリ管理アプリを通じてバックエンドを管理し、シンプルなドラッグアンドドロップインターフェースを介してデータ操作を実行できるようにします。 最後に、javascriptアプリケーションをバック4アプリに接続し、安全なユーザー認証と基本的なcrud機能を実装します。 このガイドの終わりまでに、すべての基本的なcrud操作を実行できる安全なアクセス制御を備えた、プロダクション準備が整ったjavascriptアプリケーションを構築できるようになります。 覚えておくべき重要なポイント スケーラブルなバックエンドを持つjavascriptベースのcrudアプリを開発する方法をマスターします。 バックエンドの構造を理解し、それをjavascriptコードとスムーズに統合する方法を学びます。 back4appのadmin appを利用して、データ操作やcrud操作を簡単に行う方法を学びます。 dockerを使用したコンテナ化を含むデプロイメントオプションを探求し、javascriptアプリケーションを立ち上げます。 前提条件 始める前に、次のものを用意してください 設定されたプロジェクトを持つback4appアカウント。 助けが必要ですか？ back4appの始め方 https //www back4app com/docs/get started/new parse app を訪れてください。 javascript開発環境。 visual studio codeや他の好みのエディタをnode js（バージョン14以降）と一緒に使用できます。 javascript、モダンフレームワーク、rest apiの基本的な知識。 必要に応じて、 javascriptのドキュメント https //developer mozilla org/en us/docs/web/javascript を参照してください。 ステップ 1 – プロジェクトの初期化 新しい back4app プロジェクトの設定 back4app アカウントにログインします。 ダッシュボードから「新しいアプリ」ボタンをクリックします。 プロジェクト名を入力します： basic crud app javascript そして設定プロセスを完了します。 新しいプロジェクトを作成 プロジェクトが作成されると、ダッシュボードに表示され、バックエンド構成の基盤が整います。 ステップ2 – データスキーマの作成 データ構造の設計 私たちのcrudアプリのために、back4appに2つの主要なクラス（コレクション）を確立します。これらのクラスとそのフィールドは、必要なcrud操作を処理するために不可欠です。 1\ アイテム コレクション このコレクションは各アイテムの詳細を保存します。 フィールド タイプ 詳細 id オブジェクトid 自動生成された一意の識別子。 タイトル 文字列 アイテムの名前。 説明 文字列 アイテムの簡単な要約。 作成日時 日付 アイテム作成のタイムスタンプ。 更新日時 日付 最新の更新のタイムスタンプ。 2\ ユーザー コレクション このコレクションはユーザーの資格情報と認証の詳細を扱います。 フィールド タイプ 詳細 id オブジェクトid 自動生成されたユニークid。 ユーザー名 文字列 ユーザーのユニーク識別子。 メール 文字列 ユーザーのユニークなメールアドレス。 パスワードハッシュ 文字列 安全な認証のためのハッシュ化されたパスワード。 作成日時 日付 アカウント作成のタイムスタンプ。 更新日時 日付 最後のアカウント更新タイムスタンプ。 これらのクラスとそのフィールドをback4appダッシュボードで直接作成できます。 新しいクラスを作成 タイプを選択し、フィールドに名前を付け、デフォルト値を割り当て、必須オプションを設定することで、列を追加できます。 列を作成 back4appのaiエージェントを使用したスキーマ生成 back4appのaiエージェントは、説明に基づいてデータモデルを自動生成することでスキーマ作成を簡素化します。この機能はプロジェクトのセットアップを加速し、スキーマがcrud要件に合致することを保証します。 aiエージェントの利用方法 aiエージェントを開く back4appのダッシュボードにログインし、プロジェクト設定でaiエージェントを見つけます。 スキーマを説明する 必要なコレクションとフィールドの詳細な説明を入力します。 レビューと確認 処理後、aiエージェントが提案されたスキーマを表示します。レビューして確認し、適用します。 サンプル説明 create the following collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated) \ title string \ description string \ createdat date (auto generated) \ updatedat date (auto updated) 2\) collection users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ passwordhash string \ createdat date (auto generated) \ updatedat date (auto updated) このai支援アプローチは時間を節約し、アプリのための構造化されたデータモデルを保証します。 ステップ3 – 管理アプリの有効化とcrud操作の実行 管理アプリの概要 back4app管理アプリは、効率的なバックエンドデータ管理のためのコード不要のインターフェースを提供します。直感的なドラッグアンドドロップ機能を使用して、レコードの追加、表示、変更、削除などのcrud操作を簡単に実行できます。 管理アプリの有効化 「その他」セクションに移動 し、back4appダッシュボードで。 「管理アプリ」を選択 し、「 管理アプリを有効にする。 管理者の資格情報を設定 し、初期の管理者アカウントを設定します。これにより、 b4aadminuser などの役割やシステムクラスが確立されます。 管理アプリを有効にする 有効化後、管理アプリにログインしてアプリケーションのデータを管理します。 管理アプリダッシュボード 管理アプリを通じたcrud操作の管理 管理アプリ内で、次のことができます。 レコードを挿入する “レコードを追加”オプションを使用して、 アイテム のようなコレクションに新しいエントリを作成します。 レコードを表示および編集する 任意のレコードをクリックして詳細を確認したり、フィールドを変更したりします。 レコードを削除する もはや必要のないレコードを削除します。 このシンプルなインターフェースはデータ管理を効率化し、全体的な使いやすさを向上させます。 ステップ4 – javascriptアプリをback4appに接続する バックエンドが設定されたら、次のステップはjavascriptアプリケーションをback4appと統合することです。 オプションa parse javascript sdkを利用する parse sdkを含める npmを使用している場合は、次のコマンドを実行してsdkをインストールします npm install parse アプリケーションでparseを初期化する 初期化ファイルを作成します（例 parseconfig js ) // parseconfig js import parse from 'parse'; parse initialize("your application id", "your javascript key"); parse serverurl = 'https //parseapi back4app com'; 3\ implement crud functions for example, create a module to handle item operations ```javascript // itemsservice js import parse from 'parse'; export const getitems = async () => { const query = new parse query("items"); try { const results = await query find(); return results; } catch (error) { console error("error retrieving items ", error); return \[]; } }; export const createitem = async (title, description) => { const item = parse object extend("items"); const item = new item(); item set("title", title); item set("description", description); try { await item save(); console log("item created successfully "); } catch (error) { console error("error creating item ", error); } }; export const updateitem = async (objectid, newtitle, newdescription) => { const query = new parse query("items"); try { const item = await query get(objectid); item set("title", newtitle); item set("description", newdescription); await item save(); console log("item updated successfully "); } catch (error) { console error("error updating item ", error); } }; export const deleteitem = async (objectid) => { const query = new parse query("items"); try { const item = await query get(objectid); await item destroy(); console log("item deleted successfully "); } catch (error) { console error("error deleting item ", error); } }; オプションb restまたはgraphqlの使用 parse sdkを使用しない場合は、rest呼び出しを通じてback4appと対話できます。たとえば、restを使用してアイテムを取得するには import fetch from 'node fetch'; export const fetchitemsrest = async () => { try { const response = await fetch('https //parseapi back4app com/classes/items', { method 'get', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', }, }); const data = await response json(); console log("items fetched ", data); } catch (error) { console error("error fetching items via rest ", error); } }; 必要に応じて、これらのapi呼び出しをjavascriptモジュール内に統合してください。 ステップ5 – バックエンドの保護 アクセス制御の設定 アクセス制御リスト（acl）を設定することで、データの安全性を確保します。たとえば、作成者のみがアクセスできるアイテムを作成するには import parse from 'parse'; export const createprivateitem = async (title, description, user) => { const item = parse object extend("items"); const item = new item(); item set("title", title); item set("description", description); const acl = new parse acl(); acl setreadaccess(user, true); acl setwriteaccess(user, true); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { await item save(); console log("private item created successfully "); } catch (error) { console error("error creating private item ", error); } }; クラスレベルの権限（clp）の調整 back4appダッシュボードを通じてコレクションのデフォルトアクセスルールを設定し、認証されたユーザーのみが機密データにアクセスできるようにします。 ステップ6 – ユーザー認証の実装 ユーザーアカウントの設定 back4appは、認証を処理するために組み込みのparse userクラスを使用します。javascriptアプリケーションで、ユーザー登録とログインを次のように管理します import parse from 'parse'; export const signupuser = async (username, password, email) => { const user = new parse user(); user set("username", username); user set("password", password); user set("email", email); try { await user signup(); console log("user registered successfully!"); } catch (error) { console error("error during sign up ", error); } }; export const loginuser = async (username, password) => { try { const user = await parse user login(username, password); console log("logged in as ", user get("username")); } catch (error) { console error("login failed ", error); } }; この方法は、セッション管理、パスワード回復などに拡張できます。 ステップ 7 – javascript アプリケーションのデプロイ back4app はデプロイを簡素化します。docker コンテナ化などの方法を使用して、javascript アプリをデプロイできます。 7 1 アプリケーションの構築 アプリケーションをバンドルする ビルドツール（webpack や同様のバンドラーなど）を使用してコードをコンパイルします。 ビルドを確認する バンドルされたファイルに必要なすべてのモジュールとアセットが含まれていることを確認します。 7 2 プロジェクト構造の整理 典型的な javascript プロジェクト構造は次のようになります basic crud app javascript/ \| src/ \| | index js \| | parseconfig js \| | services/ \| | itemsservice js \| | authservice js \| public/ \| | index html \| package json \| readme md 例 parseconfig js // parseconfig js import parse from 'parse'; parse initialize("your application id", "your javascript key"); parse serverurl = 'https //parseapi back4app com'; 7 3 javascript アプリの docker 化 コンテナ化を選択する場合は、プロジェクトのルートに dockerfile を含めてください \# use an official node js runtime as the base image from node 14 alpine \# set the working directory in the container workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy the rest of the application code copy \# expose the application port (adjust if necessary) expose 3000 \# define the command to run your application cmd \["npm", "start"] 7 4 back4app ウェブデプロイメントによるデプロイ github リポジトリを接続する javascript プロジェクトが github にホストされていることを確認してください。 デプロイ設定を構成する back4app ダッシュボードで、 web deployment オプションを使用してリポジトリをリンクします（例 basic crud app javascript ) そして、希望のブランチを選択します。 ビルドおよび出力コマンドを設定する ビルドコマンド（例えば npm run build ) と出力ディレクトリを指定します。 デプロイ 「 deploy 」を押して、アプリケーションがライブになるまでログを監視します。 ステップ 8 – 最終的な考えと今後の改善 おめでとうございます！あなたはback4appと統合されたjavascriptベースのcrudアプリケーションを成功裏に開発しました。 「 basic crud app javascript 」というプロジェクトを設定し、あなたの items と users コレクションを構造化し、back4app admin appを使用してバックエンドを管理しました。 さらに、parse sdk（またはrest api）を介してjavascriptアプリケーションを接続し、堅牢なセキュリティ対策を実装しました。 次に探求すること： 機能を強化する： 検索フィルター、詳細ビュー、またはリアルタイムデータ更新などの機能を追加することを検討してください。 バックエンド機能を拡張する： クラウド機能、サードパーティapiの統合、または高度な役割ベースのアクセス制御の実装を検討してください。 専門知識を深める： back4appのドキュメント https //www back4app com/docs を訪れて、アプリをさらに最適化するための追加チュートリアルを探求してください。 コーディングを楽しんで、あなたの高度なjavascript crudアプリケーションを構築してください！