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

概要 このガイドでは、ractive jsを使用して完全に機能するcrud（作成、読み取り、更新、削除）アプリケーションを構築する方法を学びます。 このチュートリアルでは、back4appプロジェクトの設定からデータベーススキーマの設計、最後にractive jsフロントエンドとバックエンドの統合までの全ワークフローをカバーします。このプロジェクトは、 basic crud app ractive と呼ばれ、あなたのウェブアプリケーションのための堅牢なデータ管理ソリューションとして機能します。 まず、back4appプロジェクトを初期化し、コレクションとフィールドを手動またはback4app aiエージェントの助けを借りて設定します。 次に、直感的なback4app管理アプリを使用してデータを簡単に処理し、その後、rest api呼び出しを介してractive jsインターフェースをback4appと統合します。このガイドでは、高度なアクセス制御方法を使用してバックエンドを保護する方法も説明します。 最終的には、基本的な操作を実行するだけでなく、ユーザー認証と安全なデータ管理をサポートする生産品質のcrudアプリが完成します。 重要なポイント データを信頼できるバックエンドで巧みに管理するcrudアプリケーションをマスターする。 拡張可能なデータスキーマを設計し、それをractive jsフロントエンドに接続する方法を理解する。 簡単なcrud操作のためにドラッグアンドドロップ管理インターフェース（back4app admin app）を利用する。 迅速なウェブアプリの立ち上げのために、dockerコンテナ化を含むデプロイメント戦略を学ぶ。 前提条件 始める前に、次のことを確認してください 新しいプロジェクトが作成されたアクティブなback4appアカウント。 ガイダンスについては、 back4appの始め方 https //www back4app com/docs/get started/new parse app を参照してください。 ractive jsの開発セットアップ。 ボイラープレートまたは好みの設定を使用してプロジェクトを設定し、node js（v14以降）がインストールされていることを確認してください。 javascript、ractive js、およびrest apiの基本的な知識。 必要に応じて、 ractive jsのドキュメント https //ractive js org/ を確認してください。 ステップ1 – プロジェクトの初期化 新しいback4appプロジェクトの開始 back4appアカウントにログインします。 ダッシュボードで「新しいアプリ」オプションを選択します。 プロジェクトに名前を付けます basic crud app ractive と画面の指示に従って作成します。 新しいプロジェクトを作成 セットアップ後、プロジェクトはダッシュボードに表示され、さらなるバックエンドの設定が可能です。 ステップ2 – データベーススキーマの設計 データモデルの作成 このcrudアプリケーションでは、データを管理するためにいくつかのコレクションを定義します。以下は、crud機能に最適化されたフィールドとデータ型を提案したコレクションの例です。 1\ コレクション アイテム このコレクションは各アイテムの詳細を保持しています。 フィールド タイプ 目的 id オブジェクトid 自動生成された主識別子。 タイトル 文字列 アイテムタイトル。 説明 文字列 アイテムの簡単な要約。 作成日時 日付 レコード作成タイムスタンプ。 更新日時 日付 最終更新のタイムスタンプ。 2\ コレクション ユーザー このコレクションはユーザーデータと認証を管理します。 フィールド タイプ 目的 id オブジェクトid 自動生成された主識別子。 ユーザー名 文字列 ユーザーのユニーク識別子。 メール 文字列 ユーザーのユニークなメールアドレス。 パスワードハッシュ 文字列 安全な認証のためのハッシュ化されたパスワード。 作成日時 日付 アカウント作成のタイムスタンプ。 更新日時 日付 最後のアカウント更新のタイムスタンプ。 back4appのダッシュボードを介して新しいクラスを作成し、必要なカラムを追加することで、これらのコレクションを手動で設定できます。 新しいクラスを作成 適切なデータ型を選択し、列に名前を付け、デフォルトまたは必須の値を設定することでフィールドを定義します。 列を作成 スキーマ自動化のためのback4app aiエージェントの利用 back4app aiエージェントは、あなたのプロンプトに基づいてスキーマを自動的に生成できます。この効率的なツールは、コレクションとフィールドを迅速に確立することでプロジェクト管理を簡素化します。 aiエージェントの操作方法 プロジェクトのダッシュボードからaiエージェントにアクセスします。 希望するコレクションとフィールドを詳しく説明するプロンプトを入力します。 自動生成されたスキーマを確認し、プロジェクトに適用します。 サンプルプロンプト create these collections for 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ダッシュボードの「その他」メニューに移動します。 「管理アプリ」を選択し、 「管理アプリを有効にする。」 最初の管理ユーザーを設定し、役割（例えば、 b4aadminuser ）やシステムコレクションを構成します。 管理アプリを有効にする 有効化されたら、管理アプリにログインしてコレクションを管理します。 管理アプリダッシュボード 管理アプリを通じてデータを管理する エントリの追加： コレクション（アイテムなど）で「レコードを追加」オプションを使用して新しいデータを入力します。 レコードの表示/編集： 任意のレコードを選択して詳細を確認したり、フィールドを更新します。 エントリの削除： 削除機能を使用して古いレコードを排除します。 このユーザーフレンドリーなインターフェースは、すべてのcrud機能を効率化します。 ステップ4 – ractive jsをback4appに接続する バックエンドが準備できたので、ractive jsフロントエンドをback4appに接続する時が来ました。 ractive jsでのrest api呼び出しの使用 ractive jsには専用のparse sdkがないため、crud操作を実行するためにrest api呼び出しを使用します。 例：アイテムの取得 back4appのアイテムコレクションからデータを取得して表示するractiveコンポーネントを作成します。 items html items list {{#each items}} {{title}} {{description}} edit delete {{/each}} add new item add items js import ractive from "ractive"; const api url = "https //parseapi back4app com/classes/items"; const headers = { "x parse application id" "your application id", "x parse rest api key" "your rest api key", "content type" "application/json" }; const ractive = new ractive({ target "#items container", template "#items template", data { items \[], newtitle "", newdescription "" } }); // function to load items async function loaditems() { try { const response = await fetch(api url, { headers headers }); const result = await response json(); ractive set("items", result results map(item => ({ id item objectid, title item title, description item description }))); } catch (error) { console error("error fetching items ", error); } } ractive on("additem", async function () { const title = ractive get("newtitle"); const description = ractive get("newdescription"); try { await fetch(api url, { method "post", headers headers, body json stringify({ title, description }) }); ractive set({ newtitle "", newdescription "" }); loaditems(); } catch (error) { console error("error adding item ", error); } }); // additional functions for editing and deleting would follow a similar rest approach loaditems(); import ractive from "ractive"; const api url = "https //parseapi back4app com/classes/items"; const headers = { "x parse application id" "your application id", "x parse rest api key" "your rest api key", "content type" "application/json" }; const ractive = new ractive({ target "#items container", template "#items template", data { items \[], newtitle "", newdescription "" } }); // function to load items async function loaditems() { try { const response = await fetch(api url, { headers headers }); const result = await response json(); ractive set("items", result results map(item => ({ id item objectid, title item title, description item description }))); } catch (error) { console error("error fetching items ", error); } } ractive on("additem", async function () { const title = ractive get("newtitle"); const description = ractive get("newdescription"); try { await fetch(api url, { method "post", headers headers, body json stringify({ title, description }) }); ractive set({ newtitle "", newdescription "" }); loaditems(); } catch (error) { console error("error adding item ", error); } }); // additional functions for editing and deleting would follow a similar rest approach loaditems(); import ractive from "ractive"; const api url = "https //parseapi back4app com/classes/items"; const headers = { "x parse application id" "your application id", "x parse rest api key" "your rest api key", "content type" "application/json" }; const ractive = new ractive({ target "#items container", template "#items template", data { items \[], newtitle "", newdescription "" } }); // function to load items async function loaditems() { try { const response = await fetch(api url, { headers headers }); const result = await response json(); ractive set("items", result results map(item => ({ id item objectid, title item title, description item description }))); } catch (error) { console error("error fetching items ", error); } } ractive on("additem", async function () { const title = ractive get("newtitle"); const description = ractive get("newdescription"); try { await fetch(api url, { method "post", headers headers, body json stringify({ title, description }) }); ractive set({ newtitle "", newdescription "" }); loaditems(); } catch (error) { console error("error adding item ", error); } }); // additional functions for editing and deleting would follow a similar rest approach loaditems(); これらのapiインタラクションをractive jsコンポーネントに組み込んで、すべてのcrud操作を処理できます。 ステップ5 – バックエンドセキュリティの強化 アクセス制御の実装 オブジェクトにアクセス制御リスト（acl）を設定することで、セキュリティを強化します。たとえば、アイテムをプライベートにするには async function createprivateitem(itemdata, owneruserid) { const data = { title itemdata title, description itemdata description, acl { \[owneruserid] { read true, write true }, " " { read false, write false } } }; try { const response = await fetch(api url, { method "post", headers headers, body json stringify(data) }); const result = await response json(); console log("private item created ", result); } catch (error) { console error("error creating private item ", error); } } クラスレベルの権限の設定 back4appのダッシュボード内で、各コレクションのクラスレベルの権限（clp）を調整して、デフォルトのアクセスポリシーを定義します。このステップにより、認可されたユーザーのみが機密データにアクセスできるようになります。 ステップ6 – ユーザー認証の管理 ユーザーアカウントの設定 back4appはparseのユーザークラスを使用して認証を処理します。ractive jsアプリケーション内でrest api呼び出しを介してユーザー登録とログインを実装します。 例 ユーザーサインアップ async function signupuser(username, email, password) { const response = await fetch("https //parseapi back4app com/users", { method "post", headers headers, body json stringify({ username, email, password }) }); const result = await response json(); if (result objectid) { alert("user registered successfully!"); } else { alert("error during sign up " + result error); } } ログインとセッション管理のために同様のルーチンを実装します。パスワードの回復やメールの確認などの追加機能は、back4appのダッシュボードを介して設定できます。 ステップ7 – ractive jsフロントエンドのデプロイ back4appのwebデプロイメント機能を使用すると、ractive jsアプリケーションをgithubリポジトリにリンクしてホストできます。 7 1 プロダクションバージョンのビルド ターミナルでプロジェクトフォルダを開きます。 ビルドプロセスを実行します（これは、rollupやwebpackを使用するなど、設定に基づいたカスタムコマンドである可能性があります）。 プロダクションフォルダ（一般的に dist または build と呼ばれる）に静的ファイルが含まれていることを確認します。 7 2 コードの整理とコミット プロジェクトリポジトリは明確な構造を持っているべきです。例えば basic crud app ractive/ \| node modules/ \| public/ \| └── index html \| src/ \| ├── main js \| ├── ractiveconfig js \| └── components/ \| ├── items html \| └── auth html \| package json \| readme md サンプルファイル ractiveconfig js // ractiveconfig js // this file can include global configuration for your ractive app export const api url = "https //parseapi back4app com"; export const headers = { "x parse application id" "your application id", "x parse rest api key" "your rest api key", "content type" "application/json" }; コードのコミット gitリポジトリを初期化します git init ファイルを追加します git add 変更をコミットします git commit m "ractive jsフロントエンドの初期コミット" githubリポジトリを作成します（例 basic crud app ractive ) そしてコードをプッシュします git remote add origin https //github com/your username/basic crud app ractive git git push u origin main 7 3 リポジトリをback4app webデプロイメントにリンクする back4appダッシュボードにログインし、プロジェクトを選択（ basic crud app ractive ）、そして web deployment オプションを選択します。 指示に従ってgithubアカウントを接続します。 リポジトリとブランチを選択します（通常は main )、ractive jsコードが含まれています。 7 4 デプロイメントパラメータの設定 以下を設定します ビルドコマンド ビルドコマンドを指定します（例えば、 npm run build )。 出力ディレクトリ プロダクションフォルダに設定します（例 build または dist )。 環境変数 必要なapiキーや設定変数を含めます。 7 5 dockerによるコンテナ化（オプション） docker経由でデプロイしたい場合は、プロジェクトに dockerfile を含めます \# base build stage using node js from node 16 alpine as build \# set the 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 \# production stage using nginx from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 7 6 アプリケーションの起動 back4appの デプロイ ボタンをクリックします。 back4appがリポジトリをプルしてビルドする際に、デプロイメントプロセスを監視します。 完了すると、back4appはホストされたractive jsアプリのurlを提供します。 7 7 デプロイメントの確認 提供されたurlをブラウザで開きます。 すべてのルートをテストし、すべてのアセット（css、js、画像）が正しく読み込まれることを確認します。 問題が発生した場合は、デプロイメントログを確認し、ビルド設定をチェックします。 ステップ8 – まとめと今後の方向性 素晴らしい仕事です！あなたはractive jsとback4appを使用して完全なcrudアプリケーションを成功裏に構築しました。 あなたは basic crud app ractive というプロジェクトを設定し、アイテムとユーザーのために正確なコレクションを定義し、直感的な管理アプリを使用してバックエンド管理を行いました。 さらに、あなたはractive jsのフロントエンドをバックエンドと統合し、データセキュリティを強化しました。 次のステップ： uiを強化する： 詳細ビュー、検索機能、リアルタイム更新などの機能を追加します。 バックエンドを拡張する： クラウド機能やサードパーティapiサービスなどの高度なバックエンドロジックを統合します。 学びを深める： より高度な設定や最適化のために、 back4appのドキュメント https //www back4app com/docs を探求します。 このチュートリアルを通じて、あなたはback4appを使用してractive jsアプリケーションのスケーラブルなcrudバックエンドを作成する専門知識を持っています。コーディングを楽しんでください！