BÁO CÁO THỰC TẬP LẬP TRÌNH FLUTTER TRÊN ANDROID

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 FLUTTER TRÊN ANDROID Công ty thực tập : Công ty cổ phần KiteMetric Người phụ trách : Phạm Hoàng Hải Thực tập sinh : Trần Lê Bảo Châu TP Hồ Chí Minh, tháng năm 2022 Phạm Hoàng Hải Trần Lê Bảo Châu LỜI MỞ ĐẦU Ở thời điểm bùng phát thông tin tại, thiết bị di động gần trở thành phần thiếu sống người Thiết bị di động phát triển với tốc độ vô mạng mẽ, mà kéo theo phát triển “chóng mặt” ứng dụng di động Hòa chung với phát triển ấy, nhiều công ty Việt Nam tham gia vào đua phát triển ứng dụng thiết bị di động KiteMetric số Không phát triển ứng dụng framework cũ, cơng ty cịn đặt chân vào sử dụng framework Flutter, framework phát triển Google thời gian gần Do đó, em nghĩ mơi trường động, tiếp thu mới, thuận lợi để giúp đỡ em bước đầu đường phát triển ứng dụng di động với Flutter Phạm Hoàng Hải Trần Lê Bảo Châu LỜI CẢM ƠN Trân trọng gửi lời cảm ơn Công ty KiteMetric Việt Nam 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 Flutter 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 thầy Phạm Hoàng Hải, training Flutter, Dart, boilerplate, 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 mới, … để làm sản phẩm thời gian qua 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 Trần Lê Bảo Châu TP HCM, ngày 15 tháng 06 năm 2022 Phạm Hoàng Hải Trần Lê Bảo Châu NHẬN XÉT CỦA KHOA Phạm Hoàng Hải Trần Lê Bảo Châu MỤC LỤC Chương 1: Giới thiệu công ty thực tập Giới thiệu công ty KiteMetric Sản phẩm công ty Chương 2: Nội dung thực tập Nghiên cứu kỹ thuật 1.1 Nghiên cứu cơng cụ, quy trình 1.2 Nghiên cứu ngôn ngữ, template Thực project Lịch làm việc Chương 3: Chi tiết project 12 Giới thiệu project 12 1.1 Yêu cầu chức 12 1.2 Yêu cầu phi chức 12 Thực 12 Kế hoạch 12 TÀI LIỆU THAM KHẢO 15 Phạm Hoàng Hải Trần Lê Bảo Châu Chương 1: Giới thiệu công ty thực tập Giới thiệu công ty KiteMetric KiteMetric công ty tư vấn công nghệ thành lập từ năm 2012 với sứ mệnh hỗ trợ doanh nghiệp khởi nghiệp chuyển đổi ý tưởng thành sản phẩm chất lượng cao Công ty hợp tác với khách hàng toàn giới để cung cấp sản phẩm nhiều lĩnh vực khác bao gồm: ứng dụng học máy, trực quan hóa liệu, mạng xã hội, ứng dụng fintech, nhiều lĩnh vực khác - Về dịch vụ Web & Mobile development: cung cấp dịch vụ thiết kế xây dựng sản phẩm hiệu suất cao với trải nghiệm người dùng tuyệt vời tất tảng - Về dịch vụ Machine Learning: cung cấp dịch vụ xây dựng ứng dụng AI để tự động hóa hoạt động thủ cơng, cải thiện hoạt động kinh doanh với trí thơng minh theo hướng liệu - Về User Experience: cung cấp dịch vụ thiết kế mơ hình thử nghiệm, thử nghiệm khái niệm để xác thực ý tưởng đưa thiết kế UI / UX sáng tạo mang lại tính độc đáo sản phẩm - Về Technology Consulting: cung cấp dịch vụ giúp định hình ý tưởng, xác định rào cản kỹ thuật, đề xuất giải pháp công nghệ phù hợp Sản phẩm công ty Hai số sản phẩm bật cơng ty kể đến Blanket FaceSwap Phạm Hoàng Hải Trần Lê Bảo Châu - Blanket: ứng dụng dành cho thiết bị di động áp dụng nhiều thuật toán để thực nhiệm vụ, đo lường khen thưởng hiệu suất nhân viên, đồng thời, giúp tăng cường hiệu quản lý nhà hàng hoạt động hàng ngày họ Phạm Hoàng Hải Trần Lê Bảo Châu - FaceSwap: ứng dụng thú vị cho phép người dùng thay khuôn mặt nhân vật tiếng ảnh khuôn mặt họ cách sử dụng ảnh từ máy ảnh Ứng dụng có sẵn Android iOS với nửa triệu người dùng Chương 2: Nội dung thực tập Đợt thực tập với chủ đề “Lập trình Flutter Android” 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 với framework Flutter để tạo ứng dụng di động, đồng thời rèn luyện kỹ mềm làm việc nhóm, thuyết trình, giao tiếp Nghiên cứu kỹ thuật 1.1 Nghiên cứu công cụ, quy trình Thời gian : tuần Nội dung : Tìm hiểu cơng cụ sử dụng q trình làm việc, mơ hình làm việc dự kiến 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ố Jira sử dụng làm việc nhóm, Github – cơng cụ quản lý phiên code, Android Phạm Hoàng Hải Trần Lê Bảo Châu 1.2 studio - IDE cho việc phát triển ứng dụng di động, Figma – công cụ thiết kế giao diện người dùng Bên cạnh đó, thực tập sinh cịn tìm hiểu mơ hình làm việc Scrum Tìm hiểu tổng quan dự án ứng dụng kết nối camera IP Thực : Thực hành sử dụng phần mềm nêu tìm hiểu Scrum Kết : Cài đặt thành công (nếu cần) sử dụng chức công cụ phần mềm nêu Có nhìn tổng quan Scrum Nghiên cứu ngôn ngữ, template Thời gian : tuần Nội dung: Ngơn ngữ lập trình Dart, số khái niệm Flutter, template boilerplate - Ngơn ngữ lập trình Dart: Dart ngơn ngữ lập trình mới, phát triển Google, chấp thuận tổ chức Ecma Dart sử dụng để xây dựng loại ứng dụng: web, server, di động (IOS Android với công cụ Flutter) Dart ngơn ngữ hỗ trợ lập trình hướng đối tượng, cú pháp kiểu C, mã code Dart biên dịch thành JavaSript để chạy trình duyệt Nó hỗ trợ khái niệm lập trình đại giao diện lớp, lớp trừu tượng Cách khai báo biến, xây dựng hàm, - Một số khái niệm Flutter: Tìm hiểu số khái niệm Flutter gồm: • Widget (Stateless Widget, Statefull Widget, Accessibility, Inherited Widget) • Assets • Static User Interface • Dynamic User Interface • Storage • State management • 3rd Party Libraries Phạm Hồng Hải Trần Lê Bảo Châu - Template boilerplate Tìm hiểu bố cục template boilerplate từ link https://github.com/zubairehman/flutter-boilerplate-project template xây dựng sẵn kết hợp MobX Provider Thực : - Tìm kiếm tài liệu mạng Seminar lại với nhóm tiếp thu ý kiến đóng góp từ thành viên khác Nghe góp ý seminar thành viên khác Kết : - Hiểu khái niệm lập trình với framework Flutter ngơn ngữ Dart Hiểu cấu trúc template boilerplate Thực project Sau gần tháng training thực hành, thực tập sinh nắm kiến thực quy trình Scrum ngơn ngữ Dart, framwork Flutter, template boilerplate Trong tháng thứ hai, trainer hướng dẫn thực tập sinh áp dụng kiến thức học để thực ứng dụng di động Android Chi tiết đồ án nói phần sau Lịch làm việc Phạm Hoàng Hải Trần Lê Bảo Châu 10 Tuần Phạm Hoàng Hải Công việc Sprint 1: - Làm quen với công cụ làm việc công ty Jira, Figma, Android Studio - Học cách trao đổi, làm việc qua email Sprint 2: - Tìm hiểu báo cáo Flutter - Tìm hiểu báo cáo ngơn ngữ Dart Sprint 3: - Tìm hiểu báo cáo ngơn ngữ Dart (tiếp theo) - Tìm hiểu báo cáo template boilerplate Sprint 4: - Phân tích yêu cầu ứng dụng Sprint 5: - Thiết kế UI/UX ứng dụng (giao diện xem camera, giao diện xem nhiều camera, giao diện thêm camera số popup tương ứng) Sprint 6: - Chỉnh sửa thiết kế UI/UX - Khởi tạo project Sprint 7: Người hướng dẫn Mức độ hoàn thành Nhận xét người hướng dẫn Thầy Phạm Hoàng Hải, Thầy Nguyễn Tấn Trần Minh Khang 100% Đạt yêu cầu Thầy Phạm Hoàng Hải, Thầy Nguyễn Tấn Trần Minh Khang 100% Đạt yêu cầu Thầy Phạm Hoàng Hải, Thầy Nguyễn Tấn Trần Minh Khang 100% Đạt yêu cầu Thầy Phạm Hoàng Hải, Thầy Nguyễn Tấn Trần Minh Khang 100% Đạt yêu cầu Thầy Phạm Hoàng Hải, Thầy Nguyễn Tấn Trần Minh Khang 100% Đạt yêu cầu Thầy Phạm Hoàng Hải, Thầy Nguyễn Tấn Trần Minh Khang Thầy Phạm Hoàng 100% Đạt yêu cầu 100% Đạt yêu cầu Trần Lê Bảo Châu 11 - 10 11 12 Phạm Hoàng Hải Xây dựng giao diện (thêm camera) Sprint 8: - Kiểm thử chỉnh sửa số lỗi giao diện - Thực đa ngôn ngữ cho ứng dụng (tiếng Anh tiếng Việt) Sprint 9: - Xây dựng sở liệu theo template boilerplate Sprint 10: - Thực chức thêm camera (chưa check thông tin camera) Sprint 11: - Thực check thông tin camera trước thêm camera Sprint 12: Kiểm thử hoàn thiện ứng dụng Hải, Thầy Nguyễn Tấn Trần Minh Khang Thầy Phạm Hoàng Hải, Thầy Nguyễn Tấn Trần Minh Khang 100% Đạt yêu cầu Thầy Phạm Hoàng Hải, Thầy Nguyễn Tấn Trần Minh Khang 100% Đạt yêu cầu Thầy Phạm Hoàng Hải, Thầy Nguyễn Tấn Trần Minh Khang 100% Đạt yêu cầu Thầy Phạm Hoàng Hải, Thầy Nguyễn Tấn Trần Minh Khang 100% Đạt yêu cầu Thầy Phạm Hoàng Hải, Thầy Nguyễn Tấn Trần Minh Khang 100% Đạt yêu cầu Trần Lê Bảo Châu 12 Chương 3: Chi tiết project Giới thiệu project Dự án thực tập nhóm thực ứng dụng di động có khả kết nối stream hình ảnh từ camera IP xa 1.1 Yêu cầu chức Ứng dụng cho phép người dùng nhập thông tin để liên kết với camera IP thông qua giao thức RTSP (giao thức thường dùng để stream video từ camera), sau ứng dụng lưu lại thơng tin camera để người dùng xem camera vào lần sau mà không cần phải nhập lại thơng tin Ngồi ra, ứng dụng cịn hỗ trợ người dùng xem nhiều camera lúc (nhóm camera) 1.2 Yêu cầu phi chức Sử dụng framework Flutter với template boilerplate, đảm bảo ứng dụng thích ứng với tất giao diện di động Thực thành viên team internship: - Trần Lê Bảo Châu Phan Thị Hồng Cúc Đoàn Thị Thanh Hiếu Trần Văn Bảo Và giúp đỡ tận tình team trainer Kế hoạch Sprint 4: - Phân tích yêu cầu ứng dụng Kết quả: Thông tin yêu cầu chức phi chức Sprint 5: - Thiết kế UI/UX ứng dụng: o Trang chủ Phạm Hoàng Hải Trần Lê Bảo Châu 13 o Giao diện xem camera o Giao diện xem nhiều camera o Giao diện danh sách o Giao diện thêm camera o Popup thơng báo o Popup điền thơng tin Kết quả: Hồn thành sơ thiết kế giao diện cho ứng dụng Sprint 6: - Chỉnh sửa thiết kế UI/UX - Khởi tạo project Kết quả: Hoàn thành thiết kế giao diện Sprint 7: - Xây dựng giao diện thiết kế Kết quả: Hoàn thành sơ giao diện thiết kế Sprint 8: - Kiểm thử chỉnh sửa số lỗi giao diện - Thiết kế sở liệu - Thực đa ngôn ngữ cho ứng dụng (tiếng Anh tiếng Việt) Kết quả: Hoàn thành giao diện thiết kế xây dựng thiết kế sở liệu cho ứng dụng Sprint 9: - Xây dựng sở liệu theo template boilerplate Kết quả: Xây dựng sở liệu project theo template boilerplate Sprint 10: Phạm Hoàng Hải Trần Lê Bảo Châu 14 - Thực chức thêm/sửa/xóa camera nhóm camera Kết quả: Thực liên kết sở liệu với giao diện có chức thêm/sửa/xóa, cập nhật giao diện cho phù hợp, nhiên tồn số lỗi Sprint 11: - Thực kiểm tra thơng tin trước thao tác thêm/sửa/xóa - Thêm gợi ý tên cho trường đặt tên Kết quả: Thực số thao tác kiểm tra thông tin số hỗ trợ cho người dùng, nhiên tồn số lỗi Sprint 12: - Kiểm thử hoàn thiện ứng dụng Kết quả: Ứng dụng hoàn thiện, nhiên tồn số lỗi Phạm Hoàng Hải Trần Lê Bảo Châu 15 TÀI LIỆU THAM KHẢO For Flutter: https://flutter.dev/ For Dart: https://xuanthulab.net/lap-trinh-dart-flutter/ https://dart.dev/ https://www.tutorialspoint.com/dart_programming/index.htm For boilerplate: https://github.com/zubairehman/flutter-boilerplate-project Phạm Hoàng Hải Trần Lê Bảo Châu 16 TỔNG KẾT Như vậy, vịng hai tháng ngắn ngủi, nhóm sơ hồn thành ứng dụng android framework Flutter Ứng dụng đạt yêu cầu đề ban đầu dù cịn vài sai sót Chân thành cảm ơn giúp đỡ anh chị nhóm trainer KiteMetric, nỗ lực bạn nhóm để hồn thành ứng dụng Cảm ơn thầy Nguyễn Tấn Trần Minh Khang thầy Phạm Hoàng Hải giúp em hoàn thành báo cáo Phạm Hoàng Hải Trần Lê Bảo Châu ... có sẵn Android iOS với nửa triệu người dùng Chương 2: Nội dung thực tập Đợt thực tập với chủ đề ? ?Lập trình Flutter Android? ?? 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 với... Hiểu khái niệm lập trình với framework Flutter ngôn ngữ Dart Hiểu cấu trúc template boilerplate Thực project Sau gần tháng training thực hành, thực tập sinh nắm kiến thực quy trình Scrum ngôn... động (IOS Android với công cụ Flutter) Dart ngôn ngữ hỗ trợ lập trình hướng đối tượng, cú pháp kiểu C, mã code Dart biên dịch thành JavaSript để chạy trình duyệt Nó hỗ trợ khái niệm lập trình đại