báo cáo thực tập lập trình ứng dụng di động bằng FLUTTER

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 BẰNG
FLUTTER

Cơng ty thực tập

: Janeto

Người phụ trách

: Hồ Ngọc Khánh Trình

Thực tập sinh

: Nguyễn Hữu Thắng


TP. Hồ Chí Minh, tháng 7 năm 2020


Lời mở đầu
Với tốc độ phát triển chóng mặt của thế giới cơng nghệ nói chung và thiết bị di động nói
riêng. Với 3.5 tỷ người đang có điện thoại trên thế giới. Nhu cầu sử dụng điện thoại
của con người ngày càng tăng.
Hằng năm hàng loạt các hãng điện thoại mới ra đời, với nhiều kích cỡ, chủng loại khác
nhau. Bài toán đặt ra là làm sao làm một ứng dụng có thể chạy trên tất cả các thiết bị
trên mà không cần phải thay đổi công nghệ.

Sau ba - bốn năm học tập trên trường, do mong muốn có thêm kinh nghiệm thực tế, cũng như muốn được
tham gia phát triển các dự án trong một môi trường chuyên nghiệp, em quyết định chọn Janeto - một môi
trường lý tưởng, hiện đại, chuyên nghiệp và là nơi sẽ giúp em thực hiện được dự định này.

Lời cảm ơn
Trân trọng gửi lời cảm ơn Công ty Janeto đã 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 hoàn chỉnh. 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
hoàn thành đợt thực tập này.
Đặc biệt cảm ơn anh Hồ Ngọc Khánh Trình, đã training Android, 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ảm ơn
những teammate thân thiện, tận tâm gồm chị Phạm Xuân Hạ, anh Lê Quang Phú, anh Hoàng Thiên Ân đã
giúp em rất nhiều trong cả công việc và trong cuộc sống.
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.
Nguyễn Hữu Thắng
TP. Hồ Chí Minh, ngày 29 tháng 7 năm 2020


Nhận xét của khoa



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

1. Giới thiệu công ty Janeto
JANETO là công ty phần mềm chuyên về ứng dụng web và di động. Với trình độ chuyên biệt và đội ngũ
kỹ thuật cao, JANETO luôn luôn cung cấp cho khách hàng giải pháp sáng tạo và tối ưu. Việc này khơng
những giảm chi phí phát triển, triển khai mà chất lượng của sản phẩm và dịch vụ luôn luôn được đảm bảo

tốt nhất.
JANETO cung cấp tất cả các giải pháp về thiết kế, lập trình ứng dụng web cũng như ứng dụng di động
trên: iPhone, iPad, Android và các nền tảng chuyên biệt.

2. Sản phẩm của công ty
Hueferry

6

Hueferry là một dịch vụ đặt vé online cho phà ở Việt Nam.
Bán vé vận chuyển các phương tiện giao thông (ô tô, xe máy, …) khi đi qua phà. Với thuật toán sắp xếp
các phương tiện lên phà sao cho tối ưu nhất đối với diện tích phà.


Chương 2: Nội dung thực tập
Đợt thực tập với chủ đề “Lập trình trên nền tảng Flutter” nhằm mục đích giúp sinh viên thực tập được đào
tạo toàn diện về lập trình đa nền tảng bằng framework Flutter, đồ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. Tại cơng ty, sinh viên có cơ hội được học tập, khám phá và
làm việc trong một mơi trường phát triển phần mềm chun nghiệp.

1. Tìm hiểu công ty
Thời gian: 1 ngày
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, q 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 xuống thấp, cách thức tổ chức của cơng ty.

●

Ngồ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ác quy tắc bảo mật của công ty.

Kết quả: Hiểu thêm về cơng ty Janeto, 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
Thời gian: 3 ngày
Nội dung: 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,
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ư GitLab - sử dụng trong làm việc nhóm, RubyJaneto – được phát triển
bởi chính cơng ty để dùng vào những việc như báo cáo hằng ngày, báo nghỉ, ... Visual Studio Code - một
chương trình Editor rất hữu ích và phổ biến với lập trình viên.
Thực hiện: Thực hành sử dụng các phần mềm đã nêu trên.
Kết quả: Lập trình sử7 dụng các cơng cụ miễn phí, giúp dễ dàng kết hợp các cơng cụ với nhau, so với việc
dung các IDE.


