Đồ án xây dựng công cụ chat

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN BÁO CÁO MÔN HỌC ĐỒ ÁN Đề tài: Xây dựng công cụ Chat  Giảng viên hướng dẫn  Huỳnh Nguyễn Khắc Huy  Lớp  Đồ Án  Sinh viên thực  Bùi Nguyễn Anh Thư – 17521102 Lê Anh Vũ – 17521269 Tp Hồ Chí Minh, tháng 09 năm 2020 Trang NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN ., ngày tháng ……… năm 2020 Người nhận xét (Ký tên ghi rõ họ tên) Trang LỜI CẢM ƠN Trong trình làm báo cáo, em nhận giúp đỡ, đóng góp ý kiến bảo nhiệt tình thầy bạn bè Em xin gửi lời cảm ơn chân thành đến thầy Huỳnh Nguyễn Khắc Huy - giảng viên khoa Công nghệ phần mềm - Trường ĐH CNTTĐHQG Tp HCM người tận tình hướng dẫn, góp ý bảo em suốt q trình làm báo cáo Ngồi ra, em xin gửi lời cảm ơn đến thầy cô giáo trường ĐH CNTT- ĐHQG Tp HCM nói chung, thầy Khoa Cơng nghệ phần mềm nói riêng dạy dỗ cho em kiến thức lập trình, qua em có sở lý thuyết vững vàng từ hồn thành tốt đồ án Cuối cùng, em xin chân thành cảm ơn thầy cô bạn bè, tạo điều kiện, quan tâm, giúp đỡ, động viên em suốt q trình hồn thành đồ án Thành phố Hồ Chí Minh, ngày 28 tháng 09 năm 2020 Trang MỤC LỤC NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN LỜI CẢM ƠN .3 MỤC LỤC .4 TỔNG QUAN Lý chọn đề tài: Mục tiêu đề tài: Một số công nghệ sử dụng: GIỚI THIỆU ĐỀ TÀI NGHIÊN CỨU THỰC NGHIỆM - LÝ THUYẾT .8 Nội dung nghiên cứu Phương pháp nghiên cứu 15 CÔNG NGHỆ 16 HIỆN THỰC .18 Kết cài đặt chức 18 Các yêu cầu khác cài đặt/sử dụng phần mềm 26 Các yêu cầu khác cài đặt/sử dụng phần mềm 26 TỔNG KẾT 27 Tổng kết .27 Hướng phát triển 27 Trang TỔNG QUAN Lý chọn đề tài: - Xuất phát từ mong muốn học hỏi nâng cao kinh nghiệm xây dựng ứng dụng thực tế chúng em chọn đề tài “Xây dựng công cụ Chat” Mục tiêu đề tài: - Xây dựng công cụ Chat hoạt động web android moblie - Ứng dụng có hệ thống quản lý user, lưu lịch sử chat - Ứng dụng gửi file img, video, office,… Một số công nghệ sử dụng: - ReactJS - Firebase - Bootstrap - Ngôn ngữ: HTML, CSS, JS, Java - MaterialEditText by rengwuxian - Squared Image View by Theophrast - Picasso - Glide by bumptech - Circle Image View by hodenhof Thời gian thực đề tài: Từ ngày 27/09/2020 đến ngày 06/01/2021 Trang GIỚI THIỆU ĐỀ TÀI Hiện nay, giới chứng kiến phát triển vượt bậc Internet ứng dụng Internet Cùng với phát triển cộng với nhu cầu trao đổi thơng tin liên lạc cách nhanh chóng tiện lợi thúc đẩy phát triển phần mềm để trao đổi thơng tin cách tức Điển hình cho phần mềm ứng dụng “chat” Các ứng dụng cho phép người dùng gửi nhận thông điệp nhanh chóng cách trực tiếp với nhau, ứng dụng “Facebook Messeger”, “Yahoo Messeger”, “Zalo”,… đời nhằm mục đích phục vụ nhu cầu Vì mục đích học hỏi, tìm hiểu tạo cơng cụ Chat tương tự nên đồ án tập trung vào xây dựng công cụ chat online với đề tài “Xây dựng công cụ Chat” Công cụ chat xây dựng có tên WeebChat, bao gồm hai tảng Web thiết bị Android Các chức WeebChat tảng bao gồm :  Android: - Đăng nhập - Đăng xuất - Reset mật qua email - Đăng ký - Quản lý thông tin người dùng - Thể trạng thái người dùng - Thay đổi ảnh đại diện - Chat trực tuyến Trang - Gửi file ảnh tệp văn (pdf , docx) - Tìm kiếm người dùng danh sách  Web: - Đăng nhập - Đăng xuất - Đăng ký - Quản lý thông tin người dùng - Chat trực tuyến - Thể trạng thái người dùng WeebChat bao gồm chức ứng dụng trao đổi trực tuyến giúp người dùng dễ dàng liên lạc với hai tảng riêng biệt Điểm khác biệt WeebChat công cụ Chat thiếu hụt chức để tạo trải nghiệm cho người dùng Và Firebase Realtime Database mà WeebChat sử dụng mang nhiều hạng chế mặt quản lý file Trang NGHIÊN CỨU THỰC NGHIỆM - LÝ THUYẾT Nội dung nghiên cứu * Giới thiệu ReactJS - React thư viện JavaScript phổ biến để xây dựng giao diện người dùng (UI) Nó cho tốc độ phản hồi tuyệt vời user nhập liệu cách sử dụng phương pháp để render trang web - Components công cụ phát triển Facebook Nó mắt cơng cụ JavaScript mã nguồn mở vào năm 2013 Hiện tại, trước đối thủ Angular Bootstrap, hai thư viện JavaScript bán chạy thời * Giới thiệu Firebase - Firebase tảng để phát triển ứng dụng di động trang web, bao gồm API đơn giản mạnh mẽ mà không cần backend hay server - Firebase dịch vụ sở liệu hoạt động tảng đám mây – cloud Kèm theo hệ thống máy chủ mạnh mẽ Google Chức giúp người dùng lập trình ứng dụng cách đơn giản hóa thao tác với sở liệu Cụ thể giao diện lập trình ứng dụng API đơn giản Mục đích nhằm tăng số lượng người dùng thu lại nhiều lợi nhuận Đặc biệt, dịch vụ đa bảo mật cực tốt Firebase hỗ trợ hai tảng Android IOS Khơng có khó hiểu nhiều lập trình viên chọn Firebase làm tảng để xây dựng ứng dụng cho hàng triệu người dùng toàn giới Trang - Gần thập niên trước, Firebase đời với tiền thân Envolve Đây tảng đơn giản chuyên cung cấp API cần thiết để tích hợp tính chat vào trang web Bên cạnh ứng dụng nhắn tin trực tuyến, Envolve người dùng sử dụng để truyền đồng hóa liệu cho ứng dụng khác trị chơi trực tuyến,… Do đó, nhà sáng lập tách biệt hệ thống nhắn tin trực tuyến đồng liệu thời gian thực thành hai phần riêng biệt Trên sở đó, năm 2012, Firebase đời với sản phẩm cung cấp dịch vụ Backend-as-a-Service Tiếp đến, vào năm 2014, Google mua lại Firebase phát triển thành dịch vụ đa chức hàng triệu người sử dụng Sau Google mua lại phát triển, Firebase bao gồm hoạt động như: Firebase Realtime Database gì? Khi đăng ký tài khoản Firebase để tạo ứng dụng, bạn có sở liệu thời gian thực Dữ liệu bạn nhận dạng JSON Đồng thời đồng thời gian thực đến kết nối client Đối với ứng dụng đa tảng, tất client sử dụng sở liệu Nó tự động cập nhật liệu lập trình viên phát triển ứng dụng Cuối cùng, tất liệu truyền qua kết nối an tồn SSL có bảo mật với chứng nhận 2048 bit Trong trường hợp bị mạng, liệu lưu lại local, có thay đổi tự động cập nhật lên Server Firebase Bên cạnh đó, liệu local cũ với Server tự động cập nhật để liệu Freebase Authentication gì? Trang Fi rebase xây dựng hành động tự động đăng nhập cho ứng dụng cách xác thực danh tính Hoạt động bật Firebase xây dựng bước xác thực người dùng Email, Facebook, Twitter, GitHub, Google Đồng thời xác thực nặc danh cho ứng dụng Hoạt động xác thực giúp thông tin cá nhân người sử dụng an tồn đảm bảo khơng bị đánh cắp tài khoản Firebase Hosting gì? Trang 10 - Theo Mozilla Developer Network HTML Element Reference có khoảng 140 tag Tuy nhiên vài tag số bị tạm ngưng (do khơng hỗ trợ trình duyệt hành) - HTML document có file dạng html htm Nhiệm vụ trình duyệt đọc file HTML “biến đổi” chúng thành dạng nội dung visual Internet cho người dùng xem hiểu chúng - Thơng thường, website có nhiều HTML document (ví dụ: trang chủ, trang blog, trang liên hệ,…) trang có tệp HTML riêng Mỗi tài liệu HTML bao gồm tag (hay cịn gọi element) Nó tạo cấu trúc tương tự thư mục với heading, section, paragraph,… số khối nội dung khác Hầu hết tất HTML element có tag mở tag đóng với cấu trúc * Giới thiệu CSS - CSS ngôn ngữ tạo phong cách cho trang web – Cascading Style Sheet language Nó dùng để tạo phong cách định kiểu cho yếu tố viết dạng ngôn ngữ đánh dấu, HTML Nó điều khiển định dạng nhiều trang web lúc để tiết kiệm cơng sức cho người viết web Nó phân biệt cách hiển thị trang web với nội dung trang cách điều khiển bố cục, màu sắc, font chữ - CSS phát triển W3C (World Wide Web Consortium) vào năm 1996, lý đơn giản HTML không thiết kế để gắn tag để giúp định dạng trang web Bạn dùng để “đánh dấu” lên site - Những tag mắt HTML phiên 3.2, gây nhiều rắc rối cho lập trình viên Vì website có nhiều font khác nhau, màu phong cách khác Để viết lại code cho trang web trình dài, cực nhọc Vì vậy, CSS tạo W3C để giải vấn đề Trang 13 - Mối tương quan HTML CSS mật thiết HTML ngôn ngữ markup (nền tảng site) CSS định hình phong cách (tất tạo nên giao diện website), chúng tách rời - CSS lý thuyết khơng có được, website không trang chứa văn mà khơng có khác * Giới thiệu NodeJS - NodeJS tảng (Platform) phát triển độc lập xây dựng Javascript Runtime Chrome mà xây dựng ứng dụng mạng cách nhanh chóng dễ dàng mở rộng - NodeJS xây dựng phát triển từ năm 2009, bảo trợ công ty Joyent, trụ sở California, Hoa Kỳ Dù nên biết qua chút chút lịch sử thứ mà học chút nhỉ? - Phần Core bên Nodejs viết hầu hết C++ nên cho tốc độ xử lý hiệu cao - NodeJS tạo ứng dụng có tốc độ xử lý nhanh, realtime thời gian thực - NodeJS áp dụng cho sản phẩm có lượng truy cập lớn, cần mở rộng nhanh, cần đổi công nghệ, tạo dự án Startup nhanh * Giới thiệu JavaScript: - JavaScript, theo phiên hành, ngôn ngữ lập trình thơng dịch phát triển từ ý niệm nguyên mẫu Ngôn ngữ dùng rộng rãi cho trang web (phía người dùng) phía máy chủ (với Nodejs) Nó vốn phát triển Brendan Eich Hãng truyền thông Netscape với tên Mocha, sau đổi tên thành LiveScript, cuối thành JavaScript Giống Java, JavaScript có cú pháp tương tự C, gần với Self Java .js phần mở rộng thường dùng cho tập tin mã nguồn JavaScript Trang 14 - Xuất lần đầu tháng năm 1995; 25 năm trước - Phiên JavaScript ECMAScript 7[3] ECMAScript phiên chuẩn hóa JavaScript Trình duyệt Mozilla phiên 1.8 beta có hỗ trợ khơng đầy đủ cho E4X - phần mở rộng cho JavaScript hỗ trợ làm việc với XML, chuẩn hóa ECMA357.- JavaScript ngơn ngữ lập trình đa tảng - Hiện có nhiều libraries framework viết từ Javascript như: + AngularJS: Một thư viện dùng để xây dựng ứng dụng Single Page + NodeJS: Một thư viện phát triển phía Server dùng để xây dựng ứng dụng realtime + Sencha Touch: Một Framework dùng để xây dựng ứng dụng Mobile + ExtJS: Một Framework dùng xây dựng ứng dụng quản lý (Web Applications) + JQuery: Một thư viện mạnh hiểu ứng + ReactJS: Một thư viện viết ứng dụng mobie + Và nhiều thư viện khác Phương pháp nghiên cứu - Phương pháp chủ đạo: Phương pháp nghiên cứu tài liệu - Phương pháp bổ trợ: Phương pháp quan sát Trang 15 CÔNG NGHỆ - Weeb Chat ứng dụng xây dựng để hoạt động đa tảng sử dụng số công nghệ sau:  Android: - Firebase: + Các code config để kết nói với Firebase cung cấp : build.gradle ( Module: app) implementation platform('com.google.firebase:firebase-bom:26.1.1') implementation 'com.google.firebase:firebase-analytics' implementation 'com.google.firebase:firebase-auth' implementation 'com.google.firebase:firebase-auth:16.0.5' implementation 'com.google.android.material:material:1.0.0' implementation 'com.google.firebase:firebase-database:19.1.0' implementation 'com.google.firebase:firebase-core:17.2.0' implementation 'com.google.firebase:firebase-storage:16.0.1' implementation platform('com.google.firebase:firebase-bom:26.2.0') implementation 'com.google.firebase:firebase-firestore'  Web: // For Firebase JS SDK v7.20.0 and later, measurementId is optional const firebaseConfig = { apiKey: "AIzaSyBW9P-Tz4JYrLvPg4xamNLWDKe0Vsh4QRc", authDomain: "weebchat-8cd0d.firebaseapp.com", databaseURL: "https://weebchat-8cd0d-default-rtdb.firebaseio.com", projectId: "weebchat-8cd0d", storageBucket: "weebchat-8cd0d.appspot.com", Trang 16 messagingSenderId: "63112649678", appId: "1:63112649678:web:85cdd8189bc82b6199299f", measurementId: "G-N777DSBPJR" }; Có thể lấy thành phần trang hướng dẫn Google Firebase : https://firebase.google.com/docs?authuser=0 Trang 17 HIỆN THỰC Kết cài đặt chức  Android: Màn hình chính: - Màn hình gồm chức : Login Register Trang 18 Màn hình Login: - Màn hình Login gồm có + Nút Login để đăng nhập + TextView “Forgot your password” để dẫn đến đường dẫn reset password email Màn hình Sign up: Trang 19 Màn hình Chats: Trang 20 Màn hình user: Trang 21 Màn hình profile: Trang 22 Màn hình chat : Trang 23 Trang 24  Web: Màn hình Login: Màn hình Sig up: Trang 25 Màn hình chat: Các yêu cầu khác cài đặt/sử dụng phần mềm - Nền tảng : + Hệ điều hành: Windows + Trình duyệt: Web, Android Các yêu cầu khác cài đặt/sử dụng phần mềm  Tài liệu tham khảo: - https://firebase.google.com/docs?authuser=0 - https://github.com/hdodenhof/CircleImageView - https://github.com/rengwuxian/MaterialEditText - https://github.com/bumptech/glide - https://github.com/square/picasso - https://css-tricks.com/building-a-real-time-chat-app-withreact-and-firebase/ Trang 26 TỔNG KẾT Tổng kết Trong kỉ 21 để phục vụ nhu cầu giao tiếp khoản cách xa người người công cụ chat đời phát triển Ngày nhiều công cụ chat xuất hiện, chúng hồn tồn miễn phí dễ sử dụng, kể đến Messenger, Zalo, Telegram… Mỗi ứng dụng lại có cách hoạt động khác động khác ưu, nhược điểm riêng Với kiến thức tảng cộng thêm trình tìm hiểu nghiên cứu chúng em phần hoàn thành đề tài “Xây dựng cơng cụ chat” qua chúng em phần hiểu quy trình, cách thức xây dựng nâng cấp Công cụ chat Chúng em mong nhận đóng góp thầy giáo Huỳnh Nguyễn Khắc Huy để thời gian tới chúng em cố gắng khắc phục vấn đề hạn chế, vấn đề chưa tốt, tìm hiểu bổ sung thêm chức cho phần mềm Em xin chân thành cảm ơn! Hướng phát triển Trong tương lai chúng em có hướng phát triển cho Weeb Chat sau: - Phát triển thêm file ipa cho hệ điều hành IOS - Tạo nhóm chat nhóm - Xóa tin nhắn - Tìm kiếm tin nhắn - Hoàn thiện chức Web Trang 27 ... học hỏi, tìm hiểu tạo cơng cụ Chat tương tự nên đồ án tập trung vào xây dựng công cụ chat online với đề tài ? ?Xây dựng công cụ Chat? ?? Công cụ chat xây dựng có tên WeebChat, bao gồm hai tảng Web... xây dựng ứng dụng thực tế chúng em chọn đề tài ? ?Xây dựng công cụ Chat? ?? Mục tiêu đề tài: - Xây dựng công cụ Chat hoạt động web android moblie - Ứng dụng có hệ thống quản lý user, lưu lịch sử chat. .. hiểu nghiên cứu chúng em phần hoàn thành đề tài ? ?Xây dựng cơng cụ chat? ?? qua chúng em phần hiểu quy trình, cách thức xây dựng nâng cấp Công cụ chat Chúng em mong nhận đóng góp thầy giáo Huỳnh