Lập trình ứng dụng đa nền tảng với 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 ĐA NỀN TẢNG
VỚI FLUTTER

Công ty thực tập: công ty TNHH Đầu tư Giải pháp Công nghệ - Intesco
Người hướng dẫn: anh Huỳnh Ngọc Hưng
Thực tập sinh: Huỳnh Thị Minh Nhực

Tp Hồ Chí Minh, tháng 12 năm 2022


LỜI MỞ ĐẦU
Mỗi năm có hàng nghìn startup với các ý tưởng kinh doanh độc đáo được ra đời trên
toàn thế giới, đặc biệt là các ý tưởng công nghệ. Để thực hiện hóa nhanh các ý tưởng
và đưa ra thị trường, các công ty công nghệ thường ưu tiên lựa chọn các loại công
cụ hỗ trợ phát triển ứng dụng nhanh: Cross-platform app. Flutter là một trong những
nền tảng cross-platform nổi bật nhất hiện nay. Nó giúp tiết kiệm rất nhiều thời gian,
cơng sức và tiền bạc để có thể tạo ra các ứng dụng có thể chạy được trên cả hai nền
tảng Android và Ios. Các ứng dụng Cross-platform app chia sẻ hầu như 80%
codebase để xây dựng đa nền tảng. Vì vậy, để xuất bản ra ứng dụng trên một nền
tảng khác, lập trình viên chỉ cần phải thay đổi 20% code. Đối với trường hợp các
giải pháp native, lập trình viên sẽ cần phải viết lại khoảng 90% code cho nền tảng
mà họ đang hướng tới.
Với những ưu điểm đó, lập trình ứng dụng với flutter đang đem lại rất nhiều cơ hội
việc làm với tương lai đầy hứa hẹn. Sau ba 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 trong một môi trường
chuyên nghiệp, em có dự định là sẽ thực tập trong hè. Vì vậy, em quyết định chọn

Intesco - một mơi trường lý tưởng, hiện đại, chuyên nghiệp - là nơi sẽ giúp em thực
hiện được dự định này.

1


LỜI CẢM ƠN
Trân trọng gửi lời cảm ơn Công ty TNHH Đầu tư Giải pháp Công nghệ - INTESCO đã
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, em đã học
được rất nhiều kiến thức để có thể phát triển được các ứng dụng di động với Flutter. Chân
thành cảm ơn các anh 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 anh Vĩnh đã training flutter, 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 anh Hưng đã training những kỹ năng về đọc tài liệu và debug lỗi, hỗ trợ chúng em
rất nhiều về các vấn đề kỹ thuật 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.

2


NHẬN XÉT CỦA KHOA
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………

………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
……………………………………………………………………………………….
3


Mục lục
Chương 1: Giới thiệu về công ty thực tập ........................................................................... 5
1. Giới thiệu công ty TNHH Đầu Tư Giải Pháp Công Nghệ - Intesco ................... 5
2. Sản phẩm của công ty ............................................................................................. 5
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.

Giới thiệu tổng quan về Flutter ....................................................................... 8

2.3.

Hướng dẫn sử dụng GetX ................................................................................ 9

2.4.

Hướng dẫn cách làm việc với API ................................................................. 10

2.5.

Giới thiệu base code chuẩn, coding convention và cách tối ưu performance
11

3. Project thực hiện.................................................................................................... 13
4. Lịch làm việc .......................................................................................................... 13
Chương 3: Chi tiết về ứng dụng ........................................................................................ 14
1. Giới thiệu về IMS mobile app .................................................................................. 14
1.1.

Tổng quan ........................................................................................................... 14

1.2.

Nền tảng dự án ................................................................................................... 14

1.3.

Phạm vi dự án ..................................................................................................... 14

2. Thực hiện ................................................................................................................... 15
3. Kết quả ....................................................................................................................... 15
TÀI LIỆU THAM KHẢO ................................................................................................. 16
TỔNG KẾT ....................................................................................................................... 17

4


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

1. Giới thiệu công ty TNHH Đầu Tư Giải Pháp Công Nghệ - Intesco
-

