How to Build a CRUD App with SvelteKit? A Comprehensive Tutorial

概要 このガイドでは、sveltekitを使用してシンプルなcrud（作成、読み取り、更新、削除）アプリケーションを作成します。 標準的なデータ操作を実行し、back4appを使用してウェブアプリのバックエンドを管理する方法を示します。チュートリアルは、「 basic crud app sveltekit 」というタイトルのback4appプロジェクトを設定することから始まります。これは、堅牢なバックエンドとして機能します。 次に、手動でコレクションとフィールドを作成するか、back4app aiエージェントを活用して、適応可能なデータベーススキーマを設計します。これにより、データモデルが効率的なcrud操作に最適化されます。 次に、back4app admin appというノーコードのドラッグアンドドロップツールを使用して、コレクションを管理し、データ管理プロセスを効率化します。 最後に、rest apiを使用してsveltekitのフロントエンドをback4appと統合します。アクセス制御などの高度なセキュリティ対策も設定され、バックエンドを保護します。 このチュートリアルの結論では、crud操作をサポートし、ユーザー認証と動的データ更新を備えた本番環境向けのウェブアプリケーションが完成します。 主なポイント 信頼できるバックエンドでデータを効果的に処理するcrudアプリケーションの作成をマスターします。 スケーラブルなデータベースの構造を理解し、それをsveltekitフロントエンドに接続する方法を学びます。 データ操作をシームレスに行うためのビジュアル管理ツール（back4app admin app）の利用方法を学びます。 アプリケーションを迅速に立ち上げるためのデプロイメント戦略、特にdockerコンテナ化を探ります。 前提条件 始める前に、以下を確認してください 新しいプロジェクトが準備されたback4appアカウント。 ガイダンスについては、 back4appの始め方 https //www back4app com/docs/get started/new parse app を参照してください。 sveltekit開発環境。 公式ドキュメント https //kit svelte dev/docs に従ってsveltekitをインストールします。 javascript、sveltekit、およびrest apiの基本的な理解。 詳細については、 sveltekitドキュメント https //kit svelte dev/docs をチェックしてください。 ステップ1 – プロジェクトの初期化 新しいback4appプロジェクトの設定 back4appのダッシュボードにログインします。 「新しいアプリ」ボタンをクリックします ダッシュボードで。 プロジェクト名を入力します： basic crud app sveltekit そして、画面の指示に従ってプロジェクトを作成します。 新しいプロジェクトを作成 作成後、新しいプロジェクトがダッシュボードに表示され、バックエンド構成のための安定したプラットフォームを提供します。 ステップ2 – データベーススキーマの作成 データモデルの策定 crudアプリのために、複数のコレクションを作成する必要があります。ここでは、crud操作を実行するためのデータベーススキーマを設定するために必要なコレクションとそのフィールドを示す例を示します。 1\ アイテムコレクション このコレクションは各アイテムの詳細を保持しています。 フィールド データ型 説明 id オブジェクトid 自動生成された主キー。 タイトル 文字列 アイテムのタイトル。 説明 文字列 アイテムの簡単な概要。 作成日時 日付 アイテムが作成されたタイムスタンプ。 更新日時 日付 最新の更新のタイムスタンプ。 2\ ユーザーコレクション このコレクションはユーザーの資格情報とプロフィールの詳細を保存します。 フィールド データ型 説明 id オブジェクトid 自動生成された主キー。 ユーザー名 文字列 ユーザーの一意の識別子。 メール 文字列 ユニークなユーザーのメールアドレス。 パスワードハッシュ 文字列 認証のための暗号化されたパスワード。 作成日時 日付 アカウント作成のタイムスタンプ。 更新日時 日付 最新のプロフィール更新のタイムスタンプ。 これらのコレクションは、back4appダッシュボードで新しいクラスを作成し、それぞれのカラムを追加することで手動で作成できます。 新しいクラスを作成 各フィールドを適切なデータ型を選択し、名前を付け、デフォルト値を設定し、必要に応じて必須としてマークすることで定義します。 カラムを作成 back4app aiエージェントによるスキーマ作成の自動化 back4app aiエージェントは、ダッシュボードから直接スキーマ設定プロセスを簡素化します。コレクションとフィールドを説明するプロンプトを入力することで、データベース構造を自動的に生成できます。 aiエージェントの使用方法 aiエージェントにアクセスする back4appダッシュボードを開き、プロジェクト設定内のaiエージェントに移動します。 モデルを説明する 必要なコレクションとフィールドを概説する詳細なプロンプトを貼り付けます。 レビューと確認 送信後、生成されたコレクションとフィールド定義を確認し、それをプロジェクトに適用します。 サンプルプロンプト create the following 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ダッシュボードで。 「管理アプリ」を選択 その後クリックします 「管理アプリを有効にする。」 管理者資格情報の設定： 役割を確立するために初期の管理者ユーザーを作成します（例： b4aadminuser ) およびシステムコレクション。 管理アプリを有効にする 有効化後、管理アプリにサインインしてデータの管理を開始します。 管理アプリダッシュボード 管理アプリでのcrud操作の管理 管理アプリ内でできること： レコードの追加： 新しいエントリを作成するには、任意のコレクション（例：アイテム）で「レコードを追加」ボタンをクリックします。 レコードの表示と編集： レコードを選択してその詳細を確認したり、フィールドを修正します。 レコードの削除： 不要なエントリを削除するために削除オプションを使用します。 この直感的なインターフェースは、データ管理プロセスを大幅に効率化します。 ステップ4 – sveltekitとback4appの接続 管理アプリを介してバックエンドが設定されたら、sveltekitフロントエンドをback4appにリンクする時です。 sveltekitでのrest apiの活用 rest api呼び出しを使用してcrud操作を実行します。 データ取得の例 back4appからアイテムを取得するsveltekitエンドポイントまたはコンポーネントを作成します \<! src/routes/items svelte > \<script> import { onmount } from 'svelte'; let items = \[]; const loaditems = async () => { 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(); items = data results; } catch (error) { console error('failed to fetch items ', error); } }; onmount(loaditems); \</script> \<h2>items\</h2> \<ul> {#each items as item (item objectid)} \<li>{item title} – {item description}\</li> {/each} \</ul> 作成、更新、削除操作のために、sveltekitコンポーネント内で同様のapi呼び出しを統合します。 ステップ5 – バックエンドのセキュリティ アクセス制御リスト（acl）の設定 各オブジェクトに対してaclを設定することでデータを保護します。たとえば、プライベートアイテムを作成するには async function createprivateitem(itemdata, ownerid) { 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' }, body json stringify({ title itemdata title, description itemdata description, acl { \[ownerid] { read true, write true }, " " { read false, write false } } }) }); const result = await response json(); console log('created private item ', result); } クラスレベルの権限設定（clp） back4appダッシュボードで、各コレクションのclpを設定し、認可されたユーザーのみが機密データにアクセスできるようにします。 ステップ6 – ユーザー認証の実装 ユーザーアカウントの管理 back4appは、認証のためにparseのユーザークラスを使用します。sveltekitアプリで、back4appとrest api呼び出しを介してやり取りする登録およびログインフォームを設定します。 例：ユーザー登録 \<! src/routes/signup svelte > \<script> let username = ''; let email = ''; let password = ''; const handlesignup = async () => { try { 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, email, password }) }); const data = await response json(); if (data objectid) { alert('registration successful!'); } else { alert('sign up failed ' + data error); } } catch (error) { console error('error during sign up ', error); } }; \</script> \<form on\ submit|preventdefault={handlesignup}> \<input type="text" placeholder="username" bind\ value={username} /> \<input type="email" placeholder="email" bind\ value={email} /> \<input type="password" placeholder="password" bind\ value={password} /> \<button type="submit">register\</button> \</form> ユーザーログインとセッション管理のために、同様の方法を実装できます。 ステップ 7 – sveltekit フロントエンドのデプロイ back4appのwebデプロイ機能を使用すると、githubリポジトリにリンクすることでsveltekitフロントエンドをホストできます。このセクションでは、プロダクションファイルのビルド、ソースコードのプッシュ、およびサイトのデプロイ方法について説明します。 7 1 プロダクションビルドの作成 プロジェクトディレクトリでターミナルを開きます。 ビルドコマンドを実行します npm run build これにより、最適化された静的アセットを含む build (または output ) フォルダーが生成されます。 ビルドを確認します ビルドフォルダーに index html とすべての必要なアセットディレクトリが含まれていることを確認します。 7 2 コードの構造化とアップロード リポジトリには完全なsveltekitソースコードが含まれている必要があります。典型的な構造は次のようになります basic crud app sveltekit/ ├── node modules/ ├── static/ │ └── global css ├── src/ │ ├── routes/ │ │ ├── items svelte │ │ └── signup svelte │ └── lib/ │ └── api js ├── package json └── readme md サンプルapiファイル src/lib/api js export const fetchitems = async () => { const res = 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 res json(); return data results; }; githubへのコミット gitを初期化する（未実施の場合）： git init ファイルを追加する： git add 変更をコミットする： git commit m "sveltekitフロントエンドの初期コミット" githubリポジトリを作成する： 例えば、名前を basic crud app sveltekit にする。 コードをプッシュする： git remote add origin https //github com/your username/basic crud app sveltekit git git push u origin main 7 3 githubリポジトリとwebデプロイメントのリンク webデプロイメントを開く： back4appにログインし、プロジェクト（basic crud app sveltekit）に移動し、 webデプロイメント オプションを選択します。 githubに接続する： プロンプトに従ってgithubアカウントをリンクし、back4appがリポジトリにアクセスできるようにします。 リポジトリとブランチを選択する： sveltekitリポジトリ（例： basic crud app sveltekit unhandled content type 7 4 デプロイメントの設定 これらの追加設定を提供します ビルドコマンド 事前にビルドされたフォルダーがない場合、コマンドを設定します（例 npm run build )。 出力ディレクトリ 静的ファイルを保持するフォルダーを指定します（通常は build または output )。 環境変数 apiキーなど、必要な変数を追加します。 7 5 sveltekitアプリケーションのdocker化 dockerがデプロイメントの選択肢である場合、リポジトリに dockerfile を含めます \# use a node image for building 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 source code and build the app copy run npm run build \# use nginx to serve the built files from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 好みに応じて、dockerを使用するようにwebデプロイメントを構成します。 7 6 アプリケーションのデプロイ デプロイボタンをクリック 設定が完了したら、「 デプロイ 」ボタンを押します。 デプロイを監視 back4appはあなたのコードを取得し、ビルドを実行し、アプリをコンテナにデプロイします。 urlを取得 デプロイが成功すると、back4appはホストされたsveltekitアプリのurlを提供します。 7 7 デプロイの検証 urlを訪問 提供されたurlをブラウザで開きます。 機能をテスト アプリが正しく読み込まれ、ルートが機能し、すべてのアセットが適切に提供されていることを確認します。 必要に応じてデバッグ ブラウザの開発者ツールを使用してエラーを検査し、トラブルシューティングのためにback4appのログを確認します。 ステップ8 – まとめと今後の方向性 sveltekitとback4appを使用して完全なcrudアプリケーションを構築したことにおめでとうございます！ 「 basic crud app sveltekit 」というプロジェクトを設定し、アイテムとユーザーの詳細なコレクションを作成し、admin appを通じてバックエンドを管理しました。 さらに、rest apiを通じてsveltekitのフロントエンドを統合し、厳格なアクセス制御を適用しました。 今後の強化： フロントエンドを拡張する： 詳細なビュー、検索機能、リアルタイム通知を備えたsveltekitアプリを強化します。 高度な機能を追加する： サーバーサイドロジック（例：cloud functions）を実装し、サードパーティapiを統合するか、役割ベースの権限を有効にします。 知識を深める： back4appのドキュメント https //www back4app com/docs を訪れて、パフォーマンスの向上やカスタム統合のためのチュートリアルをさらに探求してください。 このチュートリアルは、back4appを使用してsveltekitアプリケーションのスケーラブルなcrudバックエンドを作成するために必要なスキルを身につけさせてくれました。コーディングを楽しんで、素晴らしい構築を！