(Đồ án tốt nghiệp) Xây dựng website và ứng dụng mobile dạy học trực tuyến

(Đồ án tốt nghiệp) Xây dựng website và ứng dụng mobile dạy học trực tuyến(Đồ án tốt nghiệp) Xây dựng website và ứng dụng mobile dạy học trực tuyến(Đồ án tốt nghiệp) Xây dựng website và ứng dụng mobile dạy học trực tuyến(Đồ án tốt nghiệp) Xây dựng website và ứng dụng mobile dạy học trực tuyến(Đồ án tốt nghiệp) Xây dựng website và ứng dụng mobile dạy học trực tuyến(Đồ án tốt nghiệp) Xây dựng website và ứng dụng mobile dạy học trực tuyến(Đồ án tốt nghiệp) Xây dựng website và ứng dụng mobile dạy học trực tuyến(Đồ án tốt nghiệp) Xây dựng website và ứng dụng mobile dạy học trực tuyến(Đồ án tốt nghiệp) Xây dựng website và ứng dụng mobile dạy học trực tuyến(Đồ án tốt nghiệp) Xây dựng website và ứng dụng mobile dạy học trực tuyến(Đồ án tốt nghiệp) Xây dựng website và ứng dụng mobile dạy học trực tuyến(Đồ án tốt nghiệp) Xây dựng website và ứng dụng mobile dạy học trực tuyến(Đồ án tốt nghiệp) Xây dựng website và ứng dụng mobile dạy học trực tuyến(Đồ án tốt nghiệp) Xây dựng website và ứng dụng mobile dạy học trực tuyến(Đồ án tốt nghiệp) Xây dựng website và ứng dụng mobile dạy học trực tuyến(Đồ án tốt nghiệp) Xây dựng website và ứng dụng mobile dạy học trực tuyến

CƠ SỞ LÝ THUYẾT

Tổng quan về ASP.NET Core

ASP.NET Core là một framework luôn được cập nhật và hỗ trợ của Microsoft, thiết kế nhằm mang lại sự nhanh chóng, linh hoạt và khả năng tương thích cao với nhiều nền tảng khác nhau Với hiệu suất ngày càng được nâng cao, ASP.NET Core phù hợp để phát triển các ứng dụng web dựa trên nền tảng NET Nếu bạn có kinh nghiệm làm việc với MVC hoặc Web API trong vài năm, bạn sẽ dễ dàng nhận thấy những tính năng quen thuộc cũng như các công cụ mới được phát triển để hỗ trợ quá trình phát triển ứng dụng [2].

ASP.NET đã được tin dùng và sử dụng rộng rãi trong nhiều năm bởi đội ngũ kỹ thuật viên trên toàn thế giới như một nền tảng phát triển ứng dụng web hàng đầu Trong su quá trình phát triển, framework này đã trải qua nhiều lần cập nhật, nâng cấp để phù hợp với sự thay đổi của công nghệ, hướng tới việc tối ưu hiệu suất và khả năng mở rộng Gần đây nhất, ASP.NET đã cho ra mắt ASP.NET Core 1.0, phiên bản kế thừa mới nhất mang lại nhiều cải tiến vượt trội về hiệu suất, khả năng cross-platform và dễ dàng tích hợp các công nghệ hiện đại.

● 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ở, được tối ưu hóa cho đám mây, hỗ trợ phát triển các ứng dụng web đa nền tảng như Windows, Linux và Mac Framework này tích hợp các tính năng của MVC và Web API trong một hệ thống duy nhất, giúp phát triển ứng dụng web linh hoạt và hiệu quả hơn.

● 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ểu kiến trúc do Roy Fielding định nghĩa, nhằm thiết kế các ứng dụng mạng phân tán sử dụng giao thức HTTP ở tầng ứng dụng Mục tiêu của REST là cung cấp một mô hình kiến trúc thực sự cho web, giúp phát triển các dịch vụ web hiệu quả, dễ mở rộng và dễ bảo trì.

REST là một tập hợp các hướng dẫn và cấu trúc dùng để chuyển đổi dữ liệu một cách hiệu quả Thường được sử dụng trong phát triển ứng dụng web, REST giúp tối ưu hóa quá trình truyền tải dữ liệu giữa máy chủ và khách hàng Ngoài ra, REST còn có thể ứng dụng vào quản lý dữ liệu phần mềm, mang lại tính linh hoạt và dễ mở rộng cho các hệ thống phần mềm.

An API, or Application Programming Interface, is a method for connecting with libraries and other applications Windows offers numerous APIs to facilitate integration and functionality, while Twitter provides its own web API to enable developers to access and interact with its platform Although they serve different functions and purposes, both APIs are essential for seamless communication between software systems.

