Bảng dữ liệu Item: Lưu thông tin các đồ dùng cũ được bán trong bài đăng bán đồ
dùng cũ
STT Thuộc tính Kiểu dữ liệu Ràng buộc Ý nghĩa
1 Id UUID Khóa chính Khóa chính để phân
biệt các đồ dùng cũ.
2 Description String Mô tả cho đồ dùng cũ
3 Price Number Giá của đồ dùng cũ
4 HousewareId UUID Khóa ngoại Khóa ngoại liên kết đến bảng Houseware
41
để biết đồ dùng này thuộc bài đăng nào Bảng 2.15: Danh sách các thuộc tính bảng Item
Bảng dữ liệu Review: Lưu thông tin các bài đánh giá trọ hoặc dịch vụ vận chuyển.
STT Thuộc tính Kiểu dữ liệu Ràng buộc Ý nghĩa
1 Id UUID Khóa chính
Khóa chính phân biệt giữa các Review khác nhau
2 PostId UUID Khóa ngoại Liên kết tới bài post
3 Text String Nội dung bài review
4 Star Number Số sao được đánh giá
5 SendAt Datetime Cho biết thời gian viết
đánh giá
6 SendBy UUID Khóa ngoại
Liên kết đến bảng User để biết ai là người viết đánh giá
7 Type String Loại bài post
Bảng 2.16: Danh sách các thuộc tính bảng Review
Bảng dữ liệu Comment: Lưu thơng tin bình luận cho bài đăng tìm người ở ghép và
bài đăng bán đồ cũ.
STT Thuộc tính Kiểu dữ liệu Ràng buộc Ý nghĩa
1 Id UUID Khóa chính
Khóa chính phân biệt giữa các bình luận khác nhau
42
3 Text String Nội dung bình luận
4 SendAt Datetime Cho biết thời gian viết
bình luận
5 SendBy UUID Khóa ngoại
Liên kết đến bảng User để biết ai là người viết bình luận
6 Type String Loại bài post
Bảng 2.17: Danh sách các thông tin thuộc tính bảng Comment
Bảng dữ liệu Report: Lưu thơng tin báo cáo vi phạm.
STT Thuộc tính Kiểu dữ liệu Ràng buộc Ý nghĩa
1 Id UUID Khóa chính
Khóa chính phân biệt giữa các báo cáo khác nhau
2 PostId UUID Khóa ngoại Liên kết tới bài post
3 Reason Object Lý do báo cáo
4 SendAt Datetime Cho biết thời gian viết
bình luận
5 SendBy UUID Khóa ngoại
Liên kết đến bảng User để biết ai là người viết bình luận
6 Type String Loại bài post
43
2.2.3. Công nghệ sử dụng 2.2.3.1. React Native 2.2.3.1. React Native
Hình 2.16: Logo React native7
Giới thiệu:
React Native là một Framework do Facebook phát hành. Nó cho phép xây dựng ứng dụng đa nền tảng cho cả 2 nền tảng di động phổ biến nhất hiện nay là Android và IOS.
Được Facebook giới thiệu vào năm 2015, với việc sử dụng ngôn ngữ JavaScript và cách chỉnh sửa giao diện tương tự CSS, những nhà phát triển Web rất dễ dàng tiếp cận với React Native. Ngoài ra, với một cộng đồng đông đảo và nhiều thư viện hỗ trợ, những nhà phát triển mới có thể dễ dàng tìm hiểu về cơng nghệ này. Đến nay, React Native là một trong những Framework phổ biến nhất để phát triển ứng dụng di động đa nền tảng.
Sử dụng trong đề tài:
Ứng dụng được xây dựng từ React Native.
44
2.2.3.2. Firebase
Hình 2.17: Logo Firebase8
Giới thiệu:
Firebase là một nền tảng do Google phát triển để giúp phát triển nhanh chóng các ứng dụng chất có lượng cao. Từ việc định danh người dùng đến lưu trữ file và cung cấp dịch vụ cloud database, Firebase đáp ứng hầu hết các yêu cầu cần thiết có trong một ứng dụng. Trong nền tảng firebase, có nhiều dịch vụ nổi tiếng có thể kể đến như: Cloud Firestore, Storage, Cloud Functions, Realtime Database, Firebase Authentication, … Các dịch vụ được Firebase cung cấp thường được miễn phí trong một giới hạn sử dụng nhất định. Giới hạn này khá lớn nên các ứng dụng tầm vừa và nhỏ có thể giảm rất nhiều chi phí triển khai.
Trong đề tài cũng có sử dụng những dịch vụ mà Firebase cung cấp nhằm giảm chi phí và đơn giản hóa q trình phát triển.
a. Cloud Firestore
“Cloud Firestore là một cơ sở dữ liệu linh hoạt, có thể mở rộng để phát triển thiết bị di động, web và máy chủ từ Firebase và Google Cloud.”9 Đây là một NoSQL giúp chúng ta dễ dàng lưu trữ dữ liệu cho ứng dụng của mình. Với tính năng Offline Support nó cho phép chúng ta sử dụng ứng dụng ngay cả khi offline, những dữ liệu được thêm mới hoặc chỉnh sửa sẽ được cập nhật ngay khi chúng ta online trở lại. Bên cạnh đó, nó hỗ trợ truy vấn dữ liệu đa dạng và nhanh chóng.
Cloud Firestore lưu trữ dữ liệu thành các collection, các collection này tương tự như bảng ở trong SQL. Mỗi collection sẽ chứa nhiều document, mà mỗi document là một bản ghi của dữ liệu. Trong mỗi document, data sẽ được lưu dưới dạng key –
8Nguồn: https://firebase.google.com/
45
value. Firebase hỗ trợ nhiều kiểu dữ liệu cho value như string, number, array, geo hay một object dữ liệu khác.
Hình 2.18: Hình ảnh cách lưu trữ dữ liệu trên Cloud Firestore10Cloud Firestore là database lưu trữ hầu hết các dữ liệu của đề tài. Cloud Firestore là database lưu trữ hầu hết các dữ liệu của đề tài. b. Firebase Authentication
Hình 2.19: Hình ảnh các cách xác thực bằng Firebase Authentication11
Firebase Authentication giúp ứng dụng xác thực người dùng dễ dàng hơn bằng những bên cung cấp trình xác thực như Google, Facebook, Gmail hay cả số điện thoại. Ngồi ra, nhà phát triển cịn có thể tự tạo ra cách xác thực cho ứng dụng thông qua Firebase Authentication. Điều này, giúp nhà phát triển có thể cài đặt các hình
10 Nguồn: https://firebase.google.com/docs/firestore
46
thức đăng nhập cho ứng dụng một cách dễ dàng và nhanh chóng.
Đề tài sử dụng hai phương pháp xác thực mà firebase cung cấp là xác thực bằng Facebook và xác thực bằng số điện thoại.
c. Firebase Storage
Firebase Storage cho phép lưu trữ file được đăng tải bởi người dùng trong ứng dụng. Đây là nơi lưu trữ lý tưởng cho những ứng dụng có lưu trữ file hình ảnh, word, pdf, … từ phía người dùng.
Hình ảnh trọ, dịch vụ vận chuyển hay những hình ảnh khác trong ứng dụng được lưu trữ tại Firebase Storage.
d. Realtime Database
“Lưu trữ và đồng bộ dữ liệu với cơ sở dữ liệu đám mây NoSQL của chúng tôi. Dữ liệu được đồng bộ hóa trên tất cả các ứng dụng khách trong thời gian thực và vẫn có sẵn khi ứng dụng của bạn ngoại tuyến.”12 Dữ liệu trong Realtime
Database được lưu trữ dưới dạng JSON, một khi có bất kỳ thay đổi nào ở một người dùng, thì những người dùng cịn lại cũng nhận được thơng tin thay đổi. Tính năng này có thể dùng cho những ứng dụng chat, hoặc những ứng dụng yêu cầu cập nhật thông tin liên tục theo thời gian thực.
Tận dụng tính năng thời gian thực, đề tài đã áp dụng để lưu một số thông tin về tin nhắn, hoặc trạng thái của người dùng online hay offline.
2.2.3.3. Google Maps Platform
Hình 2.20: Hình ảnh Google Maps Platform13
Giới thiệu:
Google Maps Platform được phát triển bởi Google. Đây là platform chuyên cung
12 Nguồn: https://firebase.google.com/docs/database
47
cấp những API về bản đồ. Một số API được cung cấp như:
- Maps: Cho phép hiển thị bản đồ và các thao tác với bản đồ như chọn một điểm, xoay bản đồ, hay phóng to thu nhỏ bản đồ.
- Routes: Chỉ đường đi từ điểm A tới điểm B hoặc cho phép tính khoảng cách đường đi giữa 2 điểm.
- Places: Cho phép nhà phát triển tìm kiếm và sử dụng thơng tin của hơn 100 triệu nơi khác nhau trên thế giới. Nhà phát triển cũng có thể tìm kiếm vị trí của một điểm có trong map.
Sử dụng trong đề tài:
Đề tài sử dụng một số API của Google Maps Platform để hiển thị bản đồ bên trong ứng dụng và người dùng có thể tìm trọ dựa trên một vị trí cụ thể.
2.2.3.4. Algolia
Hình 2.21: Logo dịch vụ algolia14
Giới thiệu:
Algolia là một dịch vụ web chuyên cho việc tìm kiếm. Algolia giúp cho việc tìm kiếm trở nên linh hoạt và đơn giản hơn bằng những API, và thư viện được ban hành. Algolia có thể tìm full-search text bằng những từ khóa được cung cấp. Bên cạnh đó, nó cịn hỗ trợ lọc kết quả trên các trường tìm kiếm. Một điểm nổi bật khác, Algolia hỗ trợ tìm kiếm kết quả dựa trên vị trí được cung cấp, nó giúp cho những ứng dụng có thao tác với bản đồ dễ dàng tìm kiếm những kết quả mong muốn.
Sử dụng trong đề tài:
Các yêu cầu tìm kiếm nâng cao như tìm trọ dựa trên vị trí hay full search text thì firebase khơng đáp ứng được. Do đó, Algolia được sử dụng để giúp thực hiện các
48 truy vấn nâng cao dễ dàng hơn.
2.2.3.5. Thư viện React Native Firebase Giới thiệu: Giới thiệu:
React Native Firebase là một thư viện hỗ trợ các thao tác với Firebase cho React Native. Thư viện này giúp cho việc kết nối, truy vấn đến firebase trở nên dễ dàng hơn.
Sử dụng trong đề tài:
Đề tài sử dụng React Native Firebase để kết nối tới Firebase và thao tác với những dịch vụ được Firebase cung cấp.
2.2.3.6. Thư viện React Redux Giới thiệu: Giới thiệu:
React Redux là một thư viện quản lý trạng thái cho ứng dụng xây dựng bằng ReactJS hoặc React Native. Thư viện này giúp các thành phần trong ứng dụng giao tiếp dữ liệu dễ dàng hơn. Ngoài ra, với việc sử dụng React Redux, luồng dữ liệu của ứng dụng trở nên tường minh hơn.
Sử dụng trong đề tài:
49
2.2.4. Thiết kế kiến trúc hệ thống 2.2.4.1. Kiến trúc tổng thể 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,