Lợi ích khi sử dụng ReactJs - Xây dựng hệ thống hỗ- 123docz.net

• Lợi ích đầu tiên mà ReactJS đó chính là việc tạo ra cho chính bản thân nó một dom ảo, đây là nơi mà các component được tồn tại trên đó.

• Lợi ích thứ hai mà ReactJS đem lại đó chính là việc viết các đoạn code JS sẽ trở nên dễ dàng hơn vì nó sử dụng một cú pháp đặc biệt đó chính là cú pháp JSX nghĩa là cú pháp này cho phép ta trộn được giữa code HTML và Javascript.

• Có nhiều công cụ phát triển là lợi ích tiếp theo của ReactJS

• Thân thiện với SEO

2.3. React Native

2.3.1. Giới thiệu về React Native

React Native là một framework do Facebook phát triển hướng đến tối ưu hóa hiệu năng Hybrid và tối giản số lượng ngôn ngữ Native di động

2.3.2. Cách hoạt động của React Native

Bằng cách tích hợp 2 thread là Main Thread và JS Thread cho ứng dụng mobile. Với Main Thread sẽ đảm nhận vai trò cập nhật giao diện người dùng(UI). Sau đó sẽ xử lý tương tác người dùng. Trong khi đó, JS Thread sẽ thực thi và xử lý code Javascript. Hai luồng này hoạt động độc lập với nhau.

Để tương tác được với nhau hai Thread sẽ sử dụng một Bridge(cầu nối). Cho phép chúng giao tiếp mà không phụ thuộc lẫn nhau, chuyển đổi dữ liệu từ thread này sang thread khác. Dữ liệu từ hai Thread được vận hành khi tiếp nối dữ liệu cho nhau.

2.3.3. Ưu điểm của React Native

• Tối ưu thời gian.

• Hiệu năng ổn định.

• Tiết kiệm chi phí.

• Đội ngũ phát triển ứng dụng không quá lớn.

• Ứng dụng tin cậy, ổn định.

• Xây dựng ứng dụng ít native code nhất cho nhiều hệ điều hành khác nhau.

• Trải nghiệm người dùng tốt hơn khi so sánh với ứng dụng Hybrid.

2.4. SQL Server

2.4.1. Giới thiệu về SQL Server

SQL Server chính là một hệ quản trị dữ liệu quan hệ sử dụng câu lệnh SQL để trao đổi dữ liệu giữa máy cài SQL Server và máy Client. Một Relational Database Management System – RDBMS gồm có: databases, database engine và các chương trình ứng dụng dùng để quản lý các bộ phận trong RDBMS và những dữ liệu khác.

Các thành cơ bản trong SQL Server gồm có: Reporting Services, Database Engine, Integration Services, Notification Services, Full Text Search Service,…

17 Tất cả kết hợp với nhau tạo thành một giải pháp hoàn chỉnh giúp cho việc phân tích và lưu trữ dữ liệu trở nên dễ dàng hơn.

• Database Engine (Lõi của SQL Server)

• Replication (Cơ chế tạo bản sao):

• Integration Services

• Analysis Services:

• Notification Services

• Reporting Services

• Full Text Search Service

• Service Broker

2.4.2. Tại sao lại sử dụng SQL trong thiết kế Website

SQL Server không phải là một hệ quản trị cơ sở dữ liệu độc lập mà nó chỉ là một thành phần với vai trò ngôn ngữ là công cụ giao tiếp giữa hệ cơ sở dữ liệu và người dùng. Chính vì thế nó được sử dụng trong các dịch vụ thiết kế web đẹp với chức năng giao tiếp với người dùng với các vai trò sau:

• SQL là một ngôn ngữ đòi hỏi có tính tương tác cao

• SQL là một ngôn ngữ lập trình cơ sở dữ liệu

• SQL là một ngôn ngữ lập trình quản trị cơ sở dữ liệu

• SQL là một ngôn ngữ lập trình cho các hệ thống chủ khách

• SQL là ngôn ngữ truy cập dữ liệu trên Internet

CHƯƠNG 3: PHÂN TÍCH VÀ MÔI TRƯỜNG HÓA YÊU CẦU

