Quickstarters
CRUD Samples
Node.jsでCRUDアプリを作成するには?
31 分
概要 このウォークスルーでは、node jsを使用して完全なcrud(作成、読み取り、更新、削除)アプリケーションを開発する方法を学びます。 データ管理を簡素化するために、バックエンドサービスとしてback4appを利用します。このガイドでは、back4appプロジェクトの設定、動的データモデルの設計、およびnode jsを使用したcrud操作の実装について説明します。 最初に、 basic crud app node という名前のback4appプロジェクトを設定します。これは、堅牢な非関係データストレージソリューションを提供します。 次に、コレクションとフィールドを手動で定義するか、back4app aiエージェントを活用してデータスキーマを設計します。 次に、データ操作のためのユーザーフレンドリーなドラッグアンドドロップインターフェースであるback4app admin appを通じてバックエンドを管理します。 最後に、parse javascript sdk(または必要に応じてrest/graphql api)を使用してnode jsアプリケーションをback4appと統合し、安全なアクセス制御を確保します。 このチュートリアルの終わりまでに、基本的なcrud操作とユーザー認証、データセキュリティを実行できる本番環境向けのnode jsアプリケーションを構築できるようになります。 学ぶこと 効果的なローコードバックエンドを使用してnode jsベースのcrudアプリケーションを作成する方法。 スケーラブルなバックエンドを設計し、それをnode jsアプリに接続するための戦略。 back4app admin appを利用して、作成、読み取り、更新、削除操作を効率的に行う方法。 dockerコンテナ化を含むデプロイメント技術を使用して、node jsアプリケーションを効率的に立ち上げる方法。 前提条件 始める前に、次のものを用意してください 新しく設定されたプロジェクトを持つback4appアカウント。 助けが必要ですか? back4appの始め方 https //www back4app com/docs/get started/new parse app を訪れてください。 node jsの開発環境。 visual studio codeのようなコードエディタを使用し、node js(v14以降)がインストールされていることを確認してください。 node js、非同期プログラミング、rest apiの基本的な知識。 必要に応じて、 node jsのドキュメント https //nodejs org/en/docs/ を参照してください。 ステップ 1 – プロジェクトの設定 新しい back4app プロジェクトの作成 back4app アカウントにログインします。 ダッシュボードから「新しいアプリ」ボタンをクリックします。 プロジェクトに名前を付けます: basic crud app node そして、画面の指示に従って設定を完了します。 新しいプロジェクトを作成 作成後、プロジェクトはダッシュボードに表示され、バックエンドの設定が可能になります。 ステップ 2 – データスキーマの作成 データ構造の定義 この crud アプリケーションでは、back4app プロジェクトにいくつかのコレクションを作成します。以下は、基本的な crud 機能に必要な主要なコレクションとフィールドの例です。 1\ アイテムコレクション このコレクションは、各アイテムの詳細を保存します。 フィールド タイプ 説明 id オブジェクトid 自動生成された一意の識別子。 タイトル 文字列 アイテムの名前。 説明 文字列 アイテムの簡単な概要。 作成日時 日付 アイテムが追加された時刻のマーク。 更新日時 日付 最後の更新を示すタイムスタンプ。 2\ ユーザーコレクション このコレクションはユーザーの資格情報と認証データを処理します。 フィールド タイプ 説明 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) この方法は、一貫性があり最適化されたデータモデルを保証します。 ステップ3 – 管理アプリの有効化とcrud操作の実行 管理アプリの概要 back4app管理アプリは、バックエンドデータを管理するためのノーコードインターフェースを提供します。ドラッグアンドドロップのデザインにより、レコードの追加、表示、更新、削除などのcrudタスクを簡単に実行できます。 管理アプリの有効化 「その他」セクションに移動します あなたのback4appダッシュボードで。 「管理アプリ」を選択します そしてクリックします 「管理アプリを有効にする」。 管理者の資格情報を設定します 初期管理者アカウントを設定することによって。このプロセスでは、役割(例: b4aadminuser ) とシステムクラスも作成されます。 管理アプリを有効にする 有効化後、管理アプリにログインしてデータを管理します。 管理アプリダッシュボード 管理アプリを使用したcrud操作の管理 管理アプリ内でできること レコードの挿入 コレクション内の「レコードを追加」ボタンを使用して(例えば、アイテム)、新しいエントリを作成します。 レコードのレビューと編集 任意のレコードをクリックして、その詳細を確認したり、フィールドを更新したりします。 レコードの削除 もはや必要のないエントリを削除します。 このユーザーフレンドリーなインターフェースは、データ管理を大幅に簡素化します。 ステップ 4 – node js アプリケーションを back4app にリンクする バックエンドが設定されたので、node js アプリを back4app に接続する時が来ました。 オプション a parse javascript sdk を使用する parse javascript sdkをインストールします プロジェクトディレクトリで次のコマンドを実行します npm install parse node jsアプリケーションでparseを初期化します 設定ファイルを作成します(例 parseconfig js ) // parseconfig js const parse = require('parse/node'); parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; module exports = parse; 3\ implement crud operations for example, create a service to manage items ```javascript // itemsservice js const parse = require(' /parseconfig'); async function fetchitems() { const items = parse object extend('items'); const query = new parse query(items); try { const results = await query find(); console log('fetched items ', results); return results; } catch (error) { console error('error retrieving items ', error); } } async function createitem(title, description) { const items = parse object extend('items'); const item = new items(); item set('title', title); item set('description', description); try { await item save(); console log('item successfully created '); } catch (error) { console error('error creating item ', error); } } async function updateitem(objectid, newtitle, newdescription) { const items = parse object extend('items'); 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); } } async function deleteitem(objectid) { const items = parse object extend('items'); 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); } } module exports = { fetchitems, createitem, updateitem, deleteitem, }; オプションb restまたはgraphqlの使用 parse sdkを使用したくない場合は、rest api呼び出しを介してback4appと対話できます。たとえば、node jsを使用してアイテムを取得する方法は次のとおりです const https = require('https'); function fetchitemsrest() { const options = { hostname 'parseapi back4app com', path '/classes/items', method 'get', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }; const req = https request(options, res => { let data = ''; res on('data', chunk => data += chunk); res on('end', () => console log('response ', data)); }); req on('error', error => console error('error ', error)); req end(); } fetchitemsrest(); 必要に応じて、これらのrest呼び出しをnode jsサービスに統合してください。 ステップ5 – バックエンドセキュリティの強化 アクセス制御リスト(acl)の設定 オブジェクトにaclを設定することでデータセキュリティを強化します。たとえば、アイテムを作成者のみにアクセス可能にするには const parse = require(' /parseconfig'); async function createprivateitem(title, description, owner) { const items = parse object extend('items'); const item = new items(); item set('title', title); item set('description', description); const acl = new parse acl(); acl setreadaccess(owner, true); acl setwriteaccess(owner, 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 saving private item ', error); } } クラスレベルの権限(clp)の設定 back4appダッシュボードでclpを調整して、デフォルトのセキュリティルールを強制し、認証されたユーザーのみが特定のコレクションと対話できるようにします。 ステップ6 – ユーザー認証の実装 ユーザー管理の設定 back4appは、認証を管理するためにparseの組み込みユーザーコレクションを活用します。node jsアプリで、以下のようにユーザーのサインアップとログインを実装します const parse = require(' /parseconfig'); async function signup(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); } } async function login(username, password) { try { const user = await parse user login(username, password); console log('user logged in ', user get('username')); } catch (error) { console error('login error ', error); } } module exports = { signup, login }; セッション管理や追加の認証機能に対しても同様のアプローチを使用できます。 ステップ 7 – node js アプリケーションのデプロイ back4app はスムーズなデプロイプロセスを提供します。docker コンテナ化を含むいくつかの方法を使用して、node js アプリをデプロイできます。 7 1 アプリケーションの構築 コンパイルとパッケージ 好みのビルドツール(npm や yarn など)を使用してアプリケーションを準備します。 例えば、次のコマンドを実行します npm run build ビルドを確認する プロダクションバンドルに必要なすべてのモジュールとファイルが含まれていることを確認します。 7 2 プロジェクトレイアウトの整理 典型的な node js プロジェクト構造は次のようになります basic crud app node/ \| src/ \| | controllers/ \| | | itemscontroller js \| | | authcontroller js \| | models/ \| | | item js \| | | user js \| | routes/ \| | itemsroutes js \| | authroutes js \| parseconfig js \| package json \| readme md 7 3 node js アプリの docker 化 コンテナ化されたデプロイメントを好む場合は、 dockerfile をプロジェクトのルートに追加してください \# use an official node js runtime as a parent image from node 14 alpine \# set the working directory workdir /usr/src/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 \# start the node js application cmd \["npm", "start"] 7 4 back4app webデプロイメントによるデプロイ githubリポジトリを接続する node jsのソースコードをgithubにホストします。 デプロイ設定を構成する back4appダッシュボードで、 webデプロイメント オプションを選択し、リポジトリ(例 basic crud app node )をリンクし、希望のブランチを選択します。 ビルドおよび出力コマンドを設定する ビルドコマンド(例 npm run build )を定義し、出力フォルダを指定します。 アプリをデプロイする 「 デプロイ 」をクリックし、アプリケーションがライブになるまでログを監視します。 ステップ8 – まとめと今後の改善 おめでとうございます!あなたは今、back4appと統合されたnode js crudアプリケーションを構築しました。 「 basic crud app node 」というプロジェクトを設定し、アイテムとユーザーのコレクションを確立し、back4app管理アプリでバックエンドを管理しました。 さらに、parse javascript sdk(またはrest/graphql)を介してnode jsアプリを接続し、強力なセキュリティ対策を実装しました。 次のステップ: アプリケーションを強化する: 高度なフィルタリング、詳細ビュー、またはリアルタイム更新などの機能を追加することを検討してください。 バックエンド機能を拡張する: クラウド機能、サードパーティapi統合、または役割ベースのアクセス制御を探求してください。 専門知識を深める: 「 back4appのドキュメント https //www back4app com/docs 」や追加のチュートリアルをチェックして、アプリケーションをさらに洗練させてください。 コーディングを楽しんで、node js crudアプリケーションの旅に幸運を祈ります!