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[.]

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

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 quá 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, quá 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:

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

▪ Ngoà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): 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

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ồ Xuân 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

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 toán

- Thông tin xét nghiệm

- Tóm tắt quá 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