Flutter 中使用 Dart 作为后端和 subabase 的 Todo 应用程序
原文 https://medium.com/gytworkz/todo-application-using-dart-as-backend-and-supabase-in-flutter-b42b2c348755
前言
你知道我们可以用 Dart 创建 api 吗?
我们可以这么做。
现在,我们来创建一个简单的 todo 应用程序,使用 flutter 和 subabase 作为 api 的数据库和 dart。
正文
https://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 的视频..。
https://dev.to/infiniteoverflow/create-an-api-with-dart-heroku-477k
在执行 git push heroku master 时,完成所有步骤
您可能会遇到一个错误。您可以在推之前添加这个命令来解决这个问题
git add .
git commit -m “initial commit”
git push heroku master
一旦构建完成,api 名称的基本 url 就会在终端中显示出来,对我来说,这就是 https://todo-flutter-supabase.herokuapp.com/
Https://todo-flutter-supabase.herokuapp.com/all-todo 返回待办事项的完整列表
API works!!!!🥳
创建应用程序
现在 API 已经可以工作了,我们可以创建应用程序并正常使用 API。
因此,我们将创建一个 base_api. dart 文件,其中将包含 dio 调用
现在你可以使用 API 来创建应用程序,
为使用网站的数据创建数据模型
https://app.quicktype.io
最终的应用程序会是这样的,
代码
https://github.com/tanmoy27112000/todo_supabase_flutter
The link to the api repo
heroku git:clone -a todo-flutter-supabase$ cd todo-flutter-supabase
结束语
如果本文对你有帮助,请转发让更多的朋友阅读。
也许这个操作只要你 3 秒钟,对我来说是一个激励,感谢。
祝你有一个美好的一天~
© 猫哥
微信 ducafecat
https://wiki.ducafecat.tech
https://ducafecat.com