Architect trong project Flutter dùng BLOC pattern P1

Tram Ho

Hôm nay , mình sẽ làm một demo nhỏ về architect của project Flutter , bạn có thể maintain, test một cách dễ dàng.

1. Tại sạo lại cần architect trong project?

Khi tôi mới bước chân vào nghề lập trình, tôi chỉ quan tâm đến output và hiệu quả của chương trình. Tôi chưa bao giờ cấu trúc chương trình hoặc dự án mà tôi viết ra.Khi gặp càng nhiều dự án, các dự án cần phát triển thêm tính năng mới, sửa tính năng , thì tôi thường mất thời gian hơn để sửa và đôi khi còn thêm 1 số bug cho dự án. Nguyên nhân chính của tất cả các vấn đề này là tôi chưa tuân thủ theo 1 mô hình architect nào . Hôm nay, tôi sẽ băt đầu một project để giới thiệu về architect trong Flutter.

2 Mục tiêu

Tôi sẽ xây dựng 1 project có 1 screen dạng girl list của các item. Các item đấy sẽ được lấy từ server và lấy từ trạng Movie.

3. Sơ đồ architect


Diagram show cách lấy data tới Data layer và ngược lại. Bloc sẽ không bao giờ tham chiếu tới Widget in UI Screen. Màn Screen chỉ quan sát những thay đổi từ Bloc class. Mình sẽ đưa ra một số Q&A để hiểu rõ hơn về diagram:

  1. Bloc Pattern là gì?
    TL: Nó dùng quản lý state và truy cập data từ một vị trí trung tâm trong Flutter.
  2. Kiến trúc này có giống với kiến trúc nào khác không.
    TL : Có giống MVP, MVVM. Chỉ khác 1 điều là BLOC sẽ thay thế cho ViewModel trong MVVM.
  3. Dưới lớp vỏ của Bloc là cái gì ? Cái gì cốt lõi cho quản lý state trong 1 chỗ.
    TL: STREAMS or REACTIVE là 1 cách tiếp cận . Dữ liệu sẽ được chuyển từ BLOC đến UI hoặc từ UI tơi BlOC dưới dạng stream. Nếu bạn chưa nghe về stream , bạn có thể đọc bài này

Bắt đầu project về Bloc pattern.

  1. Tạo Project Flutter có tên “myProjectName”.
  2. Viết mã dưới đây vào file main.dart:

3 . Tạo file app.dart:

  1. Tạo new package với tên resources, blocs, models, ui.

  • package blocs sẽ chứa các file liên quan đến BLOC.
  • package models sẽ chứa các POJO (Plain Old Java Object) class hoặc model class của Json response get từ server.
  • package resources chứa các class repository và thực hiện call network.
  • package ui chứa list các màn hình hiển thị cho người dùng.
  1. Thêm thư viện Rxdart vào trong file pubspec.yaml

và thực hiện cài đặt bằng cách click “Pub get” nếu bạn dùng Android studio hoặc bạn gõ lệnh trong terminal (Mac) , command (Win):

  1. Chúng ta đã hoàn thành xong cho bộ khung của project. Giờ sẽ xử lý network layer , hiểu về API endpoint. Bạn thực hiện đăng nhập vào trang và thực hiện get API key từ Setttings page. Chúng ta sẽ truy cập vào url dưới đây để lấy data:

Response Data:

  1. Bây giờ hãy tạo model hoặc POJO class cho loại response này . Tạo file item_model.dart trong package models. Copy đoạn code sau :

  1. Tạo file movie_api_provider.dart trong package resources để thực hiện implement network. Copy và page đoạn code sau vào file :

Note: Bạn hãy tạo tài khoản từ trang https://www.themoviedb.org/ và lấy apikey thay cho đoạn ‘your_api_key’.

Phương thức fetchMovieList dùng để thực hiện call API.Khi cuộc gọi network hoàn tất nó sẽ trả về object Future ItemModel nếu cuộc gọi mạng thành công hoặc 1 ngoại lệ .

  1. Tiếp theo chúng ta sẽ tạo repository.dart vào trong resource . Copy và page đoạn code sau vào trong file :

Chúng ta sẽ import movie_api_provider.dart file và gọi fetchMovieList(). Repository class là điểm trung tâm mà từ đó dữ liệu sẽ chuyển đến BLOC.

  1. Bây giờ đến 1 phần phức tạp , implement bloc logic. Hãy tạo movies_bloc.dart trong package blocs. Bạn hãy copy và page vào file movies_bloc.dart mình sẽ giải thích chi tiết :

Inside the MoviesBloc class, we are creating the Repository class object which will be used to access the fetchAllMovies()

Trong class MoviesBloc, chúng ta tạo object class Repository dùng để truy cập fetchAllMovies() bằng cách tạo tạo object PublishSubject có trách nhiệm thêm dữ liệu mà nó nhận được từ server dưới dạng đối tượng ItemModel và chuyển đến dạng màn hình UI dưới dạng luồng . Để chuyển object ItemModel dưới dạng luồng chúng ta tạo method allMovies() có kiểu trả về là Observables. Việc sử dụng RxDart giúp cho việc cập nhật dữ liều từ server sang màn hình được thực hiện 1 cách dễ dàng . Màn hình UI sẽ luôn quan sát class MoviesBloc để lắng nghe sự thay đổi và cập nhật sự thay đổi nếu có.

  1. Phần cuối của bài viết bạn hãy copy đoạn code sau vào file movie_list.dart , file này được tạo từ package UI:

Đoạn code trên tôi không sử dụng StatefulWidget, thay vào đó sẽ sử dụng StreamBuilder để thay thế việc cập nhật UI .

Sau đây là code hoàn chỉnh, các bạn tham khảo nhé: https://github.com/SAGARSURI/MyMovies .

Tài liệu tham khảo:

https://medium.com/codechai/architecting-your-flutter-project-bd04e144a8f1

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo