Xây dựng website và ứng dụng mobile dạy học trực tuyến đồ án tốt nghiệp khoa đào tạo chất lượng cao ngành công nghệ thông tin

CƠ SỞ LÝ THUYẾT

Tổng quan về ASP.NET Core

ASP.NET Core là một framework mạnh mẽ và linh hoạt do Microsoft phát triển, luôn được cập nhật để cải thiện hiệu suất và khả năng tương thích với nhiều nền tảng khác nhau Được thiết kế cho việc phát triển web với NET, framework này mang lại nhiều tính năng quen thuộc cho những ai đã có kinh nghiệm làm việc với MVC hoặc Web API trong vài năm qua, cùng với nhiều công cụ hỗ trợ người dùng hiệu quả.

ASP.NET đã được các kỹ thuật viên trên toàn thế giới tin dùng để phát triển ứng dụng web trong nhiều năm Qua thời gian, framework này đã liên tục thay đổi, cập nhật và nâng cấp, dẫn đến sự ra đời của ASP.NET Core 1.0, phiên bản mới nhất hiện nay.

● ASP.NET Core không phải là phiên bản tiếp theo của ASP.NET 4.6

● Đó là một framework hoàn toàn mới, may mắn rằng nó một dự án side-by-side tương tự với mọi thứ mà chúng ta biết

● Nó thực ra được viết lại trên framework ASP.NET 4.6 hiện tại những kích thước nhỏ hơn và nhiều modular hơn [2]

ASP.NET Core là một framework web mã nguồn mở, tối ưu cho cloud, cho phép phát triển ứng dụng web đa nền tảng trên Windows, Linux và Mac Nó tích hợp MVC framework, kết hợp các tính năng của MVC và Web API thành một framework duy nhất.

● Các ứng dụng ASP.NET Core có thể chạy trên NET Core hoặc trên NET Framework hoàn chỉnh

● Nó đã được thiết kế để cung cấp một framework tối ưu cho các ứng dụng để triển khai tới cloud hoặc chạy on-premises

● Nó bao gồm những modular với các thành phần tối thiểu, do đó bạn giữ được tính linh hoạt trong quá trình xây dựng các giải pháp của mình

● Bạn có thể phát triển và chạy các ứng dụng đa nền tảng từ ASP.NET Core trên

2.1.3 Ưu điểm của ASP.NET Core

ASP.NET Core đi kèm với những ưu điểm sau:

● ASP.NET Core có một số thay đổi kiến trúc dẫn đến modular framework nhỏ hơn

● ASP.NET Core không còn dựa trên System.Web.dll

● Nó dựa trên một tập hợp nhiều yếu tố của Nuget packages

● Điều này cho phép bạn tối ưu ứng dụng của mình chỉ cần những NuGet packages cần thiết

● Lợi ích của diện tích bề mặt ứng dụng nhỏ hơn thì bảo mật chặt chẽ hơn, giảm dịch vụ, cải thiện hiệu suất và giảm chi phí [2]

2.1.4 Cải tiến của ASP.NET Core

Với ASP.NET Core, bạn có thể nhận được các cải tiến sau:

● Xây dựng và chạy các ứng dụng ASP.NET Core đa nền tảng trên Windows, Mac và Linux

● Được xây dựng trên NET Core, hỗ trợ side-by-side app versioning

● Công cụ mới giúp đơn giản hóa việc phát triển web hiện đại Liên kết đơn các web stack như Web UI và API Web

● Cấu hình dựa trên môi trường đám mây sẵn có

● Được xây dựng dựa trên cho DI (Dependency Injection)

● Tag Helpers làm cho các Razor makup trở nên tự nhiên hơn với HTML

● Có khả năng host trên IIS hoặc self-host [2].

Tổng quan về Restful API

REST (Representational State Transfer) là một kiến trúc mạng được Roy Fielding định nghĩa, nhằm thiết kế các ứng dụng phân tán sử dụng giao thức HTTP Đây là mô hình kiến trúc quan trọng cho web, giúp tối ưu hóa việc tương tác giữa các hệ thống.

REST là một tập hợp các hướng dẫn và cấu trúc giúp chuyển đổi dữ liệu, thường được áp dụng trong các ứng dụng web.

API stands for Application Programming Interface, which serves as a connection method to various libraries and applications Both Windows and Twitter offer APIs, although they perform different functions and serve distinct purposes.

RESTful API là các API tuân theo cấu trúc REST, không phải là công nghệ mà là phương thức xây dựng API với các nguyên tắc tổ chức cụ thể Những nguyên tắc này giúp lập trình viên tạo ra môi trường xử lý yêu cầu API một cách toàn diện hơn.

2.2.2 Nguyên tắc của Restful API

RESTful đã xuất hiện như một giải pháp hiệu quả để thay thế việc thực hiện gọi thủ tục từ xa (RPC) trên web, do sự phát triển phức tạp ngày càng gia tăng của các dịch vụ web lớn.

Web dựa vào tài nguyên, URI và HTTP, nhưng các dịch vụ web lớn lại không tận dụng những yếu tố này Chúng không cảm thấy được lợi ích từ dịch vụ web hướng tài nguyên do thiếu khả năng đánh địa chỉ, không có tính năng cache và kết nối kém Hơn nữa, các dịch vụ này không cần giao diện đồng nhất và thường gặp khó khăn trong việc hiểu và giải quyết các vấn đề liên quan, đặc biệt khi tương tác với nhiều khách hàng cùng lúc.

REST là một kiến trúc dành cho hệ thống phân tán, đặc biệt là trên World Wide Web Để triển khai kiến trúc RESTful, cần tuân thủ các nguyên tắc của ROA, tức là kiến trúc hướng tài nguyên Bài báo này sẽ trình bày các quy tắc cần thiết để thiết kế dịch vụ RESTful hiệu quả.

2.2.3 Các ràng buộc trong REST

Giao diện đồng nhất giúp đơn giản hóa và tách biệt kiến trúc, cho phép các phần phát triển độc lập thông qua API cơ bản, hỗ trợ thiết kế dịch vụ REST cho cả web và mobile Tuy nhiên, việc chuẩn hóa này có thể hạn chế khả năng tối ưu hóa từng kết nối.

Phi trạng thái là khái niệm trong đó server và client không lưu trữ thông tin trạng thái của nhau Mỗi yêu cầu gửi đi cần được đóng gói đầy đủ thông tin để server có thể nhận diện và xử lý Điều này mang lại lợi ích cho việc phát triển, bảo trì và mở rộng hệ thống, vì không cần tốn công quản lý trạng thái của client Tuy nhiên, phương pháp này cũng có những hạn chế nhất định.

Mô hình Client - Server giúp tách biệt các thành phần, đơn giản hóa quá trình thực hiện và giảm bớt sự phức tạp trong kết nối Điều này không chỉ nâng cao hiệu quả điều chỉnh hiệu năng mà còn tăng khả năng mở rộng cho máy chủ.

Khả năng caching giúp giảm tải cho server bằng cách lưu trữ các response, từ đó tăng tốc độ truy cập thông tin cho client Để tối ưu hóa quá trình này, hai phương pháp hiệu quả là Etag và Last-Modified nên được áp dụng.

