Đồ án tốt nghiệp: Xây dựng website học lập trình bằng spring boot docker, nodejs, reactjs

Đồ án tốt nghiệp: Xây dựng website học lập trình bằng spring boot docker, nodejs, reactjsĐồ án tốt nghiệp: Xây dựng website học lập trình bằng spring boot docker, nodejs, reactjsĐồ án tốt nghiệp: Xây dựng website học lập trình bằng spring boot docker, nodejs, reactjsĐồ án tốt nghiệp: Xây dựng website học lập trình bằng spring boot docker, nodejs, reactjsĐồ án tốt nghiệp: Xây dựng website học lập trình bằng spring boot docker, nodejs, reactjsĐồ án tốt nghiệp: Xây dựng website học lập trình bằng spring boot docker, nodejs, reactjsĐồ án tốt nghiệp: Xây dựng website học lập trình bằng spring boot docker, nodejs, reactjsĐồ án tốt nghiệp: Xây dựng website học lập trình bằng spring boot docker, nodejs, reactjsĐồ án tốt nghiệp: Xây dựng website học lập trình bằng spring boot docker, nodejs, reactjsĐồ án tốt nghiệp: Xây dựng website học lập trình bằng spring boot docker, nodejs, reactjsĐồ án tốt nghiệp: Xây dựng website học lập trình bằng spring boot docker, nodejs, reactjsĐồ án tốt nghiệp: Xây dựng website học lập trình bằng spring boot docker, nodejs, reactjsĐồ án tốt nghiệp: Xây dựng website học lập trình bằng spring boot docker, nodejs, reactjsĐồ án tốt nghiệp: Xây dựng website học lập trình bằng spring boot docker, nodejs, reactjsĐồ án tốt nghiệp: Xây dựng website học lập trình bằng spring boot docker, nodejs, reactjsĐồ án tốt nghiệp: Xây dựng website học lập trình bằng spring boot docker, nodejs, reactjsĐồ án tốt nghiệp: Xây dựng website học lập trình bằng spring boot docker, nodejs, reactjsĐồ án tốt nghiệp: Xây dựng website học lập trình bằng spring boot docker, nodejs, reactjsĐồ án tốt nghiệp: Xây dựng website học lập trình bằng spring boot docker, nodejs, reactjsĐồ án tốt nghiệp: Xây dựng website học lập trình bằng spring boot docker, nodejs, reactjs

TÍNH CẤP THIẾT CỦA ĐỀ TÀI

Việc tiếp thu kiến thức và liên tục trau dồi kỹ năng mới để bắt kịp xu hướng hiện đại là điều cần thiết cho quá trình phát triển bền vững của mỗi người Trong ngành công nghiệp công nghệ thông tin, chúng ta phải chủ động học hỏi các công nghệ mới, công cụ mới và nhiều kiến thức khác nhằm áp dụng hiệu quả vào các dự án thực tế Đây là yếu tố quan trọng để duy trì sự cạnh tranh và nâng cao năng lực chuyên môn trong thời đại công nghệ số phát triển nhanh chóng.

Học hỏi kiến thức mới gặp nhiều khó khăn vì không phải ai cũng có điều kiện đến trường do nhiều lý do khác nhau Một số bạn không có thời gian sau giờ làm việc mệt mỏi để học tập tại lớp, trong khi đó, các bạn có hoàn cảnh gia đình khó khăn lại xem việc đến trường để tiếp cận kiến thức công nghệ là điều xa vời.

Chúng tôi hiểu rằng việc chuyển đổi từ hoạt động offline sang online đang diễn ra mạnh mẽ trên toàn cầu Nhằm đáp ứng xu hướng đó, nhóm chúng tôi đã xây dựng một website dành cho cộng đồng học lập trình và chia sẻ kinh nghiệm Mục đích của nền tảng này là giúp mọi người có thể nâng cao kỹ năng lập trình một cách dễ dàng và hiệu quả, tạo bước đệm vững chắc để áp dụng vào công việc, tiết kiệm chi phí và tối ưu hóa hiệu suất Chúng tôi kỳ vọng cùng nhau đóng góp để đưa đất nước trở thành một trong những quốc gia dẫn đầu về công nghệ thông tin và các ngành công nghiệp khác.

MỤC TIÊU CỦA ĐỀ TÀI

 Xây dựng website cho người dùng có thể:

 Là nơi ôn tập và học lý thuyết

 Luyện các bài tập thực hành

 Luyện giải các thuật toán, các bài tập phỏng vấn

 Tạo một forum cho người dùng có thể trao đổi kiến thức cùng nhau.

CÁCH TIẾP CẬN VÀ PHƯƠNG PHÁP NGHIÊN CỨU

Đối tượng nghiên cứu

 Những người có nhu học các ngôn ngữ mới

 Người đã và đang đi làm.

Phạm vi nghiên cứu

 Tìm hiểu các công nghệ sau:

 Tìm hiểu cách xây dựng thiết kế một hệ thống compiler code

 Tìm hiểu cách thiết kế UI/UX một cách rõ ràng.

Phương pháp nghiên cứu

Trong quá trình thực hiện dự án, phương pháp tổng hợp lý thuyết giúp nghiên cứu và tìm hiểu các tài liệu liên quan để áp dụng các công nghệ phù hợp Phương pháp chuyên gia được sử dụng để tham khảo ý kiến của thầy hướng dẫn cùng các cộng sự có kinh nghiệm, nhằm nâng cao tính chính xác và khoa học của đề tài Ngoài ra, phương pháp mô hình hóa giúp mô phỏng quá trình thiết kế và cài đặt website, từ bước xây dựng đến khi đạt được kết quả cuối cùng của sản phẩm.

4 KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC

 Xây dựng một hệ thống compiler code cho nhiều ngôn ngữ bao gồm các thành phần:

 Container docker cho từng ngôn ngữ

 Xây dựng một hệ thống client bằng nodejs sử dụng hệ thống compile code để xây dựng một trang web cho người dùng có thể:

 Học lý thuyết và thực hành

 Có thể thảo luận đóng góp xây dựng thông qua forum riêng

5 Ý NGHĨA KHOA HỌC THỰC TIỄN Đề tài hướng đến khả năng tiếp thu, nâng cao kỹ năng lập trình, nghiên cứu công nghệ mới và trên hết là đáp ứng nhu cầu ôn tập và học tập cho các đợt phòng vấn của doanh nghiệp.

KẾT CẤU CỦA ĐỀ TÀI

Chương 1: Khảo sát hiện trạng và xác định yêu cầu

Chương 2: Mô hình hóa yêu cầu và thiết kế cơ sở dữ liệu

Chương 3: Thiết kế giao diện và xử lý

Chương 5: Kiểm thử phần mềm

CƠ SỞ LÝ THUYẾT

TỔNG QUAN VỀ DOCKER

Docker is a platform designed for developers and sysadmins to develop, deploy, and run applications using containers It enables the creation of isolated and independent environments, known as containers, for developing and managing applications Deploying an application is straightforward—simply run the Docker container on any server, and your application will start immediately This flexibility makes Docker essential for efficient application deployment and management.

 Khả năng start và stop chỉ vài giây, nhanh hơn nhiều so với sử dụng máy ảo

 Khởi chạy container trên các hệ thống khác nhau mà bạn muốn

 Việc xây dựng và loại bỏ nhanh và tốn ít chi phí hơn việc sử dụng máy ảo

 Dễ dàng thiết lập môi trường làm việc Chỉ cần 1 file config và config 1 lần duy nhất và không bao giờ phải cài đặt lại các dependencies

