REST API trong lập trình Flutter – Hướng dẫn chi tiết

Trong bài viết này, Báo Flutter sẽ hướng dẫn các bạn chi tiết về các kỹ thuật làm việc với REST API trong lập trình Flutter.

REST API là gì
API (Application Programming Interface) : Hiểu đơn giản là một cách thức để một ứng dụng hay một thành phần sẽ tương tác với một ứng dụng hay thành phần khác …Kiểu dữ liệu mà API trả về có thể là file JSON hoặc XML.
REST (REpresentational State Transfer) là một dạng chuyển đổi cấu trúc dữ liệu, một kiểu kiến trúc để viết API. REST gửi một yêu cầu HTTP như GET, POST, DELETE, vv đến một URL để xử lý dữ liệu.
RESTful API là một tiêu chuẩn dùng trong việc thiết kế các API cho các ứng dụng web để quản lý các resource. RESTful là một trong những kiểu thiết kế API được sử dụng phổ biến ngày nay để cho các ứng dụng (web, mobile…) khác nhau giao tiếp với nhau.
Để demo cho bài viết này, Báo Flutter sẽ dùng một link REST API bên dưới:

Nội dung trả về từ link API này là một list thông tin các user.

LẬP TRÌNH FLUTTER VỚI REST API
Đầu tiên, bạn cần tạo ra một Flutter project mới.

Để làm việc với REST API, bạn cần một thư viện để làm việc với các đường link API. Có 2 thư viện chính mà bạn có thể sử dụng đó là :

  • http
  • dio

Dio thì có nhiều tính năng hơn http, tuy nhiên về hiệu năng khi làm việc với API thì 2 thư viện này như nhau. Do đó chúng ta sẽ sử dụng http cho dễ sử dụng.

Trong file pubspec.yaml, khai báo thư viện http mới nhất:

TẠO MODEL
Trong file lib của project, tạo một folder : models .
Việc tạo một model, phụ thuộc vào dữ liệu trả về, như trên đường link API :

Dữ liệu trả về là một file Json, trả về một list các User, được mô tả dưới dạng file json:

Từ đoạn json này, chúng ta sẽ tạo ra một model class để mô tả cho một đối tượng từ file json trước.
Chúng ta có thể chọn các thông tin cần lấy để thêm vào model class ví dụ :

Nếu bạn phải xử lý một model từ link API quá dài và lằng ngoằng, bạn có thể dùng tool.
Ví dụ : để tạo ra một model để biểu diễn hết thông tin từ đoạn json kia, chúng ta có thể dùng tool hoặc bạn có thể tự tạo tool để tạo Model tự động bằng việc copy toàn bộ đoạn json kia vào trong {…}và đặt vào link web : https://jsontodart.zariman.dev/ , nhập tên class và chọn Null Safety, Type Checking.
Sau đó nhấn: Generate và kết quả là một model class hiển thị ngay bên cạnh:

Tạo hàm xử lý API
Tạo folder: data_sources, trong đó tạo 2 file : api_urls.dart, api_services.dart

api_urls.dart

api_services.dart

Tạo views
Tạo file : user_list_screen.dart.
Trong phần này tôi sẽ dùng FutureBuilder để hiển thị lên UI.

Cài đặt permission cho android
Sửa file AndroidManifest.xml, trong đường dẫn : android > app > src > main .

SOURCE CODE : Link Github

Kết quả cuối cùng

Vừa rồi, Báo Flutter đã hướng dẫn các bạn về fetch data từ đường link API.
Còn thực tế, khi làm việc với API không chỉ có fetch API mà còn dùng các lệnh như: http.post , ví dụ :

Lập trình Flutter với REST API là một phần rất quan trọng trong quá trình lập trình ứng dụng Flutter. Hy vọng từ bài viết này bạn có được một kiến thức nhất định, từ đó có thể tư duy để làm việc với hầu hết các vấn đề liên quan đến API.

2 Replies to “REST API trong lập trình Flutter – Hướng dẫn chi tiết”

  1. anh cho em hỏi nếu dùng lib dio thì rest api hoạt động như thế nào , tốt hơn so với http không ạ ? em muốn học cách dùng dio với rest api thì nên dùng nguồn nào phù hợp với người mới không ạ? mong anh tư vấn ạ , em đang bối rối vấn đề này.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *