SvelteでCRUDアプリを作成するには？

概要 このウォークスルーでは、svelteを使用して完全なcrud（作成、読み取り、更新、削除）アプリを構築する方法を学びます。 私たちは、アプリのデータを管理するための堅牢なローコードバックエンドを提供するback4appをバックエンドプラットフォームとして利用します。 このガイドでは、back4appプロジェクトの設定方法、柔軟なデータスキーマの設計方法、およびsvelteアプリケーション内でのcrud操作の実装方法を説明します。 最初に、「 basic crud app svelte 」というタイトルのback4appプロジェクトを作成します。このプロジェクトは、バックエンド設定の基盤を形成し、データスキーマを手動で定義するか、back4appの統合aiエージェントの助けを借りて定義します。 次に、データ管理のためのユーザーフレンドリーなインターフェースであるback4app admin appを探索し、crud操作を簡単に実行できるようにします。 最後に、svelteアプリケーションをback4appに接続し、parse javascript sdkまたは直接rest/graphql api呼び出しを利用しながら、安全なデータ処理を確保します。 このチュートリアルの終わりまでに、基本的なcrudタスクを実行し、安全なユーザー認証を備えた完全に機能するsvelteアプリケーションを持つことができます。 学べること 柔軟なバックエンドを持つsvelteベースのcrudアプリケーションの設定方法。 バックエンドを整理し、svelteアプリに接続する方法。 シームレスなデータ操作のためにback4app admin appを活用する方法。 dockerコンテナ化を含むsvelteアプリケーションのデプロイ戦略。 前提条件 始める前に、次のものを確認してください アクティブなプロジェクトを持つback4appアカウント。 助けが必要ですか？ back4appの始め方 https //www back4app com/docs/get started/new parse app を訪れてガイダンスを受けてください。 svelteの開発環境。 vscodeのようなコードエディタを使用し、node jsがインストールされていることを確認してください。 svelte、javascript、およびrest apiに関する基本的な知識。 必要に応じて、 svelteのドキュメント https //svelte dev/docs を確認してください。 ステップ1 – プロジェクトの設定 新しいback4appプロジェクトの立ち上げ back4appアカウントにログインします。 ダッシュボードの「新しいアプリ」ボタンを押します。 プロジェクトに名前を付けます basic crud app svelte と入力し、画面の指示に従って設定を完了します。 新しいプロジェクトを作成 プロジェクトを作成した後、ダッシュボードに表示され、バックエンドの設定の基盤となります。 ステップ2 – データスキーマの作成 データの構造化 このcrudアプリケーションでは、back4appプロジェクトにいくつかのコレクションを定義する必要があります。以下は、svelte crud操作をサポートするために必要な主要なコレクションとフィールドの例です。 1\ アイテムコレクション このコレクションは各アイテムの情報を保存します。 フィールド タイプ 詳細 id オブジェクトid 自動生成された一意の識別子。 タイトル 文字列 アイテムの名前またはタイトル。 説明 文字列 アイテムの簡単な説明。 作成日時 日付 アイテムが作成されたタイムスタンプ。 更新日時 日付 アイテムの最後の更新のタイムスタンプ。 2\ ユーザーコレクション このコレクションはユーザーの資格情報と認証の詳細を管理します。 フィールド タイプ 詳細 id オブジェクトid 自動生成された一意の識別子。 ユーザー名 文字列 各ユーザーのためのユニークなユーザー名。 メール 文字列 ユーザーのメールアドレス。 パスワードハッシュ 文字列 認証のための暗号化されたパスワード。 作成日時 日付 アカウント作成のタイムスタンプ。 更新日時 日付 最後のアカウント更新のタイムスタンプ。 これらのコレクションを作成し、back4appダッシュボードから直接フィールドを定義できます。 新しいクラスを作成 適切なタイプを選択し、フィールドに名前を付け、デフォルト値を設定し、必須としてマークすることでフィールドを追加できます。 列を作成 back4app aiエージェントを使用した迅速なスキーマ生成 back4appに統合されたaiエージェントは、簡単な説明に基づいてデータスキーマを自動的に設定できます。このツールはセットアッププロセスを効率化し、crud操作に最適化されたスキーマを確保します。 aiエージェントの利用方法 aiエージェントを開く back4appダッシュボードのプロジェクト設定で、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) この方法は時間を節約し、バックエンドスキーマがアプリのニーズに完全に一致することを保証します。 ステップ3 – 管理アプリでのデータ管理 管理アプリの概要 back4app管理アプリは、バックエンドデータを管理するためのノーコード環境を提供します。ドラッグアンドドロップインターフェースを使用して、レコードの追加、編集、削除などの操作を簡単に行うことができます。 管理アプリの有効化 「その他」メニューに移動 back4appダッシュボードで。 「管理アプリ」を選択 そして、「管理アプリを有効にする」をクリックします。 管理アカウントを設定 するために、プロンプトに従って資格情報を設定します。このプロセスでは、役割（例えば、 b4aadminuser )やその他のシステム設定も行われます。 管理アプリを有効にする 有効化されたら、管理アプリにログインしてプロジェクトのデータを効果的に管理します。 管理アプリダッシュボード 管理アプリの使い方 新しいレコードの挿入： コレクション（アイテムなど）で「レコードを追加」機能を使用して新しいデータを導入します。 レコードの確認または編集： レコードをクリックしてその詳細を表示したり、フィールドを修正します。 レコードの削除： 古くなったり不要なデータエントリを削除します。 この直感的なインターフェースは、バックエンドデータの管理を簡単かつ効率的にします。 ステップ4 – svelteアプリをback4appに接続する バックエンドの設定が完了したので、svelteアプリケーションをback4appにリンクする時が来ました。 オプションa parse javascript sdkを使用する sdkをインストールする npmまたはyarnを使用してparse javascript sdkをインストールします npm install parse svelteアプリでparseを初期化する メインのjavascriptファイル（例 src/main js ）でparseを初期化します // src/main js import parse from 'parse'; parse initialize("your application id", "your javascript key"); parse serverurl = 'https //parseapi back4app com'; // あなたのsvelteアプリの初期化コードが続きます crud関数を実装する crud操作を処理するモジュール（例 src/services/items js )を作成します // src/services/items js import parse from 'parse'; export async function fetchitems() { const query = new parse query("items"); try { const results = await query find(); return results; } catch (error) { console error("アイテムの取得中にエラーが発生しました ", error); return \[]; } } export async function additem(title, description) { const item = parse object extend("items"); const item = new item(); item set("title", title); item set("description", description); try { await item save(); console log("アイテムが正常に作成されました!"); } catch (error) { console error("アイテムの作成中にエラーが発生しました ", error); } } export async function updateitem(objectid, newtitle, newdescription) { const query = new parse query("items"); try { const item = await query get(objectid); item set("title", newtitle); item set("description", newdescription); await item save(); console log("アイテムが正常に更新されました!"); } catch (error) { console error("アイテムの更新中にエラーが発生しました ", error); } } export async function removeitem(objectid) { const query = new parse query("items"); try { const item = await query get(objectid); await item destroy(); console log("アイテムが正常に削除されました!"); } catch (error) { console error("アイテムの削除中にエラーが発生しました ", error); } } オプションb rest/graphql apiの使用 parse sdkがあなたのユースケースに理想的でない場合、back4appのrestまたはgraphqlエンドポイントを直接呼び出すことができます。例えば、restを介してアイテムを取得するには export async function getitemsrest() { 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("rest error fetching items ", error); return \[]; } } 必要に応じて、これらのapi呼び出しをsvelteコンポーネントに統合します。 ステップ5 – バックエンドのセキュリティを強化する アクセス制御リスト（acl）の使用 オブジェクトにaclを設定することで、データのセキュリティを強化します。たとえば、所有者のみに表示されるアイテムを作成するには import parse from 'parse'; export async function createprivateitem(title, description, owner) { const item = parse object extend("items"); const item = new item(); item set("title", title); item set("description", description); const acl = new parse acl(); acl setreadaccess(owner, true); acl setwriteaccess(owner, true); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { await item save(); console log("private item successfully created!"); } catch (error) { console error("error saving private item ", error); } } クラスレベルの権限設定（clp） back4appダッシュボードで直接clpを設定して、認証されたユーザーのみが特定のコレクションと対話できるようにアクセスを制限します。 ステップ6 – svelteでのユーザー認証の実装 ユーザーアカウントの設定 back4appは、認証管理のためにparseの組み込みユーザーコレクションを活用しています。svelteアプリでは、以下の例に似た登録およびログイン機能を実装します import parse from 'parse'; export async function registeruser(username, password, email) { const user = new parse user(); user set("username", username); user set("password", password); user set("email", email); try { await user signup(); console log("user registered successfully!"); } catch (error) { console error("registration error ", error); } } export async function loginuser(username, password) { try { const user = await parse user login(username, password); console log("user logged in ", user get("username")); } catch (error) { console error("login failed ", error); } } このアプローチは、セッション管理、パスワードリセット、追加の認証機能を管理するために拡張できます。 ステップ7 – svelteアプリケーションのデプロイ back4appはデプロイプロセスを簡素化します。dockerコンテナ化を含むいくつかの方法を使用して、svelteアプリをデプロイできます。 7 1 svelteアプリケーションをビルドする アプリをコンパイルする： 通常、次のsvelteビルドコマンドを実行します： npm run build ビルドを確認する： 生成されたファイル（通常は public または build フォルダー内）にすべての必要なアセットが含まれていることを確認してください。 7 2 プロジェクト構造の例 典型的なsvelteプロジェクトの構造は次のようになります： basic crud app svelte/ \| public/ \| | build/ \| | global css \| | index html \| src/ \| | components/ \| | | itemlist svelte \| | | itemform svelte \| | services/ \| | | items js \| | | auth js \| | app svelte \| | main js \| package json \| readme md 7 3 svelteアプリのdocker化 コンテナ化されたデプロイを好む場合は、プロジェクトのルートに dockerfile を作成します。 \# use a node js image to build the app from node 16 alpine as build \# set the working directory workdir /app \# copy package files and install dependencies copy package json package lock json / run npm install \# copy the rest of the project files and build the app copy run npm run build \# use a lightweight server to serve the built files from nginx\ alpine copy from=build /app/public /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 7 4 back4appウェブデプロイメントによるデプロイ githubリポジトリをリンクする あなたのsvelteプロジェクトをgithubにホストします。 back4appでデプロイメントを設定する back4appダッシュボードで、「 web deployment 」オプションを選択し、リポジトリ（例 basic crud app svelte ）を接続し、ターゲットブランチを選択します。 ビルド設定を定義する ビルドコマンド（例えば、 npm run build ）を指定し、ビルド出力ディレクトリを指し示します。 アプリケーションをデプロイする 「 デプロイ 」をクリックし、アプリがライブになるまでログを監視します。 ステップ8 – まとめと今後の改善 おめでとうございます！あなたはback4appに接続するsvelteベースのcrudアプリケーションを構築しました。 「 basic crud app svelte 」という名前のプロジェクトを設定し、アイテムとユーザーのコレクションを構成し、back4app管理アプリを通じてデータを管理しました。 次に、parse javascript sdk（またはrest/graphql）を使用してsvelteフロントエンドを統合し、堅牢なセキュリティ対策を追加しました。 次は何ですか？ 機能を拡張する： 高度な検索、詳細ビュー、リアルタイム更新などの機能を追加します。 バックエンドロジックを強化する： クラウド関数、サードパーティapi統合、または役割ベースのアクセス制御を試してみてください。 学びを深める： さらなるチュートリアルと、 back4appのドキュメント https //www back4app com/docs を探求して、アプリを最適化します。 コーディングを楽しんで、svelte crudアプリケーションを構築してください！