Chương 2 PHÂN TÍCH THIẾT KẾ VÀ XÂY DỰNG ỨNG DỤNG
2.2.3.Thiết kế kiến trúc hệ thống
2.2. Phân tích thiết kế hệ thống
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
Ả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 (adsbygoogle = window.adsbygoogle || []).push({});
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 (adsbygoogle = window.adsbygoogle || []).push({});
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 (adsbygoogle = window.adsbygoogle || []).push({});
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 (adsbygoogle = window.adsbygoogle || []).push({});
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 toá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 toá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. (adsbygoogle = window.adsbygoogle || []).push({});
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ý. (adsbygoogle = window.adsbygoogle || []).push({});
- 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 đoà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 toà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 đoà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
và được hàng triệu người sử dụng.
88 (adsbygoogle = window.adsbygoogle || []).push({});
- MongoDB là một database hướng tài liệu (document), các dữ liệu được lưu trữ
trong document kiểu JSON thay vì dạng bảng như CSDL quan hệ nên truy vấn sẽ rất nhanh.
- Với CSDL quan hệ chúng ta có khái niệm bảng, các cơ sở dữ liệu quan hệ (như
MySQL hay SQL Server...) sử dụng các bảng để lưu dữ liệu thì với MongoDB chúng ta sẽ dùng khái niệm là collection thay vì bảng
- So với RDBMS thì trong MongoDB collection ứng với table, còn document sẽ
ứng với row, MongoDB sẽ dùng các document thay cho row trong RDBMS.
- Các collection trong MongoDB được cấu trúc rất linh hoạt, cho phép các dữ liệu
lưu trữ không cần tuân theo một cấu trúc nhất định.
- Thông tin liên quan được lưu trữ cùng nhau để truy cập truy vấn nhanh thông
qua ngôn ngữ truy vấn MongoDB Tính chất của Mongo DB: