Flutter+YesAPI 快速建構零運維的APP

前言

移動網際網路經過多年的發展，已經進入一個成熟的階段，幾乎每個公司都有自己的移動應用程式或移動網站。随着5G技術的不斷發展，也帶來了更高效的資料傳輸速度和更穩定的網絡連接配接，這使得更多的應用程式和服務能夠在網際網路上運作，網際網路連接配接一切，這也給開發者帶來新的機遇和挑戰。

每個人都能開發自己的APP

在傳統的創業團隊，要打造一款應用程式，往往需要配備有Android、IOS、Web前端、後端等開發人員，開發隊伍龐大，開發周期漫長，造成整個開發和維護成本居高不下，在早期資金緊缺的情況下給創業帶來極大的負擔。

而現在，你隻需要一個人就能建構一款屬于自己的APP。

技術選型

選型是開發的第一步，也是最重要的一步，它将決定後續的開發工作是否順暢進行。

首先，用戶端我們需要選擇一款跨平台的開發架構，主流的開發架構有React-Native、Flutter、UNI-APP/Taro等，本文選用Flutter作為用戶端架構。

關于Flutter有以下的特點：

• 代碼開源
• 跨平台且相容性較好
• 有完善的文檔和成熟的社群
• 豐富的UI元件，能實作各種效果
• 有谷歌背書

官網：https://flutter.cn

接着是後端選型，為了能一個人完成所有開發，我們選用的是YesAPI，它是一個基于Serverless的低代碼平台，不需要懂後端技術就能完成背景搭建。

關于YesAPI有以下的特點：

• Serverless零運維
• 低代碼，接入成本低
• 操作簡單，零學習成本
• 支援海量資料雲存儲
• 支援一鍵動态生成http接口

官網：https://yesapi.cn

搭建一個商場APP

我們使用Flutter編寫了一個商場APP，關于Flutter開發可參考官方文檔，這裡就不做贅述，如果感興趣可在評論區回複，将給你提供源碼。

搭建一個零運維的背景

目前，我們還隻有一個用戶端，沒有背景資料支援。接下來将以賬号登入/注冊為例，為你展示如何搭建一個零運維的背景，隻需要滑鼠操作，不需要寫任何後端代碼。

1.打開YesApi.cn，新增賬號并登入。

2.登入後，點選菜單“我的”，會看到你的專屬域名，和app_key，這兩個需要記起來，将作為用戶端通路背景資料的憑證。

注冊功能

查找你需要的接口

檢視接口說明

接口參數

用戶端請求接口的代碼實作：

Future<bool> createAccount(String account, String password) async {
  const BASE_URL = 'https://xxxx.api.yesapi.cn/api'; // 域名替換成你的專屬域名
  var url = BASE_URL + '/App/User/Register';
  try {
    print("post ${Uri.parse(url)}");

    Map<String, dynamic> jsonData = {
      "username":"$account",
      "password":"${md5.convert(utf8.encode(password)).toString()}",
      "app_key":"$APP_KEY",
    };

    final response = await http.post(
      Uri.parse(url),
      headers: <String, String>{
        'Content-Type': 'application/json; charset=UTF-8',
      },
      body: jsonEncode(jsonData),
    );

    print("response:  ${response.body}");
    final responseData = json.decode(response.body);
    print(responseData['ret']);
    if (responseData['ret'] != 200) {
      throw HttpException(responseData['msg']);
    }
    
    notifyListeners();    // 注冊成功，通知UI更新
  } catch (error) {
    throw (error);
  }
}           

管理已注冊的使用者

點選“雲存儲” -> “會員管理”，可以看到剛剛注冊成功的使用者

你可以對已注冊的使用者進行各種操作：

登入功能

同樣的方式搜尋登入到接口，檢視接口說明，并依照說明實作用戶端的請求。

用戶端請求接口：

Future<void> login(String account, String password) async {
    var url = BASE_URL + '/App/User/Login';
    try {

      Map<String, dynamic> jsonData = {
        "username":"$account",
        "password":"${md5.convert(utf8.encode(password)).toString()}",
        "app_key":"$APP_KEY",
      };

      final response = await http.post(
        Uri.parse(url),
        headers: <String, String>{
          'Content-Type': 'application/json; charset=UTF-8',
        },
        body: jsonEncode(jsonData),
      );

      final responseData = json.decode(response.body);

      if (responseData['ret'] != 200) {
        throw HttpException(responseData['msg']);
      }

      print('response: $responseData');

      _token = responseData['data']['token'];
      _uuid = responseData['data']['uuid'];

      notifyListeners();
      final prefs = await SharedPreferences.getInstance();
      final userData = json.encode({
        'token': _token,
        'user': jsonEncode(_user),
      });
      print('login success!!');
      prefs.setString('userData', userData);
      //print(userData);
    } catch (error) {
      throw (error);
    }
  }           

自此，我們已經實作了APP的登入注冊和賬号管理了。在後續的篇章，我将帶你建構背景業務資料，打造完整的APP開發，歡迎繼續關注！

#移動網際網路##小程式##程式員##低代碼##接口#