阅读 355

如何快速给Flutter应用增加云同步功能第三篇

今天以一个漂亮的开源TodoList为例,来给大家提供一个思路,用最简单的方法将一个本地存储项目变为可以云同步的项目。

这个App原始地址在https://github.com/asjqkkkk/flutter-todos。为什么选这个项目呢?因为这个项目本身就是使用的本地sqlite进行数据存储,可以比较方便将它改成在线postgre数据库,从而用有云同步功能。

对于没有使用sqlite的项目也是可以改造的,只不过要重新写存储逻辑,如果某个项目你有特别喜欢和需要的功能,也是值得花点时间改造的。

废话少说,我们来看项目。

我们找到项目中的database.dart文件,接下来的主要任务就是改造这个本地数据库功能。

由于项目原来使用的sqlite,而我们准备将它改为postgres

首先我们引入dart的postgre驱动,并初始化数据库。

import 'package:postgres/postgres.dart';

...

connection = PostgreSQLConnection(dbIp, dbPort, dbName,
      username: dbAccount, password: dbPasswd);
await connection.open();

...
复制代码

这里需要准备一个有公网ip的免费云数据库MemFireDB,一键创建,一键查询,十分方便

在这里贴几个邀请码,方便大家测试。

BeAwWu, BeBJdb, BeAuWn, BeB0d9, Be8JJP, BeBSua

接下来创建数据库方式也要修改成postgre的方式。

await connection.execute("""
  CREATE TABLE todolist (
            id SERIAL PRIMARY KEY,
            account TEXT,
            taskName TEXT,
            taskType TEXT,
            taskStatus INTEGER,
            taskDetailNum INTEGER,
            uniqueId TEXT,
            needUpdateToCloud TEXT,
            overallProgress TEXT,
            changeTimes INTEGER,
            createDate TEXT,
            finishDate TEXT,
            startDate TEXT,
            deadLine TEXT,
            detailList TEXT,
            taskIconBean TEXT,
            textColor TEXT,
            backgroundUrl TEXT);
  """);
复制代码

这一步成功之后,我们就将数据库搬到了云上。接下来将它所有操作数据库的业务逻辑改成postgre方式。

可以看到源代码中有这个几个方法。

createTask
getTasks
updateTask
deleteTask
updateTasks
createTasks
getTaskByUniqueId
queryTask
复制代码

我们看其中一个添加Todo的方法可以看到,dartsqlite库对SQL语句做了一些封装,可以直接插入一个map,使用起来比较方便。

Future createTask(TaskBean task) async {
  ...

  var sql = getInsertSql('todolist', task.toMap());
  await db.execute(sql, substitutionValues: task.toMap());
}
复制代码

但是postgre库没有提供这些,需要自己做一点封装。

下面是我封装的方法,方便插入和更新数据。

static String getInsertSql(String table, Map<String, dynamic> values,
    {List<String> ignores}) {
  if (ignores != null && ignores.length > 0) {
    ignores = ignores.map((e) => e.toLowerCase()).toList();
  }

  final insert = StringBuffer();
  insert.write('INSERT');
  insert.write(' INTO ');
  insert.write(_escapeName(table));
  insert.write(' (');

  final size = (values != null) ? values.length : 0;

  if (size > 0) {
    final sbValues = StringBuffer(') VALUES (');

    var i = 0;
    values.forEach((String colName, dynamic value) {
      if (ignores == null || !ignores.contains(colName.toLowerCase())) {
        if (i++ > 0) {
          insert.write(', ');
          sbValues.write(', ');
        }

        /// This should be just a column name
        insert.write(_escapeName(colName));
        sbValues.write(PostgreSQLFormat.id(colName));
      }
    });
    insert.write(sbValues);
  }
  insert.write(')');

  var sql = insert.toString();
  return sql;
}

复制代码

还有一些别的封装,大家具体到项目中去看,最后会给出完整代码地址。

这里我们添加笔记的方法就变成了。

Future createTask(TaskBean task) async {
  ...

  var sql = getInsertSql('todolist', task.toMap());
  await db.execute(sql, substitutionValues: task.toMap());
}
复制代码

同样的其他的方法也都要改造,将这些方法都改造完成之后就完成了。

如果你的应用需要提供给其他人用,那么以写一个配置数据库的界面,方便动态配置数据库。

我这里写了一个,可供参考。

到这里,该着就完成啦!🐶

App还是很好用的,现在又有了云同步功能,就更加强大了。

这里只是给大家提供一个思路,更多的玩法大家发挥自己的想象。

完整代码(github.com/aliyoge/flu…)

文章分类
开发工具
文章标签