Bài báo cáo project ỨNG DỤNG CHAT TUNA MESSENGER

HỌC VIỆN CƠNG NGHỆ BƯU CHÍNH VIỄN THƠNG KHOA CƠNG NGHỆ THÔNG TIN Học phần: Phát triển ứng dụng cho thiết bị di động Nhóm: 06 Bài báo cáo project: ỨNG DỤNG CHAT - TUNA MESSENGER Giảng viên: Sinh viên: Mã sinh viên: ThS Trịnh Thị Vân Anh Phạm Tuấn Nam B17DCAT134 Hà Nội - 2021 MỤC LỤC MỤC LỤC MỤC LỤC HÌNH ẢNH LỜI NÓI ĐẦU GIAO DIỆN MẤT CÔNG DESIGN NHẤT CỦA APP LIỆT KÊ CÁC CHỨC NĂNG LÀM ĐƯỢC TRÌNH BÀY CHI TIẾT ỨNG DỤNG MỤC LỤC HÌNH ẢNH Hình 1: Giao diện cơng design app .5 Hình 2: Splash screen .7 Hình 3: Country code picker Hình 4: Để trống SĐT Hình 5: Điền thiếu/thừa số .9 Hình 6: Xác nhận .9 Hình 7: Mã OTP gửi 10 Hình 8: Không điền OTP .10 Hình 9: Điền thiếu/thừa/sai mã OTP 11 Hình 10: Mã OTP gửi SĐT .11 Hình 11: Đăng ký thành công 12 Hình 12: Khơng điền tên 12 Hình 13: Khơng chọn ảnh đại diện 13 Hình 14: Fragment chat 13 Hình 15: Fragment voice 14 Hình 16: Fragment video 14 Hình 17: Menu .15 Hình 18: Thơng tin user 15 Hình 19: Online hai máy vào app 16 Hình 20: Cập nhật thông tin 16 Hình 21: Cập nhật thông tin thành công 17 Hình 22: Chuyển trạng thái user thoát app .17 Hình 23: Tiến hành vào chat hai users 18 Hình 24: Test .18 Hình 25: Test .19 Hình 26: Test .19 Hình 27: Firebase 20 Hình 28: User 20 Hình 29: Cloud Firestore 21 Hình 30: Realtime Database 21 Hình 31: Tin nhắn lưu trữ 22 Hình 32: Storage 22 Hình 33: Ảnh đại diện users lưu 23 Hình 34: Thơng tin chi tiết ảnh đại diện user Pham Tuan Nam 23 LỜI NÓI ĐẦU Em tên Phạm Tuấn Nam, mã sinh viên: B17DCAT134, nhóm lớp học: 06 Sau học xong môn phát triển ứng dụng cho thiết bị di động, em học nhiều kiến thức cần thiết cho việc phát triển ứng dụng tảng Android Em lựa chọn project ứng dụng chat làm chủ đề cho tập lớn mơn em đặt tên TUNA MESSENGER – dựa theo tên viết tắt em Giao diện ứng dụng em lấy cảm hứng từ app chat whatsapp Trong trình thực project em gặp nhiều bug may mắn tìm hướng dẫn mạng nên sửa ứng dụng chạy thành cơng Nếu báo cáo có sai sót em mong cô thông cảm bỏ qua cho em, em cảm ơn cô nhiều! Link Google Drive folder ứng dụng em dạng rar: https://drive.google.com/file/d/1zDAyqsjtoY84P2ev5daWiHn8WkYmsn9/view?usp=sharing Link Google Drive dự phòng folder ứng dụng em: https://drive.google.com/drive/folders/12DfG6VUuJVz_kBJj79ewEUkG4T whakR3?usp=sharing GIAO DIỆN MẤT CÔNG DESIGN NHẤT CỦA APP Một giao diện mà em công design app chat em giao diện chat users: Hình 1: Giao diện cơng design app Trong giao diện này, em sử dụng file xml: - file xml giao diện gồm button quay lại, hiển thị tên user ảnh đại diện, recycler view, box chat tin nhắn button gửi tin nhắn - file xml giao diện hiển thị khung chat user gửi tin nhắn, gồm có layout khung chat, text view tin nhắn gửi text view hiển thị thời gian người gửi gửi tin nhắn - file xml giao diện hiển thị khung chat user nhận tin nhắn, gồm có layout khung chat, text view tin nhắn nhận text view hiển thị thời gian user cịn lại gửi tin nhắn cho user LIỆT KÊ CÁC CHỨC NĂNG LÀM ĐƯỢC Các chức app TUNA Messenger: - Đăng nhập số điện thoại xác thực tin nhắn gửi mã OTP - Quay lại trang đăng nhập chưa nhận mã OTP muốn đổi số điện thoại - Đăng ký thông tin người dùng gồm tên ảnh đại diện - Hiển thị users trạng thái Online Offline user có app hay khơng - Thốt ứng dụng Menu - Thơng tin người dùng Menu - Trong thơng tin người dùng có chức update thông tin người dùng gồm tên ảnh đại diện - Sau update thông tin người dùng users khác thấy tên ảnh đại diện update máy họ - Chat users TRÌNH BÀY CHI TIẾT ỨNG DỤNG Đầu tiên khởi động app em có sử dụng splash screen để thời gian 3s, gồm có logo hình (em tìm thấy mạng phù hợp với tên nội dung app), em để thông tin hình Hình 2: Splash screen Em chọn hình điền SĐT nhận mã OTP làm main activity, em sử dụng thư viện countrycodepicker để hiển thị mã vùng nước Hình 3: Country code picker Nếu để trống phần số điện thoại nhấn button gửi mã OTP hiển thị thơng báo hình Hình 4: Để trống SĐT Nếu điền thiếu/thừa số hiển thị thơng báo hình Hình 5: Điền thiếu/thừa số Sau điền SĐT chuyển sang trang web firebase để xác nhận robot tiến hành gửi mã OTP Hình 6: Xác nhận Sau xác nhận xong quay lại app chuyển qua activity xác thực OTP hiển thị thơng báo hình Nếu khơng nhận mã OTP muốn đổi SĐT nhận OTP user click vào text “Không nhận mã OTP? Đổi số điện thoại khác” để back activity main Hình 7: Mã OTP gửi Nếu không điền mã OTP nhấn button xác nhận OTP hiển thị thơng báo hình Hình 8: Khơng điền OTP 10 Nếu điền thiếu/thừa số mã OTP điền sai mã OTP hiển thị thơng báo hình Hình 9: Điền thiếu/thừa/sai mã OTP Do em khơng có điện thoại sử dụng Android để chạy thử nên em sử dụng số điện thoại em máy iOS để nhận mã OTP Hình 10: Mã OTP gửi SĐT 11 Sau điền mã OTP nhấn button xác nhận OTP intent sang activity set profile hiển thị thơng báo hình Hình 11: Đăng ký thành công Nếu không điền tên nhấn button lưu thơng tin hiển thị thơng báo hình Hình 12: Khơng điền tên 12 Nếu điền tên mà khơng chọn hình ảnh đại diện hiển thị thơng báo hình Hình 13: Không chọn ảnh đại diện Sau chọn ảnh đại diện điền tên, phần mềm hiển thị thông báo tạo hồ sơ thành công, thông tin user lưu lên Cloud Firestore Database Sau ảnh tải lên Storage phần mềm hiển thị thơng báo ảnh tải lên thành công intent sang activity chat Trong giao diện có fragment khác nhau: 13 Hình 14: Fragment chat Hình 15: Fragment voice 14 Hình 16: Fragment video Nút menu gồm có chức hiển thị thơng tin user nút khỏi ứng dụng Hình 17: Menu 15 Bấm vào thông tin hiển thị thông tin user, ảnh đại diện nút back Nếu muốn update thông tin nhấn vào text “Bạn muốn cập nhật thơng tin?” Hình 18: Thơng tin user Khởi động máy ảo thứ hai chạy ứng dụng, hai máy hiển thị trạng thái Online màu xanh Hình 19: Online hai máy vào app 16 Nhấn Menu chọn thông tin, nhấn vào text cập nhật thông tin tiến hành thay đổi tên ảnh đại diện user bên trái Nhấn button back khơng muốn Hình 20: Cập nhật thơng tin Sau nhấn button cập nhật, ứng dụng hiển thị thông báo cập nhật thông tin thành công máy bên trái, thông tin menu cập nhật đồng thời user bên phải hiển thị tên ảnh đại diện user bên trái Thông tin lưu đè lên Cloud Firestore, Database Storage Firebase 17 Hình 21: Cập nhật thông tin thành công Nếu user bên trái khỏi app user bên phải hiển thị trạng thái user Pham Tuan Nam chuyển sang offline Hình 22: Chuyển trạng thái user app Khi nhấn vào user muốn chat intent sang activity chat cụ thể Nếu nhấn button gửi tin mà chưa điền tin nhắn hiển thị thơng báo hình 18 Hình 23: Tiến hành vào chat hai users Test chức nhắn tin từ user sang user Hình 24: Test Test chức nhắn tin từ user sang user 19 Hình 25: Test Các tin nhắn lưu trực tiếp lên Realtime Database Firebase nên app vào lại tin nhắn lưu trữ vào lại hội thoại Hình 26: Test 20 Thơng tin Firebase ứng dụng TUNA Messenger Hình 27: Firebase Thơng tin user em Hình 28: User 21 Hình 29: Cloud Firestore Hình 30: Realtime Database 22 Hình 31: Tin nhắn lưu trữ Hình 32: Storage 23 Hình 33: Ảnh đại diện users lưu Hình 34: Thông tin chi tiết ảnh đại diện user Pham Tuan Nam 24 ... triển ứng dụng cho thiết bị di động, em học nhiều kiến thức cần thiết cho việc phát triển ứng dụng tảng Android Em lựa chọn project ứng dụng chat làm chủ đề cho tập lớn môn em đặt tên TUNA MESSENGER. .. tắt em Giao diện ứng dụng em lấy cảm hứng từ app chat whatsapp Trong trình thực project em gặp nhiều bug may mắn tìm hướng dẫn mạng nên sửa ứng dụng chạy thành cơng Nếu báo cáo có sai sót em... TUNA Messenger: - Đăng nhập số điện thoại xác thực tin nhắn gửi mã OTP - Quay lại trang đăng nhập chưa nhận mã OTP muốn đổi số điện thoại - Đăng ký thông tin người dùng gồm tên ảnh đại diện -