Flutter 中运用 Dart 作为后端和 subabase 的 Todo 应用程序
原文 medium.com/gytworkz/to…
前言
你知道咱们能够用 Dart 创立 api 吗？
咱们能够这么做。
现在，咱们来创立一个简略的 todo 应用程序，运用 flutter 和 subabase 作为 api 的数据库和 dart。
正文
supabase.com
通常，咱们也能够运用社区包在 flutter 中直接运用 subabase，但是咱们也将学习如何运用 Dart 创立 api。
咱们开端吧。
在 subabase 中创立项目
在库中创立一个帐户并创立一个项目
一旦您创立了项目，将需要几分钟来初始化存储库，然后咱们能够创立一个表。
创立一个新表并将标题和描述增加为列。
我现已增加了 isDone 列来将使命标记为已完成，默认的布尔值为 false。
为了便于可视化，咱们能够增加一个包括示例数据的行。
你的项目创作完成了。
让咱们从运用 Dart 创立 api 开端。
运用 Dart 的 API
运用终端指令创立 Dart 项目
dart create todo_server
您应该有这样的文件夹结构。
将以下包增加到 pubspec.yaml 文件中。
现在，在 todo_server. dart 文件中增加服务器初始化代码
您将在 Service.Handlder 行中得到错误，但是不用忧虑，咱们现在就会创立它。
创立一个 service.dart 文件，该文件将包括一切的 api 端点
现在咱们将创立一个超数据库助手文件并从表中获取数据。
将 SUPABASE_URL 和 SUPABASE_KEY 替换为
Anon public 是密钥，URL 是 URL。
完成一切步骤之后，就能够运用工作 API 进行调试，并尝试在浏览器中运用 URL 并检查响应
Http://localhost:8080/all-todo
假如操作正确，您能够看到这种格式的响应
{"todos":[{"id":1,"created_at":"2022-02-13T09:44:42+00:00","title":"Task 1","description":"This is a sample task","isDone":false}]}
为了创立一个待办事项,
很棒吧？
现在让咱们在 heroku 主持这个. 。
在此之前，让咱们重命名 todo_server。Dart 到 server.dart，使其成为宿主教程的通用内容。遵从 Aswin Gopinathan 教程并在 heroku 中主持 api。
他的博客对此进行了深入的解说。
我也从他那里学到了这一点。只需确保在上传时将主机变量值更改为“0.0.0.0”
用 Dart + Heroku 创立一个 API
当你第一次开端学习 Flutter 时，你或许现已看到了关于在 Dart/ Flutter 中运用 API 的视频..。
dev.to/infiniteove…
在履行 git push heroku master 时，完成一切步骤
您或许会遇到一个错误。您能够在推之前增加这个指令来解决这个问题
git add .
git commit -m “initial commit”
git push heroku master
一旦构建完成，api 称号的根本 url 就会在终端中显示出来，对我来说，这便是 todo-flutter-supabase.herokuapp.com/
todo-flutter-supabase.herokuapp.com/all-todo 返回待办事项的完整列表
API works!!!!
创立应用程序
现在 API 现已能够工作了，咱们能够创立应用程序并正常运用 API。
因而，咱们将创立一个 base_api. dart 文件，其中将包括 dio 调用
现在你能够运用 API 来创立应用程序,
为运用网站的数据创立数据模型
app.quicktype.io
最终的应用程序会是这样的,
代码
github.com/tanmoy27112…
The link to the api repo
heroku git:clone -a todo-flutter-supabase$ cd todo-flutter-supabase
结束语
假如本文对你有帮助，请转发让更多的朋友阅读。
或许这个操作只需你 3 秒钟，对我来说是一个鼓励，感谢。
祝你有一个夸姣的一天~
猫哥
-
微信 ducafecat
-
wiki.ducafecat.tech
-
video.ducafecat.tech
