Báo cáo thực tập lập trình ứng dụng di động với flutter

Giới thiệu chung  Tên công ty: Vitalify Á Châu Vitalify Asia  Địa chỉ: 224A Điện Biên Phủ, Phường 6, Quận 3, Thành phố Hồ Chí Minh  Trang web: https://www.vitalify.asia/  Điện thoại:

 BÁO CÁO THỰC TẬP LẬP TRÌNH ỨNG DỤNG DI ĐỘNG VỚI FLUTTER

Công ty thực tập: Vitalify Asia Người phụ trách: Nguyễn Thị Nhi (BPM) Thực tập sinh: Nguyễn Dương Tùng

Thành phố Hồ Chí Minh, 08/08/2022

NỘI DUNG

LỜI CẢM ƠN 4

NHẬN XÉT CỦA KHOA 5

A CHƯƠNG 1: Giới thiệu công ty thực tập 6

1 Giới thiệu chung 6

2 Sản phẩm & dịch vụ của công ty 6

B CHƯƠNG 2: Nội dung thực tập 8

1 Tìm hiểu công ty và các kỹ năng cơ bản trong công ty 8

2 Nghiên cứu kỹ thuật 8

3 Tìm hiểu và tập huấn quy trình làm việc, kiến thức mới 9

3.1 Các công cụ và quy trình làm việc 9

3.2 Tìm hiểu về Framework Flutter 9

3.3 Tìm hiểu về Firebase 11

C CHƯƠNG 3: Thực hiện dự án 13

1 Thực hiện dự án 13

2 Lịch làm việc 13

D CHƯƠNG 4: Chi tiết dự án 16

1 Giới thiệu 16

2 Thực hiện 18

3 Kế hoạch 18

3.1 Giai đoạn 1 18

3.2 Giai đoạn 2 19

3.3 Giai đoạn 3 19

TỔNG KẾT 20

DANH MỤC TÀI LIỆU THAM KHẢO 21

LỜI MỞ ĐẦU

Việt Nam trong những năm qua phát triển mạnh mẽ về khoa học, kỹ thuật và đặtbiệt là công nghệ thông tin, nhờ những chính sách cởi mở, thúc đẩy phát triển, số hoáhiện đại hoá Ví dụ điển hình và gần nhất chính là các ứng dụng kiểm soát và hỗ trợngười dân chống dịch trong đại dịch Covid 19 đã góp phần không nhỏ vào thành côngđẩy lùi dịch bệnh

Với xu thế phát triển các ứng dụng trên thiết bị di động, các chính sách thúc đẩyphát triển ứng dụng công nghệ cao Những công ty phát triển phần mềm với sứ mệnhtạo ra các sản phẩm của trí tuệ Việt – “made in Vietnam” ngày càng được chú trọng vàtạo điều kiện phát triển và em cho rằng sẽ là xu thế trong tương lai Vì lý do này, emquyết định chọn lập trình ứng dụng di động làm định hướng học tập, phát triển sựnghiệp sau này

Sau khoảng thời gian học tập tại trường, mong muốn có thêm kinh nghiệm thực

tế, tham gia vào môi trường phát triển phần mềm chuyên nghiệp, em quyết định chọnVitalify Asia – một công ty có nền tảng đa quốc gia, chuyên nghiệp và cởi mở để làmnền tảng đầu tiên trong con đường sự nghiệp

Trân trọng cảm ơn, và chúc sức khoẻ

Đồng thời, trân trọng cảm ơn thầy cô trong khoa Công nghệ phần mềm đã nhiệttình hỗ trợ, tạo điều hiện để em thực hiện bài báo cáo.

Nguyễn Dương Tùng – 20/08/2022

NHẬN XÉT CỦA KHOA

A CHƯƠNG 1: Giới thiệu công ty thực tập

1 Giới thiệu chung

 Tên công ty: Vitalify Á Châu (Vitalify Asia)

 Địa chỉ: 224A Điện Biên Phủ, Phường 6, Quận 3, Thành phố Hồ Chí Minh

 Trang web: https://www.vitalify.asia/

 Điện thoại: 028 3932 6293

Vitalyfy Asia được thành lập vào năm 2008, là một công ty outsourcing tập trungvào mảng phát triển phần mềm trên ứng dụng di động với sứ mạng “đưa những giá trịhạnh phúc thông qua internet”

Vitalify Asia có mục tiêu trở thành một công ty chuyên nghiệp có thể đảm nhậncác dự án mang tầm vóc quốc tế Chính sách phát triển của công ty đó là: mỗi nhân sự

