TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN
KHOA CÔNG NGHỆ PHẦN MỀM

BÁO CÁO THỰC TẬP

LẬP TRÌNH ỨNG DỤNG DI ĐỢNG
VỚI FLUTTER

Cơng ty thực tập

: Công ty TNHH Nông Nghiệp
Công Nghệ Cao

Người phụ trách

: Anh Nguyễn Thành Công

Thực tập sinh

: Châu Quốc Thắng 18521385

TP. Hồ Chí Minh, tháng 12 năm 2021

Người hướng dẫn: Nguyễn Thành Công

Sinh viên thực tập: Châu Quốc Thắng


LỜI MỞ ĐẦU

Thời đại công nghệ số 4.0, cùng với sự phát triển như vũ bão của Internet, xu hướng kinh

doanh trực tuyến hay bán hàng online đã đem lại hiệu quả kinh tế cho rất nhiều ngành nghề kinh
doanh tại Việt Nam.
Những năm gần đây, “thương mại điện tử” (TMĐT) đã khơng cịn là khái niệm xa lạ
trong xã hội hay một lĩnh vực mới mẻ tại nước ta. Có thể coi năm 2020, đại dịch COVID-19 đã
mang đến nhiều biến động đối với nền kinh tế và sự tăng trưởng bứt phá của TMĐT đã góp
phần đưa Việt Nam trở thành một trong những thị trường tiềm năng của thế giới.
Với thế mạnh là dân số trẻ cũng như lượng người dùng smartphone chiếm tỷ trọng lớn,
lượng người giao dịch thương mại điện tử trên smartphone nhiều, thị trường TMĐT tại Việt
Nam hiện tăng trưởng khá nhanh cùng với lượng doanh thu khủng.
Sau ba năm học tập trên trường, do mong ḿn có thêm kinh nghiệm thực tế, cũng như
muốn được tham gia phát triển ứng dụng di động, em có dự định sẽ đi thực tập. Vì vậy, em
quyết định thực tập tại công ty TNHH Nông Nghiệp Công Nghệ Cao để mở rộng kiến thức về
công nghệ cũng như tích lũy kinh nghiệm làm việc ở môi trường công ty.

Người hướng dẫn: Nguyễn Thành Công

Sinh viên thực tập: Châu Quốc Thắng


LỜI CẢM ƠN

Trân trọng gửi lời cảm ơn Công ty TNHH Nông Nghiệp Công Nghệ Cao đã tạo điều kiện
cho em có cơ hội được thực tập tại cơng ty.
Chỉ trong một thời gian ngắn, nhưng nhờ sự chỉ dẫn nhiệt tình của các anh chị trong
team, em đã tiếp thu được những kiến thức quan trọng trong việc xây dựng ứng dụng di động
bằng framework Flutter, cũng như các kiến thức về nghiệp vụ thương mại điện tử.
Đặc biệt cảm ơn anh Công và anh Chí đã bỏ thời gian, và công sức để hướng dẫn em
những kiến thức chuyên sâu trong Flutter và GraphQL.
Cũng xin cảm ơn thầy cơ trong khoa Cơng nghệ phần mềm đã nhiệt tình hỗ trợ, tạo điều
kiện em làm bài báo cáo này.

Châu Quốc Thắng
Tp. HCM, ngày 24 tháng 12 năm 2021

Người hướng dẫn: Nguyễn Thành Công

Sinh viên thực tập: Châu Quốc Thắng


NHẬN XÉT CỦA KHOA

..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................

Người hướng dẫn: Nguyễn Thành Công


Sinh viên thực tập: Châu Quốc Thắng


MỤC LỤC
Chương 1: Giới thiệu công ty thực tập ....................................................................................................... 6
1.Giới thiệu công ty ................................................................................................................................ 6
2.Sản phẩm của công ty .......................................................................................................................... 6
Chương 2: Nội dung thực tập ..................................................................................................................... 7
1.Tìm hiểu công ty và các kỹ năng cơ bản trong công ty ....................................................................... 7
2.Nghiên cứu kỹ thuật ............................................................................................................................ 7
2.1.Các công cụ làm việc.................................................................................................................... 7
2.2.Lập trình cross-platform với framework Flutter .......................................................................... 7
2.3.Sử dụng thư viện Getx để quản lí state......................................................................................... 8
2.4.Tìm hiểu lý thuyết GraphQL ........................................................................................................ 9
2.5.Tìm hiểu mơ hình MVVM ......................................................................................................... 10
2.6.Tìm hiểu FCM ............................................................................................................................ 10
3.Thực hiện project ............................................................................................................................... 11
4.Lịch làm việc ..................................................................................................................................... 11
Chương 3: Chi tiết về project ................................................................................................................... 13
1.Giới thiệu về ứng dụng ...................................................................................................................... 13
2.Giao diện ứng dụng ........................................................................................................................... 14

