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

概要 このガイドでは、markoとback4appを使用して完全なcrud（作成、読み取り、更新、削除）アプリケーションを作成する手順を説明します。 このチュートリアルでは、back4app上に「 basic crud app marko 」という名前のプロジェクトを設定し、堅牢なデータベーススキーマを設計し、markoフロントエンドをback4appのapiと統合します。 このチュートリアルでは、バックエンドを保護し、アプリケーションを本番環境で展開する方法も説明します。 学べること 信頼性の高いバックエンドを使用してデータを効率的に管理するcrudアプリケーションの構築方法。 スケーラブルなスキーマを設計し、markoベースのフロントエンドにリンクするためのヒント。 データを簡単に管理するためのback4appの使いやすい管理インターフェースの利用。 ウェブアプリケーションを立ち上げるためのdockerによるコンテナ化を含む展開戦略。 前提条件 始める前に、次のものを確認してください back4appアカウントと新しいプロジェクト。 必要に応じて、 back4appの始め方 https //www back4app com/docs/get started/new parse app の指示に従ってください。 marko開発環境の設定。 marko cliまたはお好みの設定方法を使用してください。node js（v14以降）がインストールされていることを確認してください。 javascript、marko、およびrest apiの基本的な知識。 詳細については、 markoのドキュメント https //markojs com/docs/ をご覧ください。 ステップ1 – プロジェクトの設定 新しいback4appプロジェクトの開始 back4appアカウントにサインインします。 ダッシュボードで「新しいアプリ」を選択します。 プロジェクト名を入力します basic crud app marko と画面の指示に従ってください。 新しいプロジェクトを作成 あなたの新しいプロジェクトは、バックエンドの基盤を築くために、back4appダッシュボードに表示されます。 ステップ2 – データベーススキーマの作成 データモデルの構築 このcrudアプリでは、いくつかのコレクションを作成します。以下は、実用的なデータベーススキーマを設計するための提案されたフィールドを持つコレクションの例です。 1\ コレクション 製品 このコレクションは、各製品の詳細を保持します。 フィールド タイプ 詳細 id オブジェクトid 自動生成された主識別子。 名前 文字列 製品名。 詳細 文字列 製品の簡単な説明。 作成日時 日付 製品作成のタイムスタンプ。 更新日時 日付 最後の更新のタイムスタンプ。 2\ コレクション ユーザー このコレクションはユーザーと認証データを保持しています。 フィールド タイプ 詳細 id オブジェクトid 自動生成された一意の識別子。 ユーザー名 文字列 ユーザーのためのユニークな名前。 メール 文字列 ユニークなメールアドレス。 パスワード 文字列 ユーザーのパスワードのハッシュ化されたバージョン。 作成日時 日付 レコード作成タイムスタンプ。 更新日時 日付 最終変更タイムスタンプ。 これらのコレクションは、back4appダッシュボードで新しいクラスを作成し、適切なカラムを追加することで手動で定義できます。 新しいクラスを作成 フィールドのタイプを選択し、カラムに名前を付け、デフォルト値を設定し、必要に応じて必須としてマークすることで、迅速にフィールドを追加できます。 カラムを作成 back4app aiエージェントを利用したスキーマ作成 back4app aiエージェントは、プロンプトに基づいてコレクションとフィールドの定義を生成することで、スキーマ設計を簡素化します。この機能は時間を節約し、データベースの設定における一貫性を確保します。 aiエージェントの使用方法 aiエージェントにアクセスする back4appダッシュボードに移動し、プロジェクト設定でaiエージェントを見つけます。 スキーマを説明する 必要なコレクションとフィールドを詳しく説明するプロンプトを提供します。 レビューと実装 生成後、提案されたスキーマをレビューし、変更を適用します。 例のプロンプト create the following collections for my back4app project 1\) collection products \ fields \ id objectid (auto generated) \ name string \ details 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 string \ created at date (auto generated) \ updated at date (auto updated) このアプローチは、スキーマ作成プロセスを効率化します。 ステップ3 – 管理インターフェースとcrud機能の有効化 管理インターフェースの紹介 back4app管理アプリは、データ管理を簡単にするノーコードインターフェースです。ドラッグアンドドロップ機能を使って、レコードを簡単に追加、変更、表示、または削除できます。 管理インターフェースの有効化 「その他」セクションに移動 あなたのback4appダッシュボードで。 「管理アプリ」を選択 そして次にクリックします 「管理アプリを有効にする。」 管理者資格情報の設定 最初の管理者アカウントを作成し、 b4aadminuser のようなシステムロールを割り当てます。 管理アプリを有効にする 有効化されたら、管理アプリにログインしてバックエンドを管理します。 管理アプリダッシュボード 管理インターフェースを介したcrud操作の管理 管理アプリ内で、あなたは 新しいエントリを追加 コレクション（例：製品）で「レコードを追加」オプションを使用します。 レコードを表示/変更 任意のエントリをクリックして、その詳細を確認または更新します。 エントリを削除 削除機能を利用して、古いレコードを削除します。 この簡素化されたインターフェースは、データ管理タスクを簡素化することでユーザー体験を向上させます。 ステップ4 – markoをback4appに接続する バックエンドが設定されたので、apiを使用してmarkoフロントエンドをback4appと統合する時が来ました。 オプションa apiを使用する rest api呼び出しを使用して、markoアプリケーションでcrud操作を実行します。 例：restを介してデータを取得する // in a marko component script file (e g , fetchproducts marko) import { onmount } from 'marko/src/runtime/client'; onmount(async () => { try { const response = await fetch('https //parseapi back4app com/classes/products', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); const data = await response json(); console log('products ', data results); } catch (error) { console error('failed to fetch products ', error); } }); このコードスニペットは、rest api呼び出しを使用してback4appから製品データを取得する方法を示しています。 ステップ5 – バックエンドの保護 アクセス制御の設定 アクセス制御リスト（acl）をレコードに適用してセキュリティを強化します。たとえば、プライベートな製品エントリを作成するには async function createsecureproduct(productdata, owner) { const product = { name productdata name, details productdata details }; // setup acl only the owner has read/write privileges product acl = { " " { read false, write false }, \[owner id] { read true, write true } }; try { const response = await fetch('https //parseapi back4app com/classes/products', { 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(product) }); const result = await response json(); console log('secure product created ', result); } catch (error) { console error('error creating product ', error); } } デフォルトの権限の設定 back4appダッシュボードを使用して、各コレクションのクラスレベルの権限（clp）を設定し、認可されたユーザーのみが機密データにアクセスできるようにします。 ステップ6 – ユーザー認証の設定 ユーザーアカウントの作成 back4appは認証のためにユーザークラスを使用します。markoアプリ内で、ユーザーのサインアップとログインを次のように実装します // in a marko component script (e g , auth marko) import { onmount } from 'marko/src/runtime/client'; async function registeruser(username, email, password) { const userdata = { username, email, password }; try { const response = await fetch('https //parseapi back4app com/users', { 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(userdata) }); const result = await response json(); console log('user registered ', result); } catch (error) { console error('registration error ', error); } } このスニペットは、rest呼び出しを使用したシンプルなユーザー登録フローを示しています。 ステップ7 – markoフロントエンドのデプロイ back4appのwebデプロイメント機能を使用すると、githubリポジトリから直接markoプロジェクトをホストできます。 7 1 – プロダクションバージョンのビルド ターミナルでプロジェクトディレクトリを開きます。 ビルドコマンドを実行します npm run build これにより、最適化された静的ファイルを含む build ディレクトリが生成されます。 ビルドを確認します build フォルダーに index html とすべてのアセットディレクトリが含まれていることを確認します。 7 2 – コードの整理とアップロード あなたのリポジトリには、markoプロジェクトの完全なソースが含まれているべきです。典型的なディレクトリ構成は次のようになります basic crud app marko frontend/ ├── node modules/ ├── public/ │ └── index html ├── src/ │ ├── components/ │ │ ├── fetchproducts marko │ │ └── auth marko │ ├── app marko │ └── api js ├── package json └── readme md 例 src/api js // src/api js export const api headers = { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }; export async function fetchproducts() { const response = await fetch('https //parseapi back4app com/classes/products', { headers api headers }); const data = await response json(); return data results; } githubへのコミット gitを初期化する（必要な場合）： git init ファイルをステージする： git add 変更をコミットする： git commit m "marko crudフロントエンドの初期コミット" githubリポジトリを作成してプッシュする： 例えば、次のようなリポジトリを使用します： basic crud app marko frontend 7 3 – githubとwebデプロイメントのリンク webデプロイメントにアクセスする： back4appにサインインし、プロジェクト（basic crud app marko）に移動し、 webデプロイメント セクションを開きます。 githubアカウントを接続する： githubアカウントをリンクするための指示に従ってください。 リポジトリとブランチを選択する： リポジトリ（例： basic crud app marko frontend ）とブランチ（例： main ）を選択してデプロイします。 7 4 – デプロイメントの設定 追加のパラメータを設定します ビルドコマンド 事前にビルドされた build フォルダーが存在しない場合、ビルドコマンドを設定します（例 npm run build )。 出力ディレクトリ 出力フォルダーとして build を指定します。 環境変数 必要な変数（apiキーなど）を入力します。 7 5 – dockerを使用したコンテナ化 dockerを好む場合は、プロジェクトリポジトリに dockerfile を含めます \# use a node image for building the app from node 16 alpine as build \# set working directory workdir /app \# install dependencies copy package json / run npm install \# copy all files and build the app copy run npm run build \# use nginx to serve the build from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] デプロイ設定で、dockerデプロイオプションを選択します。 7 6 – アプリケーションのデプロイ デプロイボタンを押す back4appはあなたのリポジトリを取得し、ビルドを実行し、アプリをデプロイします。 プロセスを監視する ビルドやランタイムの問題についてデプロイメントログを確認してください。 サイトにアクセスする デプロイが完了すると、back4appはホストされたmarkoアプリケーションのurlを提供します。 7 7 – デプロイの確認 提供されたurlを開く アプリケーションが正しく読み込まれることを確認してください。 アプリを通して実行する すべてのページが読み込まれ、crud機能が期待通りに動作することを確認してください。 必要に応じてトラブルシューティングする ブラウザの開発者ツールとback4appのログを使用して問題に対処してください。 ステップ8 – 最終的な考えと今後の改善 素晴らしい仕事です！あなたは今、markoとback4appを使ってフル機能のcrudアプリケーションを構築しました。 「 basic crud app marko 」というプロジェクトを設定し、製品とユーザーのための詳細なコレクションを作成し、直感的な管理インターフェースを介してデータを管理し、rest apiを使用してmarkoフロントエンドを統合し、堅牢なコントロールでバックエンドを保護しました。 次のステップ： uiを強化する： 製品詳細ページ、検索機能、ライブ通知などの高度な機能を追加することを検討してください。 バックエンド機能を拡張する： サーバーレス機能やサードパーティapiの統合を検討して、機能を追加してください。 知識を深める： パフォーマンスチューニングやカスタム統合に関するさらなる洞察を得るために、 back4appのドキュメント https //www back4app com/docs や追加のチュートリアルを参照してください。 markoとback4appでのコーディングを楽しんでください！