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

Last Updated:
Contributors: ducafecat