Người hướng dẫn: Nguyễn Thành Công

Sinh viên thực tập: Châu Quốc Thắng


Chương 1: Giới thiệu công ty thực tập
1.Giới thiệu công ty

Công ty TNHH Nông Nghiệp Công Nghệ Cao (CNC) chuyên phân phối sỉ & lẻ các
sản phẩm về cây trồng như th́c bảo vệ thực vật, phân bón, xử lí đất, xử lí nước và
phịng nấm bệnh. Đới tượng khách hàng chủ yếu là các người chơi cây cảnh, hoặc
những người trồng rau tại gia.

2.Sản phẩm của công ty
“Bác sĩ cây xanh” (BSCX) là nền tảng thương mại điện tử với mơ hình B2C chun
bán các sản phẩm của cơng ty, cho phép người dùng xem, tìm kiếm sản phẩm và đặt
hàng, thanh toán qua ví điện tử, nền tảng còn đưa ra những bài đăng giới thiệu về các
sản phẩm, cũng như về chủ đề cây trồng được viết bởi đội ngũ content writer. Ngoài
ra nền tảng này còn cung cấp cho người dùng các mẹo trồng cây, cách phát hiện các
dấu hiệu nấm bệnh trên cây và cách xử lí, hiện tại ứng dụng có dữ liệu của hơn 50
loại cây trờng phở biến.
BSCX hiện có trên nền tảng web (bacsicayxanh.vn ) và trên Andoid/iOS
(Bacsicayxanh).

Người hướng dẫn: Nguyễn Thành Công

Sinh viên thực tập: Châu Quốc Thắng


Chương 2: Nội dung thực tập
Trong đợi thực tập này, sinh viên được tiếp cận và tìm hiểu các quy trình, nội quy làm
việc trong cơng ty, các nghiệp vụ của dự án, kiến thức về framework Flutter, GraphQL cũng
như các kỹ năng mềm khác.

1.Tìm hiểu cơng ty và các kỹ năng cơ bản trong công ty
Nội dung : Giới thiệu về công ty, cách tổ chức của công ty
Được nghe người phụ trách giới thiệu về công ty, quá trình thành lập và phát triển
(như đã nhắc đến ở trên), quy trình làm việc từ cao x́ng thấp, cách thức tổ chức của

công ty .
Ngoài ra, thực tập sinh còn được giới thiệu về cách thức làm việc trong công ty
như thời gian đi làm, các quy định cần phải tuân thủ, cách sử dụng email trong công
việc…
Kết quả : Hiểu thêm về cơng ty CNC, q trình thành lập và phát triển. Có thêm các kỹ
năng về việc sử dụng email trong cơng việc, làm việc có kế hoạch, có kỷ luật, có trách
nhiệm hơn.

2.Nghiên cứu kỹ thuật
2.1.Các cơng cụ làm việc
Tìm hiểu về các cơng cụ sẽ được sử dụng trong quá trình làm việc. Trong thời gian
này, người hướng dẫn đã hướng dẫn thực tập sinh tìm hiểu về các cơng cụ sẽ giúp ích
cho trong công việc sau này. Một số phần mềm, công cụ trong sớ đó như:
Android Studio: IDE hỗ trợ phát triển các ứng dụng di động.
GitLab: Hệ thống quản lí mã nguồn của dự án
Postman: Công cụ cho phép gọi và tương tác với các REST API
Thực hiện : Thực hành sử dụng các phần mềm đã nêu trên.
Kết quả : Sử dụng hiệu quả các phần mềm và công cụ đã nêu trên
2.2.Lập trình cross-platform với framework Flutter
Có rất nhiều framework hỗ trợ phát triển một ứng dụng mobile. Android cung cấp
một framework cơ bản dựa trên ngôn ngữ lập trình Java hoặc Kotlin cịn iOS thì cung
cấp framework dựa trên Objective-C / Swift

Người hướng dẫn: Nguyễn Thành Công

Sinh viên thực tập: Châu Quốc Thắng


Tuy nhiên hầu hết các ứng dụng hiện nay, đều hỗ trợ cả 2 nền tảng Android và iOS,
do đó cùng lúc phát triển 2 dự án khác nhau với 2 framework khác nhau là một công