Phân lớp hệ thống giúp giảm độ phức tạp, cho phép các thành phần hoạt động độc lập và dễ dàng mở rộng Mỗi lớp chỉ tương tác trực tiếp với lớp ngay trên và dưới, tạo điều kiện thuận lợi cho việc quản lý và phát triển hệ thống.

Cài đặt môi trường ASP.NET Core

2.3.1 Giới thiệu chung về các công cụ cho ASP.NET Core Để phát triển ứng dụng ASP NET Core bạn cần các công cụ sau:

● Bộ ASP.NET Core SDK;

● Một môi trường phát triển ứng dụng tích hợp như Visual Studio, JetBrains Rider hoặc một code editor như Visual Studio Code

All the tools mentioned are available for free (or have free versions) from Microsoft's website You can download the latest version of the ASP.NET Core SDK for Windows at https://dotnet.microsoft.com/download Visual Studio Community (free) and Visual Studio Code (free, cross-platform) can be downloaded from https://visualstudio.microsoft.com/downloads/ JetBrains Rider does not offer a free version but provides a 30-day trial Overall, installing the development environment for ASP.NET Core on Windows is straightforward To simplify the guidance, all subsequent lessons will use Visual Studio 2019 Community If you prefer to use a different IDE, you can explore additional resources through the free documentation available online.

2.3.2 Cài đặt ASP.NET Core SDK trên Windows

ASP.NET Core được thiết kế để phát triển và tương thích đa nền tảng, giúp việc cài đặt trên các hệ điều hành trở nên dễ dàng Để chạy ứng dụng ASP.NET Core, cần cài đặt ASP.NET Core Runtime, trong khi để phát triển ứng dụng, bạn cần cài đặt ASP.NET Core SDK Khi cài đặt SDK, hệ thống sẽ tự động cài đặt Runtime Bạn có thể tải phiên bản SDK mới nhất từ đường link sau.

Tải bộ cài về và thực hiện tiến trình cài đặt như bất kỳ chương trình Windows bình thường nào [4]

2.3.3 Cài đặt ASP.NET Core SDK với Visual Studio 2019

Cài đặt NET Core Runtime và SDK trên Windows với Visual Studio rất dễ dàng Phiên bản mới nhất, NET Core 3.0, yêu cầu sử dụng Visual Studio 2019 (v16.3 trở lên).

If you don't have Visual Studio or are using an older version, install Visual Studio (Community) 2019 During the installation process, select the workloads for ASP.NET and web development, which covers both ASP.NET and ASP.NET Core, or choose the NET Core cross-platform development option for applications on NET Core and ASP.NET Core.

Để cài đặt môi trường phát triển ASP.NET Core trên Windows, bạn cần cập nhật Visual Studio 2019 lên phiên bản mới nhất Sau đó, mở Visual Studio Installer, chọn Modify, và vào tab Workloads để lựa chọn một trong hai mục cần thiết Việc chọn một trong hai workload này sẽ cài đặt tất cả các thành phần cần thiết cho phát triển và thực thi ứng dụng ASP.NET Core Khi quá trình cài đặt hoàn tất, bạn có thể kiểm tra phiên bản bằng lệnh dotnet version trên Command Prompt hoặc PowerShell, từ đó xác nhận rằng bạn đã sẵn sàng cho việc phát triển và chạy ứng dụng ASP.NET Core.

Tổng quan về Angular 10

Angular 10 là một framework Javascript mã nguồn mở được sử dụng để xây dựng các ứng dụng web bằng HTML, Javascript và là 1 lựa chọn cho các lập trình viên phát triển các ứng dụng cho các thiết bị di động

Angular 10 được đưa ra vào tháng 4 năm 2020 nhằm thay thế AngularJS 1 với các khái niệm mới nhằm đơn giản hóa và tối ưu cho quá trình phát triển sử dụng framework này

Một số lợi ích của Angular 10:

● Hỗ trợ đa nền tảng và đa trình duyệt

● Cấu trúc code được tổ chức đơn giản hơn

● Sử dụng Dependency Injection để maintane ứng dụng

● Tất cả mọi thứ dựa vào component [5].

Môi trường phát triển Angular 10

Angular 10 sử dụng TypeScript để phục vụ cho quá trình phát triển ứng dụng Angular TypeScript là một ngôn ngữ có thể gọi là bao hàm Javascript được sử dụng để viết các ứng dụng Angular và một trình compiler cho phép chúng ta biên dịch thành file Javascript thuần tùy theo nhu cầu người dùng TypeScript giúp giảm thiểu các lỗi khi viết các ứng dụng Angular

Môi trường để phát triển ứng dụng angular cần có:

Ngoài ra có thể thêm một ngôn ngữ khác để làm phần server side, phục vụ cho việc lưu trữ dữ liệu nếu cần thiết [5].

Kiến trúc Angular

An Angular 10 application can consist of one or multiple modules, depending on its complexity A module serves as a code block that performs one or more tasks In Angular, each module comprises components, templates, metadata, and services that are injected into the module's components through Dependency Injection.

In Angular 10, a component functions similarly to a controller in AngularJS 1, working alongside a template to handle specific tasks and display data in the view Components are reusable throughout the application and can render their own views while configuring Dependency Injection Additionally, CSS manipulations can be applied to the component's template To utilize a component, it must be registered using the @Component decorator.

2.6.3 Templates Đây là phần view của component, được sử dụng để hiển thị data hay bất cứ gì mà component sinh ra Template có thể được định nghĩa trực tiếp trong Component hoặc có thể là một file html riêng và được liên kết với component thông qua url

Metadata là cách mô tả một class component bằng dữ liệu cụ thể, giúp Angular nhận diện đó là component thông qua decorator @Component Các thông tin cơ bản trong metadata bao gồm selector, là thẻ HTML tự định nghĩa mà component có hiệu lực, và template.

- đây là nơi định nghĩa template của component, directives - khai báo các component khác hoặc các directives

2.6.5 Data Binding Đây là quá trình chúng ta liên kết dữ liệu của ứng dụng với một element của view trong html để hiển thị hoặc thiết lập giá trị cho element đó Có 4 kiểu data binding:

● Interpolation: hiển thị một biến, giá trị của component một cách trực tiếp bằng các thẻ html

● Event Binding: khi tác thực hiện một thao tác lên một component method nó sẽ fire event và thực hiện thao tác tương ứng

● Two-way binding: sử dụng ngModel để binding các giá trị của component với view

Services are code blocks that perform specific tasks within Angular applications, operating on the principle of Dependency Injection These services encompass values, functions, and features that the application requires to function effectively.

Các directives là các class biểu diễn cho các metadata Có 3 kiểu directive:

2.6.8 Dependency Injection Đây là một cơ chế cho phép người dùng thêm vào các thành phần cần thiết cho component tùy theo nhu cầu người sử dụng Phương thức này sẽ tự động tạo các đối tượng của các class mà component yêu cầu, người dung chỉ cần khai báo và sử dụng

Sử dụng Dependency Injection cho phép chúng ta thêm các service, provider, component khác vào component để sử dụng một cách dễ dàng, nhanh chóng hơn [5].

Cài đặt môi trường Angular 10

2.7.1 Cài đặt Node trên Windows