Nó sẽ tách biệt môi trường máy ảo và máy thật của bạn để đảm bảo quá trình chạy và khởi tạo ứng dụng không ảnh hưởng đến hệ thống máy thật khi có sự cố xảy ra Việc này giúp tăng cường an toàn và ổn định cho thiết bị của bạn trong quá trình phát triển và thử nghiệm phần mềm.

 Việc cài đặt docker đơn giản cho các hệ điều hành khác nhau

Bạn có thể dễ dàng cài đặt docker cho từng môi trường riêng biệt theo tài liệu riêng biệt tại đây

1.4 Một số khái niệm quan trọng

Docker bao gồm các thành phần chính:

Docker Engine: dùng để tạo ra Docker image và chạy Docker container

Docker Hub: dịch vụ lưu trữ giúp chứa các Docker image

Một số khái niệm khác:

Docker Machine: Tạo ra các Docker engine trên máy chủ

Docker Compose: chạy ứng dụng bằng cách định nghĩa cấu hình các Docker container thông qua tệp cấu hình

Docker image: một dạng tập hợp các tệp của ứng dụng, được tạo ra bởi Docker engine

Nội dung của các Docker image sẽ không bị thay đổi khi di chuyển Docker image được dùng để chạy các Docker container

Docker Container: một dạng runtime của các Docker image, dùng để làm môi trường chạy ứng dụng

Dockerfile: là một tập tin dạng text chứa một tập các câu lệnh để tạo mới một Image trong Docker Một số lệnh trong dockerfile:

Trong Dockerfile, lệnh FROM : là yêu cầu bắt buộc phải có để xác định base image mà bạn sẽ sử dụng để xây dựng image mới Lệnh này giúp khai báo rõ ràng nền tảng hệ điều hành hoặc môi trường mà Docker container của bạn sẽ dựa vào Việc sử dụng chính xác lệnh FROM đảm bảo quá trình build Docker diễn ra suôn sẻ và phù hợp với yêu cầu của dự án.

MAINTAINER : câu lệnh này dùng để khai báo trên tác giả tạo ra

Image, chúng ta có thể khai báo nó hoặc không

RUN : chúng ta sử dụng lệnh này để chạy một command cho việc cài đặt các công cụ cần thiết cho Image của chúng ta

CMD : trong một Dockerfile thì chúng ta chỉ có duy nhất một câu lệnh

CMD, câu lệnh này dùng để xác định quyền thực thi của các câu lệnh khi chúng ta tạo mới Image

ADD : câu lệnh này dùng để copy một tập tin local hoặc remote nào đó

(khai báo bằng ) vào một vị trí nào đó trên Container (khai báo bằng dest)

ENV : định nghĩa biến môi trường trong Container

ENTRYPOINT : định nghĩa những command mặc định, cái mà sẽ được chạy khi container running

VOLUME : dùng để truy cập hoặc liên kết một thư mục nào đó trong

 Liệt kê danh sách image/container:

- $ docker image/container rm

 Xóa tất cả image hiện có:

- $ docker image rm $(docker images –a –q)

 Danh sách tất container hiện có:

 Dừng một container cụ thể:

 Chạy container từ image và thay đổi tên container:

- $ docker run –name

 Xóa tất cả container hiện có:

 Hiển thị log một container:

 Xây một image từ container:

 Tạo một container chạy ngầm:

 Tải một image trên docker hub:

TỔNG QUAN VỀ MONGODB VÀ NOSQL

NoSQL là 1 dạng CSDL mã nguồn mở và được viết tắt bởi: None-Relational SQL hay có nơi thường gọi là Not-Only SQL

NoSQL được phát triển trên Javascript Framework với kiểu dữ liệu là JSON và dạng dữ liệu theo kiểu key và value

NoSQL ra đời như là phản ứng trước những hạn chế của mô hình dữ liệu quan hệ RDBMS, đặc biệt về tốc độ xử lý, khả năng mở rộng và tính năng linh hoạt Nó được thiết kế để khắc phục các điểm yếu của hệ quản trị cơ sở dữ liệu quan hệ, phù hợp với nhu cầu phát triển ứng dụng hiện đại yêu cầu khả năng mở rộng nhanh và xử lý lượng dữ liệu lớn Nhờ đó, NoSQL trở thành giải pháp tối ưu giúp các doanh nghiệp nâng cao hiệu suất và mở rộng quy mô hệ thống dữ liệu của mình một cách hiệu quả.

Với NoSQL bạn có thể mở rộng dữ liệu mà không lo tới những việc như tạo khóa ngoại, khóa chính, kiểm tra ràng buộc.v.v

NoSQL bỏ qua tính toàn vẹn của dữ liệu và transaction để đổi lấy hiệu suất nhanh và khả năng mở rộng

NoSQL được sử dụng ở rất nhiều công ty, tập đoàn lớn, ví dụ như FaceBook sử dụng Cassandra do FaceBook phát triển, Google phát triển và sử dụng BigTable, …

MongoDB là một hệ quản trị cơ sở dữ liệu mã nguồn mở, là CSDL thuộc NoSql và được hàng triệu người sử dụng

MongoDB là một cơ sở dữ liệu hướng tài liệu, trong đó dữ liệu được lưu trữ dưới dạng các document kiểu JSON, thay vì dạng bảng như trong các hệ quản trị cơ sở dữ liệu quan hệ Nhờ cấu trúc này, truy vấn dữ liệu trong MongoDB trở nên cực kỳ nhanh và hiệu quả.

Trong các cơ sở dữ liệu quan hệ như MySQL hay SQL Server, khái niệm chính là bảng để tổ chức lưu trữ dữ liệu Tuy nhiên, với MongoDB – một hệ quản trị cơ sở dữ liệu NoSQL, chúng ta sẽ sử dụng khái niệm là collection thay thế cho bảng Collection trong MongoDB đóng vai trò tương tự như bảng trong cơ sở dữ liệu quan hệ, giúp tổ chức và quản lý dữ liệu một cách hiệu quả và linh hoạt hơn.

So với RDBMS thì trong MongoDB collection ứng với table, còn document sẽ ứng với row, MongoDB sẽ dùng các document thay cho row trong RDBMS

Các collection trong MongoDB được cấu trúc rất linh hoạt, cho phép các dữ liệu lưu trữ không cần tuân theo một cấu trúc nhất định

Thông tin liên quan được lưu trữ cùng nhau để truy cập truy vấn nhanh thông qua ngôn ngữ truy vấn MongoDB

MongoDB lưu trữ dữ liệu dưới dạng Document JSON, mỗi collection có kích thước và loại document khác nhau, mang lại tính linh hoạt cao trong việc quản lý dữ liệu Bạn có thể dễ dàng thêm, mở rộng hoặc chỉnh sửa dữ liệu mà không gặp hạn chế về cấu trúc, nhờ vào khả năng linh hoạt trong việc insert dữ liệu tùy ý Điều này giúp tối ưu hóa hiệu suất và đáp ứng đa dạng yêu cầu của các dự án phần mềm hiện đại.

Dữ liệu trong MongoDB không chịu các ràng buộc lẫn nhau và không sử dụng các phép join như trong hệ quản trị cơ sở dữ liệu quan hệ (RDBMS), giúp quá trình insert, xóa hoặc cập nhật thêm phần nhanh chóng và linh hoạt Nhờ đó, MongoDB giảm thiểu thời gian kiểm tra các ràng buộc dữ liệu, tối ưu hiệu suất hoạt động so với các hệ thống RDBMS truyền thống.

