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. Ngồ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