việc phức tạp và lãng phí thời gian cơng sức. Do đó người ta đã phát triển các
framework lập trình đa nền tảng để giải quyết vấn đề này. Một framework rất phổ
biến hiện nay là React Native được phát triển bới Facebook đang được sử dụng rất
rộng rãi. Tuy nhiên React Native vẫn thông qua các API của các framework gốc như
Android hay iOS do đó bị hạn chế và tớc độ kém.
Như một sự phát triển của tương lai, Flutter được phát triển bới chính Google, đơn vị
sở hữu Android như một đới trọng trực tiếp với React Native. Thay vì gọi các API
của framework gốc, Flutter tạo ra giao diện trực tiếp từ API của hệ điều hành. Nhờ đó
ứng dụng sẽ chạy nhanh hơn, mượt mà hơn và đẹp hơn.
Flutter cung cấp rất nhiều widgets (UI) là các thành phần đồ hoạ được thiết kế riêng.
Những đối tượng đồ hoạ này được tối ưu phù hợp với môi trường mobile và dễ dàng
trong việc thiết kế như HTML.
Cụ thể, ứng dụng Flutter sẽ sử dụng các widget riêng. Flutter widgets cung cấp các
animations (hiệu ứng) và gestures (thao tác) riêng. Ứng dụng được phát triển dựa trên
logic của reactive programming. Mỗi Widget sẽ có rất nhiều trạng thái. Bằng cách
thay đổi trạng thái của widget, Flutter sẽ tự động (reactive programming) so sánh
trạng thái của widget (cũ và mới) để tạo ra những thay đởi cần thiết thay vì khởi tạo
lại cả đới tượng.
Thực hiện : Ơn tập các lý thuyết về framework Flutter
Kết quả : Nắm rõ lý thuyết framework Flutter
2.3.Sử dụng thư viện Getx để quản lí state
Theo Flutter, State là những thơng tin có thể được đọc một cách đờng bộ khi Widget
được xây dựng và có thể thay đởi trong śt vịng đời của Widget. Đới tượng State
được tạo ra bởi Flutter framework. Để thay đổi Widget, bạn cần cập nhật trạng thái
của đối tượng bằng hàm setState(), hàm này nằm trong các Stateful Widget. Hàm
setState() cài đặt thuộc tính của đối tượng State và cập nhật giao diện người dùng.
Mặc dù Flutter đã cung cấp các phương thức và widget cho việc quản lí state
(InheritedWidget) nhưng đới với một dự án lớn thì việc áp dụng cách quản lí state
này rất rắc rối và phức tạp, code sẽ có nhiều boilerplate. Vì vậy để giải quyết việc
này, cộng đồng sử dụng Flutter đã cho ra đời nhiều thư viện quản lí state khác nhau

như Provider, BloC, Riverpod, nhưng thư viện phổ biến và dễ sử dụng nhất là Getx.
Ngoài khả năng quản lí state, Getx còn cung cấp các API khác cho việc quản lí route
(navigation), quản lí dependency. Sử dụng Observable design pattern, Getx giúp
Người hướng dẫn: Nguyễn Thành Công

Sinh viên thực tập: Châu Quốc Thắng


Flutter chạy nhanh hơn, lắng nghe các thay đổi giá trị của Widget và chỉ rebuild lại
những widget đó.
Thực hiện : Đọc document của thư viện Getx, đặt câu hỏi với người hướng dẫn
Kết quả : Xây dựng một ứng dụng demo sử dụng Getx

2.4.Tìm hiểu lý thuyết GraphQL
-

Khái niệm cơ bản về GraphQL:

GraphQL là ngôn ngữ thao tác và truy vấn dữ liệu nguồn mở cho API, cung cấp cho
client 1 cách thức dễ dàng để request chính xác những gì họ cần, giúp việc phát triển
API dễ dàng hơn theo thời gian. GraphQL được Facebook phát triển nội bộ vào năm
2012 trước khi phát hành công khai vào năm 2015.
GraphQL bao gồm 3 điểm đặc trưng bao gồm:
+ Cho phép client xác định chính xác những dữ liệu gì họ cần
+ GraphQL làm cho việc tởng hợp dữ liệu từ nhiều nguồn dễ dàng hơn
+ Sử dụng một type system để khai báo dữ liệu.
GraphQL đã sở hữu riêng một hệ thống cho nhu cầu xác định các schema của API
nào đó. Khi đó, toàn bộ type của hệ thống khi được liệt kê trong một API nhất định
thì sẽ được viết cụ thể trong các schema và sử dụng GraphQL Schema Definition
Language để thực hiện tất cả hoạt động và thao tác cần cho ứng dụng.