Được thành lập từ năm 2003, Công ty TNHH Đầu Tư Giải Pháp Công Nghệ
(INTESCO) là một trong những công ty hàng đầu về lĩnh vực Thụ Tinh Trong Ống
nghiệm (Invitro Fertilization) tại Việt Nam.

-

INTESCO cung cấp các dịch vụ toàn diện nhằm hỗ trợ hoạt động của các phịng thí
nghiệm sinh hóa – vi sinh, di truyền – sinh học phân tử và đặc biệt là lĩnh vực hỗ trợ
sinh sản. Đội ngũ chuyên gia kỹ thuật Công ty được trang bị nền tảng chuyên môn
và cập nhập những công nghệ mới nhất nhằm đáp ứng nhu cầu, địi hỏi trong q
trình phát triển của lĩnh vực hỗ trợ sinh sản và công nghệ sinh học.

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

-

Intesco là nhà cung cấp trang thiết bị, vật tư tiêu hao và hóa chất chính thức cho các
bệnh viện, các trung tâm Hỗ Trợ Sinh Sản trong cả nước như: Từ Dũ, Phụ Sản Quốc
Tế, Vạn Hạnh, An Sinh, Phụ sản Bình Dương, Hùng Vương, Trung ương Huế, Đa
khoa Bình Định, Bệnh viện Bưu Điện, Bệnh viện Phụ sản Hà Nội, Bệnh viện Phụ
sản Trung ương…

-

Ngoài lĩnh vực Hỗ Trợ Sinh Sản, INTESCO còn đang tiến sâu vào lĩnh vực Cơng
nghệ sinh học, sinh học, sinh hóa, hóa học, thực phẩm, dược phẩm,…Trong đó quan
trọng là tư vấn thiết kế phòng Lab, cung cấp trang thiết bị trọn gói. Với trang thiết bị
của những hãng đã khẳng định vị trí trên Thế giới và Việt nam như: Shin Saeng (Hàn
Quốc), Nichiryo (Nhật), Hirayama (Nhật), EverMed (Italia), Eppendorf ( Đức ),
Ilshin (Hà Lan),…
5


-

Ngoài ra, INTESCO cũng đang cung cấp hệ thống quản lý lab IVF chuyên nghiệp
đầu tiên, duy nhất tại Việt Nam – IMS. IMS đáp ứng nhu cầu quản lý các nghiệp vụ
liên quan đến các hoạt động của lab IVF, bệnh viện chuyên khoa IVF.

6

Chương 2: Nội dung thực tập
Trong 2 tháng thực tập, cơng ty đã đem đến một lịch trình training các kiến thức liên
quan đến việc lập trình một ứng dụng bằng Flutter, các kiến thức liên quan đến IVF, cách
tổ chức, làm việc hiệu quả chuyên nghiệp phù hợp với mơi trường của cơng ty.
1. Tìm hiểu cơng ty và các kỹ năng cơ bản trong công ty
-

Thời gian: 2 ngày

-

Nội dung: Giới thiệu về công ty, cách tổ chức của công ty. Mentor giới thiệu về
lịch sử của công ty, các tổ chức và hoạt động của công ty. Đọc tài liệu về phần
mềm cũng như tìm hiểu thêm về các kiến thức liên quan đến IVF.

-

Kết quả:
-

Hiểu thêm về cơng ty Intresco, 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.

-

Hiểu được văn hóa cũng như quy trình làm việc ở cơng ty.

-

Hiểu được các quy trình trong điều trị hỗ trợ sinh sản.

-

Nắm được cách hoạt động của phần mềm IMS.

-

Nắm được cách bảo mật, an tồn thơng tin khi làm việc ở cơng ty.

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, mentor đã 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ư:
▪ Meld: Meld là cơng cụ Diff và Merge nhẹ có giao diện. Nó cho phép
người dùng so sánh các phiên bản của các tập tin, thư mục phục vụ
việc quản lý version của chương trình. Được xây dựng đặc biệt dành
cho các lập trình viên, nó đi kèm với các tính năng như sau:
7

