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 các 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: ThS. Trịnh Thị Vân Anh

Sinh viên: Phạm Tuấn Nam
Mã sinh viên: B17DCAT134

Hà Nội - 2021
 MỤC LỤC

MỤC LỤC......................................................................................................................... 2
MỤC LỤC HÌNH ẢNH.....................................................................................................3
LỜI NÓI ĐẦU...................................................................................................................4
GIAO DIỆN MẤT CÔNG DESIGN NHẤT CỦA APP....................................................5
LIỆT KÊ CÁC CHỨC NĂNG LÀM ĐƯỢC.....................................................................6
TRÌNH BÀY CHI TIẾT ỨNG DỤNG..............................................................................7

2
 MỤC LỤC HÌNH ẢNH

Hình 1: Giao diện mất công design nhất của app...............................................................5

Hình 2: Splash screen.........................................................................................................7
Hình 3: Country code picker..............................................................................................8
Hình 4: Để trống SĐT........................................................................................................8
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 về 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 khi cả hai máy cùng 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 của một user thoát app.........................................................17
Hình 23: Tiến hành vào chat giữa hai users.....................................................................18
Hình 24: Test 1.................................................................................................................18
Hình 25: Test 2.................................................................................................................19
Hình 26: Test 3.................................................................................................................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 được lưu trữ tại đây............................................................................22
Hình 32: Storage..............................................................................................................22
Hình 33: Ảnh đại diện của các users được lưu tại đây......................................................23
Hình 34: Thông tin chi tiết ảnh đại diện user Pham Tuan Nam........................................23

3
 LỜI NÓI ĐẦU

Em tên là Phạm Tuấn Nam, mã sinh viên: B17DCAT134, nhóm lớp học: 06.
Sau khi học xong môn phát triển ứng dụng cho các thiết bị di động, em đã học
được nhiều kiến thức cần thiết cho việc phát triển ứng dụng trên nền tảng Android.
Em lựa chọn project ứng dụng chat làm chủ đề cho bài tập lớn của môn này và em
đặt tên nó là TUNA MESSENGER – dựa theo tên viết tắt của em. Giao diện của
ứng dụng em lấy cảm hứng từ app chat whatsapp. Trong quá trình thực hiện
project em gặp nhiều bug nhưng may mắn tìm được hướng dẫn trên mạng nên đã
sửa được và ứng dụng chạy thành công. Nếu bài báo cáo này có gì sai sót em mong
cô thông cảm và bỏ qua cho em, em cảm ơn cô rất nhiều!

Link Google Drive folder ứng dụng của em dưới dạng rar:

https://drive.google.com/file/d/1zDAyqsjtoY84P2ev5daWiHn8W-
kYmsn9/view?usp=sharing

Link Google Drive dự phòng folder ứng dụng của em:

https://drive.google.com/drive/folders/12DfG6VUuJVz_kBJj79ewEUkG4T
whakR3?usp=sharing

4
 GIAO DIỆN MẤT CÔNG DESIGN NHẤT CỦA APP

Một giao diện mà em mất công design nhất trong app chat của em là giao
diện chat giữa 2 users:

Hình 1: Giao diện mất công design nhất của app

Trong giao diện này, em sử dụng 3 file xml:

- 1 file xml giao diện chính gồm button quay lại, hiển thị tên user và ảnh đại
diện, recycler view, box chat tin nhắn và button gửi tin nhắn.

- 1 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 và text view hiển thị thời gian người gửi gửi
tin nhắn.

- 1 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 được và text view hiển thị thời gian user còn
lại gửi tin nhắn cho user chính.

5
 LIỆT KÊ CÁC CHỨC NĂNG LÀM ĐƯỢC

Các chức năng chính của app TUNA Messenger:

- Đăng nhập bằng số điện thoại xác thực bằng tin nhắn gửi mã OTP.

- Quay lại trang đăng nhập nếu chưa nhận được mã OTP hoặc muốn đổi số điện
thoại.

- Đăng ký thông tin người dùng gồm tên và ảnh đại diện.

- Hiển thị các users và trạng thái Online Offline nếu user đó có ở trong app hay
không.

- Thoát ứng dụng trong Menu.

- Thông tin người dùng trong Menu.

- Trong thông tin người dùng có chức năng update thông tin người dùng gồm tên
hoặc ảnh đại diện.

- Sau khi update thông tin người dùng thì các users khác sẽ thấy tên hoặc ảnh đại
diện được update trên máy họ.

- Chat giữa 2 users.

6
 TRÌNH BÀY CHI TIẾT ỨNG DỤNG

Đầu tiên khi khởi động app em có sử dụng splash screen và để thời gian 3s,
gồm có logo ở giữa màn hình (em tìm thấy trên mạng khá phù hợp với tên và nội
dung của app), em để thông tin ở dưới cùng màn hình.

