用Flutter和PocketBase制作购物清单

概述

此应用的目的是维护一个可供多人使用的购物清单。在我们的家庭中，我们都使用这个应用程序来告知其他成员想要购买的商品。如果有人去购物，他/她可以为所有家庭成员购买商品。

后端软件PocketBase会通知所有正在运行的应用实例有关清单中的更改。所以，如果你在商店里，你也会看到其他成员新添加到列表中的商品。

此应用需要一个PocketBase后端，在某个地方运行。PocketBase是一个单二进制文件中的Firebase克隆。更多信息请访问PocketBase主页。在该页面上，在讨论区有一个关于在fly.io上运行PocketBase的良好描述。下面有一些关于fly.io的章节。

功能

  • 多个主题，带自定义选项
  • 本地化（英语和德语）
  • 适用于Linux、Android、Windows、iOS、MacOS（Web版本缺乏实时事件，请参阅注意事项）

屏幕截图

以下是购物清单的一些技巧

  • 您可以通过向左滑动并按勾选标记图标，或双击商品本身来将商品标记为已购
  • 点击加号或减号即可更改商品的数量
  • 已购商品会放在列表的末尾，以便更清晰地查看
  • 商品按商店分组，并按字母顺序排序
  • 在搜索对话框中，可以通过按加号来添加新商品

技术描述

此应用中只使用了一个数据库表“shoppinglist”。此表（或集合）具有以下必须预先创建的字段

  • active：布尔值
  • amount：数字，最小值=0，最大值=100
  • bought：布尔值
  • article：纯文本，最小长度=1，最大长度=120，非空，唯一
  • shop：纯文本，最大长度=80

还有一个JSON格式的模式文件（pb_schema.json），可以导入PocketBase来创建此集合。

注意事项

PocketBase提供实时事件来通知客户端（购物清单应用）数据更改。不幸的是，这在Flutter Web上不起作用。有关技术细节的更多信息可以在PocketBase讨论区的这个主题中找到。

使其工作

安装/部署PocketBase

按以下步骤进行

  1. 部署或安装PocketBase（本地运行即可）
  2. 打开PocketBase的管理页面（即时创建PocketBase管理员用户）
  3. 导入pb_schema.json以创建购物清单集合（通过“Sync – Import Collection”）
  4. 创建带有电子邮件和密码的用户。将他们标记为已验证，并给他们一个**姓名**。这个名字在应用中可见。
  5. 在购物清单集合中输入一些数据，或者稍后在应用中进行

编译/运行购物清单

我假设您的机器上已安装Flutter，并且flutter doctor对于您将使用的平台没有显示错误。

  1. 运行**flutter run**来启动应用程序，并使用本地安装的PocketBase
  2. 如果您的PocketBase实例不在localhost上，您必须运行**flutter run --dart-define=SHOPPINGLIST_HOST=https://YOUR-POCKETBASE-DOMAIN.com**
  3. 要创建Android应用，例如运行**flutter build apk**
  4. 如果您的PocketBase实例不在localhost上，您必须运行**flutter build apk --dart-define=SHOPPINGLIST_HOST=https://YOUR-POCKETBASE-DOMAIN.com**
  5. 在应用内，使用电子邮件和密码登录

就是这样。祝您购物愉快！

重要提示

如果您在本地运行PocketBase，并想从Android模拟器等设备访问它，您需要这样启动PocketBase

> pocketbase serve --http 0.0.0.0:8090

这可以确保PocketBase监听所有地址。此外，您需要设置环境变量SHOPPINGLIST_HOST，将其设置为您主机机器的正确IP地址，例如http://192.168.0.52。地址取决于您的网络，您应该使用ip a、ipconfig或ifconfig等工具查找它。

创建发布版本

要创建使用正确PocketBase URL的发布版本，您需要设置一个命令行选项，将环境变量提供给Flutter

> flutter build apk --dart-define=SHOPPINGLIST_HOST=https://YOUR-POCKETBASE-DOMAIN.com

使用Visual Studio Code

为了在VSCode中运行或调试应用程序时拥有正确的环境变量，您需要创建一个启动配置.vscode/launch.json，并具有如下配置

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "shoppinglist",
            "request": "launch",
            "type": "dart",
            // Arguments to be passed to the Flutter app
            "args": [
                "--dart-define",
                "SHOPPINGLIST_HOST=https://YOUR-POCKETBASE-DOMAIN.com"
            ]
        },
    ]
}

本地化

该应用程序使用Intl包来维护不同的本地化。如果您更改了./lib/l10n/*.arb文件的内容，请运行以下命令

> flutter gen-l10n

这将更新.dart_tool/flutter_gen/gen_l10n中的文件。

PocketBase在fly.io上运行

在接下来的章节中，我将展示一些有用的命令来帮助您管理fly.io上的PocketBase。我假设您位于包含Dockerfile和fly.toml文件的文件夹中。

检查容器

如果您想查看容器中当前有什么

> flyctl ssh console
# ls -l /pb/pb_data

备份

本地备份数据库文件

> flyctl ssh sftp get /pb/pb_data/data.db ./data.db

恢复

在fly.io上恢复数据库备份

> flyctl ssh sftp shell
>> put ./LOCAL-PATH-WITH-DB/data.db /pb/pb_data/data.db

之后，您应该重启PocketBase，以便使用恢复的数据库

> flyctl apps restart YOUR_APPLICATION_NAME

部署新的PocketBase版本

您需要更新fly.toml文件，以PocketBase版本（PB_VERSION）为准。完成后，运行

> flyctl deploy

您的数据库将不受影响，保持原样。

GitHub

查看 Github