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 FLUTTER TRÊN ANDROID

Cơng ty thực tập

: Cơng ty cổ phần KiteMetric

Người phụ trách

: Phạm Hồng Hải

Thực tập sinh

: Trần Lê Bảo Châu

TP. Hồ Chí Minh, tháng 6 năm 2022

Phạm Hoàng Hải

Trần Lê Bảo Châu


1

LỜI MỞ ĐẦU

Ở thời điểm bùng phát thông tin như hiện tại, thiết bị di động gần như trở thành một phần

không thể thiếu trong cuộc sống của con người. Thiết bị di động hiện tại đang phát triển với một
tốc độ vơ cùng mạng mẽ, mà kéo theo đó là sự phát triển “chóng mặt” của các ứng dụng di
động.
Hịa chung với sự phát triển ấy, nhiều cơng ty tại Việt Nam cũng tham gia vào cuộc đua
phát triển ứng dụng trên thiết bị di động. KiteMetric cũng là một trong số ấy. Không chỉ phát
triển ứng dụng trên những framework cũ, cơng ty cịn đang đặt chân vào sử dụng một
framework mới là Flutter, một framework đang được phát triển bởi Google trong thời gian gần
đây. Do đó, em nghĩ đây là một môi trường năng động, tiếp thu cái mới, thuận lợi để giúp đỡ
em bước đầu trên con đường phát triển ứng dụng di động với Flutter.

Phạm Hoàng Hải

Trần Lê Bảo Châu


2

LỜI CẢM ƠN

Trân trọng gửi lời cảm ơn Công ty KiteMetric Việt Nam đã 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 nhóm trainer, nhóm
thực tập chúng em đã tiếp thu được những kiến thức quan trọng để có thể làm được một ứng
dụng di động bằng Flutter. Chân thành cảm ơn các anh chị trong nhóm trainer đã bỏ ra nhiều
thời gian, cơng sức để hướng dẫn chúng em hồn thành đợt thực tập này.
Đặc biệt cảm ơn thầy Phạm Hoàng Hải, đã training Flutter, Dart, boilerplate, hướng dẫn,
giúp đỡ cho chúng em tận tình cả những khó khăn trong cơng việc, đến những khó khăn việc
làm quen với mơi trường mới, … để có thể làm ra một sản phẩm trong thời gian qua.
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.

Trần Lê Bảo Châu
TP. HCM, ngày 15 tháng 06 năm 2022

Phạm Hoàng Hải

Trần Lê Bảo Châu


3

NHẬN XÉT CỦA KHOA

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


Phạm Hoàng Hải

Trần Lê Bảo Châu


4

MỤC LỤC
Chương 1: Giới thiệu công ty thực tập ................................................................................................... 5
1. Giới thiệu công ty KiteMetric....................................................................................................... 5
2. Sản phẩm của công ty ................................................................................................................... 5
Chương 2: Nội dung thực tập .................................................................................................................. 7
1. Nghiên cứu kỹ thuật ...................................................................................................................... 7
1.1.

Nghiên cứu công cụ, quy trình ............................................................................................... 7

1.2.

Nghiên cứu ngơn ngữ, template ............................................................................................. 8

2. Thực hiện project .......................................................................................................................... 9
3. Lịch làm việc .................................................................................................................................. 9
Chương 3: Chi tiết về project ................................................................................................................ 12
1. Giới thiệu về project .................................................................................................................... 12
1.1.

Yêu cầu chức năng................................................................................................................ 12


1.2.

Yêu cầu phi chức năng ......................................................................................................... 12

2. Thực hiện...................................................................................................................................... 12
3. Kế hoạch ....................................................................................................................................... 12
TÀI LIỆU THAM KHẢO ..................................................................................................................... 15

Phạm Hoàng Hải

Trần Lê Bảo Châu


5

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

1. Giới thiệu công ty KiteMetric
KiteMetric là công ty tư vấn công nghệ được thành lập từ năm 2012 với sứ mệnh hỗ
trợ các doanh nghiệp khởi nghiệp chuyển đổi ý tưởng thành sản phẩm chất lượng
cao. Công ty đã và đang hợp tác với khách hàng trên toàn thế giới để cung cấp các
sản phẩm trong nhiều lĩnh vực khác nhau bao gồm: ứng dụng học máy, trực quan
hóa dữ liệu, mạng xã hội, ứng dụng fintech, và nhiều lĩnh vực khác.
- Về dịch vụ Web & Mobile development: cung cấp dịch vụ thiết kế và xây dựng
các sản phẩm hiệu suất cao với trải nghiệm người dùng tuyệt vời trên tất cả các
nền tảng.
- Về dịch vụ Machine Learning: cung cấp dịch vụ xây dựng các ứng dụng AI để tự
động hóa các hoạt động thủ cơng, cải thiện hoạt động kinh doanh với trí thơng
minh theo hướng dữ liệu.
- Về User Experience: cung cấp dịch vụ thiết kế mơ hình thử nghiệm, thử nghiệm

