ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM ĐỒ ÁN ỨNG DỤNG TRÒ CHUYỆN TRỰC TUYẾN Đồ án – SE122.L11.PMCL – VN Giảng viên hướng dẫn: Thầy NGUYỄN TUẤN ANH Sinh viên thực hiện: Phan Lê Trọng Nhân – 17520843 Nguyễn Tài Bồi TP HỒ CHÍ MINH, 22/01/2021 – 17520284 ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CƠNG NGHỆ THƠNG TIN KHOA CÔNG NGHỆ PHẦN MỀM PHAN LÊ TRỌNG NHÂN – 17520843 NGUYỄN TÀI BỒI – 17520284 ĐỒ ÁN ỨNG DỤNG TRÒ CHUYỆN TRỰC TUYẾN CHAT ONLINE APPLICATION KỸ SƯ/ CỬ NHÂN NGÀNH KĨ THUẬT PHẦN MỀM GIẢNG VIÊN HƯỚNG DẪN Thầy NGUYỄN TUẤN ANH TP HỒ CHÍ MINH, 2021 LỜI CẢM ƠN Lời đầu tiên, em xin bày tỏ lòng biết ơn sâu sắc đến thầy Nguyễn Tuấn Anh – giảng viên hướng dẫn chúng em thực Đồ án Thầy đồng hành tận tình hướng dẫn cho chúng em qua giai đoạn đồ án Nhờ có giúp đỡ nhiệt tình thầy mà chúng em có thể hoàn thành được đồ án cách tốt Vì kiến thức chúng em cịn hạn hẹp nên khơng thể tránh khỏi thiếu sót trình thực đồ án Tuy nhiên, chúng em cố gắng hồn thành hạn hạn chế lỡi nhiều có thể Nhóm chúng em mong đợi nhận ý kiến đóng góp quý báu từ thầy qua đó có thể rút kinh nghiệm, tự sửa chữa, hồn thiện thân tinh thần nghiêm túc, tự giác học hỏi Trong trình làm đề tài báo cáo, tránh khỏi thiếu sót, mong nhận phản hồi từ thầy bạn để góp phần làm cho báo cáo thêm hoàn thiện Chân thành cảm ơn thầy! LỜI NHẬN XÉT CỦA GIẢNG VIÊN … ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… …………………………………………………………………………… MỤC LỤC DANH MỤC HÌNH DANH MỤC BẢNG MỞ ĐẦU Lí chọn đề tài Hiện nay, thời đại công nghiệp hóa - đại hóa, công nghệ 4.0 dần đưa vào sống ngày Bên cạnh đó, có thể áp dụng công nghệ cách thành thục có khả tự tìm hiểu được, có thể gặp khó khăn về cố công nghê, trục trặc máy tính, hệ thống hỏng hóc thiết bị Hoặc làm xa, công tác liên lạc song điện thoại ứng dụng máy tính bạn để đảm bảo hiệu suất Thay thực gọi phải tốn phí cao mã vùng để đảm bảo suât làm việc lúc nơi, bọn em định xây dựng Ứng dụng trò chuyện trực tuyến để khắc phục khiếm khuyết Phương pháp nghiên cứu Nhận thấy nhóm đối tượng chủ yếu bạn trẻ, doanh nhân số doanh nghiệp Nhóm chúng em thực đề tài ngôn ngữ Dart, công nghệ ứng dụng Flutter Quá trình tìm hiểu nghiệp vụ nhóm chúng em có tham khảo diễn đàn về trò chuyện trực tuyến (Messenger, Zalo,…) Cùng với đó tham khảo ứng dụng có sẵn chợ ứng dụng để có nhìn tổng quát về đề tài chọn Đối tượng hướng đến Ứng dụng nhóm định hướng đến người có nhu cầu trò chuyện trực tuyến hay nói cách khác thời gian thực, tiện lợi song Internet, xem xét khắc phục lỗi cho khách hàng từ xa hay đơn giản chia thông tin Đây nhóm người thường xuyên sử dụng máy tính, laptop Do đó họ có khả cần chia sẽ, giúp đỡ từ bạn bè, đồng nghiệp từ xa Ứng dụng trợ thủ đắc lực giúp họ có thể nhận trợ giúp từ xa thơng qua việc trị chuyện trực tuyến khơng tính phí Từ đó có thể nâng cao suất làm việc chia tài liệu Chương GIỚI THIỆU VỀ FLUTTER 1.1 Giới thiệu ngơn ngữ lập trình Dart Hình 1.1 Logo Dart 1.1.1 Ngơn ngữ lập trình Dart gì? - Dart ngơn ngữ lập trình mới, phát triển Google, chấp thuận tổ chức Ecma (ECMA-408) Nó sử dụng để xây dựng - loại ứng dụng: web, server, di động (IOS Android) Dart ngơn ngữ lập trình hướng đối tượng, với chế garbage collector, cú pháp kiểu C Nó hỡ trợ khái niệm lập trình đại interface, mixin, abstract, generic, type-safe Đây ngôn ngữ lập trình mã nguồn mở, cơng bố Github 1.1.2.Ưu điểm Dart - Một số ưu điểm vượt trội Dart so với ngôn ngữ lập trình khác: Năng suất: Dart có cú pháp dễ hiểu, rõ ràng súc tích Type-safe giúp lập trình viên có thể xác định sớm lỗi Bên cạnh đó Dart có hệ sinh thái rộng - lớn lên đến hàng nghìn packages Nhanh: Dart cung cấp tối ưu hóa việc biên dịch trước thời hạn để có - dự đoán hiệu suất cao khởi động nhanh thiết bị di động web Dễ làm quen: Do Dart có cú pháp kiểu C/C++, nên dễ học Nếu bạn biết C ++, C # Java, bạn có thể làm việc hiệu với Dart sau vài ngày - Reactive: Dart phù hợp với lập trình Reactive, với hỡ trợ để quản lý đối tượng tồn thời gian ngắn, chẳng hạn widget UI, thông qua phân bổ đối tượng nhanh garbage collector Dart hỗ trợ lập trình khơng đồng thơng qua tính ngôn ngữ API sử dụng đối tượng Future Stream Từ ngơn ngữ lập trình Dart, Google giới thiệu Framework Futter sử dụng ngôn ngữ Dart để phát triển ứng dụng di động chạy đa nền tảng 1.2 Giới thiệu framework Flutter Hình 2.2 Logo Flutter 1.2.1 Flutter gì? - Flutter phát triển nhằm giải toán thường gặp việc phát triển ứng dụng Fast Development (phát triển ứng dụng nhanh) Native Performance (hiệu suất tối ưu cho nền tảng) Nếu React Native đảm bảo Fast Development Native language đảm bảo Native - Performance Flutter làm điều Phiên Flutter gọi "Sky" chạy hệ điều hành Android Nó công bố hội nghị nhà phát triển Dart 2015, hỗ trợ - ứng dụng hoạt động mức 120 khung hình giây Trong phát biểu hội nghị Google Developer Days Thượng Hải, Google công bố phiên Flutter Release Preview 2, phiên - lớn cuối trước Flutter 1.0 Vào ngày tháng 12 năm 2018, Flutter 1.0 phát hành kiện Flutter Live, phiên "ổn định" framework 1.2.2 Kiến trúc Flutter Hình 2.3 Kiến trúc Flutter Flutter viết chia làm hai tầng: - Tầng sử dụng ngôn ngữ Dart cung cấp đoạn mã xây dựng lên ứng dụng Flutter Các đoạn mã cung cấp phương tiện để có thể thay đổi chỉnh sửa chúng Từ đó giúp ứng dụng lập trình viên có thể tùy chỉnh theo mong muốn Tầng Framework giúp lập trình viên thay đổi - mã nguồn ứng dụng thời điểm compile time Tầng thứ hai Flutter nằm sâu bên viết ngôn ngữ C++ Tầng Shell chứa công cụ trợ giúp ứng dụng Flutter q trình chạy Ở tầng cịn có máy ảo Dart VM Khái niệm máy ảo khái niệm về ứng dụng chạy song song với mã nguồn phần ứng dụng Máy ảo Dart VM có ba nhiệm vụ bao gồm: + Làm ứng dụng trung gian mã nguồn viết Dart thiết bị phần cứng (hoặc phần mềm nằm ngồi ứng dụng) + Thơng dịch đoạn mã Dart theo phương thức JIT (Just in time) AOT (Ahead of Time) + Thực thi đoạn mã thông dịch biên dịch cung cấp runtime system bao gồm garbage collector, thư viện cần có khác 10 2.3 Tạo project Flutter Android Studio - Khởi tạo Android Studio Mở Android Studio lựa chọn File -> Setting -> Plugin Bạn tìm với từ khóa Flutter sau đó bạn cài Flutter vào android studio Hình 2.7 Cài đặt flutter - Click Yes chờ cho plugin để download Hình 2.8 Xác nhận cài đặt Flutter 15 Hình 2.6 Tải flutter - Click Restart Android Studio click Restart để kích hoạt plugin vào Android Studio Hình 2.9 Giao diện Android Studio kích hoạt Flutter - Bạn vào trang web Flutter để tải SDK Flutter về Sau khởi động lại Android Studio, Chúng ta bắt đầu với "Start a new Flutter project" 16 Hình 2.7 Khởi tạo project Flutter 17 - Giải nén Sdk bạn vừa tải về , sau đó trỏ đường dẫn tới file đó 18 Hình 2.8 Sau khởi tạo thành công project Flutter CHƯƠNG 3: PHÁT TRIỂN ỨNG DỤNG TRÒ CHUYỆN TRỰC TUYẾN VỚI FLUTTER 3.1 Đặt vấn đề Hiện nay, giới trẻ, đặc biệt bạn học sinh sinh viên số đối tượng doanh nghiệp, công nhân viên chức gặp khó khăn lúc cần sửa lỗi gửi tệp đến người khác thông qua Internet Dẫn đến không nâng cao suất hoạt động công việc Từ đó, gặp khó khăn việc sử dụng môi trường công nghệ để giao tiếp với Nhận thấy vấn đế vấn đề thực tế thiết yếu, nhóm chọn đề tài nghiên cứu ứng dụng vào Đồ án 3.2 Phạm vi ứng dụng Ứng dụng nhóm định hướng đến người có nhu cầu trò chuyện trực tuyến hay nói cách khác thời gian thực, tiện lợi song Internet, xem xét khắc phục lỗi cho khách hàng từ xa hay đơn giản chia thông tin Đây 19 nhóm người thường xuyên sử dụng máy tính, laptop Do đó họ có khả cần chia sẽ, giúp đỡ từ bạn bè, đồng nghiệp từ xa Ứng dụng trợ thủ đắc lực giúp họ có thể nhận trợ giúp từ xa thơng qua việc trị chuyện trực tuyến khơng tính phí Từ đó có thể nâng cao suất làm việc chia tài liệu 3.3 Các chức - Chức Đăng nhập Google Chức Chatbox Thông báo tin nhắn 3.4 Phân tích thiết kế Lược đồ phân cấp chức Hình 3.10 Lược đồ phân cấp chức Sơ đồ use case đặc tả use case 20 Hình 3.11 Use case tổng quát Hình 3.12 Use case Đăng nhập Hình 3.13 Use case Thông báo tin nhắn 21 Hình 3.14 Use case Chatbox 3.5 Các hình giao diện ứng dụng Hình 3.1 Màn hình đăng nhập 22 Hình 3.2 Màn hình ứng dụng 23 Hình 3.3 Giao diện chatbox 24 Hình 3.4 Cài đặt tên viết tiểu sử 25 Hình 3.5 Giao diện chọn ảnh gửi cho bạn bè 26 Tên Màn hình Mơ tả Màn hình bắt đầu mở ứng dụng, chứa thông tin danh sách bạn bè, tiểu sử bạn bè Chi tiết - Chọn người mong muốn để tiến hành trò chuyện - Danh sách bạn bè load từ databass (firebase) - Có thể cài đặt nickname cho thân viết tiểu sử - Trong chatbox tùy chọn gửi ảnh cho bạn bè - Nhận thông báo tin nhắn từ trạng thái - Đăng nhập tài khoản Google 27 CHƯƠNG 4: KẾT LUẬN 4.1 Kết thu - Căn vận dụng Dart Flutter vào việc phát triển ứng dụng di động Sử dụng Firebase làm sở liệu Nắm nhu cầu đối tượng khách hàng chủ yếu người trẻ doanh nhân ứng dụng 4.2 Khó khăn gặp phải - Gặp khó khăn việc kết nối Firebase với ứng dụng Flutter Khó khăn việc chuyển đổi bảng CSDL thành kiểu - liệu tương ứng Dart Bố cục code khó theo dõi, khó khăn việc quản lý code, bảo trì phát - triển Yêu cầu cấu hình cao để phát triển ứng dụng, chiếm nhiều tài nguyên Debug 4.3 Hướng phát triển tương lai - Hoàn thiện về mặt giao diện, cải thiện tốc độ phản hồi, cung cấp trải - nghiệm chạm vuốt mượt mà Sắp xếp bố cục hợp lý hơn, mang lại trải nghiệm sử dụng đơn giản trực - quan Tổ chức quản lý Cơ sở liệu hợp lý khoa học Thêm tính Gọi điện trực tiếp tương lại Vận dụng công nghệ để mang lại nhiều chức thiết thực hữu ích 28 TÀI LIỆU THAM KHẢO Nhóm có dùng tài liệu tham khảo từ trang chủ Flutter với đó hỡ trợ tích cực lập trình viên Stackoverflow, Github,… https://pub.dev/ https://flutter.dev/docs https://stackoverflow.com/ https://github.com/NguyenTaiBoi/chat_box_app? fbclid=IwAR3YcE0Nzj1xXFoQfyQgkfsRo1ZGZwZrSwEDQmm5kpfK8loB20bQTvCeM8 29 ... công nghệ ứng dụng Flutter Quá trình tìm hiểu nghiệp vụ nhóm chúng em có tham khảo diễn đàn về trò chuyện trực tuyến (Messenger, Zalo,…) Cùng với đó tham khảo ứng dụng có sẵn chợ ứng dụng để... niệm về ứng dụng chạy song song với mã nguồn phần ứng dụng Máy ảo Dart VM có ba nhiệm vụ bao gồm: + Làm ứng dụng trung gian mã nguồn viết Dart thiết bị phần cứng (hoặc phần mềm nằm ứng dụng) ... song điện thoại ứng dụng máy tính bạn để đảm bảo hiệu suất Thay thực gọi phải tốn phí cao mã vùng để đảm bảo suât làm việc lúc nơi, bọn em định xây dựng Ứng dụng trò chuyện trực tuyến để khắc phục