• So sánh hai chiều và ba chiều của tệp và thư mục.
• Cập nhật sự so sánh ngay khi người dùng có sự thay đổi nội
dung.
• Hỗ trợ cho việc merge dễ dàng hơn bằng cách sử dụng chế độ
tự động merge và hành động dựa trên các block (khối) nội
dung đã thay đổi.
• So sánh dễ dàng nhờ việc hình ảnh hóa các phần khác nhau.
• Hỗ trợ Git, Mercurial, Subversion, Bazaar và nhiều loại khác.
▪ Xcode: bộ phát triển phần mềm tích hợp được Apple phát triển chạy
trên hệ điều hành Mac để các lập trình viên có thể phát triển phần
mềm chạy trên hệ điều hành Mac và iOS.
▪ Vs code: IDE hỗ trợ phát triển ứng dụng đa nền tảng.
▪ Telegram, skype: công cụ giao tiếp trong cơng việc.
-

Thực hiện: tìm hiểu, sử dụng các công cụ trên

-

Kết quả:
▪ Ứng dụng các công cụ vào công việc một cách hiệu quả.
▪ Cài đặt các công cụ cần thiết để làm việc.

2.2. Giới thiệu tổng quan về Flutter
-

Thời gian: 1 tuần

-

Nội dung: Giới thiệu về flutter, ngôn ngữ Dart, các IDE hỗ trợ, state và
layout cơ bản trong flutter.
▪ Flutter: Flutter là một nền tảng hỗ trợ phát triển cho các ứng dụng đa
nền cho hệ iOS và Android do Google phát triển. Nó được sử
dụng vô cùng phổ biến cho nhiệm vụ tạo ra các ứng dụng gốc dành
cho Google.
• Flutter thường bao gồm 2 thành phần chính quan trọng như
sau:

8


o Một SDK (Software Development Kit): Đây là bộ sưu
tập các công cụ giúp bạn phát triển các ứng dụng của
mình. Bao gồm các cơng cụ giúp bạn biên dịch mã của
mình thành mã máy gốc (mã cho iOS và Android).
o Một Framework (UI Library based on widgets): Đây là
tập hợp các thành phần giao diện người dùng (UI) có
thể tái sử dụng (button, text inputs, slider, v.v.).
▪ Dart: ngôn ngữ lập trình đa mục đích ban đầu được phát triển bởi
Google và sau đó được Ecma (ECMA-408) phê chuẩn làm tiêu
chuẩn. Nó được sử dụng để xây dựng các ứng dụng web, server, máy
tính để bàn và thiết bị di động. Dart là một ngôn ngữ hướng đối
tượng, được xác định theo lớp, với cơ chế garbage-collected, sử dụng
cú pháp kiểu C để dịch mã tùy ý sang JavaScript. Nó hỗ trợ interface,
mixin, abstract, generic, static typing và sound type (2 cái cuối có thể
hiểu là type-safe). Dart là ngơn ngữ mã nguồn mở và miễn phí, được
phát triển trên GitHub. Hiện nay Dart đã release phiên bản 2.2

-

Thực hiện: Đọc tài liệu hướng dẫn, thực hành build ui theo design.

-

Kết quả:
▪ Nâng cao kỹ năng lập trình với Flutter
▪ Có được những kiến thức quan trọng cho việc lập trình ứng dụng di
động sau này.
▪ Ngồi ra cịn được biết thêm một số quy tắc trong việc viết code sao
cho đúng chuẩn, dễ đọc, dễ hiểu.

2.3. Hướng dẫn sử dụng GetX
-

Thời gian: 1 tuần

-

Nội dung: giới thiệu về package GetX, cách dùng GetX trong việc quản lý
state, routing, theme, color, language...
▪ GetX: GetX trong Flutter là một thư viện rất tiện ích và được dùng rất
nhiều trong lập trình Flutter. GetX cung cấp các giải pháp mạnh mẽ
9


và tiện lợi như: quản lý state có performance cao, dependency
injection thông minh, quản lý route nhanh và hiệu quả.
-

Thực hiện:
▪