3.1. Phân tích yêu cầu chức năng 3.1.1. Chức năng quản lý quiz 3.1.1. Chức năng quản lý quiz

3.1.1.1. Mô tả

Chức năng dùng để thêm, chỉnh sửa, xóa quiz trong hệ thống. Mức độ ưu tiên: cao

3.1.1.2. Yêu cầu chức năng

Yêu cầu Mô tả

1. Thêm quiz Thêm quiz mới vào hệ thống: Câu hỏi, đáp án, … 2. Xóa quiz Xóa quiz ra khỏi hệ thống

3. Chỉnh sửa quiz Chỉnh sửa thông tin, nội dung quiz trong hệ thống cho phù hợp

4. Thêm câu hỏi Thêm, xóa câu hỏi khỏi quiz

Bảng 3.1: Yêu cầu chức năng quản lý quiz

3.1.2. Chức năng quản lý lộ trình học

3.1.2.1. Mô tả

Quản lý các lộ trình học có trên hệ thống. Lộ trình sẽ bao gồm các bài học. Mức độ ưu tiên: cao

3.1.2.2. Yêu cầu chức năng

Yêu cầu Mô tả

1. Thêm lộ trình học Thêm lộ trình học mới.

2. Cập nhật lộ trình học Cập nhật nội dung lộ trình theo yêu cầu. Thêm, loại bỏ, sắp xếp bài học.

3. Xóa lộ trình học Xóa lộ trình học.

Bảng 3.2: Yêu cầu chức năng quản lý tài khoản

3.1.3. Chức năng quản lý bài học

19 Quản lý các bài học có trên hệ thống, bài học là phần chi tiết của lộ trình học. Bài học bao gồm các kịch bản học.

Mức độ ưu tiên: cao

3.1.3.2. Yêu cầu chức năng

Yêu cầu Mô tả

1. Thêm bài học Thêm bài học mới.

2. Cập nhật bài học Cập nhật nội dung bài học theo yêu cầu. Chỉnh sửa nội dung các kịch bản có trong bài học.

3. Xóa bài học Xóa bài học.

Bảng 3.3: Yêu cầu chức năng quản lý tài khoản

3.1.4. Chức năng quản lý câu hỏi

3.1.4.1. Mô tả

Chức năng dùng để quản lý ngân hàng câu hỏi có trên hệ thống. Mức độ ưu tiên: Cao

3.1.4.2. Yêu cầu chức năng

Yêu cầu Mô tả

1. Thêm câu hỏi Thêm câu hỏi vào hệ thống với các mẫu câu hỏi được cung cấp sẵn.

2. Cập nhật câu

hỏi Cập nhật lại câu hỏi theo yêu cầu. 3. Xóa câu hỏi Xóa câu hỏi khỏi hệ thống.

Bảng 3.4: Yêu cầu chức năng nhắn tin với chatbot

3.1.5. Chức năng quản lý exam

3.1.5.1. Mô tả

Chức năng dùng để thêm, chỉnh sửa, xóa exam trong hệ thống. Mức độ ưu tiên: cao

3.1.5.2. Yêu cầu chức năng

Yêu cầu Mô tả

1. Thêm exam Thêm exam mới vào hệ thống. 2. Xóa exam Xóa exam ra khỏi hệ thống

20 3. Chỉnh sửa exam Chỉnh sửa thông tin, nội dung exam trong hệ thống cho

phù hợp.

4. Thêm câu hỏi Thêm, xóa các câu hỏi khỏi exam. Bảng 3.5: Yêu cầu chức năng quản lý exam

3.1.6. Chức năng học với từ vựng

3.1.6.1. Mô tả

Chức năng dùng để người dùng học các từ vựng bằng flashcard trong hệ thống. Mức độ ưu tiên: Cao

3.1.6.2. Yêu cầu chức năng

Yêu cầu Mô tả 1. Học với

flashcard

Người dùng sẽ học từ vựng trên flashcard. Hệ thống hiển thị nội dung từ vựng, ví dụ, …

2. Thêm thẻ ghi nhớ