MongoDB dễ mở rộng theo chiều ngang nhờ khả năng mở rộng linh hoạt qua việc thêm các node vào cluster, giúp hệ thống tăng cường khả năng xử lý dữ liệu Cluster trong MongoDB là tập hợp các node chứa dữ liệu, giao tiếp với nhau để đảm bảo tính liên tục và hiệu quả Khi cần mở rộng hệ thống, chỉ cần bổ sung một node mới vào cluster mà không làm gián đoạn hoạt động, từ đó nâng cao khả năng mở rộng và hiệu suất của cơ sở dữ liệu.

 Trường dữ liệu “_id” luôn được tự động đánh index (chỉ mục) để tốc độ truy vấn thông tin đạt hiệu suất cao nhất

Khi có một truy vấn dữ liệu, hệ thống sẽ lưu trữ bản ghi đó vào bộ nhớ RAM để tăng tốc quá trình truy xuất dữ liệu trong các lượt truy cập sau, giúp giảm thiểu thời gian chờ đợi và tối ưu hiệu suất hoạt động của hệ thống.

MongoDB nổi bật với hiệu năng cao, tốc độ truy vấn như tìm kiếm, cập nhật, chèn, xóa nhanh hơn hẳn so với các hệ quản trị cơ sở dữ liệu quan hệ (RDBMS) Đặc biệt, khi xử lý lượng dữ liệu lớn, thử nghiệm cho thấy tốc độ chèn dữ liệu (insert) của MongoDB có thể nhanh hơn gấp 100 lần so với MySQL, giúp tối ưu hiệu suất và tiết kiệm thời gian vận hành hệ thống.

TỔNG QUAN VỀ SPRING FRAMEWORD

Spring Framework is the most popular development framework for Java Enterprise applications, serving as an open-source Java platform that provides a lightweight solution for enterprise development It enables developers to create high-performance, easily testable, and reusable code, making it an essential tool for efficient Java application development.

3.2 Lợi ích của sử dụng spring framework

 Spring cho phép các nhà phát triển tạo các ứng dụng cấp Enterprise sử dụng các POJO

 Spring được tổ chức theo kiểu mô đun

 Spring sử dụng một số công nghệ hiện có như ORM Framework, logging framworks, JEE, JDK timers và các công nghệ view khác

 Dễ dàng kiểm thử một chương trình viết bằng spring

Spring Web Framework là một Web MVC framework với thiết kế tối ưu, là sự lựa chọn hàng đầu để thay thế các công nghệ cũ như Structs và các giải pháp kém phổ biến khác.

 Spring cung cấp một số API thuận tiện để dịch các ngoại lệ cụ thể ( ném bởi JDBC, Hibernate, hoặc JDO chẳng hạn )

IoC container có trọng lượng nhẹ, giúp việc triển khai và vận hành các ứng dụng trở nên hiệu quả hơn trên các máy tính có bộ nhớ và tài nguyên CPU hạn chế.

 Spring cung cấp một bộ chứa giao diện quản lý các transaction nhất quán có thể mở rộng (Ví dụ như sử dụng một cơ sỏ dữ liệu)

3.3 Các dự án của spring

Spring MVC được thiết kế dành cho việc xây dựng các ứng dụng nền tảng web

Cung cấp các cơ chế xác thực và phân quyền cho ứng dụng của bạn

Spring Boot là một phần quan trọng của hệ sinh thái Spring Framework, giúp phát triển ứng dụng web một cách nhanh chóng và tối ưu Với Spring Boot, bạn có thể xây dựng các ứng dụng web có cấu hình tối thiểu, tiết kiệm thời gian và công sức lập trình Đây là giải pháp lý tưởng để tạo ra các dự án Spring nhanh chóng và hiệu quả, phù hợp với xu hướng phát triển phần mềm hiện đại.

Dự án này giúp chúng ta dễ dàng tạo các lịch trình và tiến trình cho các công việc xử lý theo mẻ

Dự án sẽ kết nối ứng dụng của bạn với các API bên thứ ba của FB, Twitter, Linkedlin…

- Ngoài ra spring framework còn có rất nhiều các dự án khác như là:

3.4 Hướng dẫn cài đặt spring vào dự án java Đối với mỗi dự án cụ thể thì có một cách config nhất định vì thế bạn có thể tham khảo tại đây để biết rõ hơn về cách sử dụng cụ thể.

TỔNG QUAN VỀ REACTJS

React là thư viện JavaScript hàng đầu để xây dựng giao diện người dùng (UI), mang lại hiệu suất phản hồi vượt trội cho trải nghiệm người dùng Nhờ vào phương pháp rendering mới, React tối ưu hóa quá trình cập nhật giao diện, giúp trang web phản hồi nhanh chóng và mượt mà Điều này khiến React trở thành sự lựa chọn phổ biến cho các nhà phát triển web hiện nay.

React là thư viện mạnh mẽ không chỉ hoạt động trên phía client mà còn có khả năng render phía server, giúp tối ưu hiệu suất và khả năng mở rộng của ứng dụng Nhờ vào cơ chế so sánh sự thay đổi giữa các lần render, React cập nhật những thay đổi nhỏ nhất trên DOM, từ đó tăng tốc độ phản hồi và trải nghiệm người dùng Điều này làm cho React trở thành lựa chọn hàng đầu cho các dự án web hiện đại, kết hợp giữa khả năng tương tác linh hoạt và tối ưu hóa hiệu quả render.

4.2 Các khái niệm trong Reactjs

Công nghệ DOM ảo (Virtual DOM) trong React JS giúp tối ưu hóa hiệu năng của ứng dụng bằng cách giảm thiểu việc tái tạo toàn bộ DOM khi có sự thay đổi Khi dữ liệu thay đổi, Virtual DOM tính toán sự chênh lệch so với DOM thật và chỉ cập nhật những phần cần thiết, từ đó góp phần nâng cao tốc độ xử lý và trải nghiệm người dùng Virtual DOM là một đối tượng JavaScript chứa thông tin đầy đủ để xây dựng một DOM, giúp việc re-render trở nên hiệu quả hơn và giảm thiểu tác động đến hiệu suất của ứng dụng.

JSX là một dạng ngôn ngữ cho phép viết mã HTML trong Javascript, giúp tối ưu hóa trong quá trình biên dịch sang JavaScript, từ đó thực thi nhanh hơn Với đặc điểm là ngôn ngữ kiểu tĩnh (statically-typed), JSX giúp phát hiện lỗi sớm hơn trong quá trình biên dịch, tăng tính an toàn cho mã Điều này làm cho mã JSX an toàn, nhanh và đáng tin cậy hơn so với viết trực tiếp bằng Javascript.

