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