Bảng dữ liệu user: Thông tin người dùng
STT Tên thuộc tính Kiểu dữ liệu Ràng buộc Ý nghĩa
1 _id ObjectId Khóa chính Id của đối tượng
2 oid String Là duy nhất, tham
chiếu với khóa chính Dạng text của _id
3 first_name string Bắt buộc Họ
4 last_name String Bắt buộc Tên lót và tên
5 date_of_birth DateTime Bắt buộc Ngày sinh
6 email String
Là duy nhất, tham chiếu với
account.email
7 phone_number String Bắt buộc, là duy nhất Số điện thoại
8 address Object Địa chỉ
9 avatar Object Ảnh đại diện
10 avatar_hash String Url hình ảnh
11 call_id string Id video call
12 refresh_token String Refresh token
gần nhất
63
khoản
14 created_date DateTime Bắt buộc Ngày tạo
15 modified_date DateTime Bắt buộc Ngày chỉnh sửa
16 additional_infos Dictionary Thông tin thêm
17 post_saved List<string> Danh sách bài
viết đã lưu
18 jwt_tokens List<string> Danh sách token
đang hoạt động Bảng 2.41: Danh sách thuộc tính bảng user
2.2.3. Thiết kế kiến trúc hệ thống 2.2.3.1. Kiến trúc tổng thể hệ thống 2.2.3.1. Kiến trúc tổng thể hệ thống
Ảnh 2.16: Sơ đồ hệ thống Trong đó: Trong đó:
- CoStudy App: Ứng dụng di động đang phát triển. Cũng là sản phẩm của đề
64 - .NET Core Server: Server của hệ thống.
- .NET Admin: Trang quản lý người dùng.
- Firebase Cloud Messaging: Hệ thống gửi tin thời gian thực.
- Firebase Storage: Nơi lưu trữ dữ liệu trực tuyến của Firebase.
- Firebase Authentication: API Xác thực của Firebase.
- Google Maps API: Để xác định khoảng cách và vị trí người dùng.
- MongoDb: Database của hệ thống
- SMTP Mail Server: Mail server của hệ thống
2.2.3.2. Kiến trúc ứng dụng di động
Ảnh 2.17: Kiến trúc ứng dụng di động
2.2.4. Thiết kế giao diện
2.2.4.1. Danh sách màn hình
Màn hình cho ứng dụng di động
STT Tên màn hình Mơ tả chức năng
1 Đăng nhập – 1 Màn hình đăng nhập 1
65
3 Đăng kí – 1 Màn hình đăng kí 1
4 Đăng kí – 2 Màn hình đăng kí 2
5 Bài viết đã lưu Màn hình danh sách bài viết đã
lưu của người dùng
6 Lĩnh vực cá nhân Màn hình chứa thơng tin các lĩnh
vực cá nhân của người dùng
7 Bảng tin Màn hình chứa bảng tin của người
dùng
8 Bảng xếp hạng
Màn hình bảng xếp hạng điểm hoạt động theo lĩnh vực của người dùng
9 Báo cáo bài viết Màn hình báo cáo nội dung vi
phạm của người dùng
10 Cập nhật thơng tin
Màn hình cập nhật thơng tin của người dùng như thông tin cơ bản, thông tin lĩnh vực
11 Chi tiết bài viết
Màn hình chứa thơng tin chi tiết bài viết như thông tin bài viết, một số bình luận của bài viết…
12 Chi tiết bình luận
Chứa thơng tin chi tiết bình luận và thơng tin các phản hồi bình luận
13 Đăng bài viết Màn hình chứa các tác vụ cho hoạt
động đăng bài viết mới
66
nhân đang theo dõi
15 Gọi video Màn hình gọi video
16 Người theo dõi Màn hình danh sách người đang
theo dõi bản thân
17 Nhắn tin Giao diện nhắn tin giữa hai người
dùng với nhau
18 Thơng báo Màn hình hiển thị các cập nhật
những đối tượng liên quan
19 Thơng tin cá nhân Màn hình hiển thị thơng tin cá hân
20 Tìm kiếm bài viết – 1 Màn hình tìm kiếm bài viết 1
21 Tìm kiếm bài viết – 2 Màn hình tìm kiếm bài viết 2
22 Tìm kiếm bài viết – 3 Màn hình tìm kiếm bài viết 3
23 Tìm kiếm người dùng Màn hình tìm kiếm người dùng
24 Tìm kiếm người lân cận Màn hình tìm người lân cận dựa
theo khoảng cách
25 Xem thông tin Màn hình xem chi tiết thơng tin
Bảng 2.42 : Danh sách màn hình Màn hình cho quản trị viên Màn hình cho quản trị viên
STT Tên màn hình Mơ tả chức năng
26 Admin – backend API Màn hình truy vết lời gọi
API của người dùng
27 Admin – Chi tiết cấp độ Màn hình chi tiết cấp độ
xuất hiện trên UI di động được thể hiện ở đây
67
28 Admin – Chi tiết lĩnh vực Màn hình chi tiết lĩnh vực
xuất hiện lên UI di động được thể hiện ở đây
29 Admin – Chi tiết nhóm lĩnh vực Màn hình chứa thơng tin
nhóm lĩnh vực để thực hiện gom nhóm bài viết theo chủ đề liên quan, tăng trải nghiệm tìm kiếm
30 Admin – Chi tiết tài khoản Màn hình thơng tin chi tiết
tài khoản người dùng được quản lý bởi quản trị viên
31 Admin – Đăng nhập Màn hình đăng nhập vào
trang của quản trị viên
31 Admin – Danh mục cấp độ Màn hình danh sách cấp
độ sẵn có được quản lý bởi quản trị viên để người dùng có thể chọn cho bài viết của mình
32 Admin – Danh mục lĩnh vực Màn hình danh sách lĩnh
vực sẵn có được quản lý bởi quản trị viên để người dùng có thể chọn cho bài viết của mình
33 Admin – Danh sách bài viết Màn hình chứa danh sách
bài viết được quản lý bởi quản trị viên
68
34 Admin – Danh sách báo cáo Màn hình chứa danh sách
báo cáo vi phạm mà người dùng báo cáo sẽ được quản lý bởi quản trị viên
35 Admin – Danh sách bình luận Màn hình chứa danh sách
bình luận sẽ hiển thị và giám sát bởi quản trị viên ở đây
36 Admin – Danh sách người dùng Màn hình chứ danh sách
tài khoản
37 Admin – Danh sách nhóm lĩnh vực Quản lý nhóm lĩnh vực
38 Admin – Danh sách phản hồi Quản lý danh sách các câu
trả lời (phản hồi) của bình luận
39 Admin – Thêm lĩnh vực Thêm mới lĩnh vực được
thực hiện bởi quản trị viên
40 Admin – Thêm nhóm lĩnh vực Thêm mới nhóm lĩnh vực
Bảng 2.43 : Danh sách màn hình Admin
69
Ảnh 2.18: Màn hình “Đăng kí” – 1
Ảnh 2.19: Màn hình “Đăng kí “- 2
Ảnh 2.20: Màn hình “Đăng nhập”
70
Ảnh 2.22: Màn hình “Bài viết đã lưu”
Ảnh 2.23: Màn hình chi tiết bài viết
Ảnh 2.24: Màn hình “Bình luận”
Ảnh 2.25: Màn hình “Báo cáo bài viết”
71
Ảnh 2.26: Màn hình “Tạo bài đăng”
Ảnh 2.27: Màn hình “Thơng tin cá nhân” Ảnh 2.28: Màn hình “Chỉnh sửa thơng tin” Ảnh 2.29:Màn hình “Danh sách lĩnh vực cá nhân”
72
Ảnh 2.30: Màn hình “Đang theo dõi”
Ảnh 2.31: Màn hình “Người theo dõi”
Ảnh 2.32: Màn hình “Nhắn tin”
73 Ảnh 2.34: Màn hình “Thơng báo” Ảnh 2.35: Màn hình “Tìm kiếm bài viết” – 1 Ảnh 2.36: Màn hình “Tìm kiếm bài viết” - 2 Ảnh 2.37: Màn hình “Tìm kiếm người dùng”
74
75
Ảnh 2.40: Màn hình "Admin - Chi tiết nhóm lĩnh vực"
76
Ảnh 2.42: Màn hình "Admin - Danh mục cấp độ"
77
Ảnh 2.44: Màn hình "Admin - Danh sách bài viết"
78
Ảnh 2.46: Màn hình "Admin - Danh sách người dùng"
79
2.3. Kiến thức nền tảng và công nghệ sử dụng 2.3.1. Kiến thức nền tảng 2.3.1. Kiến thức nền tảng
2.3.1.1. Json Web Token
Json Web Token là cách thức phổ biến nhất để truyền tin an toàn giữa các thành viên trong hệ thống bằng cách sử dụng đối tượng Json. Đối tượng này được xác thức độ tin cậy bằng phần “chữ kí - signature” của nó. “Chữ kí ” này thường sử dụng thuật tốn RSA8 hoặc HMAC9 để mã hóa.
Ảnh 2.48: Kết cấu của Json Web Token10
Chu trình hoạt động của Json Web Token:
1. Người dùng (user) sử dụng trình duyệt đăng nhập vào một miền nào đó mà yêu cầu đăng nhập với tên đăng nhập và mật khẩu.
8 RSA là một thuật toán mật mã hóa khóa cơng khai. Đây là thuật tốn đầu tiên phù hợp với việc tạo ra chữ ký điện tử đồng thời với việc mã hóa. Nó đánh dấu một sự tiến bộ vượt bậc của lĩnh vực mật mã học trong việc sử dụng khóa cơng cộng. RSA đang được sử dụng phổ biến trong thương mại điện tử và
được cho là đảm bảo an toàn với điều kiện độ dài khóa đủ lớn. Xem thêm: RSA (mã hóa) – Wikipedia
tiếng Việt
9 Xem thêm Hàm băm mật mã học – Wikipedia tiếng Việt
80
2. Máy chủ sẽ nhận được yêu cầu của người dùng, đồng thời kiểm tra thông tin tên đăng nhập và mật khẩu.
3. Máy chủ sau khi kiểm tra thông tin người dùng, nếu đúng sẽ trả một JWT về cho người dùng, nếu không quay lại bước 1.
4. Người dùng sẽ sử dụng mã JWT để tiếp tục sử dụng cho các yêu cầu kế tiếp trên miền của máy chủ.
5. Máy chủ sẽ không cần phải kiểm tra lại thông tin người dùng mà chỉ cần kiểm tra đúng JWT đã được cấp từ đó tăng tốc độ sử dụng trên miền giảm thời gian truy vấn.
6. Máy chủ trả phản hồi phù hợp cho người dùng.
2.3.2. Công nghệ sử dụng 2.3.2.1. .NET Core11 2.3.2.1. .NET Core11 Định nghĩa:
.NET Core là một nền tảng phát triển đa mục đích, mã nguồn mở giúp xây dựng ứng dụng cho Windows, macOS, và Linux sử dụng đa ngơn ngữ lập trình. Cung cấp các framework và API cho điện toán đám mây, IoT, UI và machine learning.
C#, Visual Basic, F# có thể được dùng để viết ứng dụng và thư viện cho .NET Core.
Ảnh 2.49: Logo .NET Core
81
Phiên bản đầu tiên: .NET Core 1.0 phát hành vào 27/6/2016. Phiên bản hiện tại: .NET 5 phát hành vào 11/2020.
Đặc điểm:
- Đa nền tảng: có thể chạy trên Window, macOS và Linux.
- Mã nguồn mở: áp dụng giấy phép MIT và Apache 2. .NET Core là một dự án thuộc .NET Foundation.
- Hiện đại: .NET Core thực thi các mơ hình hiện đại như lập trình bất đồng bộ, các mẫu không sao chép (no-copy patterns) bằng cách sử dụng structs, và quản trị tài nguyên cho các container.
- Hiệu năng: hiệu năng cao với các tính năng như hardware intrinsics, biên dịch theo tầng (tiered complication) và Span<T>.
- Phù hợp giữa các môi trường: xử lý code là như nhau trên nhiều hệ điều hành và
kiến trúc, bao gồm x64, x86 và ARM.
- Công cụ CMD: bao gồm công cụ dịng lệnh (command-line) để sử dụng, có thể
được sử dụng để phát triển cục bộ và tích hợp liên tục.
- Triển khai linh hoạt: có thể sử dụng .NET Core trong ứng dụng hoặc cài đặt nó
cạnh nhau. Có thể được sử dụng với Docker containers.
2.3.2.2. Application Programming Interface (API)
API (hay Giao diện lập trình ứng dụng) là các phương thức, giao thức kết nối với các thư viện và ứng dụng khác. Nó là viết tắt của Application Programming
Interface – giao diện lập trình ứng dụng. API cung cấp khả năng cung cấp khả năng truy xuất đến một tập các hàm hay dùng. Và từ đó có thể trao đổi dữ liệu giữa các ứng dụng.
Restful API được hiểu là một tiêu chuẩn được sử dụng để thiết kế API cho các ứng dụng website. Nhằm để quản lý các resource web một cách dễ dàng hơn. Có thể nói Restful là một trong những kiểu thiết kế API được các lập trình viên sử dụng khá phổ biến.
82
Theo đó Rest quy định cách sử dụng http method như GET, POST, PUT,
DELETE… và cách định dạng URL cho các ứng dụng web. API cũng có thể liên quan đến khung phần mềm : Khung có thể dựa trên một số thư viện triển khai một số API. Nhưng không giống như việc sử dụng API thông thường, quyền truy cập vào hành vi được xây dựng trong khung trung gian bằng cách mở rộng nội dung của nó với các lớp mới cắm vào khung chính nó.
2.3.2.3. React Native Định nghĩa: Định nghĩa:
React Native là 1 framework được xây dựng như 1 hệ thống cấp bậc của các UI component được viết bằng ngôn ngữ JavaScript.
Các UI component này sẽ tương ứng với các View của 2 platform Android và iOS. Và 1 điều nữa là React Native được phát triển bởi Facebook.
Ảnh 2.50: Cấu trúc của ứng dụng React Native12
83
React Hooks13:
Hooks được giới thiệu trong phiên bản React 16.8. Nó cho phép chúng ta có thể sử dụng state (trạng thái) trong Functional Component và các tính năng khác của React mà không cần phải dùng đến Class.
Ngoài việc sử dụng state ngay trong Functional Component, React Hooks còn giúp chúng ta giảm đáng kể lượng code, khiến các component trở nên gọn nhẹ và dễ tiếp cận hơn so với Class Component.
Quy tắc khi dùng Hooks:
- Chỉ gọi Hooks trên cùng. Không gọi Hooks bên trong vòng lặp, điều kiện, hoặc các hàm lồng nhau.
- Chỉ gọi Hooks từ các Functional Component. Không gọi Hooks từ hàm JavaScript bình thường.
React Redux:
Redux là một thư viện javascript giúp tạo ra một lớp quản lý trạng thái cho ứng dụng. Redux được xây dựng dựa trên nền tảng của ngôn ngữ Elm và kiến trúc Flux do Facebook giới thiệu nên nó thường được kết hợp với React.
84
Ảnh 2.51: React Redux14
Redux có 3 thành phần chính:
- Action: có thể hiểu là các event để gửi dữ liệu từ ứng đụng đến Store của Redux.
- Reducer: là các Pure Function (hàm nguyên thủy) lấy state hiện tại của ứng
dụng, thực hiện một action và trả về một state mới.
- Store: lưu trữ state của ứng dụng và nó là duy nhất trong một ứng dụng Redux.
Nguyên lý hoạt động của Redux:
- Khi cần thay đổi state thì ứng dụng sẽ phát sinh ra một action mô tả trạng thái. Action sẽ thực hiện điều phối Reducer để xử lý.
- Sau đó, Reducer sẽ dựa vào mô tả của Action để biết cần thực hiện thay đổi
những gì và bắt đầu xử lý.
85
- Khi state được cập nhật vào Store thì ứng dụng sẽ nhận được thơng tin cập
nhập mới đó.
Ảnh 2.52: Nguyên lý hoạt động của Redux15
Sự cần thiết của React Native:
Với React Native Framework, bạn có thể render giao diện của cả 2 Android và iOS. Với React Native, chúng ta từ những lập trình viên Website có thể chuyển sang lập trình viên Di động rất dễ dàng.
86
Ảnh 2.53: React Native tương thích cả Android và IOS16
React Native phát triển tập trung vào giao diện để khiến người dùng cảm thấy mượt mà hơn. React Native đang được rất nhiều công ty công nghệ làm nền tảng phát triển ứng dụng của họ, điển hình là Facebook, Instagram, Tesla, …
Ảnh 2.54: React Native được chọn nhiều bởi các tập đồn cơng nghệ17
Nhờ có React Native mà khoảng cách giữa hai thị trường người dùng lớn, Android và iOS khơng cịn khoảng cách, vì React Native hỗ trợ cả hai.
16 Nguồn: https://www.solutionanalysts.com/
87
2.3.2.4. MongoDB Cơ sở dữ liệu phi quan hệ: Cơ sở dữ liệu phi quan hệ:
NoSQL là 1 dạng CSDL mã nguồn mở và được viết tắt bởi: None-Relational SQL hay có nơi thường gọi là Not-Only SQL.
- NoSQL được phát triển trên Javascript Framework với kiểu dữ liệu là JSON và
dạng dữ liệu theo kiểu key và value.
- NoSQL ra đời như là 1 mảnh vá cho những khuyết điểm và thiếu sót cũng như
hạn chế của mơ hình dữ liệu quan hệ RDBMS (Relational Database Management System - Hệ quản trị cơ sở dữ liệu quan hệ) về tốc độ, tính năng, khả năng mở rộng, ...
- Với NoSQL bạn có thể mở rộng dữ liệu mà không lo tới những việc như tạo khóa ngoại, khóa chính, kiểm tra ràng buộc, …
- NoSQL bỏ qua tính tồn vẹn của dữ liệu và transaction để đổi lấy hiệu suất nhanh và khả năng mở rộng.
- NoSQL được sử dụng ở rất nhiều cơng ty, tập đồn lớn, ví dụ như FaceBook sử
dụng Cassandra do FaceBook phát triển, Google phát triển và sử dụng BigTable, …
Mongo DB 18:
Ảnh 2.55: Logo Mongo DB
- MongoDB là một hệ quản trị cơ sở dữ liệu mã nguồn mở, là CSDL thuộc NoSql