Bước 1: Tải bản cài đặt của NodeJS trên trang chủ của NodeJS (v10.14.1 LTS) Bước 2: Chạy file cài đặt, làm theo các hướng dẫn trong tiến trình

Bước 3: Chọn đường dẫn cài đặt cho NodeJS

Bước 4: Chọn các component để cài đặt, khuyến khích chọn tất cả các bộ công cụ đi kèm

Bước 5: Nhấn Install để bắt đầu tiến trình cài đặt

Bước 6: Trình cài đặt hoàn tất, khởi động lại máy tính để hoàn tất [6]

2.7.2 Cài đặt Typescript và Angular

Bước 1: Cài đặt Typescript bằng lệnh npm install -g typescript và sau đó kiểm tra phiên bản Typescript cài đặt thành công bằng lệnh tsc -v

Để bắt đầu với Angular 10, bước đầu tiên là cài đặt Angular-cli, một công cụ quan trọng giúp sinh code và tạo kiến trúc cho ứng dụng Bạn có thể cài đặt Angular-cli bằng lệnh `npm install -g angular-cli` và kiểm tra phiên bản đã cài đặt bằng lệnh `ng -v`.

Bước 3: Tạo một Project Angular 10 bằng Angular-cli thông qua lệnh ng new project- name [5].

Tổng quan về React Native

React Native là một công cụ lập trình đa nền tảng, cho phép phát triển ứng dụng trên môi trường native cho cả Android và iOS Được phát triển bởi Facebook, React Native là một framework mã nguồn mở, sử dụng Javascript để xây dựng phần mềm Khác với React, React Native sử dụng các native components thay vì web components, do đó, để nắm vững cấu trúc của React Native, người dùng cần có kiến thức cơ bản về các khái niệm của React như JSX, components, props và state.

Một số lợi ích của React Native:

● Khả năng tái sử dụng code và các components đã được phát triển sẵn

● Sự tuyệt vời của Live and Hot reloading

● Tiết kiệm effort khi có thể code 1 mà có thể run cho cả IOS và Android [7].

Môi trường phát triển React Native

React Native sử dụng JavaScript để phục vụ cho quá trình phát triển ứng dụng di động

Môi trường để phát triển ứng dụng angular cần có:

Kiến trúc React Native

Component là một khối mã độc lập và tái sử dụng, giúp chia nhỏ giao diện người dùng (UI) thành nhiều phần Có thể so sánh các component với các khối LEGO, trong đó một cấu trúc LEGO được xây dựng từ nhiều khối nhỏ, tương tự như cách mà một trang web hoặc giao diện được tạo ra từ nhiều component.

React Native có 2 loại component: Funtional (Stateless) và Class (Stateful)

Functional components, also known as stateless components, are limited in their ability to manage React State and lifecycle methods However, with the introduction of React Hooks in version 16.8, developers can now utilize state and other features within functional components, enhancing their functionality and versatility.

Class Components phức tạp hơn functional components ở chỗ nó còn có: phương thức khởi tạo, life-cycle, hàm render() và quản lý state (data)

2.10.2 Component Đối với ios toàn bộ native code được viết bằng Objective C hoặc Swift, còn với Android sẽ được viết bằng Java Nhưng để viết một ứng dụng React Native, chúng ta sẽ không bao giờ phải viết bằng native code của Android hay IOS [8]

Props, viết tắt của Properties, là dữ liệu immutable mà bạn không nên thay đổi giá trị Các component nhận props từ component cha và chỉ được phép đọc giá trị, không được thay đổi Trong React, dữ liệu di chuyển theo một chiều từ component cha đến các component con Việc sử dụng props cho phép bạn trừu tượng hóa các component, giúp chúng có thể được sử dụng ở nhiều vị trí khác nhau trong ứng dụng.

State và props trong React có những điểm khác biệt quan trọng State là dữ liệu nội bộ của một Component, trong khi props là dữ liệu được truyền vào Chúng ta có thể thay đổi state, coi nó như một kiểu dữ liệu mutable, nhưng cần lưu ý không thay đổi trực tiếp biến this.state Thay vào đó, hãy sử dụng hàm setState để cập nhật giá trị, vì nó sẽ kích hoạt việc render lại Component và tất cả các Component con Ngoài ra, setState hoạt động bất đồng bộ, vì vậy nếu bạn đọc giá trị state ngay sau khi gọi setState, giá trị có thể chưa được cập nhật ngay lập tức.

Hooks là các hàm cho phép bạn kết nối với trạng thái và các tính năng vòng đời của React từ các hàm components Chúng không hoạt động trong các lớp (classes), giúp bạn sử dụng React mà không cần phải sử dụng class.

The Effect Hook, useEffect, enables functional components to perform side effects, serving the same purpose as componentDidMount, componentDidUpdate, and componentWillUnmount in React class components, but consolidating these functionalities into a single API.

React Native allows you to define components as either classes or functions Class-defined components offer numerous features, requiring you to extend the Component class when declaring a React component To render the view on the screen, you must call the mandatory render() method Each component has lifecycle methods that can be overridden to execute code for displaying content on mobile screens, which are typically divided into three main phases.

Cài đặt môi trường React native

Bước 2: Cài đặt React native CLI

Bước 3: Cài đặt Android Studio

Bước 4: Cài đặt Android SDK

Bước 5: Cấu hình ANDROID_HOME environment thay giá trị variable value bằng đường dẫn đến file SDK

KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU

Khảo sát hiện trạng

3.1.1 Khảo sát nhu cầu người dùng

Hiện nay, sự phát triển của các trang web hướng dẫn tự học và thi thử Toeic cùng với các clip hướng dẫn từ Youtuber đã tạo ra nhu cầu học tập linh hoạt cho người dùng Do đó, các website liên quan đến sách cần phải có giao diện đẹp, dễ thao tác, và chức năng đa dạng, tiện lợi để đáp ứng nhu cầu học mọi lúc, mọi nơi.

Khảo sát hiện trạng một số trang web dạy học trực tuyến trên thị trường:

● Udemy: https://www.udemy.com/

Hình 3.1Khảo sát trang Udemy

○ Thanh menu đầy đủ yêu cầu, dễ dàng tìm kiếm theo nhiều từ khóa

○ Trang giới thiệu cung cấp thông tin rõ ràng

○ Cách phối màu hợp lý, đẹp

○ Bố cục rõ ràng, thể hiện đầy đủ thông tin về các khóa học

○ Giao diện quá nhiều chữ gây rối mắt

○ Giá khóa học khá đắt so với mặt bằng chung

● Coursera: https://www.coursera.org/

Hình 3.2Khảo sát trang Coursera

○ Thanh menu khá đầy đủ

○ Phần tìm kiếm thiết kế dễ dàng sử dụng

○ liên kết được với nhiều công ty và đại học danh tiếng

○ Có tín chỉ sau mỗi khóa học

○ Giao diện quá sơ sài

○ Thanh tiêu đề không đủ yêu cầu, khó khăn cho người mới

● SkillShare: https://www.skillshare.com/

Hình 3.3 Khảo sát trang SkillShare

○ Giao diện đơn giản dễ tiếp cận với người dùng

○ Đa dạng về số lượng hastag và các bài giảng

