How to Build a Basic CRUD App with RedwoodJS? A Step-by-Step Guide

概要 このガイドでは、redwoodjsを使用して基本的なcrud（作成、読み取り、更新、削除）アプリケーションを作成する方法を学びます。 このチュートリアルでは、back4appをバックエンドサービスとしてプロジェクトを設定し、堅牢なデータベーススキーマを設計し、それをredwoodjsフロントエンドと統合するプロセスを説明します。 これらの手順に従うことで、データを効果的に管理し、現代の開発技術を活用した生産準備が整ったアプリケーションを構築します。 重要な洞察 強力なバックエンドサービスを使用してデータを効率的に処理するcrudアプリケーションの作成をマスターします。 スケーラブルなデータベースを設計し、redwoodjsインターフェースと統合してユーザーインタラクションを向上させる方法を発見します。 crud操作を効率化するために、ノーコードのドラッグアンドドロップ管理ツールであるback4app admin appの使用を探ります。 dockerを使用したコンテナ化を含むデプロイメント戦略を学び、ウェブアプリケーションを迅速に立ち上げます。 前提条件 始める前に、以下の内容を確認してください 新しいプロジェクトが準備されたアクティブなback4appアカウント。 ガイダンスが必要な場合は、 back4appの始め方 https //www back4app com/docs/get started/new parse app を確認してください。 redwoodjsの開発環境が設定されていること。 redwoodjs cliを使用してアプリケーションを作成します。node js（バージョン14以降）がインストールされていることを確認してください。 javascript、redwoodjs、およびgraphqlの基本的な理解。 詳細については、 redwoodjsドキュメント https //redwoodjs com/docs/introduction を訪れてください。 ステップ1 – プロジェクトを開始する 新しいback4appプロジェクトを開始する back4appダッシュボードにログインします。 「新しいアプリ」を選択します。 新しいプロジェクトを開始するために。 プロジェクトに名前を付けます basic crud app redwoodjs そして設定手順に従います。 新しいプロジェクトを作成 あなたのプロジェクトは今、ダッシュボードに表示され、バックエンドの設定と管理の基盤を築きます。 ステップ2 – データベーススキーマの作成 データモデルの構造化 このcrudアプリのために、いくつかのコレクションを設計します。以下は、2つの重要なコレクションの例と必要なフィールドです。これらの設定は、信頼性のあるcrud機能を有効にするために重要です。 1\ コレクション アイテム このコレクションには各アイテムの詳細が含まれています。 フィールド データ型 目的 id オブジェクトid 自動生成された一意の識別子。 タイトル 文字列 アイテムの名前またはタイトル。 説明 文字列 アイテムを説明する短い要約。 作成日時 日付 レコード作成タイムスタンプ。 更新日時 日付 最新の更新のタイムスタンプ。 2\ コレクション ユーザー このコレクションはユーザーの資格情報と詳細を保存します。 フィールド データ型 目的 id オブジェクトid 自動生成された一意の識別子。 ユーザー名 文字列 ユーザーのユニーク識別子。 メール 文字列 ユーザーのユニークなメールアドレス。 パスワードハッシュ 文字列 認証のための暗号化されたパスワード。 作成日時 日付 アカウント作成のタイムスタンプ。 更新日時 日付 最新の更新のタイムスタンプ。 これらのコレクションは、back4appダッシュボードで新しいクラスを作成し、適切なカラムを追加することで直接構成できます。 新しいクラスを作成 各フィールドをそのタイプを選択し、名前を付け、デフォルトまたは必須のステータスを設定することで定義します。 カラムを作成 スキーマ作成のためのback4app aiエージェントの利用 ダッシュボードからアクセスできるback4app aiエージェントは、記述的なプロンプトに基づいてデータベーススキーマを自動的に生成できます。この機能は、アプリケーションの一貫したスキーマの設定を大幅に加速します。 aiエージェントの使用方法 aiエージェントを起動する back4appのダッシュボードまたはプロジェクト設定からエージェントにアクセスします。 データモデルを詳細に説明する 必要なコレクションとフィールドを概説する包括的なプロンプトを入力します。 レビューと実装 生成されたスキーマの提案を確認し、それをプロジェクトに適用します。 サンプルプロンプト create these collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated primary key) \ title string \ description string \ created at date (auto generated) \ updated at date (auto updated) 2\) collection users \ fields \ id objectid (auto generated primary key) \ 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 – redwoodjsをback4appと統合する バックエンドが設定され、管理アプリを通じて管理できるようになったので、redwoodjsのフロントエンドをback4appに接続する時が来ました。 graphql api統合の使用 redwoodjsはgraphqlを中心に構築されており、api呼び出しを介してback4appと統合するのに最適です。sdkを使用する代わりに、graphqlクエリとミューテーションを使用してバックエンドと対話します。 redwoodjsプロジェクトの設定 新しいredwoodjsアプリケーションを作成します： yarn create redwood app basic crud app redwood プロジェクトディレクトリに移動します： cd basic crud app redwood 環境変数を設定します： あなたの env ファイルに、back4appの認証情報を追加します： back4app app id=your application id back4app rest api key=your rest api key back4app server url=https //parseapi back4app com redwoodjs cellsを使用したデータの取得 redwoodjs cellsはデータの取得を簡素化します。アイテムを取得するセルの例を示します： // web/src/components/itemscell/itemscell js export const query = gql` query items query { items itemscollection { id title description } } `; export const loading = () => \<div>loading items…\</div>; export const empty = () => \<div>no items available \</div>; export const failure = ({ error }) => \<div>error {error message}\</div>; export const success = ({ items }) => { return ( \<ul> {items map((item) => ( \<li key={item id}> \<strong>{item title}\</strong> — {item description} \</li> ))} \</ul> ); }; redwoodjsコンポーネントに同様のgraphqlクエリやミューテーションを統合して、crud操作を実行できます。 ステップ5 – バックエンドのセキュリティ アクセス制御の実装 オブジェクトに直接アクセス制御リスト（acl）を設定することで、データを保護します。たとえば、プライベートアイテムを作成する際には、所有者のみが読み取り/書き込み権限を持つことを確認できます。 async function createprivateitem(itemdata, owner) { const response = await fetch(`${process env back4app server url}/classes/items`, { method 'post', headers { 'x parse application id' process env back4app app id, 'x parse rest api key' process env back4app rest api key, 'content type' 'application/json' }, body json stringify({ title itemdata title, description itemdata description, acl { \[owner] { read true, write true }, " " { read false, write false } } }) }); return response json(); } クラスレベルの権限の設定 back4appダッシュボード内で、各コレクションのクラスレベルの権限（clp）を設定し、認証されたユーザーまたは特定の役割にアクセスを制限して、データの安全性を確保します。 ステップ6 – ユーザー認証の管理 アカウント管理の設定 back4appは堅牢なユーザーシステムを活用しており、redwoodjsに統合してユーザー認証を行うことができます。redwoodjsアプリ内で、api呼び出しを通じてユーザーのサインアップとログインを処理します。 例：ユーザー登録 // web/src/components/auth/signup js import { usestate } from 'react'; const signup = () => { const \[username, setusername] = usestate(''); const \[email, setemail] = usestate(''); const \[password, setpassword] = usestate(''); const handlesignup = async (e) => { e preventdefault(); try { const response = await fetch(`${process env back4app server url}/users`, { method 'post', headers { 'x parse application id' process env back4app app id, 'x parse rest api key' process env back4app rest api key, 'content type' 'application/json' }, body json stringify({ username, email, password }) }); const data = await response json(); if (data error) { alert('sign up failed ' + data error); } else { alert('user successfully registered!'); } } catch (error) { console error('registration error ', error); } }; return ( \<form onsubmit={handlesignup}> \<input type="text" placeholder="username" value={username} onchange={(e) => setusername(e target value)} /> \<input type="email" placeholder="email" value={email} onchange={(e) => setemail(e target value)} /> \<input type="password" placeholder="password" value={password} onchange={(e) => setpassword(e target value)} /> \<button type="submit">sign up\</button> \</form> ); }; export default signup; ログインおよびユーザーセッションの維持に対しても同様の方法を適用できます。 ステップ 7 – web デプロイメントを介して redwoodjs フロントエンドをデプロイする back4app の web デプロイメント機能により、redwoodjs フロントエンドのホスティングがシームレスになります。コードを本番環境にプッシュするための手順は次のとおりです 7 1 プロダクションバージョンを構築する ターミナルでプロジェクトフォルダを開きます。 ビルドコマンドを実行します yarn rw build これにより、最適化された静的ファイルを含む web/dist フォルダが生成されます。 ビルド出力を確認します web/dist フォルダにすべての必要なアセットとともに index html が含まれていることを確認してください。 7 2 ソースコードを整理してコミットする あなたのリポジトリは、redwoodjsアプリケーションの完全なソースをホストする必要があります。典型的な構造は次のようになります basic crud app redwood/ ├── api/ ├── web/ │ ├── dist/ │ ├── src/ │ │ ├── components/ │ │ │ ├── itemscell/ │ │ │ └── auth/ │ │ └── app js │ └── index html ├── env └── package json githubにコミットする gitを初期化する（必要な場合）： git init ファイルをステージする： git add コードをコミットする： git commit m "redwoodjs crudフロントエンドの初期コミット" githubリポジトリを作成する （例： basic crud app redwood ）そしてコードをプッシュする： git remote add origin https //github com/your username/basic crud app redwood git git push u origin main 7 3 ウェブデプロイメントとの統合 ウェブデプロイメントにアクセス あなたのback4appダッシュボードからプロジェクト（basic crud app redwood）の下で。 githubアカウントを接続 まだ接続していない場合は、指示に従ってください。 リポジトリとブランチを選択 （例： main ）あなたのredwoodjsコードを含む。 7 4 デプロイメントパラメータの設定 ビルドコマンド： yarn rw build を指定してください。リポジトリに事前ビルドされた配布が含まれていない場合。 出力ディレクトリ： 出力ディレクトリを web/dist として設定してください。 環境変数： 必要な環境変数を含めてください。例えば、あなたのback4appキーなど。 7 5 dockerによるコンテナ化 デプロイメントにdockerを好む場合は、リポジトリに dockerfile を含めてください。例えば \# use an official node image for building the app from node 16 alpine as builder \# set the working directory workdir /app \# copy dependency definitions copy package json / \# install dependencies run yarn install \# copy the project files copy \# build the redwoodjs app run yarn rw build \# use nginx to serve the static files from nginx\ stable alpine copy from=builder /app/web/dist /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 7 6 アプリケーションのデプロイ デプロイボタンを押します back4appで設定を最終化した後。 デプロイプロセスを監視します back4appがコードを取得し、プロジェクトをビルドし、コンテナ化された環境にデプロイします。 アプリケーションのurlを取得します デプロイが完了すると、redwoodjsアプリがホストされているurlが提供されます。 7 7 デプロイを検証する 提供されたurlを開きます ブラウザでサイトが読み込まれることを確認します。 アプリケーションの機能をテストします すべてのページ、ルート、アセットが正しく読み込まれることを確認します。 必要に応じてトラブルシューティングします 必要なデバッグのためにブラウザの開発者ツールとback4appのデプロイログを利用します。 ステップ8 – 最終的な考えと今後の方向性 back4appを使用してredwoodjsベースのcrudアプリケーションを構築したことをおめでとうございます！ 「 basic crud app redwood 」というタイトルのプロジェクトを成功裏に設定し、アイテムとユーザーのための詳細なデータベースコレクションを作成し、堅牢なデータ管理とセキュリティを備えたクリーンなフロントエンドを統合しました。 次は何ですか？ フロントエンドを洗練させる 詳細なアイテムページ、検索機能、リアルタイム更新などの機能でredwoodjsアプリケーションを強化しましょう。 高度な機能を組み込む サーバーレス機能、サードパーティの統合、またはより複雑なアクセス制御を追加することを検討してください。 追加リソースを探る 「 back4appのドキュメント https //www back4app com/docs 」や「 redwoodjsガイド https //redwoodjs com/docs 」を深く掘り下げて、さらなる改善を図りましょう。 このチュートリアルに従うことで、スケーラブルなcrudバックエンドを開発し、back4appを使用してモダンなredwoodjsフロントエンドとシームレスに統合するためのノウハウを手に入れました。コーディングの旅を楽しんでください！