Schema được xem như một bản giao dịch giữa client và server để từ đó mà GraphQL
có thể xác định được client rồi truy cập thông tin, dữ liệu. Sau khi đã thực hiện xong
team frontend có thể tiến hành mock data rời kiểm tra kỹ lưỡng các component.
Từ đó, team back-end cũng chuẩn bị được những công việc và hoạt động cần thiết
cho server. Đây là một trong những tính năng hữu ích của GraphQL với hệ thống dữ
liệu. Nhờ vậy, mà quá trình chạy các ứng dụng sẽ hiệu quả và nhanh chóng hơn.
Thực hiện : Đọc document của GraphQL và nắm rõ lý thuyết
Kết quả : Viết được các câu query để lấy dữ liệu dựa theo schema của dự án.

Người hướng dẫn: Nguyễn Thành Công

Sinh viên thực tập: Châu Quốc Thắng


2.5.Tìm hiểu mơ hình MVVM
Model - View - ViewModel (MVVM) là mẫu kiến trúc phần mềm đã được nhiều lập
trình viên sử dụng, nó khắc phục tất cả các nhược điểm của các mẫu thiết kế MVP và
MVC. MVVM đề xuất tách logic trình bày dữ liệu (View hoặc UI) khỏi phần logic
nghiệp vụ cốt lõi của ứng dụng. Kiến trúc này thường được sử dụng phở biến trong
lập trình Android, năm 2017 Google đã đưa ra các Architecture Components dựa trên
kiến trúc MVVM nhằm giúp việc xây và bảo trì dự án dễ dàng hơn.
View là thành phần duy nhất mà người dùng có thể tương tác được trong chương
trình, nó chính là thành phần mơ tả dữ liệu. Trong lập trình android, View là một
activity, fragment, hay một custom view... Trong Flutter, nó là các widget lớn ví dụ
như Scaffold.
ViewModel là một abstraction của View. Nó sẽ lấy dữ liệu từ tầng Model, xử lý UI
logic sau đó hiển thị data có liên quan tới view. ViewModel sẽ khơng có bất kỳ
behavior nào để tương tác với View. Như vậy để nhận biết khi nào cần hiển thị dữ
liệu, View sẽ đăng ký nhận notification từ ViewModel.
Model sẽ chứa toàn bộ business logic, mix giữa các luồng dữ liệu (giữa local data và

remote data) trước khi dữ liệu đó được hiển thị cho client. Model cịn chứa các object
và các thành phần dữ liệu.

Thực hiện : Đọc lý thuyết MVVM và áp dụng vào ứng dụng demo
Kết quả: Refactor lại source code ứng dụng theo kiến trúc MVVM
2.6.Tìm hiểu FCM
Firebase Cloud Messaging (FCM) là giải pháp tin nhắn đa nền tảng cho phép phân
phối tin nhắn (notification) tới các client. Những tính năng chính của FCM bao gồm:
+ Gửi tin nhắn thông báo được hiển thị cho người dùng. Hoặc gửi tin nhắn dữ liệu và
xác định hoàn toàn những gì xảy ra trong mã ứng dụng. Xem Các loại tin nhắn.
+ Phân phối tin nhắn tới ứng dụng theo 3 cách: tới các thiết bị đơn lẻ, tới các nhóm
thiết bị hoặc tới các thiết bị đã đăng ký theo chủ đề.
+ Gửi xác nhận, cuộc trò chuyện và các tin nhắn khác từ các thiết bị trở lại máy chủ
qua kênh kết nối đáng tin cậy và tiết kiệm pin của FCM.

Người hướng dẫn: Nguyễn Thành Công

Sinh viên thực tập: Châu Quốc Thắng


3.Thực hiện project
Sau một tháng được training và thực hành, thực tập sinh đã nắm được những kiến thực
cơ bản về Flutter, GraphQL, FCM. Trong tháng thứ hai, trainer đã hướng dẫn thực tập
sinh áp dụng những kiến thức đã học vào trong dự án thực tế.

4.Lịch làm việc
Tuần

Cơng việc
-


1

-

2

-

3

4

-

-

5
6
7

Tìm hiểu về công
ty, cách tổ chức của
công ty.
Làm quen với các
công cụ làm việc
trong công ty.
Học cách trao đổi,
làm việc qua email.
Tìm hiểu

