lập trình ứng dụng di động với FLUTTER

Chỉ trong một thời gian ngắn, nhưng nhờ sự chỉ dẫn nhiệt tình của các anh chị trong team, em đã tiếp thu được những kiến thức quan trọng trong việc xây dựng ứng dụng di động bằng

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

VỚI FLUTTER

Công ty thực tập : Công ty TNHH Nông Nghiệp

Công Nghệ Cao

Thực tập sinh : Châu Quốc Thắng -

18521385

TP Hồ Chí Minh, tháng 12 năm 2021

LỜI MỞ ĐẦU

Thời đại công nghệ số 4.0, cùng với sự phát triển như vũ bão của Internet, xu hướng kinh doanh trực tuyến hay bán hàng online đã đem lại hiệu quả kinh tế cho rất nhiều ngành nghề kinh doanh tại Việt Nam

Những năm gần đây, “thương mại điện tử” (TMĐT) đã không còn là khái niệm xa lạ trong xã hội hay một lĩnh vực mới mẻ tại nước ta Có thể coi năm 2020, đại dịch COVID-19 đã mang đến nhiều biến động đối với nền kinh tế và sự tăng trưởng bứt phá của TMĐT đã góp phần đưa Việt Nam trở thành một trong những thị trường tiềm năng của thế giới

Với thế mạnh là dân số trẻ cũng như lượng người dùng smartphone chiếm tỷ trọng lớn, lượng người giao dịch thương mại điện tử trên smartphone nhiều, thị trường TMĐT tại Việt Nam hiện tăng trưởng khá nhanh cùng với lượng doanh thu khủng

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 phát triển ứng dụng di động, em có dự định sẽ đi thực tập Vì vậy, em quyết định thực tập tại công ty TNHH Nông Nghiệp Công Nghệ Cao để mở rộng kiến thức về công nghệ cũng như tích lũy kinh nghiệm làm việc ở môi trường công ty

LỜI CẢM ƠN

Trân trọng gửi lời cảm ơn Công ty TNHH Nông Nghiệp Công Nghệ Cao đã 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 các anh chị trong team, em đã tiếp thu được những kiến thức quan trọng trong việc xây dựng ứng dụng di động bằng framework Flutter, cũng như các kiến thức về nghiệp vụ thương mại điện tử

Đặc biệt cảm ơn anh Công và anh Chí đã bỏ thời gian, và công sức để hướng dẫn em những kiến thức chuyên sâu trong Flutter và GraphQL

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

Châu Quốc Thắng

Tp HCM, ngày 24 tháng 12 năm 2021

NHẬN XÉT CỦA KHOA

MỤC LỤC

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

1.Giới thiệu công ty 6

2.Sản phẩm của công ty 6

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.Lập trình cross-platform với framework Flutter 7

2.3.Sử dụng thư viện Getx để quản lí state 8

2.4.Tìm hiểu lý thuyết GraphQL 9

2.5.Tìm hiểu mô hình MVVM 10

2.6.Tìm hiểu FCM 10

3.Thực hiện project 11

4.Lịch làm việc 11

Chương 3: Chi tiết về project 13

1.Giới thiệu về ứng dụng 13

2.Giao diện ứng dụng 14

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

1.Giới thiệu công ty

Công ty TNHH Nông Nghiệp Công Nghệ Cao (CNC) chuyên phân phối sỉ & lẻ các sản phẩm về cây trồng như thuốc bảo vệ thực vật, phân bón, xử lí đất, xử lí nước và phòng nấm bệnh Đối tượng khách hàng chủ yếu là các người chơi cây cảnh, hoặc những người trồng rau tại gia

2.Sản phẩm của công ty

“Bác sĩ cây xanh” (BSCX) là nền tảng thương mại điện tử với mô hình B2C chuyên bán các sản phẩm của công ty, cho phép người dùng xem, tìm kiếm sản phẩm và đặt hàng, thanh toán qua ví điện tử, nền tảng còn đưa ra những bài đăng giới thiệu về các sản phẩm, cũng như về chủ đề cây trồng được viết bởi đội ngũ content writer Ngoài

