Đề tài thiết kế ứng dụng nhắn tin trực tuyến tmess

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG VIỆT - HÀN KHOA KHOA HỌC MÁY TÍNH BÁO CÁO (Đồ án/chuyên đề 02) TÊN ĐỀ TÀI THIẾT KẾ ỨNG DỤNG NHẮN TIN TRỰC TUYẾN TMESS Sinh viên thực : Nguyễn Hoàn Thiện Mã sinh viên : 21IT049 Lớp sinh hoạt : 21 GIT Giảng viên hướng dẫn : TS Nguyễn Đức Hiển Đà Nẵng, 05 tháng 12 năm 2022 Ứng dụng nhắn tin trực tuyến LỜI CẢM ƠN Chúng em xin chân thành cảm ơn Khoa Công nghệ thông tin, trường Đại học Công nghệ thông tin Truyền thông Việt - Hàn tạo điều kiện cho chúng em thực Báo cáo đồ án sở này.Xin gửi lời cảm ơn chân thành đến thầy giáo TS Nguyễn Đức Hiển tận tình hướng dẫn, bảo suốt thời gian thực đồ án Trong trình thực đề tài, chúng em học hỏi nhiều kiến thức bổ ích kinh nghiệm quý báu làm tảng cho trình làm việc nghiên cứu sau Em xin chân thành cảm ơn quý Thầy Cô Khoa Công nghệ thơng tin tận tình giảng dạy, trang bị cho em kiến thức quan trọng thời gian vừa qua Xin chân thành cảm ơn bạn, đặc biệt thành viên nhóm đồn kết, ủng hộ, giúp đỡ chúng em suốt thời gian học tập trường thời gian thực đề tài Mặc dù cố gắng hoàn chỉnh ứng dụng phạm vi khả cho phép chắn khơng tránh khỏi thiếu sót, mong nhận thơng cảm, góp ý q Thầy Cơ Chúng em cố gắng để hồn thiện phát triển website Nhóm chúng em xin chân thành cảm ơn! Đà Nẵng, ngày 05, tháng 12 , năm 2021 Thành viên nhóm Nguyễn Hồn Thiện Khoa KHMT – Mã sinh viên : 21IT049 Nguyễn Hoàn Thiện Ứng dụng nhắn tin trực tuyến NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… ………………………………………………………………………………… Đà Nẵng, ngày 05 tháng 12 năm 2022 Giảng viên hướng dẫn TS Nguyễn Đức Hiển Khoa KHMT – Mã sinh viên : 21IT049 Nguyễn Hoàn Thiện Ứng dụng nhắn tin trực tuyến MỤC LỤC LỜI CẢM ƠN NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN MỤC LỤC DANH MỤC BẢNG BIỂU DANH MỤC HÌNH ẢNH MỞ ĐẦU CHƯƠNG TỔNG QUAN VỀ ĐỀ TÀI 1.1 Lý chọn đề tài: 1.2 Mục đích thực : 9 Đáp ứng yêu cầu tiêu chuẩn : Thực chức chính: CHƯƠNG TÌM HIỂU CƠNG CỤ 2.1 GIỚI THIỆU VỀ FLUTTER : 10 10 2.2 ĐIỀU LÀM FLUTTER ĐỘC ĐÁO: 11 2.3 CÁC TÍNH NĂNG CỦA FLUTTER: 12 2.4 KIẾN TRÚC FLUTTER 15 2.4.1 Kiến trúc Flutter 15 2.4.2 Flutter Engine 15 2.4.3 Thư viện tảng (Foundation Library) 15 2.4.4 Vật dụng (widget) 15 2.4.5 Thiết kế widget cụ thể 16 2.5 GIỚI THIỆU VỀ NGÔN NGỮ LẬP TRÌNH DART 16 2.5.1 Kiểu liệu 17 2.5.2 Các biến hàm 17 2.5.3 Các biến hàm 18 2.5.4 Lập trình hướng đối tượng 18 2.6 TÌM HIỂU VỀ DATABASE TRONG FLUTTER 2.6.1 Firebase – NoSQL lưu trữ online Khoa KHMT – Mã sinh viên : 21IT049 18 18 Nguyễn Hoàn Thiện Ứng dụng nhắn tin trực tuyến CHƯƠNG PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 20 3.1 MÔ TẢ YÊU CẦU: 20 3.1.1 Mô tả đối tượng 20 3.1.2 Đặc tả chức 20 3.2 PHÂN TÍCH THIẾT KẾ HỆ THỐNG 21 3.2.1 Biểu đồ use-case : 21 3.2.2 Các bảng liệu 22 3.2.3 Mơ hình quan hệ liệu 24 3.2.4 Biểu đồ lớp 25 3.2.5 Biểu đồ hoạt động 25 CHƯƠNG XÂY DỰNG ỨNG DỤNG 28 4.1 Giao diện ứng dụng : 28 4.1.1 Giao diện đăng nhập (login page ) : 28 4.1.2 Giao diện đăng ký (register page ) : 30 4.1.3 Giao diện trang chủ (HomePage ) : 32 4.1.4 Giao diện trang cá nhân (Profile Page ) : 35 4.1.5 Giao diện trang tìm kiếm (Search Page ) : 36 4.1.6 Giao diện trang nhắn tin (Chat Page ) : 37 4.1.7 Giao diện trang thơng tin nhóm (Group Information Page ) : 38 KẾT LUẬN 39 DANH MỤC TÀI LIỆU THAM KHẢO 41 Khoa KHMT – Mã sinh viên : 21IT049 Nguyễn Hoàn Thiện Ứng dụng nhắn tin trực tuyến DANH MỤC BẢNG BIỂU Bảng Bảng kiểu liệu ngôn ngữ Dart 18 Bảng Bảng liệu người dùng (user) 22 Bảng Bảng liệu nhóm chat (groups) 23 Bảng 3 Bảng liệu tin nhắn 23 Khoa KHMT – Mã sinh viên : 21IT049 Nguyễn Hoàn Thiện Ứng dụng nhắn tin trực tuyến DANH MỤC HÌNH ẢNH Hình Logo Flutter Hình 2 Các tính Flutter Hình Kiến trúc Flutter 10 Hình Firebase database 13 Hình Mơ hình sở liệu 17 Hình Use-case diagram 18 Hình 3 Class diagram 19 Hình Login,register activity diagram 20 Hình Create chat group activity diagram 21 Hình search chat group activity diagram 22 Hình Login Page 23 Hình Validation Login Page 23 Hình Khơng tồn tài khoản 24 Hình 4 Register Page 25 Hình Validation Register Page 25 Hình HomePage chưa có group chat 26 Hình Create group chat 27 Hình Create group chat successful 27 Hình Drawer Listview HomePage 28 Hình 10 Logout 28 Khoa KHMT – Mã sinh viên : 21IT049 Nguyễn Hoàn Thiện Ứng dụng nhắn tin trực tuyến MỞ ĐẦU Giới thiệu đề tài Thế kỷ XXI, xã hội đề cao tầm quan trọng kết nối Khoa học, Kỹ thuật, Nhiều loại công nghệ đời nhằm nâng cao chất lượng đời sống chúng ta, hôm em xin giới thiệu đề tài đồ án nhắn tin trực tuyến – Tính khơng thể thiếu thời đại 4.0 “ chat ” có lẽ cụm từ vô phổ biến không làng cơng nghệ mà cịn tất người Đặc biệt với giới trẻ nay, Chat app từ trở thành ứng dụng bất ly thân Thế “chat” ? – Chat kênh trao đổi thơng tin nhiều người sử dụng, giúp tất người trao đổi thơng tin tồn giới làm việc internet – cho phép hai nhiều người dùng đầu dây trị chuyện trực tiếp với qua điện thoại, máy tính Và đồ án sở ứng dụng “chat” đa tảng (mobile, desktop, web, ) Mục tiêu đề tài Tạo ứng dụng nhắn tin đơn giản đa tảng chủ yếu cho mobile, tương thích với hệ điều hành Android IOS cho phép người dùng nhắn tin trực tuyến với Giao diện đẹp mắt, tương tác người dùng tốt Tìm hiểu phân tích tính ứng dụng chat Biết cách để tiếp cận ngôn ngữ Phương pháp nghiên cứu Sử dụng kiến thức học tài liệu có liên quan ngồi nước liên quan đến đề tài nghiên cứu đặc biệt tài liệu phát triển ứng dụng di động , thiết kế hệ thống thơng tin di động Nghiên cứu tìm hiểu tập trung bám sát đề cương hướng dẫn Thầy giáo Tìm hiểu ngơn ngữ lập trình Dart, tìm hiểu framework flutter , firebase , library hữu ích cần thiết , Thảm khảo git/github, stackoverflow, google , youtube , Phạm vi nghiên cứu Phạm vi nghiên cứu ứng dụng chat tảng phổ biến android ios , hướng đến ứng dụng web desktop , Nội dung kế hoạch thực hiện: Khoa KHMT – Mã sinh viên : 21IT049 Nguyễn Hoàn Thiện Ứng dụng nhắn tin trực tuyến Code Login Page Code Register Page Code Home Page Code profile Page Code Chat Page Code group Information Page Code Search Page Bố cục báo cáo Sau phần Mở đầu, báo cáo trình bày ba chương, cụ thể sau: Chương Tổng quan ứng dụng nhắn tin trực tuyến Trong chương này, báo cáo trình bày khái niệm, đặc điểm,phân tích ứng dụng , trình bày lý , mục đích thực đề tài Chương Tìm hiểu công cụ dùng để tạo ứng dụng … Nội dung chương bao gồm đề mục framework flutter , dart , Chương phân tích thiết kế hệ thống ứng dụng… Nội dung chương bao gồm đề mục mô tả yêu cầu phân tích thiết kế Chương Xây dựng ứng dụng nhắn tin trực tuyến (chat app ) Chương mô tả chi tiết cách làm ứng dụng Cuối Kết luận, Tài liệu tham khảo Phụ lục liên quan đến đề tài Khoa KHMT – Mã sinh viên : 21IT049 Nguyễn Hoàn Thiện CHƯƠNG TỔNG QUAN VỀ ĐỀ TÀI 1.1 Lý chọn đề tài: Ngày nay, ứng dụng công nghệ tin học hóa xem yếu tố mang tính định hoạt động người giới Với phát triển mạnh mẽ ngày nhanh chóng xã hội nhu cầu trao đổi thông tin, liên lạc trở nên quan trọng thiết yếu Và hệ thống mạng lưới thơng tin phủ sóng rộng rãi , chắn thực nhiều công việc , truyền thông tin , liệu với tốc độ nhanh chi phí thấp nhiều so với cách thức truyền thống Chính điều thúc đẩy khai sinh phát triển ứng dụng Chat - ứng dụng truyền thông giúp việc truyền thông tin trở nên dễ dàng , tiết kiệm , nhanh chóng , làm biến đổi đáng kể mặt văn hóa , nâng cao chất lượng đời sống người Ban đầu điện thoại thông minh bao gồm tính điện thoại di động thông thường kết hợp với thiết bị phổ biến khác PDA, thiết bị điện tử cầm tay, máy ảnh kỹ thuật số, hệ thống định vị toàn cầu GPS Từ năm đầu 2016 đến điện thoại thông minh phát triển mạnh mẽ bao gồm chức laptop duyệt web, wifi, ứng dụng tiện ích mà người dùng thích kèm theo phụ kiện máy Năm 2019 có hàng loạt mạng xã hội xuất nhiều thị trường công nghệ ứng dụng ưa chuộng giao diện khơng thân thiện với người dùng Chính vậy, đồ án sở em lựa chọn đề tài “Ứng dụng nhắn tin trực tuyến thiết bị di động” 1.2 Mục đích thực : Xây dựng ứng dụng Chat Online điện thoại chạy hệ điều hành Android, IOS , Linux , Đáp ứng yêu cầu tiêu chuẩn : - Giao diện trực quan , dễ thao tác - Phù hợp với ứng dụng triển khai diện rộng , tốn mở rộng - Hệ thống dễ bảo trì dễ phát triển Thực chức chính: Chức : - Người dùng đăng ký , đăng nhập vào ứng dụng chat - Người dùng tạo nhóm chat , tìm kiếm nhóm chat tồn - Người dùng gửi tin nhắn đến nhiều nhóm chat - Người dùng cập nhật thơng tin cá nhân, ảnh avatar , Ứng dụng nhắn tin trực tuyến 29 Hình Login Page Trước thực xác thực với database người dùng cần nhập thông tin hợp lệ , nhập thông tin không hợp lệ hệ thống hiển thị thông báo người dùng cần nhập lại đến hợp lệ Khoa KHMT – Mã sinh viên : 21IT049 Nguyễn Hoàn Thiện Ứng dụng nhắn tin trực tuyến 30 Hình Validation Login Page Sau nhập đầy đủ thông tin hợp lệ , đến bước xác thực với database.Nếu người dùng nhập email password đăng ký ứng dụng điều hướng đến trang , ngược lại thơng báo khơng tồn tài khoản Hình Không tồn tài khoản Khoa KHMT – Mã sinh viên : 21IT049 Nguyễn Hoàn Thiện Ứng dụng nhắn tin trực tuyến 31 4.1.2 Giao diện đăng ký (register page ) : Chức đăng ký cho phép người dùng đăng ký tài khoản cho thơng tin lưu vào database, bước xác thực bên trang đăng nhập hoạt động Hình 4 Register Page Người dùng cần nhập hợp lệ thông tin để hoàn tất đăng ký tài khoản Khoa KHMT – Mã sinh viên : 21IT049 Nguyễn Hoàn Thiện Ứng dụng nhắn tin trực tuyến 32 Hình Validation Register Page 4.1.3 Giao diện trang chủ (HomePage ) : Sau đăng ký đăng nhập thành công người dùng điều hướng đến trang hệ thống.Ở người dùng cần tạo hội thoại để trao đổi nhắn tin với người dùng khác, khơng có group hệ thống hiển thị thông báo hình Người dùng tạo hội thoại “plus button “phía bên trái hình trang Khoa KHMT – Mã sinh viên : 21IT049 Nguyễn Hoàn Thiện Ứng dụng nhắn tin trực tuyến 33 Hình HomePage chưa có group chat Hình Create group chat Khoa KHMT – Mã sinh viên : 21IT049 Nguyễn Hoàn Thiện Ứng dụng nhắn tin trực tuyến 34 Hình Create group chat successful Ở trang có menu listview cho phép người dùng điều hướng đến trang cá nhân hay logout khỏi ứng dụng chat Hình Drawer Listview HomePage Khoa KHMT – Mã sinh viên : 21IT049 Nguyễn Hồn Thiện Ứng dụng nhắn tin trực tuyến 35 Hình 10 Logout 4.1.4 Giao diện trang cá nhân (Profile Page ) : Hình 4.10 Profile Page Giao diện trang cá nhân cho phép người dùng thay đổi ảnh đại diện cách nhấn nút “pick image” phía avatar Khoa KHMT – Mã sinh viên : 21IT049 Nguyễn Hoàn Thiện Ứng dụng nhắn tin trực tuyến 36 Hình 4.11 Chức chọn avatar Sau chọn avatar người dùng lưu hình ảnh lên database nút “Upload Profile ” Khoa KHMT – Mã sinh viên : 21IT049 Nguyễn Hoàn Thiện Ứng dụng nhắn tin trực tuyến 37 Hình 4.12 Upload avatar to Database 4.1.5 Giao diện trang tìm kiếm (Search Page ) : Người dùng tìm kiếm nhóm chat cách nhấn vào search icon bên phải trang , điều hướng người dùng đến trang tìm kiếm Ở người dùng tìm kiếm nhóm chat tồn database Hình 4.13 Search exist groups in database 4.1.6 Giao diện trang nhắn tin (Chat Page ) : Sau tìm nhóm chat người dùng tham gia nhóm chat cách nhấn nút “Join Group” sau người dùng đưa đến trang nhắn tin groups Khoa KHMT – Mã sinh viên : 21IT049 Nguyễn Hoàn Thiện Ứng dụng nhắn tin trực tuyến 38 Hình 4.14 Chat Page 4.1.7 Giao diện trang thơng tin nhóm (Group Information Page ) : Hình 4.15 Group Information Page Khoa KHMT – Mã sinh viên : 21IT049 Nguyễn Hoàn Thiện Ứng dụng nhắn tin trực tuyến 39 Người dùng tham gia nhóm chat , tất nhiên người dùng rời khỏi nhóm chat tùy ý Hình 4.16 Leave out group chat Khoa KHMT – Mã sinh viên : 21IT049 Nguyễn Hoàn Thiện KẾT LUẬN Kết đạt Với nội dung đề tài “Xây dựng ứng dụng nhắn tin trực tuyến đa tảng”, ứng dụng xây dựng phần mềm Visual Studio Code, dùng Firebase để xác thực đăng nhập , đăng ký lưu thông tin Sử dụng framework flutter viết ngơn ngữ lập trình dart theo mơ hình MVC Trong thời gian tìm hiểu, nghiên cứu sở lý thuyết triển khai ứng dụng công nghệ, đồ án đạt kết sau: Về mặt lý thuyết, đồ án cung cấp đầy đủ chi tiết khái niệm, định nghĩa xoay quanh tốn Việc phân tích thiết kế hệ thống chi tiết cụ thể Về mặt thực tiễn ứng dụng, đồ án giải vấn đề đặt ra, ứng dụng hoàn thành nhiệm vụ tạo nhóm nhắn tin người dùng với Hệ thống ứng dụng hoàn với thiết kế ban đầu Kết thực với điều kiện cần điều kiện đủ để tạo Giao diện ứng dụng dễ sử dụng, trực quan khơng có nhiều thao tác phức tạp, giúp cho ngƣời dùng dễ dàng sử dụng, với đầy đủ chức năng: - Đăng nhập/đăng xuất ứng dụng Đăng ký tài khoản Tạo nhóm chat Tham gia/rời khỏi nhóm chat Tìm kiếm nhóm chat Chat Thay đổi ảnh đại diện Nhược điểm đề tài Mặc dù cố gắng, với khả kiến thức thời gian hạn chế, nên đề tài khơng thể tránh khỏi thiếu sót số nhược điểm sau: - Chưa áp dụng cách quản lý (state management) nên ứng dụng chưa tối ưu , dễ bảo trì (maintain) Chức cịn hạn chế, tập trung vào chức hệ thống, chưa phát triển số chức bong bóng chat , thông báo tin nhắn , login google , facebook , Hướng phát triển đề tài : Để ứng dụng hoạt động hiệu hơn, cần có kết hợp giao diện chuyên nghiệp, dễ sử dụng với chức nghiên cứu phát triển đề tài sau: - Sử dụng thư viện quản lý trạng thái provider , bloc , GetX, để tối ưu UX 41 - Thêm chức hiển thị list group tồn database , thêm chức thông báo có tin nhắn , thêm nhiều hình thức đăng nhập google , facebook , twitter , phone Khoa KHMT – Mã sinh viên : 21IT049 Nguyễn Hoàn Thiện 42 DANH MỤC TÀI LIỆU THAM KHẢO [1] https://docs.flutter.dev/cookbook [2] https://docs.flutter.dev/ [3] https://docs.flutter.dev/development/ui/widgets/basics [4] https://www.w3adda.com/dart-tutorial [5] https://pub.dev/ [6] https://firebase.flutter.dev/ [7] https://firebase.flutter.dev/docs/in-app-messaging/overview/? fbclid=IwAR2nEJkBaUioX7ujDLkWS2Czie4hQqWNd9kZHZX6CuYgZImD_CdBbjXZyg [8] https://icttube.com/tag/flutter-free/? fbclid=IwAR0eNe1gMpTAd_8Z7hzRdO34BFml1BuB6yBdHZ1oiEa05aSgR2wiMIpv Xac [9] https://icttube.com/flutter-course-for-beginners/? fbclid=IwAR2z05MNzJuEqcUideDpZ4L5mY9Sjga69COMB3LILTiGoq_2N6Xbm_H bF04 [10] https://medium.com/flutter-community/building-chat-app-in-flutter-withfirebase-888b6222fe20? fbclid=IwAR2nhOx4zP9R73IS8feNeUHOgYCn4VDQyYj2IXLR4GkT8hhHpsv3hqALus Khoa KHMT – Mã sinh viên : 21IT049 Nguyễn Hoàn Thiện 43 Khoa KHMT – Mã sinh viên : 21IT049 Nguyễn Hoàn Thiện