lập trình ứng dụng di độ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 DI ĐỢNG VỚI FLUTTER Cơng ty thực tập : Cơng ty TNHH Nông Nghiệp Công Nghệ Cao Người phụ trách : Anh Nguyễn Thành Công Thực tập sinh : Châu Q́c Thắng 18521385 TP Hồ Chí Minh, tháng 12 năm 2021 Người hướng dẫn: Nguyễn Thành Công Sinh viên thực tập: Châu Quốc Thắng LỜI MỞ ĐẦU Thời đại công nghệ số 4.0, với sự phát triển vũ bão Internet, xu hướng kinh doanh trực tuyến hay bán hàng online đem lại hiệu kinh tế cho nhiều ngành nghề kinh doanh 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ạ xã hội hay lĩnh vực mới mẻ nước ta Có thể coi năm 2020, đại dịch COVID-19 mang đến nhiều biến động đối với kinh tế và sự tăng trưởng bứt phá TMĐT góp phần đưa Việt Nam trở thành thị trường tiềm giới Với mạnh là dân số trẻ 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ử smartphone nhiều, thị trường TMĐT Việt Nam tăng trưởng nhanh với lượng doanh thu khủng Sau ba năm học tập trường, mong ḿn có thêm kinh nghiệm thực tế, muốn tham gia phát triển ứng dụng di động, em có dự định sẽ thực tập Vì vậy, em định thực tập công ty TNHH Nông Nghiệp Công Nghệ Cao để mở rộng kiến thức công nghệ tích lũy kinh nghiệm làm việc môi trường công ty Người hướng dẫn: Nguyễn Thành Công Sinh viên thực tập: Châu Quốc Thắng 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ó hội thực tập công ty Chỉ thời gian ngắn, nhờ sự dẫn nhiệt tình anh chị team, em tiếp thu kiến thức quan trọng việc xây dựng ứng dụng di động bằng framework Flutter, kiến thức 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 kiến thức chuyên sâu Flutter và GraphQL 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 Châu Quốc Thắng Tp HCM, ngày 24 tháng 12 năm 2021 Người hướng dẫn: Nguyễn Thành Công Sinh viên thực tập: Châu Quốc Thắng NHẬN XÉT CỦA KHOA Người hướng dẫn: Nguyễn Thành Công Sinh viên thực tập: Châu Quốc Thắng MỤC LỤC Chương 1: Giới thiệu công ty thực tập 1.Giới thiệu công ty 2.Sản phẩm công ty Chương 2: Nội dung thực tập 1.Tìm hiểu cơng ty và kỹ công ty 2.Nghiên cứu kỹ thuật 2.1.Các công cụ làm việc 2.2.Lập trình cross-platform với framework Flutter 2.3.Sử dụng thư viện Getx để quản lí state 2.4.Tìm hiểu lý thuyết GraphQL 2.5.Tìm hiểu mơ hình MVVM 10 2.6.Tìm hiểu FCM 10 3.Thực project 11 4.Lịch làm việc 11 Chương 3: Chi tiết project 13 1.Giới thiệu ứng dụng 13 2.Giao diện ứng dụng 14 Người hướng dẫn: Nguyễn Thành Công Sinh viên thực tập: Châu Quốc Thắng 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ẻ sản phẩm trồng 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à người chơi cảnh, người trồng rau gia 2.Sản phẩm công ty “Bác sĩ xanh” (BSCX) là tảng thương mại điện tử với mơ hình B2C chuyên bán sản phẩm công ty, cho phép người dùng xem, tìm kiếm sản phẩm và đặt hàng, tốn qua ví điện tử, tảng cịn đưa bài đăng giới thiệu sản phẩm, chủ đề trồng viết đội ngũ content writer Ngoài tảng này cịn cung cấp cho người dùng mẹo trờng cây, cách phát dấu hiệu nấm bệnh và cách xử lí, ứng dụng có liệu 50 loại trồng phổ biến BSCX có tảng web (bacsicayxanh.vn ) và Andoid/iOS (Bacsicayxanh) Người hướng dẫn: Nguyễn Thành Công Sinh viên thực tập: Châu Quốc Thắng Chương 2: Nội dung thực tập Trong đợi thực tập này, sinh viên tiếp cận và tìm hiểu quy trình, nội quy làm việc công ty, nghiệp vụ dự án, kiến thức framework Flutter, GraphQL kỹ mềm khác 1.Tìm hiểu cơng ty và kỹ công ty 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 và phát triển (như nhắc đến trên), quy trình làm việc từ cao x́ng thấp, cách thức tổ chức công ty Ngoài ra, thực tập sinh 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ủ, cách sử dụng email công việc… Kết : Hiểu thêm cơng ty CNC, q trình thành lập và 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 2.Nghiên cứu kỹ thuật 2.1.Các cơng cụ làm việc Tìm hiểu cơng cụ sẽ sử dụng 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 cơng cụ sẽ giúp ích cho cơng việc sau này Một sớ phần mềm, cơng cụ sớ như: Android Studio: IDE hỗ trợ phát triển ứng dụng di động GitLab: Hệ thống quản lí mã nguồn dự án Postman: Công cụ cho phép gọi và tương tác với REST API Thực : Thực hành sử dụng phần mềm nêu Kết : Sử dụng hiệu phần mềm và công cụ nêu 2.2.Lập trình cross-platform với framework Flutter Có nhiều framework hỗ trợ phát triển ứng dụng mobile Android cung cấp framework dựa ngôn ngữ lập trình Java Kotlin cịn iOS cung cấp framework dựa Objective-C / Swift Người hướng dẫn: Nguyễn Thành Công Sinh viên thực tập: Châu Quốc Thắng Tuy nhiên hầu hết ứng dụng nay, hỗ trợ tảng Android và iOS, lúc phát triển dự án khác với framework khác là 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 framework lập trình đa tảng để giải vấn đề này Một framework phổ biến là React Native phát triển bới Facebook sử dụng rộng rãi Tuy nhiên React Native vẫn thông qua API framework gớc Android hay iOS bị hạn chế và tốc độ kém Như sự phát triển tương lai, Flutter phát triển bới chính Google, đơn vị sở hữu Android đối trọng trực tiếp với React Native Thay gọi API framework gốc, Flutter tạo giao diện trực tiếp từ API hệ điều hành Nhờ ứng dụng sẽ chạy nhanh hơn, mượt mà và đẹp Flutter cung cấp nhiều widgets (UI) là thành phần đồ hoạ thiết kế riêng Những đối tượng đồ hoạ này tối ưu phù hợp với môi trường mobile và dễ dàng việc thiết kế HTML Cụ thể, ứng dụng Flutter sẽ sử dụng widget riêng Flutter widgets cung cấp animations (hiệu ứng) và gestures (thao tác) riêng Ứng dụng phát triển dựa logic reactive programming Mỗi Widget sẽ có nhiều trạng thái Bằng cách thay đổi trạng thái widget, Flutter sẽ tự động (reactive programming) so sánh trạng thái widget (cũ và mới) để tạo thay đởi cần thiết thay khởi tạo lại đới tượng Thực : Ơn tập lý thuyết framework Flutter Kết : 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à thơng tin đọc cách đồng Widget xây dựng và thay đởi śt vịng đời Widget Đối tượng State tạo Flutter framework Để thay đổi Widget, bạn cần cập nhật trạng thái đối tượng bằng hàm setState(), hàm này nằm Stateful Widget Hàm setState() cài đặt thuộc tính đối tượng State và cập nhật giao diện người dùng Mặc dù Flutter cung cấp phương thức và widget cho việc quản lí state (InheritedWidget) đới với dự án lớn việc áp dụng cách quản lí state này rắc rối và phức tạp, code sẽ có nhiều boilerplate Vì vậy để giải việc này, cộng đồng sử dụng Flutter cho đời nhiều thư viện quản lí state khác Provider, BloC, Riverpod, thư viện phổ biến và dễ sử dụng là Getx Ngoài khả quản lí state, Getx cung cấp API khác cho việc quản lí route (navigation), quản lí dependency Sử dụng Observable design pattern, Getx giúp Người hướng dẫn: Nguyễn Thành Công Sinh viên thực tập: Châu Quốc Thắng Flutter chạy nhanh hơn, lắng nghe thay đổi giá trị Widget và rebuild lại widget Thực : Đọc document thư viện Getx, đặt câu hỏi với người hướng dẫn Kết : Xây dựng ứng dụng demo sử dụng Getx 2.4.Tìm hiểu lý thuyết GraphQL - Khái niệm GraphQL: GraphQL là ngôn ngữ thao tác truy vấn liệu nguồn mở cho API, cung cấp cho client cách thức dễ dàng để request chính xác họ cần, giúp việc phát triển API dễ dàng theo thời gian GraphQL Facebook phát triển nội vào năm 2012 trước phát hành công khai vào năm 2015 GraphQL bao gồm điểm đặc trưng bao gồm: + Cho phép client xác định chính xác liệu họ cần + GraphQL làm cho việc tởng hợp liệu từ nhiều nguồn dễ dàng + Sử dụng type system để khai báo liệu GraphQL sở hữu riêng hệ thống cho nhu cầu xác định schema API nào Khi đó, toàn type hệ thống liệt kê API định sẽ viết cụ thể schema và sử dụng GraphQL Schema Definition Language để thực tất hoạt động và thao tác cần cho ứng dụng Schema xem giao dịch client và server để từ mà GraphQL xác định client rời truy cập thông tin, liệu Sau thực xong team frontend tiến hành mock data rời kiểm tra kỹ lưỡng component Từ đó, team back-end chuẩn bị công việc và hoạt động cần thiết cho server Đây là tính hữu ích GraphQL với hệ thống liệu Nhờ vậy, mà trình chạy ứng dụng sẽ hiệu và nhanh chóng Thực : Đọc document GraphQL và nắm rõ lý thuyết Kết : Viết câu query để lấy liệu dựa theo schema dự án Người hướng dẫn: Nguyễn Thành Cơng Sinh viên thực tập: Châu Q́c Thắng 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 nhiều lập trình viên sử dụng, khắc phục tất nhược điểm mẫu thiết kế MVP và MVC MVVM đề xuất tách logic trình bày liệu (View UI) khỏi phần logic nghiệp vụ cốt lõi ứng dụng Kiến trúc này thường sử dụng phổ biến lập trình Android, năm 2017 Google đưa Architecture Components dựa kiến trúc MVVM nhằm giúp việc xây và bảo trì dự án dễ dàng View là thành phần mà người dùng tương tác chương trình, là thành phần mơ tả liệu Trong lập trình android, View là activity, fragment, hay custom view Trong Flutter, là widget lớn ví dụ Scaffold ViewModel là abstraction View Nó sẽ lấy 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ó behavior nào để tương tác với View Như vậy để nhận biết nào cần hiển thị liệu, View sẽ đăng ký nhận notification từ ViewModel Model sẽ chứa toàn business logic, mix luồng liệu (giữa local data và remote data) trước liệu hiển thị cho client Model chứa object và thành phần liệu Thực : Đọ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 tảng cho phép phân phối tin nhắn (notification) tới client Những tính chính FCM bao gồm: + Gửi tin nhắn thông báo hiển thị cho người dùng Hoặc gửi tin nhắn liệu và xác định hoàn toàn xảy 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 cách: tới thiết bị đơn lẻ, tới nhóm thiết bị tới thiết bị đăng ký theo chủ đề + Gửi xác nhận, trò chuyện và tin nhắn khác từ 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 FCM Người hướng dẫn: Nguyễn Thành Công Sinh viên thực tập: Châu Quốc Thắng 3.Thực hiện project Sau tháng training và thực hành, thực tập sinh nắm kiến thực Flutter, GraphQL, FCM Trong tháng thứ hai, trainer hướng dẫn thực tập sinh áp dụng kiến thức học vào dự án thực tế 4.Lịch làm việc Tuần Công việc - - - - - Tìm hiểu cơng ty, cách tổ chức công ty 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 Tìm hiểu framework Flutter Tìm hiểu cơng cụ sử dụng dự án Tìm hiểu GraphQL Thực hành luyện tập viết câu query Tìm hiểu kiến trúc MVVM Tìm hiểu FCM, áp dụng vào ứng dụng để gửi notification đến người dùng Xây dựng màn hình ứng dụng theo design có sẵn Implement chức chia sẻ thơng tin sản phẩm, thông tin sâu bệnh, Người hướng dẫn: Ngũn Thành Cơng Người hướng dẫn Mức độ hồn thành Nhận xét người hướng dẫn Anh Phan Hữu Chí Anh Phan Hữu Chí Anh Nguyễn Thành Công Anh Nguyễn Thành Công Anh Nguyễn Thành Công Anh Nguyễn Thành Công Anh Nguyễn Thành Công Sinh viên thực tập: Châu Quốc Thắng trồng Refactor lại source Anh Nguyễn code ứng dụng Thành Công theo chuẩn kiến trúc MVVM Người hướng dẫn: Nguyễn Thành Công Sinh viên thực tập: Châu Quốc Thắng Chương 3: Chi tiết project 1.Giới thiệu ứng dụng Ứng dụng “Bác sĩ xanh” (BSCX) là tảng thương mại điện tử với mô hình B2C chun bán sản phẩm cơng ty, cho phép người dùng xem, tìm kiếm sản phẩm và đặt hàng, toán qua ví điện tử, ứng dụng đưa bài đăng giới thiệu sản phẩm, chủ đề trồng viết đội ngũ content writer Ngoài ứng dụng cịn cung cấp cho người dùng mẹo trờng cây, dấu hiệu nấm bệnh và cách xử lí, ứng dụng có liệu 50 loại trồng và phổ biến Các chức 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 chủ đề cảnh, nông nghiệp + Đặt hàng, toán qua ví điện tử + Scan mã QR bao bì sản phẩm để xem hướng dẫn sử dụng + Xem mẹo trồng cây, nấm bệnh thường gặp với 50 loại trồng khác Người hướng dẫn: Nguyễn Thành Công Sinh viên thực tập: Châu Q́c Thắng 2.Giao diện ứng dụng Màn hình trang chủ: Người hướng dẫn: Nguyễn Thành Công Sinh viên thực tập: Châu Q́c Thắng Màn hình cửa hàng Người hướng dẫn: Nguyễn Thành Công Sinh viên thực tập: Châu Q́c Thắng Màn hình chi tiết sản phẩm Người hướng dẫn: Nguyễn Thành Công Sinh viên thực tập: Châu Quốc Thắng Màn hình thơng báo người dùng Người hướng dẫn: Nguyễn Thành Công Sinh viên thực tập: Châu Quốc Thắng Màn hình mẹo trờng và chi tiết bệnh trồng Người hướng dẫn: Nguyễn Thành Công Sinh viên thực tập: Châu Quốc Thắng TÀI LIỆU THAM KHẢO Flutter: docs.flutter.dev, medium.com/flutter Getx: chornthorn.github.io/getx-docs/ GraphQL: graphql.org/learn FCM: firebase.google.com/docs/cloud-messaging MVVM: developer.android.com/jetpack/guide Người hướng dẫn: Nguyễn Thành Công Sinh viên thực tập: Châu Quốc Thắng TỔNG KẾT Như vậy, vòng vài tháng ngắn ngủi, em có thêm kiến thức cơng nghệ mới quy trình và cách làm việc cơng ty Chân thành cảm ơn sự giúp đỡ anh chị phòng ban khác và team IT hỗ trợ em hoàn thành kì thực tập Người hướng dẫn: Nguyễn Thành Công Sinh viên thực tập: Châu Quốc Thắng ... mềm và cơng cụ nêu 2.2 .Lập trình cross-platform với framework Flutter Có nhiều framework hỗ trợ phát triển ứng dụng mobile Android cung cấp framework dựa ngơn ngữ lập trình Java Kotlin cịn... dựng ứng dụng di động bằng framework Flutter, kiến thức 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 kiến thức chuyên sâu Flutter. .. lai, Flutter phát triển bới chính Google, đơn vị sở hữu Android đối trọng trực tiếp với React Native Thay gọi API framework gớc, Flutter tạo giao di? ??n trực tiếp từ API hệ điều hành Nhờ ứng