○ Người dùng có thể đăng ký premium để nhận được nhiều ưu đãi

○ Cho phép xem 1 số lượng bài giảng trước khi đăng ký mua khóa học

○ Sau khi đăng ký người dùng phải tốn phí để trải nghiệm dịch vụ tốt hơn

○ Số lượng khóa học miễn phí còn khá ít

○ Giao diện web còn chưa thực sự hấp dẫn

○ Chưa có tính năng tìm kiếm nâng cao

○ Trang Udemy đẹp hơn trang Coursera, SkillShare về mặt giao diện

○ Trang Coursera liên kết được với nhiều công ty và đại học danh tiếng

Giao diện của Udemy có quá nhiều chữ, gây khó chịu cho người dùng, trong khi đó, trang Coursera lại thiếu thông tin, tạo ra nhiều khoảng trống trắng Đồng thời, cách trình bày danh sách khóa học và trang chi tiết khóa học trên SkillShare cũng chưa được tối ưu.

○ Giá khóa học trang Udemy khá mắc so với mặt bằng chung còn bên

3.1.3 Tổng kết sau khi khảo sát

Người dùng cần một nền tảng học trực tuyến với nội dung được tổ chức rõ ràng theo hashtag và cấp độ, giúp dễ dàng theo dõi và tìm kiếm khóa học Các khóa học nên được đề xuất theo lộ trình phù hợp và cho phép người dùng đánh giá, bình luận, cũng như tương tác trực tiếp với giảng viên qua comment, nhắn tin và forum để giải quyết thắc mắc Bên cạnh đó, việc mở khóa một phần nội dung trước khi thanh toán giúp người dùng chọn lựa khóa học phù hợp Hệ thống cần có các bài kiểm tra củng cố kiến thức và các thành tích khích lệ người học Để trở thành giảng viên, quy trình đăng ký cần đơn giản, cùng với các công cụ quản lý khóa học, nội dung, bộ câu hỏi và đề thi dễ sử dụng Nhóm phát triển đã chọn framework Angular để phân chia giao diện và chức năng theo vai trò người dùng, API ASP.NET Core vì tính dễ tiếp cận và hỗ trợ tốt với NuGet Package, MS SQL Server cho quản lý dữ liệu hiệu quả, và React Native để xây dựng giao diện người dùng đẹp mắt và ổn định.

Xác định yêu cầu

3.2.1.1 Lược đồ usecase tổng quát (Web)

Hình 3.4 Sơ đồ use case tổng quát (Web)

3.2.1.2 Lược đồ usecase actor User (Web)

Hình 3.5 Sơ đồ use case actor User (Web)

3.2.1.3 Lược đồ usecase actor User (Mobile)

Hình 3.6: Sơ đồ Usecase actor User (Mobile)

3.2.1.4 Lược đồ usecase actor Admin (Web)

Hình 3.7 Sơ đồ Usecase actor Admin (Web) 3.2.2 Bảng Requirement dành cho Usecase

Bảng 3.1: Bảng yêu cầu dành cho Usecase Desktop

No Name Usecase Usecase id Actor

1 Đăng ký UC_01 Người dùng chưa có tài khoản trên hệ thống

2 Đăng nhập UC_02 Người dùng đã có tài khoản trên hệ thống

3 Đăng xuất UC_03 Người dùng đã đã đăng nhập vào hệ thống

4 Tìm kiếm khóa học UC_04 Người dùng chưa có tài khoản hoặc đã đăng nhập vào hệ thống

5 Xem thông tin khóa học UC_05 Người dùng đã đăng nhập hoặc người dùng chưa đăng nhập

5.1 Đăng ký khóa học UC_06 Người dùng đã đăng nhập

5.2 Xem chi tiết khóa học UC_07 Người dùng đã đăng nhập

5.2 Xem bài học UC_08 Người dùng đã đăng nhập

5.3 Thanh toán UC_09 Người dùng đã đăng nhập

6 Quản lý khóa học UC_10 Người dùng đã đăng nhập với quyền giảng viên

6.1 Tạo nội dung bài học UC_11 Người dùng đã đăng nhập với quyền giảng viên

6.2 Tạo bài Quiz UC_12 Người dùng đã đăng nhập với quyền giảng viên

7 Bình luận UC_13 Người dùng đã đăng nhập vào hệ thống 7.1 Chỉnh sửa nội dung bình luận UC_14 Người dùng đã đăng nhập vào hệ thống

7.2 Xóa bình luận UC_15 Người dùng đã đăng nhập vào hệ thống

8 Trở thành giảng viên UC_16 Người dùng đã đăng nhập với quyền học viên

9 Tạo phòng học trực tuyến UC_17 Người dùng đã đăng nhập với quyền giảng viên

10 Thực hiện Quiz UC_18 Người dùng đã đăng nhập

11 Xem lịch sử thực hiện Quiz UC_19 Người dùng đã đăng nhập

12 Đánh giá khóa học UC_20 Người dùng đã mua khóa học

13 Xem thông tin hóa đơn UC_21 Người dùng đã mua khóa học

14 Quản lý số dư giảng viên UC_22 Người dùng đã đăng nhập với quyền quản trị viên

15 Quản lý tài khoản trang web UC_23 Người dùng đã đăng nhập với quyền quản trị viên

15.1 Kích hoạt tài khoản bị vô hiệu hóa UC_24 Người dùng đã đăng nhập với quyền quản trị viên

15.2 Vô hiệu hóa tài khoản đang hoạt động

Người dùng đã đăng nhập với quyền quản trị viên

Bảng 3.2: Bảng yêu cầu danh cho Usecase Mobile

No Name Usecase Usecase id Actor

1 Đăng ký UCM_01 Người dùng chưa có tài khoản trên hệ thống

2 Đăng nhập UCM_02 Người dùng đã có tài khoản trên hệ thống

3 Đăng xuất UCM_03 Người dùng đã đăng nhập vào hệ thống

4 Tìm kiếm khóa học UCM_04 Người dùng chưa có tài khoản hoặc đã đăng nhập vào hệ thống

5 Xem thông tin khóa học UCM_05 Người dùng đã đăng nhập hoặc người dùng chưa đăng nhập

5.1 Đăng ký khóa học UCM_06 Người dùng đã đăng nhập vào hệ thống

5.2 Xem chi tiết khóa học UCM_07 Người dùng đã đăng nhập vào hệ thống

5.2 Xem bài học UCM_08 Người dùng đã đăng nhập vào hệ thống

5.3 Thanh toán UCM_09 Người dùng đã đăng nhập vào hệ thống

6 Thực hiện Quiz UCM_10 Người dùng đã đăng nhập vào hệ thống

3.2.3.1 Đặc tả Usecase actor User (Web)

Bảng 3.3: Đặc tả Usecase Đăng ký

Use Case No UC_01 Use case version 1.0

Use case name Đăng ký

● Người dùng chưa có tài khoản trên hệ thống

● Use case này cho phép người dùng đăng ký tài khoản

● Người dùng có tài khoản hợp lệ có thể sử dụng trên hệ thống

● Người dùng chưa nhập tài khoản với mật khẩu của mình

● Người dùng bấm nút “Register”

● Thành công: Người dùng đăng ký được với hệ thống