Người dùng sẽ được thêm các thẻ ghi nhớ cho riêng mình giúp việc gợi nhớ từ vựng trở nên dễ dàng hơn.

3. Luyện tập Người dùng sẽ làm các câu hỏi liên quan đến chủ đề từ vựng mà người dùng học.

Bảng 3.6: Yêu cầu chức năng học với flashcard

3.1.7. Chức năng tra cứu từ vựng

3.1.7.1. Mô tả

Chức năng dùng để tra cứu các từ vựng trong hệ thống. Mức độ ưu tiên: cao

3.1.7.2. Yêu cầu chức năng

Yêu cầu Mô tả 1. Tra cứu từ

vựng

Tra cứu các từ vựng có trong hệ thống. Hiển thị thông tin từ vựng tìm kiếm (Từ tiếng anh, nghĩa tiếng việt, …)

2. Tra cứu với chatbot

Tra cứu các từ vựng thông qua chatbot. Hiển thị thông tin từ vựng tìm kiếm (Từ tiếng anh, nghĩa tiếng việt, …)

Bảng 3.7: Yêu cầu chức năng tra cứu từ vựng

3.1.8. Chức năng thảo luận

21 Chức năng dùng để trao đổi, thảo luận giữa người dùng với nhau nhằm mục đích hỗ trợ học tập. Mức độ ưu tiên: trung bình

3.1.8.2. Yêu cầu chức năng

Yêu cầu Mô tả

1. Bình luận Bình luận các bài viết được post lên trang forum của hệ thống.

2. Thích bài viết Tăng lượt tương tác với bài viết.

Bảng 3.8: Yêu cầu chức năng bình luận

3.1.9. Chức năng làm exam

3.1.9.1. Mô tả

Chức năng dùng để người dùng học làm các bài exam tương tự các bài thi toeic để kiểm tra trình độ học của mình. Mức độ ưu tiên: Cao

3.1.9.2. Yêu cầu chức năng

Yêu cầu Mô tả

1. Làm exam Người dùng sẽ trả lời các câu hỏi trong bài exam mà hệ thống đưa ra.

2. Xem kết quả Hiển thị số câu trả lời đúng và số điểm của người dùng. Bảng 3.9: Yêu cầu chức năng làm exam

3.1.10. Chức năng làm quiz

3.1.10.1. Mô tả

Chức năng dùng để người dùng học làm các bài quiz kiểm tra nhanh các câu hỏi trong chủ đề mà người dùng vừa học. Mức độ ưu tiên: Cao

3.1.10.2. Yêu cầu chức năng

Yêu cầu Mô tả

1. Làm quiz Người dùng sẽ trả lời các câu hỏi trong bài quiz được hệ thống cung cấp.

2. Kết quả Hiển thị kết quả đúng/sai cho từng câu hỏi trong quiz sau khi trả lời.

22 3. Lặp Lặp lại những câu hỏi trả lời sai cho đến khi kết thúc bài

quiz.

Bảng 3.10: Yêu cầu làm quiz

3.1.11. Chức năng nhắn tin

3.1.11.1. Mô tả

Chức năng dùng cho người dùng trao đổi các kinh nghiệm và các vấn đề khó khăn trong việc học tiếng anh. Mức độ ưu tiên: Cao

3.1.12.2. Yêu cầu chức năng

Yêu cầu Mô tả

1. Nhắn tin Người dùng nhắn tin qua lại với nhau.

2. Tạo boxchat Tạo boxchat cho phép mời người dùng khác cùng tham gia trao đổi.

Bảng 3.11: Yêu cầu chức năng nhắn tin

3.2. Phân tích yêu cầu phi chức năng 3.2.1. Khả năng sử dụng 3.2.1. Khả năng sử dụng

Hệ thống cho phép người dùng truy cập bằng internet.

Hệ thống sử dụng trình duyệt website và mobile app như là giao diện người dùng.

Hệ thống thân thiện với người dùng.

3.2.2 Độ khả dụng

Hệ thống luôn luôn ở trạng thái sẵn sàng 100% cho người dùng, 24 giờ một ngày, 365 ngày một năm. Hệ thống luôn luôn hoạt động 24 giờ/ngày.

