AstroでCRUDアプリを作成？

概要 このガイドでは、astroを使用してcrud（作成、読み取り、更新、削除）ウェブアプリケーションを作成する方法を学びます。 このチュートリアルでは、堅牢なバックエンドであるback4appプロジェクトの設定と、基本的な操作をサポートするデータ構造の設計を説明します。 次に、rest/graphql apiを介してback4appと通信するastroフロントエンドを構築し、安全で効率的なデータ管理を確保します。 このガイドの終わりまでには、ユーザー認証と安全なデータ処理を備えた本番環境向けのウェブアプリケーションが完成します。 学べること astroとback4appを使用してcrudアプリケーションを構築する方法。 カスタムコレクションを使用したスケーラブルなバックエンドの設計。 データ管理を容易にするドラッグアンドドロップの管理インターフェースの使用。 restまたはgraphqlを使用してastroフロントエンドをback4appと統合する。 必要に応じてastroプロジェクトをデプロイし、dockerでコンテナ化する。 前提条件 始める前に、次のことを確認してください 新しいプロジェクトが準備されたback4appアカウント。 ガイダンスについては、 back4appの始め方 https //www back4app com/docs/get started/new parse app をチェックしてください。 astro開発環境の設定。 公式の astroドキュメント https //docs astro build を使用して始めてください。node js（バージョン14以上）がインストールされていることを確認してください。 javascript、astro、およびrest apiに関する基本的な知識。 リフレッシャが必要な場合は、 astroドキュメント https //docs astro build を訪れてください。 ステップ1 – プロジェクトの初期化 新しいback4appプロジェクトの開始 back4appアカウントにサインインします。 「新しいアプリ」をクリックします。 ダッシュボードから。 プロジェクトに名前を付けます： basic crud app astro と指示に従ってセットアップを完了します。 新しいプロジェクトを作成 作成後、プロジェクトはback4appダッシュボードに表示されます—バックエンド構成の基盤です。 ステップ2 – データベーススキーマの作成 データモデルの構造化 crudアプリケーションのために、いくつかのコレクションを定義します。以下は、データベーススキーマを効果的に構成するためのフィールドとタイプを持つサンプルコレクションです。この構造は効率的なcrud操作をサポートします。 1\ アイテムのコレクション フィールド タイプ 目的 id オブジェクトid 自動生成された主キー。 タイトル 文字列 アイテムの名前またはタイトル。 説明 文字列 アイテムの簡単な概要。 作成日時 日付 作成のタイムスタンプ。 更新日時 日付 最終修正のタイムスタンプ。 2\ ユーザーコレクション フィールド タイプ 目的 id オブジェクトid 自動生成された主キー。 ユーザー名 文字列 ユーザーの一意の識別子。 メール 文字列 ユーザーのメールアドレス。 パスワードハッシュ 文字列 認証のための暗号化されたパスワード。 作成日時 日付 アカウントが作成されたとき。 更新日時 日付 アカウントの最終更新時刻。 これらのコレクションは、back4appダッシュボードで新しいクラスを作成し、適切なカラムを追加することで手動で構成できます。 新しいクラスを作成 フィールドを追加するには、データ型を選択し、フィールド名を提供し、必要に応じてデフォルトを定義し、フィールドが必須かどうかをマークします。 カラムを作成 back4app aiエージェントを活用したスキーマ設定 back4appに統合された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 created) \ 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 – astroとback4appの接続 バックエンドが設定されたので、astroフロントエンドを統合する時が来ました。 rest/graphql apiの利用 astroはパフォーマンスに最適化された静的サイトジェネレーターであるため、restまたはgraphql apiを使用してback4appと対話します。このアプローチではparse sdkの必要がありません。 例：restを介してアイテムを取得する 以下は、astroコンポーネント内でのrest api呼び出しの例です // src/components/itemslist astro \ import { usestate, useeffect } from 'react'; const \[items, setitems] = usestate(\[]); useeffect(() => { const fetchitems = 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(); setitems(data results); } catch (error) { console error('failed to fetch items ', error); } }; fetchitems(); }, \[]); \ \<div> \<h2>items\</h2> \<ul> {items map(item => ( \<li key={item objectid}> {item title} – {item description} \</li> ))} \</ul> \</div> astroコンポーネント内でレコードを作成、更新、削除するための同様のapi呼び出しを統合します。 ステップ5 – バックエンドの保護 アクセス制御リスト（acl）の実装 オブジェクトにaclを設定してデータを保護します。たとえば、所有者のみが変更できるアイテムを作成するには async function createprivateitem(data, owner) { const response = await fetch('https //parseapi back4app com/classes/items', { method 'post', headers { 'content type' 'application/json', 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, body json stringify({ title data title, description data description, acl { \[owner id] { 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のuserクラスを使用します。astroプロジェクト内で、rest api呼び出しを活用してユーザーのサインアップとログインのコンポーネントを作成します。 例：ユーザーサインアップ // src/components/signup astro \ import { usestate } from 'react'; const \[username, setusername] = usestate(''); const \[password, setpassword] = usestate(''); const \[email, setemail] = usestate(''); const handlesignup = async (event) => { event preventdefault(); try { const response = await fetch('https //parseapi back4app com/users', { method 'post', headers { 'content type' 'application/json', 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, body json stringify({ username, password, email }) }); const result = await response json(); alert('sign up successful!'); } catch (error) { alert('error during sign up ' + error message); } }; \ \<form on\ submit={handlesignup}> \<input type="text" placeholder="username" value={username} oninput={(e) => setusername(e target value)} /> \<input type="password" placeholder="password" value={password} oninput={(e) => setpassword(e target value)} /> \<input type="email" placeholder="email" value={email} oninput={(e) => setemail(e target value)} /> \<button type="submit">register\</button> \</form> ユーザーログインとセッション管理のために、同様のコンポーネントを構築できます。 ステップ7 – astroフロントエンドのデプロイ back4appのwebデプロイメント機能を使用すると、githubリポジトリに接続することで、astroプロジェクトをシームレスにホストできます。 7 1 プロダクションバージョンの構築 プロジェクトディレクトリでターミナルを開きます。 ビルドコマンドを実行します npm run build これにより、静的アセットを含む最適化された dist フォルダーが生成されます。 ビルドを確認します dist フォルダーに他のアセットディレクトリとともに index html が含まれていることを確認してください。 7 2 プロジェクトリポジトリの整理 リポジトリには、完全なastroソースコードが含まれている必要があります。例としての構造は次のようになります basic crud app astro/ ├── node modules/ ├── public/ │ └── favicon ico ├── src/ │ ├── components/ │ │ ├── itemslist astro │ │ └── signup astro │ └── pages/ │ └── index astro ├── package json └── readme md 例のファイル src/components/itemslist astro // src/components/itemslist astro \ import { usestate, useeffect } from 'react'; const \[items, setitems] = usestate(\[]); useeffect(() => { const getitems = async () => { try { 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 json = await res json(); setitems(json results); } catch (err) { console error('error retrieving items ', err); } }; getitems(); }, \[]); \ \<div> \<h2>item list\</h2> \<ul> {items map(item => ( \<li key={item objectid}> {item title} — {item description} \</li> ))} \</ul> \</div> 7 3 コードをgithubにコミットしてプッシュする gitリポジトリを初期化する（まだの場合）： git init すべてのファイルを追加する： git add 変更をコミットする： git commit m "astroフロントエンドの初期コミット" githubにリポジトリを作成する （例： basic crud app astro )を作成し、プッシュする： git remote add origin https //github com/your username/basic crud app astro git git push u origin main 7 4 githubとback4appのwebデプロイメントをリンクする ウェブデプロイメントにアクセスする： back4appダッシュボードにログインし、プロジェクト（ basic crud app astro ）に移動し、「 web deployment 」オプションを選択します。 githubアカウントを接続する： リポジトリへのアクセスをback4appに許可するためのプロンプトに従ってください。 リポジトリとブランチを選択する： リポジトリ（例： basic crud app astro unhandled content type main ）を選択します。 7 5 デプロイメント設定の構成 ビルドコマンド： リポジトリに事前ビルドされた出力がない場合は、ビルドコマンド（例： npm run build ）を指定します。 出力ディレクトリ： 静的ファイルの場所をback4appが知るために、「 dist 」に設定します。 環境変数： apiキーなど、必要な変数を追加します。 7 6 astroアプリケーションのdocker化（オプション） コンテナ化されたデプロイメントを好む場合は、次のように dockerfile を含めてください \# use an official node image for building from node 16 alpine as builder \# set the working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy source files and build the project copy run npm run build \# use nginx to serve the static files from nginx\ stable alpine copy from=builder /app/dist /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 必要に応じて、webデプロイメント設定にdocker設定を統合してください。 7 7 アプリケーションの起動 デプロイボタンを押す webデプロイメントセクションで。 ビルドプロセスを監視する back4appがあなたのコードを取得し、ビルドし、アプリケーションをデプロイします。 urlを受け取る デプロイが完了すると、back4appがあなたのサイトがライブであるurlを提供します。 ステップ8 – まとめと今後の拡張 素晴らしい仕事です！あなたは今、astroとback4appを使って完全なcrudアプリケーションを作成しました。あなたのプロジェクトには、アイテムとユーザーの詳細なコレクションを持つバックエンドと、rest/graphql apiを通じてすべてのcrud操作を実行するフロントエンドが含まれています。 次のステップ： フロントエンドの強化： 詳細ビュー、検索機能、リアルタイム通知などの機能を追加します。 バックエンド機能の拡張： より複雑なロジックのために、クラウド関数や追加のapiエンドポイントを統合することを検討してください。 さらに深く掘り下げる： 次のリソースを探求してください back4appのドキュメント https //www back4app com/docs と astroのドキュメント https //docs astro build で高度なトピックについて学びましょう。 このチュートリアルに従うことで、あなたはastroとback4appを使用して堅牢でスケーラブルなcrudアプリケーションを構築する知識を持っています。コーディングを楽しみ、新しい可能性を探求してください！