● Thất bại: Hệ thống hiển thị lỗi

Step Actor Action System Response

Người dùng khởi động ứng dụng và thấy màn hình "Đăng ký" Hệ thống yêu cầu nhập thông tin cá nhân, sau đó tiếp tục với việc nhập tài khoản và mật khẩu.

2 Người dùng nhập thông tin hệ thống yêu cầu

3 Người dùng nhấn nút “Register” Hệ thống chuyển sang màn hình đăng nhập [Exception 1] [Exception 2]

1 Lỗi mạng Không chuyển về trang chủ

2 -Thông tin đăng ký chưa hợp lệ

(thiếu trường thông tin, sai định dạng dữ liệu)

-Nhập xác nhận mật khẩu sai

Hệ thống sẽ hiện thông báo (alert) và có warning dòng dữ liệu cho người dùng

● Tên đăng nhập: không được để trống

● Mật khẩu: không được để trống, chiều dài tối thiểu 8 ký tự, phải bao gồm 1 chữ cái viết hoa, chữ số và 1 ký tự đặc biệt

● Email: có định dạng @gmail.com

● Trường họ tên, số điện thoại không được để trống

Bảng 3.4: Đặc tả Usecase Đăng nhập

Use case name Đăng nhập

Author Châu Huỳnh Phước Toàn

● Người dùng đã có tài khoản trên hệ thống

● Use case này cho phép người dùng đăng nhập vào hệ thống

● Người dùng có thể đăng nhập và sử dụng các chức năng với quyền tương ứng

● Người dùng chưa đăng nhập vào hệ thống

● Người dùng bấm nút “Log in”

● Người dùng chưa đăng nhập vào hệ thống và đã có tài khoản

● Thành công: Người dùng đăng nhập được với hệ thống và sử dụng được các chức năng với quyền tương ứng

Người dùng mở ứng dụng và được hiển thị màn hình "Đăng nhập" Tại đây, hệ thống yêu cầu người dùng nhập các thông tin cá nhân, bao gồm tài khoản và mật khẩu.

3 Người dùng nhấn nút “Login” Hệ thống chuyển sang trang chủ

2 Sai tài khoản mật khẩu Hệ thống sẽ hiện thông báo (alert)

● Mật khẩu: không được để trống

Bảng 3.5: Đặc tả Usecase Đăng xuất

Use case name Đăng xuất

● Use case này cho phép người dùng đăng xuất ra khỏi hệ thống

● Người dùng có thể đăng xuất khỏi hệ thống

● Người dùng đã đăng nhập và click chọn Sign out tại menu người dùng

● Người dùng đã đăng nhập vào hệ thống

● Thành công: Màn hình chuyển về trang đăng nhập

STEP Actor Action System Response

1 Người dùng nhấp chọn Sign out tại menu người dùng

Hệ thống chuyển từ form hiện tại sang form đăng nhập

No Actor Action System Response

1 Lỗi mạng Không chuyển về trang đăng nhập

Bảng 3.6: Đặc tả Usecase Tìm kiếm khóa học

Use case name Tìm kiếm khóa học

● Người dùng chưa có tài khoản hoặc đã đăng nhập vào hệ thống

● Use case này cho phép người dùng tìm kiếm danh sách khóa học theo yêu cầu

● Người dùng có thể tìm kiếm được khóa học mong muốn

● Người dùng nhập thông tin tìm kiếm

● Người dùng bấm nút “Search”

● Người dùng chưa đăng nhập vào hệ thống hoặc đã đăng nhập vào hệ thống

● Thành công: Người dùng tìm kiếm được khóa học mong muốn

1 Người dùng mở ứng dụng lên Hệ thống sẽ hiển thị trang chủ trong đó có thanh tìm kiếm

2 Người dùng nhập thông tin cần tìm kiếm

3 Người dùng nhấn nút “Search” Hệ thống chuyển sang màn hình tìm kiếm với nội dung người dùng tìm kiếm [Exception 1]

1 Nhập nội dung không thể tìm kiếm Trả về hết sản phẩm

Hình 3.8 Sơ đồ use case xem thông tin khóa học

Bảng 3.7: Đặc tả Usecase Xem thông tin khóa học

Use case name Xem thông tin khóa học

● Người dùng đã đăng nhập hoặc người dùng chưa đăng nhập

● Use case này cho phép người dùng xem thông tin khóa học

● Người dùng có thể xem thông tin tất cả khóa học

● Người dùng click vào khóa học trong danh sách

● Người dùng chưa đăng nhập vào hệ thống hoặc đã đăng nhập vào hệ thống

● Thành công: Show được thông tin tất cả khóa học

1 Người dùng mở ứng dụng lên Hệ thống hiển thị trang chủ

2 Người dùng nhấn nút “Course” Hệ thống chuyển sang màn hình khóa học [Exception 1]

1 Lỗi mạng Không chuyển sang được trang khóa học

Bảng 3.8: Đặc tả Usecase Đăng ký khóa học

Use case name Đăng ký khóa học

● Người dùng đã đăng nhập

● Use case này cho phép người dùng đăng ký khóa học

● Người dùng có thể đăng ký khóa học mong muốn

● Người dùng bấm nút “Enroll”

● Thành công: Đăng ký thành công được khóa học

2 Người dùng click chọn khóa học tương ứng

Hệ thống chuyển sang màn hình khóa học

3 Người dùng chọn khóa học mong muốn

4 Người dùng bấm vào nút

Chuyển sang trang thanh toán [Exception 2]

2 Mạng yếu Quay liên tục không load được

Bảng 3.9: Đặc tả Usecase Xem chi tiết khóa học

Use case name Xem chi tiết khóa học

● Use case này cho phép người dùng xem thông tin chi tiết khóa học

● Người dùng có thể xem chi tiết khóa học

● Người dùng bấm nút “Find out more”, ảnh thumbnail hoặc tên khóa học

● Thành công: Vào được trang chi tiết của đúng khóa học đó

2 Người dùng bấm nút “Find out more”, ảnh thumbnail hoặc tên khóa học

Hệ thống chuyển sang màn hình khóa học

4 Người dùng bấm vào nút “View more detail”

Chuyển sang trang chi tiết khóa học [Exception 2]

2 Load sai trang Không load đúng được trang chi tiết khóa học đó

Bảng 3.10: Đặc tả Usecase Xem bài học

Use case name Xem bài học

● Use case này cho phép người dùng xem thông tin chi tiết bài học

● Người dùng có thể xem chi tiết bài học

● Người dùng bấm nút “Study now”

● Thành công: Vào được trang bài học chi tiết của đúng khóa học đó

Hệ thống chuyển sang trang danh mục khóa học

5 Người dùng bấm vào nút “Study now”

Chuyển trang trang chi tiết bài học [Exception 3]

3 Load sai trang Không load đúng được bài học chi tiết khóa học đó

● Danh sách các chương (Topic), chủ đề (Subtopic), bài giảng (Lesson) ở trạng thái khóa chỉ được kích hoạt sau khi người dùng đăng ký và thanh toán thành công

● Các bài thi ôn luyện kiến thức (Exam) ở trạng thái khóa chỉ được kích hoạt sau khi người dùng đăng ký và thanh toán thành công

