How to Create a CRUD Application with Elm?

概要 このウォークスルーでは、elmを使用して完全なcrud（作成、読み取り、更新、削除）アプリケーションを構築する方法を学びます。 データを簡単に管理するために、バックエンドサービスとしてback4appを使用します。このガイドでは、back4appプロジェクトの設定方法、柔軟なデータスキーマの設計方法、およびrest api呼び出しを使用してelmアプリケーションにcrud操作を統合する方法を説明します。 最初に、ここで「 basic crud app elm 」と名付けられたback4appプロジェクトを設定します。これは、堅牢な非関係データベースを提供します。データモデルを手動で設計するか、back4appのインテリジェントaiエージェントを使用して設計します。 次に、データ操作のための直感的なドラッグアンドドロップインターフェースを提供するback4app管理アプリでバックエンドを管理します。 最後に、restful apiリクエストを行いながら、elmアプリをback4appに接続し、安全なデータ操作を確保します。 このチュートリアルの終わりまでに、コアcrud機能と安全なユーザー認証をサポートする生産準備が整ったelmアプリケーションを持つことになります。 重要な洞察 非関係型バックエンドと組み合わせたelm crudアプリケーションの構築方法を学びます。 スケーラブルなバックエンドの構造とelmフロントエンドとの接続方法を理解します。 シームレスな作成、読み取り、更新、削除アクションのためにback4app管理アプリを使用します。 dockerを含むデプロイメントオプションを探求し、elmアプリケーションを簡単に起動します。 前提条件 始める前に、次のことを確認してください プロジェクトが設定されたback4appアカウント。 助けが必要ですか？ back4appの始め方 https //www back4app com/docs/get started/new parse app を訪問してください。 elm開発環境。 elmをインストールし、お気に入りのエディタを使用します。 elmの基本、関数型プログラミング、httpリクエストに精通していること。 必要に応じて、 elmガイド https //guide elm lang org/ を確認してください。 ステップ 1 – プロジェクトの初期化 新しい back4app プロジェクトの作成 back4app アカウントにログインします。 ダッシュボードから「新しいアプリ」ボタンをクリックします。 プロジェクトに名前を付けます： basic crud app elm と入力し、セットアップを完了するための指示に従います。 新しいプロジェクトを作成 プロジェクトが準備完了すると、ダッシュボードに表示され、バックエンドの設定の準備が整います。 ステップ 2 – データスキーマの作成 データ構造の設定 このcrudアプリケーションでは、back4appにいくつかのコレクション（またはクラス）を作成します。以下は、crud操作をサポートするための主要なコレクションとそのフィールドの例です。 1\ アイテムコレクション このコレクションは各エントリの詳細を保存します。 フィールド タイプ 詳細 id オブジェクトid 自動生成された一意の識別子。 タイトル 文字列 アイテムの名前。 説明 文字列 アイテムの簡単な説明。 作成日時 日付 作成を示すタイムスタンプ。 更新日時 日付 最終更新のタイムスタンプ。 2\ ユーザーコレクション このコレクションはユーザー認証と資格情報を管理します。 フィールド タイプ 詳細 id オブジェクトid 自動生成された一意の識別子。 ユーザー名 文字列 ユーザーのためのユニークなユーザー名。 メール 文字列 ユニークなメールアドレス。 パスワードハッシュ 文字列 セキュリティのための暗号化されたパスワード。 作成日時 日付 アカウントが作成された時刻。 更新日時 日付 最後のアカウント更新のタイムスタンプ。 これらのコレクションとフィールドをback4appダッシュボードを介して手動で追加できます。 新しいクラスを作成 適切なタイプを選択し、フィールドに名前を付け、必須かどうかを指定することでフィールドを追加できます。 列を作成 back4app aiエージェントを使用したスキーマ設定 back4app aiエージェントは、あなたの説明に基づいてデータスキーマの作成を簡素化します。この自動化されたプロセスにより、スキーマがすべての必要なcrudアクションに設定されます。 aiエージェントを使用するには aiエージェントにアクセスする back4appダッシュボードにサインインし、プロジェクト設定でaiエージェントを見つけます。 データスキーマの詳細を記述する 必要なコレクションとフィールドを説明します。 確認と承認 提案されたスキーマを確認し、承認してバックエンドを設定します。 例のプロンプト create the following collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated) \ title string \ description string \ createdat date (auto generated) \ updatedat date (auto updated) 2\) collection users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ passwordhash string \ createdat date (auto generated) \ updatedat date (auto updated) このスマートなアプローチは時間を節約し、堅牢で一貫したデータスキーマを保証します。 ステップ 3 – 管理インターフェースの有効化とcrud操作の処理 管理インターフェースの紹介 back4appの管理アプリは、バックエンドデータを管理するためのノーコードインターフェースを提供します。ユーザーフレンドリーなデザインにより、レコードの追加、表示、編集、削除などのcrudアクションを実行できます。 管理アプリの有効化 「その他」メニューに移動 あなたのback4appダッシュボードで。 「管理アプリ」を選択 をクリックします 「管理アプリを有効にする」。 管理アカウントを作成します、 これにより b4aadminuser やシステムコレクションの役割も設定されます。 管理アプリを有効にする 有効化されたら、管理アプリにログインしてデータを管理します。 管理アプリダッシュボード 管理アプリでのcrudアクションの実行 管理アプリ内で、次のことができます レコードの挿入 コレクション（例：アイテム）で「レコードを追加」を選択して新しいエントリを作成します。 レコードの検査/編集 任意のレコードをクリックして詳細を表示したり、データを修正します。 レコードの削除 もはや必要のないエントリを削除します。 この使いやすいインターフェースはデータ管理を効率化します。 ステップ4 – elmアプリケーションをback4appに接続する バックエンドが設定されたので、elmアプリケーションをback4appにリンクする時が来ました。 elmでのrest apiコールの使用 elmは専用のparse sdkをサポートしていないため、back4appのrestエンドポイントと対話するために、組み込みのhttp機能を使用します。 例：アイテムコレクションからデータを取得する 以下は、アイテムのリストを取得するために http パッケージを使用したelmモジュールの例です module items exposing (item, fetchitems, itemdecoder) import http import json decode as decode exposing (decoder) type alias item = { id string , title string , description string } itemdecoder decoder item itemdecoder = decode map3 item (decode field "objectid" decode string) (decode field "title" decode string) (decode field "description" decode string) fetchitems cmd msg fetchitems = http get { url = "https //parseapi back4app com/classes/items" , expect = http expectjson handleresponse (decode field "results" (decode list itemdecoder)) } handleresponse result http error (list item) > msg handleresponse result = \ map the http result to your application's message type debug todo "handle the response appropriately" 例：新しいアイテムを作成する 新しいレコードを追加するために、elmでpostリクエストを実装することもできます createitem string > string > cmd msg createitem title description = let body = http jsonbody <| encode object \[ ( "title", encode string title ) , ( "description", encode string description ) ] in http post { url = "https //parseapi back4app com/classes/items" , body = body , expect = http expectjson handlepostresponse decode value } handlepostresponse result http error decode value > msg handlepostresponse result = debug todo "process the post response" 更新および削除操作のために、putおよびdeleteメソッドを使用して同様のパターンを繰り返します。 ステップ5 – バックエンドの保護 アクセス制御の設定 (acl) オブジェクトにaclを設定することでデータを保護します。たとえば、アイテムを作成者に制限するには、次のようにします \ in elm, you can add acl details to your json payload createprivateitem string > string > string > cmd msg createprivateitem title description ownerid = let acl = encode object \[ ( ownerid, encode object \[ ("read", encode bool true), ("write", encode bool true) ] ) , ( " ", encode object \[ ("read", encode bool false), ("write", encode bool false) ] ) ] body = http jsonbody <| encode object \[ ( "title", encode string title ) , ( "description", encode string description ) , ( "acl", acl ) ] in http post { url = "https //parseapi back4app com/classes/items" , body = body , expect = http expectjson handlepostresponse decode value } クラスレベルの権限設定 (clp) 特定のコレクションにアクセスできるのは認証されたユーザーのみとなるように、back4appダッシュボードでclpを定義します。 ステップ6 – ユーザー認証の実装 ユーザーアカウントの管理 back4appは、認証を処理するために組み込みのユーザーコレクションを活用します。elmアプリでは、rest api呼び出しを介してサインアップとログインを管理します。 例：ユーザーサインアップリクエスト signupuser string > string > string > cmd msg signupuser username password email = let body = http jsonbody <| encode object \[ ( "username", encode string username ) , ( "password", encode string password ) , ( "email", encode string email ) ] in http post { url = "https //parseapi back4app com/users" , body = body , expect = http expectjson handleauthresponse decode value } handleauthresponse result http error decode value > msg handleauthresponse result = debug todo "process the authentication response" ログインとセッション管理についても同様のアプローチを取ってください。 ステップ7 – elmアプリケーションのデプロイ back4appはシームレスなデプロイをサポートしています。dockerを含むさまざまな方法でelmアプリケーションをデプロイできます。 7 1 elmアプリケーションのビルド elmコードをコンパイルする： elmコンパイラを実行してjavascriptを生成します elm make src/main elm output=dist/main js アセットを準備する： 生成されたjavascriptとhtmlファイルがデプロイの準備ができていることを確認してください。 7 2 プロジェクト構造の整理 典型的なelmプロジェクトのレイアウトは次のようになります basic crud app elm/ \| src/ \| | main elm \| | api elm \| dist/ \| | index html \| | main js \| elm json \| package json \| dockerfile 7 3 elmアプリケーションのdocker化 コンテナ化する場合は、 dockerfile を追加してください。 \# use a lightweight node image for serving static files from node 16 alpine \# set the working directory workdir /app \# copy compiled files copy dist/ /app/dist/ \# expose the desired port expose 8080 \# serve the static files using a simple server cmd \["npx", "http server", "dist", " p", "8080"] 7 4 back4appのwebデプロイメントを使用したデプロイ リポジトリをリンクする： githubにelmプロジェクトをホストします。 デプロイ設定を構成する： back4appのダッシュボードで、 web deployment 機能を選択し、リポジトリ（例： basic crud app elm ）を接続し、希望のブランチを選択します。 ビルドコマンドを設定する： ビルドコマンド（例： elm make src/main elm output=dist/main js )とアーティファクトの場所を指定します。 アプリをデプロイする： 「 デプロイ 」を押して、アプリがライブになるまでログを監視します。 ステップ8 – 最終的な考えと今後の方向性 おめでとうございます！あなたは、back4appと統合されたelmベースのcrudアプリケーションを構築しました。 「 basic crud app elm 」という名前のプロジェクトを設定し、アイテムとユーザーのためのコレクションを設計し、back4app管理アプリを通じてデータを管理しました。 さらに、rest apiコールを使用してelmアプリケーションを接続し、セキュリティ対策を実装しました。 今後の拡張： 機能の拡張： 高度な検索機能、詳細ビュー、またはリアルタイム更新を統合します。 バックエンド機能の強化： クラウド機能、サードパーティの統合、または役割ベースのアクセスを試してみてください。 知識を深める： 「 back4appのドキュメント https //www back4app com/docs 」や他のリソースを訪れて、アプリを洗練させてください。 コーディングを楽しんで、elmとback4appでの構築を楽しんでください！