How to Build a Basic CRUD App with Angular?

はじめに このガイドでは、angularを使用して基本的なcrud（作成、読み取り、更新、削除）アプリケーションを構築するプロセスを説明します。 angularの強力なフレームワークを活用して、データ操作を効率的に管理するアプリケーションを開発する方法を学びます。 まず、 basic crud app angular という新しいback4appプロジェクトを作成し、構成します。これがバックエンドデータ管理の基盤となります。 次に、詳細なコレクションとフィールドを手動で、またはback4app aiエージェントの支援を受けて概説することで、スケーラブルなデータベースモデルを設計します。このステップにより、システムがすべてのcrud機能を処理できるように準備されます。 スキーマを設定した後、コレクションとレコードを簡単に管理するために、直感的なドラッグアンドドロップインターフェースであるback4app admin appを探索します。 最後に、rest/graphql（または好みに応じてparse sdk）を使用してangularフロントエンドをback4appと統合し、バックエンドを保護するための高度なセキュリティ対策を実装します。 このチュートリアルの終わりまでに、ユーザー認証と包括的なcrud機能を備えた本番環境向けのangularアプリケーションを構築することができます。 重要なポイント 信頼性の高いバックエンドを持つcrudアプリケーションを効率的に構築する方法をマスターします。 スケーラブルなデータモデルを作成し、それをangularフロントエンドにリンクさせる実践的な洞察を得ます。 back4app admin appのユーザーフレンドリーなインターフェースを利用して、データ管理を簡単に行う方法を学びます。 dockerコンテナ化を含むデプロイメント戦略を理解し、angularアプリを迅速に立ち上げる方法を学びます。 前提条件 始める前に、以下のものを用意してください 新しいプロジェクトが設定されたback4appアカウント。 助けが必要ですか？ back4appの始め方 https //www back4app com/docs/get started/new parse app を確認してください。 angular開発環境。 angular cliをインストールするには、 npm install g @angular/cli を実行し、 ng new を使用して新しいプロジェクトを作成します。node js（バージョン14以上）がインストールされていることを確認してください。 typescript、angular、およびrest apiの基本的な理解。 復習するには、 angularドキュメント https //angular io/docs を訪れてください。 ステップ1 – プロジェクトの設定 新しいback4appプロジェクトの立ち上げ back4appアカウントにサインインします。 「新しいアプリ」ボタンをクリックします ダッシュボードから。 プロジェクト名を入力します： basic crud app angular とセットアップのプロンプトに従います。 新しいプロジェクトを作成 プロジェクトが作成されると、back4appダッシュボードに表示され、バックエンド構成の強固な基盤を提供します。 ステップ2 – データベーススキーマの作成 データモデルの構築 このcrudアプリケーションでは、いくつかのコレクションを定義します。以下は、データベーススキーマの基礎を形成するコレクションとそのフィールドの例です。これらのコレクションは、アプリケーションが基本的な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 primary key) \ title string \ description string \ created at date (auto generated) \ updated at date (auto updated) 2\) collection users \ fields \ id objectid (auto generated primary key) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto generated) \ updated at date (auto updated) このai駆動のアプローチは、プロセスを合理化し、一貫した最適化されたスキーマを保証します。 ステップ3 – 管理アプリの有効化とcrud操作の管理 管理アプリの概要 back4app管理アプリは、バックエンドデータを簡単に管理できるノーコードのドラッグアンドドロップインターフェースを提供します。 これを使えば、レコードの追加、表示、修正、削除などのcrud操作を簡単に行うことができます。 管理アプリの有効化 「その他」メニューに移動 あなたのback4appダッシュボードで。 「管理アプリ」を選択 をクリックし、 「管理アプリを有効にする」。 管理者資格情報を設定： 初期の管理者ユーザーを作成し、役割（例： b4aadminuser )やシステムコレクションを設定します。 管理アプリを有効にする 有効化後、管理アプリにログインしてコレクションやレコードを管理します。 管理アプリダッシュボード crudタスクのための管理アプリの利用 管理アプリ内で、あなたは 新しいレコードを追加： 任意のコレクション（例：アイテム）で「レコードを追加」をクリックして新しいエントリを作成します。 レコードを表示・編集： レコードを選択してその詳細を確認したり、フィールドを更新します。 レコードを削除： 削除オプションを使用して古いレコードを削除します。 この直感的なインターフェースは、バックエンドデータの管理を大幅に簡素化します。 ステップ4 – angularフロントエンドをback4appに接続する バックエンドが完全に設定され、管理アプリを通じて管理されているので、angularフロントエンドをback4appにリンクする時が来ました。 オプションa：angularにparse sdkを統合する parse sdkをインストールします： npm install parse angularプロジェクトにparseを設定します： 設定ファイルを作成します（例： src/app/parse config ts ) // src/app/parse config ts import parse from 'parse'; // 実際のback4appの資格情報に置き換えてください parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; 3\ implement parse in an angular component for example, create a component to fetch and display items ```typescript // src/app/components/items list/items list component ts import { component, oninit } from '@angular/core'; import parse from ' / /parse config'; @component({ selector 'app items list', templateurl ' /items list component html', styleurls \[' /items list component css'] }) export class itemslistcomponent implements oninit { items any\[] = \[]; async ngoninit() { const items = parse object extend('items'); const query = new parse query(items); try { const results = await query find(); this items = results; } catch (error) { console error('error retrieving items ', error); } } } そして、htmlテンプレート（ items list component html ）で items {{ item get('title') }} – {{ item get('description') }} オプションb restまたはgraphqlの利用 parse sdkを使用しないことを好む場合は、restまたはgraphqlを介してcrud操作を実行できます。たとえば、angularでrestを使用してアイテムを取得するには、次のようなサービスメソッドを作成します // src/app/services/items service ts import { injectable } from '@angular/core'; import { httpclient, httpheaders } from '@angular/common/http'; import { observable } from 'rxjs'; @injectable({ providedin 'root' }) export class itemsservice { private apiurl = 'https //parseapi back4app com/classes/items'; constructor(private http httpclient) { } getitems() observable\<any> { const headers = new httpheaders({ 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }); return this http get(this apiurl, { headers }); } } 必要に応じて、これらのapi呼び出しをangularコンポーネント内に統合できます。 ステップ5 – バックエンドの保護 アクセス制御リスト（acl）の実装 aclをオブジェクトに割り当てることで、データセキュリティを強化します。たとえば、所有者のみがアクセスできるアイテムを作成するには async function createsecureitem(itemdata any, owneruser any) { const items = parse object extend('items'); const item = new items(); item set('title', itemdata title); item set('description', itemdata description); // assign acl only the owner has read/write access 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 creating item ', error); } } クラスレベルの権限（clp）の設定 back4appダッシュボード内で、各コレクションのclpを調整してデフォルトのアクセスルールを設定し、認証されたユーザーまたは権限のあるユーザーのみが機密データにアクセスできるようにします。 ステップ6 – ユーザー認証の管理 ユーザーアカウントの作成と管理 back4appはparseのuserクラスを利用して認証を管理します。angularプロジェクトでは、以下のようにユーザー登録とログインを処理できます // src/app/components/auth/auth component ts import { component } from '@angular/core'; import parse from ' / /parse config'; @component({ selector 'app auth', templateurl ' /auth component html', styleurls \[' /auth component css'] }) export class authcomponent { username string = ''; password string = ''; email string = ''; async signup(event 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('user registration successful!'); } catch (error any) { alert('registration error ' + error message); } } } 対応するhtmlテンプレート ( auth component html ) register ユーザーログインとセッション管理に対しても同様のアプローチを適用できます。ソーシャルログインやパスワードリセットなどの機能については、back4appダッシュボードで設定を調整してください。 ステップ 7 – angular フロントエンドのデプロイ back4appのwebデプロイメント機能を使用すると、githubリポジトリから直接コードをデプロイすることでangularアプリケーションをホストできます。このセクションでは、プロダクションビルドを準備し、ソースコードをコミットし、デプロイのためにリポジトリを統合します。 7 1 プロダクションバージョンのビルド ターミナルでプロジェクトディレクトリを開きます。 プロダクションビルドコマンドを実行します ng build prod このコマンドは、angularアプリケーションを最適化された dist/ フォルダーにコンパイルします。 ビルドを確認します dist/ ディレクトリに index html とすべての必要なアセットが含まれていることを確認してください。 7 2 ソースコードの構造化とアップロード あなたのリポジトリには、angularプロジェクト全体が含まれている必要があります。典型的なファイル構造は次のようになります basic crud app angular/ ├── node modules/ ├── src/ │ ├── app/ │ │ ├── app component ts │ │ ├── app module ts │ │ └── components/ │ │ ├── auth/ │ │ │ ├── auth component ts │ │ │ └── auth component html │ │ └── items list/ │ │ ├── items list component ts │ │ └── items list component html ├── angular json ├── package json └── readme md 例 src/app/parse config ts // src/app/parse config ts import parse from 'parse'; // replace with your actual back4app credentials parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; 例 src/app/app component ts import { component } from '@angular/core'; import parse from ' /parse config'; @component({ selector 'app root', template ` \<div style="padding 2rem;"> \<h1>items\</h1> \<app items list>\</app items list> \</div> `, styles \[] }) export class appcomponent { } コードをgithubにコミットする プロジェクトフォルダーにgitリポジトリを初期化する まだ行っていない場合 git init プロジェクトファイルを追加する git add 変更をコミットする git commit m "angularフロントエンドの初期コミット" githubリポジトリを作成する 例えば、名前を basic crud app angular にする。 コードをgithubにプッシュする git remote add origin https //github com/your username/basic crud app angular git git push u origin main 7 3 githubリポジトリとwebデプロイメントのリンク webデプロイメント機能にアクセスする back4appダッシュボードにログインし、プロジェクト（ basic crud app angular ）を選択し、 webデプロイメント を選択します。 githubアカウントを接続する プロンプトに従ってgithubアカウントを統合し、back4appがリポジトリにアクセスできるようにします。 リポジトリとブランチを選択する リポジトリ（例 basic crud app angular unhandled content type main )を選択します。 7 4 デプロイメント設定の構成 必要な構成詳細を提供します ビルドコマンド リポジトリに事前ビルドされた dist/ フォルダーがない場合は、ビルドコマンドを指定します（例 ng build prod )。 出力ディレクトリ 出力ディレクトリを dist/your project name に設定し、back4appが静的ファイルの場所を知ることができるようにします。 環境変数 デプロイメント構成に必要な環境変数（apiキーなど）を追加します。 7 5 dockerを使用したangularアプリケーションのコンテナ化 dockerベースのデプロイメントを好む場合は、リポジトリに dockerfile を含めます。例えば # use an official node image to build the angular app from node 16 alpine as build \# set the working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy the rest of the application and build it copy run npm run build prod \# use nginx to serve the built app from nginx\ stable alpine copy from=build /app/dist/your project name /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] この dockerfile をリポジトリに含めてから、back4appのwebデプロイ設定でdockerデプロイオプションを選択します。 7 6 アプリケーションの起動 デプロイボタンをクリックします デプロイ設定が構成されたら、 デプロイ をクリックします。 デプロイプロセスを監視します back4appはコードを取得し、必要に応じてビルドコマンドを実行し、angularアプリをデプロイします。 urlを取得します デプロイが成功した後、back4appはアプリケーションがライブであるurlを提供します。 7 7 デプロイされたアプリケーションのテスト 提供されたurlにアクセスします ブラウザでurlを開きます。 機能を確認します angularアプリが正しく読み込まれ、すべてのルートが期待通りに機能し、アセットが正しく提供されることを確認します。 必要に応じてトラブルシューティングします ブラウザの開発者ツールを使用して問題を特定し、解決します。問題が発生した場合は、back4appのデプロイログと設定を確認します。 ステップ8 – まとめと今後の方向性 おめでとうございます！ angularとback4appを使用して基本的なcrudアプリケーションを成功裏に構築しました。 「 basic crud app angular 」という名前のプロジェクトを設定し、アイテムとユーザーのための包括的なデータベースコレクションを設計し、直感的な管理アプリを使用してデータを管理しました。 さらに、angularのフロントエンドをバックエンドに接続し、堅牢なセキュリティ対策を実装しました。 次のステップ： フロントエンドを強化する： 詳細なアイテムビュー、検索機能、リアルタイム更新などの高度な機能でangularアプリケーションを拡張します。 機能を拡張する： 追加のバックエンドロジック（クラウドファンクションなど）を統合することや、役割ベースのアクセス制御を実装することを検討してください。 さらなるリソースを探る： back4appのドキュメント https //www back4app com/docs や他のangularリソースをチェックして、理解を深めてください。 このガイドを使って、back4appを使用してangularアプリケーションのための堅牢でスケーラブルなcrudバックエンドを構築する準備が整いました。コーディングを楽しんでください！