Bảng 3.11: Đặc tả Usecase Thanh toán

Use case name Thanh toán

● Use case này cho phép người dùng thanh toán khóa học đã chọn

● Người dùng có thể thanh toán cho khóa học muốn đăng ký

● Người dùng bấm nút “Pay by Account Balance” hoặc “Paypal”

● Thành công: Vào được trang thanh toán của Paypal hoặc số dư tài khoản được cập nhật

Hệ thống chuyển sang trang danh mục khóa học

“Enroll” hoặc “Add to Cart” tại trang danh mục Ấn chọn “My

Cart” và click “View Detail”

Chuyển trang trang thanh toán [Exception 3]

6 Người dùng bấm vào nút “Pay by Account Balance” hoặc

Thông báo thanh toán thành công [Exception 4] [Exception 5] [Exception 6]

3 Load sai trang Không load đúng được bài học chi tiết khóa học đó

4 Mạng yếu Không load được trang thanh toán

5 Số dư tài khoản không đủ Hiện thông báo (alert) cho người dùng

6 “Pay by Account Balance” với người dung phân quyền học viên

Hiện thông báo (alert) cho người dùng

Hình 3.9 Sơ đồ use case quản lý khóa học

Bảng 3.12: Đặc tả Usecase Quản lý khóa học

Use case name Quản lý khóa học

● Người dùng đã đăng nhập với quyền giảng viên

● Use case này cho phép giảng viên quản lý khóa học

● Giảng viên có thể tạo, chỉnh sửa, xóa khóa học; quản lý bộ câu hỏi (Questionpool) và bộ đề kiểm tra năng lực (Exam)

● Người dùng bấm nút “Publish”

● Người dùng đã đăng nhập vào hệ thống với quyền giảng viên

● Thành công: Thay đổi và cập nhật nội dung khóa học theo mong muốn người dùng

2 Người dùng nhấn nút “Publish

Course” hoặc “Edit Course” tại trang quản lý khóa học đã xuất bản của giảng viên

Hệ thống chuyển sang màn hình Quản lý khóa học [Exception 1]

3 Người dùng thực hiện thao tác mong muốn

Chuyển sang trang khóa học [Exception 2]

Bảng 3.13: Đặc tả Usecase Tạo nội dung bài học

Use case name Tạo nội dung bài học

● Use case này cho phép giảng viên tạo khóa học với bài học bên trong

● Giảng viên có thể tạo được khóa học với bài học bên trong

● Người dùng bấm nút “Publish Course”

● Thành công: Tạo được khóa học thành công

1 Giảng viên mở ứng dụng lên Hệ thống hiển thị trang chủ

Course” hoặc “Edit Course” tại trang quản lý khóa học đã xuất bản của giảng viên

Hệ thống chuyển sang màn hình Create Course

Hiển thị form Tạo khóa học [Exception 2]

4 Người dùng nhập vào thông tin theo yêu cầu

3 Người dùng bấm vào nút “Add

Hiển thị dialog Tạo bài học [Exception 3]

2 Lỗi hệ thống Không hiện được form

3 Lỗi hệ thống Không hiện được dialog

Bảng 3.14: Đặc tả Usecase Tạo bài Quiz

Use case name Tạo Quiz

● Use case này cho phép giảng viên tạo khóa học với Quiz bên trong

● Giảng viên có thể tạo được khóa học với Quiz bên trong

● Người dùng bấm nút “Publish Course”

● Thành công: Tạo được Quiz thành công

1 Giảng viên mở ứng dụng lên Hệ thống hiển thị trang chủ

Hệ thống chuyển sang màn hình Create Course

Hiển thị dialog Tạo bộ câu hỏi [Exception 2]

Hiển thị dialog Tạo bài kiểm tra [Exception 3]

2 Lỗi hệ thống Không tạo được Question Pool

3 Lỗi hệ thống Không tạo được Exam

Hình 3.10 Sơ đồ use case bình luận

Bảng 3.15: Đặc tả Usecase Bình luận

Use case name Bình luận

● Người dùng người dùng đã đăng nhập

● Use case này cho phép người dùng bình luận

● Người dùng có thể tạo được bình luận

● Người dùng nhập nội dung bình luận

● Người dùng bấm nút “Leave Your Comment”

● Người dùng chưa đăng nhập hoặc đã đăng nhập

● Thành công: Bình luận thành công

1 Người dùng mở ứng dụng lên Hệ thống hiển thị trang chủ với thanh bình luận ở dưới cùng của trang

2 Người dùng nhập nội dung bình luận

3 Người dùng bấm vào nút “Leave

Hiển thị bình luận vừa nhập [Exception 1]

1 Lỗi mạng Không hiện được bình luận vừa nhập

Bảng 3.16: Đậc tả Usecase Chỉnh sửa nội dung bình luận

Use case name Chỉnh sửa nội dung bình luận

● Use case này cho phép người dùng chỉnh sửa bình luận

● Người dùng có thể chỉnh sửa được bình luận

● Thành công: chỉnh sửa bình luận thành công

2 Người dùng chọn bình luận muốn chỉnh sửa

3 Người dùng bấm vào nút Cho phép chỉnh sửa nội dung bình luận đã nhập [Exception 1]

4 Người dùng nhập vào nội dung muốn chỉnh sửa

5 Người dùng bấm vào nút “Edit

Hiển thị lại bình luận vừa chỉnh sửa [Exception 2]

1 Lỗi mạng Không hiện chỉnh sửa bình luận

2 Lỗi mạng Không hiện được bình luận vừa chỉnh sửa

Bảng 3.17: Đặc tả Usecase Xóa bình luận

Use case name Xóa bình luận

● Người dùng chưa đăng nhập hoặc người dùng đã đăng nhập

● Use case này cho phép người dùng xóa bình luận

● Người dùng có thể xóa được bình luận

● Thành công: xóa bình luận thành công

2 Người dùng chọn bình luận muốn xóa

3 Người dùng bấm vào nút Hiển thị lại tất cả bình luận khác

1 Lỗi mạng Load lại vẫn hiện bình luận đã xóa

● Khi xóa bình luận các bình luận trả lời đi kèm (Reply) cũng sẽ bị xóa khỏi hệ thống

Bảng 3.18: Đặc tả Usecase Trở thành giảng viên

Use case name Trở thành giảng viên

● Người dùng đã đăng nhập với quyền học viên

● Use case này cho phép người dùng đăng ký trở thành giảng viên trên hệ thống

● Người dùng có thể đăng ký tài khoản trở thành tài khoản giảng viên

● Người dùng bấm nút “Up to Instructor”

● Thành công: cập nhận tài khoản trở thành tài khoản giảng viên thành công

1 Người dùng mở ứng dụng lên Hệ thống hiển thị trang chủ với nút

Up to Instructor trên thành nav

2 Người dùng bấm vào nút “Up to

Hệ thống chuyển sang trang đăng ký giảng viên

3 Người dùng bấm vào nút “Get

Hệ thống sẽ cập nhật tài khoản và chuyển sang trang chủ của giảng viên [Exception 2] [Exception 3]

1 Lỗi mạng Không chuyển được sang trang trở thành giảng viên

2 Lỗi mạng Không chuyển được sang trang chủ với quyền giảng viên

