How to Create a CRUD App with Gatsby?

はじめに このウォークスルーでは、gatsbyを使用してcrud（作成、読み取り、更新、削除）ウェブアプリケーションを構築する方法を発見します。 データを簡単に管理するために、back4appをクラウドバックエンドとして使用します。このガイドでは、back4appプロジェクトの設定、柔軟なスキーマの定義、gatsbyアプリをrestまたはgraphql api呼び出しで接続してcrud操作を実行する方法を説明します。 最初に、「 basic crud app gatsby 」という名前のback4appプロジェクトを設定します。このプロジェクトは、堅牢な非関係データベースへのアクセスを提供します。back4appダッシュボードでクラスとフィールドを手動で作成するか、back4appのaiエージェントを活用してデータスキーマを設計します。 次に、データ管理タスクを簡単に処理するために、ドラッグアンドドロップインターフェースであるback4app admin appを使用します。 最後に、gatsbyアプリケーションをback4app api（restまたはgraphql経由）と統合して、安全なcrud操作を実行します。 このチュートリアルの終わりまでに、基本的なcrud操作を行い、安全なデータ処理とユーザー認証を備えた生産準備が整ったgatsbyアプリを開発することができます。 重要なポイント gatsbyを使用して、ローコードバックエンドに支えられたcrudアプリケーションを作成する方法を学びます。 バックエンドの構造を理解し、現代のgatsbyサイトとリンクさせる方法を学びます。 back4appの直感的な管理アプリを利用して、データの作成、読み取り、更新、削除を管理します。 gatsbyアプリのためのコンテナ化戦略を含むデプロイメントオプションを発見します。 前提条件 始める前に、次のものを用意してください アクティブなプロジェクトを持つback4appアカウント。 助けが必要ですか？ back4appの始め方 https //www back4app com/docs/get started/new parse app をご覧ください。 gatsby cliがインストールされたnode js環境。 node js https //nodejs org/ を使用し、 npm install g gatsby cli でgatsbyをインストールします。 react、graphql、およびrest apiに関する知識。 必要に応じて、 reactのドキュメント https //reactjs org/docs/getting started html を確認してください。 ステップ 1 – プロジェクトの設定 新しい back4app プロジェクトの作成 back4app アカウントにログインします。 「新しいアプリ」をクリックします。 ダッシュボードから。 プロジェクトに名前を付けます： basic crud app gatsby そして設定手順を完了します。 新しいプロジェクトを作成 作成後、プロジェクトはダッシュボードに表示され、バックエンドの設定が準備されます。 ステップ 2 – データモデルの定義 スキーマの設定 このcrudアプリのために、back4appでいくつかのクラスを設定する必要があります。以下は、基本的なクラスとフィールドの例です。 1\ アイテムクラス このクラスは各アイテムの詳細を保存します。 フィールド データ型 説明 id オブジェクトid 自動生成された一意の識別子。 タイトル 文字列 アイテムの名前。 説明 文字列 アイテムの簡単な説明。 作成日時 日付 アイテムが作成されたタイムスタンプ。 更新日時 日付 アイテムが最後に更新されたタイムスタンプ。 2\ ユーザークラス このクラスはユーザーの資格情報と認証を処理します。 フィールド データ型 説明 id オブジェクトid 自動生成されたユニークid。 ユーザー名 文字列 ユーザーのユニーク識別子。 メール 文字列 ユーザーのユニークなメールアドレス。 パスワードハッシュ 文字列 ログイン用の暗号化されたパスワード。 作成日時 日付 アカウント作成のタイムスタンプ。 更新日時 日付 最新のアカウント更新のタイムスタンプ。 これらのクラスとフィールドをback4appダッシュボードに直接追加できます。 新しいクラスを作成 データ型を選択し、フィールドに名前を付け、デフォルトを設定し、必須フィールドをマークすることでフィールドを定義できます。 カラムを作成 スキーマ生成のためのback4app aiエージェントの使用 back4app aiエージェントは、あなたの仕様に基づいて自動的にスキーマを構築できます。これにより、セットアップが迅速化され、データモデルがすべてのcrud操作をサポートすることが保証されます。 aiエージェントの使い方 aiエージェントを開く back4appダッシュボードにサインインし、プロジェクト設定の下にあるaiエージェントを見つけます。 要件を入力する 必要なクラスとフィールドを説明します。 レビューと適用 エージェントがスキーマを提案します。それをレビューし、実装することを確認します。 例のプロンプト create the following classes in my back4app project 1\) class items \ fields \ id objectid (auto generated) \ title string \ description string \ createdat date (auto generated) \ updatedat date (auto updated) 2\) class 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 – gatsby アプリを back4app に接続する バックエンドが設定されたら、次のフェーズは gatsby アプリケーションを back4app にリンクすることです。 gatsby での api コールの使用 rest または graphql コールを使用して back4app と通信します。もう一つの選択肢は sdk を使用することです。 rest を使用したデータの取得 javascript の fetch api を使用してデータを取得できます。たとえば、back4app からアイテムを読み込むには // src/services/api js export const fetchitems = async () => { 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(); return data results; } catch (error) { console error('error fetching items ', error); return \[]; } }; rest を介してデータを送信する 新しいアイテムを追加するには、post リクエストを使用します // src/services/api js export const createitem = async (title, description) => { try { const response = await fetch('https //parseapi back4app com/classes/items', { method 'post', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json', }, body json stringify({ title, description }), }); const data = await response json(); return data; } catch (error) { console error('error creating item ', error); } }; 同様に、put/post および delete メソッドを使用して更新および削除機能を実装できます。 これらのapi呼び出しをgatsbyページまたはコンポーネントに統合して、データを動的に管理します。 ステップ5 – バックエンドのセキュリティ アクセス制御の実装 back4appでアクセス制御リスト（acl）を設定してデータを保護します。たとえば、所有者のみに表示されるアイテムを作成するには // example payload for a private item const privateitem = { title 'private title', description 'this item is private', acl { " " { "read" false, "write" false }, "user object id" { "read" true, "write" true } } }; クラスレベルの権限（clp） back4appダッシュボードでclpを設定して、デフォルトのアクセスルールを強制し、認証されたユーザーのみが特定のクラスにアクセスできるようにします。 ステップ6 – ユーザー認証の追加 gatsbyでのユーザーアカウントの設定 back4appは、認証のためにparseの組み込みユーザークラスを活用します。gatsbyアプリでは、api呼び出しを介してユーザー登録とログインを管理します。 例：ユーザー登録 // src/services/auth js export const signup = async (username, password, email) => { try { const response = await fetch('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', }, body json stringify({ username, password, email }), }); const data = await response json(); return data; } catch (error) { console error('error during sign up ', error); } }; 例：ユーザーログイン // src/services/auth js export const login = async (username, password) => { try { const response = await fetch(`https //parseapi back4app com/login?username=${username}\&password=${password}`, { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', }, }); const data = await response json(); return data; } catch (error) { console error('login error ', error); } }; このアプローチは、セッション管理、パスワードリセットなどに拡張できます。 ステップ7 – gatsbyアプリケーションのデプロイ back4appはスムーズなデプロイプロセスをサポートしています。コンテナ化を含むいくつかの方法を使用して、gatsbyアプリをデプロイできます。 7 1 gatsbyサイトの構築 依存関係のインストール 実行 npm install サイトのビルド gatsbyビルドコマンドを使用 gatsby build ローカルでのテスト 機能を確認するために、プロダクションビルドを提供します gatsby serve 7 2 プロジェクト構造の概要 典型的なgatsbyプロジェクトの構造は次のようになります basic crud app gatsby/ \| node modules/ \| src/ \| | components/ \| | | itemform js \| | | itemlist js \| | pages/ \| | index js \| | login js \| static/ \| gatsby config js \| package json \| readme md 7 3 あなたのgatsbyアプリケーションのdocker化 コンテナ化されたデプロイメントを好む場合は、 dockerfile を追加してください。 \# use an official node js image as the base from node 14 alpine \# set the working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy the remaining source code copy \# build the gatsby site run npm run build \# expose port (adjust if needed) expose 8000 \# serve the built site cmd \["npx", "gatsby", "serve", " h", "0 0 0 0"] 7 4 back4app web deploymentを介したデプロイ リポジトリをリンクする あなたのgatsbyソースコードをgithubにホストします。 デプロイメントを設定する back4appダッシュボードで、 web deployment を選択し、リポジトリ（例 basic crud app gatsby ）を接続し、ブランチを選択します。 ビルドコマンドを設定する ビルドコマンド（例 npm run build ）と出力ディレクトリを指定します。 デプロイする 「 デプロイ 」をクリックし、サイトがライブになるまでログを監視します。 ステップ8 – 結論と次のステップ 素晴らしい仕事です！あなたはback4appと統合されたgatsbyベースのcrudアプリケーションを構築しました。 「 basic crud app gatsby 」という名前のプロジェクトを設定し、データモデルを定義し、admin appでデータを管理し、rest/graphql api呼び出しを使用してgatsbyフロントエンドをback4appに接続しました。 次のステップ： アプリを強化する： 高度な検索、詳細ビュー、またはリアルタイム更新を追加することを検討してください。 バックエンド機能を拡張する： クラウド機能、サードパーティapi統合、または洗練された役割ベースのアクセス制御を探求してください。 もっと学ぶ： 追加の洞察やチュートリアルのために、 back4appのドキュメント https //www back4app com/docs を訪れてください。 コーディングを楽しんで、gatsby crudアプリケーションの構築を楽しんでください！