ra nền tảng này còn cung cấp cho người dùng các mẹo trồng cây, cách phát hiện các dấu hiệu nấm bệnh trên cây và cách xử lí, hiện tại ứng dụng có dữ liệu của hơn 50 loại cây trồng phổ biến

BSCX hiện có trên nền tảng web (bacsicayxanh.vn ) và trên Andoid/iOS (Bacsicayxanh)

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

Trong đợi thực tập này, sinh viên được tiếp cận và tìm hiểu các quy trình, nội quy làm việc trong công ty, các nghiệp vụ của dự án, kiến thức về framework Flutter, GraphQL cũng như các kỹ năng mềm khác

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

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 đi làm, các quy định cần phải tuân thủ, cách sử dụng email trong công việc…

Kết quả : Hiểu thêm về công ty CNC, 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

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, người hướng dẫn đã 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, công cụ trong số đó như:

Android Studio: IDE hỗ trợ phát triển các ứng dụng di động

GitLab: Hệ thống quản lí mã nguồn của dự án Postman: Công cụ cho phép gọi và tương tác với các REST API

Thực hiện : Thực hành sử dụng các phần mềm đã nêu trên

Kết quả : Sử dụng hiệu quả các phần mềm và công cụ đã nêu trên

2.2.Lập trình cross-platform với framework Flutter

Có rất nhiều framework hỗ trợ phát triển một ứng dụng mobile Android cung cấp một framework cơ bản dựa trên ngôn ngữ lập trình Java hoặc Kotlin còn iOS thì cung cấp framework dựa trên Objective-C / Swift

Tuy nhiên hầu hết các ứng dụng hiện nay, đều hỗ trợ cả 2 nền tảng Android và iOS,

do đó cùng lúc phát triển 2 dự án khác nhau với 2 framework khác nhau là một công việc phức tạp và lãng phí thời gian công sức Do đó người ta đã phát triển các framework lập trình đa nền tảng để giải quyết vấn đề này Một framework rất phổ biến hiện nay là React Native được phát triển bới Facebook đang được sử dụng rất rộng rãi Tuy nhiên React Native vẫn thông qua các API của các framework gốc như Android hay iOS do đó bị hạn chế và tốc độ kém

Như một sự phát triển của tương lai, Flutter được phát triển bới chính Google, đơn vị

sở hữu Android như một đối trọng trực tiếp với React Native Thay vì gọi các API của framework gốc, Flutter tạo ra giao diện trực tiếp từ API của hệ điều hành Nhờ đó ứng dụng sẽ chạy nhanh hơn, mượt mà hơn và đẹp hơn

Flutter cung cấp rất nhiều widgets (UI) là các thành phần đồ hoạ được thiết kế riêng Những đối tượng đồ hoạ này được tối ưu phù hợp với môi trường mobile và dễ dàng trong việc thiết kế như HTML

Cụ thể, ứng dụng Flutter sẽ sử dụng các widget riêng Flutter widgets cung cấp các animations (hiệu ứng) và gestures (thao tác) riêng Ứng dụng được phát triển dựa trên logic của reactive programming Mỗi Widget sẽ có rất nhiều trạng thái Bằng cách thay đổi trạng thái của widget, Flutter sẽ tự động (reactive programming) so sánh trạng thái của widget (cũ và mới) để tạo ra những thay đổi cần thiết thay vì khởi tạo lại cả đối tượng

Thực hiện : Ôn tập các lý thuyết về framework Flutter

Kết quả : Nắm rõ lý thuyết framework Flutter

2.3.Sử dụng thư viện Getx để quản lí state

