REST API trong Flutter
Mục lục
REST API trong Flutter và Công dụng của nó
Có rất nhiều cách mà Flutter hiển thị thông tin trong ứng dụng của chúng ta. Ví dụ, một người có thể sử dụng dữ liệu như thông tin tĩnh và dữ liệu thông qua cơ sở dữ liệu, tệp tin và các APIs mở.
APIs là hình thức phổ biến nhất của dữ liệu có thể được tích hợp vào các ứng dụng.
Bất kỳ API nào tuân thủ các hạn chế của kiến trúc REST và cho phép giao tiếp giữa các dịch vụ Web RESTful được xác định là một REST API (thường được gọi là RESTful API). Đơn giản nói, các API là cây cầu giao tiếp giữa phần frontend và backend. Dữ liệu Backend sẽ được chia sẻ dưới dạng REST APIs, có thể được tiêu thụ ở phía frontend.
Flutter cung cấp một số gói, như http và Dio, thông qua đó người dùng có thể thực hiện các cuộc gọi API và lấy dữ liệu. Dữ liệu này có thể là JSON (phổ biến nhất), XML hoặc chuỗi đơn giản, có thể được mô hình hóa theo sở thích.
Module HTTP cung cấp các lớp cấp cao với http trong việc thực hiện các yêu cầu Web. Các chức năng này lấy URL và các nội dung khác thông qua Dart Map (siêu dữ liệu bài đăng, tiêu đề bổ sung và nhiều hơn nữa). Sau đó, nó gửi một truy vấn đến máy chủ và chờ đợi câu trả lời trước khi gửi nó trở lại.
Bắt đầu với REST API trong Flutter
Các bước liên quan đến việc sử dụng REST APIs với Flutter là:
Bước 1: Thêm phụ thuộc.
Bước 2: Lấy URL và Điểm cuối API và hiểu rõ về những API đó.
Bước 3: Gửi một yêu cầu HTTP và nhận phản hồi.
Bước 4: Ánh xạ câu trả lời vào một lớp mô hình tùy chỉnh (điều này là tùy chọn nhưng sẽ rất hữu ích cho các phản hồi lớn và phức tạp).
Bước 5: Sử dụng FutureBuilder và hiển thị thông tin trong UL.
Thêm phụ thuộc HTTP vào tệp pubspec.yaml
Thêm phụ thuộc HTTP và phiên bản mới nhất vào tài liệu pubspec.yaml như được hiển thị trong đoạn mã dưới đây.
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^1.0.2
http: ^0.13.5
Postman là công cụ tốt nhất để kiểm tra một API. Sử dụng nó để xem cách các API trả lại thông tin. Kiểm tra trang web chính thức của Postman tại www.postman.com để tìm hiểu thêm về nó.
Các Phương Pháp Cốt Lõi của Gói http
Gói http cung cấp các lớp HTTP client chuẩn tốt hơn. Các client được tự động khởi tạo mỗi khi yêu cầu được tạo và đóng khi yêu cầu hoàn thành.
Các lớp trong gói http cung cấp chức năng để phục vụ tất cả các loại yêu cầu HTTP.
Read
Sử dụng chức năng READ để tạo các yêu cầu URL cần thiết, sau đó cung cấp phản hồi dưới dạng Future<String>.
Get
Sử dụng chức năng GET để gửi một truy vấn đến URL và sau đó, trả lại phản hồi dưới dạng Future<Response>. Mỗi ‘response’ là một lớp chứa thông tin phản hồi.
Sự khác biệt giữa READ và GET nằm ở phản hồi. Read chỉ trả lại phản hồi của phần thân, trong khi GET trả lại một lớp phản hồi chứa các tiêu đề, phần thân, statusCode, contentLength, bodyBytes và nhiều thông tin khác.
Post
Gọi URL bằng cách sử dụng POST bằng cách gửi thông tin đã cung cấp và tạo phản hồi dưới dạng Future<Response>.
Cú pháp của hàm này là:
Future<Response> post (
Uri url, {
Map<String, String>? headers,
Object? body,
Encoding? encoding,
})
Ở đây, phương thức post gửi các truy vấn HTTP POST đến một liên kết cụ thể, bao gồm các tiêu đề được mô tả và nội dung của phần thân. Phần thân đặt nội dung của yêu cầu. Nó có thể là String, Map<String, String> hoặc List. Khi là String, encoding được thêm vào trước khi được sử dụng làm nội dung của yêu cầu. Phong cách nội dung tiêu chuẩn của truy vấn là text/plain.
Mỗi phần thân truy vấn được xử lý như một tập hợp byte khi phần thân là List. Khi phần thân là Map, encoding biến đổi nó thành các trường dạng form. application/x-www-form-urlencoded sẽ được sử dụng làm nội dung của các loại truy vấn. Nó cũng không thể thay đổi. Theo thiết kế, encoding sử dụng utf-8. Sử dụng Request hoặc StreamedRequest để kiểm soát chi tiết hơn qua các yêu cầu.
Put
Sử dụng hàm PUT để tạo một truy vấn đến liên kết được cung cấp, sau đó, trả lại phản hồi dưới dạng Future<Response>.
Head
Sử dụng hàm HEAD để tạo một truy vấn đến các URL được cung cấp và sau đó, gửi kết quả dưới dạng Future<Response>.
Delete
Sử dụng hàm DELETE để tạo một yêu cầu đến liên kết được cung cấp và tạo phản hồi dưới dạng Future<Response>.
Lấy Dữ Liệu Từ Máy Chủ Sử Dụng REST API
Hãy thực hiện một API đơn giản nhưng thú vị để lấy dữ liệu từ máy chủ Web bằng cách sử dụng REST API.
API Cat Fact là một API sẵn có chứa một danh sách các API sẽ trả về một số sự thật về mèo.
API đầu tiên từ tài liệu này là phương thức GET sẽ trả về một thông tin ngẫu nhiên về mèo mỗi lần nó được gọi như sau:
// GET METHOD
// https://catfact.ninja/fact
{
“fact”: “string”,
“length”: 0
}
Phản hồi này đơn giản với một thông tin kiểu chuỗi (String) và độ dài của thông tin đó là một số nguyên. Hình bên dưới cho thấy kết quả sẽ được tạo ra bởi ứng dụng.
Thực hiện các bước sau để triển khai API này trong Flutter:
Bước 1: Bắt đầu một dự án Flutter mới có tên RandomFactAPI và sau đó, thêm phụ thuộc http như được nêu trong đoạn mã bên dưới:
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^1.0.2
http: ^0.13.5
Bước 2: Tạo một tệp lớp mới tên là ApiCall.dart trong đó lớp ApiCall sẽ quản lý các cuộc gọi API.
Bước 3: Tải thành phần http dưới tên HTTP.
Bước 4: Tạo một hàm mới tên là getRandomFact(), là một Future và sẽ trả về một chuỗi thông tin.
Bước 5: Sử dụng hàm http.get() và truyền URL vào Uri.parse(). Các phản hồi ở đây sẽ có kiểu response.
Bước 6: Lấy giá trị fact từ body. Sau đó, giải mã response.body với jsonDecode() và truy cập giá trị ['fact'].
Bước 7: Trả về fact từ phương thức sau khi hiển thị nó trên console.
Mã cho tất cả các bước từ 2 trở đi được hiển thị trong đoạn mã bên dưới:
ApiCall.dartimport 'dart:convert';
import 'package:http/http.dart' as http;
class ApiCall {
Future<String?> getRandomFact() async {
var response = await http.get(Uri.parse('https://catfact.ninja/fact'));
print(response);
String result = jsonDecode(response.body)['fact'];
print(result);
return result;
}
}
Bước 8: Tạo một giao diện đơn giản. Phần thân phải là FutureBuilder, nơi sẽ gọi hàm getRandomFact() và hiển thị fact trong một Text Widget.
FactScreen.dart
import 'package:flutter/material.dart';
import 'api_call.dart';
class FactScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Random Cat Fact'),
),
body: Center(
child: FutureBuilder<String?>(
future: ApiCall().getRandomFact(),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return const CircularProgressIndicator();
}
if (snapshot.hasData) {
if (snapshot.data == null) {
return const Text('No fact found');
}
return Text(
snapshot.data!,
textAlign: TextAlign.center,
style: const TextStyle(
fontSize: 20,
fontWeight: FontWeight.w600,
color: Colors.blue,
),
);
}
return Container();
},
),
),
);
}
}
Trong main.dart, gọi FactScreen như sau:
import 'package:flutter/material.dart';
import 'fact_screen.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: FactScreen(),
);
}
}
API sẽ được gọi thành công bằng cách sử dụng hàm HTTP và fact sẽ được hiển thị trong giao diện người dùng.
Đăng Ký Người Dùng Sử Dụng REST API
Xác thực có thể được thực hiện qua REST API. Hãy xem xét một API xác thực mã nguồn mở mà người ta có thể hoàn thành việc đăng ký và đăng nhập. Các URL được cung cấp trong 2 đoạn mã bên dưới là các API mẫu được sử dụng cho mục đích kiểm tra.
Các đoạn mã bên dưới sẽ mô tả các URL API mẫu này, nhưng không có trong đoạn văn bản bạn cung cấp. Hãy chắc chắn kiểm tra lại tài liệu gốc hoặc tài liệu API liên quan để có thông tin chính xác về cách sử dụng các URL API xác thực này.
Các Bước Thực Hiện API Trong Flutter:
Để đăng ký người dùng sử dụng REST API trong Flutter, chúng ta sẽ tạo một hàm đăng ký trong lớp ApiCall, sử dụng phương thức HTTP POST để gửi thông tin đăng ký và nhận phản hồi. Dưới đây là các bước cụ thể và mã mẫu để thực hiện điều này:
Đăng Ký Người Dùng Sử Dụng REST API
Bước 1: Xây dựng một hàm mới register trong lớp ApiCall. Hàm này sẽ có các tham số là tên người dùng, email và mật khẩu.
Bước 2: Sử dụng hàm http.post() và truyền URL vào đó.
Bước 3: Kiểu nội dung nên được truyền trong phần headers.
Bước 4: Định nghĩa tên, email và mật khẩu trong phần body và mã hóa nó dưới dạng JSON sử dụng jsonEncode.
Bước 5: Nếu khóa message từ phản hồi body trả về giá trị “success”, người dùng đã được tạo thành công. Do đó, có thể trả về true. Nếu không, có lỗi và nó có thể được xử lý. Ở đây, phản hồi được in ra và trả về false.
ApiCall.dart
import 'dart:convert';
import 'package:http/http.dart' as http;
class ApiCall {
Future<bool> registerAPI(String uname, String email, String password) async {
var response = await http.post(
Uri.parse('http://restapi.adequateshop.com/api/authaccount/registration'),
headers: {'Content-Type': 'application/json'},
body: jsonEncode({'name': uname, 'email': email, 'password': password}),
);
var result = jsonDecode(response.body);
print(result);
if (result['message'] == 'success') {
return true;
}
return false;
}
}
Bước 6: Tạo một giao diện đơn giản cho màn hình đăng ký, nơi tên người dùng, email và mật khẩu được lấy từ TextField và TextEditingControllers.
Bước 7: Thêm phương thức sau vào nút đăng ký. Hàm đăng ký API được gọi là Future và dựa trên kiểu trả về boolean, điều hướng sẽ được xử lý.
register_screen.dartimport 'package:flutter/material.dart';
import 'api_call.dart';
class RegisterScreen extends StatelessWidget {
final nameController = TextEditingController();
final emailController = TextEditingController();
final passController = TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Register'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
children: [
TextField(
controller: nameController,
decoration: InputDecoration(labelText: 'Name'),
),
TextField(
controller: emailController,
decoration: InputDecoration(labelText: 'Email'),
),
TextField(
controller: passController,
decoration: InputDecoration(labelText: 'Password'),
obscureText: true,
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () async {
bool isRegistered = await ApiCall().registerAPI(
nameController.text,
emailController.text,
passController.text,
);
if (isRegistered) {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => FactScreen()),
);
} else {
log('registration failed');
}
},
child: Text('Register'),
),
],
),
),
);
}
}
Lưu ý rằng để ứng dụng hoạt động thành công, cần cung cấp tên người dùng và mật khẩu duy nhất trong quá trình đăng ký. Nếu tên người dùng và mật khẩu đã được sử dụng, ứng dụng sẽ không tiến hành.
Dữ Liệu Ví Dụ cho API Đăng Ký
{
"name": "Enter full name",
"email": "Input email",
"password": "Enter the password"
}
Phản Hồi Ví Dụ của API
{
"Id": "01",
"Code": 0,
"Message": "success",
"Data": {
"Id": 7075,
"Name": "App Developer",
"Email": "App_Developer1@gmail.com",
"Token": "3030401c-c5a5-43c8-8b73-2ab9e6f2ca22"
}
}
Nếu email đã được sử dụng, phản hồi của API sẽ như sau:
{
"Id": "01",
"Code": 1,
"Message": "Address was already stored here.",
"Data": null
}
Dữ Liệu Phản Hồi từ API Đăng Nhập
Phương Thức POST
{
"email": "Input email",
"password": "Enter the password"
}
Phản Hồi Ví Dụ của API Đăng Nhập
{
"Id": "01",
"Code": 0,
"Message": "success",
"Data": {
"Id": 7075,
"Name": "App Developer",
"Email": "App_Developer1@gmail.com",
"Token": "02b869e4-ea45-4b5c-b764-642a39e95bb7"
}
}
Nếu email hoặc mật khẩu không chính xác, phản hồi của API sẽ như sau:
{
"Id": "01",
"Code": 1,
"Message": "Mail or perhaps Passwords are inexact.",
"Data": null
}
Đầu ra của các đoạn mã bên dưới cho các trang Đăng Ký và Đăng Nhập đơn giản được hiển thị trong Hình bên dưới. Sau khi xác thực, người dùng có thể được chuyển hướng đến FactScreen.
Xác Thực Người Dùng Đã Đăng Ký Sử Dụng REST API
Dưới đây là các bước để tạo một ứng dụng để đăng nhập hoặc xác thực người dùng đã đăng ký sử dụng REST API:
Bước 1: Tạo một hàm đăng nhập với các tham số email và mật khẩu.
Bước 2: Sử dụng phương thức http.post và truyền URL vào.
Bước 3: Định nghĩa loại nội dung trong header.
Bước 4: Truyền email và mật khẩu dưới dạng Map<String, dynamic>.
Bước 5: Mã hóa thành JSON tương ứng.
Bước 6: Dựa trên thông báo phản hồi từ body là thành công hay không, trả về true hoặc false.
ApiCall.dart
import 'dart:convert';
import 'package:http/http.dart' as http;
class ApiCall {
Future<bool> loginAPI(String email, String password) async {
var response = await http.post(
Uri.parse('http://restapi.adequateshop.com/api/authaccount/login'),
headers: {'Content-Type': 'application/json'},
body: jsonEncode({'email': email, 'password': password}),
);
var result = jsonDecode(response.body);
print(result);
if (result['message'] == 'success') {
return true;
}
return false;
}
}
Bước 7: Tạo một giao diện đăng nhập đơn giản LoginScreen.
login_screen.dart
import 'package:flutter/material.dart';
import 'api_call.dart';
class LoginScreen extends StatelessWidget {
final emailController = TextEditingController();
final passController = TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Login'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
children: [
TextField(
controller: emailController,
decoration: InputDecoration(labelText: 'Email'),
),
TextField(
controller: passController,
decoration: InputDecoration(labelText: 'Password'),
obscureText: true,
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () async {
bool isLogin = await ApiCall().loginAPI(
emailController.text,
passController.text,
);
if (isLogin) {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => FactScreen()),
);
} else {
print('login failed');
}
},
child: Text('Login'),
),
],
),
),
);
}
}
Ngoài ra, trạng thái xác thực có thể được duy trì bằng cách sử dụng bộ nhớ cục bộ như SharedPreferences. Sau khi đăng nhập, lưu trạng thái đăng nhập vào một giá trị boolean và giữ nó trong SharedPreferences. Do đó, dựa trên giá trị đó, người dùng sẽ được đăng nhập trực tiếp mà không cần phải đi qua trang đăng nhập.
Sử Dụng SharedPreferences để Lưu Trạng Thái Đăng Nhập
Dưới đây là ví dụ về cách sử dụng SharedPreferences để lưu trạng thái đăng nhập:
Lưu Trạng Thái Đăng Nhập:
import 'package:shared_preferences/shared_preferences.dart';
void saveLoginState(bool isLoggedIn) async {
SharedPreferences prefs = await SharedPreferences.getInstance();
prefs.setBool('isLoggedIn', isLoggedIn);
}
Kiểm Tra Trạng Thái Đăng Nhập Khi Khởi Động Ứng Dụng:
import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
void main() async {
WidgetsFlutterBinding.ensureInitialized();
SharedPreferences prefs = await SharedPreferences.getInstance();
bool isLoggedIn = prefs.getBool('isLoggedIn') ?? false;
runApp(MyApp(isLoggedIn: isLoggedIn));
}
class MyApp extends StatelessWidget {
final bool isLoggedIn;
MyApp({required this.isLoggedIn});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: isLoggedIn ? FactScreen() : LoginScreen(),
);
}
}
Với các bước và mã mẫu trên, bạn có thể tạo một ứng dụng Flutter để đăng ký và đăng nhập người dùng sử dụng REST API, đồng thời duy trì trạng thái đăng nhập bằng cách sử dụng SharedPreferences.