Hình 2: Splash screen

7
 Em chọn mà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 của từng nước.

Hình 3: Country code picker

Nếu để trống phần số điện thoại và nhấn button gửi mã OTP thì sẽ hiển thị
thông báo như trong hình.

Hình 4: Để trống SĐT

8
 Nếu điền thiếu/thừa số thì sẽ hiển thị thông báo như trong hình.

Hình 5: Điền thiếu/thừa số

Sau khi điền đúng SĐT thì sẽ chuyển sang 1 trang web của firebase để xác
nhận không phải là robot rồi sẽ tiến hành gửi mã OTP.

Hình 6: Xác nhận

9
 Sau khi xác nhận xong sẽ quay lại app và chuyển qua activity xác thực OTP
và hiển thị thông báo như trong hình. Nếu không nhận được mã OTP hoặc muốn
đổi SĐT nhận OTP thì user có thể click vào text “Không nhận được mã OTP? Đổi
số điện thoại khác” để back về activity main.

Hình 7: Mã OTP đã gửi

Nếu không điền mã OTP và nhấn button xác nhận OTP thì sẽ hiển thị thông
báo như trong hình.

Hình 8: Không điền OTP

10
 Nếu điền thiếu/thừa số mã OTP hoặc điền sai mã OTP thì sẽ hiển thị thông
báo như trong 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 của em trên máy iOS để nhận mã OTP.

Hình 10: Mã OTP gửi về SĐT

11
 Sau khi điền mã OTP và nhấn button xác nhận OTP thì intent sang activity
set profile và hiển thị thông báo như trong hình.

Hình 11: Đăng ký thành công

Nếu không điền tên và nhấn button lưu thông tin thì sẽ hiển thị thông báo
như trong 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 thì sẽ hiển thị thông báo như
trong hình.

Hình 13: Không chọn ảnh đại diện

Sau khi chọn ảnh đại diện và điền tên, phần mềm sẽ hiển thị thông báo tạo
hồ sơ thành công, thông tin user được lưu lên Cloud Firestore và Database. Sau khi
ảnh được tải lên Storage thì phần mềm sẽ hiển thị thông báo ảnh đã được tải lên
thành công và intent sang activity chat. Trong giao diện này sẽ có cá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ó 2 chức năng là hiển thị thông tin user và nút thoát khỏi
ứng dụng.

Hình 17: Menu

15
 Bấm vào thông tin sẽ hiển thị thông tin user, ảnh đại diện và nút back. Nếu
muốn update thông tin có thể 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, thì cả hai máy đều hiển thị trạng
thái Online màu xanh lá cây.

Hình 19: Online khi cả hai máy cùng vào app

16
 Nhấn Menu chọn thông tin, nhấn vào text cập nhật thông tin rồi tiến hành
thay đổi tên và ảnh đại diện của user bên trái. Nhấn button back nếu không muốn
nữa.

Hình 20: Cập nhật thông tin

Sau khi nhấn button cập nhật, ứng dụng sẽ 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 ở trong menu sẽ được cập nhật và đồng
thời ở user bên phải sẽ hiển thị tên và ảnh đại diện mới của user bên trái. Thông tin
mới sẽ được lưu đè lên Cloud Firestore, Database và Storage của Firebase.

17
 Hình 21: Cập nhật thông tin thành công

Nếu user bên trái thoát ra khỏi app thì user bên phải sẽ hiển thị trạng thái của
user Pham Tuan Nam chuyển sang offline.

Hình 22: Chuyển trạng thái của một user thoát app

Khi nhấn vào user muốn chat thì sẽ intent sang activity chat cụ thể. Nếu nhấn
button gửi tin mà chưa điền tin nhắn thì sẽ hiển thị thông báo như trong hình.

18
 Hình 23: Tiến hành vào chat giữa hai users

Test chức năng nhắn tin từ user 1 sang user 2.

Hình 24: Test 1

Test chức năng nhắn tin từ user 2 sang user 1.

19
 Hình 25: Test 2

Các tin nhắn sẽ được lưu trực tiếp lên Realtime Database của Firebase nên
khi thoát app ra vào lại thì các tin nhắn vẫn sẽ được lưu trữ khi vào lại cuộc hội
thoại.

Hình 26: Test 3

20
Thông tin Firebase của ứng dụng TUNA Messenger.

Hình 27: Firebase

Thông tin user của em.

Hình 28: User

21
 Hình 29: Cloud Firestore

Hình 30: Realtime Database

22
Hình 31: Tin nhắn được lưu trữ tại đây

Hình 32: Storage

23
 Hình 33: Ảnh đại diện của các users được lưu tại đây

Hình 34: Thông tin chi tiết ảnh đại diện user Pham Tuan Nam

24