RESTful API là các API tuân theo cấu trúc của nguyên tắc REST, một phương pháp thiết kế API chứ không phải là một công nghệ riêng biệt REST hướng dẫn lập trình viên xây dựng các API theo nguyên lý tổ chức rõ ràng, giúp xử lý các yêu cầu API một cách toàn diện và hiệu quả hơn Việc áp dụng REST vào phát triển API đảm bảo sự nhất quán và dễ mở rộng trong quá trình xây dựng hệ thống.

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

Do sự phát triển ngày càng phức tạp của các dịch vụ web lớn, RESTful đã trở thành giải pháp tối ưu để thay thế việc thực hiện triệu gọi từ xa (RPC) qua web, mang lại hiệu quả và linh hoạt hơn trong quá trình phát triển hệ thống.

Các dịch vụ web lớn không dựa vào tài nguyên, URI, liên kết hoặc các tính năng của HTTP như phần lớn các web dựa trên tài nguyên truyền thống Thay vào đó, chúng không định danh bằng địa chỉ, không tận dụng khả năng cache, kết nối không tối ưu và không cần có giao diện đồng nhất Điều này phản ánh rằng các dịch vụ web lớn không nhận ra hoặc không thấy lợi ích từ mô hình hướng tài nguyên của web truyền thống, đồng thời gặp khó khăn trong việc xử lý nhiều khách hàng đồng thời do tính chất thiếu rõ ràng và phù hợp của chúng.

REST là một kiến trúc hướng tài nguyên dành cho hệ thống phân tán như World Wide Web, giúp xây dựng các dịch vụ dễ mở rộng và dễ bảo trì Để thực thi kiến trúc RESTful một cách hiệu quả, cần tuân thủ các quy tắc của ROA (Resource-Oriented Architecture), đảm bảo tối ưu hóa khả năng truy cập và quản lý dữ liệu Trong báo cáo này, chúng tôi giới thiệu các nguyên tắc thiết kế dịch vụ RESTful quan trọng giúp xây dựng hệ thống linh hoạt, an toàn, và dễ tích hợp với các nền tảng khác.

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, tạo điều kiện cho các phần phát triển độc lập thông qua API cơ bản, cho phép thiết kế các dịch vụ REST linh hoạt cho cả web và mobile Tuy nhiên, khi chuẩn hóa các API này, khả năng tối ưu hóa từng kết nối riêng lẻ sẽ bị hạn chế.

Trong kiến trúc phi trạng thái, server và client không lưu giữ trạng thái của nhau, mỗi yêu cầu gửi đi đều chứa đầy đủ thông tin để server có thể nhận diện và xử lý Điều này giúp hệ thống dễ dàng mở rộng, bảo trì và phát triển hơn, vì không cần tốn công quản lý trạng thái của khách hàng Tuy nhiên, phương pháp này cũng có những mặt hạn chế cần được xem xét kỹ lưỡng.

Mô hình Client-Server hoạt động theo nguyên lý tách biệt, giúp đơn giản hóa các thành phần hệ thống, giảm thiểu sự phức tạp trong kết nối và nâng cao hiệu quả điều chỉnh hiệu suất Điều này tạo điều kiện thuận lợi cho việc mở rộng quy mô của máy chủ, tăng khả năng xử lý và đáp ứng nhu cầu ngày càng tăng của người dùng.

Khả năng caching giúp các response được lưu trữ trong bộ nhớ đệm, giảm tải cho server và cung cấp thông tin nhanh hơn cho người dùng Việc sử dụng các phương pháp caching như ETag và Last-Modified là rất hiệu quả trong việc tối ưu hóa hiệu suất và trải nghiệm người dùng trên website.

Phân lớp hệ thống giúp giảm mức độ phức tạp của hệ thống bằng cách tách biệt các thành phần, từ đó dễ dàng mở rộng và bảo trì Mỗi lớp chỉ trao đổi dữ liệu và tương tác với lớp ngay trên và ngay dưới, đảm bảo tính độc lập giữa các lớp và tăng tính linh hoạt của hệ thống Phân lớp hệ thống là một kỹ thuật quan trọng trong thiết kế kiến trúc phần mềm, góp phần nâng cao hiệu quả vận hành và dễ dàng mở rộng trong tương lai.

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) on Microsoft's website, making setup straightforward You can download the latest ASP.NET Core SDK for Windows from https://dotnet.microsoft.com/download Visual Studio Community (free) and Visual Studio Code (free and cross-platform) are accessible via https://visualstudio.microsoft.com/downloads/ Although JetBrains Rider offers a free 30-day trial, it does not have a free version Overall, installing an ASP.NET Core development environment on Windows is simple, and for ease of instruction, all subsequent tutorials will utilize Visual Studio 2019 Community Edition If you prefer using a different IDE, comprehensive free documentation is available online to assist your setup.

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ên dễ dàng trên nhiều hệ điều hành khác nhau Để chạy ứng dụng ASP.NET Core, bạn 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, vì hệ thống sẽ tự động cài đặt Runtime khi cài SDK Bạn có thể tải phiên bản SDK mới nhất từ các đường link chính thức để đảm bảo tính cập nhật và tối ưu cho dự án của mình.

