[Day14] Flutter - 怎麽串接API ( Http )

前言

Ya, 我是鱼板伯爵 http 套件可以让你串接API，你可以利用他来做HTTP请求，是一个很ㄅㄧㄤˋ的工具喔。

完整程序码

安装

dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.3

IOS & Android 设定

你需要打开IOS和Android的设定档来开启一些限制。

IOS档案

路径/ios/Runner/Info.plist。

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsLocalNetworking</key>
    <true/>
</dict>

Android档案

路径/android/app/src/main/AndroidManifest.xml。

android:usesCleartextTraffic="true"

创建一个API

在这里我使用JSON Server来当做测试的API，安装完json-server後你可以修改db.json来编辑你的API格式。

$ json-server --watch db.json

{
  "auth": [
    {
      "id": 1,
      "username": "json-server",
      "password": "asdasdlmasdmlasklmklmsad"
    }
  ]
}

建立资料模型

不管是传送还是接收都希望资料的格式是固定的，若为不固定的资料格式可能会导致APP有错误。可以利用Quicktype来生成我们的API模型(推荐新手)，又或者自己新增一个Class再用快捷键(mac: command+. |win: control+.)来生成，不过这个需要自己先定义好。

API 接口管理

第一步我们一样先创建一个API结构，要注意的是Android的模拟器接口是http://10.0.2.2:3000，IOS的接口是localhost:3000，而後面的port可以以自行修改(如果你的Local API Port是500就改500)。

/// Android calls the http://10.0.2.2:3000/auth endpoint.
///
/// IOS calls the http://localhost:3000/auth endpoint.
abstract class ApiDataSource {
  /// Create new user.
  Future<String> createUser(User body);

  /// Get user info id, username, passowrd
  Future<String> getUser(int id);

  /// Update user data
  Future<String> updateUser(int id, User body);
}

实作API

先创建一个domain(使用的API)和client(http请求)，然後再对class名称点击快捷键，生成API框架。

class UserRepository implements ApiDataSource {
  final client = http.Client();
  final String domain = "http://localhost:3000";
}

Http 常用三种请求

用这三个请求来实作创建使用者、取得使用者资料和更新使用者资料。

• POST：用於提交指定资源的实体，通常会改变服务器的状态(创建新资料)。
• GET：用於请求只应用於取得资料(取得资料)。
• PUT：用於取代指定资料请求(修改已存在资料)。

实作功能

我就以POST来做范例，首先使用client.post做POST请求，接着把使用者的资料模型转成json的格式送出，请求成功後就可以得到response，你可以得到回应的资讯，完成後就可以用按钮触发了。

  @override
  Future<String> createUser(User body) {
    return _createUser(
      Uri.parse('$domain/auth'),
      body,
    );
  }

  Future<String> _createUser(
    Uri url,
    User body,
  ) async {
    try {
      final response = await client.post(
        url,
        headers: {
          'Content-Type': 'application/json',
        },
        body: body.toJson(),
      );
      if (response.statusCode == 200) {
        return response.body;
      } else {
        return response.body;
      }
    } catch (e) {
      return e.toString();
    }
  }

TextButton(
  child: Text(
    "POST",
    style: TextStyle(fontSize: 30),
  ),
  onPressed: () {
    userRepository.createUser(
      User(
        username: "username",
        password: "password",
      ),
    );
  },
),