các khái niệm để xác thực ý tưởng và đưa ra thiết kế UI / UX sáng tạo mang lại
tính độc đáo của bất kỳ sản phẩm nào.
- Về Technology Consulting: cung cấp dịch vụ giúp định hình ý tưởng, xác định
các rào cản kỹ thuật, đề xuất các giải pháp và công nghệ phù hợp.

2. Sản phẩm của công ty
Hai trong số những sản phẩm nổi bật của cơng ty có thể kể đến là Blanket và
FaceSwap.

Phạm Hoàng Hải

Trần Lê Bảo Châu


6
-

Blanket: một ứng dụng dành cho thiết bị di động áp dụng nhiều thuật toán để thực
hiện nhiệm vụ, đo lường và khen thưởng hiệu suất của nhân viên, đồng thời, giúp
tăng cường hiệu quả trong quản lý nhà hàng và hoạt động hàng ngày của họ.

Phạm Hoàng Hải

Trần Lê Bảo Châu


7
-

FaceSwap: ứng dụng thú vị cho phép người dùng thay thế khuôn mặt nhân vật nổi

tiếng trong ảnh bằng khuôn mặt của họ bằng cách sử dụng một bức ảnh duy nhất
từ máy ảnh. Ứng dụng này có sẵn trên cả Android và iOS với hơn một nửa triệu
người dùng.

Chương 2: Nội dung thực tập
Đợt thực tập với chủ đề “Lập trình Flutter trên Android” nhằm mục đích giúp sinh viên
thực tập được đào tạo tồn diện về lập trình với framework Flutter để tạo ứng dụng di động,
đồng thời rèn luyện những kỹ năng mềm như làm việc nhóm, thuyết trình, giao tiếp.

1. Nghiên cứu kỹ thuật
1.1. Nghiên cứu cơng cụ, quy trình
Thời gian : 1 tuần
Nội dung : Tìm hiểu về các cơng cụ sẽ được sử dụng trong q trình làm việc, mơ
hình làm việc dự kiến.
Trong thời gian này, supervisor đã 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 trong số đó như Jira sử dụng trong làm việc nhóm, Github – cơng cụ quản lý phiên bản code, Android

Phạm Hồng Hải

Trần Lê Bảo Châu


8

1.2.

studio - IDE cho việc phát triển ứng dụng di động, Figma – công cụ thiết kế giao
diện người dùng.
Bên cạnh đó, thực tập sinh cịn được tìm hiểu về mơ hình làm việc Scrum.
Tìm hiểu tổng quan về dự án ứng dụng kết nối camera IP.

Thực hiện : Thực hành sử dụng các phần mềm đã nêu trên và tìm hiểu về Scrum.
Kết quả :
Cài đặt thành cơng (nếu cần) và sử dụng cơ bản các chức năng của các cơng cụ và
các phần mềm nêu trên.
Có cái nhìn tổng quan về Scrum.
Nghiên cứu ngôn ngữ, template
Thời gian : 2 tuần
Nội dung: Ngơn ngữ lập trình Dart, một số khái niệm trong Flutter, template
boilerplate.
-

Ngơn ngữ lập trình Dart:

Dart là ngơn ngữ lập trình mới, được phát triển bởi Google, hiện đã được chấp thuận
bởi tổ chức Ecma. Dart được sử dụng để xây dựng các loại ứng dụng: web, server, di
động (IOS và Android với công cụ Flutter).
Dart là ngơn ngữ hỗ trợ lập trình hướng đối tượng, cú pháp kiểu C, mã code Dart có
thể biên dịch thành JavaSript để chạy trên trình duyệt. Nó hỗ trợ những khái niệm lập
trình hiện đại như giao diện lớp, lớp trừu tượng ...
Cách khai báo biến, xây dựng hàm,
- Một số khái niệm trong Flutter:
Tìm hiểu một số khái niệm trong Flutter gồm:
•

Widget (Stateless Widget, Statefull Widget, Accessibility, Inherited Widget)

•

Assets


•

Static User Interface

•

Dynamic User Interface

•

Storage

•

State management

•

3rd Party Libraries

Phạm Hồng Hải

Trần Lê Bảo Châu


9

-

Template boilerplate