từ kỹ sư, quản lý,… có trách nhiệm mở rộng vai trò và phạm vi công việc, tinh thầntrách nhiệm của chính bản thân để mang lại giá trị cho người dùng với cấu trúc tổ chứcphân thành các nhóm nhỏ ưu tú

Sau hơn 10 năm thành lập, Vitalify Asia bước vào một giai đoạn thử thách mớinhằm nâng cao hơn nữa giá trị kỹ thuật của công ty tại Việt Nam Mục tiêu tạo ranhững sản phẩm “made in Vietnam” tiêu chuẩn quốc tế

2 Sản phẩm & dịch vụ của công ty

Vitalify Asia nhận gia công phát triển web và ứng dụng di động cho phù hợp vớiyêu cầu của tôt chức và doanh nghiệp Đội nhóm của Vitalify Asia có tính chất đa quốcgia, có thể hoạt động từ xa, Vitalify Asia cam kết mang đến những sản phẩm với giá trịbền vững và nhanh chóng cho doanh nghiệp

Vitalify Asia có kinh nghiệm phát triển các hệ thống, ứng dụng trên đa dạng cáclĩnh vực, với khả năng hoạt động real-time bao gồm nhiều gia đoạn phát triển khácnhau từ lên kế hoạch, vận hành và phát triển, cập nhật về sau

Các sản phẩm của Vitalify Asia có thể kể đến như sau:

NativeCamp

Nền tảng trực tuyến gia sư dạy tiếng anh chuyên sâu Native Camp là một trongnhững nền tảng trường học tiếng anh lớn nhất tại Nhật Bản Native Camp giúp ngườidùng học tập tiếng Anh với tất cả 4 kỹ năng: nghe, nói, đọc, viết ngoài ra còn có cácchức năng đánh giá, kiểm tra khả năng tiếng Anh, học trực tiếp với giáo viên hoặcthông qua các tài nguyên có sẵn.

Các sản phẩm ứng dụng game

Vitalify Asia phát triển nhiều tựa game giải trí trên thiết bị di động với lối chơiđơn giản Một số trong đó có sử dụng công nghệ AR tăng cường thực tế ảo như FaceEmotion – Xác định cảm xúc, Zombie Doors AR

B CHƯƠNG 2: Nội dung thực tập

Trong khoảng thời gian thực tập tại công ty, sinh viên có cơ hội học tập thêmcác kiến thức chuyên môn, tiếp xúc với các quy trình thực hiện dự án, giải quyết cácvấn đề phát sinh trong một dự án thực tế Sinh viên được nâng cao kĩ năng phần tíchyêu cầu, đặt câu hỏi, tương tác trực tiếp với khách hàng và các thành viên trong độiphát triển Ngoài ra, sinh viên còn có cơ hội phát triển các kỹ năng mềm như nghiêncứu thông tin, thuyết trình, giao tiếp

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ơ cấu tổ chức của công ty, các chấm công, tính

lương, quyền lợi và văn hoá làm việc của công ty

Sinh viên được giới thiệu về cơ cấu tổ chức của công ty, cách phân đội nhóm, cáchthức tiếp nhận dự án của đội nhóm, cách tiếp nhận và giải quyết các task nhiệm vụ vàbáo cáo hàng ngày

Trong thời gian này, sinh viên được công ty đánh giá sơ lược về khả năng đểchuyển về các đội nhóm phù hợp với năng lực Sinh viên được cấp quyền truy cập cáctài nguyên nội bộ, chỉ dẫn của công ty, email domain riêng để tương tác với hệ thốngcủa khách hàng

Kết quả: Có hiểu biết về cơ cấu hoạt động của công ty, quy trình phát triển phần

mềm Scrum, cách tham gia các cuộc họp nội bộ và với khách hàng, cách tiếp nhậnnhiệm vụ và báo cáo hàng ngày

2 Nghiên cứu kỹ thuật

Thời gian: 3 ngày

Nội dung: Trong thời gian chờ đợi được phân vào đội nhóm thực hiện dự án thực

tế cũng như chờ các tài khoản nội bộ được kích hoạt, sinh viên được giao tìm hiểu vềcác cơ chế cơ bản của Flutter như state là gì? widget là gì? Phân biệt tính chất củawidget tree, render tree,… Tìm hiểu về thư viện MobX và kiến trúc BloC dùng để quản

lý state của một ứng dụng Flutter một cách đơn giản và tường minh

Kết quả: Hiểu rõ hơn về Flutter, nắm bắt được các lý thuyết hoạt động của

Framework này Hiểu biết về thư viện MobX và kiến trúc BloC về cách thức vận hànhcũng như xây dựng ứng dụng demo

3 Tìm hiểu và tập huấn quy trình làm việc, kiến thức mới

