Flutter應用如何快速增加雲同步功能

YcYc發表於2021-06-29
Flutter

今天以一個漂亮的開源記賬專案為例，來給大家提供一個思路，用最簡單的方法將一個本地儲存專案變為可以雲同步的專案。

這個App名叫《出入》，地址在https://github.com/Livinglist/Churu。為什麼選這個專案呢？因為這個專案本身就是使用的本地sqlite進行資料儲存，可以比較方便將它改成線上postgre資料庫，從而用有云同步功能。

對於沒有使用sqlite的專案也是可以改造的，只不過要重新寫儲存邏輯，如果某個專案你有特別喜歡和需要的功能，也是值得花點時間改造的。

廢話少說，我們來看專案。
首先我們需要準備一臺測試手機，這裡我們用的是鴻蒙的作業系統

我們找到專案中的db_provider.dart檔案，接下來的主要任務就是改造這個本地資料庫功能。

首先我們引入dart的postgre驅動，並初始化資料庫。

import 'package:postgres/postgres.dart';

...

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

...

這裡需要準備一個有公網ip免費雲資料庫MemFireDB，一鍵建立，一鍵查詢，十分方便。

接下來建立資料庫方式也要修改成postgre的方式。

CREATE TABLE $tableName ("""
                  $colId SERIAL PRIMARY KEY,
                  $colUuid TEXT,
                  $colTimestamp BIGINT,
                  $colDescription TEXT,
                  $colType INTEGER,
                  $colAmount REAL);
        """);

這一步成功之後，我們就將資料庫搬到了雲上。接下來將它所有運算元據庫的業務邏輯改成postgre方式。

可以看到原始碼中有這個幾個方法。

updateTransaction
deleteTransaction
addTransaction
getAllTransactions

我們看其中一個新增交易的方法可以看到，dart的sqlite庫對SQL語句做了一些封裝，可以直接插入一個map，使用起來比較方便。

Future<int> addTransaction(Transaction transaction) async {
...

  return db.insert('Transactions', transaction.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;
}

還有一些別的封裝，都寫在pg_helper.dart檔案中。

這裡我們新增交易的方法就變成了。

Future<int> addTransaction(Transaction transaction) async {
...

  var sql = PgHelper.getInsertSql(tableName, transaction.toMap(), ignores: [colId]);
  var res = await db.execute(sql, substitutionValues: transaction.toMap());
  return res;
}

同樣的其他的方法也都要改造，將這些方法都改造完成之後就完成了。

如果你的應用需要提供給其他人用，或者你想跟你的物件(如果你有的話)一起記賬，那麼可以寫一個配置資料庫的介面，方便動態配置資料庫。

我這裡寫了一個，可供參考。

89fon6o4Lt.jpeg!large

到這裡，你就可以跟你物件愉快的一起記賬啦！[狗頭]

App還是很好用的，現在又有了雲同步功能，就更加強大了。

這裡只是給大家提供一個思路，更多的玩法大家發揮自己的想象。

完整程式碼(github.com/aliyoge/Churu)

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章