How to Build a CRUD Application with Aurelia? A Comprehensive Tutorial

概要 このガイドでは、aureliaフレームワークを使用してシンプルなcrud（作成、読み取り、更新、削除）アプリケーションを作成する方法を学びます。 このチュートリアルでは、aureliaをバックエンドサービスとしてback4appと統合することで、基本的なデータ操作を処理できるアプリケーションを構築する方法を説明します。 最初に、堅牢なデータ管理システムとして機能する「 basic crud app aurelia 」というタイトルのback4appプロジェクトを設定します。 次に、手動でコレクションとフィールドを定義するか、back4app aiエージェントを利用して、スケーラブルなデータベース構造を概説し、信頼性のあるデータ操作を確保します。 その後、データを簡単に管理するためのドラッグアンドドロップインターフェースを提供するback4app管理アプリを活用します。 最後に、rest/graphql呼び出し（または該当する場合はparse sdk）を使用してaureliaフロントエンドをback4appに接続し、詳細なアクセス制御でバックエンドを保護します。 このチュートリアルの終わりまでに、完全なcrud機能、ユーザー認証、および安全なデータ処理を備えた本番環境向けのwebアプリケーションを持つことができます。 主な洞察 信頼性の高いバックエンドサービスを使用してcrudアプリケーションをマスターする。 スケーラブルなバックエンドを設計し、aureliaフロントエンドにリンクするための実践的なスキルを習得する。 シームレスなデータ操作のためのノーコード管理インターフェース（back4app admin app）を探る。 コンテナ化を含む最新の技術を使用してアプリケーションをデプロイする方法を学ぶ。 前提条件 始める前に、以下のものを用意してください アクティブなプロジェクトを持つback4appアカウント。 ガイダンスが必要な場合は、 back4appの始め方 https //www back4app com/docs/get started/new parse app を訪れてください。 aurelia開発環境。 aurelia cliまたは同様のツールを使用し、node js（バージョン14以上）がインストールされていることを確認してください。 javascript、aurelia、およびrest apiの基本的な習熟度。 必要に応じて、 aureliaのドキュメント https //aurelia io/docs を参照してください。 ステップ1 – プロジェクトの設定 新しいback4appプロジェクトの作成 back4appアカウントにサインインします。 ダッシュボードから「新しいアプリ」ボタンを押します 。 プロジェクト名を入力します： basic crud app aurelia とセットアップ手順を完了します。 新しいプロジェクトを作成 作成後、プロジェクトはダッシュボードに表示され、バックエンドの設定とデータ管理の準備が整います。 ステップ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 – aureliaとback4appのリンク バックエンドがadmin appを通じて設定され管理されているので、aureliaフロントエンドをback4appに接続する時が来ました。 restまたはgraphqlの利用 restまたはgraphql apiを使用できます。例えば、restを介してアイテムを取得するには // example rest request to get items async function fetchitems() { 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(); console log('items fetched ', data results); } catch (error) { console error('fetch error ', error); } } fetchitems(); 必要に応じて、これらのapi呼び出しをaureliaコンポーネントに統合します。 ステップ5 – バックエンドの保護 アクセス制御リスト（acl）の実装 データオブジェクトにaclを割り当てることでセキュリティを強化します。たとえば、プライベートアイテムを作成するには async function createsecureitem(itemdata, owneruser) { const items = parse object extend('items'); const item = new items(); item set('title', itemdata title); item set('description', itemdata description); // configure acl restrict access to the owner only const acl = new parse acl(owneruser); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { const saveditem = await item save(); console log('secure item created ', saveditem); } catch (error) { console error('error saving secure item ', error); } } クラスレベルの権限設定（clp） back4appダッシュボード内で、各コレクションのclpを調整してデフォルトのセキュリティルールを強制し、認証されたユーザーまたは権限のあるユーザーのみが機密情報にアクセスできるようにします。 ステップ6 – ユーザー認証の管理 ユーザーアカウントの設定 back4appはparseのuserクラスを使用して認証を処理します。aureliaアプリ内で、以下のようにユーザー登録とログインを管理できます // src/resources/components/auth js import { observable } from 'aurelia framework'; import parse from ' / /parse config'; export class auth { @observable username = ''; @observable password = ''; @observable email = ''; async signup(event) { event preventdefault(); const user = new parse user(); user set('username', this username); user set('password', this password); user set('email', this email); try { await user signup(); alert('registration successful!'); } catch (error) { alert('registration error ' + error message); } } } ログインとセッション管理のために同様のパターンを実装できます。ソーシャルログインの統合、メール確認、パスワードリセットなどの追加機能は、back4appダッシュボードを通じて設定できます。 ステップ 7 – aurelia フロントエンドを web デプロイメントで展開する back4app の web デプロイメント機能を使用すると、github リポジトリからコードをデプロイすることで、aurelia アプリケーションを効率的にホストできます。 このセクションでは、プロダクションビルドを準備し、コードを github にコミットし、リポジトリを web デプロイメントに接続し、サイトをデプロイします。 7 1 プロダクションビルドを作成する ターミナルでプロジェクトディレクトリを開きます。 ビルドコマンドを実行します au build env production このコマンドは、最適化された静的アセットを含む dist フォルダーを生成します。 ビルドを確認します dist フォルダーに index html と javascript、css、画像用の必要なサブディレクトリが含まれていることを確認します。 7 2 プロジェクトコードを整理してアップロードする あなたのgithubリポジトリには、aureliaフロントエンドのすべてのソースファイルが格納されるべきです。例の構造は次のようになります basic crud app aurelia frontend/ \| node modules/ \| public/ \| ` index html \| src/ \| | app js \| | parse config js \| ` resources/ \| | components/ \| | | items list js \| | ` auth js \| package json ` readme md 例のファイル src/parse config js import parse from 'parse'; // insert your back4app credentials here parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; src/app js import { aurelia } from 'aurelia framework'; import environment from ' /environment'; export function configure(aurelia) { aurelia use standardconfiguration() developmentlogging(); if (environment debug) { aurelia use developmentlogging(); } aurelia start() then(() => aurelia setroot()); } import { aurelia } from 'aurelia framework'; import environment from ' /environment'; export function configure(aurelia) { aurelia use standardconfiguration() developmentlogging(); if (environment debug) { aurelia use developmentlogging(); } aurelia start() then(() => aurelia setroot()); } import { aurelia } from 'aurelia framework'; import environment from ' /environment'; export function configure(aurelia) { aurelia use standardconfiguration() developmentlogging(); if (environment debug) { aurelia use developmentlogging(); } aurelia start() then(() => aurelia setroot()); } import { aurelia } from 'aurelia framework'; import environment from ' /environment'; export function configure(aurelia) { aurelia use standardconfiguration() developmentlogging(); if (environment debug) { aurelia use developmentlogging(); } aurelia start() then(() => aurelia setroot()); } コードをgithubにコミットする プロジェクトフォルダーでgitを初期化します（まだ行っていない場合）： git init ファイルをステージします： git add 変更をコミットします： git commit m "aureliaフロントエンドソースの初回コミット" githubにリポジトリを作成する （例： basic crud app aurelia frontend ） コードをgithubにプッシュします： git remote add origin https //github com/your username/basic crud app aurelia frontend git git push u origin main 7 3 githubリポジトリとwebデプロイメントのリンク webデプロイメントにアクセスします： back4appダッシュボードにログインし、プロジェクト（basic crud app aurelia）に移動し、 webデプロイメント オプションを選択します。 githubに接続します： プロンプトに従ってgithubアカウントを統合し、back4appにリポジトリへのアクセスを許可します。 リポジトリとブランチを選択します： リポジトリ（例： basic crud app aurelia frontend ）とブランチ（例： main ）を選択します。 7 4 デプロイメント設定 次の構成詳細を設定します ビルドコマンド もし dist フォルダーが事前にビルドされていない場合、コマンドを指定してください（例 au build env production ) back4appが実行します。 出力ディレクトリ これを dist に設定して、back4appが静的ファイルの場所を知ることができるようにします。 環境変数 必要な環境変数（apiキーなど）を構成設定に追加します。 7 5 aureliaアプリケーションのコンテナ化（docker） dockerデプロイメントを好む場合、次のような dockerfile をリポジトリに含めてください \# use an official node image as the build environment from node 16 alpine as build \# set working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy remaining files and build the app copy run au build env production \# use nginx to serve the production build from nginx\ stable alpine copy from=build /app/dist /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] web deploymentでdockerデプロイメントオプションを適切に設定します。 7 6 アプリケーションのデプロイ デプロイボタンを押す デプロイの設定が完了したら、 デプロイ をクリックします。 ビルドプロセスを監視する back4appはgithubからコードを取得し、必要に応じてビルドコマンドを実行し、アプリケーションをコンテナにデプロイします。 urlを取得する デプロイが完了すると、back4appはaureliaアプリケーションがホストされているurlを提供します。 7 7 デプロイの確認 提供されたurlを開く ブラウザでurlを訪れて、ライブサイトを確認します。 アプリケーションをテストする アプリケーションが正しく読み込まれ、ルートが意図した通りに機能し、すべてのアセット（css、javascript、画像）が提供されていることを確認します。 必要に応じてトラブルシューティングする ブラウザの開発者ツールを使用して問題を診断し、必要に応じてback4appのデプロイメントログを確認します。 ステップ8 – まとめと今後の方向性 おめでとうございます！あなたはaureliaとback4appを使用して完全なcrudアプリケーションを成功裏に構築しました。 「 basic crud app aurelia 」という名前のプロジェクトを設定し、アイテムとユーザーのための包括的なデータベーススキーマを定義し、back4app管理アプリを使用してデータを管理しました。 また、aureliaのフロントエンドをバックエンドと統合し、堅牢なセキュリティ対策を実装しました。 次のステップ： uiを強化する： 詳細なビュー、検索機能、リアルタイムデータ更新を備えたaureliaアプリケーションを拡張します。 高度な機能を追加する： クラウド機能、サードパーティapi、または役割ベースの権限を組み込むことを検討してください。 さらに探求する： 最適化とカスタマイズに関するより詳細なガイダンスのために、 back4appのドキュメント https //www back4app com/docs や追加のaureliaリソースをチェックしてください。 コーディングを楽しんで、開発の旅に幸運を祈ります！