Building a Basic CRUD Application with Cycle.js: A Comprehensive Guide

概要 このガイドでは、cycle jsを使用してフル機能のcrud（作成、読み取り、更新、削除）アプリケーションを構築する方法を説明します。 このチュートリアルでは、「 basic crud app cyclejs というタイトルのback4appプロジェクトを設定し、アプリケーションの堅牢なバックエンドとして機能させます。 スケーラブルなデータモデルを設計し、直感的なback4app管理アプリを通じてデータを管理し、rest/graphql呼び出しを使用してcycle jsフロントエンドをback4appと統合する方法を学びます。 最終的には、crud操作を実行できる本番環境向けのwebアプリを持ち、ユーザー認証と安全なデータ処理が可能になります。 重要な洞察 信頼性のあるバックエンドを持つ機能的なcrudシステムを構築します。 スケーラブルなデータモデルの設計に関する実践的な経験を得ます。 シームレスなデータ管理のためのドラッグアンドドロップ管理ツールを利用します。 rest/graphqlを通じてcycle jsフロントエンドをback4appと統合します。 dockerコンテナ化を含むデプロイメント戦略を学びます。 前提条件 始める前に、次のことを確認してください アクティブなプロジェクトを持つback4appアカウント。 支援が必要な場合は、 back4appの始め方 https //www back4app com/docs/get started/new parse app を確認してください。 cycle jsの開発環境。 次のようなツールを使用してください create cycle app https //github com/cyclejs community/create cycle app そしてnode js（バージョン14以降）がインストールされていることを確認してください。 javascript、cycle js、およびrest apiに関する知識。 復習のために、次を参照してください cycle jsのドキュメント https //cycle js org/ ステップ1 – プロジェクトの初期化 新しいback4appプロジェクトの作成 back4appアカウントにサインインします。 ダッシュボードの「新しいアプリ」ボタンを押します。 プロジェクト名を割り当てます basic crud app cyclejs そしてセットアップのプロンプトに従います。 新しいプロジェクトを作成 作成後、あなたのプロジェクトはダッシュボードに表示され、バックエンドの設定と管理の準備が整います。 ステップ2 – データベーススキーマの定義 データモデルの構造化 このcrudアプリケーションでは、データを管理するためにいくつかのコレクションを作成します。以下は、必須フィールドとデータ型を持つコレクションの例です。 1\ アイテムコレクション このコレクションは各アイテムの詳細を保存します。 フィールド データ型 説明 id オブジェクトid 自動生成された一意の識別子。 タイトル 文字列 アイテムのタイトル。 説明 文字列 アイテムの簡単な要約。 作成日時 日付 アイテムが追加された時刻。 更新日時 日付 最新の更新のタイムスタンプ。 2\ ユーザーコレクション このコレクションはユーザーの詳細と認証を管理します。 フィールド データ型 説明 id オブジェクトid 自動生成された一意の識別子。 ユーザー名 文字列 ユーザーのユニーク識別子。 メール 文字列 ユーザーのメールアドレス。 パスワードハッシュ 文字列 安全な認証のための暗号化されたパスワード。 作成日時 日付 アカウント作成のタイムスタンプ。 更新日時 日付 最新の更新のタイムスタンプ。 これらのコレクションは、back4appダッシュボードを介して新しいクラスを作成し、対応するフィールドを設定することで手動で定義できます。 新しいクラスを作成 フィールドを追加するには、データ型を選択し、フィールド名を提供し、オプションでデフォルト値を設定し、必要に応じてフィールドを必須としてマークします。 カラムを作成 back4app aiエージェントによるスキーマ作成の自動化 back4app aiエージェントは、提供されたプロンプトに基づいてデータモデルを自動的に生成することで、スキーマ作成を簡素化します。これにより、一貫性があり効率的なデータベース設計が保証されます。 aiエージェントを利用する手順 aiエージェントにアクセスする back4appダッシュボードにログインし、メニューまたはプロジェクト設定からaiエージェントを選択します。 データ要件を詳細に記述する 必要なコレクションとそのフィールドをリストした包括的なプロンプトを入力します。 レビューと実装 自動生成されたスキーマを確認し、それをプロジェクトに適用します。 サンプルプロンプト create these 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管理アプリは、バックエンドデータ管理のためのノーコード、ドラッグアンドドロップインターフェースを提供します。コレクションのcrud操作を簡素化します。 管理アプリの有効化 「その他」メニューを開く あなたのback4appダッシュボードで。 「管理アプリ」を選択 そしてクリックします 「管理アプリを有効にする」。 管理者資格情報を設定する 最初の管理者ユーザーを作成することで。このアクションはシステムロールも初期化します（例： b4aadminuser )。 管理アプリを有効にする 有効化後、管理アプリにサインインしてコレクションの管理を開始します。 管理アプリダッシュボード 管理アプリを通じてcrud操作を実行する 管理アプリ内で、あなたは レコードを追加する 任意のコレクション（例：アイテム）で「レコードを追加」ボタンをクリックして新しいエントリを挿入します。 レコードを表示/修正する 既存のレコードを選択して詳細を確認したり、フィールドを修正します。 レコードを削除する 削除オプションを利用して不要なエントリを破棄します。 このユーザーフレンドリーなインターフェースは、データの管理と運営を大幅に向上させます。 ステップ4 – cycle jsをback4appと統合する バックエンドがback4appを介して稼働しているので、cycle jsフロントエンドを統合する時が来ました。 オプション rest/graphql apiの利用 バックエンドと対話するためにrest api呼び出しに焦点を当てます。 以下は、cycle jsのコンポーネントの例で、cycleのhttpドライバーを使用してback4appデータベースからアイテムを取得して表示します。 例：cycle jsを使用したアイテムの取得と表示 import xs from 'xstream'; import {run} from '@cycle/run'; import {div, h1, ul, li, input, button, makedomdriver} from '@cycle/dom'; import {makehttpdriver} from '@cycle/http'; function main(sources) { // intent capture add item interactions const addclick$ = sources dom select(' add') events('click'); // model make an http request to fetch items const request$ = xs of({ url 'https //parseapi back4app com/classes/items', category 'items', method 'get', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); // intent handle http responses const items$ = sources http select('items') flatten() map(res => res body results); // view render the items list const vdom$ = items$ startwith(\[]) map(items => div(\[ h1('items'), button(' add', 'add item'), ul( items map(item => li(`${item title} — ${item description}`) ) ) ]) ); return { dom vdom$, http request$ }; } const drivers = { dom makedomdriver('#app'), http makehttpdriver() }; run(main, drivers); このサンプルコードは、cycle jsを使用してhttp getリクエストを実行し、アイテムを取得して動的にレンダリングする方法を示しています。 ステップ5 – バックエンドのセキュリティ アクセス制御リスト（acl）の適用 aclを定義してオブジェクトを保護します。たとえば、プライベートアイテムを作成する場合 async function createprivateitem(data, owneruser) { const newitem = { title data title, description data description }; // define acl restrict access to the owner only newitem 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(newitem) }); const result = await response json(); console log('created item ', result); } catch (error) { console error('error creating item ', error); } } クラスレベルの権限設定 (clp) back4appダッシュボード内で、各コレクションのclpを調整し、認証されたユーザーのみが機密情報にアクセスできるようにします。 ステップ6 – ユーザー認証の実装 アカウント登録とログインの設定 back4appは認証のためにuserクラスを利用します。rest api呼び出しを使用して、cycle jsアプリケーション内でユーザーのサインアップとログインを管理します。 以下はユーザー登録を処理する例です async function signupuser(userdata) { 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({ username userdata username, password userdata password, email userdata email }) }); const result = await response json(); alert('registration successful!'); return result; } catch (error) { alert('registration error ' + error message); } } ユーザーログインやセッション管理のために同様のパターンを再現できます。 ステップ7 – webデプロイメントを使用したcycle jsフロントエンドのデプロイ back4appのwebデプロイメント機能を使用すると、githubリポジトリとの統合を通じて、cycle jsアプリケーションを簡単にホストできます。 7 1 プロダクションビルドの準備 ターミナルでプロジェクトディレクトリを開きます。 ビルドコマンドを実行します npm run build これにより、最適化された静的ファイルを含む build ディレクトリが作成されます。 ビルドを確認します build フォルダに index html と関連するアセットディレクトリが含まれていることを確認してください。 7 2 ソースコードの整理とアップロード あなたのgitリポジトリには、cycle jsアプリケーションのソース全体が含まれているべきです。例のファイル構造 basic crud app cyclejs frontend/ ├── node modules/ ├── public/ │ └── index html ├── src/ │ ├── main js │ ├── httpdrivers js │ └── components/ │ ├── itemslist js │ └── auth js ├── package json └── readme md 例のファイル src/main js import xs from 'xstream'; import {run} from '@cycle/run'; import {div, h1, makedomdriver} from '@cycle/dom'; import {makehttpdriver} from '@cycle/http'; import itemslist from ' /components/itemslist'; function main(sources) { const itemsvtree$ = itemslist(sources); const vdom$ = itemsvtree$ map(tree => div(\[ h1('cycle js crud application'), tree ]) ); return { dom vdom$ }; } const drivers = { dom makedomdriver('#app'), http makehttpdriver() }; run(main, drivers); githubにコミットする gitリポジトリを初期化する （まだ行っていない場合） git init ファイルをステージする git add 作業をコミットする git commit m "cycle jsフロントエンドの初期コミット" githubリポジトリを作成する （例 basic crud app cyclejs frontend )。 リポジトリをプッシュする git remote add origin https //github com/your username/basic crud app cyclejs frontend git git push u origin main 7 3 リポジトリをウェブデプロイメントにリンクする ウェブデプロイメントにアクセスする： back4appにサインインし、プロジェクト（ basic crud app cyclejs ）に移動し、 ウェブデプロイメント 機能を選択します。 githubに接続する： プロンプトに従ってgithubアカウントをリンクし、back4appがリポジトリにアクセスできるようにします。 リポジトリとブランチを選択する： リポジトリ（例： basic crud app cyclejs frontend ）とブランチ（通常は main ）を選択します。 7 4 デプロイメント設定 ビルドコマンド リポジトリに事前ビルドされた build フォルダがない場合は、ビルドコマンドを指定してください（例 npm run build )。 出力ディレクトリ これを build に設定して、back4appが静的ファイルを見つけられるようにします。 環境変数 必要なapiキーや設定詳細を含めてください。 7 5 cycle jsアプリケーションのdocker化 dockerデプロイメントを選択する場合は、リポジトリに dockerfile を追加してください \# use an official node image for building the app from node 16 alpine as build \# set working directory workdir /app \# copy dependency definitions copy package json / \# install dependencies run npm install \# copy the remaining files copy \# build the cycle js application run npm run build \# use nginx to serve the built files from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] アプリをコンテナ化する場合は、webデプロイメント設定でdockerデプロイメントオプションを選択してください。 7 6 アプリケーションの起動 アプリをデプロイする 設定を構成した後、「 デプロイ 」ボタンをクリックします。 デプロイメントを監視する back4appはgithubからコードを取得し、アプリをビルド（構成されている場合）し、デプロイします。 アプリケーションにアクセスする デプロイが完了すると、back4appはライブのcycle jsアプリケーションのurlを提供します。 7 7 デプロイメントのテスト デプロイされたurlにアクセスする 提供されたurlをブラウザで開きます。 機能を確認する すべてのルートとアセットが正しく読み込まれることを確認します。 必要に応じてデバッグする ブラウザの開発者ツールを使用し、back4appのデプロイメントログを確認して問題をトラブルシュートします。 ステップ8 – まとめと今後の改善 おめでとうございます！ cycle jsとback4appを使用してcrudアプリケーションを成功裏に構築しました。 「 basic crud app cyclejs 」というプロジェクトを設定し、アイテムとユーザーのデータベーススキーマを定義し、直感的な管理アプリを通じてデータを管理しました。 さらに、rest/graphqlを使用してcycle jsフロントエンドをバックエンドと統合し、適切なアクセス制御でデータを保護しました。 次のステップ フロントエンドを拡張する より高度なビュー、フィルタリング、またはリアルタイム更新を追加します。 追加のバックエンド機能を統合する クラウドファンクション、サードパーティapi、またはロールベースのアクセス制御を追加することを検討してください。 さらなる学習 パフォーマンスチューニングやカスタム統合に関する追加の洞察を得るために、 back4appのドキュメント https //www back4app com/docs を探索してください。 このガイドを使って、back4appを使用してcycle jsアプリケーションのスケーラブルなcrudバックエンドを構築するスキルを身につけました。コーディングを楽しんでください！