framework Flutter
Tìm hiểu các cơng
cụ sử dụng trong dự
án
Tìm
hiểu
về
GraphQL
Thực hành luyện
tập viết các câu
query
Tìm hiểu về kiến
trúc MVVM
Tìm hiểu FCM, áp
dụng vào ứng dụng
để gửi notification
đến người dùng
Xây dựng các màn
hình của ứng dụng
theo design đã có
sẵn.
Implement chức
năng chia sẻ thông
tin sản phẩm, thông
tin sâu bệnh, cây

Người hướng dẫn: Ngũn Thành Cơng

Người hướng dẫn


Mức
độ
hồn
thành

Nhận xét của người
hướng dẫn

Anh Phan Hữu Chí

Anh Phan Hữu Chí

Anh Nguyễn
Thành Công

Anh Nguyễn
Thành Công
Anh Nguyễn
Thành Công

Anh Nguyễn
Thành Công

Anh Nguyễn
Thành Công

Sinh viên thực tập: Châu Quốc Thắng


8


trồng.
Refactor lại source Anh Nguyễn
code của ứng dụng Thành Công
theo chuẩn kiến trúc
MVVM

Người hướng dẫn: Nguyễn Thành Công

Sinh viên thực tập: Châu Quốc Thắng


Chương 3: Chi tiết về project
1.Giới thiệu về ứng dụng
Ứng dụng “Bác sĩ cây xanh” (BSCX) là nền tảng thương mại điện tử với mơ hình B2C
chun bán các sản phẩm của cơng ty, cho phép người dùng xem, tìm kiếm sản phẩm và
đặt hàng, thanh toán qua ví điện tử, ứng dụng còn đưa ra những bài đăng giới thiệu về
các sản phẩm, cũng như về chủ đề cây trồng được viết bởi đội ngũ content writer. Ngoài
ra ứng dụng cịn cung cấp cho người dùng các mẹo trờng cây, các dấu hiệu nấm bệnh
trên cây và cách xử lí, hiện tại ứng dụng có dữ liệu của hơn 50 loại cây trờng và phở
biến.
Các chức năng chính:
+ Tìm kiếm, lọc sản phẩm
+ Xem chi tiết sản phẩm và đánh giá
+ Đọc tin tức, bài viết về chủ đề cây cảnh, nơng nghiệp
+ Đặt hàng, thanh tốn qua ví điện tử
+ Scan mã QR trên bao bì sản phẩm để xem hướng dẫn sử dụng
+ Xem các mẹo trồng cây, nấm bệnh thường gặp với hơn 50 loại cây trồng khác nhau

Người hướng dẫn: Nguyễn Thành Công


Sinh viên thực tập: Châu Quốc Thắng


2.Giao diện ứng dụng
Màn hình trang chủ:

Người hướng dẫn: Nguyễn Thành Công

Sinh viên thực tập: Châu Quốc Thắng


Màn hình cửa hàng

Người hướng dẫn: Ngũn Thành Cơng

Sinh viên thực tập: Châu Quốc Thắng


Màn hình chi tiết sản phẩm

Người hướng dẫn: Nguyễn Thành Công

Sinh viên thực tập: Châu Quốc Thắng


Màn hình thơng báo người dùng

Người hướng dẫn: Ngũn Thành Công


Sinh viên thực tập: Châu Quốc Thắng


Màn hình mẹo trờng cây và chi tiết bệnh cây trồng

Người hướng dẫn: Nguyễn Thành Công

Sinh viên thực tập: Châu Quốc Thắng


TÀI LIỆU THAM KHẢO
1. Flutter: docs.flutter.dev, medium.com/flutter
2. Getx: chornthorn.github.io/getx-docs/
3. GraphQL: graphql.org/learn
4. FCM: firebase.google.com/docs/cloud-messaging
5. MVVM: developer.android.com/jetpack/guide

Người hướng dẫn: Nguyễn Thành Công

Sinh viên thực tập: Châu Quốc Thắng


TỔNG KẾT

Như vậy, chỉ trong vòng một vài tháng ngắn ngủi, em đã có thêm những kiến thức về
cơng nghệ mới cũng như quy trình và cách làm việc trong công ty.
Chân thành cảm ơn sự giúp đỡ của các anh chị trong các phòng ban khác và team IT đã
hỗ trợ em hoàn thành kì thực tập.

Người hướng dẫn: Nguyễn Thành Công


Sinh viên thực tập: Châu Quốc Thắng