How to Build a Basic CRUD App with Riot.js: A Step-by-Step Guide

概要 このガイドでは、riot jsを使用してcrud（作成、読み取り、更新、削除）アプリケーションを作成する方法を学びます。 バックエンドとして機能する「 basic crud app riotjs 」という名前のback4appプロジェクトの設定を行い、その後riot jsフロントエンドと統合します。 このチュートリアルでは、データベーススキーマの設計やback4app admin appを使用したデータ管理から、sdk（該当する場合）またはrest/graphql api呼び出しを使用したフロントエンドの統合まで、すべてをカバーします。 最後には、ユーザー認証と安全なデータ処理を備えた完全に機能する、商用利用可能なwebアプリケーションが完成します。 主な利点 スケーラブルなバックエンドシステムを使用してcrud操作をマスターします。 riot jsフロントエンドとback4appの統合に関する洞察を得ます。 直感的なback4app admin appを利用して、データ管理を簡単に行います。 dockerコンテナ化を含むデプロイメント戦略を学びます。 前提条件 始める前に、次のものを用意してください 新しいプロジェクトを持つback4appアカウント。 ガイダンスについては、 back4appの始め方 https //www back4app com/docs/get started/new parse app を参照してください。 riot jsの開発環境。 riot cliを使用するか、スクリプトタグを介してriotを含めることができます。node js（v14以降）がインストールされていることを確認してください。 javascript、riot js、およびrest apiの基本的な知識。 必要に応じて、 riot jsのドキュメント https //riot js org/ を参照して追加の洞察を得てください。 ステップ1 – プロジェクトの初期化 back4appプロジェクトの作成 back4appアカウントにサインインします。 ダッシュボードで「新しいアプリ」をクリックします。 プロジェクトに名前を付けます basic crud app riotjs として、セットアップ手順に従います。 新しいプロジェクトを作成 あなたのプロジェクトは、アプリケーションのデータのバックボーンとして、back4appダッシュボードに表示されます。 ステップ2 – データベーススキーマの設計 データモデルの作成 crudアプリケーションのために、複数のコレクションを定義します。以下は、効率的なcrud操作のためにデータベースを構造化するのに役立つサンプルコレクションとフィールドです。 1\ アイテムコレクション このコレクションは、各アイテムの詳細を保持します。 フィールド タイプ 説明 id オブジェクトid 自動生成された一意の識別子。 タイトル 文字列 アイテムタイトル。 説明 文字列 簡単なアイテムの説明。 作成日時 日付 アイテムが追加されたタイムスタンプ。 更新日時 日付 アイテムが変更されたタイムスタンプ。 2\ ユーザーコレクション このコレクションにはユーザーの詳細と認証情報が含まれています。 フィールド タイプ 説明 id オブジェクトid 自動生成された一意の識別子。 ユーザー名 文字列 ユニークなユーザー名。 メール 文字列 ユニークなメールアドレス。 パスワードハッシュ 文字列 暗号化されたパスワード。 作成日時 日付 アカウント作成のタイムスタンプ。 更新日時 日付 最後のアカウント更新タイムスタンプ。 これらのコレクションは、back4appダッシュボードで新しいクラスを作成し、列を定義することで手動で構成できます。 新しいクラスを作成 フィールドを追加するには、データ型を選択し、名前を割り当て、デフォルトを設定し、フィールドが必須かどうかをマークします。 カラムを作成 back4app aiエージェントを活用したスキーマ作成 ダッシュボードからアクセスできるback4app aiエージェントは、必要なコレクションとフィールドを説明する詳細なプロンプトを処理することで、スキーマを自動的に生成できます。 aiエージェントの使用 aiエージェントを開く プロジェクト設定またはメニューで見つけてください。 データモデルを入力 コレクションとそのフィールドを概説するプロンプトを貼り付けてください。 レビューと確認 生成されたスキーマを検証し、プロジェクトに適用します。 サンプルプロンプト create these collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated) \ title string \ description string \ created at date (auto generated) \ updated at date (auto updated) 2\) collection users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto generated) \ updated at date (auto updated) このツールはプロセスを迅速化し、一貫したスキーマ設定を保証します。 ステップ 3 – 管理アプリの有効化と crud アクション 管理アプリの概要 back4app 管理アプリは、ノーコードのドラッグアンドドロップインターフェースを提供し、バックエンド管理を簡単に行えるようにし、crud 操作を迅速に実行できます。 管理アプリの有効化 「その他」メニューを開く あなたの back4app ダッシュボードで。 「管理アプリ」を選択 し、 「管理アプリを有効にする」をクリックします。 管理アカウントを設定する 初期管理ユーザーを作成することで、デフォルトの役割も設定されます。 管理アプリを有効にする 有効にしたら、admin appにログインしてバックエンドデータを管理します。 admin app ダッシュボード admin appを通じてcrud操作を実行する このインターフェース内で、あなたは レコードを追加する コレクション内の「レコードを追加」ボタン（例：アイテム）を使用して新しいエントリを作成します。 レコードを編集する 任意のレコードをクリックして、その詳細を表示および修正します。 レコードを削除する もはや必要のないレコードを削除します。 このツールは、データ管理のためのシンプルなインターフェースを提供することで、ワークフローを効率化します。 ステップ 4 – riot js を back4app に接続する バックエンドが設定されたので、riot js フロントエンドを back4app に接続する時が来ました。 オプション a parse sdk を使用する parse sdk をインストールする npm install parse riot js プロジェクトで parse を初期化する ファイルを作成します (例 src/parseconfig js ) // src/parseconfig js import parse from 'parse'; // insert your actual back4app credentials parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; riot タグで parse を使用する riot タグを作成します (例 items riot ) でアイテムを取得して表示します items { item get("title") } — { item get("description") } オプションb restまたはgraphql apiの使用 parse sdkが不適切な場合、api呼び出しを介してcrud操作を実行します。たとえば、restを使用してアイテムを取得するには // rest api example to get items async function fetchitems() { 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(); console log('fetched items ', data results); } catch (error) { console error('error fetching items ', error); } } fetchitems(); 必要に応じて、これらのapi呼び出しをriot jsタグ内に統合します。 ステップ5 – バックエンドの保護 アクセス制御リスト（acl）の設定 オブジェクトにaclを設定することでデータを保護します。たとえば、プライベートアイテムを作成するには async function createprivateitem(itemdata, owneruser) { const items = parse object extend('items'); const item = new items(); item set('title', itemdata title); item set('description', itemdata description); // define acl only the owner has read/write access const acl = new parse acl(owneruser); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { const saveditem = await item save(); console log('private item created ', saveditem); } catch (error) { console error('error saving item ', error); } } クラスレベルの権限（clp）の調整 back4appダッシュボード内で、各コレクションのclpを設定し、認証されたユーザーまたは権限のあるユーザーのみが機密データにアクセスできるようにします。 ステップ6 – ユーザー認証 ユーザーアカウントの設定 riot jsアプリケーションは、back4appの組み込みparse userクラスを使用してユーザー登録とログインを処理できます。以下は、ユーザーサインアップのためのriotタグの例です sign up ログインとセッション管理にも同様の戦略を適用できます。ソーシャルログイン、メール確認、パスワード回復などの追加機能は、back4appダッシュボードで設定できます。 ステップ7 – riot js フロントエンドのデプロイ back4appのwebデプロイ機能を使用すると、githubリポジトリをリンクすることでriot jsアプリをホストできます。プロダクションビルドをデプロイするための手順は次のとおりです 7 1 プロダクションファイルをビルドする ターミナルでプロジェクトディレクトリを開きます。 ビルドコマンドを実行します npm run build これにより、最適化された静的ファイル（html、js、css、画像）を含む build フォルダーが作成されます。 ビルドを確認します build フォルダーに index html と必要なアセットディレクトリが含まれていることを確認します。 7 2 コードを整理してgithubにプッシュする あなたのリポジトリには、完全なriot jsフロントエンドソースが含まれている必要があります。典型的な構造は次のようになります basic crud app riotjs frontend/ \| node modules/ \| public/ \| └── index html \| src/ \| ├── app riot \| ├── parseconfig js \| └── tags/ \| ├── items riot \| └── auth riot \| package json \| readme md 例 src/parseconfig js // src/parseconfig js import parse from 'parse'; // insert your actual back4app keys here parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; 例 src/app riot riot js crud app コードをコミットしてプッシュする git リポジトリを初期化する（まだの場合）： git init ファイルを追加する： git add 変更をコミットする： git commit m "riot js フロントエンドの初期コミット" github リポジトリを作成する（例： basic crud app riotjs frontend ) そしてコードをプッシュする： git remote add origin https //github com/your username/basic crud app riotjs frontend git git push u origin main 7 3 githubリポジトリをback4app webデプロイメントに統合する webデプロイメントを開く back4appダッシュボードにサインインし、プロジェクト（ basic crud app riotjs ）を選択し、 webデプロイメント をクリックします。 githubに接続する プロンプトに従って、githubアカウントとリポジトリをリンクします。 リポジトリとブランチを選択する リポジトリ（例 basic crud app riotjs frontend ）と適切なブランチ（例えば main ）を選択します。 7 4 デプロイメント設定 ビルドコマンド リポジトリに事前にビルドされた build フォルダーがない場合は、ビルドコマンドを指定してください（例 npm run build )。back4appが実行します。 出力ディレクトリ 静的ファイルが存在する場所を示すために、これを build に設定してください。 環境変数 apiキーなど、必要な変数を設定に含めてください。 7 5 riot jsアプリのdocker化（オプション） コンテナ化されたデプロイメントを好む場合は、プロジェクトに dockerfile を追加してください \# use an official node image to build the app from node 16 alpine as build \# set working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy the entire app and build it copy run npm run build \# use nginx to serve the built app from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] このルートを選択した場合は、webデプロイメント設定でdockerオプションを選択してください。 7 6 アプリケーションを起動する デプロイ 設定を構成した後、「 デプロイ 」ボタンをクリックします。 プロセスを監視 back4appがコードを取得し、ビルドコマンドを実行し、アプリをコンテナにデプロイします。 urlを取得 デプロイが完了すると、back4appはriot jsアプリケーションがホストされているurlを提供します。 7 7 デプロイを検証する urlを訪問 提供されたurlをブラウザで開きます。 アプリをテスト すべてのルートとアセット（css、javascript、画像）が正しく機能していることを確認します。 トラブルシュート 問題が発生した場合は、ブラウザの開発者ツールとback4appのログを使用します。 ステップ8 – まとめと今後の方向性 おめでとうございます！riot jsとback4appを使用して、完全に機能するcrudアプリを構築しました。 「 basic crud app riotjs 」というプロジェクトを設定し、アイテムとユーザーのための堅牢なデータベーススキーマを設計し、admin appでデータを管理しました。 riot jsのフロントエンドを統合し、aclのようなセキュリティ対策を実装しました。 次のステップ： フロントエンドを強化する： 詳細ビュー、検索機能、リアルタイム更新などの機能を追加します。 機能を拡張する： cloud functionsなどの高度なバックエンド操作を探求するか、サードパーティのapiを統合します。 学びを深める： back4appのドキュメント https //www back4app com/docs やその他のリソースを訪れて、アプリケーションを最適化し、拡張します。 これらのステップを経て、riot jsとback4appを使用してスケーラブルなcrudアプリケーションを構築する専門知識を持つことができました。コーディングを楽しんでください！