3.1 Các công cụ và quy trình làm việc

Thời gian: 4 ngày

Nội dung: Sau khi tiếp nhận các tài khoản nội bộ Sinh viên được hướng dẫn

về DevOps, CI/CD, các nguyên tắc, quy ước trong mã nguồn và cách làm việcvới GitLab, quá trình review mà merge mã nguồn Sinh viên được yêu cầu đọc

và review trước mã nguồn, tài liệu của dự án trước khi chính thức nhận nhiệm

vụ thao tác trực tiếp trên mã nguồn

Thực hiện: Tham gia buổi hướng dẫn, đọc các tài liệu liên quan đến các

công cụ được sử dụng để phát triển dự án

Kết quả: Hiểu được tổng quan về dự án, các tác nhân trong và ngoài có liên

quan, hiểu được mã nguồn và các quy ước chung khi thao tác trên dự án Hiểubiết về DevOps, CI/CD và cách thao tác với GitLab

3.2 Tìm hiểu về Framework Flutter

Thời gian: 2 ngày

Nội dung: Được giao nhiệm vụ tìm hiểu các lý thuyết hoạt động của Flutter,

cách thức vận hành của một ứng dụng Flutter Các nội dung chính được tóm tắtnhư sau:

Widget: “Mọi thứ trong Flutter đều là Widget” – một câu nói nổi tiếng trongtài liệu chính thức của Flutter, khi học trên trường, em cũng cho rằng như vậy,tuy nhiên khi tìm hiểu sâu hơn thì Widget dường như là một bản thiết kế, Flutterdựa vào bản thiết kế này để render ra các thành phần UI, các thành phần nàythực chất là Element và RenderObject

Element: Là đại diện cho instance của một Widget tại một vị trí cụ thể trong

hệ thống cây, đây là thành phần UI thật để hiển thị trên màn hình

RenderObject: Chịu trách nhiệm căn chỉnh kích thước, sắp xếp vị trí, canhchỉnh, hoàn thiện tô màu cho Element

Quan hệ giữa Element, Widget và State: Trong hàm runApp, ta truyền vàomột Widget Tree với MyApp là root Widget Flutter sẽ đi từ rôt đến hết cây,mỗi Widget trên cây sẽ gọi hàm createElement để tạo các Element và từ đó tạonên Element Tree Stateful Widget sẽ tạo ra Stateful Element tham chiếu đếnstate cụ thể và Stateless Widget sẽ tạo ra Stateless Element và chỉ tham chiếu

đến Widget

Quan hệ giữa Widget, Element và RenderObject: mỗi RenderObjectElementkhi được gắn lên Element Tree sẽ nhờ widget mà nó đang nắm giữ gọi hàmcreateRenderObject() để tạo ra object renderObject và nó sẽ nắm giữ tham chiếu

của renderObject Từ renderObject sẽ nhờ các hàm paint, performLayout để tạonên giao diện hiển thị.

Quá trình rebuild: Mỗi lần Widget bị rebuild, Element sẽ so sánh Widget vàState xem có gì khác so với ban đầu không rồi đưa đến quyết định xây dựng lại

Cơ chế Hot reload: Khi thực hiện bất kì thay đổi nào trong mã thì có thể thấychúng ngay lập tức mà không cần phải khởi động lại ứng dụng bằng cơ chế thayđổi thêm bớt mã ngay trong run time giúp tiết kiệm thời gian

Thực hiện: Đọc tài liệu, tham gia buổi hướng dẫn, chia sẽ kiến thức.

Kết quả: Có hiểu biết sâu hơn về cách thức vận hành của Framework

Flutter, các ưu điểm và hạn chế so với các Framework khác, khi nào và trongtình huống nào thì nên dùng Framework này

3.3 Tìm hiểu về Firebase

Thời gian: 1 ngày

Nội dung: Tìm hiểu về các dịch vụ của Firebase mà dự án đang sử dụng

như: Authentication, Firebase Cloud Messaging Nội dung chính được tóm tắtnhư sau:

Phone authentication: Cho phép ứng dụng được đăng nhập sử dụng số điệnthoại để xác thực Một SMS sẽ được gửi đến người dùng theo số điện thoại màngười dùng cung cấp, chứa một mã số duy nhất Khi mã số này được xác thựcbởi Firebase, người dùng chuyển thành trạng thái đã đăng nhập

Firebase Cloud Messaging: Là một giải pháp đa nền tảng giúp dễ dàng gửicác đoạn thông báo nhanh chóng và tiết kiệm Server sẽ nhận đoạn tin nhắn cầnthông báo đến người sử dụng ứng dụng Firebase sẽ chịu trách nhiệm gửi đếncác thiết bị có cài đặt ứng dụng thông qua một mã gọi là Token

