How to Build a Basic CRUD App with Meteor? A Step-by-Step Guide

概要 このガイドでは、meteorを使用してcrud（作成、読み取り、更新、削除）アプリケーションを開発する方法を学びます。 meteorアプリをバックエンドサービスとしてback4appと統合し、データ管理が堅牢でスケーラブルであることを保証します。 チュートリアルを通じて、「 basic crud app meteor 」というプロジェクトを設定し、データベーススキーマを定義し、コレクションを構成します—すべてback4appの強力な機能を活用しながら行います。 また、効率的なデータ管理のためにback4appのadmin appを使用する方法や、高度なアクセス制御手段でバックエンドを保護する方法も学びます。 最後には、crud操作とユーザー認証をサポートする本番環境向けのmeteorアプリケーションが完成します。 主なポイント back4appを使用してデータ操作を効率的に処理するcrud機能を開発します。 meteorフロントエンドに合わせたスケーラブルなバックエンドを設計・実装します。 back4appのドラッグアンドドロップadmin appを利用してデータ操作を簡素化します。 meteorアプリケーションのためのデプロイメント戦略、特にdockerコンテナ化を学びます。 前提条件 開始する前に、次のものを確認してください 新しいプロジェクトを持つback4appアカウント。 セットアップ手順については、 back4appの始め方 https //www back4app com/docs/get started/new parse app を確認してください。 meteor開発環境。 meteorの公式ウェブサイト https //www meteor com/install からmeteorをインストールし、node js（v14以降）が利用可能であることを確認してください。 javascript、meteor、およびrest apiの基本的な知識。 必要に応じて、 meteorのドキュメント https //docs meteor com/ を参照してください。 ステップ1 – プロジェクトの初期化 back4appプロジェクトの設定 back4appアカウントにサインインします。 ダッシュボードの「新しいアプリ」オプションをクリックします。 プロジェクト名を入力します basic crud app meteor と入力し、プロンプトに従ってプロジェクトを作成します。 新しいプロジェクトを作成 作成後、あなたのプロジェクトはback4appダッシュボードにリストされ、バックエンド設定のためのしっかりとした基盤を築きます。 ステップ2 – データベーススキーマの設計 データモデルの作成 基本的なcrudアプリケーションには、複数のコレクションが必要です。以下は、データ操作を効果的に管理するために必要なコレクションとフィールドの詳細な例です。 1\ コレクション アイテム このコレクションには、すべてのアイテムの詳細が含まれています。 フィールド タイプ 詳細 id オブジェクトid 自動生成された一意の識別子。 タイトル 文字列 アイテムの名前またはタイトル。 説明 文字列 アイテムの簡単な要約。 作成日時 日付 アイテム作成のタイムスタンプ。 更新日時 日付 最新の更新のタイムスタンプ。 2\ コレクション ユーザー このコレクションはユーザー情報と認証の詳細を管理します。 フィールド タイプ 詳細 id オブジェクトid 自動生成された一意の識別子。 ユーザー名 文字列 ユーザーのユニーク識別子。 メール 文字列 ユニークなメールアドレス。 パスワードハッシュ 文字列 安全にハッシュ化されたパスワード。 作成日時 日付 アカウント作成のタイムスタンプ。 更新日時 日付 最新のアカウント更新のタイムスタンプ。 back4appダッシュボードでこれらのコレクションを手動で追加し、それぞれのクラスを作成して対応するフィールドを定義します。 新しいクラスを作成 各フィールドをそのタイプを選択し、名前を指定し、必要に応じてデフォルト値を追加し、必須かどうかを示すことで作成します。 カラムを作成 back4app aiエージェントを活用したスキーマ作成 back4app aiエージェントは、ダッシュボードから直接スキーマ生成を簡素化します。希望するコレクションとフィールドを概説する説明的なプロンプトを提供することで、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の管理アプリは、直感的でノーコードのツールであり、ドラッグアンドドロップ操作を通じてバックエンドデータを簡単に管理できます。レコードの作成、読み取り、更新、削除を簡素化します。 管理アプリの有効化 「その他」メニューに移動 あなたのback4appダッシュボードで。 「管理アプリ」を選択 をクリックし、 「管理アプリを有効にする」。 管理者資格情報の設定： 初期の管理者ユーザーを作成し、 b4aadminuser などのデフォルトの役割を設定します。 管理アプリの有効化 有効化後、管理アプリにログインしてデータの管理を開始します。 管理アプリダッシュボード crudタスクのための管理アプリの利用 管理アプリ内で、あなたは： レコードの追加： どのコレクション（アイテムなど）でも「レコードを追加」をクリックして新しいエントリを作成します。 レコードの表示/変更： レコードを選択してその詳細を確認または変更します。 レコードの削除： もはや必要のないレコードを削除します。 このインターフェースは、データ操作を簡単にすることでユーザーエクスペリエンスを大幅に向上させます。 ステップ4 – meteorとback4appの統合 バックエンドが管理アプリを介して設定され、管理されるようになったので、meteorアプリケーションをback4appに接続する時が来ました。 meteorでのrest apiの使用 rest api呼び出しを行うことでback4appと統合できます。 例：restを介してデータを取得する 以下は、meteorメソッドでback4appからアイテムを取得するためのコードスニペットの例です。 // /imports/api/items js import { meteor } from 'meteor/meteor'; import { http } from 'meteor/http'; meteor methods({ 'items fetch'() { try { const response = http get('https //parseapi back4app com/classes/items', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); return response data results; } catch (error) { throw new meteor error('fetch failed', 'unable to fetch items '); } } }); meteorコンポーネントやメソッド内で、レコードの作成、更新、削除のために同様のrest呼び出しを統合します。 ステップ5 – バックエンドのセキュリティ アクセス制御リスト（acl）の実装 オブジェクトにaclを割り当てることでデータを保護します。たとえば、所有者のみに表示されるアイテムを作成するには async function createsecureitem(itemdata, owneruser) { const itempayload = { title itemdata title, description itemdata description, acl { \[owneruser id] { read true, write true }, ' ' { read false, write false } } }; try { 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(itempayload) }); const data = await response json(); return data; } catch (error) { console error('error creating secure item ', error); } } クラスレベルの権限（clp）の設定 back4appダッシュボード内で、各コレクションのclpを設定してデフォルトのアクセスルールを制御します。このステップにより、認可されたユーザーのみが機密データにアクセスできるようになります。 ステップ6 – ユーザー認証の管理 meteorユーザーアカウントの設定 back4appはparseのユーザークラスを認証に利用しますが、meteorでは標準のrest呼び出しを使用してユーザー登録とログインを処理できます。 例：restを介したユーザー登録 // /imports/api/auth js import { http } from 'meteor/http'; export const signupuser = async (username, password, email) => { try { const response = await http post('https //parseapi back4app com/users', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, data { username, password, email } }); return response data; } catch (error) { throw new meteor error('signup failed', error message); } }; ユーザーログインとセッション管理のために同様のメソッドを実装します。メール確認やパスワードリセットなどの追加機能は、back4appダッシュボードを介して管理できます。 ステップ7 – meteorフロントエンドのデプロイ back4appのwebデプロイメント機能は、githubリポジトリにリンクすることでmeteorアプリケーションのホスティングを容易にします。meteorアプリをデプロイするための手順は以下の通りです。 7 1 プロダクションビルドを生成する プロジェクトディレクトリでターミナルを開きます。 meteorアプリをビルドします meteor build /output directory このコマンドは、最適化された静的アセットを含むビルドディレクトリを作成します。 ビルドを確認します ビルド出力に index html と必要なアセットディレクトリが含まれていることを確認してください。 7 2 コードを整理してアップロードする あなたのgithubリポジトリには、meteorアプリケーションの完全なソースコードが含まれている必要があります。典型的な構造は次のようになります basic crud app meteor/ ├── meteor/ ├── client/ │ └── main html ├── server/ │ └── main js ├── imports/ │ ├── api/ │ │ ├── items js │ │ └── auth js │ └── startup/ │ └── index js ├── package json └── readme md サンプルファイル /imports/api/items js // /imports/api/items js import { meteor } from 'meteor/meteor'; import { http } from 'meteor/http'; meteor methods({ 'items fetch'() { try { const response = http get('https //parseapi back4app com/classes/items', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); return response data results; } catch (error) { throw new meteor error('fetch failed', 'unable to retrieve items '); } } }); コードをgithubにコミットする プロジェクトフォルダーでgitを初期化する（未実施の場合）： git init すべてのソースファイルを追加する： git add 変更をコミットする： git commit m "初期meteor crudアプリのコミット" githubリポジトリを作成する （例： basic crud app meteor ） コードをプッシュする： git remote add origin https //github com/your username/basic crud app meteor git git push u origin main 7 3 githubとback4appのwebデプロイメントを接続する webデプロイメントにアクセスする： back4appにサインインし、あなたの basic crud app meteor プロジェクトに移動し、 webデプロイメント オプションをクリックします。 githubアカウントをリンクする： 画面の指示に従ってgithubアカウントを統合します。 リポジトリとブランチを選択する： リポジトリ（例： basic crud app meteor ）とコードを含むブランチ（例： main ）を選択します。 7 4 デプロイメント設定 次の設定を構成します ビルドコマンド リポジトリにプリビルドフォルダがない場合は、ビルドコマンドを指定します（例 meteor build /output directory )。 出力ディレクトリ 静的アセットを保持するディレクトリ（出力フォルダなど）を示します。 環境変数 必要なapiキーや設定を追加します。 7 5 meteorアプリのdocker化（オプション） dockerがデプロイの好みである場合は、以下のような dockerfile を含めます \# use the official node image as a base 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 app source code copy \# build the meteor app run meteor build /output directory \# serve with nginx from nginx\ stable alpine copy from=build /app/output/bundle/programs/web browser /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] コンテナ化を選択する場合は、back4appでdockerデプロイオプションを選択します。 7 6 デプロイメントの最終化 アプリケーションをデプロイ すべての設定が完了したら、 デプロイ ボタンをクリックします。 ビルドを監視 back4appがコードを取得し、ビルドコマンドを実行し、アプリをデプロイします。 urlにアクセス デプロイが完了すると、back4appがmeteorアプリが稼働しているurlを提供します。 7 7 デプロイメントの確認 urlを訪問 提供されたurlをブラウザで開きます。 機能をテスト すべてのルート、スタイル、スクリプトが正しく機能しているか確認します。 必要に応じてデバッグ ブラウザの開発者ツールとback4appのログを使用して、問題を解決します。 ステップ8 – 最終的な考えと今後の改善 おめでとうございます！あなたはmeteorを使用して完全なcrudアプリケーションを成功裏に構築し、back4appと統合しました。 「 basic crud app meteor 」という名前のプロジェクトを設定し、アイテムとユーザーのための堅牢なデータベーススキーマを設計し、admin appを通じてデータを管理しました。 さらに、rest apiを使用してmeteorのフロントエンドをback4appと統合し、データ保護のためのセキュリティ対策を適用しました。 次のステップ： フロントエンドを拡張する： 詳細ビュー、検索機能、リアルタイム更新などの機能を追加します。 高度なバックエンドロジックを実装する： より複雑な操作のためにmeteorメソッドを使用することや、追加のサードパーティapiを統合することを検討してください。 さらなるリソースを参照する： 「 back4appのドキュメント https //www back4app com/docs 」や「 meteorのガイド https //docs meteor com/ 」を探求して、パフォーマンスやカスタマイズに関する深い洞察を得てください。 コーディングを楽しんで、meteorとback4appでの構築を楽しんでください！