● https://dotnet.microsoft.com/download/dotnet-core/3.0

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

Việc cài đặt NET Core Runtime và SDK trên Windows bằng Visual Studio rất dễ thực hiện Đặc biệt, với NET Core 3.0 năm 2023 hiện tại, yêu cầu sử dụng Visual Studio 2019 (phiên bản 16.3 trở lên) Do đó, người dùng chỉ cần cài đặt Visual Studio 2019 trở lên để phát triển và chạy các ứng dụng NET Core một cách thuận tiện và hiệu quả.

If you do not have Visual Studio or are currently using an older version, it is recommended to install Visual Studio Community 2019 During the installation process, select the "ASP.NET and web development" workload for developing applications with ASP.NET and ASP.NET Core, or choose the ".NET Core cross-platform development" workload for building cross-platform applications on NET Core and ASP.NET Core.

Để chuẩn bị môi trường phát triển ASP.NET Core trên Windows, hãy cập nhật Visual Studio 2019 lên phiên bản mới nhất và sử dụng Visual Studio Installer để chọn Modify, sau đó chọn tab Workloads và tích chọn một trong hai mục phù hợp Việc chọn một trong hai workload này sẽ giúp cài đặt đầy đủ các thành phần cần thiết cho phát triển và chạy ứng dụng ASP.NET Core Khi quá trình cài đặt hoàn tất, bạn đã sẵn sàng bắt đầu phát triển và triển khai dự án của mình Ngoài ra, có thể kiểm tra phiên bản NET đã cài đặt bằng cách chạy lệnh dotnet version trên Command Prompt hoặc PowerShell, đây là cách đơn giản nhất để xác nhận môi trường phát triển ASP.NET Core trên Windows.

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 have one or multiple modules depending on its complexity A module is a block of code that performs one or several specific 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 like a controller in AngularJS 1, managing a specific task with its associated template to display data on the view Components are reusable across the application, capable of rendering their own views and configuring dependency injection Additionally, developers can apply CSS styles directly to the component’s template, enhancing its visual presentation To utilize a component, it must be registered using the @Component decorator, ensuring proper integration within the Angular framework.

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 trong Angular là cách chúng ta mô tả một class component bằng các dữ liệu cụ thể, giúp Angular nhận diện và xử lý component đúng cách Một component vẫn chỉ là một class bình thường cho đến khi chúng ta sử dụng decorator @Component để khai báo metadata, xác định các đặc điểm quan trọng của component Các thông tin metadata cơ bản bao gồm selector, là thẻ HTML tự định nghĩa mà trong đó component có hiệu lực; và template, định nghĩa giao diện người dùng của component Việc khai báo metadata đúng cách giúp tạo ra các component hiệu quả và dễ quản lý trong dự án Angular.

- đâ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 in Angular are blocks of code that perform specific tasks and are essential for implementing application functionality They operate based on Dependency Injection, enabling seamless management and sharing of data, functions, and features across the app Angular services include values, functions, and capabilities that are requested by the application to enhance modularity and maintainability.

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ước 2 trong quá trình xây dựng ứng dụng Angular 10 là cài đặt Angular CLI, bộ công cụ giúp tạo cấu trúc khung sườn cho dự án một cách dễ dàng Bạn có thể cài đặt Angular CLI thông qua lệnh npm install -g @angular/cli và kiểm tra phiên bản đã cài đặt bằng lệnh ng v để đảm bảo quá trình cài đặt thành công.

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ụ mã nguồn mở do Facebook phát triển, giúp lập trình đa nền tảng để tạo ứng dụng trên môi trường native của Android và iOS Nó cho phép sử dụng Javascript để phát triển phần mềm di động, tương tự như React, nhưng thay vì web components, React Native sử dụng các native components để tối ưu hiệu suất Để hiểu rõ về cấu trúc của React Native, lập trình viên cần nắm vững các kiến thức cơ bản 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

● Có một cộng đồng developers hùng hậu

● 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à có thể tái sử dụng, giúp phân chia giao diện người dùng thành các phần nhỏ hơn, dễ quản lý Có thể xem component như một khối xây dựng LEGO nhỏ, giống như cách các viên gạch LEGO hợp thành một cấu trúc lớn hơn Tương tự, một trang web hoặc giao diện người dùng được tạo thành từ nhiều component nhỏ, giúp tối ưu hóa quá trình phát triển và bảo trì hệ thống.

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

