How to Create a CRUD Application with Remix?

概要 このウォークスルーでは、remix jsを使用してcrud（作成、読み取り、更新、削除）アプリケーションを構築する方法を学びます。 データストレージをシームレスに処理するために、バックエンドサービスとしてback4appを使用します。このガイドでは、back4appプロジェクトの設定、動的データスキーマの設計、およびremix jsアプリケーションでのcrud操作の接続について説明します。 最初に、back4appプロジェクトを設定します。これを basic crud app remix と呼び、スケーラブルな非関係データストアを提供します。 次に、back4appダッシュボードを介してコレクションとフィールドを手動で設定することによってデータモデルを作成します。または、統合されたaiエージェントを使用して自動設定を行うこともできます。 次に、データを簡単に管理できるユーザーフレンドリーなインターフェースであるback4app admin appを探索します。 最後に、rest api呼び出しを通じてremix jsアプリケーションをback4appに接続し、ユーザー認証とともにcrud機能が堅牢で安全であることを確保します。 このチュートリアルの終わりまでに、基本的なcrud操作と安全なユーザー管理が可能な、プロダクション準備が整ったremix jsアプリケーションを持つことができます。 学ぶこと remix jsと信頼できるバックエンドを使用してcrudアプリを構築する方法。 バックエンドの構造化とremix jsフロントエンドとの統合に関するベストプラクティス。 データ管理タスクを簡素化するためにback4app admin appを使用する方法。 dockerを使用したコンテナ化を含む、remix jsアプリケーションのデプロイ技術。 前提条件 始める前に、次のものを用意してください 新しいプロジェクトが準備されたback4appアカウント。 助けが必要ですか？ back4appの始め方 https //www back4app com/docs/get started/new parse app を訪れてください。 動作するremix js開発環境。 vs codeなどの最新のコードエディタを使用できます。node js（バージョン14以降）がインストールされている必要があります。 javascript、react、およびrestful apiの基本的な知識。 復習のために、 remixのドキュメント https //remix run/docs を確認してください。 ステップ 1 – プロジェクトの設定 新しい back4app プロジェクトの立ち上げ back4app アカウントにログインします。 ダッシュボードから「新しいアプリ」ボタンを押します。 プロジェクトに名前を付けます basic crud app remix そして、作成プロセスを完了するための手順に従います。 新しいプロジェクトを作成 プロジェクトが準備できると、ダッシュボードに表示され、バックエンドの基盤を提供します。 ステップ 2 – データモデルの作成 データ構造の確立 このcrudアプリケーションでは、back4appでいくつかのコレクションを定義します。以下は、crud機能をサポートする主要なコレクションとフィールドの例です。 1\ アイテムコレクション このコレクションは各アイテムの詳細を保存します。 フィールド データ型 説明 id オブジェクトid 自動生成された一意の識別子。 タイトル 文字列 アイテムの名前またはタイトル。 説明 文字列 アイテムを説明する簡単な要約。 作成日時 日付 アイテムが追加された時刻。 更新日時 日付 最後の変更のタイムスタンプ。 2\ ユーザーコレクション このコレクションはユーザーの資格情報と認証情報を管理します。 フィールド データ型 説明 id オブジェクトid 自動生成された一意の識別子。 ユーザー名 文字列 ユーザーのためのユニークなユーザー名。 メール 文字列 ユーザーのユニークなメールアドレス。 パスワードハッシュ 文字列 安全な認証のためのハッシュ化されたパスワード。 作成日時 日付 アカウントが作成された日時。 更新日時 日付 アカウントが更新された時刻。 これらのコレクションを作成し、back4appダッシュボードから直接フィールドを追加できます。 新しいクラスを作成 新しいフィールドを追加するには、データ型を選択し、フィールド名を入力し、必要に応じてデフォルト値や必須オプションを設定するだけです。 カラムを作成 スキーマ生成のためのback4app aiエージェントの使用 back4appに統合されたaiエージェントは、あなたの説明に基づいてスキーマを自動生成し、初期設定を効率化します。 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 – remix js アプリケーションを back4app に接続する バックエンドが設定されたので、remix js アプリを back4app と統合する時が来ました。 remix js での rest api コールの使用 parse sdk は通常 remix js で使用されないため、crud 操作は rest api リクエストを介して行います。 1\ remix js プロジェクトの設定 まだ作成していない場合は、新しい remix プロジェクトを作成します npx create remix\@latest プロンプトに従って、デプロイメントターゲットを選択します。 2\ remix からの api リクエストの作成 crud 操作を処理するために、 app/routes ディレクトリの下に api ルートファイルを作成します。たとえば、 items server js というファイルを作成し、アイテムの取得、作成、更新、削除のための関数を含めることができます。 例 アイテムの取得 // app/routes/items server js import { json } from "@remix run/node"; export async function loader() { 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(); return json(data); } 同様に、アイテムの作成、更新、削除を処理するために post、put、delete ルートを作成できます。 3\ ui コンポーネントの接続 あなたのremixコンポーネントでは、データを取得するために useloaderdata を使用したり、データをback4appに送信するための fetch apiやアクション関数を使用できます。 例えば、あなたのreactコンポーネントでは // app/routes/items jsx import { useloaderdata, form } from "@remix run/react"; export default function items() { const data = useloaderdata(); return ( \<div> \<h1>items list\</h1> {data results map((item) => ( \<div key={item objectid}> \<h2>{item title}\</h2> \<p>{item description}\</p> \</div> ))} \<form method="post"> \<input type="text" name="title" placeholder="item title" required /> \<textarea name="description" placeholder="item description" required /> \<button type="submit">add item\</button> \</form> \</div> ); } remixアクションで更新および削除操作のために同様のapi呼び出しを統合します。 ステップ5 – バックエンドのセキュリティ アクセス制御リスト（acl）の実装 オブジェクトのaclを設定することでデータセキュリティを強化します。たとえば、作成者のみがアクセスできるアイテムを作成するには // example api call to create a private item using acls async function createprivateitem(title, description, usersessiontoken) { 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", "x parse session token" usersessiontoken, }, body json stringify({ title, description, acl { " " { "read" false, "write" false }, "user object id" { "read" true, "write" true } }, }), }); return response json(); } クラスレベルの権限（clp） back4appダッシュボードでclpを調整して、デフォルトのセキュリティポリシーを強制し、認証されたユーザーのみが特定のコレクションにアクセスできるようにします。 ステップ6 – ユーザー認証の追加 ユーザー管理の設定 back4appは、認証管理のためにparseの組み込みユーザークラスを利用しています。あなたのremixアプリケーションでは、api呼び出しを使用してユーザー登録とログインを処理します。 例：ユーザー登録エンドポイント // app/routes/signup server js import { json, redirect } from "@remix run/node"; export async function action({ request }) { const formdata = await request formdata(); const username = formdata get("username"); const password = formdata get("password"); const email = formdata get("email"); 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 }), }); if (!response ok) { throw new error("signup failed"); } return redirect("/login"); } ログイン、セッション管理、パスワードリセットのために同様のエンドポイントを実装します。 ステップ7 – remix jsアプリケーションのデプロイ back4appはシームレスなデプロイをサポートしています。dockerを含むさまざまな戦略を使用して、remix jsアプリをデプロイできます。 7 1 remix jsアプリケーションのビルド コンパイルとバンドル： パッケージマネージャーとビルドスクリプト（例： npm run build )を使用してアプリをコンパイルします。 出力の確認： ビルド出力に必要なファイルがすべて含まれていることを確認します。 7 2 プロジェクト構造の例 典型的なremix jsプロジェクトは次のようになります： basic crud app remix/ \| app/ \| | routes/ \| | | items jsx \| | | items server js \| | | signup server js \| | components/ \| | itemform jsx \| public/ \| package json \| remix config js \| readme md 7 1 remix jsアプリケーションのビルド 7 3 アプリケーションのdocker化 コンテナ化を選択した場合、プロジェクトのルートに dockerfile を追加します \# use an official node js runtime as a base from node 16 alpine \# set the working directory in the container workdir /app \# copy package files and install dependencies copy package json package lock json / run npm install \# copy the rest of the application code copy \# build the remix app run npm run build \# expose the port the app runs on expose 3000 \# start the application cmd \["npm", "start"] 7 4 back4app webデプロイメントによるデプロイ リポジトリを接続する githubにremix jsソースコードをホストします。 デプロイメントを設定する back4appダッシュボードで、 web deployment 機能を選択し、リポジトリ（例 basic crud app remix ）をリンクし、正しいブランチを選択します。 ビルドおよび出力コマンドを設定する ビルドコマンド（例えば npm run build ) と出力ディレクトリを指定します。 アプリをデプロイする 「 デプロイ 」をクリックし、アプリがライブになるまでログを監視します。 ステップ8 – まとめと今後の方向性 よくやった！これで、back4appと統合されたremix jsを使用してcrudアプリケーションを構築しました。 このガイドでは、 basic crud app remix というプロジェクトを設定し、アイテムとユーザーのコレクションを定義し、back4app管理アプリを通じてデータを管理しました。 次に、remix jsアプリをrest api呼び出しを介してback4appに接続し、安全なユーザー認証とデータ保護対策を実装しました。 次のステップ： アプリケーションを強化する： 検索機能、詳細なアイテムビュー、リアルタイム更新などの機能を追加することを検討してください。 バックエンド機能を拡張する： クラウド機能、外部api統合、またはより高度なアクセス制御を検討してください。 学び続ける： back4appのドキュメント https //www back4app com/docs を訪れて、アプリをさらに最適化するための追加のremix jsチュートリアルを探してください。 コーディングを楽しんで、remix jsの旅に幸運を祈ります！