Author: Nam

Trong bài viết này tôi sẽ giới thiệu về retrofit trong Flutter và cách sử dụng retrofit Flutter.

Retrofit là gì ?

Trong Android, Retrofit là một HTTP client type-safe cho Android & Java, giúp dễ dàng kết nối đến một dịch vụ REST API trên web bằng cách chuyển đổi API thành Java Interface.

Theo khái niệm chung thì Retrofit là một thư viện dùng để gọi Rest API bằng cách gửi các dynamic header, parameter, print request và response theo cách bảo mật ( secured way).

Cách sử dụng Retrofit trong Flutter

Hãy tạo một project mới để sử dụng retrofit Flutter !

+ Tích hợp thư viện
Trong file : pubspec.yaml, thêm các thư viện package : retrofit, dio, logger, retrofit_generator, build_runner, json_annotation, json_serializable ; khai báo các thư viện như hình dưới :

+ Tạo các file

+ Tạo package : services, trong package tạo file : post_api_service.dart có nội dụng như bên dưới :

bạn thấy báo rất nhiều lỗi ?
Đừng quá lo lắng, chạy dòng lệnh trong mục terminal : flutter pub run build_runner build
Trong quá trình chạy bạn thấy báo lỗi : Missing “part ‘post_api_service.g.dart’;”. ?

Thêm khai báo : part ‘post_api_service.g.dart và tiếp tục chạy tiếp dòng lệnh trên : flutter pub run build_runner build
Khi đó file post_api_service.g.dart sẽ được tạo ra

Nói thêm về: Chuyển đổi JSON format sang Dart file

Có hai cách dùng đển chuyển Json format sang dart file. Những source trong mục này , chỉ để dùng diễn giải không sử dụng trong project.

Cách 1: Manual Serialization

Đây là các mà chúng ta vẫn hay làm khi sử dụng http thuần với bloc, sử dụng các hàm ví dụ như fromJson, dưới đây là ví dụ :

Tạo file post.dart , có nội dung như sau :

Cách 2 – Automatic Serialization

Trước khi để sử dụng cách này thì bạn cần khai báo các thư viện như json_annotation và json_serializable như ở trên.

Bạn thấy một số lỗi ?
Tiếp tuc chạy dòng lệnh trong mục terminal : flutter pub run build_runner build
Trong quá trình chạy bạn thấy báo lỗi : Missing “part ‘post.g.dart’;”.

Thêm khai báo đó: part ‘post.g.dart’; và tiếp tục chạy tiếp dòng lệnh trên : flutter pub run build_runner build

Nhận xét : Phương pháp automatic serialization dùng cho các dự án trung bình và lớn

Xây dựng UI
Trong file main.dart, bạn có thể dùng đoạn code bên dưới :

Dưới đây là kết quả :

Kết luận : Retrofit là khái niệm ban đầu được dùng cho Android, tuy nhiên khi dùng trên Flutter framework, nó cũng phát huy tác dụng trên iOS. Sử dụng retrofit có rất nhiều ưu việt, nó phù hợp với các dự án trung bình và lớn bởi tính tiện dụng của nó.

Cảm ơn các bạn đã đọc bài viết về Retrofit Flutter của tôi !

Lỗi (Error)
Lỗi là vấn đề khá là nghiêm trọng và khó có thể “deal with” với nó, và không thể phục hồi. ví dụ: out of memory (đầy bộ nhớ).

Ngoại lệ (Exceptions)] nhằm truyền đạt thông tin cho người dùng về lỗi,  để lỗi có thể được giải quyết theo chương trình. Nó được dự định là  đã bắt được và nó phải chứa các trường dữ liệu hữu ích.

Khi đang chạy chương trình, đột nhiên ngừng lại và xuất hiện thông báo lỗi – đó chính là ngoại lệ ( Exceptions).

Trong quá trình xây dựng phần mềm sẽ có thể sảy ra nhiều lỗi và những ngoại lệ , điều này là không tránh khỏi. Vậy cách nào để kiểm soát và phát hiện chúng ? Ở bài viết này mình sẽ sử dụng try catch để xử lý lỗi giúp cho app không bị chết đột ngột .

Cú pháp

Try{

// Khối lệnh có nguy cơ xảy ra exception

} catch(e){

}finally{

}

Sau đây chúng ta hãy đi vào ví dụ cụ thể :

Ở ví dụ trên ta có thể thấy đã xảy ra lỗi nhưng bản thân mỗi lập trình viên không thể vì lỗi mà làm chết app ảnh hưởng đến trải nhiệm người dùng . Trong thực tế app có thể chết do mạng internet hay filenotfound hay nhiều  vô vàn lý do khác . Các lập trình viên phải handle các lỗi nhiều nhất có thể để ứng dụng luôn luôn “sống” .

finally : try-catch-finally hay try – finally , khối lệnh trong finally sẽ được thực hiện bất chấp có sảy ra lỗi trong khối try hay không.

Try-on-catch : để bắt được loại ngoại lệ cụ thể. Ví dụ:

Khi bắt được chính xác loại ngoại lệ ở trước thì khối lệnh trong catch sẽ không được thực thi.

Tóm lại bài viết này nhằm mục đích gới thiệu về try catch finaly một cách cơ bản , hi vọng giúp ích được cho bạn

Với những bạn nào đã từng sử dụng Kotlin khi lập trình Android và có tìm hiểu sâu một chút, chắc hẳn các bạn đã biết và cũng sẽ rất ấn tượng với extension của Kotlin. Mình cũng đã từng sử dụng và thấy nó giúp ích rất nhiều trong quá trình code bởi chúng ta có thể viết thêm các phương thức cho các class mà không phải sửa trực tiếp vào class. Việc này rất hữu dụng trong trường hợp bạn muốn viết thêm vào một class nào đó nhưng class đó lại nằm trong một thư viện nào đó hoặc thậm chí là class trong core của Kotlin như String, List,… Một ví dụ (viết bằng dart để cho mọi người dễ nắm bắt):

