Используйте Flutter для быстрой реализации приложений для отпусков и еженедельных отчетов

Flutter
Используйте Flutter для быстрой реализации приложений для отпусков и еженедельных отчетов

Введение в приложение

Система, используемая компанией для отпросов и написания еженедельных отчетов, всегда была веб-версией, раньше мы думали и о мобильной версии, но по каким-то причинам не реализовали ее. Совсем недавно LeanCloud недавно выпустил Flutter SDK и решил использовать Flutter для разработки этого приложения.

Основная причина выбора Flutter заключается в том, что один код подходит как для платформ iOS, так и для Android, поэтому все коллеги могут пользоваться удобством, предоставляемым этим ПРИЛОЖЕНИЕМ.

Все внутренние данные приложения хранятся вLeanCloud, не беспокойтесь о разработке и обслуживании серверной системы, и ее очень просто реализовать.

Предварительный просмотр эффекта приложения

Ссылка для скачивания из магазина приложений, или поиск в App StoreLeanCNскачать.

Настройка среды разработки

Прямой взгляд на установку Flutter и построение окружения:Документация по флаттеру. Редактор может выбрать Android Studio, Visual Studio Code или Emacs, а редактор выбирается в соответствии с личными предпочтениями и привычками разработки.

После настройки среды разработки Flutter создайте приложение LeanCloud.

  • Сначала войдитеКонсоль LeanCloud, создайте новое приложение;

  • Привязать на странице «Консоль» > «Приложение» > «Настройки» > «Привязка доменного имени».доменное имя API-доступа. Нет доменного имени, чтобы пропустить этот шаг. LeanCloud также предоставляет краткосрочный бесплатный опыт доменного имени; или зарегистрироватьсяМеждународная версия LeanCloud, международная версия не требует привязки доменного имени.

На странице «Консоль» > «Приложение» > «Настройки» > «Ключи приложений» запишите 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: небольшой плагин, похожий на Toast в Android

shared_preferences: локальное хранилище данных

flutter_markdown: поддержка формата уценки при отображении содержимого еженедельного отчета

Настройки инициализации приложения

Инициализировать 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 > Хранилище > Структурированные данные и добавьте соответствующие поля, например, в Форму запроса на отпуск (Leave), имя запрашивающего, продолжительность запроса, причину запроса и дата начала подачи заявления на отпуск обязательна.

Когда клиент сохраняет данные, если класс не существует, система автоматически сгенерирует соответствующий класс.

Модуль входа и регистрации

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();

Внедрение модуля еженедельных отчетов

Модуль еженедельного отчета разделен на две части: сохранение еженедельного отчета и запрос исторического еженедельного отчета. Отображаемый еженедельный отчет поддерживает формат уценки, поэтому при отправке еженедельного отчета вы можете установить формат еженедельного отчета по умолчанию и использовать три одинарных кавычки.'''Обернутый текст может отображаться в исходном текстовом формате:

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

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

сохранить еженедельный отчет

Чтобы различать сотрудников, сдающих еженедельные отчеты, создайте поле типа Pointer, указывающее на таблицу _User, имя поляuser, при сохранении данных назначить текущего пользователяuserВот и все. (В таблице «Отпуск» также можно создать поле типа «Указатель» для записи отпущенных сотрудников).

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, но здесь есть проблема.

Из соображений безопасности для таблицы _User только что созданного приложения LeanCloud по умолчанию отключено разрешение на поиск. Пользователи могут запрашивать только свои собственные данные в таблице _User и не могут запрашивать данные других пользователей.

Решение может состоять в том, чтобы создать отдельную таблицу для хранения такого рода данных и открыть разрешение запроса на поиск этой таблицы. или можно найти наоблачный движокМетод инкапсуляции запроса пользователя таким образом, поэтому нет необходимости открывать разрешение на поиск таблицы _User.

Метод, принятый в этом приложении, заключается в объединении облачного механизма и настройке облачной функции для запроса пользовательской таблицы для обеспечения безопасности данных.

  • ссылка на первый шагНапишите облачные функции онлайндокументация, наКонсоль LeanCloud > Cloud Engine > Развертывание > Онлайн-редактированиеВкладка для создания облачных функций. Например, имя моей облачной функции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 см.Github-FlutterLeaveDemo.

Справочная документация

  1. LeanCloud — Руководство по разработке хранилища данных Flutter

  2. Документация по флаттеру

Категории