Ở những thời điểm hệ thống bảo trì hoặc cập nhật, hệ thống phải có thông báo trước cho người dùng.

3.2.3. Độ tin cậy

Hệ thống phải đáng tin cậy 100% do tầm quan trọng của dữ liệu và các thiệt hại có thể gây ra bởi dữ liệu không chính xác hoặc không đầy đủ. Dữ liệu cá nhân của người dùng đều được bảo mật.

3.2.4. Hiệu suất

Hệ thống phải phản hồi các request từ người dùng không quá 2s. Hệ thống được phép tăng thời gian phản hồi khi nhận được những request lớn yêu cầu phải xử lý nhiều công việc.

3.2.5. Khả năng hỗ trợ

Hệ thống phải tuân thủ các tiêu chuẩn giao thức TCP/IP và phải được thiết kế phù hợp.

Hệ thống phải hỗ trợ việc bảo trì cũng như mở rộng, nâng cấp theo điều khoản trên hợp đồng.

Hệ thống phải được thiết kế sao cho phù hợp với nhiều loại browser hiện có. Hệ thống phải hỗ trợ cho phép người dùng báo lỗi nếu có.

3.2.6. Ràng buộc thiết kế

3.2.6.1. Ngôn ngữ lập trình

Front-end: Sử dụng framework ReactJs, HTML, CSS, Javascript.

Back-end: Sử dụng ngôn ngữ C# để thiết kế WebApi dựa trên .Net Core framework.

Mobile App: React Native

3.2.6.2. Công cụ phát triển

Sử dụng Visual Studio Code để lập trình.

Sử dụng các package của .net và các extensions cho IDE.

3.2.6.3. Mô hình thiết kế

Hệ thống được thiết kế theo mô hình MVC.

3.2.6.4. Cơ sở dữ liệu

3.3. Mô hình hóa yêu cầu 3.3.1. Usecase tổng quát 3.3.1. Usecase tổng quát

Hình 3.1: Usecase tổng quát

3.3.2. Mô tả sơ đồ usecase

ID Tên Mô tả

UC01 Đăng ký Đăng ký tài khoản để sử dụng hệ thống. UC02 Đăng nhập Đăng nhập vào hệ thống để có trải nghiệm

sử dụng tốt nhất.

UC03 Quên mật khẩu Đặt lại mật khẩu trong trường hợp không đăng nhập được.

25 UC04 Học theo lộ trình Học các lý thuyết, ngữ pháp, kĩ năng

nghe, đọc, viết thông qua các bài học. UC05 Chọn lộ trình Lựa chọn lộ trình từ danh sách lộ trình

được cung cấp.

UC06 Chọn bài học Lựa chọn bài học có trong lộ trình để tiến hành học.

UC07 Chọn kịch bản Lựa chọn kịch bản trong bài học để bắt đầu học.

UC08 Theo dõi tiến độ Theo dõi tiến độ hoàn thành lộ trình học. UC09 Học từ vựng Học từ vựng bằng giải pháp ghi nhớ do hệ

thống cung cấp.

UC10 Thảo luận Trao đổi thảo luận bằng các bài viết giữa các người học với nhau.

UC11 Đăng xuất Đăng xuất tài khoản ra khỏi hệ thống. UC12 Làm exam Làm quen, nâng cao kĩ năng làm bài với

các bài exam được cung cấp hoặc do người học tự thêm.

UC13 Làm quiz Luyện tập nhanh với những bộ câu hỏi quiz.

UC14 Quản lý tài nguyên cá nhân Người học quản lý các tài nguyên mà mình có.

UC15 Quản lý quiz/exam Quản lý các bài quiz/exam (của người học đối với người học)

UC16 Chia sẻ Chia sẻ quiz/exam cho người học khác. UC17 Quản lý ngân hàng câu hỏi Quản lý ngân hàng câu hỏi (của người học

đối với người học)

UC18 Quản lý bài viết Quản lý bài viết (của người học đối với người học)

26 UC19 Nhắn tin Nhắn tin trao đổi riêng tư với người dùng/

nhóm người dùng khác.

UC20 Thay đổi thông tin tài khoản Thay đổi địa chỉ email, mật khẩu, thông tin cá nhân khác của người học.

