Hướng dẫn kết nối REST API trong Flutter

Hướng dẫn kết nối REST API trong Flutter

Rate this post

Flutter cung cấp cho ta package http để sử dụng các phương thức HTTP. Http là một thư viện dựa trên Future và sử dụng các chức năng await async. Nó cung cấp nhiều phương thức cấp cao và đơn giản hóa việc phát triển của ứng dụng di động dựa trên REST.

Các bài viết liên quan:

Khái niệm cơ bản

Package http cung cấp một lớp cấp độ cao và http cho các yêu cầu web.

Lớp http cung cấp các chức năng thực hiện tất cả loại của yêu cầu HTTP.

Hàm http nhận url và một vài thông tin bổ sung thông qua Map trong Dart (post dữ liệu, header bổ sung, v.v…). Nó gửi yêu cầu đến server và thu thập các dữ liệu trả về thông qua async/await. Ví dụ như code dưới đây sẽ đọc dữ liệu từ một url cụ thể và in nó vào console:

Hướng dẫn kết nối REST API trong Flutter

Những hàm chính sẽ liệt kê dưới đây:

  • read – gửi một request  đến url cụ thể thông qua hàm GET và trả về response là Future<String>.
  • get – gửi một request cụ thể thông qua hàm GET và trả về response là Future<Response> Response là một lớp giữ các thông tin về phản hồi.
  • post – gửi một request cụ thể thông qua hàm POST bằng cách gửi các dữ liệu được cung cấp và trả về một response là Future<Response>.
  • put – gửi một request cụ thể thông qua hàm PUT và trả về một response là Future<Response>
  • head – gửi một request cụ thể thông qua hàm HEAD và trả về một response là Future<Response>
  • delete – gửi một request cụ thể thông qua hàm DELETE và trả về một response là Future<Response>

Ngoài ra package http còn cung cấp một lớp tiêu chuẩn về HTTP phía client. Lớp client hỗ trợ kết nối rất bền vững, nó sẽ rất có ích khi có quá nhiều request đến một máy chủ nào đó. Ngoài ra thì nó rất giống với lớp http, code mẫu như sau:

Hướng dẫn kết nối REST API trong Flutter

Truy cập dịch vụ API sản phẩm

Giờ ta cùng nhau tạo một ứng dụng đơn giản để lấy dữ liệu sản phẩm từ một web server và hiển thị sản phẩm đó trên ListView.

Tạo ứng dụng flutter với tên là rest_api_flutter

Copy và paste thư mục từ project cũ vào assets trong project mới và chỉnh file pubspec.yaml như sau

Hướng dẫn kết nối REST API trong Flutter

Copy và paste tất cả code từ main.dart của project bài trước vào main.dart project mới này.

Thêm package http vào trong pubspec.yaml như sau:

Hướng dẫn kết nối REST API trong Flutter

Sau khi Ctrl + S Flutter sẽ tự động kiểm tra và cài package cho chúng ta

Thêm các package http vào trong file main.dart

Hướng dẫn kết nối REST API trong Flutter

Giờ ta cần tạo một server ảo để hiểu được cách vận hành của http trong flutter, Ở đây tác giả sử dụng WAMP để tạo server localhost, ta vào directory www của wamp và tạo thư mục tên là JSONWebServer (chuột trái vào icon wamp ở góc phải màn hình, sau đó chọn www directory), trong thư mục đó ta tạo 1 file products.json như sau:

Hướng dẫn kết nối REST API trong Flutter

Sau đó ta vào http://localhost/JSONWebServer/products.json để kiểm tra thử server có hoạt động không, nếu có hoạt động thì nó sẽ hiển thị như sau:

Hướng dẫn kết nối REST API trong Flutter

Tạo file Product.dart trong thư mục lib và chuyển class Product vào trong đó

Viết hàm dựng cho class Projduct là Product.fromMap để chuyển đổi dữ liệu dạng Map sang đối tượng Product.

Hướng dẫn kết nối REST API trong Flutter

Full code của Product.dart

Hướng dẫn kết nối REST API trong Flutter

Tạo 2 hàm mới là parseProducts và fetchProducts trong main.dart để lấy và load thông tin sản phẩm từ web server vào trong đối tượng List<Product> (tùy vào từng máy mà có ip khác nhau, bạn có thể dùng cmd, nhập ipconfig và để ý phần Ethernet để biết được ip của server, của tác giả là 192.168.1.21)

Hướng dẫn kết nối REST API trong Flutter

Future được sử dụng để lazy load thông tin về sản phẩm. Khái niệm về lazy load là dùng để trì hoãn việc thực thi code cho đến khi cần thiết.

http.get được sử dụng để lấy dữ liệu từ internet.

json.decode được sử dụng để giải mã dữ liệu JSON vào đối tượng Map. Một khi dữ liệu JSON đã được giải mã thì nó sẽ được chuyển đổi sang List<Product> bằng cách sử dụng hàm fromMap của lớp Product.

Trong class MyApp, tạo biến mới là Future<Product> xong truyền vào cho hàm dựng

Hướng dẫn kết nối REST API trong Flutter

Trong lớp MyHomePage, thêm một biến mới là Future<Product> và truyền nó vào hàm dựng, ngoài ra xóa biến items và các hàm liên quan. Thay thế biến products trong hàm dựng. Nó sẽ cho phép lấy các product từ internet chỉ 1 lần khi ứng dụng chạy.

Hướng dẫn kết nối REST API trong Flutter

Thay đổi home option (MyHomePage) trong hàm dựng của widget MyApp để liên kết với các thay đổi ở trên

Hướng dẫn kết nối REST API trong Flutter

Thay đổi hàm main và truyền vào tham số Future<Product>

Hướng dẫn kết nối REST API trong Flutter

Tạo một widget mới là ProductBoxList để xây dựng 1 danh sách product trong home page.

Hướng dẫn kết nối REST API trong Flutter

Lưu ý là ta đã sử dụng các khái niệm tương tự như trong ứng dụng trước là liệt kê các sản phẩm ra trên dang danh sách

cuối cùng ta chỉnh sửa hàm dựng của widget MyHomePage để lấy thông tin product bằng cách sử dụng Future thay vì gọi hàm thông thường

Hướng dẫn kết nối REST API trong Flutter

Lưu ý rằng widget FutureBuilder được dùng để render widget, FutureBuilder sẽ cố gắng lấy dữ liệu từ thuộc tính future của nó. Nếu thuộc tính future trả về dữ liệu, nó sẽ render widget sử dụng ProductBoxList, ngoài ra thì nó sẽ báo lỗi

Ta chạy ứng dụng và kết quả như sau:

Hướng dẫn kết nối REST API trong Flutter

Leave a Reply