Chương 1 TỔNG QUAN VỀ ĐỀ TÀI
2.2. Phân tích thiết kế hệ thống
2.2.4. Thiết kế kiến trúc hệ thống
2.2.4.1. Kiến trúc tổng thể
Hình 2.22: Kiến trúc hệ thống tổng thể
- Google Maps Platform: Được sử dụng để hiển thị bản đồ, và các thao tác
trên bản đồ của ứng dụng.
- Algolia: Dùng để mở rộng khả năng tìm kiếm cho ứng dụng như full text
search, tìm kiếm dựa trên vị trí, …
- Facebook Server: Hỗ trợ đăng nhập bằng Facebook cho ứng dụng.
- Firestore: Là database để lưu trữ dữ liệu cho ứng dụng.
50 thực.
- Firebase Authentication: Dùng để xác thực người dùng trong ứng dụng.
Thông qua số điện thoại hoặc Facebook Provider để cung cấp chức năng login trong ứng dụng.
- Firebase Storage: Để lưu trữ file được người dùng tải lên. Chủ yếu là các
file hình ảnh.
2.2.4.2. Kiến trúc ứng dụng
Hình 2.23: Kiến trúc ứng dụng di động - View: Hiển thị giao diện cho người dùng. - View: Hiển thị giao diện cho người dùng.
- Hook: Chứa dữ liệu cho View và thực hiện các thao tác kiểm tra, cập nhật
dữ liệu cho View.
- Action: Gửi một hành động để yêu cầu thực thi một nhiệm vụ như lấy dữ
liệu, xóa dữ liệu.
- Store: Là nơi chứa dữ liệu tạm thời, cục bộ của ứng dụng. Các dữ liệu được
51 cầu.
o Saga: Lắng nghe những hành động được gửi tới và thực hiện hành
động.
o Reducer: Có vai trị như một phễu lọc để cập nhật trạng dữ liệu trong
State.
o State: Để chứa dữ liệu.
- Service: Có nhiệm vụ thực hiện các request để gọi các API Service hoặc
thao tác với database.
- Database: Chứa dữ liệu của hệ thống ứng dụng.
- API Service: Là những API được cung cấp thêm bởi những bên thứ 3 như
Facebook, Google Maps Platform.
2.2.5. Thiết kế giao diện
2.2.5.1. Danh sách màn hình
STT Tên màn hình Mơ tả chức năng
1 Đăng nhập Cho phép người dùng đăng nhập vào hệ thống
2 Đăng nhập bằng số điện thoại
Hiển thị yêu cầu nhập số điện thoại
3 Xác nhận mã xác thực
Cho phép người dùng nhập mã xác thực được gửi về số điện thoại trong trường hợp đăng nhập bằng số điện thoại
52 nhân
5 Tìm trọ Hiển thị danh sách trọ và cho phép người dùng tìm kiếm trọ
6 Chi tiết trọ Hiển thị thông tin chi tiết nhà trọ cho người dùng
7 Tạo trọ Cho phép người dùng tạo mới một trọ
8 Cập nhật hoặc xóa trọ Cho phép người dùng cập nhật hoặc xóa trọ đã tạo
9 Hiển thị trọ lên bản đồ
Hiển thị danh sách trọ lên bản đồ và cho phép người dùng tìm kiếm dựa trên địa chỉ và bán kính tìm kiếm
10 Danh sách trọ đã đăng Hiển thị danh sách trọ mà người dùng đã tạo
11 Tìm dịch vụ vận chuyển Cho phép người dùng tìm kiếm dịch vụ vận chuyển
12 Chi tiết dịch vụ vận chuyển Hiển thị thông tin chi tiết dịch vụ vận chuyển
13 Danh sách dịch vụ vận chuyển đã đăng
Hiển thị danh sách dịch vụ vận chuyển mà người dùng đã tạo
14 Tạo dịch vụ vận chuyển Cho phép người dùng thêm mới một dịch vụ vận chuyển
53
vận chuyển dịch vụ vận chuyển
16 Tìm người ở ghép Cho phép người dùng tìm người ở ghép thơng qua các bài đăng
17 Tạo bài đăng tìm người ở ghép
Cho phép người dùng tạo bài đăng để tìm người ở ghép
18 Chỉnh sửa hoặc xóa bài đăng tìm người ở ghép
Cho phép người dùng chỉnh sửa hoặc xóa bài đăng tìm người ở ghép
19 Danh sách bài đã đăng tìm người ở ghép
Hiển thị danh sách bài đăng tìm người ở ghép mà người dùng đã đăng
20 Tìm đồ dùng cũ Hiển thị danh sách bài đăng bán đồ dùng cũ, để người dùng có thể liên hệ để mua
21 Tạo bài đăng bán đồ dùng cũ
Cho phép người dùng tạo bài đăng bán đồ dùng cũ
22 Chỉnh sửa hoặc xóa bài đăng bán đồ dùng cũ
Cho phép người dùng chỉnh sửa hoặc xóa bài đăng bán đồ dùng cũ của mình
23 Danh sách bài đã đăng bán đồ dùng cũ
Hiển thị danh sách bài đã đăng bán đồ dùng cũ của người dùng
24 Chat Hiển thị danh sách những người đang chat
25 Chi tiết Chat Cho phép người dùng chat với người dùng khác
26 Thông tin cá nhân Cho phép người dùng xem thông tin cá nhân
54
27 Chỉnh sửa thông tin cá nhân Cho phép người dùng chỉnh sửa thơng tin cá nhân của mình
Bảng 2.19: Danh sách các màn hình của ứng dụng
2.2.5.2. Giao diện một số màn hình của ứng dụng
Hình 2.24: Màn hình đăng nhập Hình 2.25: Màn hình đăng nhập bằng số điện thoại số điện thoại
Hình 2.26: Màn hình nhập mã xác thực Hình 2.27: Màn hình nhập thơng tin cá nhân nhân
55
Hình 2.28: Màn hình tìm trọ cỡ lớn Hình 2.29: Màn hình tìm trọ cỡ nhỏ
Hình 2.30: Màn hình tìm trọ trên bản đồ
56
Hình 2.32: Màn hình trọ đã đăng Hình 2.33: Màn hình cập nhật trọ
Hình 2.34: Màn hình chi tiết trọ Hình 2.35: Màn hình tạo dịch vụ vận chuyển
57 Hình 2.36: Màn hình dịch vụ vận chuyển đã đăng Hình 2.37: Màn hình chi tiết dịch vụ vận chuyển Hình 2.38: Màn hình cập nhật thơng tin dịch vụ vận chuyển Hình 2.39: Màn hình đăng bài tìm người ở ghép
58
Hình 2.40: Màn hình tìm người ở ghép Hình 2.41: Màn hình bài đã đăng tìm người ở ghép người ở ghép
Hình 2.42: Màn hình thơng tin cá nhân Hình 2.43: Màn hình cập nhật thơng tin cá nhân cá nhân
59
Hình 2.44: Màn hình chat Hình 2.45: Màn hình chi tiết chat
Hình 2.46: Màn hình tạo bài đăng bán
60 Hình 2.48: Màn hình cập nhật bài đăng
bán đồ dùng cũ Hình 2.49: Đánh giá dịch vụ
61
2.3. Triển khai hệ thống 2.3.1. Firebase 2.3.1. Firebase
Ứng dụng sử dụng Firebase để lưu trữ hầu hết các dữ liệu. Plan free của Firebase có những lợi ích sau:
- Cho phép chứng thực 10.000 lần mỗi tháng.
- Firestore cho phép lưu trữ 1GB miễn phí, cùng với việc cho 50000 lượt đọc, 20000 lượt viết và 20000 lượt xóa tài liệu miễn phí mỗi ngày.
- Cloud Storage hỗ trợ lưu trữ 5GB để lưu trữ các hình ảnh, các file dữ liệu trong ứng dụng.
Những lợi ích của Plan free giúp giảm thiểu chi phí triển khai của ứng dụng. Đồng thời cho phép triển khai ứng dụng nhanh chóng hơn.
62
Hình 2.52: Hình ảnh lưu trữ dữ liệu với Firestore Database
2.3.2. Algolia
Algolia hỗ trợ lưu trữ cho các chức năng yêu cầu hỗ trợ Full Search Text hoặc lọc dữ liệu năng cao mà Firebase khơng đáp ứng được. Algolia miễn phí 10000 request mỗi tháng.
Hình 2.53: Hình ảnh sử dụng Algolia để lưu trữ các thông tin trọ
2.3.3. Ứng dụng di động
63
Chương 3. KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 3.1. Kết quả đạt được
Về phía ứng dụng, đề tài đã hoàn thành các chức năng được yêu cầu của ứng dụng. Ứng dụng đã hoạt động tốt và hỗ trợ cho người dùng nhiều vấn đề trong việc ở trọ như sau:
- Cho phép người dùng tìm trọ phù hợp, chủ trọ có thể đăng trọ của mình lên ứng dụng.
- Cho phép người dùng tìm dịch vụ vận chuyển cho mỗi lần chuyển trọ, chủ dịch vụ vận chuyển cũng có thể đăng dịch vụ vận chuyển của mình.
- Cho phép người dùng tìm người ở ghép một cách phù hợp với nghề nghiệp, độ tuổi.
- Cho phép người dùng trao đổi để mua bán những đồ dùng cũ. - Cho phép người dùng đánh giá trọ và dịch vụ vận chuyển.
- Cho phép người dùng bình luận để trao đổi thêm cho bài đăng tìm người ở ghép hay bài đăng bán đồ dùng cũ.
Bên cạnh đó, thơng qua việc xây dựng và phát triển ứng dụng tác giả đã vận dụng những kiến thức được học vào trong đề tài. Ngoài ra, tác giả cịn học được thêm những cơng nghệ, kỹ thuật mới:
- Tìm hiểu được React Native, một cross platform cho việc xây dựng ứng dụng di động.
- Tìm hiểu được Firebase, một platform hỗ trợ cho việc xây dựng ứng dụng nhanh hơn. Trong các dịch vụ của Firebase, tác giả đã tìm hiểu và sử dụng Firestore, Cloud Storage, Firebase Authentication và Realtime Database.
- Tìm hiểu được Algolia, một cloud service chun hỗ trợ cho việc tìm kiếm thơng tin. Algolia hỗ trợ những giải pháp tìm kiếm hữu ích như full text search, Geo Search, hỗ trợ autocomplete khi tìm kiếm, hỗ trợ các filter và nhiều giải pháp
64 tìm kiếm khác.
- Tìm hiểu được thư viện react-native-firebase để sử dụng các dịch vụ của firebase trên ứng dụng.
3.2. Thuận lợi và khó khăn Thuận lợi: Thuận lợi:
- Các công nghệ hiện đại dễ tiếp cận. Một số công nghệ tương tự với công nghệ đã làm nên dễ dàng tiếp cận hơn.
- Có sự giúp đỡ tận tình của giáo viên hướng dẫn. Giáo viên hướng dẫn đã định hướng và giải đáp các thắc mắc trong quá trình thực hiện đề tài.
- Các nhóm cùng thực hiện đề tài thường xuyên trao đổi, giúp đỡ lẫn nhau.
Khó khăn:
- Đề tài được thực hiện một mình nên khơng có ai trao đổi đối với một số vấn đề cụ thể của đề tài.
- Công nghệ chưa đáp ứng được một số yêu cầu trong ứng dụng nên phải bổ sung thêm các giải pháp khác.
3.3. Hướng phát triển
Đề tài có thể mở rộng và cải thiện các vấn đề như sau: - Cải thiện UX/UI cho người dùng.
- Hỗ trợ đánh dấu nhà trọ, dịch vụ vận chuyển hoặc các bài đăng đề giúp người dùng có thể dễ dàng tìm lại.
- Xây dựng trang admin giúp quản lý toàn bộ ứng dụng.
- Hỗ trợ cho hệ điều hành iOS, mặc dù ứng dụng sử dụng công nghệ cross platform nhưng do một số yêu cầu kỹ thuật nên chưa triển khai được trên iOS.
- Sau khi hồn thiện, có thể đưa ứng dụng lên Play Store để người dùng có thể tải xuống và sử dụng.
65
TÀI LIỆU THAM KHẢO Tài liệu tiếng Anh:
[1] W. Saman, “ReactNative best practices With best folder structure”, 10 Dec 2020. [online]. Available: https://samanw.medium.com/reactnative-best-practices- with-best-folder-structure-6d2716d3d9cb [Accessed 27 Mar 2021].
[2] T. Ken, “Firebase Firestore Text Search and Pagination”, 26 Feb 2019. [online]. Available: https://medium.com/@ken11zer01/firebase-firestore-text-search-and- pagination-91a0df8131ef [Accessed 23 Apr 2021].
[3] B. Ross, “React Native Lists: Load More by Scrolling”, 14 Aug 2020. [online]. Available: https://rossbulat.medium.com/react-native-lists-load-more-by-scrolling- 378a1c5f56a6 [Accessed 24 Apr 2021].
[4] S. Nicholas, “Setup Facebook Login using Firebase”, 28 May 2020. [online]. Available: https://medium.com/@nicholasstano/setup-facebook-login-using- firebase-84ced79e7f5e [Accessed 28 Apr 2021].
[5] R. Umang, “Facebook login in React Native apps”, 30 Aug 2019. [online]. Available: https://medium.com/enappd/facebook-login-in-react-native-apps- 6ff5995e1932 [Accessed 28 Apr 2021].
[6] K. Vadim, “Building in-app notification system in React Native” 2 Sep 2019. [online]. Available: https://medium.com/@vadimkorr/building-in-app-notification- system-in-react-native-96efd478ef31 [Accessed 25 May 2021].
[7] Facebook, “Core Components and Native Components”. [online]. Available: https://reactnative.dev/docs/intro-react-native-components
[8] Google, “Add Firebase to your JavaScript project”, Available: https://firebase.google.com/docs/web/setup [Accessed 2 Apr 2021]. [9] Google, “Paginate data with query cursors”, Available:
https://firebase.google.com/docs/firestore/query-data/query-cursors [Accessed 2 Apr 2021].
[10] Jscrambler Blog, “Build a Chat App with Firebase and React Native”, 24 Apr 2019. [online]. Available: https://blog.jscrambler.com/build-a-chat-app-with-
66 firebase-and-react-native [Accessed 2 Apr 2021].
Tài liệu tiếng Việt:
[1] N.M. Quan, “Làm việc với Firebase Realtime Database”, 10/20/2016. [Trực tuyến]. Địa chỉ: https://viblo.asia/p/lam-viec-voi-firebase-realtime-database- ZjlvalVXkqJ [Truy cập 23/04/2021].
[2] Tapchicongthuong, “Nghiên cứu hành vi thuê nhà trọ của sinh viên Trường Đại học Công nghiệp Hà Nội”, 13/08/2020. [Trực tuyến]. Địa chỉ:
https://tapchicongthuong.vn/bai-viet/nghien-cuu-hanh-vi-thue-nha-tro-cua-sinh- vien-truong-dai-hoc-cong-nghiep-ha-noi-73954.htm [Truy cập 13/03/2021]. [3] HueDiemDue, “Sử dụng svg và animation render view trong react native”, 10/05/2019. [Trực tuyến]. Địa chỉ: https://viblo.asia/p/su-dung-svg-va-animation- render-view-trong-react-native-Az45bGrgKxY [Truy cập 01/04/2021].
[4] L.T.T. Vinh và N.T. Phong, “Điều tra nhu cầu và khả năng tìm kiếm phịng trọ của sinh viên trường Đại học Vinh”. [Ngoại tuyến].
[5] Cơng đồn, “TP.HCM: Phần lớn công nhân phải thuê nhà trọ giá rẻ”,
23/04/2018. [Trực tuyến]. Địa chỉ: https://nld.com.vn/cong-doan/tphcm-phan-lon- cong-nhan-phai-thue-nha-tro-gia-re-20180423073842761.htm [Truy cập