Xây dựng ứng dụng kết nối doanh nghiệp bkl

TRƯỜNG ĐẠI HỌC BÀ RỊA – VŨNG TÀU KHOA CÔNG NGHỆ KỸ THUẬT NÔNG NGHIỆP CÔNG NGHỆ CAO - - BÁO CÁO ĐỒ ÁN TỐT NGHIỆP ĐỀ TÀI: XÂY DỰNG ỨNG DỤNG KẾT NỐI DOANH NGHIỆP BKL Trình độ đào tạo : Đại học Ngành : Cơng nghệ thơng tin Chun ngành : Lập trình ứng dụng di động, Game Khóa học : 2018-2022 Lớp : DH18LT Sinh viên thực : Nguyễn Minh Tâm Mã số sinh viên : 18033280 GVHD : ThS Nguyễn Tấn Phương BÀ RỊA - VŨNG TÀU, NĂM 2021 Đồ án tốt nghiệp khóa 2018 - 2022 Trường Đại học Bà Rịa – Vũng Tàu LỜI CAM ĐOAN Tôi xin cam đoan kết đạt đồ án sản phẩm riêng cá nhân, không chép lại người khác Trong toàn nội dung đồ án, điều trình bày cá nhân tổng hợp từ nhiều nguồn tài liệu Tất tài liệu tham khảo có xuất xứ rõ ràng trích dẫn hợp pháp Tơi xin hồn tồn chịu trách nhiệm chịu hình thức kỷ luật theo quy định cho lời cam đoan Vũng Tàu, ngày 01 tháng 12 năm 2021 Sinh viên thực Nguyễn Minh Tâm GVHD: Nguyễn Tấn Phương Đồ án tốt nghiệp khóa 2018 - 2022 Trường Đại học Bà Rịa – Vũng Tàu NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN Vũng Tàu, ngày … tháng … năm 20… Người hướng dẫn ThS Nguyễn Tấn Phương GVHD: Nguyễn Tấn Phương Đồ án tốt nghiệp khóa 2018 - 2022 Trường Đại học Bà Rịa – Vũng Tàu NHẬN XÉT CỦA GIẢNG VIÊN PHẢN BIỆN GVHD: Nguyễn Tấn Phương Đồ án tốt nghiệp khóa 2018 - 2022 Trường Đại học Bà Rịa – Vũng Tàu MỤC LỤC MỤC LỤC DANH MỤC HÌNH LỜI NÓI ĐẦU 10 CHƯƠNG 1: GIỚI THIỆU 11 1.1 Flutter 11 1.1.1 Flutter gì? 11 1.1.2 Tại lại chọn Flutter? 11 1.1.3 Các đặc điểm bật Flutter 11 1.2 Công ty Maysoft 12 1.2.1 Giới thiệu 12 1.2.2 Ứng dụng BKL 12 1.2.3 Khó khăn vấn đề gặp phải tiếp quản dự án BKL 12 1.3 Lý chọn đề tài 13 1.4 Đối tượng nghiên cứu 14 1.5 Phương pháp nghiên cứu 14 1.5.1 Các lý thuyết 14 1.5.2 Quá trình xây dựng thực tiễn 14 CHƯƠNG 2: PHÂN TÍCH HỆ THỐNG 15 2.1 Chức 15 2.2 Phân tích chức 17 2.1.1 Xác thực người dùng 17 2.1.2 Chức tương tác với kiện 18 2.1.3 Chức xem thông tin Công ty người dùng 19 2.1.4 Chức gửi tin nhắn người dùng với người dùng 20 2.1.5 Chức xem, chỉnh sửa thông tin cá nhân 21 2.1.6 Chức xem, chỉnh sửa thông tin doanh nghiệp 22 2.3 Sơ đồ phân tích chức 23 2.3.1 Chức đăng nhập 23 2.3.2 Chức đăng ký 24 GVHD: Nguyễn Tấn Phương Đồ án tốt nghiệp khóa 2018 - 2022 Trường Đại học Bà Rịa – Vũng Tàu 2.3.3 Chức khôi phục mật 25 2.3.4 Chức xem kiện đăng ký 26 2.3.5 Chức xem lịch sử kiện đăng ký 27 2.3.6 Chức xem danh sách kiện có hiệu lực 28 2.3.6 Chức xem danh sách người dùng hệ thống 29 2.3.7 Chức xem danh sách doanh nghiệp hệ thống 30 2.3.8 Chức xem thông tin liên hệ người dùng 31 2.3.9 Chức xem thông tin liên hệ công ty 34 2.3.10 Chức xem danh sách nhân viên công ty 35 2.3.11 Chức nhắn tin với người dùng 36 2.3.12 Chức cập nhật thông tin cá nhân 38 2.3.13 Chức thay đổi mật 39 2.3.14 Chức gửi đơn hỗ trợ 40 2.3.15 Chức cập nhật thông tin doanh nghiệp 41 2.3.16 Chức quản lý nhân viên doanh nghiệp 42 2.4 Phân tích sở liệu 44 2.4.1 Company API 45 2.4.2 Company Branch API 46 2.4.3 Contact Information API 47 2.4.4 Event Participant API 48 2.4.5 Event Category API 50 2.4.7 Event API 50 2.4.8 Location API 51 2.4.9 News API 52 2.4.10 Website User API 53 CHƯƠNG 3: XÂY DỰNG ỨNG DỤNG 55 3.1 Sử dụng Flutter 55 3.1.1 Cách cài đặt Flutter 55 3.1.2 Các Package hỗ trợ dùng để xây dựng ứng dụng 58 3.2 Sử dụng GetX xây dựng ứng dụng Flutter 59 GVHD: Nguyễn Tấn Phương Đồ án tốt nghiệp khóa 2018 - 2022 Trường Đại học Bà Rịa – Vũng Tàu 3.2.1 GetX gì? 59 3.2.2 Quản lý State GetX 60 3.3 Giới thiệu kiến trúc Domain – Driven – Design (DDD) 61 3.3.1 Giới thiệu 61 3.3.2 Khái niệm 62 3.3.3 Kiến trúc 63 3.4 Xây dựng lớp Domain (Business Logic Layer) 65 3.4.1 Cấu hình chung cho hệ thống (Core) 65 3.4.2 Models 70 3.4.3 Repositories 71 3.5 Xây dựng lớp Infratructure (Data Layer) 72 3.5.1 Các Class hỗ trợ (Data Helpers) 72 3.5.2 Cấu hình API (Sources) 74 3.5.3 Cấu hình Repository (Repository Implement) 75 3.6 Xây dựng lớp Presentation (UI Layer) 76 3.6.1 Xây dựng Controller 76 3.6.2 Cấu hình thuộc tính chung cho giao diện (Global) 77 3.6.3 Xây dựng giao diện 78 CHƯƠNG 4: KẾT LUẬN 93 4.1 Kết đạt 93 4.2 Hướng phát triển 93 4.3 Tài liệu tham khảo 93 GVHD: Nguyễn Tấn Phương Đồ án tốt nghiệp khóa 2018 - 2022 Trường Đại học Bà Rịa – Vũng Tàu DANH MỤC HÌNH Hình 1: Sơ sồ Usecase tổng quát 16 Hình 2: Sơ đồ chức đăng nhập 23 Hình 3: Sơ đồ chức đăng ký 24 Hình 4: Sơ đồ chức khôi phục 25 Hình 5: Sơ đồ chức xem kiện đăng ký 26 Hình 6: Sơ đồ chức xem lịch sử kiện đăng ký 27 Hình 7: Sơ đồ chức xem kiện đăng ký 28 Hình 8: Sơ đồ chức xem kiện đăng ký 29 Hình 9: Sơ đồ chức xem kiện đăng ký 30 Hình 10: Sơ đồ chức xem thông tin liên hệ người dùng (Member Screen) 31 Hình 11: Sơ đồ chức xem thông tin liên hệ người dùng (Event Participants Screen) 32 Hình 12: Sơ đồ chức xem thông tin liên hệ người dùng (Company Employee Screen) 33 Hình 13: Sơ đồ chức xem thơng tin liên hệ doanh nghiệp 34 Hình 14: Sơ đồ chức xem thông tin liên hệ doanh nghiệp 35 Hình 15: Sơ đồ chức nhắn tin (Contact Info) 36 Hình 16: Sơ đồ chức nhắn tin (Chat Overview) 37 Hình 17: Sơ đồ chức cập nhật thông tin cá nhân 38 Hình 18: Sơ đồ chức thay đổi mật 39 Hình 19: Sơ đồ chức thay đổi mật 40 Hình 20: Sơ đồ chức cập nhật thông tin doanh nghiệp 41 Hình 21: Sơ đồ chức hiển thị QR đăng ký 42 Hình 22: Sơ đồ chức xóa nhân viên khỏi doanh nghiệp 43 Hình 23: Mơ hình ER hệ thống 44 Hình 24: API lấy danh sách Company 45 Hình 25: API lấy Copany dựa theo ID 45 Hình 26: API cập nhật Company theo ID 46 Hình 27: API lấy danh sách Company Branch 46 Hình 28: API tạo Contact Information 47 Hình 29: API lấy Contact Information theo ID 47 Hình 30: API cập nhật Contaction Information theo ID 48 Hình 31: API lấy danh sách Event Participants 48 Hình 32: API tạo Event Participant 49 Hình 33: API xóa Event Participant 49 Hình 34: API lấy danh sách Event Category 50 GVHD: Nguyễn Tấn Phương Đồ án tốt nghiệp khóa 2018 - 2022 Trường Đại học Bà Rịa – Vũng Tàu Hình 35: API lấy danh sách Event 50 Hình 36: API lấy kiện theo ID 51 Hình 37: API lấy Location theo ID 51 Hình 38: API cập nhật Location theo ID 52 Hình 39: API lấy danh sách News 52 Hình 40: API lấy News theo ID 53 Hình 41: API lấy danh sách User 53 Hình 42: API lấy User theo ID 54 Hình 43: API cập nhật User theo ID 54 Hình 44: Cấu hình tối thiểu để cài đặt chạy Flutter 55 Hình 45: Cách tải Flutter SDK máy 55 Hình 46: Hướng dẫn cập nhật Variable Path cho Flutter 56 Hình 47: Kiểm tra yêu cầu terminal 56 Hình 48: Hướng dẫn setup thiết bị Android 56 Hình 49: Hướng dẫn setup máy ảo 57 Hình 50: Màn hình Splash 78 Hình 51: Màn hình đăng nhập 79 Hình 52: Màn hình quét QR đăng ký 80 Hình 53: Màn hình đăng ký tài khoản 81 Hình 54: Màn hình khơi phục mật 82 Hình 55: Màn hình Home 83 Hình 56: Màn hình đọc tin tức 84 Hình 57:: Màn hình danh sách tin tức 84 Hình 58: Màn hình chỉnh sửa hồ sơ 85 Hình 59: Màn hình Profile (Quá trình Testing) 85 Hình 60: Màn hình Profile với My Company 86 Hình 61: Màn hình quản lý Company người dùng 86 Hình 62: Màn hình chỉnh sửa hồ sơ cơng ty, danh sách nhân viên mã QR đăng ký 87 Hình 63: Màn hình gửi đơn liên hệ 88 Hình 64: Màn hình đổi mật 88 Hình 65: Màn hình danh sách kiện, chị tiết kiện danh sách người tham gia 89 Hình 66: Màn hình thơng tin liên hệ 90 Hình 67: Màn hình danh sách người dùng hệ thống 90 Hình 68: Màn hình danh sách cơng ty, thông tin công ty nhân viên công ty 91 Hình 69: Màn hình danh sách nhóm trị chuyện 92 Hình 70: Màn hình trị chuyện 92 GVHD: Nguyễn Tấn Phương Đồ án tốt nghiệp khóa 2018 - 2022 Trường Đại học Bà Rịa – Vũng Tàu LỜI NĨI ĐẦU Cơng nghệ giới ngày phát triển cách nhanh chóng, thiết bị di động khơng cịn thứ xa lạ với người Chiếc điện thoại với ứng dụng gọn nhẹ kết nối tới sở liệu từ xa làm giải pháp tối ưu hóa cho doanh nghiệp tồn cầu để cung cấp tiện lời tới cho khách hàng họ Để bắt kịp nhu cầu đó, doanh nghiệp cần phải phát triển nhanh ứng dụng điện thoại thời gian ngắn lại tiếp cận tới nhiều khách hàng với nhu cầu vị công nghệ, phong cách sống khác Và để đáp ứng nhu cầu doanh nghiệp, tảng Cross-Platform đời, với mục đích xây dựng ứng dụng di động đáp ứng nhiều thiết bị với nhiều hệ điều hành khác Nhằm giảm thời gian xây dựng ứng dụng tối ưu hóa trải nghiệm người dùng với khách hàng Đồ án sau nhiều dự án mà thân làm Tại thời điểm này, dự án chọn sau giai đoạn phát triển phận Back-end Nên báo cáo liệu đồ án khơng cịn với thực tế khơng cịn có khả truy cập Xin trân trọng cảm ơn! Sinh viên thực Nguyễn Minh Tâm GVHD: Nguyễn Tấn Phương 10 Đồ án tốt nghiệp khóa 2018 - 2022 Trường Đại học Bà Rịa – Vũng Tàu 3.6.3.2 Màn hình đăng nhập Màn hình Login, hiển thị sau hình Splash kết thúc với điều kiện người dùng chưa đăng nhập vào ứng dụng Chức lưu đăng nhập tách Tại hình này, người dùng thực chức đăng nhập email mật Người dùng di chuyển tới hình khác Đăng ký khơi phục mật Hình 51: Màn hình đăng nhập GVHD: Nguyễn Tấn Phương 79 Đồ án tốt nghiệp khóa 2018 - 2022 Trường Đại học Bà Rịa – Vũng Tàu 3.6.3.3 Màn hình quét mã QR đăng ký Khi người dùng bấm nút đăng ký tạo hình Login, ứng dụng mở giao diện quét mã QR đăng ký, trước hiển thị kiểm tra quyền sử dụng Camera thiết bị tiếp tục hoạt động có phép Nếu người dùng quét mã QR phù hợp, ứng dụng gửi thông tin tới Server để lấy thông tin Company mà người dùng quét Sau chuyển qua hình đăng ký tài khoản Hình 52: Màn hình quét QR đăng ký GVHD: Nguyễn Tấn Phương 80 Đồ án tốt nghiệp khóa 2018 - 2022 Trường Đại học Bà Rịa – Vũng Tàu 3.6.3.4 Màn hình đăng ký Khi quét mã lấy liệu thành cơng, hình đăng ký tài khoản hiển thị thông tin doanh nghiệp mà người dùng quét Ứng dụng yêu cầu người dùng nhập thông tin đăng nhập thơng tin cá nhân Đây hình thực chức đăng nhập tạo thông tin liên hệ cho người dùng Sau quay lại hình đăng nhập Hình 53: Màn hình đăng ký tài khoản GVHD: Nguyễn Tấn Phương 81 Đồ án tốt nghiệp khóa 2018 - 2022 Trường Đại học Bà Rịa – Vũng Tàu 3.6.3.5 Màn hình khơi phục mật Người dùng gửi yêu cầu khổi phục mật hình Forgot Password Người dùng cần cung cấp địa email, địa cấp tồn tại, ứng dụng gửi báo thành công lại người dùng Hình 54: Màn hình khơi phục mật GVHD: Nguyễn Tấn Phương 82 Đồ án tốt nghiệp khóa 2018 - 2022 Trường Đại học Bà Rịa – Vũng Tàu 3.6.3.6 Màn hình trang chủ Sau đăng nhập thành cơng, người dùng chuyển tới hình Home, đây, liệu Event load sau hiển thị danh sách kiện mà người dùng đăng ký Tại hình người dùng điều hướng qua Profile, News, Events, Event History, Member, Chat Overview Hình 55: Màn hình Home GVHD: Nguyễn Tấn Phương 83 Đồ án tốt nghiệp khóa 2018 - 2022 Trường Đại học Bà Rịa – Vũng Tàu 3.6.3.7 Màn hình danh sách tin tức Người dùng xem tin tức BKL Tab News hình Home, chọn vào tin tức ứng dụng mở thơng tin chi tiết tin tức Hình 57:: Màn hình danh sách tin tức Hình 56: Màn hình đọc tin tức GVHD: Nguyễn Tấn Phương 84 Đồ án tốt nghiệp khóa 2018 - 2022 Trường Đại học Bà Rịa – Vũng Tàu 3.6.3.8 Màn hình hồ sơ cá nhân chỉnh sửa hồ sơ Từ hình Home, người dùng chuyển tới hình Profile chọn Edit Profile để cập nhật thơng tin cá nhân Hình 59: Màn hình Profile (Quá trình Testing) Hình 58: Màn hình chỉnh sửa hồ sơ GVHD: Nguyễn Tấn Phương 85 Đồ án tốt nghiệp khóa 2018 - 2022 Trường Đại học Bà Rịa – Vũng Tàu 3.6.3.9 Màn hình hồ sơ chỉnh sửa hồ sơ doanh nghiệp người dùng Nếu người dùng chủ doanh nghiệp hệ thống, giao diện hiển thị thêm nút bấm My Company, giúp người dùng chuyển tới hình quản lý doanh nghiệp họ Hình 60: Màn hình Profile với My Company Hình 61: Màn hình quản lý Company người dùng GVHD: Nguyễn Tấn Phương 86 Đồ án tốt nghiệp khóa 2018 - 2022 Trường Đại học Bà Rịa – Vũng Tàu Hình 62: Màn hình chỉnh sửa hồ sơ cơng ty, danh sách nhân viên mã QR đăng ký GVHD: Nguyễn Tấn Phương 87 Đồ án tốt nghiệp khóa 2018 - 2022 Trường Đại học Bà Rịa – Vũng Tàu 3.6.3.10 Màn hình đổi mật gửi đơn hỗ trợ Từ hình Profile, người dùng tới hình Change Passoword Screen để thực chức thay đổi Cũng từ hình Profile người dùng tới hình Contact để gửi đơn hỡ trợ tới nhà phát triển ứng dụng Hình 64: Màn hình đổi mật Hình 63: Màn hình gửi đơn liên hệ GVHD: Nguyễn Tấn Phương 88 Đồ án tốt nghiệp khóa 2018 - 2022 Trường Đại học Bà Rịa – Vũng Tàu 3.6.3.11 Màn hình danh sách kiện chi tiết kiện Hình 65: Màn hình danh sách kiện, chị tiết kiện danh sách người tham gia GVHD: Nguyễn Tấn Phương 89 Đồ án tốt nghiệp khóa 2018 - 2022 Trường Đại học Bà Rịa – Vũng Tàu 3.6.3.12 Màn hình danh sách người dùng thơng tin liên hệ Hình 67: Màn hình danh sách người dùng hệ thống Hình 66: Màn hình thông tin liên hệ GVHD: Nguyễn Tấn Phương 90 Đồ án tốt nghiệp khóa 2018 - 2022 Trường Đại học Bà Rịa – Vũng Tàu 3.6.3.13 Màn hình danh sách doanh nghiệp thông tin doanh nghiệp hệ thống Hình 68: Màn hình danh sách cơng ty, thơng tin công ty nhân viên công ty GVHD: Nguyễn Tấn Phương 91 Đồ án tốt nghiệp khóa 2018 - 2022 Trường Đại học Bà Rịa – Vũng Tàu 3.6.3.14 Màn hình danh sách nhóm trị chuyện trị chuyện Hình 69: Màn hình danh sách nhóm trị chuyện Hình 70: Màn hình trị chuyện GVHD: Nguyễn Tấn Phương 92 Đồ án tốt nghiệp khóa 2018 - 2022 Trường Đại học Bà Rịa – Vũng Tàu CHƯƠNG 4: KẾT LUẬN 4.1 Kết đạt Dự án BKL giúp nâng cao kinh nghiệm làm việc nhóm kiến thức chun mơn Flutter Qua việc giao tiếp làm việc cho đội Việt Nam Hà Lan, giúp xếp thời gian công việc hiệu quả, đồng thời cải thiện kỹ giao tiếp trình độ ngoại ngữ Với yêu cầu khách hàng, giúp ôn lại kiến thức Notification đồng thời nâng cao kiến thức Đặc biệt thực Chức thông báo đẩy Push Notification Real-time chat với FCM 4.2 Hướng phát triển Trong trình phát triển ứng dụng BKL, có điểm khơng đồng tối ưu cách lưu trữ liệu, quản lý liệu quản lý State hệ thống Chưa thể phát huy tối ưu kiến trúc DDD theo ý muốn, dẫn đến số vấn để lỗi phát sinh nhỏ trình xây dựng Qua đó, tơi tiếp tục nghiên cứu áp dụng kiến trúc DDD vào dự án tối ưu hóa khái niệm đối tương liên kết dự án để tạo nên cấu trúc chặt chẽ dễ thay đổi, thích nghi dễ hiểu tương lai 4.3 Tài liệu tham khảo  https://flutter.dev/  https://material.io/design  https://pub.dev/ GVHD: Nguyễn Tấn Phương 93