Tìm
hiểu
bố
cục
template
boilerplate
từ
link
đây là một template
được xây dựng sẵn kết hợp giữa MobX và Provider.

Thực hiện :
-

Tìm kiếm các tài liệu trên mạng.
Seminar lại với nhóm và tiếp thu ý kiến đóng góp từ các thành viên khác.
Nghe và góp ý seminar của các thành viên khác.

Kết quả :
-

Hiểu được những khái niệm cơ bản trong lập trình với framework Flutter và ngôn
ngữ Dart.
Hiểu được cấu trúc template boilerplate.

2. Thực hiện project
Sau gần 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ề quy trình Scrum và ngơn ngữ Dart, framwork Flutter, template
boilerplate. 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 để thực hiện một ứng dụng di động trên Android.

Chi tiết đồ án sẽ được nói ở phần sau.
3. Lịch làm việc

Phạm Hoàng Hải

Trần Lê Bảo Châu


10

Tuần

1

2

3

4

5

6
7

Phạm Hồng Hải

Cơng việc
Sprint 1:
- Làm quen với các

cơng cụ làm việc
trong công ty như
Jira,
Figma,
Android Studio.
- Học cách trao đổi,
làm việc qua email.
Sprint 2:
- Tìm hiểu và báo cáo
Flutter
- Tìm hiểu và báo cáo
ngơn ngữ Dart.
Sprint 3:
- Tìm hiểu và báo
cáo ngơn ngữ Dart
(tiếp theo).
- Tìm hiểu và báo
cáo
template
boilerplate.
Sprint 4:
- Phân tích yêu cầu
ứng dụng.
Sprint 5:
- Thiết kế UI/UX của
ứng dụng (giao diện
xem 1 camera, giao
diện xem nhiều
camera, giao diện
thêm camera và một

số popup tương
ứng).
Sprint 6:
- Chỉnh sửa thiết kế
UI/UX.
- Khởi tạo project.
Sprint 7:

Người hướng dẫn

Mức
độ
hoàn
thành

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

Thầy Phạm Hoàng
Hải, Thầy Nguyễn
Tấn Trần Minh
Khang

100%

Đạt yêu cầu

Thầy Phạm Hoàng
Hải, Thầy Nguyễn
Tấn Trần Minh

Khang

100%

Đạt yêu cầu

Thầy Phạm Hoàng
Hải, Thầy Nguyễn
Tấn Trần Minh
Khang

100%

Đạt yêu cầu

Thầy Phạm Hoàng
Hải, Thầy Nguyễn
Tấn Trần Minh
Khang

100%

Đạt yêu cầu

Thầy Phạm Hoàng
Hải, Thầy Nguyễn
Tấn Trần Minh
Khang

100%


Đạt yêu cầu

Thầy Phạm Hoàng
Hải, Thầy Nguyễn
Tấn Trần Minh
Khang
Thầy Phạm Hoàng

100%

Đạt yêu cầu

100%

Đạt yêu cầu

Trần Lê Bảo Châu


11

-

8

9

10


11

12

Phạm Hoàng Hải

Xây dựng giao diện
(thêm camera).

Sprint 8:
- Kiểm thử và chỉnh
sửa một số lỗi giao
diện.
- Thực hiện đa ngôn
ngữ cho ứng dụng
(tiếng Anh và tiếng
Việt)
Sprint 9:
- Xây dựng cơ sở dữ
liệu theo template
boilerplate.
Sprint 10:
- Thực hiện chức
năng thêm camera
(chưa check thông
tin camera).
Sprint 11:
- Thực hiện check
thông tin camera
trước khi thêm

camera.
Sprint 12:
Kiểm thử và hoàn
thiện ứng dụng.

Hải, Thầy Nguyễn
Tấn Trần Minh
Khang
Thầy Phạm Hoàng
Hải, Thầy Nguyễn
Tấn Trần Minh
Khang

100%

Đạt yêu cầu

Thầy Phạm Hoàng
Hải, Thầy Nguyễn
Tấn Trần Minh
Khang

100%

Đạt yêu cầu

Thầy Phạm Hoàng
Hải, Thầy Nguyễn
Tấn Trần Minh
Khang


100%

Đạt yêu cầu

Thầy Phạm Hoàng
Hải, Thầy Nguyễn
Tấn Trần Minh
Khang

100%

Đạt yêu cầu

Thầy Phạm Hoàng
Hải, Thầy Nguyễn
Tấn Trần Minh
Khang

100%

Đạt yêu cầu

Trần Lê Bảo Châu


12

Chương 3: Chi tiết về project