2.2. Tìm hiểu Flutter căn bản
Thời gian: 1 tuần
Nội dung: Được giới thiệu về Flutter và các kỹ thuật cơ bản trong Flutter
-

Lập trình hướng đối tượng.

-

Các kiến thức cơ bản về lập trình hướng đối tượng như khái niêm, các đặc tính như tính kế thừa,
tính đóng gói, tính ảo hóa, tính đa hình.

-

Các kỹ thuật trong lập trình ứng dụng, phát triển ứng dụng như Dependency Injection, Repository
Pattern, State Management, …

-

Cách Flutter hoạt động.

-

Các kiến trúc tổ chức project trong Flutter.

Thực hiện:
-

Đọc document, video về Flutter.

-

Tạo 1 demo đặt thức ăn nhanh bằng Flutter.

Kết quả:
-

Nâng cao kỹ thuật lập trình với Flutter

-

Có những kiến thức quan trọng cho việc lập trình đa nền tảng di động sau này.

2.3. Tìm hiểu về API
Thời gian: 1 tuần
Nội dung:
-

Tìm hiểu về API

-

Tìm hiểu về REST API

-

Tìm hiểu về cách hoạt động & giao tiếp giữa client - server

Thực hiện:
-

Xem document, video về API.

-

Tham gia các buổi Training của công ty.

8

Kết quả:
-

Hiểu cách thực hoạt động của API


-

Ứng dụng được hiểu biết vào việc integrate API cho các dự án nhỏ.

2.4. Tìm hiểu về State Management trong Flutter
Thời gian: 1 tuần
Nội dung:
-

Được giới thiệu về State Management cũng như các kiến trúc tổ chức code trong Flutter.

Thực hiện:
-

Đọc document, xem video về State Management.

-

Thử qua các loại State Management và áp dụng vào project thực tập.

Kết quả:
-

Nắm được các kỹ thuật quản lý state cho project.

-

Chọn ra 1 kỹ thuật phù hợp với nhu cầu & kiến trúc project.

3. Thực hiện Project
Sau một tháng được training và thực hành, em đã nắm được những kiến thức cơ bản về Flutter, cũng như
các kiến trúc và các thư viện, công nghệ sử dụng trong ứng dụng của công ty. Trong tháng thứ hai, trainer
đã hướng dẫn em áp dụng những kiến thức đã học để bắt tay vào làm project chính cho cơng ty.

4. Lịch làm việc

Tuần

Cơng việc

Người hướng
dẫn

Mức độ hồn
thành

Tìm hiểu về cơng ty, cách Anh Hồ Ngọc 100%
tổ chức của cơng ty.
Khánh Trình
1

Làm quen với các công cụ

làm việc trong công ty.
9

Học cách trao đổi, làm
việc qua email.

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


Tìm hiểu Flutter căn bản.
2

Ơn lại lập trình hướng đối
tượng.

Anh Hồ Ngọc 100%
Khánh Trình

Làm project demo Flutter.

3

Tìm hiểu về các API đang Anh Hồ Ngọc 100%
và sẽ được sử dụng.
Khánh Trình
Tìm hiểu về hệ thống hiện
tại của dự án.
Tìm
hiểu về

State Anh Hồ Ngọc 100%
Management trong Flutter.
Khánh Trình

4

5

6

Tìm hiểu về các Pattern
thường được dùng trong
Flutter.
Tìm hiểu sâu về lập trình Anh Hồ Ngọc 100%
UI/UX trong Flutter.
Khánh Trình
Tìm hiểu về các layout,
các widget, animation.
Bắt tay vào tìm hiểu Anh Hồ Ngọc 100%
requirements của dự án cần Khánh Trình
migrate.
Thiết kế & code các màn
hình chính theo u cầu
khách hàng
Thiết kế UI/UX cho các Anh Hồ Ngọc 100%
màn hình thuộc nghiệp vụ Khánh Trình
mua bán (phase 2).
Test trên nhiều kích thước
màn

7

hình khác nhau.
Fix các lỗi cịn tồn tại trên
10
màn hình.
Viết lại tài liệu, review
code.


8

Dựng khung cho phần Anh Hồ Ngọc 100%
core (các tầng Model, Khánh Trình
Viewmodel,
Repository,
Database, …) của project.
Migrate các logic nghiệp
vụ từ app cũ sang dự án hiện
tại.