Functional components, also known as stateless components, originally could not handle complex tasks such as managing React state or utilizing lifecycle methods However, with the introduction of React Hooks in version 16.8, developers can now use state and other advanced features within functional components, enhancing their capabilities and simplifying code management.

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 không thể thay đổi được khi truyền vào các component trong React Các component nhận props từ component cha và chỉ được phép đọc chứ không được chỉnh sửa giá trị của chúng, giúp đảm bảo tính bất biến của dữ liệu Trong React, dữ liệu thường di chuyển theo chiều từ component cha xuống các component con, hỗ trợ việc tái sử dụng và trừu tượng hóa component dễ dàng hơn Sử dụng props giúp tạo ra các component linh hoạt, có thể sử dụng ở nhiều chỗ khác nhau trong ứng dụng của bạn.

State trong React khác biệt với props, vì nó là dữ liệu nội bộ của một Component còn props là dữ liệu truyền từ bên ngoài vào Bạn hoàn toàn có thể thay đổi state, vì nó là dữ liệu mutable, nhưng cần nhớ không nên trực tiếp chỉnh sửa biến this.state mà phải dùng hàm setState để cập nhật, nhằm kích hoạt quá trình render lại component và các component con Tuy nhiên, setState hoạt động bất đồng bộ, do đó, sau khi gọi setState, không thể đọc ngay giá trị mới của state vì cập nhật chưa hoàn tất.

Hooks là các hàm giúp bạn "möc vào" trạng thái của React và các tính năng vòng đời từ các hàm component Chúng cho phép sử dụng React mà không cần phải dùng đến class, mang lại sự linh hoạt và đơn giản trong việc xây dựng ứng dụng Hooks không hoạt động trong các class components, thay vào đó, chúng giúp các nhà phát triển tận dụng các tính năng của React một cách dễ dàng và hiệu quả hơn.

The Effect Hook, useEffect, adds the ability to perform side effects in functional components, replacing the traditional lifecycle methods like componentDidMount, componentDidUpdate, and componentWillUnmount found in React classes It consolidates these lifecycle functionalities into a single, unified API, simplifying the management of side effects in React functional components.

React Native allows you to define components as either classes or functions, providing flexibility in development Class components offer advanced features, requiring you to extend the React Component class and implement the mandatory render() method to display content on the screen Each component has lifecycle methods that can be overridden to control how and when code runs during its lifecycle, which is generally divided into three main stages: mounting, updating, and unmounting Understanding these lifecycle methods is essential for managing component behavior and rendering in React Native apps.

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

Trong thời đại ngày nay, sự ra đời của các website hướng dẫn tự học và thi thử Toeic cùng các clip hướng dẫn của YouTuber đã giúp người học dễ dàng tiếp cận kiến thức mọi lúc, mọi nơi Các trang web đã không ngừng đổi mới về chức năng và giao diện để phù hợp với nhu cầu học tập linh hoạt của người dùng Để cạnh tranh hiệu quả, các website liên quan đến sách và tài liệu học Toeic cần có giao diện đẹp mắt, dễ thao tác và tích hợp nhiều chức năng đa dạng, tiện lợi, giúp người dùng trải nghiệm học tập hiệu quả hơn.

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 gây khó chịu do quá nhiều chữ, khiến người dùng dễ bị quá tải thông tin Trong khi đó, trang Coursera lại thiếu nội dung và sử dụng quá nhiều khoảng trắng, gây rối mắt và khó theo dõi danh sách khóa học Ngoài ra, trang chi tiết khóa học của SkillShare chưa được tối ưu, cần cải thiện để nâng cao trải nghiệm người dùng.

○ Giá khóa học trang Udemy khá mắc so với mặt bằng chung còn bên Coursera, SkillShare có rất nhiều khóa học miễn phí

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

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

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 mở ứng dụng và hệ thống hiển thị màn hình đăng ký, yêu cầu nhập thông tin cá nhân cơ bản Sau đó, hệ thống chuyển sang yêu cầu người dùng nhập tên tài khoản và mật khẩu để hoàn tất quá trình đăng ký.

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à hệ thống hiển thị màn hình đăng nhập yêu cầu nhập thông tin cá nhân, trong đó cần điền tài khoản và mật khẩu để đăng nhập vào hệ thống một cách dễ dàng và nhanh chóng.

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
Tác giả	Trần Ngọc Hùng, Châu Huỳnh Phước Toàn
Người hướng dẫn	TS. Lê Văn Vinh
Trường học	Trường Đại học Sư phạm Kỹ thuật TP Hồ Chí Minh
Chuyên ngành	Công Nghệ Thông Tin
Thể loại	Khóa luận tốt nghiệp
Năm xuất bản	2021
Thành phố	TP Hồ Chí Minh

Định dạng
Số trang	239
Dung lượng	9,44 MB