3 Cập nhật tài khoản thất bại Hệ thống sẽ cảnh báo (alert) người dùng

Bảng 3.19: Đặc tả Usecase Tạo phòng học trực tuyến

Use case name Tạo phòng học trực tuyến

● Use case này cho phép giảng viên tạo phòng học trực tuyến

● Giảng viên có thể tạo được phòng họp mặt

● Giảng viên bấm nút “Create meeting”

● Thành công: tạo phòng học trực tuyến thành công

1 Giảng viên mở ứng dụng lên Hệ thống hiển thị trang chủ với nút

“Create Meet” trên thành nav

Hệ thống chuyển sang trang tạo phòng học trực tuyến

1 Lỗi mạng Không chuyển được sang trang tạo phòng học trực tuyến hoặc không load được meeting room

Bảng 3.20: Đặc tả Usecase Thực hiện Quiz

Use case name Thực hiện Quiz

● Use case này cho phép người dùng thực hiện Quiz

● User hoàn thành được Quiz

● User click chọn vào tại bài thi muốn thực hiện

● Thành công: chuyển đến trang thi và hoàn thành được đề thi ôn tập

1 Người dùng bấm vào khóa học đã mua

Hệ thống hiển thị khóa học tương ứng

2 Người dùng bấm vào nút tại bài thi muốn thực hiện

Hệ thống chuyển sang trang thi [Exception 1]

3 Người dùng bấm “Summit” để hoàn thành

Hệ thống chuyển qua trang kết quả [Exception 2] [Exception 3]

1 Lỗi mạng Không chuyển được sang thi

2 Lỗi chuyển trang Không chuyển qua được trang kết quả

3 Lỗi cập nhật kết quả thi Hệ thống sẽ hiển thị cảnh báo (alert) cho người dùng

Bảng 3.21: Đặc tả Usecase Xem lịch sử thực hiện Quiz

Use case name Xem lịch sử thực hiện Quiz

● Use case này cho phép người dùng xem lịch sử thực hiện Quiz

● User xem được lịch sử thực hiện Quiz

● User bấm vào nút tại Quiz tương ứng

● Thành công: Xem được lịch sử thực hiện Quiz

Hệ thống hiển thị khóa học tương ứng

2 Người dùng bấm vào nút Hệ thống chuyển sang trang lịch sử thi [Exception 1]

1 Lỗi mạng Không cập nhật được lịch sử thi

Bảng 3.22: Đặc tả Usecase Đánh giá khóa học

Use case name Đánh giá khóa học

● Use case này cho phép người dùng đánh giá khóa học

● User đánh giá được khóa học

● User bấm vào nút “Rating Course”

● Người dung đã đăng ký và thanh toán thành công cho khóa học

● Thành công: Đánh giá được khóa học

Hệ thống hiển thị khóa học tương ứng [Exception 1]

2 Người dùng bấm vào đánh giá khóa học

Hệ thống hiển thị popup đánh giá khóa học

1 Lỗi mạng Không chuyển được sang trang chi tiết khóa học

2 Lỗi hiển thị Không hiện được Popup

Bảng 3.23: Đặc tả Usecase Xem thông tin hóa đơn

Use case name Xem thông tin hóa đơn

● Use case này cho phép người dùng xem thông tin hóa đơn

● User xem thông tin hóa đơn

● User bấm vào nút tại trang lịch sử thanh toán

● Thành công: Xem được thông tin hóa đơn

1 Người dùng bấm nút Invoice trên nav

Hệ thống hiển thị thông tin hóa đơn [Exception 1]

2 Người dùng bấm vào Hệ thống hiển thị popup hóa đơn

1 Lỗi mạng Không chuyển được sang trang chi tiết khóa học

2 Lỗi hiển thị Không hiện được Pop up

3.2.3.2 Đặc tả Usecase actor Admin (Web)

Bảng 3.24: Đặc tả Usecase Quản lý số dư giảng viên

Use case name Quản lý số dư giảng viên

● Người dùng đã đăng nhập với quyền quản trị viên

● Use case này cho phép quản trị viên xem được thu nhập của giảng viên

● Quản trị viên có thể xem được thu nhập của giảng viên

● Quản trị viên bấm nhãn trang “Instructor Balance”

● Thành công: Hiện được trang xem thu nhập của giảng viên

1 Quản trị viên mở trang web lên Hệ thống hiển thị trang chủ với nút mở sidebar bên trái

2 Quản trị viên bấm vào nhãn trang “Instructor Balance”

Hệ thống chuyển sang trang quản lý số dư giảng viên [Exception 1] [Exception 2]

1 Lỗi mạng Không chuyển được sang trang quản lý số dư giảng viên

2 Không cập nhật được dữ liệu Bảng số liệu hiển thị No Data

Hình 3.11 Sơ đồ use case quản lý tài khoản hệ thống

Bảng 3.25: Đặc tả Usecase Quản lý tài khoản hệ thống

Use case name Quản lý tài khoản trang web

● Use case này cho phép quản trị viên xem được tất cả tài khoản của trang web

● Quản trị viên có thể xem được tất cả tài khoản của trang web

● Quản trị viên bấm nút “Account”

● Người dùng đã đăng nhập với quyền admin

● Thành công: Hiện được trang xem tất cả tài khoản của trang

1 Quản trị viên mở trang web lên Hệ thống hiển thị trang chủ với nút

Account trên thành nav bên trái

2 User bấm vào nút “Account” Hệ thống chuyển sang trang quản lý tài khoản [Exception 1]

1 Lỗi mạng Không chuyển được sang trang quản lý tài khoản

Bảng 3.26: Đậc tả Usecase Kích hoạt tài khoản bị vô hiệu hóa

Use case name Kích hoạt tài khoản bị vô hiệu hóa

● Use case này cho phép quản trị viên kích hoạt được tài khoản đã vô hiệu hóa

● Quản trị viên kích hoạt được tài khoản đã bị vô hiệu hóa

● Quản trị viên bấm nút

● Người dùng đã đăng nhập với quyền admin

● Thành công: Quản trị viên kích hoạt được tài khoản đã vô hiệu hóa

1 Quản trị viên mở ứng dụng lên Hệ thống hiển thị trang chủ với nút manage course trên thành nav bên trái

2 Quản trị viên bấm vào nút Hệ thống chuyển sang trang quản lý tài khoản [Exception 1]

3 Quản trị viên gạt nút sang phải để kích hoạt lại tài khoản đã vô hiệu hóa

Hệ thống cập nhật lại [Exception 2] [Exception 3]

2 Lỗi mạng Không gạt nút sang phải được

3 Không cập nhật được trạng thái tài khoản

Hệ thống sẽ hiện cảnh báo (alert) người dùng

Bảng 3.27: Đặc tả Uscase Vô hiệu hóa tài khoản đang hoạt đông

Use case name Vô hiệu hóa tài khoản đang hoạt động

● Use case này cho phép quản trị viên vô hiệu hóa được tài khoản đang hoạt động

● Quản trị viên vô hiệu hóa được tài khoản đang hoạt động

● Quản trị viên bấm nút

● Thành công: Quản trị viên vô hiệu hóa được tài khoản đang hoạt động

