Building a CRUD Application with Qwik: A Comprehensive Tutorial

概要 このガイドでは、qwikを使用して完全に機能するcrud（作成、読み取り、更新、削除）アプリケーションを作成する方法を学びます。 データ管理のためにアプリをback4appに接続しながら、基本的な操作を示します。最初に、データ管理のバックエンドとして機能する「 basic crud app qwik 」というタイトルのback4appプロジェクトを設定します。 次に、コレクションとフィールドを手動で定義するか、back4app aiエージェントの支援を受けて、スケーラブルなデータベースを構成します。これにより、crudタスクを効率的に処理するためにデータモデルが最適化されます。 次に、back4app admin appを利用して、コレクションをシームレスに管理します。このユーザーフレンドリーなドラッグアンドドロップインターフェースは、レコードの作成、更新、削除を直感的に行う方法を提供することで、データ操作を簡素化します。 最後に、restまたはgraphql apiを使用してqwikフロントエンドをback4appと統合し、堅牢なセキュリティコントロールを実装します。 このチュートリアルの終わりまでに、あなたの生産準備が整ったアプリケーションはcrud操作を処理するだけでなく、ユーザー認証と安全なデータアクセスもサポートします。 重要な洞察 信頼できるバックエンドを使用してデータを効果的に処理するcrudアプリケーションの開発技術を習得します。 適応可能なバックエンドを設計し、qwikフロントエンドと統合してユーザーインタラクティビティを向上させる方法を発見します。 crud機能を効率化するためのドラッグアンドドロップ管理インターフェース（back4app admin app）の利点を探ります。 dockerコンテナ化を含むデプロイメント戦略について学び、ウェブアプリケーションを迅速に立ち上げます。 前提条件 始める前に、次のことを確認してください 新しいプロジェクトを設定したback4appアカウント。 支援が必要な場合は、 back4appの始め方 https //www back4app com/docs/get started/new parse app を訪れてください。 qwik開発環境。 次の qwikドキュメント https //qwik builder io/docs/getting started/ を使用してプロジェクトを設定してください。node js（バージョン14以降）がインストールされていることを確認してください。 javascript、qwik、およびrest apiの基本的な理解。 リフレッシャが必要な場合は、 qwikドキュメント https //qwik builder io/docs/ を参照してください。 ステップ1 – プロジェクトの初期化 新しいback4appプロジェクトの設立 back4appアカウントにサインインします。 「新しいアプリ」をクリックします ダッシュボードで。 プロジェクト名を入力します： basic crud app qwik と、プロジェクトを作成するための指示に従います。 新しいプロジェクトを作成 新しいプロジェクトはダッシュボードに表示され、アプリケーションのバックエンド基盤を形成します。 ステップ2 – データベーススキーマの設計 データモデルの作成 このcrudアプリでは、いくつかのコレクションを定義します。以下は、crud操作を処理するための効果的なデータベーススキーマを作成するのに役立つ必要なフィールドとタイプを示す例です。 1\ アイテムコレクション このコレクションは各アイテムの詳細を保持しています。 フィールド データ型 説明 id オブジェクトid 自動生成された主キー。 タイトル 文字列 アイテムの名前。 説明 文字列 アイテムに関する簡単な詳細。 作成日時 日付 アイテムが作成されたタイムスタンプ。 更新日時 日付 最後の更新のタイムスタンプ。 2\ ユーザーコレクション このコレクションはユーザーの詳細と認証情報を保存します。 フィールド データ型 説明 id オブジェクトid 自動生成された主キー。 ユーザー名 文字列 ユーザーのユニーク識別子。 メール 文字列 ユーザーのユニークなメールアドレス。 パスワードハッシュ 文字列 ログインのための暗号化されたパスワード。 作成日時 日付 アカウント作成のタイムスタンプ。 更新日時 日付 ユーザーアカウントの最終更新タイムスタンプ。 back4appダッシュボードを通じて新しいクラスを作成し、必要に応じて各列を設定することで、これらのコレクションを手動で追加できます。 新しいクラスを作成 簡単にフィールドを追加するには、タイプを選択し、名前を提供し、デフォルト値と制約を設定します。 カラムを作成 back4app aiエージェントを活用したスキーマ作成 back4app aiエージェントは、説明的なプロンプトに基づいてスキーマを自動的に生成できます。この機能はプロジェクトのセットアップを加速し、一貫性を確保します。 aiエージェントの操作方法 aiエージェントにアクセスする back4appダッシュボードまたはプロジェクト設定内で見つけます。 データモデルの詳細を記述する 必要なコレクションとフィールドを説明するプロンプトを提供します。 レビューと実装 生成されたスキーマの提案を評価し、プロジェクトに適用します。 サンプルプロンプト 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ダッシュボードから。 「管理アプリ」を選択 そしてクリックします 「管理アプリを有効にする」。 管理者資格情報を設定 管理者ユーザーを作成することで、役割とシステムコレクションが自動的に確立されます。 管理アプリを有効にする アクティベーション後、管理アプリにサインインしてデータを簡単に管理します。 管理アプリダッシュボード 管理アプリを通じてcrudアクションを実行する レコードを追加： いずれかのコレクション（例：アイテム）内の「レコードを追加」ボタンを使用して新しいエントリを作成します。 レコードを表示/編集： 任意のレコードをクリックしてその詳細を確認したり、更新を行ったりします。 レコードを削除： 削除機能を利用して古いエントリを排除します。 このツールはデータ操作を効率化し、スムーズなユーザー体験を保証します。 ステップ4 – qwikをback4appに接続する バックエンドが設定されたので、qwikフロントエンドをback4appと統合する時が来ました。 オプション：restまたはgraphql apiを使用する back4appと対話するためにrest api呼び出しを使用します。 例：qwikでrestを介してアイテムを取得する qwikコンポーネントを作成します（例： src/components/itemslist tsx ）アイテムを取得して表示します // src/components/itemslist tsx import { component$, usetask$ } from '@builder io/qwik'; export const itemslist = component$(() => { const items = \[]; usetask$(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 push( data results); } catch (error) { console error('error retrieving items ', error); } }); return ( \<div> \<h2>items\</h2> \<ul> {items map((item any) => ( \<li key={item objectid}> {item title} — {item description} \</li> ))} \</ul> \</div> ); }); export default itemslist; このコンポーネントはfetch apiを使用してback4appのrestエンドポイントを呼び出し、アイテムのリストを取得します。 他のcrud操作（作成、更新、削除）については、同様のrest呼び出しをqwikコンポーネントに統合してください。 ステップ5 – バックエンドのセキュリティ アクセス制御リスト（acl）の実装 オブジェクトにaclを設定することでデータセキュリティを強化します。たとえば、特定のアイテムへのアクセスを制限するには async function createprivateitem(itemdata { title string; description string }, ownerid string) { try { 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 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); } catch (error) { console error('error creating private item ', error); } } クラスレベルの権限（clp）の設定 back4appダッシュボード内で、各コレクションのclpを調整してデフォルトのアクセスポリシーを強制し、認可されたユーザーのみが機密データにアクセスできるようにします。 ステップ6 – ユーザー認証 ユーザーアカウントの確立 back4appはparseのユーザークラスを利用して認証を管理します。qwikアプリ内で、以下のようにユーザーのサインアップとログインを実装します。 例：qwikのサインアップコンポーネント // src/components/auth tsx import { component$, usestore } from '@builder io/qwik'; export const signup = component$(() => { const store = usestore({ username '', password '', email '' }); const handlesignup = async (e event) => { e 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 store username, password store password, email store email }) }); const data = await response json(); alert('user successfully registered!'); } catch (error any) { alert('registration error ' + error message); } }; return ( \<form onsubmit$={handlesignup}> \<input type="text" placeholder="username" value={store username} oninput$={(e) => (store username = (e target as htmlinputelement) value)} /> \<input type="password" placeholder="password" value={store password} oninput$={(e) => (store password = (e target as htmlinputelement) value)} /> \<input type="email" placeholder="email" value={store email} oninput$={(e) => (store email = (e target as htmlinputelement) value)} /> \<button type="submit">register\</button> \</form> ); }); 同様のアプローチは、ログインおよびセッション管理にも適用できます。ソーシャル認証、メール確認、パスワード回復などの追加オプションは、back4appを介して設定できます。 ステップ7 – webデプロイメントを介してqwikフロントエンドをデプロイする back4appのwebデプロイメントサービスは、githubリポジトリをリンクすることでqwikフロントエンドのシームレスなホスティングを可能にします。サイトをデプロイするための手順は次のとおりです 7 1 プロダクションビルドを作成する ターミナルでプロジェクトフォルダーを開きます。 ビルドコマンドを実行します npm run build これにより、最適化された静的アセットを含む build フォルダーが生成されます。 ビルドを確認します build フォルダーに index html ファイルと関連するアセットディレクトリがあることを確認してください。 7 2 コードを整理してgithubにコミットする リポジトリには、qwikフロントエンドの完全なソースが含まれている必要があります。典型的な構造は次のようになります basic crud app qwik frontend/ \| node modules/ \| public/ \| └── index html \| src/ \| ├── root tsx \| ├── entry tsx \| └── components/ \| ├── itemslist tsx \| └── auth tsx \| package json \| readme md 例 src/root tsx // src/root tsx import { component$ } from '@builder io/qwik'; import itemslist from ' /components/itemslist'; export default component$(() => { return ( \<div style={{ padding '2rem' }}> \<h1>crud application\</h1> \<itemslist /> \</div> ); }); コードをコミットする gitを初期化する（まだ行っていない場合） git init ファイルをステージする git add 変更をコミットする git commit m "qwikフロントエンドコードの初期コミット" githubリポジトリを作成する 例えば、名前を basic crud app qwik frontend にする。 コードをgithubにプッシュする git remote add origin https //github com/your username/basic crud app qwik frontend git git push u origin main 7 3 リポジトリをwebデプロイメントに接続する webデプロイメントにアクセスする back4appダッシュボードにログインし、プロジェクト（basic crud app qwik）を選択し、 webデプロイメント セクションに移動します。 githubにリンクする 画面の指示に従ってgithubアカウントを接続します。 リポジトリとブランチを選択する リポジトリ（例 basic crud app qwik frontend unhandled content type 7 4 デプロイメント設定 追加設定を指定してください ビルドコマンド プリビルドされた build フォルダーが含まれていない場合は、コマンドを設定します（例 npm run build )。 出力ディレクトリ 出力ディレクトリを build として定義します。 環境変数 apiキーなど、必要な変数を挿入します。 7 5 dockerを使用してqwikアプリをコンテナ化する（オプション） dockerを選択する場合は、次のような dockerfile を含めてください \# use node for building the app from node 16 alpine as build workdir /app copy package json / run npm install copy run npm run build \# serve the built app with nginx 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を受け取る： デプロイ後、アプリがホストされているurlが提供されます。 7 7 デプロイの確認 urlを訪問： 提供されたリンクをブラウザで開きます。 機能をテスト： すべてのルートとアセットが正しく読み込まれることを確認します。 必要に応じてデバッグ： ブラウザの開発者ツールとback4appのログを使用して問題をトラブルシュートします。 ステップ8 – まとめと今後の改善 よくやりました！あなたはqwikとback4appを使用して、完全なcrudアプリを成功裏に構築しました。 あなたはプロジェクト basic crud app qwik を立ち上げ、アイテムとユーザーのための詳細なデータベーススキーマを作成し、管理アプリでデータを管理しました。 さらに、あなたはqwikのフロントエンドをバックエンドに接続し、強力なセキュリティ対策を適用しました。 次のステップ： フロントエンドを拡張する： 詳細なアイテムビュー、検索機能、またはリアルタイム更新などの機能でqwikアプリを強化しましょう。 さらなる機能を追加する： 高度なバックエンドロジック、サードパーティapi、または役割ベースのアクセス制御を統合することを検討してください。 追加リソースを探る： back4appのドキュメント https //www back4app com/docs やさらなるqwikチュートリアルを参照して、パフォーマンスの改善やカスタム統合に関する深い知識を得てください。 このチュートリアルに従うことで、あなたは作成するためのノウハウを持っています。