Quickstarters
Elmのバックエンドを構築する方法は？

41min
はじめに
このチュートリアルでは、Back4Appを使用してElmアプリケーションの完全なバックエンドを構築する方法を学びます。
データベース管理、Cloud Code Functions、RESTおよびGraphQL API、ユーザー認証、リアルタイムクエリ（ライブクエリ）など、Back4Appの重要な機能を統合する方法を説明し、Elmフロントエンドとシームレスに通信する安全でスケーラブル、かつ堅牢なバックエンドを作成します。
また、Back4Appの迅速なセットアップと直感的な環境が、サーバーやデータベースを手動で構成するのに比べて、時間と労力を大幅に削減できることを確認します。
その過程で、高度なセキュリティ機能、Cloud Jobsを使用したタスクのスケジューリング、外部統合のためのWebhookの設定など、主要な機能を実践的に体験します。
このチュートリアルの終わりまでに、あなたはこの基礎的なセットアップを本番環境に適したアプリケーションに拡張する準備が整い、必要に応じてカスタムロジックやサードパーティのAPIを簡単に組み込むことができるようになります。
前提条件
このチュートリアルを完了するには、次のものが必要です:
Back4Appアカウントと新しいBack4appプロジェクト
 Back4appの始め方。
アカウントを持っていない場合は、無料で作成できます。上記のガイドに従ってプロジェクトを準備してください。
基本的なElm開発環境
 この環境は、Elmをインストールすることで設定できます。あなたのマシンにElm（0.19以上）がインストールされていることを確認してください。
Elmに対する理解
 Elm公式ドキュメント。