Chương 3: Chi tiết Project phần kỹ thuật
Vì chính sách bảo mật của cơng ty nên em không thể giới thiệu công khai nhiều về project, nhưng bên
dưới đây là những gì đúc kết ra được từ project về mặt kỹ thuật.

11


Structure của project gồm 2 phần chính là ui (gồm các screen widgets, các common widgets, …) và core
(để chứa những tương tác dưới database, repository, viewmodel, …):

12


13


1. Phần UI
1.1. Screens

14


Với flutter, mọi thứ hiển thị trên ui đều là các widget và toàn bộ app được xây dựng thành 1 widget tree.
Do đó, mỗi screen cũng là 1 widget tương ứng với 1 file .dart, nhưng dù vậy em khơng để các file
screen.dart ở ngồi thư mục screens ln mà tạo thêm thư mục con cho screen, là do với 1 số screen,
mình cịn có thể chia nhỏ các thành phần trong đó ra các widget con, ví dụ như screen này:

Chia các departure card ra thành 1 widget riêng giúp code gọn hơn, nhưng widget DepartureCard này chỉ
xài ở trong screen này chứ không xài ở đâu khác, nên cách tốt nhất là gom nó để vơ chung với screen
luôn.

15


1.2. Common widgets

Đây là nơi ta để các widget thường dùng như button, textfield, datetimepicker, …
Các widget này cần đảm bảo tính linh hoạt & tái sử dụng, vd như CustomButton, dù cho ta có lấy ra dùng
ở đâu thì button vẫn chạy ổn mà khơng có bug (hopefully).

Ngồi ra các widget này cũng nên có tính customizable để từ 1 widget mà có thể dùng trong nhiều trường
hợp khác nhau.
Ví dụ với widget CustomButton:

16


Thật ra Flutter cũng đã cung cấp sẵn cho ta nhiều loại button (FlatButton, RaisedButton, IconButton, …)
nhưng ta vẫn tạo thêm widget CustomButton là để các button trong app có sự đồng nhất về style, đồng
thời mở rộng thêm 1 số feature như trạng thái loading cho button…

2. Phần Core
2.1. Tóm tắt mơ hình
Phần core là phần chứa các code logic như gọi API, tương tác với local Database (SQLite), quản lý state
của app, ...

Về phần lưu trữ local database, ta sẽ dùng package moor để giúp thuận tiện hơn trong việc tương tác với
SQLite bằng cách áp dụng kĩ thuật code first. Ta sẽ chỉ cần viết code bằng dart là moor sẽ tự generate và
thực thi query (đương nhiên là nếu muốn tự viết query thuần vẫn được). Chi tiết về cách viết code first sẽ
nói rõ hơn ở dưới.

Về phần logic thì mình sẽ áp dụng mơ hình MVVM với các kĩ thuật như Repository, Dependency
17
Injection, Singleton, …


2.2. Phần database
Tất cả những gì trong thư mục lib/core/database sẽ đều được dùng để phục vụ cho việc generate cho
moor. Phần chính (khai báo database, tạo file sqlite, …) sẽ nằm trong file moor_database.dart

Entities
Dùng để khai báo các Table cho moor database.
18


Daos
Để viết các function tương tác trực tiếp với database bằng các lệnh query của moor (tương tự như LINQ).

19


2.3. Phần logic
Dtos
Dùng để làm trung gian giữa các Entity của tầng database với tầng logic & UI.

Repositories
Trung gian giữa Database (daos) và Viewmodels.
20


Để ý thấy ở đây ta cần các instance Dao là Singleton nên ta sẽ dùng package get_it.

Viewmodels
Phần viewmodel có nhiều cái đáng chú ý. Nó là phần sẽ giao tiếp với UI, nhưng theo cơ chế re-render của
flutter thì UI chỉ re-render widget khi state trong widget thay đổi. Vì vậy để UI re-render dựa trên
viewmodel thì ta sẽ dùng package provider.

TỔNG KẾT
Với thời gian chỉ hai tháng cùng những kiến thức quý báu được học tại Janeto, việc xây dựng và hỗ trợ
thiết kế dự án ECR Airpos cũng đã hồn thành nhờ có sự giúp đỡ nhiệt tình, thân thiện của các anh chị

trong cơng ty.
Một lần nữa, xin chân thành cảm ơn sự giúp đỡ của các anh chị nhóm trainer Janeto, sự nỗ lực của các
teammate để có thể cùng em hồn thành project này.

21