Tự tìm hiểu và hỏi mentor những vấn đề chưa nắm rõ.

▪ Đọc source code và làm theo hướng dẫn tạo ứng dụng sử dụng GetX
quản lý state, color, language, routing, theme.
-

Kết quả:
▪ Hiểu rõ về GetX, lý do sử dụng GetX trong dự án.
▪ Xây dựng được ứng dụng sử dụng GetX quản lý state, color,
language, routing, theme.

2.4. Hướng dẫn cách làm việc với API
-

Thời gian: 1 tuần

-

Nội dung: giới thiệu về Restful API, package Dio.
▪ Restful API:
• RESTful API là một tiêu chuẩn dùng trong việc thiết kế API

cho các ứng dụng web (thiết kế Web services) để tiện cho
việc quản lý các resource. Nó chú trọng vào tài nguyên hệ
thống (tệp văn bản, ảnh, âm thanh, video, hoặc dữ liệu
động…), bao gồm các trạng thái tài nguyên được định dạng

và được truyền tải qua HTTP.
• REST hoạt động chủ yếu dựa vào giao thức HTTP. Các hoạt

động cơ bản nêu trên sẽ sử dụng những phương thức HTTP
riêng.
o GET (SELECT): Trả về một Resource hoặc một danh

sách Resource.
o POST (CREATE): Tạo mới một Resource.
o PUT (UPDATE): Cập nhật thơng tin cho Resource.
o DELETE (DELETE): Xố một Resource.
10


▪ Package Dio: một Http Client mạnh mẽ cho ngôn ngữ Dart có hỗ
trợ Interceptors, Global configuration, FormData, Request
Cancellation, File downloading, Timeout...
-

Thực hiện: đọc hướng dẫn và tạo ứng dụng sử dụng api của Git.

-

Kết quả:
▪ Hiểu rõ hơn về resful api.
▪ Biết được cách sử dụng package Dio.
▪ Xây dựng được ứng dụng sử dụng package để tạo request.

2.5. Giới thiệu base code chuẩn, coding convention và cách tối ưu performance
-

Thời gian: 1 tuần

-

Nội dung: giới thiệu base code chuẩn để phát triển ứng dụng, lint rules, các
lưu ý để cải thiện performance.
▪ Base code:

11


▪ Package flutter_lints: sử dụng flutter_lints để giúp code style của

khơng chỉ giúp code được chặt chẽ hơn mà cịn là một quy ước
chung để code khi teamwork
▪ Một số cách cải thiện performance:
• Hạn chế xây dựng lặp đi lặp lại các widget dung nhiều lần.
• Sử dụng const khi có thể.
• Tránh rebuild các widget khơng cần thiết trong
animatedBuilder.
12


• Loại bỏ các thư viện không dùng đến.
• Lựa chọn widget hợp lí.
-

Thực hiện: xây dựng ứng dụng Gallery với google photo api.

-

Kết quả:
▪ Biết cách xây dựng basecode chuẩn.
▪ Hiểu và vận dụng các cách cải thiện performance.
▪ Biết cách viết code theo rules dễ hiểu dễ đọc.

3. Project thực hiện
Sau 5 tuần làm quen với công ty cũng như học được các kỹ năng trong việc phát triển
ứng dụng đa nền tảng với Flutter, thực tập sinh được mentor hướng dẫn thực hiện project
của công ty. Chi tiết về project sẽ được nói rõ ở phần sau.
4. Lịch làm việc
Tuần
1
2

Cơng việc
- Tìm hiểu lịch sử, cách làm việc của cơng ty
- Tìm hiểu các cơng cụ làm việc
- Tìm hiểu tổng quan về flutter
- Tìm hiểu về Dart

3

-

4

-

5

-

6, 7, 8, 9,
10

-

Tìm hiểu GetX
Ứng dụng GetX vào ứng dụng để quản lý
routing, state, theme, language, color…
Tìm hiểu Resful API
Tìm hiểu Dio
Xây dựng ứng dụng Gallery với google photo
api
Giới thiệu, đọc source base code chuẩn
Tìm hiểu cách tối ưu hóa performance trong
flutter
Tìm hiểu flutter convention
Thực hiện project theo hướng dẫn của mentor

