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 năm 2020 Lời mở đầu Với tốc độ phát triển chóng mặt giới cơng nghệ nói chung thiết bị di động nói riêng Với 3.5 tỷ người có điện thoại giới Nhu cầu sử dụng điện thoại người ngày tăng Hằng năm hàng loạt hãng điện thoại đời, với nhiều kích cỡ, chủng loại khác Bài toán đặt làm ứng dụng chạy tất thiết bị mà không cần phải thay đổi công nghệ Sau ba - bốn năm học tập trường, mong muốn có thêm kinh nghiệm thực tế, muốn tham gia phát triển dự án môi trường chuyên nghiệp, em định chọn Janeto - môi trường lý tưởng, đại, chuyên nghiệp nơi giúp em thực dự định 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ó hội thực tập công ty Chỉ thời gian ngắn, nhờ dẫn nhiệt tình nhóm trainer, nhóm thực tập chúng em tiếp thu kiến thức quan trọng để làm ứng dụng di động hoàn chỉnh Chân thành cảm ơn anh chị nhóm trainer bỏ 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 Đặ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 khó khăn cơng việc, đến khó khăn việc làm quen với môi trường Cảm ơn 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 nhiều công việc sống Cũng xin cảm ơn thầy cô khoa Công nghệ phần mềm nhiệt tình hỗ trợ, tạo điều kiện em làm báo cáo Nguyễn Hữu Thắng TP Hồ Chí Minh, ngày 29 tháng năm 2020 Nhận xét khoa Chương 1: Giới thiệu công ty thực tập Giới thiệu công ty Janeto JANETO công ty phần mềm chuyên ứng dụng web di động Với trình độ chuyên biệt đội ngũ kỹ thuật cao, JANETO luôn cung cấp cho khách hàng giải pháp sáng tạo tối ưu Việc giảm chi phí phát triển, triển khai mà chất lượng sản phẩm dịch vụ luôn đảm bảo tốt JANETO cung cấp tất giải pháp thiết kế, lập trình ứng dụng web ứng dụng di động trên: iPhone, iPad, Android tảng chuyên biệt Sản phẩm công ty Hueferry Hueferry dịch vụ đặt vé online cho phà Việt Nam Bán vé vận chuyển phương tiện giao thông (ô tô, xe máy, …) qua phà Với thuật toán xếp phương tiện lên phà cho tối ưu 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 tảng Flutter” nhằm mục đích giúp sinh viên thực tập đào tạo tồn diện lập trình đa tảng framework Flutter, đồng thời rèn luyện kỹ mềm làm việc nhóm, thuyết trình, giao tiếp Tại cơng ty, sinh viên có hội học tập, khám phá làm việc môi trường phát triển phần mềm chuyên nghiệp Tìm hiểu công ty Thời gian: ngày Nội dung: ● Giới thiệu công ty, cách tổ chức công ty ● Được nghe người phụ trách giới thiệu công ty, trình thành lập 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ông ty ● Ngồi ra, thực tập sinh cịn giới thiệu cách thức làm việc công ty thời gian làm, quy định cần phải tuân thủ, quy tắc bảo mật công ty Kết quả: Hiểu thêm cơng ty Janeto, q trình thành lập phát triển Có thêm kỹ việc sử dụng email cơng việc, làm việc có kế hoạch, có kỷ luật, có trách nhiệm Nghiên cứu kỹ thuật 2.1 Các công cụ làm việc Thời gian: ngày Nội dung: Tìm hiểu cơng cụ sử dụng 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 cơng cụ giúp ích cho công việc sau Một số phần mềm số GitLab - sử dụng làm việc nhóm, RubyJaneto – phát triển cơng ty để dùng vào việc báo cáo ngày, báo nghỉ, Visual Studio Code - chương trình Editor hữu ích phổ biến với lập trình viên Thực hiện: Thực hành sử dụng phần mềm nêu Kết quả: Lập trình sử7 dụng cơng cụ miễn phí, giúp dễ dàng kết hợp công cụ với nhau, so với việc dung IDE 2.2 Tìm hiểu Flutter Thời gian: tuần Nội dung: Được giới thiệu Flutter kỹ thuật Flutter - Lập trình hướng đối tượng - Các kiến thức lập trình hướng đối tượng khái niêm, đặc tí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 lập trình ứng dụng, phát triển ứng dụng Dependency Injection, Repository Pattern, State Management, … - Cách Flutter hoạt động - Các kiến trúc tổ chức project Flutter Thực hiện: - Đọc document, video Flutter - Tạo demo đặt thức ăn nhanh Flutter Kết quả: - Nâng cao kỹ thuật lập trình với Flutter - Có kiến thức quan trọng cho việc lập trình đa tảng di động sau 2.3 Tìm hiểu API Thời gian: tuần Nội dung: - Tìm hiểu API - Tìm hiểu REST API - Tìm hiểu cách hoạt động & giao tiếp client - server Thực hiện: - Xem document, video API - Tham gia buổi Training công ty Kết quả: - Hiểu cách thực hoạt động API - Ứng dụng hiểu biết vào việc integrate API cho dự án nhỏ 2.4 Tìm hiểu State Management Flutter Thời gian: tuần Nội dung: - Được giới thiệu State Management kiến trúc tổ chức code Flutter Thực hiện: - Đọc document, xem video State Management - Thử qua loại State Management áp dụng vào project thực tập Kết quả: - Nắm kỹ thuật quản lý state cho project - Chọn kỹ thuật phù hợp với nhu cầu & kiến trúc project Thực Project Sau tháng training thực hành, em nắm kiến thức Flutter, kiến trúc thư viện, công nghệ sử dụng ứng dụng công ty Trong tháng thứ hai, trainer hướng dẫn em áp dụng kiến thức học để bắt tay vào làm project cho cơng ty 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 công ty, cách Anh Hồ Ngọc 100% tổ chức cơng ty Khánh Trình Làm quen với công cụ làm việc công ty Học cách trao đổi, làm việc qua email Nhận xét người hướng dẫn Tìm hiểu Flutter Ơ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 Tìm hiểu API Anh Hồ Ngọc 100% sử dụng Khánh Trình Tìm hiểu hệ thống dự án Tìm hiểu State Anh Hồ Ngọc 100% Management Flutter Khánh Trình Tìm hiểu Pattern thường dùng Flutter Tìm hiểu sâu lập trình Anh Hồ Ngọc 100% UI/UX Flutter Khánh Trình Tìm hiểu layout, widget, animation Bắt tay vào tìm hiểu Anh Hồ Ngọc 100% requirements dự án cần Khánh Trình migrate Thiết kế & code hình theo u cầu khách hàng Thiết kế UI/UX cho Anh Hồ Ngọc 100% hình thuộc nghiệp vụ Khánh Trình mua bán (phase 2) Test nhiều kích thước hình khác Fix lỗi tồn 10 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, …) project Migrate logic nghiệp vụ từ app cũ sang dự án Chương 3: Chi tiết Project phần kỹ thuật Vì sách bảo mật cơng ty nên em giới thiệu công khai nhiều project, bên đúc kết từ project mặt kỹ thuật 11 Structure project gồm phần ui (gồm screen widgets, common widgets, …) core (để chứa tương tác database, repository, viewmodel, …): 12 13 Phần UI 1.1 Screens 14 Với flutter, thứ hiển thị ui widget toàn app xây dựng thành widget tree Do đó, screen widget tương ứng với file dart, dù em không để file screen.dart ngồi thư mục screens ln mà tạo thêm thư mục cho screen, với số screen, cịn chia nhỏ thành phần widget con, ví dụ screen này: Chia departure card thành widget riêng giúp code gọn hơn, widget DepartureCard xài screen không xài đâu khác, nên cách tốt gom để vơ chung với screen 15 1.2 Common widgets Đây nơi ta để widget thường dùng button, textfield, datetimepicker, … Các widget cần đảm bảo tính linh hoạt & tái sử dụng, vd CustomButton, ta có lấy dùng đâu button chạy ổn mà khơng có bug (hopefully) Ngồi widget nên có tính customizable để từ widget mà dùng nhiều trường hợp khác Ví dụ với widget CustomButton: 16 Thật Flutter cung cấp sẵn cho ta nhiều loại button (FlatButton, RaisedButton, IconButton, …) ta tạo thêm widget CustomButton để button app có đồng style, đồng thời mở rộng thêm số feature trạng thái loading cho button… Phần Core 2.1 Tóm tắt mơ hình Phần core phần chứa code logic gọi API, tương tác với local Database (SQLite), quản lý state app, Về phần lưu trữ local database, ta dùng package moor để giúp thuận tiện việc tương tác với SQLite cách áp dụng kĩ thuật code first Ta cần viết code dart moor tự generate thực thi query (đương nhiên muốn tự viết query được) Chi tiết cách viết code first nói rõ Về phần logic áp dụng mơ hình MVVM với kĩ thuật Repository, Dependency 17 Injection, Singleton, … 2.2 Phần database Tất thư mục lib/core/database dùng để phục vụ cho việc generate cho moor Phần (khai báo database, tạo file sqlite, …) nằm file moor_database.dart Entities Dùng để khai báo Table cho moor database 18 Daos Để viết function tương tác trực tiếp với database lệnh query moor (tương tự LINQ) 19 2.3 Phần logic Dtos Dùng để làm trung gian Entity tầng database với tầng logic & UI Repositories Trung gian Database (daos) Viewmodels 20 Để ý thấy ta cần instance Dao Singleton nên ta dùng package get_it Viewmodels Phần viewmodel có nhiều đáng ý Nó phần giao tiếp với UI, theo chế re-render flutter UI re-render widget state widget thay đổi Vì để UI re-render dựa viewmodel ta dùng package provider TỔNG KẾT Với thời gian hai tháng kiến thức quý báu học Janeto, việc xây dựng hỗ trợ thiết kế dự án ECR Airpos hoàn thành nhờ có giúp đỡ nhiệt tình, thân thiện anh chị công ty Một lần nữa, xin chân thành cảm ơn giúp đỡ anh chị nhóm trainer Janeto, nỗ lực teammate để em hồn thành project 21 ... cho tối ưu 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 tảng Flutter? ?? nhằm mục đích giúp sinh viên thực tập đào tạo tồn di? ??n lập trình đa tảng framework Flutter, ... dùng vào việc báo cáo ngày, báo nghỉ, Visual Studio Code - chương trình Editor hữu ích phổ biến với lập trình viên Thực hiện: Thực hành sử dụng phần mềm nêu Kết quả: Lập trình sử7 dụng cơng cụ... Các kỹ thuật lập trình ứng dụng, phát triển ứng dụng Dependency Injection, Repository Pattern, State Management, … - Cách Flutter hoạt động - Các kiến trúc tổ chức project Flutter Thực hiện: -