Thực hiện: Đọc tài liệu, tham gia buổi hướng dẫn, chia sẽ kiến thức.

Kết quả: Biết phương thức hoạt động của dịch vụ Authentication và

Firebase Cloud Messaging được cung cấp bởi Firebase

C CHƯƠNG 3: Thực hiện dự án

1 Thực hiện dự án

Trong khoảng thời gian 1 tháng được hướng dẫn và thực hiện công việc trực tiếptrên dự án thực tế, sinh viên có những hiểu biết sâu sắc hơn về quy trình phát triểnphần mềm Scrum, các kiến thức kỹ thuật liên quan đến phát triển ứng dụng crossplatform Cách tiếp nhận feedback nội bộ cũng như từ khách hàng để hoàn thiện sảnphẩm, đảm bảo chất lượng sản phẩm cao nhất

2 Lịch làm việc

Tuầ

Người hướng dẫn

Mức độ hoàn thành

Nhận xét của người hướng dẫn

1

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

chức sắp xếp đội nhóm của

công ty

Làm quen với các công cụ

giao tiếp, hệ thống của công

ty

Học cách tham gia các cuộc

họp, báo cáo hàng ngày

báo cáo, cách push code và

pull request trên GitLabs

NguyễnThị Nhi 100% Hoàn thành tốt

3 Tham gia họp Daily Scrum Nguyễn 100% Hoàn thành tốt

Tham gia họp lấy ý kiến và

4

Tham gia họp Daily Scrum

Tham gia họp lấy ý kiến và

HuỳnhVăn Trận

100% Hoàn thành tốt

5

Tham gia họp Daily Scrum

Tham gia họp lấy ý kiến và

HuỳnhVăn Trận

100% Hoàn thành tốt

6 Tham gia họp Daily Scrum

Tham gia họp lấy ý kiến và

yêu cầu khách hàng

NguyễnThị Nhi

100% Hoàn thành tốt

Tham gia họp Daily Scrum

Tham gia họp lấy ý kiến và

HuỳnhVăn Trận

100% Hoàn thành tốt

8

Hoàn thành các tài liệu thực

tập

Tham gia các cuộc họp

review, đánh giá quá trình

thực tập và các chức năng đã

thực hiện

NguyễnThị Nhi 100% Hoàn thành tốt

D CHƯƠNG 4: Chi tiết dự án

1 Giới thiệu

Tên Project: dgHome

Mô tả: Là phần mềm được phát triển bởi Vitalify Asia dành cho đối tác là

Mitsubishi và Vinhome Ứng dụng giúp quảng bá sản phẩm là các căn hộ của Vinhomebao gồm các hình ảnh, bài viết liên quan, xem 3D mô phỏng căn hộ, chăm sóc khách hàng, xem báo giá dự tính,…

Một số hình ảnh của phần mềm:

- Đọc, tìm hiểu các tài liệu khởi tạo của dự án

- Đọc, tìm hiểu bản thiết kế UI/UX của ứng dụng

- Đọc, tìm hiểu các framework, thư viện liên quan của dự án

3.2 Giai đoạn 2

- Tham gia chính thức vào dự án với quy trình làm việc Scrum, tham gia họp

kế hoạch đầu tuần, daily scrum, họp cuối tuần đánh giá

- Nhận các nhiệm vụ phù hợp với năng lực

- Nhận đánh giá và hướng dẫn từ cấp trên trực tiếp

- Sửa các lỗi phát sinh (nếu có) trong quá trình release sản phẩm cho khách hàng

3.3 Giai đoạn 3

- Đánh giá kết quả thực tập

- Hoàn thành tài liệu thực tập

TỔNG KẾT

Trong khoảng thời gian thực tập ngắn, em đã có thêm những kiến thức và kĩnăng thực tế, có cơ hội áp dụng những gì đã học trên ghế nhà trường Tuy còn nhiềuthiếu sót và non nớt về kinh nghiệm, em cho rằng công việc thực tập đầu tiên này sẽ lànền tảng, bệ phóng cho con đường sự nghiệp trong tương lai

Một lần nữa, chân thành cảm ơn các anh chị tại công ty Vitalify Asia đã tận tình

hỗ trợ và giúp đỡ trong quá trình thực tập & các thầy cô khoa Công nghệ phần mềm đãtạo điều kiện để em có thể hoàn thành kì thực tập

DANH MỤC TÀI LIỆU THAM KHẢO

Flutter Document, truy cập 05/08/2022, từ https://flutter.dev/

FlutterFire Overview, truy cập 06/08/2022, từ