Quickstarters
Feature Overview
如何为 Elm 构建后端?
41 分
介绍 在本教程中,您将学习如何使用 back4app 为 elm 应用程序构建完整的后端。 我们将逐步整合 back4app 的基本功能——如数据库管理、云代码函数、rest 和 graphql api、用户身份验证以及实时查询(实时查询)——以创建一个安全、可扩展且强大的后端,与您的 elm 前端无缝通信。 您还将看到,back4app 的快速设置和直观环境可以大幅减少与手动配置服务器和数据库相比所需的时间和精力。 在此过程中,您将获得关键功能的实践经验,包括高级安全功能、使用云作业调度任务以及为外部集成设置 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 方法 用于 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" 每当您从 elm 向 back4app 发出 http 请求时,您将使用这些值。通过完成此步骤,您已建立了如何安全地将 elm 前端与 back4app 后端连接。 步骤 2 – 设置数据库 保存和查询数据 在设置好你的 back4app 项目后,你现在可以通过 rest 或 graphql 从 elm 中开始保存和检索数据。作为一个简单的例子,我们将演示如何创建和获取一个 todo 项目。 从 elm 使用 rest 我们将使用 elm/http https //package elm lang org/packages/elm/http/latest/ 来发起 rest 请求。以下是一个简化的示例,用于 创建 一个 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 控制面板中。 创建一个新类 (例如,“待办事项”)并添加相关列,例如标题(字符串)和已完成(布尔值)。 back4app 还支持各种数据类型: 字符串 , 数字 , 布尔值 , 对象 , 日期 , 文件 , 指针 , 数组 , 关系 , 地理点 , 和 多边形 您可以为每个字段选择适当的类型,或者在您第一次使用 rest 或 graphql 方法从 elm 应用程序保存对象时,让 parse 自动创建这些列。 back4app 提供一个 ai 代理,可以帮助您设计数据模型: 打开ai代理 从您的应用仪表板或菜单中 用简单的语言描述您的数据模型 (例如,“请在back4app上创建一个新的待办事项应用,带有完整的类架构。”)。 让ai代理为您创建架构 使用ai代理可以在设置数据架构时节省时间,并确保您的应用程序的一致性。 关系数据 如果您有关系数据——比如,一个 类别 对象指向多个 待办事项 项目——您可以在parse中使用 指针 或 关系 。从elm中,您可以通过在rest或graphql调用中包含指针或关系字段来管理这些关系。 例如,通过rest添加指针: { "title" "task with category", "category" { " type" "pointer", "classname" "category", "objectid" "your category object id" } } 当你查询时,你也可以通过使用参数 ?include=category 在rest中包含指针数据,或在graphql查询中使用 include 。 实时查询 为了实时更新,back4app提供了 实时查询 。虽然没有原生的elm包用于parse实时查询,但你仍然可以在你的back4app仪表板中启用它: 在你的应用的 服务器设置 下启用实时查询。 在专用客户端中使用 websocket端点 进行实时查询。 如果你想将实时查询与elm集成,你可以利用 elm websocket (或其他自定义方法)来订阅更改。然而,这需要更高级的配置,因为目前没有官方的elm实时查询客户端。 步骤3 – 使用acl和clp应用安全性 back4app安全机制 back4app非常重视安全性,提供了 访问控制列表 (acls) 和 类级权限 (clps) 这些功能允许您限制谁可以在每个对象或每个类的基础上读取或写入数据,确保只有授权用户可以修改您的数据。 访问控制列表 (acls) 一个 acl 应用于单个对象,以确定哪些用户、角色或公众可以执行读/写操作。您可以通过在创建或更新对象时在json中包含 acl 属性,从elm配置acl。 例如,要创建一个私有的待办事项,您可以设置: { "title" "private task", "acl" { "user object id" { "read" true, "write" true } } } 这防止了除了该用户以外的任何人读取或修改该对象。 类级权限 (clps) clps 管理整个类的默认权限,例如类是否可以公开读取或写入,或者是否只有某些角色可以访问它。 转到您的 back4app 控制面板 , 选择您的应用程序,然后打开 数据库 部分。 选择一个类 (例如,“待办事项”)。 打开类级别权限 标签。 配置您的默认值,例如“需要身份验证”以进行读取或写入,或“无访问”以供公众使用。 这些权限设置了基线,而 acls 则微调单个对象的权限。一个强大的安全模型通常结合了 clps(广泛限制)和 acls(细粒度每对象限制)。有关更多信息,请访问 应用安全指南。 步骤 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; }); 您可以通过向以下地址发出 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 通过仪表板进行部署 在您的应用仪表板中,转到 云代码 > 函数 将函数复制/粘贴到 main js 编辑器中。 点击 部署 调用您的函数 从 elm 中,您可以通过发出 post 请求来调用云函数: 您还可以通过 graphql 调用 cloud functions mutation { calculatetextlength(input { text "hello graphql" }) { result } } 步骤 5 – 配置用户身份验证 back4app 中的用户身份验证 back4app 利用 parse user 类作为身份验证的基础。默认情况下,parse 处理密码哈希、会话令牌和安全存储。您可以通过 rest 或 graphql 从您的 elm 应用程序创建和登录用户。 设置用户身份验证 注册新用户 (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 可以与流行的 oauth 提供商集成,例如 google , facebook , 或 apple 通常,您将在 back4app 仪表板中配置这些提供商,然后从 elm 发出必要的请求。有关详细的设置步骤,请参阅 社交登录文档 https //www back4app com/docs/platform/sign in with apple 。 电子邮件验证和密码重置 在您的 back4app 仪表板中导航到 电子邮件设置 。 启用电子邮件验证 以确保新用户验证其电子邮件地址的所有权。 配置发件人地址 , 电子邮件模板,以及您希望的自定义域名。 步骤 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 天的待办事项的作业可能如下所示: // 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 – 集成 webhooks webhooks 允许您的 back4app 应用在某些事件发生时向外部服务发送 http 请求。这对于与第三方系统(如支付网关(例如 stripe)、电子邮件营销工具或分析平台)集成非常强大。 导航到 webhooks 配置 在您的 back4app 仪表板 > 更多 > webhooks 然后点击 添加 webhook 设置端点 (例如, https //your external service com/webhook endpoint https //your external service com/webhook endpoint )。 配置触发器 以指定您的 back4app 类或云代码函数中的哪些事件将触发 webhook。 例如,如果您想在创建新待办事项时通知 slack 频道: 创建一个接受传入 webhook 的 slack 应用。 复制 slack webhook url。 在您的 back4app 仪表板中,将端点设置为该 slack url,用于事件“todo 类中的新记录。” 如有需要,添加自定义 http 头或有效负载。 步骤 9 – 探索 back4app 管理面板 该 back4app 管理应用 是一个基于网络的管理界面,旨在让非技术用户执行 crud 操作并处理常规数据任务,而无需编写任何代码。它提供了一个 以模型为中心 , 用户友好 的界面,简化了数据库管理、自定义数据管理和企业级操作。 启用管理应用 启用 它的方法是前往 应用仪表板 > 更多 > 管理应用 并点击“启用管理应用”按钮。 创建第一个管理员用户 (用户名/密码),这将自动在您的应用架构中生成一个新角色(b4aadminuser)和类(b4asetting、b4amenuitem 和 b4acustomfield)。 选择一个子域名 以访问管理界面并完成设置。 使用 您创建的管理员凭据登录,以访问您的新管理应用仪表板。 一旦启用,back4app 管理应用程序使您可以轻松查看、编辑或删除数据库中的记录——无需直接使用 parse dashboard 或后端代码。通过可配置的访问控制,您可以安全地与需要清晰、点击式管理数据的团队成员或客户共享此界面。 结论 通过遵循本综合教程,您已经: 创建了一个安全的后端 用于 back4app 上的 elm 应用。 配置了一个数据库 具有类模式、数据类型和关系。 集成了实时查询 (实时查询)以实现即时数据更新。 应用了安全措施 使用 acl 和 clp 来保护和管理数据访问。 实现了云代码 函数以在服务器端运行自定义业务逻辑。 设置了用户身份验证 支持电子邮件验证和密码重置。 管理文件上传 和检索,具有可选的文件安全控制。 调度云作业 以进行自动化后台任务。 使用 webhooks 与外部服务集成。 探索了 back4app 管理面板 以进行数据管理。 凭借坚实的 elm 前端和强大的 back4app 后端,您现在已具备开发功能丰富、可扩展且安全的应用程序的能力。继续探索更高级的功能,集成您的业务逻辑,并利用 back4app 的强大功能为您节省无数小时的服务器和数据库管理时间。祝您编码愉快! 下一步 构建一个生产就绪的 elm 应用 ,通过扩展这个后端来处理更复杂的数据模型、缓存策略和性能优化。 集成高级功能 ,例如专门的身份验证流程、基于角色的访问控制或外部 api(如支付网关)。 查看 back4app 的官方文档 ,深入了解高级安全性、性能调优和日志分析。 探索其他教程 ,如实时聊天应用、物联网仪表板或基于位置的服务。您可以将这里学到的技术与第三方 api 结合起来,创建复杂的现实世界应用程序。