Elmが初めての場合は、公式ドキュメントや初心者向けのチュートリアルを確認してから始めてください。
HTTPリクエストライブラリまたはGraphQLアプローチ for Elm
 ElmからRESTおよびGraphQL呼び出しを使用します。公式のParse Elm SDKはないため、elm/httpと、必要に応じて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"
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を使用します。以下は、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
        }
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
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
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ミューテーションのサンプルです。
GraphQL
mutation {
  createTodo(input: {
    fields: {
      title: "Clean the house"
      isCompleted: false
    }
  }) {
    todo {
      objectId
      title
      isCompleted
    }
  }
}
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エージェントを使用することで、データアーキテクチャの設定にかかる時間を節約し、アプリケーション全体での一貫性を確保できます。
リレーショナルデータ
リレーショナルデータがある場合、例えば、Categoryオブジェクトが複数のTodoアイテムを指している場合、PointersまたはRelationsをParseで使用できます。Elmからは、RESTまたはGraphQL呼び出しにポインタまたはリレーションフィールドを含めることで、これらの関係を管理できます。
例えば、RESTを介してポインタを追加するには:
JSON
{
  "title": "Task with Category",
  "category": {
    "__type": "Pointer",
    "className": "Category",
    "objectId": "YOUR_CATEGORY_OBJECT_ID"
  }
}
{
  "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を作成するには、次のように設定できます:
JSON
{
  "title": "Private Task",
  "ACL": {
    "USER_OBJECT_ID": {
      "read": true,
      "write": true
    }
  }
}
{
  "title": "Private Task",
  "ACL": {
    "USER_OBJECT_ID": {
      "read": true,
      "write": true
    }
  }
}
﻿
これにより、そのユーザー以外の誰もオブジェクトを読み取ったり変更したりできなくなります。
ACLを編集
﻿
クラスレベルの権限 (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 は最新のコードで更新されます。
JS
// 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;
});
// 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の例）：
Bash
curl https://raw.githubusercontent.com/back4app/parse-cli/back4app/installer.sh | sudo /bin/bash
curl https://raw.githubusercontent.com/back4app/parse-cli/back4app/installer.sh | sudo /bin/bash
﻿
アカウントキーを設定する:
Bash
b4a configure accountkey
b4a configure accountkey
﻿
クラウドコードをデプロイする:
Bash
b4a deploy
b4a deploy
﻿
ダッシュボードからデプロイする:
アプリのダッシュボードで、Cloud Code > Functionsに移動します。
関数をmain.jsエディタにコピー/ペーストします。
「デプロイ」をクリックします。
﻿
関数を呼び出す
Elmから、POSTリクエストを作成することでCloud Functionを呼び出すことができます。
Text
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
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経由で呼び出すこともできます:
GraphQL
mutation {
  calculateTextLength(input: {
    text: "Hello GraphQL"
  }) {
    result
  }
}
mutation {
  calculateTextLength(input: {
    text: "Hello GraphQL"
  }) {
    result
  }
}
﻿
ステップ5 – ユーザー認証の設定
Back4appにおけるユーザー認証
Back4appは、Parse Userクラスを認証の基盤として活用しています。デフォルトでは、Parseはパスワードのハッシュ化、セッショントークン、セキュアストレージを処理します。ElmアプリからRESTまたはGraphQLを介してユーザーを作成し、ログインすることができます。
ユーザー認証の設定
新しいユーザーのサインアップ (REST)
Text
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
        }
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)
Text
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
        }
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から必要なリクエストを行います。詳細な設定手順については、ソーシャルログインドキュメントを参照してください。
メール確認とパスワードリセット
メール設定に移動します。
メール確認を有効にすることで、新しいユーザーが自分のメールアドレスの所有権を確認できるようにします。
送信元アドレスを設定する, メールテンプレート、および必要に応じてカスタムドメインを設定します。
ステップ6 – ファイルストレージの取り扱い
ファイルのアップロードと取得
Parseには、ファイルのアップロードを処理するための Parse.File クラスが含まれており、Back4appが安全に保存します。ElmからRESTを使用しているため、マルチパートファイルアップロードを行うか、base64エンコードされたファイルを添付できます。
REST経由のファイルアップロード
Text
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
        }
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はファイルアップロードのセキュリティを管理するための設定を提供します。例えば:
JSON
{
  "fileUpload": {
    "enableForPublic": true,
    "enableForAnonymousUser": true,
    "enableForAuthenticatedUser": true
  }
}
{
  "fileUpload": {
    "enableForPublic": true,
    "enableForAnonymousUser": true,
    "enableForAuthenticatedUser": true
  }
}
﻿
ステップ7 – クラウドジョブを使ったタスクのスケジューリング
クラウドジョブ
クラウドジョブはBack4appでバックエンド上の定期的なタスクをスケジュールして実行することができます。例えば、古いデータのクリーンアップや定期的なメールの送信などです。例えば、30日以上前のtodoを削除するジョブは次のようになります:
JS
// 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);
  }
});
// 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）。
トリガーを設定して、Back4appのクラスやクラウドコード関数でどのイベントがウェブフックを発火させるかを指定します。
ウェブフックの追加
﻿
たとえば、新しいTodoが作成されるたびにSlackチャンネルに通知したい場合：
受信ウェブフックを受け入れるSlackアプリを作成します。
SlackのウェブフックURLをコピーします。
Back4appダッシュボードで、「Todoクラスの新しいレコード」というイベントのためにそのSlack URLにエンドポイントを設定します。
必要に応じてカスタムHTTPヘッダーやペイロードを追加します。
BeforeSaveウェブフック
﻿
ステップ9 – Back4app管理パネルの探索
The Back4app Admin App は、非技術的なユーザーがCRUD操作を実行し、コードを書くことなく日常的なデータタスクを処理するために設計されたウェブベースの管理インターフェースです。それは、データベース管理、カスタムデータ管理、およびエンタープライズレベルの操作を効率化する model-centric, user-friendly インターフェースを提供します。
Admin Appの有効化
有効化するには、 App Dashboard > More > Admin App に移動し、「Admin Appを有効化」ボタンをクリックします。
Admin Appを有効化
﻿
最初の管理ユーザーを作成（ユーザー名/パスワード）し、これにより新しい役割（B4aAdminUser）とクラス（B4aSetting、B4aMenuItem、B4aCustomField）がアプリのスキーマに自動的に生成されます。
﻿
管理インターフェースにアクセスするためのサブドメインを選択し、セットアップを完了します。
﻿
ログインして、作成した管理者資格情報を使用して新しいAdmin Appダッシュボードにアクセスします。
﻿
有効にすると、Back4app管理アプリを使用すると、Parseダッシュボードやバックエンドコードを直接使用することなく、データベースのレコードを簡単に表示、編集、または削除できます。設定可能なアクセス制御を使用すると、データを管理するための明確でポイントアンドクリックの方法が必要なチームメンバーやクライアントとこのインターフェースを安全に共有できます。
結論
この包括的なチュートリアルに従うことで、あなたは:
安全なバックエンドを作成しました Back4app上のElmアプリ用。
データベースを構成しました クラススキーマ、データ型、および関係を使用して。
リアルタイムクエリを統合しました （ライブクエリ）即時データ更新の可能性。
セキュリティ対策を適用しました ACLとCLPを使用してデータアクセスを保護および管理。
Cloud Codeを実装しました サーバー側でカスタムビジネスロジックを実行するための関数。
ユーザー認証を設定しました メール確認とパスワードリセットをサポート。
ファイルのアップロードを管理しました および取得、オプションのファイルセキュリティ制御付き。
Cloud Jobsをスケジュールしました 自動化されたバックグラウンドタスクのために。
Webhookを使用しました 外部サービスと統合するために。
Back4app管理パネルを探索しました データ管理のために。
堅牢なElmフロントエンドと強力なBack4appバックエンドを備え、機能豊富でスケーラブルかつ安全なアプリケーションを開発する準備が整いました。より高度な機能を探求し、ビジネスロジックを統合し、Back4appの力を活用してサーバーとデータベースの管理にかかる無数の時間を節約してください。コーディングを楽しんで！
次のステップ
本番環境向けのElmアプリを構築する このバックエンドを拡張して、より複雑なデータモデル、キャッシング戦略、パフォーマンス最適化を処理します。
高度な機能を統合する 専門的な認証フロー、役割ベースのアクセス制御、または外部API（支払いゲートウェイなど）など。
Back4appの公式ドキュメントをチェックする 高度なセキュリティ、パフォーマンス調整、ログ分析についての詳細を知るために。
他のチュートリアルを探る リアルタイムチャットアプリケーション、IoTダッシュボード、または位置情報サービスに関するもの。ここで学んだ技術をサードパーティのAPIと組み合わせて、複雑な実世界のアプリケーションを作成できます。
﻿
更新日 24 Jan 2025
このページは役に立ちましたか？
VueJSのバックエンドを構築する方法は？
NodeJSのバックエンドを構築する方法は？