Theo Flutter, State là những thông tin có thể được đọc một cách đồng bộ khi Widget được xây dựng và có thể thay đổi trong suốt vòng đời của Widget Đối tượng State được tạo ra bởi Flutter framework Để thay đổi Widget, bạn cần cập nhật trạng thái của đối tượng bằng hàm setState(), hàm này nằm trong các Stateful Widget Hàm setState() cài đặt thuộc tính của đối tượng State và cập nhật giao diện người dùng Mặc dù Flutter đã cung cấp các phương thức và widget cho việc quản lí state (InheritedWidget) nhưng đối với một dự án lớn thì việc áp dụng cách quản lí state này rất rắc rối và phức tạp, code sẽ có nhiều boilerplate Vì vậy để giải quyết việc này, cộng đồng sử dụng Flutter đã cho ra đời nhiều thư viện quản lí state khác nhau như Provider, BloC, Riverpod, nhưng thư viện phổ biến và dễ sử dụng nhất là Getx Ngoài khả năng quản lí state, Getx còn cung cấp các API khác cho việc quản lí route (navigation), quản lí dependency Sử dụng Observable design pattern, Getx giúp

Flutter chạy nhanh hơn, lắng nghe các thay đổi giá trị của Widget và chỉ rebuild lại những widget đó

Thực hiện : Đọc document của thư viện Getx, đặt câu hỏi với người hướng dẫn

Kết quả : Xây dựng một ứng dụng demo sử dụng Getx

2.4.Tìm hiểu lý thuyết GraphQL

- Khái niệm cơ bản về GraphQL:

GraphQL là ngôn ngữ thao tác và truy vấn dữ liệu nguồn mở cho API, cung cấp cho client 1 cách thức dễ dàng để request chính xác những gì họ cần, giúp việc phát triển API dễ dàng hơn theo thời gian GraphQL được Facebook phát triển nội bộ vào năm

2012 trước khi phát hành công khai vào năm 2015

GraphQL bao gồm 3 điểm đặc trưng bao gồm:

+ Cho phép client xác định chính xác những dữ liệu gì họ cần + GraphQL làm cho việc tổng hợp dữ liệu từ nhiều nguồn dễ dàng hơn + Sử dụng một type system để khai báo dữ liệu

GraphQL đã sở hữu riêng một hệ thống cho nhu cầu xác định các schema của API nào đó Khi đó, toàn bộ type của hệ thống khi được liệt kê trong một API nhất định thì sẽ được viết cụ thể trong các schema và sử dụng GraphQL Schema Definition Language để thực hiện tất cả hoạt động và thao tác cần cho ứng dụng

Schema được xem như một bản giao dịch giữa client và server để từ đó mà GraphQL

có thể xác định được client rồi truy cập thông tin, dữ liệu Sau khi đã thực hiện xong team frontend có thể tiến hành mock data rồi kiểm tra kỹ lưỡng các component

Từ đó, team back-end cũng chuẩn bị được những công việc và hoạt động cần thiết cho server Đây là một trong những tính năng hữu ích của GraphQL với hệ thống dữ liệu Nhờ vậy, mà quá trình chạy các ứng dụng sẽ hiệu quả và nhanh chóng hơn

Thực hiện : Đọc document của GraphQL và nắm rõ lý thuyết

Kết quả : Viết được các câu query để lấy dữ liệu dựa theo schema của dự án

2.5.Tìm hiểu mô hình MVVM

Model - View - ViewModel (MVVM) là mẫu kiến trúc phần mềm đã được nhiều lập trình viên sử dụng, nó khắc phục tất cả các nhược điểm của các mẫu thiết kế MVP và MVC MVVM đề xuất tách logic trình bày dữ liệu (View hoặc UI) khỏi phần logic nghiệp vụ cốt lõi của ứng dụng Kiến trúc này thường được sử dụng phổ biến trong lập trình Android, năm 2017 Google đã đưa ra các Architecture Components dựa trên kiến trúc MVVM nhằm giúp việc xây và bảo trì dự án dễ dàng hơn

View là thành phần duy nhất mà người dùng có thể tương tác được trong chương trình, nó chính là thành phần mô tả dữ liệu Trong lập trình android, View là một activity, fragment, hay một custom view Trong Flutter, nó là các widget lớn ví dụ như Scaffold

ViewModel là một abstraction của View Nó sẽ lấy dữ liệu từ tầng Model, xử lý UI logic sau đó hiển thị data có liên quan tới view ViewModel sẽ không có bất kỳ behavior nào để tương tác với View Như vậy để nhận biết khi nào cần hiển thị dữ liệu, View sẽ đăng ký nhận notification từ ViewModel

