Quickstarters
Feature Overview
如何为Flutter构建后端?
36 分
介绍 在本教程中,您将学习 如何使用 back4app 构建 flutter 的后端 ,这是一个开源且可靠的后端即服务(baas)。 我们将逐步介绍如何将 back4app 的基本功能——如数据库管理、云函数、restful api、graphql api 和用户身份验证——集成到您的 flutter 项目中。 您还将发现如何使用实时查询处理实时更新。通过使用 back4app 强大的后端服务器,您可以跳过许多手动配置,专注于创建动态的 flutter 应用。 本指南将向 flutter 开发者展示如何设置一个安全、可扩展且强大的后端结构,能够与您的客户端轻松通信。 我们还将强调让 back4app 处理繁重工作的优势——如托管、用户身份验证和服务器逻辑——这样您就可以受益于自动扩展、高级安全性和简化维护等功能。 如果您有一个 flutter 项目并希望节省无数小时的后端设置时间,这里是开始的正确地方。 在本教程结束时,您将了解可以使用 back4app 创建的后端类型,并准备好扩展您的后端服务以实现生产就绪的应用程序,或集成更复杂的功能,如外部 api 和高级用户身份验证。 让我们开始吧! 前提条件 要完成本教程,您需要: 一个 back4app 账户和一个新的 back4app 项目 开始使用 back4app。 https //www back4app com/docs/get started/new parse app 如果您没有账户,可以免费创建一个。请按照上面的指南准备好您的项目。 基本的 flutter 开发环境 确保您已安装并设置好 flutter sdk https //docs flutter dev/get started/install 。同时,确认您已为 flutter 配置了 ide(如 android studio 或 vs code)。 dart(编程语言)环境 通常与 flutter 一起安装。确保您可以 import dart 包而没有错误。 熟悉 flutter 基础知识 flutter 官方文档。 https //docs flutter dev 如果您是 flutter 新手,请在开始之前查看官方文档或初学者教程。 确保您具备所有这些前提条件。设置好您的 back4app 项目并配置好本地 flutter 环境将帮助您更轻松地跟随。 步骤 1 – 在 back4app 上创建新项目并连接 创建新项目 在 back4app 上构建 flutter 后端的第一步是创建一个新项目。如果您还没有创建,请按照以下步骤操作: 登录到您的 back4app 账户 。 点击您 back4app 仪表板上的“新应用”按钮 。 给您的应用命名 (例如,“flutter backend tutorial”)。 一旦项目创建完成,您将在您的 back4app 仪表板中看到它列出。这个项目将是我们将讨论的所有后端配置的基础。 在您的 flutter 应用中安装和初始化 parse sdk back4app 依赖 parse 平台来管理您的数据、实时更新、用户身份验证等。要将您的 flutter 项目连接到 back4app,请按照以下步骤操作: 将 parse flutter sdk 添加到您的应用中: dependencies parse server sdk flutter ^4 0 0 在您的 main dart 中导入 parse 包(或在您初始化应用的地方): import 'package\ parse server sdk flutter/parse server sdk flutter dart'; import 'package\ flutter/material dart'; void main() async { widgetsflutterbinding ensureinitialized(); const keyapplicationid = 'your application id'; const keyparseserverurl = 'https //parseapi back4app com'; const keyclientkey = 'your client key'; // initialize parse with debug set to true await parse() initialize( keyapplicationid, keyparseserverurl, clientkey keyclientkey, autosendsessionid true, debug true, ); runapp(const myapp()); } class myapp extends statelesswidget { const myapp({key? key}) super(key key); @override widget build(buildcontext context) { return materialapp( title 'flutter + back4app example', theme themedata(primaryswatch colors blue), home const scaffold( body center( child text('hello from flutter + back4app!'), ), ), ); } } 在您的 back4app 控制面板中,转到您应用的 安全性与密钥 部分以找到您的 应用程序 id , 客户端密钥 , 和 parse 服务器 url 用您自己的凭据替换上面的占位符。通过此初始化,来自您的 flutter 应用的每个请求都将安全地路由到您的 back4app 实例。 请记住, 主密钥 永远不应在您的 flutter 应用的客户端使用。如果您需要主密钥,请将其保留在服务器或安全环境中。 步骤 2 – 设置数据库 创建数据模型 一旦您的 flutter 应用连接到 back4app,您就可以开始设计数据库架构。您可以通过 back4app 控制面板手动完成此操作: 在您的控制面板中导航到 “数据库” 部分 。 创建一个新类 (例如,“待办事项”),并添加相关列(例如,标题,是否完成)。 back4app 还提供了一个 ai 代理 来帮助自动创建架构: 打开ai代理 从您的应用仪表板或菜单中 用简单的语言描述您的数据模型 (例如,“创建一个具有完整类架构的新待办事项应用。”)。 让ai代理为您创建架构 这简化了数据架构的设置。如果您希望字段自动创建,您可以简单地开始从您的应用中保存对象——parse支持动态创建架构 使用ai代理创建数据模型 如果您选择使用back4app ai代理,只需提供简短的描述,它将为您构建或建议一个架构。这是加快您的flutter项目初始数据建模阶段的绝佳方法 使用flutter parse sdk读取和写入数据 下面是一个简单的示例,演示如何使用parse flutter sdk创建和检索对象 import 'package\ parse server sdk flutter/parse server sdk flutter dart'; future\<void> createtodoitem(string title, bool iscompleted) async { final todo = parseobject('todo') set('title', title) set('iscompleted', iscompleted); final response = await todo save(); if (response success && response result != null) { print('todo saved successfully ${response result}'); } else { print('error saving todo ${response error? message}'); } } future\<list\<parseobject>?> fetchtodos() async { final querybuilder\<parseobject> querytodo = querybuilder\<parseobject>(parseobject('todo')); final response = await querytodo query(); if (response success && response results != null) { print('fetched todo items ${response results}'); return response results as list\<parseobject>; } else { print('error fetching todos ${response error? message}'); return null; } } 通过这个,你可以直接从你的 flutter 应用与 back4app 数据库进行交互。只需调用 createtodoitem('喂猫', false) 或 fetchtodos() 来写入和读取数据。 使用 rest api 读取和写入数据 如果你需要与其他服务集成或更喜欢传统的方法,你仍然可以使用 back4app rest api: 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 api 读取和写入数据 back4app 还提供了一个 graphql 端点: mutation { createtodo(input { fields { title "clean the house" iscompleted false } }) { todo { objectid title iscompleted } } } 这给你提供了灵活性,可以构建最适合你的 flutter 应用的方法。 使用实时查询 back4app 提供 实时查询 ,因此您可以接收数据的实时更新。在 back4app 仪表板(服务器设置)中启用实时查询,然后使用 parse livequery flutter 客户端。 import 'package\ parse server sdk flutter/parse server sdk flutter dart'; import 'package\ parse server sdk flutter/live query dart'; future\<void> subscribetotodos() async { final livequery = livequery(); final query = querybuilder\<parseobject>(parseobject('todo')); subscription subscription = await livequery client subscribe(query); subscription on(livequeryevent create, (value) { print('new todo created $value'); }); subscription on(livequeryevent update, (value) { print('todo updated $value'); }); subscription on(livequeryevent delete, (value) { print('todo deleted $value'); }); } 通过此订阅,您可以实时监听数据更改。这对于构建多个用户可以看到实时数据更新的协作应用程序非常棒。一旦触发热重载,您的订阅将保持有效,除非应用程序重新启动。 步骤 3 – 使用 acl 和 clp 应用安全性 什么是 acl 和 clp? back4app 使用 acl(访问控制列表) 和 clp(类级权限) 来限制谁可以在对象和类级别读取或写入数据。这一层确保您的数据免受未经授权的访问。 设置类级权限 在您的 back4app 控制面板中,转到 数据库 并选择一个类(例如,“待办事项”)。 导航到 类级权限 。 设置默认值(例如,仅允许经过身份验证的用户创建新对象)。 在代码中配置 acls 您还可以从 flutter 代码中在对象级别应用 acls: import 'package\ parse server sdk flutter/parse server sdk flutter dart'; future\<void> createprivatetodo(parseuser owneruser, string title) async { final todo = parseobject('todo') set('title', title); final acl = parseacl(owner owneruser); acl setpublicreadaccess(allowed false); acl setpublicwriteaccess(allowed false); todo setacl(acl); final response = await todo save(); if (response success) { print('private todo saved '); } else { print('error ${response error? message}'); } } 通过结合 clps 和 acls,您可以确保只有合适的人或角色可以访问或修改特定数据。 步骤 4 – 编写云代码函数 为什么选择云代码? 云代码允许您在不手动设置任何后端服务器的情况下运行服务器端逻辑。这非常适合验证数据、与外部服务集成或在您的后端即服务(baas)中强制执行某些规则。 示例函数 这是一个计算文本长度的示例云函数: // main js in your cloud code parse cloud define('calculatetextlength', async (request) => { const { text } = request params; if (!text) { throw new error('no text provided'); } return { length text length }; }); 您可以通过 back4app cli 或在您的应用程序仪表板中的 云代码 部分部署此代码。 部署 使用 back4app cli b4a configure accountkey b4a deploy 使用仪表板 在您的应用程序仪表板中,转到 云代码 > 函数 粘贴 javascript 代码。 点击 部署 从 flutter 调用云代码 import 'package\ parse server sdk flutter/parse server sdk flutter dart'; future\<void> gettextlength(string text) async { final function = parsecloudfunction('calculatetextlength'); final params = \<string, dynamic>{'text' text}; final parseresponse result = await function execute(parameters params); if (result success && result result != null) { print('text length ${result result\['length']}'); } else { print('error calling cloud code ${result error? message}'); } } 这种安全的方法确保敏感逻辑保持在服务器上,而您的 flutter 应用程序仅发出请求。 步骤 5 – 配置身份验证 启用用户身份验证 back4app 使用 parse user 类来处理用户注册和登录。默认情况下,parse 负责密码哈希、会话令牌和安全存储。 import 'package\ parse server sdk flutter/parse server sdk flutter dart'; future\<void> signupuser(string username, string password, string email) async { final user = parseuser(username, password, email); final response = await user signup(); if (response success) { print('user signed up successfully!'); } else { print('sign up error ${response error? message}'); } } future\<void> loginuser(string username, string password) async { final user = parseuser(username, password, null); final response = await user login(); if (response success) { print('user logged in ${response result}'); } else { print('login error ${response error? message}'); } } 社交登录 back4app 支持与 google、apple、facebook 等的集成。每个提供者都有特定的方法,可能需要额外的库(例如,facebook 或 google 登录)。然后您可以调用 await parseuser loginwith('facebook', \<string, dynamic>{ 'id' 'user facebook id', 'access token' 'facebook access token', 'expiration date' 'date' }); 根据提供者的文档调整参数。 步骤 6 – 处理文件存储 设置文件存储 您可以使用 parsefile 存储图像、文档或其他媒体文件。back4app 确保这些文件的安全,并提供一个用于检索的 url。 import 'dart\ io'; import 'package\ parse server sdk flutter/parse server sdk flutter dart'; import 'package\ image picker/image picker dart'; future\<void> uploadimage() async { final picker = imagepicker(); final xfile? pickedfile = await picker pickimage(source imagesource gallery); if (pickedfile == null) { print('no file selected '); return; } final parsefile = parsefile(file(pickedfile path)); final response = await parsefile save(); if (response success) { print('file saved ${parsefile url}'); } else { print('error uploading file ${response error? message}'); } } 安全考虑 您可以通过将文件级安全性与 acl 结合来定义谁可以访问文件(公开、经过身份验证的用户或受限)。这确保您的文件数据保持安全。 第 7 步 – 电子邮件验证和密码重置 它们的重要性 电子邮件验证确认用户拥有提供的电子邮件地址,而密码重置流程增强了用户体验和安全性。 仪表板配置 前往您的应用的 email settings 在 back4app 控制面板中。 启用 email verification 和 password reset 如有需要,配置电子邮件模板或您的自定义域名。 这些设置让您的 flutter 应用自动处理用户所有权检查和密码恢复。 在 flutter 中的实现 final user = parseuser('testuser', 'password123', 'test\@example com'); final signupresponse = await user signup(); if (signupresponse success) { // the user will receive a verification email } // for password reset final resetresponse = await parseuser requestpasswordreset('test\@example com'); if (resetresponse success) { print('reset email sent successfully!'); } 步骤 8 – 使用云作业调度任务 云作业 您可能想要调度定期任务(如清理旧数据或发送定期电子邮件)。云作业可以让您做到这一点: // 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); const oldtodos = await query find({ usemasterkey true }); await parse object destroyall(oldtodos, { usemasterkey true }); return `deleted ${oldtodos length} old todos `; }); 部署此代码,然后转到 应用设置 > 服务器设置 > 后台作业 在您的 back4app 控制面板中进行调度。 步骤 9 – 集成 webhooks 什么是 webhooks? webhooks 允许您的 back4app 应用在某些事件发生时(例如保存新对象)向外部服务发送 http 请求。这对于与第三方工具集成非常理想。 转到 更多 > webhooks 在您的 back4app 控制面板中,然后 添加 webhook 。 设置您的端点和触发器(例如,“todo 中的新记录”)。 您还可以通过在 beforesave 或 aftersave 触发器中发出 http 请求来手动配置云代码中的 webhooks。 第10步 – 探索 back4app 管理面板 在哪里找到它 “ back4app 管理应用 ”是一个用户友好的界面,允许非技术团队成员管理数据(crud 操作、数据任务等),而无需打开 parse dashboard。 转到 应用仪表板 > 更多 > 管理应用 。 点击 启用管理应用 。 您将创建一个管理员用户,选择一个子域,并使用新创建的凭据登录。管理应用有助于快速数据审查和修改。 结论 在本教程中,您学习了 如何为 flutter 构建后端 ,使用 back4app 和 parse flutter sdk。 您创建了类,存储了数据,配置了实时查询,应用了 acl 和 clp 的安全性,编写了云函数,安排了任务,集成了 webhook,并探索了 back4app 管理面板。 这种方法通过让您专注于 flutter 客户端而不是复杂的服务器配置,加快了开发速度。 您现在拥有的最终字符串是一个功能齐全且安全的后端,利用了 restful api、用户身份验证和简单的数据操作。 您可以随时集成更高级的功能——例如额外的云函数、外部 api 调用或自定义角色。 下一步 准备生产 实施高级缓存、分析或基于角色的访问控制。 扩展您的应用 集成第三方服务或为专业业务逻辑构建更多云函数。 查阅 back4app 文档 探索高级安全性、性能调优、日志分析等。 了解更多 查看实时聊天应用、基于位置的服务或更复杂数据结构的教程。将它们与您的 flutter 项目结合以实现实际用例。 通过不断完善此设置,您将把 flutter 应用转变为一个强大、可扩展的解决方案,建立在强大的后端服务之上。祝您编码愉快!