Người hướng dẫn
Anh Huỳnh Ngọc Hưng
Anh Hồ Xuân Vĩnh
Anh Hồ Xuân Vĩnh
Anh Hồ Xuân Vĩnh

Anh Hồ Xuân Vĩnh

Anh Hồ Xuân Vĩnh
Anh Huỳnh Ngọc Hưng

13


Chương 3: Chi tiết về ứng dụng
1. Giới thiệu về IMS mobile app
1.1. Tổng quan
Với mong muốn mang trải nghiệm người dùng tốt hơn, theo dõi được một
vài hoạt động điều trị của mình (bệnh nhân) tại bệnh viện. Intesco hình
thành ý tưởng và phát triển ứng dụng trên nền tảng di động giúp cho người
bệnh dễ dàng tiếp cận thơng tin của bệnh viện, cũng như phía bệnh viện
cung cấp các dịch vụ tốt hơn cho người dùng (đây là dự án private của công
ty)
1.2. Nền tảng dự án
Là một ứng dụng chạy đa nền tảng (Android, iOS), IMS Mobile App (for

-

patient) được build trên nền Flutter, giúp ứng dụng được build nhanh hơn và
tiếp cận người dùng.
-

Ngoài ra, với kiến thức sâu rộng về IVF và kinh nghiệm dày dặn trong việc
triển khai IMS tại các bệnh viện hàng đầu Việt Nam, Intesco tự tin có thể
mang tới một phần mềm tối ưu hóa và đi sát với các mong muốn của người
bệnh.
Ứng mới này có thể giúp người dùng (bệnh nhân) dễ dàng tiếp cận với các

-

hoạt động điều trị tại việc, đảm bảo dữ liệu và các hoạt động khám chữa
bệnh được xuyên suốt, từ đó giúp tăng trải nghiệm người dùng tại các bệnh
viện.
1.3. Phạm vi dự án
-

Đăng nhập

-

Bệnh án điện tử

-

Theo dõi chu kỳ kinh nguyệt

-

Lịch hẹn thủ thuật

-

Lịch tái khám

-

Mẫu trữ
14

-

Gia hạn mẫu trữ

-

Thanh toán tiền qua App (Momo, zalopay, credit, debit...)

-

Lịch sử thanh tốn

-

Thơng tin xét nghiệm

-

Tóm tắt q trình điều trị

-

Cài đặt

2. Thực hiện
-

Xây dựng ui cho các màn hình đăng nhập, bệnh án điện tử, lịch hẹn, mẫu trữ, gia

hạn bằng figma.

-

Viết api document

-

Xây dựng basecode.

-

Setup môi trường cho project: dev, pro, stg.

-

Tìm hiểu cách mã hóa dữ liệu khi kéo dữ liệu từ server về và ngược lại.

-

Build ui từ figma lên ứng dụng.

3. Kết quả
-

Xây dựng được các màn hình theo yêu cầu bằng figma.

-

Setup basecode chuẩn với 3 mơi trường: dev, pro, stg.

-

Tìm hiểu và ứng dụng được cách bảo mật dữ liệu khi kéo dữ liệu từ server về và
ngược lại.

-

Buil được các màn hình đăng nhập, bệnh án điện tử, lịch hẹn lên ứng dụng.

15


TÀI LIỆU THAM KHẢO
[1] />[2] />[3] />[4] />[5] />
16


TỔNG KẾT
Chỉ trong 2 tháng thực tập, đội training đã giúp thực tập sinh có được các kiến thức để xây
dựng một ứng dụng di động đa nền tảng bằng Flutter một cách chỉnh chu, hoàn thiện nhất.
Chân thành cảm ơn anh Huỳnh Ngọc Hưng và anh Hồ Xuân Vĩnh đã hỗ trợ em hết mình
trong thời gian thực tập. Cảm ơn khoa Công nghệ Phần Mềm đã tạo điều kiện để em có cơ
hội được thực tập trải nghiệm thực tế.

17