Building a Basic CRUD Application with Mithril.js: A Detailed Tutorial

概要 このガイドでは、mithril jsを使用してcrud（作成、読み取り、更新、削除）アプリケーションを作成する方法を説明します。 このチュートリアルを通じて、あなたのウェブアプリの強力なバックエンドとして機能する「 basic crud app mithriljs 」というタイトルのback4appプロジェクトを設定する方法を学びます。 効率的なデータスキーマを設計し、back4appの管理パネルを介して管理し、rest api呼び出しを使用してmithril jsフロントエンドを統合します。 学べること 堅牢なバックエンドを使用してデータを確実に処理するcrudシステムの設定方法。 スケーラブルなデータベース設計を構築し、それをmithril jsアプリケーションにリンクするための戦略。 crudアクションを実行するためにback4appの直感的なドラッグアンドドロップ管理インターフェースを利用する。 アプリケーションを迅速に公開するためのdockerコンテナ化を含むデプロイメント方法。 要件 始める前に、次のことを確認してください back4appアカウントとアクティブなプロジェクト。 サポートが必要な場合は、 back4appの始め方 https //www back4app com/docs/get started/new parse app を参照してください。 mithril jsの開発環境。 npmまたはcdnを介してmithrilを含めることができます。node js (v14+) がインストールされていることを確認してください。 javascript、mithril js、およびrestful apiの基本的な知識。 追加のガイダンスについては、 mithril jsのドキュメント https //mithril js org/ を確認してください。 ステップ 1 – プロジェクトの初期化 新しいback4appプロジェクトの設定 back4appアカウントにサインインします。 ダッシュボードから 新しいアプリ ボタンをクリックします。 プロジェクト名を提供します basic crud app mithriljs とガイドに従ってください。 新しいプロジェクトを作成 設定が完了すると、プロジェクトはダッシュボードに表示され、アプリケーションのバックエンドハブとして機能します。 ステップ 2 – データベーススキーマの作成 データモデルの構築 このcrudアプリのために、いくつかの重要なコレクションを設計します。以下は、crud操作を効果的に処理するためのそれぞれのフィールドを持つコレクションを作成するためのアウトラインです。 1\ アイテムコレクション このコレクションには各アイテムの詳細が含まれています。 フィールド タイプ 目的 id オブジェクトid 自動生成された一意の識別子。 タイトル 文字列 アイテムの名前またはタイトル。 説明 文字列 アイテムに関する簡単な要約。 作成日時 日付 作成のタイムスタンプ。 更新日時 日付 最新の更新のタイムスタンプ。 2\ ユーザーコレクション このコレクションはユーザープロフィールと認証の詳細を管理します。 フィールド タイプ 目的 id オブジェクトid 自動生成された一意の識別子。 ユーザー名 文字列 ユーザーのユニークな名前。 メール 文字列 ユーザーのユニークなメールアドレス。 パスワードハッシュ 文字列 安全な認証のためのハッシュ化されたパスワード。 作成日時 日付 ユーザーが登録された時刻。 更新日時 日付 変更のタイムスタンプ。 back4appダッシュボードを介して新しいクラスを作成し、各列を適切に定義することで、これらのコレクションとフィールドを手動で追加できます。 新しいクラスを作成 フィールドを追加するには、適切なデータタイプを選択し、名前を提供し、デフォルトを設定し、必須かどうかをマークします。 列を作成 back4appのaiエージェントを活用したスキーマ自動化 back4appに統合されたaiエージェントは、提供されたプロンプトに基づいてコレクションを自動生成することで、スキーマ作成を効率化します。 aiエージェントの利用方法 プロジェクトダッシュボードから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) このツールは、データベース設計が一貫性があり、crud操作を処理するのに最適であることを保証するのに役立ちます。 ステップ 3 – 管理インターフェースと crud 機能の有効化 管理インターフェースの概要 back4app 管理インターフェースは、バックエンドデータを簡単に管理するために設計されたノーコードソリューションです。ドラッグアンドドロップのデザインにより、crud 操作が簡単に行えます。 管理インターフェースを有効にする方法 back4app ダッシュボードの more セクションに移動します。 「 admin app 」をクリックし、「 enable admin app 」を選択します。 最初の管理ユーザーを作成するために、管理者の資格情報を設定します。このプロセスでは、役割（例えば、 b4aadminuser ）やシステムコレクションも構成されます。 管理アプリを有効にする アクティベーション後、管理インターフェースにログインしてコレクションを管理します。 管理アプリダッシュボード 管理インターフェースを介したcrud操作の実行 新しいレコードの追加： 任意のコレクション（たとえば、アイテム）で「レコードを追加」オプションを使用してエントリを作成します。 レコードの表示/修正： レコードをクリックして詳細を確認したり、フィールドを編集したりします。 レコードの削除： 削除機能を利用して古いエントリをクリアします。 この直感的なインターフェースは、日常的なcrudアクションを簡素化することでユーザーエクスペリエンスを向上させます。 ステップ4 – mithril jsとback4appのリンク バックエンドが準備され、管理インターフェースを介して管理されているので、mithril jsフロントエンドをrest api呼び出しを使用してback4appに接続する時が来ました。 mithril jsを使用したrest api呼び出し バックエンドのback4appと対話するためにrest api呼び出しに依存します。 例：アイテムの取得と表示 アイテムコレクションからアイテムを取得するmithrilコンポーネントを作成します。 // src/components/itemslist js const itemslist = { items \[], loaditems async function() { 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(); itemslist items = data results; } catch (error) { console error('error retrieving items ', error); } }, oninit function() { itemslist loaditems(); }, view function() { return m('div', \[ m('h2', 'items'), m('ul', itemslist items map(item => m('li', { key item objectid }, `${item title} — ${item description}` ) ) ) ]); } }; export default itemslist; このコンポーネントは、コンポーネントが初期化されるときにデータをロードするためにmithrilのライフサイクルメソッド oninit を使用します。 例：新しいアイテムの追加 新しいアイテムを追加するためにpostリクエストを送信するフォームを統合できます // src/components/additem js const additem = { title '', description '', submititem async function() { try { const response = await fetch('https //parseapi back4app com/classes/items', { method 'post', headers { 'content type' 'application/json', 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, body json stringify({ title additem title, description additem description }) }); const data = await response json(); console log('item added ', data); // optionally, refresh the list or redirect the user } catch (error) { console error('error adding item ', error); } }, view function() { return m('div', \[ m('h2', 'add item'), m('input\[type=text]', { placeholder 'title', oninput m withattr('value', value => additem title = value), value additem title }), m('input\[type=text]', { placeholder 'description', oninput m withattr('value', value => additem description = value), value additem description }), m('button', { onclick additem submititem }, 'add item') ]); } }; export default additem; 同様に、対応するhttpメソッド（更新にはput/patch、削除にはdelete）を使用して、更新および削除操作を実装できます。 ステップ5 – バックエンドセキュリティの強化 アクセス制御の実装 各オブジェクトにアクセス制御リスト（acl）を適用してデータを保護します。たとえば、所有者のみが変更できるアイテムを作成するには async function createsecureitem(itemdata, ownerid) { try { const response = await fetch('https //parseapi back4app com/classes/items', { method 'post', headers { 'content type' 'application/json', 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, body json stringify({ title itemdata title, description itemdata description, acl { \[ownerid] { read true, write true }, " " { read false, write false } } }) }); const data = await response json(); console log('secure item created ', data); } catch (error) { console error('error creating secure item ', error); } } クラスレベルの権限設定 (clps) back4appのダッシュボード内で、各コレクションのclpを調整してデフォルトのセキュリティポリシーを定義します。これにより、認可されたユーザーのみが機密情報にアクセスできるようになります。 ステップ6 – ユーザー認証の設定 ユーザーアカウントの設定 back4appはparse userクラスを使用して認証を管理します。mithril jsを使用すると、rest api呼び出しを通じて登録とログインを管理できます。以下はユーザーサインアップの例です // src/components/auth js const auth = { username '', email '', password '', signup async function() { try { const response = await fetch('https //parseapi back4app com/users', { method 'post', headers { 'content type' 'application/json', 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, body json stringify({ username auth username, email auth email, password auth password }) }); const data = await response json(); alert('user registered successfully!'); } catch (error) { alert('registration error ' + error message); } }, view function() { return m('form', { onsubmit function(e) { e preventdefault(); auth signup(); } }, \[ m('input\[type=text]', { placeholder 'username', oninput m withattr('value', value => auth username = value), value auth username }), m('input\[type=email]', { placeholder 'email', oninput m withattr('value', value => auth email = value), value auth email }), m('input\[type=password]', { placeholder 'password', oninput m withattr('value', value => auth password = value), value auth password }), m('button', { type 'submit' }, 'sign up') ]); } }; export default auth; ログインとセッション管理のために、同様の方法を採用できます。 ステップ 7 – mithril js フロントエンドのデプロイ back4appのwebデプロイメント機能を使用すると、githubリポジトリをリンクすることで、mithril jsアプリケーションをシームレスにホストできます。 7 1 本番版のビルド ターミナルでプロジェクトディレクトリを開きます。 ビルドコマンドを実行します npm run build これにより、最適化された静的ファイルを含む build フォルダーが生成されます。 7 2 コードの整理とコミット リポジトリは次のような構造を持つべきです basic crud app mithriljs frontend/ ├── node modules/ ├── public/ │ └── index html ├── src/ │ ├── index js │ ├── components/ │ │ ├── itemslist js │ │ ├── additem js │ │ └── auth js │ └── app js ├── package json └── readme md 例 src/index js import m from "mithril"; import itemslist from " /components/itemslist"; import additem from " /components/additem"; import auth from " /components/auth"; // define a simple routing system m route(document body, "/", { "/" { view function() { return m("div", \[ m(itemslist), m(additem), m(auth) ]); } } }); githubへのコミットとプッシュ gitを初期化する（まだの場合） git init ファイルを追加する git add 変更をコミットする git commit m "initial commit of mithril js frontend" githubにリポジトリを作成する（例： basic crud app mithriljs frontend ）そしてコードをプッシュする git remote add origin https //github com/your username/basic crud app mithriljs frontend git git push u origin main 7 3 githubとwebデプロイメントのリンク back4appダッシュボードにログインし、プロジェクト（ basic crud app mithriljs ）に移動し、 web deployment を選択します。 画面の指示に従ってgithubアカウントを接続します。 mithril jsソースコードを含むリポジトリとブランチ（例： main ）を選択します。 7 4 デプロイメント設定の構成 構成 ビルドコマンド ビルドフォルダが存在しない場合は、 npm run build を指定します。 出力ディレクトリ これを build に設定して、静的アセットを指します。 環境変数 必要なapiキーや設定を追加します。 7 5 アプリケーションのdocker化（オプション） コンテナ化を好む場合は、 dockerfile を含めてください。 \# use an official node image for building from node 16 alpine as builder workdir /app copy package json / run npm install copy run npm run build \# serve using nginx from nginx\ stable alpine copy from=builder /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 7 6 アプリケーションのデプロイ back4appのwebデプロイメントセクションで デプロイ ボタンを押します。 back4appがアプリケーションをプル、ビルド、デプロイする際にビルドプロセスを監視します。 完了すると、ライブのmithril jsアプリのurlが届きます。 7 7 デプロイの確認 提供されたurlをブラウザで開きます。 アプリケーションが読み込まれ、ナビゲーションが機能し、アセットが適切に提供されることを確認します。 必要に応じてブラウザの開発者ツールを使用してトラブルシューティングを行います。 ステップ8 – まとめと今後の方向性 よくできました！あなたは、back4appと統合されたmithril jsを使用して基本的なcrudアプリを成功裏に構築しました。 「 basic crud app mithriljs 」というプロジェクトを設定し、アイテムとユーザーのデータベーススキーマを定義し、管理インターフェースを通じてバックエンドを管理しました。 さらに、rest api呼び出しを使用してmithril jsフロントエンドを接続し、データを保護するためのセキュリティ対策を適用しました。 次は何ですか？ フロントエンドの改善： 詳細ビュー、検索機能、またはライブ更新などの機能を追加します。 バックエンド機能の拡張： クラウド機能、追加のapi統合、または役割ベースの権限を探ります。 もっと学ぶ： より深く掘り下げて、 back4appのドキュメント https //www back4app com/docs やmithril jsガイドを参照し、さらなる強化を図ります。 コーディングを楽しんで、プロジェクトの成功を祈っています！