UC21 Đóng góp Người học đóng góp bản ghi cho tài

nguyên của hệ thống. UC22 Đóng góp ví dụ Người học đóng góp các ví dụ. UC23 Đóng góp ảnh ghi nhớ Người học cá nhân hóa thẻ ghi nhớ cho từ

vựng.

UC24 Quản lý từ vựng Quản lý từ vựng học được trên hệ thống bao gồm thêm, sửa, xóa từ vựng. UC25 Quản lý lộ trình học Quản lý lộ trình học bao gồm thêm, sửa,

xóa lộ trình học.

UC26 Quản lý bài học Quản lý bài học bao gồm thêm, sửa, xóa bài học.

UC27 Quản lý kịch bản Quản lý kịch bản có trong bài học. UC28 Kiểm duyệt tài nguyên Kiểm duyệt các tài nguyên khi người học

tiến hành công khai tài nguyên cá nhân. UC29 Kiểm duyệt bài viết Kiểm duyệt bài viết thảo luận mới được

người dùng tạo trước khi công khai UC30 Kiểm duyệt bình luận Kiểm duyệt bình luận mới có trong bài

viết.

UC31 Kiểm duyệt quiz/exam Kiểm duyệt quiz/exam của người học khi người học tiến hành chia sẻ.

UC32 Kiểm duyệt đóng góp Kiểm duyệt đóng góp của người dùng để xác định có được công khai. UC33 Quản lý tài khoản Quản lý tài khoản bao gồm khóa, mở

27 UC34 Khóa/ mở khóa tài khoản Khóa/mở khóa tài khoản theo yêu cầu. UC35 Phân quyền tài khoản Phân quyền cho tài khoản theo yêu cầu. UC36 Đặt lại mật khẩu Đặt lại mật khẩu cho tài khoản theo yêu cầu của người dùng trong trường hợp

chứng minh được sở hữu. Bảng 3.12: Mô tả sơ đồ usecase

3.3.3. Đặc tả một số USE CASE chính

3.3.3.1. Usecase Quản lý tài khoản (UC32)

Name Quản lý tài khoản

Brief description Quản trị viên truy cập trang quản lý tài khoản.

Actor(s) Người quản trị

Pre-conditions Người quản trị đăng nhập tài khoản, có kết nối Internet

Post-conditions Nếu có tài khoản vi phạm chính sách, quản trị viên tiến hành khóa/mở khóa tài khoản tạm thời/vĩnh viễn trực tiếp trên trang.

Flow of events

Basic flow (Thành công)

Use case bắt đầu khi quản trị viên click vào trang quản lý tài khoản.

1. Hệ thống hiển thị danh sách tài khoản có trên hệ thống.

2. Quản trị viên xem xét và tiến hành thực hiện khóa/ mở khóa tài khoản.

3. Bấm xác nhận.

4. Hệ thống lưu thông tin xuống cơ sở dữ liệu.

5. Hệ thống hiển thị thông báo kết quả, đóng popup và trở lại trang quản lý tài khoản.

Alternative flow (Thất bại)

Tại bước 3 khi người dùng bấm hủy.

 Đóng popup và hiển thị màn hình trước đó.

Relationships Extend: Khóa/mở khóa tài khoản, Phân quyền tài khoản, Đặt lại mật khẩu

Bảng 3.13: USE CASE - OLMS_UC_32

3.3.3.2. Usecase Kiểm duyệt tài nguyên (UC27)

Name Kiểm duyệt tài nguyên

Brief description Quản trị viên, Nhân viên quản lý truy cập trang kiểm duyệt.

Actor(s) Người quản trị, Nhân viên quản lý.

Pre-conditions • Người quản trị, Nhân viên quản lý đăng nhập tài khoản

• Có kết nối Internet

Post-conditions • Phê duyệt: Tài nguyên sẽ được hiển thị trên toàn hệ thống.

• Từ chối: Tài nguyên sẽ không được hiển trị trên toàn hệ thống.

Flow of events

Basic flow (Thành công)

Use case bắt đầu khi quản trị viên click vào trang quản lý tài nguyên.