Theo cách truyền thống :

Giả sử bài toán cho một list số nguyên mà tìm trung bình cộng :

Áp dụng extension :

Cú pháp ở đây là: extension <TênCủaExtension> on <ClassMuốnExtend> {}.

Trong đó tên của extension là do bạn chọn, miễn là không trùng với các class đã có sẵn để tránh nhầm lẫn khi sử dụng.

Nhiều bạn sẽ thắc mắc, this ở đây là gì, tại sao lại có this này nhỉ? Thì this ở đây chính là instance của class String mà chúng ta dùng function này (ở đây là [1,2,3,4,5]). Khi viết function trong extension, chúng ta có thể access trực tiếp vào các member variable của class mà chúng ta đang extend, ví dụ như String thì chúng ta sẽ có thể dùng this.length, this.substring(), this.split() (có thể bỏ chữ this nếu như không bị trùng tên với params truyền vào trong function) , list thì có thể list.leght , list. , list.isEmpty

Cá nhân mình thì hiểu extention dùng để custom các phương thức mà mình muốn khi không có ở mặc định giúp code gọn gàng .

Một số extension mà mình áp dụng extention

Xử lý onclick liên tục

Mình đã giới thiệu qua về extension trong Dart và Flutter. Đây là một tính năng rất hay mà mình muốn mọi người nên biết và sử dụng, hi vọng các bạn thấy hữu ích và áp dụng tính năng này một cách hiệu quả

Trong hầu hết các app hiện nay việc lấy dữ liệu từ server hay data base là việc hết sức bình thường để app của bạn có thể cập nhập các data mới nhất cũng như tương tác của người dùng . Trong bài viết này mình sẽ call data từ server một cách đơn giản nhất để những ai chưa biết có thể call được 1 cách dễ dàng . flutter có hỗ trợ nhiều thư viện nhưng ở bài viết này mình sẽ sử dụng packet http . http là một thư viện Future-based sử dụng tính năng await và async. Nó cung cấp phương thức cấp cao và đơn giản để phát triển REST trên ứng dụng di động. 

Một vài phương thức chính :

– read : gởi yêu cầu lên sever thông qua phương thức GET và trả về  Future<String>

– get : gởi yêu cầu lên sever thông qua phương thức GET và trả về Future<Response>. Response là lớp giữ lại các thông tin phản hồi 

– post : gởi yêu cầu lên sever thông qua phương thức POST  bằng việc đưa giá trị lên sever và phản hồi Future<Response>

– put : gởi yêu cầu lên sever thông qua phương thức PUT và trả về phản hồi như Future<Response>

– head : gởi yêu cầu lên sever thông qua phương thức HEAD và trả về phản hồi như Future<Response>

– delete : gởi yêu cầu lên sever thông qua phương thức DELETE và trả về phản hồi như Future<Response> 

Ở bài viết này sẽ chỉ tập trung vào phương thức GET và hiển thị data dưới dangj list view cơ bản .

Step 1 : Bạn cần add thư viện http ở pub.dev vào file pubspec.yaml

https://pub.dev/packages/http

Step2 : Cần 1 link apidemo mà mình lấy link này

https://jsonplaceholder.typicode.com/posts

Step3 :

Tạo file mới post_model.dart trong lớp model 

Viết factory constructor trong lớp model , Post.fromMap dùng để chuyển đổi dữ liệu map trong đối tượng Post . Thông thường, tệp JSON sẽ được chuyển đổi bên trong đối tượng Dart Map và sau đó chuyển đổi sang đối tượng liên qua (Post) 

Step 3 : Bây giờ ta sẽ viết 2 phương thức – parsePost và fetchPost – trong lớp chính để lấy và tải thông tin sản phẩm từ web server(máy chủ) trong List<Post>

Step 4 : Ta có thể hiển thị data lên màn hình ở main.dart

Và đây là kết quả :

Hi vọng qua bài viết này các anh em  có thể nắm được cách get data từ server một cách dễ dàng

Trong hầu hết các app hiện nay việc lấy dữ liệu từ server hay data base là việc hết sức bình thường để app của bạn có thể cập nhập các data mới nhất cũng như tương tác của người dùng . Trong bài viết này mình sẽ call data từ server một cách đơn giản nhất để những ai chưa biết có thể call được 1 cách dễ dàng . flutter có hỗ trợ nhiều thư viện nhưng ở bài viết này mình sẽ sử dụng packet http . http là một thư viện Future-based sử dụng tính năng await và async. Nó cung cấp phương thức cấp cao và đơn giản để phát triển REST trên ứng dụng di động. 

Một vài phương thức chính :

– read : gởi yêu cầu lên sever thông qua phương thức GET và trả về  Future<String>

– get : gởi yêu cầu lên sever thông qua phương thức GET và trả về Future<Response>. Response là lớp giữ lại các thông tin phản hồi 

– post : gởi yêu cầu lên sever thông qua phương thức POST  bằng việc đưa giá trị lên sever và phản hồi Future<Response>

– put : gởi yêu cầu lên sever thông qua phương thức PUT và trả về phản hồi như Future<Response>

– head : gởi yêu cầu lên sever thông qua phương thức HEAD và trả về phản hồi như Future<Response>

– delete : gởi yêu cầu lên sever thông qua phương thức DELETE và trả về phản hồi như Future<Response>