使用 Flutter 快速實現請假與寫週報應用

APP 簡介

公司使用的請假及寫週報系統一直都是網頁版的，以前咱們也有想過出一個移動端版本，但由於一些緣由沒有付諸行動。恰好最近 LeanCloud 新發布了 Flutter SDK，就決定用 Flutter 來開發這款 APP。

之因此選擇 Flutter，主要緣由是一份代碼能夠同時知足 iOS 和 Android 兩大平臺，這樣全部同事均可以享受到這款 APP 帶來的便利。

APP 的後端數據所有存放在 LeanCloud，不用擔憂後端系統的開發維護，實現起來也很簡單。

APP 效果預覽

App Store下載連接，或者 App Store 搜索 LeanCN 下載。

開發環境搭建

Flutter 安裝和環境搭建直接查看： Flutter 文檔。
編輯器能夠選擇 Android Studio、Visual Studio Code 或者 Emacs，編輯器就根據我的喜愛和開發習慣選擇了。

Flutter 開發環境配置好之後，再來建立 LeanCloud 應用。

• 首先登陸 LeanCloud 控制檯，建立一個新應用；
• 在控制檯 > 應用 > 設置 >域名綁定頁面綁定 API 訪問域名。暫時沒有域名能夠略過這一步，LeanCloud 也提供了短時間有效的免費體驗域名；或者註冊 LeanCloud 國際版，國際版不要求綁定域名。

在控制檯 > 應用 > 設置 > 應用 Keys 頁面記錄 AppID、AppKey 與服務器地址備用，這裏的服務器地址就是 REST API 服務器地址。若是未綁定域名，控制檯相同的位置能夠獲取到免費的共享域名。

使用到的第三方庫

在 pubspec.yaml 中，將 LeanCloud Flutter SDK：leancloud_storage 添加到依賴項列表:

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^0.1.2
  leancloud_storage: ^0.4.0 
  http: ^0.12.0+4
  date_format: ^1.0.8 
  flutter_localizations:
    sdk: flutter
  fluttertoast: ^4.0.1
  shared_preferences: ^0.5.7+3
  flutter_markdown: ^0.4.2

其餘第三方插件的說明：

date_format: 請假頁面用到的日期相關格式化插件

flutter_localizations：用於設置時間選擇器的中文顯示

fluttertoast：相似 Android 中的 Toast 小插件

shared_preferences：本地數據存儲

flutter_markdown：展現週報內容時支持 markdown 格式

APP 初始化設置

初始化 SDK

執行下面的代碼鏈接到在 LeanCloud 建立好的應用。
導入以下包：

import 'package:leancloud_storage/leancloud.dart';

初始化配置代碼：

Future initLeanCloud() async {
  LeanCloud.initialize(
      'AppID', 'AppKey',//AppID 與 AppKey 在控制檯設置 > 應用 Keys 頁面獲取
      server: 'https://e36trlaa.lc-cn-n1-shared.com',//這裏填控制檯綁定的域名或共享 API 域名
      queryCache: new LCQueryCache());
}

設計數據結構

在 LeanCloud 控制檯 > 存儲 > 結構化數據中建立須要的 Class，並添加相關字段，好比請假表（Leave）中，須要有請假人姓名，請假時長，請假緣由，開始請假日期等。

客戶端保存數據時，若是 Class 不存在，系統也會自動生成對應的 Class。

登陸與註冊模塊

LeanCloud 提供了 LCUser 類來方便使用用戶管理的功能，在控制檯對應 _User 表。註冊與登陸選擇了 用戶名+密碼 的方式。實現用戶註冊只須要執行如下代碼，就會在 _User 表新增一條用戶數據：

LCUser user = LCUser();
user.username = 'Tom';
user.password = 'cat!@#123';
await user.signUp();

用戶登陸也只須要傳入用戶名與密碼：

LCUser user = await LCUser.login('Tom', 'cat!@#123');

在應用中若是想要獲取當前登陸用戶，能夠用：

LCUser currentUser = await LCUser.getCurrent();

LCUser 還支持手機號 + 驗證碼註冊，更多登陸註冊方式能夠查看 LeanCloud 用戶文檔。

請假模塊的實現

請假部分包含「提交一條請假記錄」、「查詢個人歷史請假記錄」與「查詢今日請假同事」這三個部分。

提交一條請假記錄

保存一條數據到 LeanCloud 後臺也很簡單，一條數據能夠當作一個 LCObject 對象，直接給 LCObject 對象賦值，save 成功之後能夠在 Leave 表中看到新增了一行數據。