1. Giới thiệu về project
Dự án thực tập của nhóm là thực hiện một ứng dụng di động có khả năng kết nối và
stream hình ảnh từ camera IP ở xa.
1.1. Yêu cầu chức năng
Ứng dụng cho phép người dùng nhập thông tin để liên kết với camera IP thông qua giao
thức RTSP (giao thức thường dùng để stream video từ camera), sau đó ứng dụng sẽ lưu
lại thơng tin camera để người dùng có thể xem camera vào lần sau mà không cần phải
nhập lại thơng tin. Ngồi ra, ứng dụng cịn hỗ trợ người dùng xem nhiều camera một lúc
(nhóm camera).
1.2. Yêu cầu phi chức năng
Sử dụng framework Flutter với template boilerplate, đảm bảo ứng dụng thích ứng được
với tất cả các giao diện di động.

2. Thực hiện
4 thành viên của team internship:
-

Trần Lê Bảo Châu
Phan Thị Hồng Cúc
Đoàn Thị Thanh Hiếu
Trần Văn Bảo

Và sự giúp đỡ tận tình của team trainer.

3. Kế hoạch
Sprint 4:
-

Phân tích u cầu ứng dụng.


Kết quả: Thơng tin yêu cầu chức năng và phi chức năng.
Sprint 5:
-

Thiết kế UI/UX của ứng dụng:
o Trang chủ

Phạm Hoàng Hải

Trần Lê Bảo Châu


13

o Giao diện xem 1 camera
o Giao diện xem nhiều camera
o Giao diện danh sách
o Giao diện thêm camera
o Popup thơng báo
o Popup điền thơng tin
Kết quả: Hồn thành sơ bộ thiết kế giao diện cho ứng dụng.
Sprint 6:
-

Chỉnh sửa thiết kế UI/UX.

-

Khởi tạo project.


Kết quả: Hoàn thành thiết kế giao diện.
Sprint 7:
-

Xây dựng các giao diện đã thiết kế.

Kết quả: Hoàn thành sơ bộ các giao diện đã thiết kế.
Sprint 8:
-

Kiểm thử và chỉnh sửa một số lỗi giao diện.

-

Thiết kế cơ sở dữ liệu.

-

Thực hiện đa ngôn ngữ cho ứng dụng (tiếng Anh và tiếng Việt)

Kết quả: Hoàn thành các giao diện như thiết kế và xây dựng được bản thiết kế cơ sở dữ liệu cho
ứng dụng.
Sprint 9:
-

Xây dựng cơ sở dữ liệu theo template boilerplate.

Kết quả: Xây dựng được cơ sở dữ liệu trong project theo template boilerplate.
Sprint 10:


Phạm Hoàng Hải

Trần Lê Bảo Châu


14
-

Thực hiện chức năng thêm/sửa/xóa camera và nhóm camera.

Kết quả: Thực hiện liên kết cơ sở dữ liệu với các giao diện hiện có và các chức năng
thêm/sửa/xóa, cập nhật giao diện cho phù hợp, tuy nhiên vẫn còn tồn tại một số lỗi.
Sprint 11:
-

Thực hiện kiểm tra thông tin trước các thao tác thêm/sửa/xóa.

-

Thêm gợi ý tên cho các trường đặt tên.

Kết quả: Thực hiện một số thao tác kiểm tra thông tin và một số hỗ trợ cho người dùng, tuy
nhiên vẫn còn tồn tại một số lỗi.
Sprint 12:
-

Kiểm thử và hoàn thiện ứng dụng.

Kết quả: Ứng dụng cơ bản hoàn thiện, tuy nhiên vẫn tồn tại một số lỗi.


Phạm Hoàng Hải

Trần Lê Bảo Châu


15

TÀI LIỆU THAM KHẢO

For Flutter:
/>For Dart:
/> /> />For boilerplate:
/>
Phạm Hoàng Hải

Trần Lê Bảo Châu


16

TỔNG KẾT
Như vậy, chỉ trong vòng hai tháng ngắn ngủi, nhóm đã sơ bộ hồn thành một ứng dụng
android bằng framework Flutter. Ứng dụng đã cơ bản đạt được những yêu cầu được đề ra ban
đầu dù vẫn còn một vài sai sót.
Chân thành cảm ơn sự giúp đỡ của các anh chị nhóm trainer KiteMetric, sự nỗ lực của
các bạn cùng nhóm để có thể hồn thành ứng dụng này. Cảm ơn thầy Nguyễn Tấn Trần Minh
Khang và thầy Phạm Hoàng Hải đã giúp em hoàn thành bài báo cáo này.

Phạm Hoàng Hải


Trần Lê Bảo Châu