1 Quản trị viên mở trang web lên Hệ thống hiển thị trang chủ với nút manage course trên thành nav bên trái

2 Quản trị viên bấm vào nút Hệ thống chuyển sang trang quản lý tài khoản [Exception 1]

3 Quản trị viên gạt nút sang trái để vô hiệu hóa tài khoản đang hoạt động

Hệ thống cập nhật lại [Exception 2] [Exception 3]

2 Lỗi mạng Không gạt nút sang trái được

3 Không cập nhật được trạng thái tài khoản

Hệ thống sẽ hiện cảnh báo (alert) người dùng

● Tài khoản bị vô hiệu hóa sẽ không thể đăng nhập và có cảnh báo cho người dùng

3.2.3.3 Đặc tả Usecase actor User (Mobile)

Bảng 3.28: Đặc tả Usecase mobile Đăng ký

Use Case No UCM_01 Use case version 1.0

Use case name Đăng ký

● Use case này cho phép người dùng đăng ký tài khoản

● Người dùng có tài khoản hợp lệ có thể sử dụng trên hệ thống

● Người dùng bấm nút “Sign Up”

● Thành công: Người dùng đăng ký được với hệ thống

1 Người dùng mở ứng dụng lên và nhấn vào nút sign up

Hệ thống hiển thị màn hình “Đăng ký” Hệ thống yêu cầu người dùng nhập vào các thông tin cá nhân, tài khoản, mật khẩu

3 Người dùng nhấn nút “SignUp” Hệ thống chuyển sang màn hình

1 Lỗi mạng Không chuyển về Home

2 Không tạo được tài khoản Hệ thống sẽ hiển thị thông báo (alert) cho người dùng

● Tài khoản: không được để trống

Bảng 3.29: Đặc tả Usecase mobile Đăng nhập

Use case name Đăng nhập

● Use case này cho phép người dùng đăng nhập vào hệ thống

● Người dùng có thể đăng nhập và sử dụng các chức năng

● Người dùng bấm nút “Log in”

● Người dùng chưa đăng nhập vào hệ thống và đã có tài khoản

● Thành công: Người dùng đăng nhập được với hệ thống và sử dụng được các chức năng

1 Người dùng mở ứng dụng lên Hệ thống hiển thị màn hình “Đăng nhập” Hệ thống yêu cầu người dùng nhập vào tài khoản và mật khẩu

3 Người dùng nhấn nút “Sign In” Hệ thống chuyển sang trang chủ

2 Sai thông tin đăng nhập Hệ thống sẽ hiện thị cảnh báo (alert) cho người dùng

Bảng 3.30: Đặc tả Usecase mobile Đăng xuất

Use case name Đăng xuất

● Use case này cho phép người dùng đăng xuất ra khỏi hệ thống

● Người dùng có thể đăng xuất khỏi hệ thống

● Người dùng đã đăng nhập và bấm Sign out ở trang Account

● Thành công: Màn hình chuyển về form đăng nhập

STEP Actor Action System Response

1 Người dùng bấm nút Signout ở trang Account

Hệ thống chuyển từ trang Account sang trang Đăng nhập

1 Lỗi mạng Không chuyển về trang đăng nhập

Bảng 3.31: Đặc tả Usecase mobile Tìm kiếm khóa học

Use case name Tìm kiếm khóa học

● Use case này cho phép người dùng tìm kiếm thông tin khóa học

● Người dùng có thể tìm kiếm được khóa học mong muốn

● Người dùng nhập thông tin cần tìm kiếm

● Thành công: Người dùng tìm kiếm được khóa học mong muốn

1 Người dùng mở ứng dụng lên Hệ thống sẽ hiển thị trang Home có bottom Tab bên dưới

2 Người dùng bấm vào nút Search trong Bottom Tab

Hệ thống chuyển sang trang Search

3 Người dùng nhập nội dung tìm kiếm

Hệ thống từ động tìm kiếm nội dung theo từng ký tự người dùng nhập vào [Exception 1]

1 Nhập nội dung không thể tìm kiếm Không trả về sản phẩm nào

Bảng 3.32: Đặc tả Usecase mobile Xem thông tin khóa học

Use case name Xem thông tin khóa học

● Use case này cho phép người dùng xem thông tin khóa học

● Người dùng có thể xem thông tin tất cả khóa học

● Người dùng đăng nhập thành công

● Thành công: Hiển thị được thông tin tất cả khóa học

1 Người dùng mở ứng dụng lên Hệ thống hiển thị các khóa học trên trang chủ

1 Lỗi API Không hiển thị được khóa học

Bảng 3.33: Đặc tả Usecase mobile Xem thông tin chi tiết khóa học

Use case name Xem chi tiết khóa học

● Use case này cho phép người dùng xem thông tin chi tiết khóa học

● Người dùng có thể xem chi tiết khóa học

● Người dùng bấm vào khóa học

● Thành công: Chuyển được đến màn hình chi tiết của đúng khóa học đó

2 Người dùng bấm vào khóa học Hệ thống chuyển sang màn hình chi tiết khóa học đó [Exception 1]

1 Lỗi API Không hiện được chi tiết khóa học mong muốn

Bảng 3.34: Đặc tả Usecase mobile Xem bài học

Use case name Xem bài học

● Người dùng đã mua khóa học

● Use case này cho phép người dùng xem thông tin chi tiết bài học

● Người dùng có thể xem chi tiết bài học

● Người dùng bấm vào khóa học trong tab MyCourse

● Người dùng đã đăng nhập vào hệ thống và đã mua khóa học đó

● Thành công: Vào được trang bài học chi tiết của đúng khóa học đó

Hệ thống chuyển sang màn hình khóa học đã mua

Hiển thị ra thông tin chi tiết khóa học

4 Người dùng bấm Topic muốn học

Chuyển sang trang chi tiết bài học thuộc topic đó

1 Lỗi mạng Không chuyển sang được trang khóa học đã mua

2 Load sai trang Không load đúng được trang chi tiết bài học đó

Bảng 3.35: Đặc tả Usecase mobile Thanh toán

Use case name Thanh toán

● Use case này cho phép người dùng thanh toán khóa học đã chọn

● Người dùng có thể thanh toán

● Người dùng bấm nút “Buy now”

● Thành công: Vào được trang thanh toán của Paypal

2 Người dùng bấm vào khóa học muốn mua

Hệ thống chuyển sang màn hình chi tiết khóa học

3 Người dùng bấm vào nút “Buy

Chuyển trang trang thanh toán [Exception 2]

1 Lỗi mạng Không chuyển sang được trang chi tiết khóa học

2 Mạng yếu Không load được trang thanh toán

THIẾT KẾ ỨNG DỤNG

CÀI ĐẶT VÀ KIỂM THỬ ỨNG DỤNG

Tiêu đề	Xây Dựng Website Và Ứng Dụng Mobile Dạy Học Trực Tuyến
Trường học	Đại Học Sư Phạm Kỹ Thuật Thành Phố Hồ Chí Minh
Chuyên ngành	Công Nghệ Thông Tin
Thể loại	khóa luận tốt nghiệp
Thành phố	Thành Phố Hồ Chí Minh

Định dạng
Số trang	236
Dung lượng	8,1 MB