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

38分
概要
このガイドでは、MarkoとBack4appを使用して完全なCRUD（作成、読み取り、更新、削除）アプリケーションを作成する手順を説明します。
このチュートリアルでは、Back4app上に「Basic-CRUD-App-Marko」という名前のプロジェクトを設定し、堅牢なデータベーススキーマを設計し、MarkoフロントエンドをBack4appのAPIと統合します。
このチュートリアルでは、バックエンドを保護し、アプリケーションを本番環境で展開する方法も説明します。
学べること
信頼性の高いバックエンドを使用してデータを効率的に管理するCRUDアプリケーションの構築方法。
スケーラブルなスキーマを設計し、Markoベースのフロントエンドにリンクするためのヒント。
データを簡単に管理するためのBack4appの使いやすい管理インターフェースの利用。
ウェブアプリケーションを立ち上げるためのDockerによるコンテナ化を含む展開戦略。
﻿
前提条件
始める前に、次のものを確認してください:
Back4appアカウントと新しいプロジェクト。
必要に応じて、Back4appの始め方の指示に従ってください。
Marko開発環境の設定。
Marko CLIまたはお好みの設定方法を使用してください。Node.js（v14以降）がインストールされていることを確認してください。
JavaScript、Marko、およびREST APIの基本的な知識。
詳細については、Markoのドキュメントをご覧ください。
﻿
ステップ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エージェントを見つけます。
スキーマを説明する:
必要なコレクションとフィールドを詳しく説明するプロンプトを提供します。
レビューと実装:
生成後、提案されたスキーマをレビューし、変更を適用します。
例のプロンプト
Text
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)
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を介してデータを取得する
JS
// 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);
  }
});
// 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）をレコードに適用してセキュリティを強化します。たとえば、プライベートな製品エントリを作成するには:
JS
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);
  }
}
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アプリ内で、ユーザーのサインアップとログインを次のように実装します:
JS
// 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);
  }
}
// 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 – プロダクションバージョンのビルド
ターミナルでプロジェクトディレクトリを開きます。
ビルドコマンドを実行します:
Bash
npm run build
npm run build
﻿
これにより、最適化された静的ファイルを含む build ディレクトリが生成されます。
ビルドを確認します:
 build フォルダーに index.html とすべてのアセットディレクトリが含まれていることを確認します。
﻿
7.2 – コードの整理とアップロード
あなたのリポジトリには、Markoプロジェクトの完全なソースが含まれているべきです。典型的なディレクトリ構成は次のようになります:
Text
Basic-CRUD-App-Marko-Frontend/
├── node_modules/
├── public/
│   └── index.html
├── src/
│   ├── components/
│   │   ├── fetchProducts.marko
│   │   └── auth.marko
│   ├── app.marko
│   └── api.js
├── package.json
└── README.md
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
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;
}
// 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を初期化する（必要な場合）：
Bash
git init
git init
﻿
ファイルをステージする：
Bash
git add .
git add .
﻿
変更をコミットする：
Bash
git commit -m "Marko CRUDフロントエンドの初期コミット"
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 を含めます:
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;"]
# 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のドキュメントや追加のチュートリアルを参照してください。
MarkoとBack4appでのコーディングを楽しんでください！
フィールド	タイプ	詳細
_id	オブジェクトID	自動生成された主識別子。
名前	文字列	製品名。
詳細	文字列	製品の簡単な説明。
作成日時	日付	製品作成のタイムスタンプ。
更新日時	日付	最後の更新のタイムスタンプ。
フィールド	タイプ	詳細
_id	オブジェクトID	自動生成された一意の識別子。
ユーザー名	文字列	ユーザーのためのユニークな名前。
メール	文字列	ユニークなメールアドレス。
パスワード	文字列	ユーザーのパスワードのハッシュ化されたバージョン。
作成日時	日付	レコード作成タイムスタンプ。
更新日時	日付	最終変更タイムスタンプ。
Building a Basic CRUD Application with Mithril.js: A Detailed Tutorial
Building a Basic CRUD Application with Polymer: A Comprehensive Walkthrough