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
chun 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.

LỜI CẢM ƠN

1


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 hoà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.

NHẬN XÉT CỦA KHOA

2


………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………

………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
.
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

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

4


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.


Chương 2: Nội dung thực tập

6

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 toà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:

o Một SDK (Software Development Kit): Đây là bộ sưu

8

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ẽ
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.

9


• 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): Xoá 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

Cơng việc

Người hướng dẫn

1

- 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

Anh Huỳnh Ngọc Hưng

2

- Tìm hiểu tổng quan về flutter
- Tìm hiểu về Dart

Anh Hồ Xuân Vĩnh

3

- Tìm hiểu GetX
- Ứng dụng GetX vào ứng dụng để quản lý
routing, state, theme, language, color…

Anh Hồ Xuân Vĩnh

4

- Tìm hiểu Resful API
- Tìm hiểu Dio
- Xây dựng ứng dụng Gallery với google photo
api

Anh Hồ Xuân Vĩnh

5

- 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

Anh Hồ Xn Vĩnh

6, 7, 8,
9, 10

- Thực hiện project theo hướng dẫn của mentor

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

Chương 3: Chi tiết về ứng dụng

13

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ữ


- Gia hạn mẫu trữ

14

- 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