Model sẽ chứa toàn bộ business logic, mix giữa các luồng dữ liệu (giữa local data và remote data) trước khi dữ liệu đó được hiển thị cho client Model còn chứa các object và các thành phần dữ liệu

Thực hiện : Đọc lý thuyết MVVM và áp dụng vào ứng dụng demo

Kết quả: Refactor lại source code ứng dụng theo kiến trúc MVVM

2.6.Tìm hiểu FCM

Firebase Cloud Messaging (FCM) là giải pháp tin nhắn đa nền tảng cho phép phân phối tin nhắn (notification) tới các client Những tính năng chính của FCM bao gồm: + Gửi tin nhắn thông báo được hiển thị cho người dùng Hoặc gửi tin nhắn dữ liệu và xác định hoàn toàn những gì xảy ra trong mã ứng dụng Xem Các loại tin nhắn

+ Phân phối tin nhắn tới ứng dụng theo 3 cách: tới các thiết bị đơn lẻ, tới các nhóm thiết bị hoặc tới các thiết bị đã đăng ký theo chủ đề

+ Gửi xác nhận, cuộc trò chuyện và các tin nhắn khác từ các thiết bị trở lại máy chủ qua kênh kết nối đáng tin cậy và tiết kiệm pin của FCM

3.Thực hiện project

Sau một tháng được training và thực hành, thực tập sinh đã nắm được những kiến thực

cơ bản về Flutter, GraphQL, FCM Trong tháng thứ hai, trainer đã hướng dẫn thực tập sinh áp dụng những kiến thức đã học vào trong dự án thực tế

4.Lịch làm việc

Tuần Công việc 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á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àm việc qua email

Anh Phan Hữu Chí

2

- Tìm hiểu framework Flutter

- Tìm hiểu các công cụ sử dụng trong dự

án

Anh Phan Hữu Chí

3

- Tìm hiểu về GraphQL

- Thực hành luyện tập viết các câu query

Anh Nguyễn Thành Công

4 - Tìm hiểu về kiến

trúc MVVM

Anh Nguyễn Thành Công

5

- Tìm hiểu FCM, áp dụng vào ứng dụng

để gửi notification đến người dùng

Anh Nguyễn Thành Công

6

- Xây dựng các màn hình của ứng dụng theo design đã có sẵn

Anh Nguyễn Thành Công

7

- Implement chức năng chia sẻ thông tin sản phẩm, thông tin sâu bệnh, cây

Anh Nguyễn Thành Công

trồng

8

- Refactor lại source code của ứng dụng theo chuẩn kiến trúc MVVM

Anh Nguyễn Thành Công

Chương 3: Chi tiết về project

1.Giới thiệu về ứng dụng

Ứng dụng “Bác sĩ cây xanh” (BSCX) là nền tảng thương mại điện tử với mô hình B2C chuyên bán các sản phẩm của công ty, cho phép người dùng xem, tìm kiếm sản phẩm và đặt hàng, thanh toán qua ví điện tử, ứng dụng còn đưa ra những bài đăng giới thiệu về các sản phẩm, cũng như về chủ đề cây trồng được viết bởi đội ngũ content writer Ngoài

ra ứng dụng còn cung cấp cho người dùng các mẹo trồng cây, các dấu hiệu nấm bệnh trên cây và cách xử lí, hiện tại ứng dụng có dữ liệu của hơn 50 loại cây trồng và phổ biến

Các chức năng chính:

+ Tìm kiếm, lọc sản phẩm

+ Xem chi tiết sản phẩm và đánh giá

+ Đọc tin tức, bài viết về chủ đề cây cảnh, nông nghiệp

+ Đặt hàng, thanh toán qua ví điện tử

+ Scan mã QR trên bao bì sản phẩm để xem hướng dẫn sử dụng

+ Xem các mẹo trồng cây, nấm bệnh thường gặp với hơn 50 loại cây trồng khác nhau