How to Build a Backend for Elm?

はじめに このチュートリアルでは、back4appを使用してelmアプリケーションの完全なバックエンドを構築する方法を学びます。 データベース管理、cloud code functions、restおよびgraphql api、ユーザー認証、リアルタイムクエリ（ライブクエリ）など、back4appの重要な機能を統合する方法を説明し、elmフロントエンドとシームレスに通信する安全でスケーラブル、かつ堅牢なバックエンドを作成します。 また、back4appの迅速なセットアップと直感的な環境が、サーバーやデータベースを手動で構成するのに比べて、時間と労力を大幅に削減できることを確認します。 その過程で、高度なセキュリティ機能、cloud jobsを使用したタスクのスケジューリング、外部統合のためのwebhookの設定など、主要な機能に関する実践的な経験を得ることができます。 このチュートリアルの終わりまでに、あなたはこの基礎的なセットアップを本番環境に適したアプリケーションに拡張する準備が整い、必要に応じてカスタムロジックやサードパーティのapiを簡単に組み込むことができるようになります。 前提条件 このチュートリアルを完了するには、次のものが必要です back4appアカウントと新しいback4appプロジェクト back4appの始め方。 https //www back4app com/docs/get started/new parse app アカウントを持っていない場合は、無料で作成できます。上記のガイドに従ってプロジェクトを準備してください。 基本的なelm開発環境 この環境は、 elmをインストールすることで https //guide elm lang org/install/ 設定できます。あなたのマシンにelm（0 19以上）がインストールされていることを確認してください。 elmに対する親しみ elm公式ドキュメント。 https //guide elm lang org/ elmが初めての場合は、公式ドキュメントや初心者向けのチュートリアルを確認してから始めてください。 httpリクエストライブラリまたはgraphqlアプローチ for elm elmからrestおよびgraphql呼び出しを使用します。公式のparse elm sdkはないため、 elm/http https //package elm lang org/packages/elm/http/latest/ と、必要に応じてgraphqlライブラリを設定してください。 始める前に、これらの前提条件がすべて整っていることを確認してください。back4appプロジェクトが設定され、ローカルのelm環境が準備されていると、より簡単に進めることができます。 ステップ1 – back4appプロジェクトの設定 新しいプロジェクトを作成する back4appでelmバックエンドを構築する最初のステップは、新しいプロジェクトを作成することです。まだ作成していない場合は、次の手順に従ってください back4appアカウントにログインする 「新しいアプリ」ボタンをクリックする back4appダッシュボードで。 アプリに名前を付ける （例：「elm backend tutorial」）。 プロジェクトが作成されると、back4appダッシュボードにリスト表示されます。このプロジェクトは、このチュートリアルで説明するすべてのバックエンド設定の基盤となります。 elmからback4appに接続する back4appは、データを管理し、リアルタイム機能を提供し、ユーザー認証を処理するためにparseプラットフォームに依存しています。公式のelm parse sdkはないため、 rest または graphql 呼び出しをelmアプリケーションから使用して、back4appバックエンドと通信します。 parseキーを取得する back4appダッシュボードで、アプリの「アプリ設定」または「セキュリティとキー」セクションに移動して、 アプリケーションid , rest apiキー , および graphqlエンドポイント を見つけます。 parseサーバーurl （通常は https //parseapi back4app com ）も見つかります。 elmから、これらの認証情報を設定ファイルまたはモジュールに保存できます。例えば src/config elm module config exposing (applicationid, restapikey, serverurl, graphqlendpoint) applicationid string applicationid = "your application id" restapikey string restapikey = "your rest api key" serverurl string serverurl = "https //parseapi back4app com" graphqlendpoint string graphqlendpoint = "https //parseapi back4app com/graphql" httpリクエストをelmからback4appに送信する際に、これらの値を使用します。このステップを完了することで、elmフロントエンドとback4appバックエンドを安全に接続する方法を確立しました。 ステップ2 – データベースの設定 データの保存とクエリ back4appプロジェクトが設定されたので、elmを介してデータを保存および取得することができます。 rest または graphql を使用します。簡単な例として、 todo アイテムを作成して取得する方法を示します。 elmからrestを使用する restリクエストを行うために、 elm/http https //package elm lang org/packages/elm/http/latest/ を使用します。以下は、 todo アイテムを作成するための簡略化された例です。 src/todoapi elm module todoapi exposing (createtodo, fetchtodos) import config exposing (applicationid, restapikey, serverurl) import http import json decode as decode import json encode as encode \ a simplified representation of a todo type alias todo = { objectid string , title string , iscompleted bool } \ encoder for creating a todo createtodoencoder string > bool > encode value createtodoencoder title iscompleted = encode object \[ ( "title", encode string title ) , ( "iscompleted", encode bool iscompleted ) ] \ decoder for todo tododecoder decode decoder todo tododecoder = decode map3 todo (decode field "objectid" decode string) (decode field "title" decode string) (decode field "iscompleted" decode bool) createtodo string > bool > http request todo createtodo title iscompleted = http request { method = "post" , headers = \[ http header "x parse application id" applicationid , http header "x parse rest api key" restapikey , http header "content type" "application/json" ] , url = serverurl ++ "/classes/todo" , body = http jsonbody (createtodoencoder title iscompleted) , expect = http expectjson tododecoder , timeout = nothing , tracker = nothing } fetchtodos http request (list todo) fetchtodos = http request { method = "get" , headers = \[ http header "x parse application id" applicationid , http header "x parse rest api key" restapikey ] , url = serverurl ++ "/classes/todo" , body = http emptybody , expect = http expectjson (decode field "results" (decode list tododecoder)) , timeout = nothing , tracker = nothing } その後、elmの更新関数内で createtodo または fetchtodos を呼び出し、 http のレスポンスを処理し、アプリケーションのモデルにデータを統合することができます。 restを直接使用する（curlの例） テストを行いたい場合やelmの外で迅速に呼び出しを行いたい場合は、curlを使用できます。 curl x post \\ h "x parse application id your application id" \\ h "x parse rest api key your rest api key" \\ h "content type application/json" \\ d '{"title" "buy groceries", "iscompleted" false}' \\ https //parseapi back4app com/classes/todo graphqlの使用 back4appはgraphqlインターフェースも提供しています。以下はtodoを作成するためのgraphqlミューテーションのサンプルです。 mutation { createtodo(input { fields { title "clean the house" iscompleted false } }) { todo { objectid title iscompleted } } } elmでは、graphqlライブラリを使用するか、これらのミューテーションやクエリを送信するためにhttpリクエストを手動で作成できます。これは、上記で使用した elm/http と非常に似ています。 スキーマ設計とデータ型 デフォルトでは、parseは スキーマを動的に作成する ことを許可していますが、より多くの制御のためにback4appダッシュボードでクラスやデータ型を定義することもできます。 「データベース」セクションに移動する あなたのback4appダッシュボードで。 新しいクラスを作成する （例：「todo」）およびタイトル（string）やiscompleted（boolean）などの関連するカラムを追加します。 back4appはさまざまなデータ型もサポートしています string , number , boolean , object , date , file , pointer , array , relation , geopoint , そして polygon 各フィールドに適切な型を選択するか、restまたはgraphqlアプローチを使用してelmアプリからオブジェクトを最初に保存する際にparseが自動的にこれらのカラムを作成することを許可できます。 back4appはデータモデルを設計するのに役立つaiエージェントを提供しています aiエージェントを開く アプリダッシュボードまたはメニューから。 データモデルを説明する 簡単な言葉で（例：「新しいtodoアプリをback4appで完全なクラススキーマで作成してください。」）。 aiエージェントにスキーマを作成させる aiエージェントを使用することで、データアーキテクチャの設定にかかる時間を節約し、アプリケーション全体での一貫性を確保できます。 リレーショナルデータ リレーショナルデータがある場合、例えば、複数の カテゴリ オブジェクトが複数の todo アイテムを指している場合、parseで ポインタ または リレーション を使用できます。elmからは、restまたはgraphql呼び出しにポインタまたはリレーションフィールドを含めることで、これらの関係を管理できます。 例えば、restを介してポインタを追加するには { "title" "task with category", "category" { " type" "pointer", "classname" "category", "objectid" "your category object id" } } クエリを実行する際には、パラメータを使用してポインタデータを含めることもできます ?include=category restで、または include graphqlクエリで使用します。 ライブクエリ リアルタイムの更新のために、back4appは ライブクエリ を提供します。parse live queriesのためのネイティブelmパッケージはありませんが、back4appダッシュボードで有効にすることができます ライブクエリを有効にする あなたのアプリの サーバー設定 の下で。 ライブクエリのためのwebsocketエンドポイントを使用する 専用クライアントで。 elmとライブクエリを統合したい場合は、 elm websocket （または他のカスタムアプローチ）を利用して変更を購読することができます。ただし、現在公式のelm live queryクライアントは存在しないため、より高度な設定が必要です。 ステップ3 – aclとclpによるセキュリティの適用 back4appのセキュリティメカニズム back4appは、 アクセス制御リスト (acl) と クラスレベルの権限 (clp) を提供することで、セキュリティを真剣に考えています。これらの機能により、オブジェクトまたはクラスごとにデータの読み取りや書き込みを制限でき、認可されたユーザーのみがデータを変更できるようになります。 アクセス制御リスト (acl) aclは、個々のオブジェクトに適用され、どのユーザー、役割、または一般の人々が読み取り/書き込み操作を行えるかを決定します。restまたはgraphqlを介してオブジェクトを作成または更新する際に、jsonに acl プロパティを含めることで、aclを構成できます。 たとえば、プライベートなtodoを作成するには、次のように設定できます { "title" "private task", "acl" { "user object id" { "read" true, "write" true } } } これにより、そのユーザー以外の誰もオブジェクトを読み取ったり変更したりできなくなります。 クラスレベルの権限 (clp) clps は、クラス全体のデフォルトの権限を管理します。たとえば、クラスが公開されているか、書き込み可能か、または特定の役割のみがアクセスできるかどうかです。 back4app ダッシュボードに移動 , アプリを選択し、 データベース セクションを開きます。 クラスを選択 （例：「todo」）。 クラスレベルの権限 タブを開きます。 デフォルトを設定します。たとえば、読み取りまたは書き込みのための「認証が必要」や、一般公開のための「アクセス不可」などです。 これらの権限は基本ラインを設定し、aclは個々のオブジェクトの権限を微調整します。堅牢なセキュリティモデルは通常、clp（広範な制限）とacl（オブジェクトごとの細かい制限）を組み合わせます。詳細については、 アプリセキュリティガイドライン。 ステップ 4 – クラウド関数の作成とデプロイ クラウドコードは、parse server 環境の機能で、サーバー側でカスタム javascript コードを実行できるようにします。サーバーやインフラストラクチャを管理する必要はありません。クラウドコードを書くことで、back4app バックエンドを追加のビジネスロジック、バリデーション、トリガー、および安全かつ効率的に parse server 上で実行される統合で拡張できます。 動作の仕組み クラウドコードを書くとき、通常は javascript 関数、トリガー、および必要な npm モジュールを main js （または app js ）ファイルに配置します。このファイルは back4app プロジェクトにデプロイされ、parse server 環境内で実行されます。 back4app アプリのすべてのクラウドコードは、back4app によって管理される parse server 内で実行されるため、サーバーのメンテナンス、スケーリング、またはプロビジョニングを心配する必要はありません。 main js ファイルを更新してデプロイするたびに、実行中の parse server は最新のコードで更新されます。 // main js // import an npm module (e g , axios) const axios = require('axios'); parse cloud define('fetchexternaldata', async (request) => { const url = request params url; if (!url) { throw new error('url parameter is required'); } const response = await axios get(url); return response data; }); これらのcloud code関数は、elmからrestリクエストを行うことで呼び出すことができます https //parseapi back4app com/functions/fetchexternaldata 典型的な使用例 ビジネスロジック データの集約、支払い処理など。 データ検証 保存前に特定のフィールドが基準を満たしていることを確認します。 トリガー 保存/更新/削除アクションの前後にコードを実行します。 統合 外部apiやサービスとの接続。 セキュリティ強化 重要な操作を実行する前に、役割やユーザー権限を確認します。 関数をデプロイする デプロイは、 back4app cli cliをインストールする （linux/macosの例）： curl https //raw\ githubusercontent com/back4app/parse cli/back4app/installer sh | sudo /bin/bash アカウントキーを設定する b4a configure accountkey クラウドコードをデプロイする b4a deploy ダッシュボードからデプロイする アプリのダッシュボードで、 cloud code > functions に移動します。 関数を main js エディタにコピー/ペーストします。 「 デプロイ 」をクリックします。 関数を呼び出す elmから、postリクエストを作成することでcloud functionを呼び出すことができます。 import config exposing (applicationid, restapikey, serverurl) import http import json decode as decode import json encode as encode cloudfunction string > encode value > http request decode value cloudfunction functionname body = http request { method = "post" , headers = \[ http header "x parse application id" applicationid , http header "x parse rest api key" restapikey , http header "content type" "application/json" ] , url = serverurl ++ "/functions/" ++ functionname , body = http jsonbody body , expect = http expectjson decode value , timeout = nothing , tracker = nothing } calculatetextlength string > http request decode value calculatetextlength text = let requestbody = encode object \[ ( "text", encode string text ) ] in cloudfunction "calculatetextlength" requestbody cloud functionsをgraphql経由で呼び出すこともできます mutation { calculatetextlength(input { text "hello graphql" }) { result } } ステップ5 – ユーザー認証の設定 back4appにおけるユーザー認証 back4appは、 parse user クラスを認証の基盤として活用しています。デフォルトでは、parseはパスワードのハッシュ化、セッショントークン、および安全なストレージを処理します。elmアプリからrestまたはgraphqlを介してユーザーを作成およびログインできます。 ユーザー認証の設定 新しいユーザーのサインアップ (rest) signupuser string > string > string > http request decode value signupuser username password email = http request { method = "post" , headers = \[ http header "x parse application id" applicationid , http header "x parse rest api key" restapikey , http header "content type" "application/json" ] , url = serverurl ++ "/users" , body = http jsonbody (encode object \[ ( "username", encode string username ) , ( "password", encode string password ) , ( "email", encode string email ) ] ) , expect = http expectjson decode value , timeout = nothing , tracker = nothing } ログイン (rest) loginuser string > string > http request decode value loginuser username password = http request { method = "get" , headers = \[ http header "x parse application id" applicationid , http header "x parse rest api key" restapikey ] , url = serverurl ++ "/login?username=" ++ username ++ "\&password=" ++ password , body = http emptybody , expect = http expectjson decode value , timeout = nothing , tracker = nothing } ソーシャルログイン統合 back4appとparseは、 google , facebook , または apple のような人気のoauthプロバイダーと統合できます。通常、これらのプロバイダーはback4appダッシュボードで設定し、その後elmから必要なリクエストを行います。詳細な設定手順については、 ソーシャルログインドキュメント https //www back4app com/docs/platform/sign in with apple を参照してください。 メール確認とパスワードリセット メール設定 に移動します。 メール確認を有効にする ことで、新しいユーザーが自分のメールアドレスの所有権を確認できるようにします。 送信元アドレスを設定する , メールテンプレート、および必要に応じてカスタムドメインを設定します。 ステップ6 – ファイルストレージの取り扱い ファイルのアップロードと取得 parseには、ファイルのアップロードを処理するための parse file クラスが含まれており、back4appが安全に保存します。elmからrestを使用しているため、マルチパートファイルアップロードを行うか、base64エンコードされたファイルを添付できます。 rest経由のファイルアップロード uploadfile string > string > http request decode value uploadfile filename base64content = http request { method = "post" , headers = \[ http header "x parse application id" applicationid , http header "x parse rest api key" restapikey , http header "content type" "text/plain" ] , url = serverurl ++ "/files/" ++ filename , body = http stringbody "text/plain" base64content , expect = http expectjson decode value , timeout = nothing , tracker = nothing } アップロードが完了すると、レスポンスにファイルurlが返されます。そのurlをparseクラスのフィールドに保存するか、必要に応じてelmアプリケーションに表示できます。 ファイルセキュリティ parse serverはファイルアップロードのセキュリティを管理するための設定を提供します。例えば { "fileupload" { "enableforpublic" true, "enableforanonymoususer" true, "enableforauthenticateduser" true } } ステップ7 – クラウドジョブによるタスクのスケジューリング クラウドジョブ クラウドジョブ はback4appで、古いデータのクリーンアップや定期的なメールの送信など、バックエンドでルーチンタスクをスケジュールして実行することができます。例えば、30日以上前のtodoを削除するジョブは次のようになります // main js parse cloud job('cleanupoldtodos', async (request) => { const todo = parse object extend('todo'); const query = new parse query(todo); const now = new date(); const thirty days = 30 24 60 60 1000; const cutoff = new date(now thirty days); query lessthan('createdat', cutoff); try { const oldtodos = await query find({ usemasterkey true }); await parse object destroyall(oldtodos, { usemasterkey true }); return `deleted ${oldtodos length} old todos `; } catch (err) { throw new error('error during cleanup ' + err message); } }); クラウドコードをデプロイする 新しいジョブと共に（cliまたはダッシュボード経由で）。 back4appダッシュボードに移動する > アプリ設定 > サーバー設定 > バックグラウンドジョブ ジョブをスケジュールする 毎日または希望通りに実行する。 ステップ8 – ウェブフックの統合 ウェブフック は、特定のイベントが発生するたびに、back4appアプリが外部サービスにhttpリクエストを送信できるようにします。これは、決済ゲートウェイ（例：stripe）、メールマーケティングツール、または分析プラットフォームなどのサードパーティシステムとの統合に強力です。 ウェブフックの設定に移動 をback4appダッシュボードで > もっと > ウェブフック をクリックし、次に ウェブフックを追加 をクリックします。 エンドポイントを設定 （例： https //your external service com/webhook endpoint https //your external service com/webhook endpoint ）。 トリガーを設定 して、back4appのクラスやクラウドコード関数内のどのイベントがウェブフックを発火させるかを指定します。 例えば、新しいtodoが作成されるたびにslackチャンネルに通知したい場合： 受信ウェブフックを受け入れるslackアプリを作成します。 slackのウェブフックurlをコピーします。 back4appダッシュボードで、「todoクラスの新しいレコード」というイベントのためにそのslack urlにエンドポイントを設定します。 必要に応じてカスタムhttpヘッダーやペイロードを追加します。 ステップ9 – back4app管理パネルの探索 the back4app admin app は、非技術的なユーザーがcrud操作を実行し、コードを書くことなく日常的なデータタスクを処理するために設計されたウェブベースの管理インターフェースです。それは、データベース管理、カスタムデータ管理、およびエンタープライズレベルの操作を効率化する model centric , user friendly インターフェースを提供します。 admin appの有効化 有効化 するには、 app dashboard > more > admin app に移動し、「admin appを有効化」ボタンをクリックします。 最初の管理ユーザーを作成 （ユーザー名/パスワード）すると、新しい役割（b4aadminuser）とクラス（b4asetting、b4amenuitem、b4acustomfield）がアプリのスキーマに自動的に生成されます。 管理インターフェースにアクセスするためのサブドメインを選択 し、セットアップを完了します。 管理者資格情報を使用して ログインし、新しいadmin appダッシュボードにアクセスします。 有効にすると、back4app管理アプリを使用すると、parse dashboardやバックエンドコードを直接使用することなく、データベースのレコードを簡単に表示、編集、または削除できます。設定可能なアクセス制御を使用すると、データを管理するための明確でポイントアンドクリックの方法が必要なチームメンバーやクライアントとこのインターフェースを安全に共有できます。 結論 この包括的なチュートリアルに従うことで、あなたは 安全なバックエンドを作成しました back4app上のelmアプリ用。 データベースを構成しました クラススキーマ、データ型、関係を使用して。 リアルタイムクエリを統合しました （ライブクエリ）即時データ更新の可能性。 セキュリティ対策を適用しました aclとclpを使用してデータアクセスを保護および管理。 cloud codeを実装しました サーバー側でカスタムビジネスロジックを実行するための関数。 ユーザー認証を設定しました メール確認とパスワードリセットをサポート。 ファイルのアップロードを管理しました および取得、オプションのファイルセキュリティ制御付き。 cloud jobsをスケジュールしました 自動化されたバックグラウンドタスクのために。 webhookを使用しました 外部サービスと統合するために。 back4app管理パネルを探索しました データ管理のために。 堅牢な elm フロントエンドと強力な back4app バックエンドを備え、機能豊富でスケーラブルかつ安全なアプリケーションを開発する準備が整いました。さらに高度な機能を探求し、ビジネスロジックを統合し、back4app の力を活用してサーバーとデータベースの管理にかかる無数の時間を節約してください。コーディングを楽しんでください！ 次のステップ 本番環境向けの elm アプリを構築する このバックエンドを拡張して、より複雑なデータモデル、キャッシング戦略、パフォーマンス最適化を処理します。 高度な機能を統合する 専門的な認証フロー、役割ベースのアクセス制御、または外部 api（支払いゲートウェイなど）など。 back4app の公式ドキュメントをチェックする 高度なセキュリティ、パフォーマンス調整、ログ分析についての詳細を知るために。 他のチュートリアルを探る リアルタイムチャットアプリケーション、iot ダッシュボード、または位置情報サービスに関する。ここで学んだ技術をサードパーティの api と組み合わせて、複雑な実世界のアプリケーションを作成できます。