//建立 Class 並保存一條數據，Leave 表用來存放請假員工數據
LCObject leave = LCObject('Leave');
leave['startTime'] = startTime;//請假的開始時間(AM/PM)
leave['endTime'] = endTime;//請假結束時間(AM/PM)
LCUser user = await LCUser.getCurrent();
leave['username'] = user.username;//請假員工用戶名
leave['startDate'] = startDate;//請假開始日期
leave['type'] = leaveType;//請假類型，病假、年假或產假等
leave['duration'] = duration;//請假時長
leave['note'] = note;//請假緣由
leave['endDate'] = endDate;//請假結束日期
await leave.save();//保存到 LeanCloud 後臺

查詢個人歷史請假記錄

查詢數據使用 LCQuery，query.find() 返回符合條件的 List：

LCUser user = await LCUser.getCurrent();
//查詢 Leave 表
LCQuery<LCObject> query = LCQuery('Leave');
query.whereEqualTo('username', user.username);
//按照建立時間排序
query.orderByDescending('createdAt');
//leaves 是當前登陸用戶的所有請假記錄
List<LCObject> leaves = await query.find();

查詢今日請假同事

LCQuery<LCObject> query = LCQuery('Leave');
//查找 DateTime.now() 在請假開始日期與結束日期之間的數據
query.whereGreaterThanOrEqualTo('endDate', DateTime.now());
query.whereLessThanOrEqualTo('startDate', DateTime.now());
query.orderByDescending('createdAt');
List<LCObject> leaves = await query.find();

週報模塊實現

週報模塊分兩部分，保存一條週報和查詢歷史週報。展現週報支持 markdown 格式，因此在提交週報的時候，能夠設置默認週報格式，用三個單引號 ''' 包起來的文本能夠保留原文本格式展現：

String text = '''
### This week
* done1
* done2

### Next week
* todo1
* todo2
    ''';

保存週報

爲了區分提交週報的員工，建立一個 Pointer 類型字段指向 _User 表，字段名稱是 user，保存數據時把當前用戶賦值給 user 便可。（Leave 表同理也能夠建立 Pointer 類型字段記錄請假員工）。

LCUser user = await LCUser.getCurrent();
//WeeklyPub 是存儲週報數據的表
LCObject obj = LCObject('WeeklyPub');
obj['content'] = text;
// user 字段是 pointer 類型，指向 _User 表
obj['user'] = user;
LCObject object = await obj.save();

查詢週報
查詢週報時，想要一併獲取員工信息，可使用 include，這樣一次查詢就能夠查到這條週報的數據和員工（_User 表）的數據：

LCQuery<LCObject> query = LCQuery('WeeklyPub');
// 查詢結果同時包含用戶信息
query.include('user');
query.orderByDescending('createdAt');
query.whereGreaterThanOrEqualTo(
    'createdAt', DateTime.parse('2020-06-01 00:00:00Z'));
List<LCObject> weekly = await query.find();

聯繫人列表

聯繫人列表能夠經過查詢 _User 表獲取，但這裏會有一個問題。

爲了安全起見，LeanCloud 新建立的應用的 _User 表默認關閉了 find 權限。用戶只能查詢到本身在 _User 表中的數據，沒法查詢其餘用戶的數據。

解決辦法能夠是單首創建一張表來保存這類數據，並開放這張表的 find 查詢權限。或者能夠在 雲引擎 裏封裝用戶查詢的方法，這樣就無需開放 _User 表的 find 權限。

本 APP 採用的辦法是結合雲引擎，設置了查詢用戶表的雲函數，來保證數據安全。

• 第一步參考 在線編寫雲函數 文檔，在 LeanCloud 控制檯 > 雲引擎 > 部署 > 在線編輯 標籤頁建立雲函數。例如個人雲函數名是 queryUsers：

AV.Cloud.define('queryUsers', async function (request) {
  if (request.currentUser) {
    const userQuery = new AV.Query('_User');
    userQuery.addDescending('createdAt');
    return await userQuery.find();
  } else {
    throw new AV.Cloud.Error('用戶未登陸');
  }
})

• 而後點擊「部署」按鈕，部署到生產環境。

部署成功後，在移動端能夠直接調用雲函數，Flutter 代碼中能夠這樣調用雲函數：

Map<String, dynamic> userMap = await LCCloud.run('queryUsers');
//users 就是雲函數返回的用戶列表
List<dynamic> users = userMap['result'];

APP 項目地址

APP 項目完整代碼見 Github-FlutterLeaveDemo。

參考文檔

1. LeanCloud - 數據存儲開發指南 · Flutter
2. Flutter 文檔