11 tính năng gỡ lỗi khi biên dịch rất tốt, giúp quá trình phát triển trở nên dễ dàng hơn JSX được kế thừa từ JavaScript, cho phép các lập trình viên JavaScript dễ dàng sử dụng và tích hợp vào dự án của mình Điều này làm cho việc xây dựng ứng dụng trở nên thuận tiện, nhanh chóng và hiệu quả hơn (tham khảo tại https://jsx.github.io/).

React được xây dựng dựa trên các component thay vì sử dụng template như các framework khác, giúp phát triển các trang web linh hoạt và tái sử dụng dễ dàng Mỗi component trong React có thể chứa các thành phần con, cho phép xây dựng cấu trúc phức tạp hơn và dễ quản lý Các trạng thái hoặc thuộc tính của component có thể thay đổi, và React sẽ tự động cập nhật giao diện dựa trên những thay đổi này, giúp tối ưu hóa hiệu suất và trải nghiệm người dùng React giúp bảo trì mã nguồn hiệu quả, đặc biệt khi làm việc với các dự án lớn, nhờ vào mô hình component rõ ràng và khả năng tái sử dụng cao Một component đơn giản trong React chỉ cần có method render để hiển thị nội dung, trong khi còn có thể sử dụng nhiều phương thức khác để xử lý các chức năng phức tạp hơn.

Props giúp các component tương tác hiệu quả bằng cách truyền dữ liệu rõ ràng; chúng là các thuộc tính nhận vào để mô tả nội dung mà component con sẽ hiển thị và đều là bất biến Trong khi đó, state thể hiện trạng thái của ứng dụng, và khi trạng thái này thay đổi, component sẽ tự động render lại để cập nhật giao diện người dùng một cách linh hoạt và chính xác.

 Có hỗ trợ Reusable Component

 Viết component dễ dàng hơn

 Hiệu suất tốt hơn với virtual dom

 Thân thiện với việc SEO.

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

KHẢO SÁT HIỆN TRẠNG

1.1 Trang web học lập trình về thuật toán w3school.com a Hình ảnh:

Hình 1 Giao diện học trang w3schools.com

Hình 2 Danh sách khóa học trang w3schools.com

Hình 3 Giao diện làm bài kiểm tra của w3schools.com b Ưu điểm:

 Tốc độ load trang nhanh

 Giao diện rõ rang dễ nhìn

 Dễ dàng tìm kiếm nội dung cần học

 Có responsive web phù hợp trên các thiết bị

 Thanh tìm kiếm có hỗ trợ từ khóa tìm kiếm nhanh

 Có bổ sung, cập nhật nội dung

 Nội dung cơ bản đầy đủ

 Có phần “Try it yourself” để người học dễ hình dung

 Trang web phổ biến hầu hết mọi lập trình viên front-end back-end đều biết

 Có bài kiểm tra kiến thức

 Có cấp chứng chỉ cho các khóa học c Nhược điểm:

 Nội dung căn bản, không có nhiều kiến thức nâng cao và cũ

 Bài kiểm tra còn đơn giản (Hình thức trắc nghiệm)

 Chứng chỉ không có giá trị cao

1.2 Trang web thực hành code Codewar.com a Hình ảnh:

Hình 4 Giao diện làm bài của trang codewars.com

 Hỗ trợ nhiều ngôn ngữ lập trình

 Có hệ thống đóng góp câu hỏi

 Giao diện làm bài đơn giản

 Có hệ thống thảo luận lời giải

 Có sắp sếp câu trả lời hay nhất c Nhược điểm:

 Hệ thống phản hồi vẫn còn chậm

 Giao diện vẫn còn phức tạp đối với người bắt đầu sử dụng

Hình 5 Danh sách khóa học trang codewars.com

Hình 6 Giao diện thảo luận trang codewars.com

1.3 Trang web học lập lý thuyết lập trình Hackerrank.com a Hình ảnh:

Hình 7 Danh sách ngôn ngữ lập trình trang hackerank.com

Hình 8 Danh sách khóa học trang hackerank.com

Hình 9 Danh sách bài học trong hackerank.com

Hình 10 Giao diện làm bài rang hackerank.com

Hình 11 Giao diện thử thách trang hackerank.com b Ưu điểm:

 Giao diện người dùng dễ sử dụng

 Hỗ trợ nhiều ngôn ngữ rõ ràng

 Có nhiều dạng câu hỏi được sắp xếp từ dễ tới khó

 Có hệ thống xếp hạng thứ bậc giải bài tập của bạn

 Hệ thống truy cập nhanh c Nhược điểm:

 Chưa có hệ thống forum thảo luận

 Hệ thống thảo luận câu hỏi được thiết kế không đẹp rõ ràng.

PHÂN TÍCH YÊU CẦU

2.1 Yêu cầu về chức năng

 Lưu trữ, và chỉnh sửa thông tin về:

- Thông tin chi tiết về người dùng

- Thông tin chi tiết về khóa học

- Thông tin chi tiết về bài học

- Thông tin chi tiết về thử thách

- Thông tin chi tiết về topic trong forum

- Thông tin chi tiết về comment

- Tìm kiếm bài viết trong forum

 Thực thi chương trình gồm các ngôn ngữ:

2.2 Yêu cầu phi chức năng

 Giao diện thân thiện dễ sử dụng

 Tốc độ xử lý nhanh

 Khả năng tương tác nhiều người dùng với nhau

MÔ HÌNH HÓA YÊU CẦU VÀ THIẾT KẾ CSDL

LƯỢC ĐỒ USECASE

1.1 Lược đồ use case tổng quan

Hình 12 Lược đồ user case tổng quan

1.2 Lược đồ use case chi tiết chức năng

1.2.1 Lược đồ use case chi tiết chức năng học lập trình

Hình 13 Lược đồ chi tiết use case học lập trình

1.2.2 Lược đồ use case chi tiết chức năng tham gia forum

Hình 14 Lược đồ chi tiết use case tham gia forum

1.2.3 Lược đồ use case chi tiết chức năng quản lý thông tin cá nhân

Hình 15 Lược đồ chi tiết use case quản lý thông tin cá nhân

1.2.4 Lược đồ use case chi tiết chức năng đóng góp câu hỏi

Hình 16 Lược đồ use case chi tiết chức năng đóng góp cáu hỏi

1.2.5 Lược đồ use case chi tiết chức năng quản lý khóa học

Hình 17 Lược đồ chi tiết chức năng quản lý khóa học

1.2.6 Lược đồ use case chi tiết chức năng quản lý thử thách

Hình 18 Lược đồ chi tiế chức năng quản lý thử thách

1.2.7 Lược đồ use case chi tiết chức năng quản lý user

Hình 19 Lược đồ chi tiết chức năng quản lý user

1.3 Mô tả chi tiết use case

Mô tả Người dùng đăng nhập vào ứng dụng với tài khoản đã đăng ký

Tác nhân kích hoạt Người dùng

Tiền điều kiện Đã đăng ký tài khoản

① Nhập email vào khung Email

② Nhập mật khẩu vào khung Password

Bảng 1 Mô tả chi tiết use case đăng nhặp

Tiền điều kiện Đã đăng nhập

Các bước thực hiện ① Nhập vào nút đăng xuất ở góc phải màn hình

Bảng 2 Mô tả chi tiết use case đăng xuất

1.3.3 Đổi mật khẩu Đăng mật khẩu

Tiền điều kiện Đã đăng ký tài khoản

① Nhập vào nút quên mật khẩu ở màn hình login

② Nhập email muốn lấy lại mật khẩu vào ô email

③ Nhấn vào link được gửi tới email

③ Nhập lại mật khẩu mới và ấn thay đổi

Bảng 3 Mô tả chi tiết use case đổi mật khẩu

1.3.4 Xem danh sách các bài luyện

Xem danh sách các bài luyện phỏng vấn

Mô tả Người dùng đăng nhập vào phần xem danh sách các bài theo chủ để

Các bước thực hiện ①Nhấp vào nút xem danh sách các bài phỏng vấn

Bảng 4 Mô tả chi tiết use case xem danh sách các bài luyện

1.3.5 Xem danh sách các bài luyện cú pháp ngôn ngữ

Xem danh sách các bài luyện cú pháp theo ngôn ngữ

Mô tả Người dùng đăng nhập vào phần xem danh sách các bài theo chủ để ữ

Các bước thực hiện ①Nhấp vào nút xem danh sách các bài cú pháp ngôn ngữ

Bảng 5 Mô tả chi tiết use case xem danh sách các bài luyện

1.3.6 Xem danh sách các bài luyện thuật toán

Xem danh sách các bài luyện thuật toán

Mô tả Người dùng đăng nhập vào phần xem danh sách các bài theo chủ để

Các bước thực hiện ①Nhấp vào nút xem danh sách các bài luyện thuật toán

Bảng 6 Mô tả chi tiết use case xem danh sách các bài luyện thuật toán

1.3.7 Tìm kiếm bài thực hành theo trình độ, theo ngôn ngữ, theo mức độ phổ biến

Tìm kiếm bài thực hành theo các tiêu chí

Mô tả Người dùng đăng nhập vào phần bài học và có thể tìm kiếm các bài học theo các tiêu chí khác nhau

① Điền keywork vào thanh tìm kiếm

① Điền chọn tiêu chỉ lọc muốn tìm kiếm kế bên ô search

① Nhấn vào nút tìm kiếm

Bảng 7 Mô tả chi tiết use case tìm kiếm bài thực hành

1.3.8 Xem chi tiết các bài lý thuyết

Xem chi tiết các bài lý thuyết

Mô tả Người dùng nhấp vào một bài học bất kỳ để xem chi tiết

① Chọn vào một bài học

① Ấn chọn phần lý thuyết

Bảng 8 Mô tả chi tiết use case xem chi tiết các bài lý thuyết

1.3.9 Gửi và xem kết quả của bài thực hành

Gửi và xem kết quả của bài thực hành

Mô tả Người dùng làm phần thực hành của một bài học sau đó nộp và xem kết quả

Tiền điều kiện Cú pháp không bị sai

① Ấn chọn phần thực hành

① Thực hiện bài làm, sau đó nhấn nút nộp bài

Bảng 9 Mô tả chi tiết use case gửi và xem kết quả của bài thực hành

1.3.10 Kiểm tra cú pháp của bài thực hành

Kiểm tra cú pháp của bài học

Mô tả Kiểm tra cú pháp của code trước khi người dùng nộp bài

Tiền điều kiện Cú pháp không bị sai

① Ấn chọn phần thực hành

① Thực hiện bài làm, sau đó nhấn nút test để kiểm tra

Bảng 10 Kiểm tra cú pháp của bài thực hành

1.3.11 Xem thảo luận của câu hỏi thực hành

Xem thảo luận của câu hỏi thực hành

Mô tả Xem thảo luận và cách giải của các người dùng khác cho câu hỏi của mình

① Ấn chọn phần thảo luận để xem thảo luận

Bảng 11 Mô tả chi tiết use case xem thảo luận của câu hỏi thực hành

1.3.12 Tạo bài viết và chỉnh sửa bài viết ở forum

Tạo bài viết và chỉnh sửa bài viết tại forum

Mô tả Tạo mới, và chỉnh sửa bài viết sau khi tạo mới

① Nhấn vào button thêm bài viết

① Điền các trường bắt buộc

① Sau đó nhấn nút đăng

1.3.13 Xem danh sách bài viết tại forum

Xem danh sách bài viết tại forum

Mô tả Hiển thị danh sách bài viết mới nhất khi vào forum

Các bước thực hiện ① Nhấn chọn vào forum để chuyển tới trang chủ forum

Bảng 12 Mô tả chi tiết use case xem danh sách bài viết tại forum

1.3.14 Bình luận bài viết của người dùng khác

Bình luận bài viết tại forum

Mô tả Bình luận các bài viết trong forum

① Nhấn chọn vào forum để chuyển tới trang chủ forum

① Chọn bài viết muốn bình luận

① Kéo xuống dưới cuối bài viết để thêm bình luận

① Sau đó nhấn nút gửi

Bảng 13 Mô tả chi tiết use case bình luận bài viết của người dùng khác

1.3.15 Trả lời bình luận của người dùng khác

Trả lời bình luận của người dùng

Mô tả Cho phép phản hồi bình luận của người dùng khác

① Chọn bình luận mà muốn phản hồi

① Nhấn vào nút trả lời

Bảng 14 Trả lời bình luận của người khác

1.3.16 Bình chọn bình luận hay lên top của bài viết

Mô tả Cho phép vote bình luận của người dùng khác

① Rê chuột vào bình luận mà muốn vote

Bảng 15 Mô tả chi tiết use case bình chọn bình luận lên top

1.3.17 Xem thông tin cá nhân

Xem Thông tin cá nhân

Mô tả Cho phép người dùng có thể xem thông tin cá nhân của mình

① Cick vào avatar của tài khoản bên gốc phải

① Sau đó chọn phần thông tin người dùng

Bảng 16 Mô tả chi tiết use case xem thông cá nhân

1.3.18 Chỉnh sửa thông tin cá nhân

Chỉnh sửa thông tin cá nhân

Mô tả Cho phép người dùng có thể chỉnh sửa thông tin cá nhân của mình

① Sau đó chọn phần thông tin người dùng

① Sau đó chọn phần cập nhận thông tin người dùng

① Chỉnh sửa những trường được cho phép

① Sau đó nhấn nút lưu

Bảng 17 Mô tả chi tiết use case chỉnh sửa thông tin cá nhân

1.3.19 Xem lại lịch sử làm bài

Xem lại lịch sử làm bài

Mô tả Cho phép người dùng có thể xem lại lịch sử làm bài của mình

Tiền điều kiện Đã từng làm bài thực hành

① Sau đó chọn phần lịch sử làm bài để xem lại lịch sử làm bài

Bảng 18 Mô tả chi tiết use case xem lại lịch sử làm bài

1.3.20 Đóng góp thêm câu hỏi Đóng góp thêm câu hỏi

Mô tả Cho phép người dùng có thể đóng góp câu hỏi cho hệ thống

Tác nhân kích hoạt Người dùng, quản trị viên

① Tại trang chủ, nhấp vào phần đóng góp câu hỏi

① Nhấp vào phần thêm câu hỏi mới

① Điền những trường bắt buộc

① Đợi admin xét duyệt câu hỏi

Bảng 19 Mô tả chi tiết use case đóng góp thêm câu hỏi

1.3.21 Chỉnh sửa câu hỏi đã đóng góp Đóng góp thêm câu hỏi

Mô tả Cho phép người dùng có thể chỉnh sửa câu hỏi sau khi đã đóng góp

Tác nhân kích hoạt Người dùng, quản trị viên

Tiền điều kiện Đã đóng góp câu hỏi cần sửa

① Tại trang chủ, nhấp vào phần đóng góp câu hỏi

① Tại mục danh sách đóng góp, nhấp vào nút chỉnh sửa tại câu hỏi cần chỉnh sửa

① Chỉnh sửa những trường thông tin bạn muốn

① Đợi admin xét duyệt câu hỏi

Bảng 20 Mô tả chi tiết use case chỉnh sửa câu hỏi đã đóng góp

1.3.22 Phê duyệt câu hỏi đóng góp

Phê duyệt câu hỏi đóng góp

Mô tả Admin sẽ là người quản lý những câu hỏi đóng góp của người dùng

Tác nhân kích hoạt Quản trị viên

Tiền điều kiện Đã đăng nhập vào trang admin

① Tại trang quản trị ấn vào phần quản lý đóng góp câu hỏi

① Danh sách nhưng câu hỏi mới được đóng góp sẽ được hiển thị lên, admin nhấn vào nút chấp nhận hoặc từ chối câu hỏi

Bảng 21 Mô tả chi tiết use case phê duyệ câu hỏi đóng góp

Thêm một khóa học mới

Mô tả Admin có thể thêm một khóa học mới

① Tại trang quản trị ấn vào phần khóa học

① Nhấn vào button thêm khóa học

① Điền đầy đủ thông tin khóa học

① Sau khi tạo thành công khóa học, bạn sẽ được chuyển tới trang quản lý khóa học đó để quản lý các bài học của mình

① Ấn vào tạo một bài học mới, điền đầy đủ thông tin

① Ấn vào tạo một bài thực hành đối với bài học đó nếu có

Bảng 22 Mô tả chi tiết use case thêm khóa học

Mô tả Xóa một khóa học hiện có

① Nhấn vào một khóa học để xem thông tin chi tiết

① Ấn vào nút xóa khóa học

① Xác nhận xóa khóa học

* Lưu ý: khi xóa khóa học thì tất cả các bài học đều bị xóa theo

Bảng 23 Mô tả chi tiết use case xóa khóa học

Chỉnh sửa một khóa học

Mô tả Chỉnh sửa khóa học

① Nhấn vào một khóa học để xem thông tin chi tiết

① Ấn vào chỉnh sửa khóa học

① Chỉnh sửa những trường được cho phép

① Nhấn vào nút xác nhận, và lưu

Bảng 24 Chỉnh sửa khóa học

Mô tả Thêm thử thách cho người dùng kiểm tra kiến thức

① Tại trang quản trị ấn vào phần tử thách

① Danh sách thử thách hiện ra, nhấn vào nút thêm thử thách

① Điền thông tin thử thách, và nhấn nút lưu

Bảng 25 Mô tả chi tiết use case thêm thử thách

Mô tả Xóa thử thách đã được tạo

① Danh sách thử thách hiện ra, chọn thử thách đã tạo

① Nhấn vào nút xóa,và xác nhận

Bảng 26 Mô tả chi tiết use case xóa thử thách

Mô tả Chỉnh sửa thử thách đã tạo

① Danh sách thử thách hiện ra, chọn thử thách đã tạo

① Nhấn vào chỉnh sửa,và xác nhận

Bảng 27 Mô tả chi tiết use case chỉnh sửa thử thách

Mô tả Chỉnh sửa thử thách đã tạo

① Tại trang quản trị ấn vào phần người dung

① Ấn vào nút thêm để thêm một người dùng Hoặc nhấn chọn vào một user đã tạo để chỉnh sửa hoặc xóa

Bảng 28 Mô tả chi tiết use case quản lý người dùng.

PHÂN TÍCH CHỨC NĂNG, THIẾT KẾ CƠ SỞ DỮ LIỆU

2.1 Xem danh sách bài học

Sơ đồ luồng dữ liệu:

Hình 20 Sơ đồ luồng dữ liệu xem danh sách bài học

D6: Danh sách bài học cần xem

B2: Mở kết nối cơ sở dữ liệu

B3: Kiểm tra D1 và xác thực đầu vào D1

B4: Trả lại kết quả D6 cho người dùng

B5: Đóng kết nối cơ sở dữ liệu

Thiết kế cơ sở dữ liệu

- Các thuộc tính mới: _id, name, dashName, order, isPublisher

- Các thuộc tính trừu tượng: _id

- Thiết kế cơ sở dữ liệu

Hình 21 Thiế kế cơ sở dữ liệu xem danh sách bài học

2.2 Gửi và xem kết quả thực hành

Hình 22 Sơ đồ luồng dữ liệu gửi và xem kết quả thực hành

D4: Nội dung bài làm sẽ được chạy bằng api

D3: Kết quả api trả về

D6: Kết quả api trả về sau khi xử lý

B2: Xác thực nội dung người dùng gửi xuống nếu đúng thì chuyển tới bước 3, sai thì chuyển tới bước

B3: Gọi api gửi code của người dùng để thực thi

B4: Compile server xử lý và trả về kết quả cho client

B5: Xử lý kết quả trả về cho người dùng, nếu kết quả không đúng thì chuyển tói bước, ngược lại thì chuyển tới bước

B6: Thông báo kết quả ‘Kết quả đúng.’

B7: Thông báo kết quả ‘Kết quả sai’

- Các thuộc tính mới: _id, title, challengeType, video, fromTopicId, tests, beforeTest, afterTest, solutions, description, instructions, contents, block, dashedName, challengeOrder, isPublished, isRequired, time, runResult

- Thiết kế cơ sở dữ liệu:

Hình 23 Thiết kế cơ sở dữ liệu gửi và xem kết quả thực hành

2.3 Kiểm tra compile thành công hay không

Hình 24 Sơ đồ luồng dữ liệu kiểm tra compile

D4: Nội dung bài làm sẽ được chạy bằng api

D3: Kết quả api trả về

D6: Kết quả api trả về sau khi xử lý

B2: Xác thực nội dung người dùng gửi xuống nếu đúng thì chuyển tới bước 3, sai thì chuyển tới bước

B3: Gọi api gửi code của người dùng để thực thi

B4: Compile server xử lý và trả về kết quả cho client

B5: Xử lý kết quả trả về cho người dùng, nếu kết quả không đúng thì chuyển tói bước, ngược lại thì chuyển tới bước

B6: Thông báo kết quả ‘Thực thi thành công’

B7: Thông báo kết quả ra lỗi api trả về

Thiết kế cơ sở dữ liệu:

- Không có thuộc tính mới

2.4 Thảo luận khi làm bài thực hành

Hình 25 Sơ đồ luồng dữ liệu thảo luận khi làm bài thực hành

D1: Yêu cầu xem thảo luận của bài thực hành

D3: Kết quả db trả về

D6: Kết quả xử lý trả về cho người dùng

B3: Lấy các thảo luận của câu hỏi hiện tại

Thiết kế cơ sở dữ liệu:

- Các thuộc tính mới: Comment (_id, content, likePeople, timestamp)

Hình 26 Thiết kế cơ sở dữ liệu chức năng thảo luận làm bài

2.5 Xem danh sách bài viết forum

Hình 27 Sơ đồ luồng dữ liệu xem danh sách bài viết tại forum

D1: Yêu cầu xem bài viết tại forum

B3: Lấy danh sách bài viết theo yêu cầu

- Không có thuộc tính mới

2.6 Tạo bài viết và chỉnh sửa bài viết trong forum

Hình 28 Sơ đồ luồng dữ liệu tạo và chỉnh sửa bài viết trong forum

D1: Bài viết người dùng gửi xuống

D4: Dữ liệu được lưu xuống db

B2: Kiểm tra xác thực đầu vào của các trường

B3: Mở kết nối dữ liệu

B6: Xử lý D3 và trả về D6 cho người dùng

User (_id, listCourseIdPassed, listChallengeIdPassed, listLessonIdPassed, status, role, email, googleId, username, name, avatar)

- Các thuộc tính trừu tượng: userId, _id

Hình 29 Thiết kế cơ sở dữ liệu tạo bài viết và chỉnh sửa bài viết trong forum

2.7 Bình luận bài viết của người dùng

Hình 30 Sơ đồ luồng dữ liệu bình luận bài viết của người dùng

B6: Xử lý D3 và trả về D6 cho người dùng

Không có thuộc tính mới

Hình 31 Thiết kế cơ sở dữ liệu bình luận bài viết của người dùng

2.8 Trả lời bình luận của người dùng khác

Hình 32 Sơ đô luồng dữ liệu trả lời bình luận của người dùng khác

B5: Trả về D6 cho người dùng

2.9 Bình chọn bình luận lên đầu bài viết

Hình 33 Sơ đồ luồng dữ liệu bình chọn bình luận lên đầu bài viết

D1: Yêu cầu của người dùng

2.10 Đóng góp và chỉnh sửa câu hỏi

Hình 34 Sơ đồ luồng dữ liệu đóng góp và chỉnh sửa cấu hỏi

D1: Câu hỏi người dùng đóng góp hoặc thêm

2.11 Phê duyệt câu hỏi đóng góp

Hình 35 Sơ đồ luồng dữ liệu phê duyệt câu hỏi đóng góp

Hình 36 Sơ đồ luồng dữ liệu thêm khóa học

D1: Dữ liệu khóa học của người dùng

Course (_id, name, dashName, isPublished, lesson, order) Lesson (_id, name, dashName, challenges, order, isPublished)

Hình 37 Thiết kế cơ sở dữ liệu thêm khóa học

Hình 38 Sơ đồ luồng dữ liệu xóa khóa học

D1: Yêu cầu xóa khóa học của người dùng

Hình 39 Sơ đồ luồng dữ liệu thêm thử thách

B2: Kiểm tra xác thực đầu vào của các trường B3: Mở kết nối dữ liệu

- Các thuộc tính mới: Không có thuộc tính mới

Hình 40 Thiết kế cơ sở dữ liệu thêm thử thách

Hình 41 Sơ đồ luồng dữ liệu xóa thử thách

D1: Yêu cầu xóa thử thách

B2: Kiểm tra xác thực đầu vào của các trường B3: Mở kết nối dữ liệu

THIẾT KẾ HỆ THỐNG

3.1.1 Lược đồ lớp server quản lý và giao tiếp với client

Hình 42 Lược đồ lớp server quản lý

3.1.2 Lược đồ lớp server compile

Hình 43 Lược đồ lớp server compile code

3.2.1 Sơ đồ tuần tự chức năng đăng nhập

3.2.2 Sơ đồ tuần tự chức năng lấy thông tin người dùng

3.2.3 Sơ đồ tuần tự chức năng tạo thử thách

3.2.4 Sơ đồ tuần tự thực hiện làm thử thách

3.2.5 Sơ đồ tuần tự bình luận

3.2.6 Sơ đồ tuần tự tạo topic

THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ

DANH SÁCH GIAO DIỆN NGƯỜI DÙNG

Hình 44 Giao diện trang chủ

STT Tên đối tượng Điều kiện gọi thực hiện Chức năng

1 Thẻ Hiển thị chào mừng

2 Thẻ

Hiện thi thông tin câu nói hay

3 Thẻ Đã đăng nhập Vào trang học online

4 Thẻ Hiển Thị logo

5 Thẻ Navigation dùng để điều hướng

Nút chức năng cho người dùng bấm vào xem thông tin

Bảng 29 Mô tả chi tiết giao diện trang chủ

1 Thẻ Banner trang forum

Filter danh sách bài viết theo từng danh mục

3 Thẻ Hiển thị avatar người đăng topic

4 Thẻ Hiển thị tên tác gả đăng topic

5 Thẻ

Hiển thị tên của topic

6 Thẻ Hiển thị tên danh mục của topic

7 Thẻ Hiển thị thông tin của topic

8 Thẻ Thời gian topic được xuất bản

Bảng 30 Mô tả chi tiết giao diện forum

Hình 46 Giao diện mô tả chi tiết topic

2 Thẻ Tên danh mục của topic

3 Thẻ Hiển thị ảnh người đăng topic

4 Thẻ Hiển thị tên tác gả đăng topic

6 Thẻ Nội dung của topic

7 Thẻ Tổng số lượt vote cho topic

8 Thẻ Tên của người bình luận

9 Thẻ Thời gian bình luận

10 Thẻ Nội dung của bình luận

11 Thẻ Thanh chức năng cho từng bình luận

Bảng 31 Mô tả chi tiết giao diện topic

Hình 47 Giao diện thêm topic

1 Thẻ Tên của topic

2 Thẻ Danh mục của bài đăng

3 Thẻ Nhập content bằng markdown

4 Thẻ Đóng popup tạo bài viết

5 Thẻ Tạo bài viết

6 Thẻ Hủy tạo bài viết

Bảng 32 Mô tả chi tiết giao diện topic

1.5 Giao diện thêm bình luận

Hình 48 Giao diện gửi bình luận

1 Thẻ < textarea > Nhập Bình luận bằng markdown

2 Thẻ Xem thử bình luận

3 Thẻ Hủy đăng bình luận

4 Thẻ Đã đăng nhập Đăng bình luận

Bảng 33 Mô tả chi tiết giao diện bình luận

Hình 49 Giao diện trang web học

Hình 50 Giao diện trang web học 2

Hình 51 Giao diện trang web học 3

Xem danh sách bài học

Xem danh sách thử thách

(hình 3) Đã đăng nhập Bắt đầu làm thử thách

Bảng 34 Mô tả chi tiết giao diện học

Hình 52 Giao diện làm bài

2 Thẻ Nội dung của thử thách

3 Thẻ Đã đăng nhập Nộp bài làm khi hoản thành

4 Thẻ Trợ lại trang thái ban đầu của bài làm

Dẫn đến forum để xem hướng dẫn hoặc gợi ý

Bảng 35 Mô tả chi tiết giao diện làm bài

1.8 Giao diện thông tin người dùng

Hình 53 Giao diện chỉnh sửa thông tin cá nhân

1 Thẻ Lưu chỉnh sửa thông tin người dùng

2 Thẻ Hủy chỉnh sửa thông tin của người dùng

3 Thẻ

Tên của người dùng

4 Thẻ Đường dẫn hình ảnh của người dùng

Bảng 36 Mô tả chi tiết giao diện thông tin người dùng.

DANH SÁCH GIAO DIỆN ADMIN

2.1 Giao diện quản lý khóa học

Hình 54 Giao diện quản lý khóa học

1 Thẻ Thêm khóa học mới

2 Thẻ Xóa khóa học hiện tại

3 Thẻ

Danh sách khóa học

4 Thẻ Tên khóa học

Cho phép xuất bản sau khi tạo hay không

6 Thẻ Thứ tự sắp xếp

7 Thẻ Danh sách bài học

Bảng 37 Mô tả chi tiết giao diện quản lý khóa học

2.2 Giao diện quản lý bài học

Hình 55 Giao diện quản lý bài học

1 Thẻ Thêm bài học mới

2 Thẻ Xóa bài học hiện tại

3 Thẻ

4 Thẻ Tên bài học

Cho phép xuất bản sau khi tạo hay không

6 Thẻ Thứ tự sắp xếp

7 Thẻ Chuyển sang chế độ chỉnh sửa

8 Thẻ Danh sách thử thách của bài học

Bảng 38 Mô tả chi tiết giao diện quản lý bài học

2.3 Giao diện quản lý thử thách

Hình 56 Giao diện quản ls thử thách

1 Thẻ Thêm thử thách mới

2 Thẻ Xóa thử thách hiện tại

3 Thẻ

4 Thẻ Tên thử thách

5 Thẻ Thứ tự thử thách trong bài học

6 Thẻ Loại thử thách

7 Thẻ Thời gian làm bài

8 Thẻ Id câu hỏi trong forum

9 Thẻ Có published sau khi tạo hay không

10 Thẻ Có bắt buộc trong bài học hay không

11 Thẻ Code trước khi chạy test

12 Thẻ Code sau khi chạy test

13 Thẻ Mô tả thử thách

14 Thẻ Chuyển sang chế độ chỉnh sửa thử thách

Bảng 39 Mô tả chi tiết giao diện thử thách.

CÀI ĐẶT VÀ KIỂM THỬ

CÀI ĐẶT

Repository: https://github.com/dattran01477/compilercode

 Cài đặt java JDK 1.8 trở lên

(https://www.oracle.com/technetwork/java/javase/downloads/jdk8- downloads-2133151.html.)

 Cài đặt docker ( https://docs.docker.com/engine/install/ubuntu/ )

 Clone sourse code tại repository

 Vào thư mục ‘Setup’ run file script tương ứng với version unbuntu

 Sau khi tạo thành công image Ta add project vào eclipse và chạy bằng spring boot theo các bước như sau:

Vào file -> import -> import project maven -> chọn thư mục project và ấn import

Hình 57 Import dự án và chạy bằng eclipse (1)

Hình 58 Import dự án và chạy bằng eclipse (2)

 Run file ItcodewebApplication bằng JavaApplication hoặc Spring boot

 Ứng dụng sẽ chạy tại port 8080

Repository: https://github.com/hquanitute/LearnCode_Server

 Clone project tại repository về máy local

 Sau nó gõ npm install -> node start

Repository: https://github.com/hquanitute/LearnCode_Client.git

 Chạy lệnh npm install -> npm build -> npm start

Repository: https://github.com/hquanitute/LearnCode_Admin.git

 Chạy lệnh npm install -> npm build -> npm start

 Ứng dụng sẽ chạy tại port 3001.

KIỂM THỬ

Trong quy trình kiểm thử phần mềm, việc lập kế hoạch kiểm thử chi tiết (test plan) và các test case cụ thể đóng vai trò quan trọng để đảm bảo độ chính xác và đầy đủ của quá trình kiểm tra Sau đó, thực hiện kiểm thử chéo, trong đó các thành viên đảm nhiệm lập trình chức năng sẽ được kiểm thử bởi thành viên khác và ngược lại, giúp tăng cường độ chính xác và phát hiện lỗi hiệu quả hơn.

Test case ID Test case description

Test steps Expected Result Status

LOG_01 Đăng nhập với tài khoản không được cho phép

- Truy cập vào hệ thống

- Thực hiện đăng nhập với tài khoản chưa được đăng ký

Không cho phép đăng nhập

LOG_02 Đăng nhập với tài khoản đúng

- Truy cập vào hê thống

- Thực hiện đăng nhập với tài khoản đã được đăng ký

Cho phép đăng nhập vào trang web

LEARN_01 Thực hiện gửi bài làm với những code không hợp lệ

- Thực hiện submit bài làm

Thông báo lỗi cú pháp

LEARN_02 Thực hiện submit bài làm đúng

Thực hiện submit bài làm

Thông báo thành công challenge

LEARN_03 Hiển thị đầy đủ thông tin về bài làm

Hiển thị đầy đủ thông tin bài làm(nội dung mô tả, code mẫu)

FORUM_01 Kiểm tra hệ thông phân trang

- Truy cập vào hệ thống forum

- Ấn vào số trang muốn đến

Khi ấn vào phân trang thì dữ liệu sẽ được load đúng

FORUM_02 Kiểm tra phân loại topic theo danh mục

Hiển thị đầy đủ các topic theo danh mục

- Ấn vào danh mục muốn hiện

FORUM_03 Kiểm tra thông tin hiển thị của từng topic

Hiển thị đầy đủ thông tin của topic(tên, thời gian, avatar, số lượt bình luận, số lượt view )

FORUM_04 Không cho phép tạo mới Topic khi chưa đăng nhập

Hiển thị yêu cầu người dùng đăng nhập

TOPIC_01 Kiểm tra hiển thị thông tin của topic

- Ấn vào một bài topic

Hiển thị đầy đủ thông tin của topic(tên, thời gian, avatar, số lượt bình luận, số lượt view, nội dung, bình luận )

TOPIC_02 Kiểm tra comment bài viết

Hiển thị bình luận lên

Tăng lượt vote của người dùng

- Chọn một bình luận bất kỳ

- Sau đó ấn vào button vote

Hình 59 Danh sách test case

NHỮNG KẾT QUẢ ĐẠT ĐƯỢC

 Xây dựng một hệ thống compiler code cho nhiều ngôn ngữ bao gồm các thành phần:

 Container docker cho ngôn ngữ (java, python, javascript)

 Xây dựng một hệ thống client bằng nodejs sử dụng hệ thống compile code để xây dựng một trang web cho người dùng có thể:

 Học lý thuyết và thực hành

 Có thể thảo luận đóng góp xây dựng thông qua forum riêng.

KHÓ KHĂN

 Trong việc xây dựng hệ thống docker làm sao cho tương thích với hệ thống spring boot

 Xử lý đầu vào code và test case để thực thi

 Xử lý đầu ra sau khi thực thi code thành công và gửi code cho người dùng

 Thiết kế hệ thống cho phù hợp với khả năng mở rộng thêm nhiều ngôn ngữ.

ƯU ĐIỂM

 Giao diện dễ sử dụng

 Giao diện code rõ ràng có hiển thị màu cho từng loại code

 Thực thi được cho các ngôn ngữ java, python, js

 Có forum cho người dùng có thể thảo luận và đóng góp các câu hỏi hay.

HẠN CHẾ

 Một số chức năng chưa được hoàn chỉnh

 Việc thực thi code còn chậm cần được tối ưu

 Chưa hỗ trợ nhiều ngôn ngữ code

 Hiểu thêm kiến thức để xây dựng hệ thống image bằng docker

 Có thêm kiến thức deploy cho hệ thống docker

 Có thêm Kiến thức về nodejs, reactjs, spring boot

 Hiểu được các cơ chế hoạt động của các trang web học code online

6 HƯỚNG PHÁT TRIỂN TRONG TƯƠNG LAI

 Tối ưu hóa tốc độ biên dịch code

 Hỗ trợ nhiều ngôn ngữ hơn

 Tích hợp giải nhiều ngôn ngữ cho một thử thách

 Xây dựng hệ thống xếp hạng người dùng

 Tối ưu phần biên soạn thử thách thành đơn giản hơn

DANH MỤC TÀI LIỆU THAM KHẢO

 https://docs.docker.com/get-started/

 https://reactjs.org/docs/getting-started.html

 https://nodejs.org/en/docs/

 https://expressjs.com/en/api.html

 https://docs.spring.io/spring-boot/docs/current/reference/htmlsingle/

 https://docs.spring.io/spring/docs/current/spring-framework-reference/

 https://www.markdownguide.org/basic-syntax/

 https://www.digitalocean.com/docs/

 https://tailwindcss.com/docs/installation/

 https://ant.design/docs/react/introduce

 https://github.com/reduxjs/redux-thunk

 https://github.com/rui314/8cc

 https://stackoverflow.com/questions/48787524/multiple-languages-in-docker- container

 https://github.com/remoteinterview/compilebox

Tiêu đề	Đề Án Tốt Nghiệp: Xây Dựng Website Học Lập Trình Bằng Spring Boot Docker, Nodejs, Reactjs
Tác giả	Hồ Nguyễn Hoàng Quân, Trần Thành Đạt
Người hướng dẫn	Thầy Nguyễn Minh Đạo
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	đề tài tốt nghiệp
Năm xuất bản	2019 – 2020
Thành phố	TP. Hồ Chí Minh

Định dạng
Số trang	90
Dung lượng	2,68 MB