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

Với thuật toán sắp xếpcá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 đíc

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

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 đượctham 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ôitrườ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

Đặ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ậntì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 ơnnhữ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àibá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 11.Giới thiệu công ty Janeto 12.Sản phẩm của công ty 1

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

2.Nghiên cứu kỹ thuật 22.1.Các công cụ làm việc 22.2.Tìm hiểu Flutter căn bản 22.3.Tìm hiểu về API 32.4.Tìm hiểu về State Management trong Flutter 43.Thực hiện Project 4

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ôngnhữ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ảotố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 độngtrê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

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ếpcá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 đàotạ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ềmnhư 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 chuyên 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, quá 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

● Ngoà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 đilà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, 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

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ểnbở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ộtchươ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ử 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, RepositoryPattern, 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

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

Tìm hiểu về công ty, cách

tổ chức của công ty

Làm quen với các công cụlàm việc trong công ty

Học cách trao đổi, làmviệc qua email

Anh Hồ NgọcKhánh Trình

100%

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

Ôn lại lập trình hướng đốitượng

Anh Hồ NgọcKhánh Trình

100%

Làm project demo Flutter.

Thiết kế & code các màn

hình chính theo yêu cầu

khách hàng

Anh Hồ NgọcKhánh Trình 100%

7 Thiết kế UI/UX cho các

màn hình thuộc nghiệp vụ

mua bán (phase 2)

Test trên nhiều kích thước

Anh Hồ NgọcKhánh Trình

100%

mànhình khác nhau.

Fix các lỗi còn tồn tại trênmàn hình

Viết lại tài liệu, reviewcode

8

Dựng khung cho phầncore (các tầng Model,Viewmodel, Repository,Database, …) của project

Migrate các logic nghiệp

vụ từ app cũ sang dự án hiệntại

Anh Hồ NgọcKhánh Trình

100%

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

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, …):

1 Phần UI

1.1 Screens

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 filescreen.dart ở ngoài thư mục screens luôn 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 screenluôn

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)

Ngoà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ườnghợp khác nhau

Ví dụ với widget CustomButton:

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, đồngthờ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ý statecủ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ớiSQLite 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, DependencyInjection, Singleton, …

Để 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)

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

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 hoàn thành project này