Đồ án xây dựng hệ thống hỗ trợ tổ chức các cuộc thi lập trình

Với việc tập trung vào các yếu tố quan trọng như quản lý thông tin cuộc thi, đăng ký tham gia, nộp bài dự thi và đánh giá, hệ thống sẽ tạo ra một môi trường thuận lợi và công bằng cho cá

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

Sinh viên thực hiện:

1 Trương Xuân Vương MSSV: 20520353

2 Bùi Đoàn Khánh Ân MSSV: 20520369

TP HỒ CHÍ MINH, NĂM 2023

NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN

LỜI CẢM ƠN

Để hoàn thành đề tài này và có kiến thức như ngày hôm nay, nhóm chúng em xin gửi lời cảm ơn đến thầy Toàn đã tận tình hỗ trợ, truyền đạt kiến thức cũng như kinh nghiệm quý báu cho chúng em trong suốt quá trình học tập và nghiên cứu Trong thời gian thực hiện đề tài, nhóm đã vận dụng những kiến thức nền tảng đã tích lũy đồng thời kết hợp với việc học hỏi và tiếp thu những kiến thức mới Chúng em đã cố gắng vận dụng những gì đã thu thập được để hoàn thành đồ án tốt nhất có thể Tuy nhiên, trong quá trình thực hiện, vẫn không tránh khỏi những thiếu sót, chúng em mong nhận được sự thông cảm và góp ý chân thành từ các thầy

Cuối cùng, chúng em xin gửi lời chúc thân ái nhất đến thầy

PHỤ LỤC

LỜI CẢM ƠN 3

PHỤ LỤC 4

MỞ ĐẦU 1

I GIỚI THIỆU TỔNG QUAN 2

1 TỔNG QUAN ĐỀ TÀI 2

1.1 Giới thiệu đề tài 2

1.2 Công cụ sử dụng 3

II CÔNG NGHỆ 4

1 REACTJS 4

1 Giới thiệu chung 4

2.1 Giới thiệu chung 8

2.2 Kiến trúc 8

2.3 Tính năng 10

2.3.1 Database 10

2.3.2 Serverless Api 11

2.3.3 Auth 12

2.3.4 Realtime 12

2.3.5 Storage: 12

2.3.6 Client Library Reference 13

3 JAVASCRIPT 13

4 POSTGRESQL 14

4.1 Định nghĩa 14

4.2 Tính năng 15

III WEBSITE HỖ TRỢ TỔ CHỨC CUỘC THI LẬP TRÌNH 16

1 GIỚI THIỆU ĐỀ TÀI 16

1 Đặt vấn đề 16

2 Mục tiêu và chức năng 17

3 Định hướng giải quyết vấn đề 18

4 Yêu cầu bài toán 18

1. Tổng quan 18

2. Các hoạt động của hệ thống 19

3. Yêu cầu phi chức năng 19

2 PHÂN TÍCH KIẾN TRÚC HỆ THỐNG 20

1 Kiến trúc hệ thống 20

1 Khái niệm 20

2 Nguyên tắc hoạt động 21

3 Ưu điểm 22

2 Đặc tả use case 23

1 Sơ đồ Use case 23

2 Đặc tả Use-Case và sơ đồ hoạt động 26

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

I Sơ đồ cơ sở dữ liệu 81

II Mô tả chi tiết các bảng dữ liệu 81

3 THIẾT KẾ GIAO DIỆN 84

1 Quản trị viên 84

2 Ban tổ chức 91

3 Thí sinh 96

3 Hướng phát triển 104

V BẢNG PHÂN CÔNG CÔNG VIỆC: 105

VI PHỤ LỤC 105

MỞ ĐẦU

Trong thế giới kỹ thuật ngày càng phát triển, cuộc thi lập trình đóng vai trò quan trọng trong việc khám phá, khuyến khích và đánh giá tài năng lập trình của cộng đồng Tuy nhiên, tổ chức một cuộc thi lập trình đáp ứng nhu cầu và đảm bảo hiệu quả vẫn là một thách thức Đó là lý do tại sao việc xây dựng một hệ thống hỗ trợ tổ chức cuộc thi lập trình đáng tin cậy và tiện ích là vô cùng quan trọng

Hệ thống hỗ trợ này nhằm mục tiêu cung cấp một nền tảng toàn diện cho việc tổ chức

và quản lý cuộc thi lập trình Với việc tập trung vào các yếu tố quan trọng như quản lý thông tin cuộc thi, đăng ký tham gia, nộp bài dự thi và đánh giá, hệ thống sẽ tạo ra một môi trường thuận lợi và công bằng cho các thí sinh và tổ chức cuộc thi

Với hệ thống hỗ trợ tổ chức cuộc thi lập trình, chúng ta hy vọng sẽ đem lại một nền tảng đáng tin cậy và tiện ích cho việc tổ chức cuộc thi lập trình Sự kết hợp giữa tính linh hoạt, tiện lợi và hiệu quả của hệ thống này sẽ giúp cho việc tổ chức cuộc thi trở nên dễ dàng hơn, từ quản lý thông tin, đăng ký, nộp bài, cho đến quá trình đánh giá và công bố kết quả

Chúng ta tin rằng hệ thống hỗ trợ tổ chức cuộc thi lập trình sẽ mang lại nhiều lợi ích cho cả tổ chức cuộc thi và thí sinh Sẽ có một quy trình tổ chức cuộc thi mượt mà hơn, giúp tiết kiệm thời gian và công sức của ban tổ chức Thí sinh cũng sẽ được trải nghiệm một giao diện đơn giản và thuận tiện để tham gia và gửi bài dự thi Đồng thời, việc đánh giá và công bố kết quả cũng sẽ được thực hiện một cách công bằng và minh bạch

I GIỚI THIỆU TỔNG QUAN

1 Tổng quan đề tài

1.1 Giới thiệu đề tài

Việc tổ chức các cuộc thi lập trình là một hoạt động phổ biến trong cộng đồng lập trình viên hiện nay, đặc biệt là trong các trường đại học và công ty công nghệ Tuy nhiên, việc tổ chức các cuộc thi này cũng đặt ra một số thách thức

và vấn đề cho các bên chịu trách nhiệm tổ chức cuộc thi cần giải quyết Vì vậy, nhóm chúng em quyết định thực hiện một hệ thống hỗ trợ tổ chức các cuộc thi lập trình để giúp cho việc tổ chức các cuộc thi lập trình được tổ chức thuận lợi và dễ dàng hơn

Nhóm chúng em bắt đầu thực hiện các bước đầu tiên là phân tích và xác định các quy trình nghiệp vụ của một cuộc thi lập trình, tìm hiểu xem nó diễn ra như thế nào Và sau quá trình tìm hiểu, nhóm chúng em cũng đã nắm bắt được những điều đó và bắt tay vào việc xây dựng một hệ thống hỗ trợ các bên

tổ chức các cuộc thi lập trình và cho thi sinh có thể tham gia các cuộc thi lập trình đó cùng với đội của mình Hệ thống sẽ hỗ trợ cho ban tổ chức các cuộc thi một cách tối ưu nhất, đơn giản và dễ sử dụng Hệ thống cung cấp các tính năng quản lý cuộc thi, đội tham gia thi giúp các bên tổ chức có thể dễ dàng theo dõi tiến độ của việc tổ chức cuộc thi Hệ thống có thể chấm điểm bài nộp của đội thi dựa vào các bộ dữ liệu được cung cấp sẵn và có trình biên dịch để

tự động tính toán số điểm làm bài thi của thí sinh Thí sinh có thể vào xem các cuộc thi có trong hệ thống và đăng ký tham gia, quản lý thông tin cá nhân của mình, làm bài thi, nộp bài và sau đó xem bảng xếp hạng Đối với quản trị

viên, là người có quyền cao nhất trong hệ thống, sẽ có quyền thực hiện các chức năng mà thí sinh và ban tổ chức Ngoài ra, quản trị viên còn quản lý các tài khoản có trong hệ thống, tạo tài khoản cho ban tổ chức và có thể xoá một tài khoản bất kỳ nếu tài khoản đó vi phạm các quy định hoạt động của hệ thống

1.2 Công cụ sử dụng

Trong quá trình xây dựng phần mềm, nhóm đã sử dụng phần mềm sau:

● WebStorm: IDE hỗ trợ xây dựng ứng dụng phía frontend

● Visual Studio Code: hỗ trợ xây dựng giao diện người dùng

● Postman: hỗ trợ nhóm test các api để lấy dữ liệu từ phía server

● PostgreSQL: hỗ trợ nhóm lưu trữ cơ sở dữ liệu

● Figma: hỗ trợ nhóm thiết kế giao diện

● Supabase: một Baas, giúp thể hiện các vai trò phía server của hệ

thống

II CÔNG NGHỆ

1 ReactJs

1 Giới thiệu chung

ReactJS là một thư viện JavaScript mã nguồn mở phổ biến được sử dụng rộng rãi để xây dựng giao diện người dùng hiện đại và tương tác trên nền tảng web Được phát triển bởi Facebook, ReactJS tập trung vào việc xây dựng các thành phần giao diện mang tính tái sử dụng, giúp phát triển ứng dụng web linh hoạt, dễ bảo trì và có hiệu suất cao ReactJS là một thư viện JavaScript mạnh mẽ và linh hoạt, được sử dụng rộng rãi trong việc xây dựng giao diện người dùng tương tác trên web Với tính năng như JSX, Virtual DOM và khả năng tái sử dụng thành phần, ReactJS giúp tăng hiệu suất, dễ bảo trì và phát triển ứng dụng web hiện đại

2 Các khái niệm quan trọng

1 Components

ReactJS dựa trên kiến trúc component, trong đó mọi giao diện người dùng được xem như một component độc lập Components trong ReactJS có thể là các thành phần nhỏ

hơn hoặc kết hợp thành các thành phần lớn hơn Việc phân chia giao diện thành các component giúp tái sử dụng các đoạn mã và quản lý giao diện một cách hiệu quả Có hai loại component trong ReactJS: class component và functional component

2 JSX

JSX là ngôn ngữ kết hợp giữa JavaScript và HTML, cho phép viết mã HTML trong JavaScript JSX giúp tạo ra cấu trúc giao diện người dùng dễ đọc và dễ bảo trì, cũng

component đó ReactJS quản lý và điều khiển trạng thái của component một cách thông minh để đảm bảo giao diện luôn đồng bộ với dữ liệu

4 Props (thuộc tính)

Props là các thuộc tính được truyền từ component cha sang component con Props giúp truyền dữ liệu và cấu hình giữa component khác nhau Thay đổi props của một component cha sẽ dẫn đến cập nhật lại giao diện của component con

5 Virtual DOM

Virtual DOM là một bản sao của DOM thực tế, tồn tại trong bộ nhớ ReactJS sử dụng Virtual DOM để quản lý và cập nhật giao diện người dùng một cách hiệu quả Sử dụng Virtual DOM giúp tối ưu hóa hiệu suất và tăng tốc độ ứng dụng

6 Lifecycle (Vòng đời)

ReactJS cung cấp các phương thức lifecycle cho các component, cho phép thực hiện các hành động tại các giai đoạn khác nhau trong quá trình tồn tại của component Các phương thức lifecycle bao gồm:

• componentDidMount

• componentDidUpdate

• componentWillUnmount và nhiều phương thức khác

Điều này giúp quản lý và kiểm soát các hành động của thành phần trong suốt quá trình hoạt động của nó

3 Các ưu điểm của ReactJS

Hiệu xuất cao

ReactJS sử dụng Virtual DOM (DOM ảo) để tối ưu hóa việc cập nhật giao diện người dùng Thay vì cập nhật toàn bộ DOM, ReactJS chỉ cập nhật những phần cần thay đổi,

từ đó giảm thiểu tải cho trình duyệt và tăng hiệu suất ứng dụng

Tính tái sử dụng cao

ReactJS hỗ trợ việc xây dựng các thành phần tái sử dụng (reusable components) Việc tái sử dụng các thành phần giúp giảm thiểu việc viết mã lặp lại, tăng năng suất phát triển và bảo trì ứng dụng

Cộng đồng lớn

ReactJS có một cộng đồng phát triển mạnh mẽ và rộng lớn Điều này có nghĩa là bạn

có thể tìm thấy nhiều tài liệu, hướng dẫn và giúp đỡ từ cộng đồng, cũng như được hỗ trợ bởi nhiều công cụ và thư viện phát triển bên thứ ba

Dễ học và sử dụng

ReactJS có cú pháp gần gũi với HTML, JavaScript và JSX (một biến thể của JavaScript) Điều này giúp cho việc học và sử dụng ReactJS trở nên dễ dàng đối với các nhà phát triển web

2 Supabase

2.1 Giới thiệu chung

Supabase là một Baas (Backend as a service) open source được coi là có thể thay thế được cho

Firebase Supabase cung cấp đầy đủ và tốt các tính năng cơ bản và nâng cao để có thể xây dựng một ứng dụng hoàn chỉnh, có khả năng mở rộng và bảo trì tốt sau này Trên đà phát triển thần tốc của thế giới công nghệ hiện nay, tốc độ và sự tin cậy được đặt lên hàng đầu, vì thế khi ta có thể vận dụng được những công nghệ mới tiện lợi một cách hiệu quả sẽ đem lại kết quả rất đáng mong đợi

2.2 Kiến trúc

Supabase là sự kết hợp của nhiều công cụ open source khác nhau, nó xây dựng những tính năng của Firebase thành những open soure product Mục tiêu của supabase là cung cấp cho lập trình viên một trải nghiệm giống như Firebase nhưng là bằng các open source tool

Supabase là một hosted-platform Chúng ta chỉ cần đăng ký và sử dụng mà không cần phải cài đặt bất

cứ điều gì Ngoài ra Supabase còn hỗ trợ ta self-host và develop-locally

Mỗi project của supabse sẽ có cấu trúc như trên, trong đó:

1 PostgreSQL: Đây là trung tâm của Supabase, mỗi một project là một full

Postgres database Supabse sẽ cung cấp cho ta một bộ công cụ để quản lý database đó dễ dàng như chúng ta sử dụng Firebase

2 GoTrue: Một JWT-based API hỗ trợ việc quản lý user và các vấn đề liên quan đến access tokens

3 PostRest: Là một standalone web server biến đổi trực tiếp PostgreSQL

database thành một RESTful API

4 RealTime: Là một websocket engine có khả năng mở rộng cao để có thể quản

lí được các việc như Presence, broadcasting messages, streaming database changes của người dùng

5 Storage: Một dịch vụ lưu trữ tương thích với S3 để lưu trữ các metadata của

2.3 Tính năng

2.3.1 Database

Mỗi project Supabase sẽ là một full Postgres database Supabase cung cấp cho ta các api và công

cụ để có thể sử dụng database dễ dàng nhất có thể mà không cần quá am hiểu về database

Một số tính năng nổi bật như là:

Supabase tự động tạo ra cho chúng ta 3 loại api dựa trên cấu trúc database của chúng ta.Mỗi khi ta

chỉnh sửa gì trên database thì Supabase sẽ cập nhập api lại ngay lập tức cho phụ hợp với chỉnh sửa

của chúng ta, ngoài việc tự động tạo ra api, Supabase còn tự động tạo ra các bản hướng dẫn sử

dụng api cho người dùng Các loại api mà Supabase cung cấp bao gồm:

2 GraphQL API: Cũng như REST API, Supabase cũng cung cấp các api cơ bản cho người dùng thông qua pq_graphql (là một mở rộng giúp ta truy vấn cơ sở dữ liệu với GraphQL thông qua một hàm SQL đơn)

3 Realtime API: Sử dụng Reatime server sẽ được đề cập sau để có thển tạo ra các api dùng để thực hiện các công việc realtime

2.3.3 Auth

Authentication: Supabase cung cấp nhiều phương thức xác thực khác nhau như: Email-Password,

Magic links (one-click logins), Scocial login(Apple, Azure, Github, Google,…), Phone logins Với mỗi provider khác nhau Supabase sẽ cung cấp các phương thức xác thực khác nhau

Authorization: Supabase sử dụng PostgreSQL's Row Level Security (RLS) để thiết lập các luật lệ

phân quyền và Policies (PostgresSQL’s rule engine) để viết các câu lệnh phân quyền phức tạp

2.3.4 Realtime

Supabase cung cấp một hệ thống các Realtime servers cho phép ta thực hiện các chức năng như:

Broadcast: Gửi các ephemeral messages từ client này đến các client khác với độ trễ thấp

Presence: Theo dõi và đồng bộ chia sẻ các trạng thái của các clients

Postgres Changes: Bắt các sự thay đổi trên Postgres database và gửi chúng đến client

Channel: là phần tử chung tâm khi xây dựng Realtime, nó giống như một chat room, nơi mà

những người khi tam gia có thể gửi các thông điệp đến nhau và có thể xem trạng thái của nhau

2.3.5 Storage:

Supabase Storage giúp chúng ta lưu trữ và phục vụ các meta file một cách dễ dàng

Files: là bất kì các loại file phương tiện nào như image, GIFs, videos

Folders: Giúp ta tổ chức các files, khi muốn phân bổ các file đến nơi phù hợp với chúng

Buckets: Là một container cho các file và folder, mỗi bucket là duy nhất và có những luật bảo mật

và phân quyền riêng

2.3.6 Client Library Reference

Hiển nhiên supabase cũng cung cấp các library để tiện dụng nhất cho các frontend developer hiện nay Các ngôn ngữ và các công nghệ liên quan mà Supabase cung cấp là: Javascript, Flutter,

Python, C#, Swift, Kotlin

3 JavaScript

JavaScript là một ngôn ngữ lập trình kịch bản đa nền tảng platform), hướng đối tượng Nó chủ yếu được sử dụng để tăng cường cung cấp trải nghiệm thân thiện hơn với người dùng website như là bao gồm các trang web cập nhật tự động, cải tiến giao diện người dùng như menu và hộp thoại, hình động, đồ họa 2D và 3D, bản đồ tương tác, trình phát video JavaScript là một ngôn ngữ nhỏ và nhẹ, chạy trong môi trường máy chủ lưu trữ (trình duyệt web) Nó có thể được kết nối với các đối tượng của môi trường để cung cấp kiểm soát chương trình đối với chúng

(cross-dựng những chức năng có sử dụng Javascript trở nên dễ dàng hơn như: đơn giản hóa việc duyệt tài liệu HTML, xử lý sự kiện, hoạt ảnh và tương tác Ajax để phát triển web nhanh chóng jQuery là một bộ công cụ JavaScript gọn nhẹ nhưng đầy mạnh mẽ, được chứng minh qua hơn 90% các website trên thế giới sử dụng (trừ các website chạy bằng JavaScript Framework)

4 PostgreSQL

PostgreSQL là hệ thống quản trị cơ sở dữ liệu quan hệ và đối tượng

(Object – Relational Database Management System) có mục đích chung,

là hệ thống cơ sở dữ liệu mã nguồn mở miễn phí tiên tiến nhất hiện nay

Ban đầu, PostgreSQL được phát triển dựa trên POSTGRES 4.2 bởi nhóm Nghiên cứu Cơ sở dữ liệu tại phòng khoa học máy tính Berkeley, Đại học California

PostgreSQL thiết kế để chạy trên các nền tảng tương tự UNIX Tuy nhiên, nhà sản xuất đã điều chỉnh linh động để có thể chạy trên nhiều nền tảng khác như Mac OS X, Solaris hay Windows Ngoài ra, hiện tại thì bạn cũng

có thể cài đặt và sử dụng PostgreSQL trên Ubuntu 20.04

Mã nguồn của phần mềm sử dụng theo license của PostgreSQL, đây là một license mã nguồn mở tự do Vì vậy, bạn sẽ được tự do sử dụng, sửa đổi và phân phối PostgreSQL dưới nhiều hình thức

PostgreSQL có tính ổn định cao, chính vì vậy không yêu cầu quá nhiều công tác bảo trì Do đó, nếu bạn đang phát triển các ứng dụng mà muốn tiết kiệm chi phí để sở hữu một hệ thống quản trị dữ liệu thì PostgreSQL

là một sự lựa chọn sáng suốt

PostgreSQL cung cấp cho người dùng nhiều tính năng hiện đại, khả năng ổn định cao, tốc độ tuyệt vời, chính vì vậy mà PostgreSQL trở nên phổ biến, bạn có thể dễ dàng nhiều dịch vụ thiết kế website khách sạn sử dụng nền tảng này để tạo web, ngoài ra thì còn có nhiều ứng dụng khác như:

• Kiểu dữ liệu: nguyên hàm (các nguyên số, boolean, số, chuỗi); cấu trúc

(UUID, Phạm vi, Array, Date/time); Hình học; Tùy chỉnh; Document

• Toàn vẹn dữ liệu: Ràng buộc loại từ, Primary Keys, Foreign Keys,

UNIQUE, NOT NULL, Khóa khuyến nghị/ Advisory Locks, Khóa hàm số/ Explicit Locks,…

• Hiệu suất, đồng quy: Tính năng lập danh mục, lập danh mục nâng

cao, trình lập kế hoạch, trình tối ưu hóa truy cập phức tạp, thống kê số liệu trên nhiều cột, quét index – only, giao tác – giao tác dạng test, điều

• Chức năng bảo mật: Bảo mật, xác thực (SCRAM-SHA-256, SSPI, LDAP, GSSAPI, Certificate và các hình thức khác), hệ thống kiểm soát truy cập mạnh mẽ, bảo mật cấp độ cột – hàng

• Khả năng mở rộng: phương pháp lưu trữ, ngôn ngữ thủ tục (PL /

PGSQL, Python, Perl, và nhiều ngôn ngữ khác), PostGIS, tính năng kết nối cơ sở dữ liệu hoặc luồng khác với giao diện SQL chuẩn, cùng nhiều tính năng mở rộng khác

• Tìm kiếm văn bản: Tìm kiếm văn bản đầy đủ, hệ thống các bộ ký tự quốc tế (thông qua ICU collations)

• Tính năng khác: Khả năng quản lý số lượng người dùng đang thao tác cùng lúc, phù hợp với môi trường sản xuất quản lý nhiều terabyte và petabyte

III Website hỗ trợ tổ chức cuộc thi lập trình

1 Giới thiệu đề tài

1 Đặt vấn đề

Bối cảnh ngành Công nghệ thông tin (CNTT) tại Việt Nam đang trải qua một giai đoạn phát triển nhanh chóng, đi kèm với sự gia tăng đáng kể trong nhu cầu tuyển dụng nguồn nhân lực có chất lượng cao Theo thống kê của các kênh tuyển dụng, nhu cầu tuyển dụng trong ngành CNTT đã tăng gấp 4 lần Tuy nhiên, việc tìm kiếm và thu hút nhân tài CNTT phù hợp trở nên ngày càng khó khăn Doanh nghiệp, đặc biệt là các công ty vừa và nhỏ, gặp khó khăn trong việc tuyển dụng và giữ chân các kỹ sư CNTT

có trình độ và kỹ năng tốt Các công ty lớn thường có khả năng tài chính mạnh mẽ và

có thể cung cấp mức lương hấp dẫn để thu hút nhân lực, trong khi các doanh nghiệp vừa và nhỏ thường không thể cạnh tranh được với những mức lương cao đó Điều này

tạo ra một thách thức lớn cho các doanh nghiệp vừa và nhỏ trong việc tuyển dụng và giữ chân nhân sự chất lượng trong lĩnh vực CNTT

Trong bối cảnh này, xây dựng một hệ thống hỗ trợ tổ chức cuộc thi lập trình trở thành một giải pháp quan trọng để đáp ứng nhu cầu tuyển dụng và phát triển nguồn nhân lực chất lượng trong ngành CNTT Hệ thống này sẽ cung cấp một nền tảng chuyên nghiệp

và tiện ích để tổ chức các cuộc thi lập trình, thu hút sự quan tâm và tham gia của các kỹ

sư và sinh viên CNTT Qua đó, nó không chỉ tạo ra một môi trường thúc đẩy sự cạnh tranh và khám phá tài năng lập trình mà còn làm việc như một công cụ tuyển dụng tiềm năng cho các doanh nghiệp, nơi họ có thể tìm kiếm và tuyển dụng nhân sự chất lượng

đã được kiểm định thông qua các cuộc thi

Với sự phát triển nhanh chóng của ngành CNTT và sự cạnh tranh gay gắt trong việc thu hút nhân tài, việc xây dựng hệ thống hỗ trợ tổ chức cuộc thi lập trình không chỉ giúp tăng cường tương tác và giao lưu giữa các chuyên gia, sinh viên và doanh nghiệp trong ngành, mà còn đóng vai trò quan trọng trong việc tạo điều kiện thuận lợi cho tuyển dụng và phát triển nguồn nhân lực chất lượng trong lĩnh vực Công nghệ thông tin tại Việt Nam

2 Mục tiêu và chức năng

Mục tiêu của hệ thống hỗ trợ tổ chức cuộc thi lập trình là tạo ra một nền tảng đáng tin cậy và hiệu quả để hỗ trợ tổ chức, quản lý và thúc đẩy các cuộc thi lập trình Hệ thống này sẽ đáp ứng nhu cầu của ba đối tượng chính: thí sinh, tổ chức cuộc thi và quản trị viên hệ thống Hệ thống cần có các tính năng cơ bản của một trang web thi lập trình

3 Định hướng giải quyết vấn đề

Để đáp ứng mục tiêu và chức năng chính của hệ thống tổ chức cuộc thi lập trình, chúng

em đã quyết định sử dụng ReactJS và Supabase để xây dựng thiết kế cốt lõi của hệ thống

ReactJS, một thư viện JavaScript phổ biến và mạnh mẽ, được chọn để xây dựng giao diện người dùng tương tác Với ReactJS, chúng em có thể xây dựng các thành phần giao diện mang tính tái sử dụng, tạo ra một trải nghiệm người dùng mượt mà Khả năng tương thích cao của ReactJS với các trình duyệt và khả năng tối ưu hóa hiệu suất giúp đảm bảo rằng hệ thống có thể xử lý một lượng lớn dữ liệu và đáp ứng nhanh chóng đối với các yêu cầu tương tác của người dùng

Supabase được sử dụng để xây dựng hệ thống quản lý dữ liệu cho cuộc thi lập trình Với Supabase, chúng em có thể tạo và quản lý cơ sở dữ liệu linh hoạt, tiện lợi và an toàn Việc sử dụng Supabase cung cấp cho chúng em một cách tiếp cận đơn giản và hiệu quả để lưu trữ, truy vấn và cập nhật dữ liệu liên quan đến thí sinh, cuộc thi và bên

tổ chức cuộc thi

Bằng việc sử dụng ReactJS và Supabase, chúng em tin rằng hệ thống tổ chức cuộc thi lập trình sẽ đáp ứng hoàn toàn các yêu cầu đặt ra Sự kết hợp của hai công nghệ này cho phép chúng em xây dựng giao diện người dùng tương tác mạnh mẽ và quản lý dữ liệu một cách linh hoạt và hiệu quả

4 Yêu cầu bài toán

1 Tổng quan

Hệ thống được xây dựng dưới hình thức là một trang web nhằm cung cấp được tính tiện lợi và hiệu quả cho người dùng Hệ thống có các tính năng cơ bản cho ban tổ chức như quản lý cuộc thi, quản lý bài tập cho cuộc thi, phê duyệt các đội tham gia; quản trị viên hệ thống có thể quản lý tất cả các tài khoản có trong hệ thống bao gồm cả ban tổ

chức và thí sinh, quản lý các bài tập; còn về phía thí sinh có thể đăng ký tham gia các cuộc thi, thực hiện làm bài thi đối với các cuộc thi đã đến giờ diễn ra, tham gia giải các bài tập của hệ thống, xem được bảng xếp hạng của các cuộc thi

Bên cạnh đó hệ thống cũng cung cấp đầy đủ các tính năng tìm kiếm và thống kê cho tất

cả người dùng

2 Các hoạt động của hệ thống

➢ Hoạt động của quản trị viên hệ thống:

o Quản lý toàn bộ tài khoản của hệ thống, có thể tạo người dùng mới với các mật khẩu mặc định

o Quản lý các ban tổ chức (các tài khoản ban tổ chức sẽ thuộc về một ban

tổ chức cố định)

o Quản lý các bài tập

➢ Hoạt động của ban tổ chức:

o Quản lý các cuộc thi

o Quản lý các bài tập của cuộc thi, bao gồm luôn cả các testcase của bài tập

o Phê duyệt các đội đăng ký tham gia cuộc thi

➢ Hoạt động của thí sinh:

o Đăng ký tham gia các cuộc thi

o Thực hiện bài thi theo giời gian quy định

o Làm các bài tập

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

o Tính tương thích và đáp ứng: giao diện trang web phải tương thích được với các trình duyêt web phổ biến

➢ Yêu cầu hiệu suất hệ thống:

o Hệ thống cần đảm bảo thời gian tải nhanh, xử lý hiệu quả và nhanh chóng đáp ứng các tương tác của người dùng

➢ Yêu cầu bảo mật:

o Hệ thống phải đảm bảo tính bảo mật dữ liệu và thông tin cá nhân của người dùng, mã hóa các dữ liệu như mật khẩu

o Cần có phân quyền tài khoản

2 Phân tích kiến trúc hệ thống

1 Kiến trúc hệ thống

1 Khái niệm

Mô hình Client Server là mô hình mạng máy tính trong đó các máy tính con

được đóng vai trò như một máy khách, chúng làm nhiệm vụ gửi yêu cầu đến các máy chủ Để máy chủ xử lý yêu cầu và trả kết quả về cho máy khách đó

Client và server về bản chất thì nó là 2 máy tính giao tiếp và truyền tải dữ liệu cho nhau

Máy tính đóng vai trò là máy khách – Client: Với vai trò là máy khách, chúng sẽ

không cung cấp tài nguyên đến các máy tính khác mà chỉ sử dụng tài nguyên được cung cấp từ máy chủ Một client trong mô hình này có thể là một server cho mô hình khác, tùy thuộc vào nhu cầu sử dụng của người dùng

Máy tính đóng vai trò là máy chủ – Server: Là máy tính có khả năng cung cấp

tài nguyên và các dịch vụ đến các máy khách khác trong hệ thống mạng Server đóng vai trò hỗ trợ cho các hoạt động trên máy khách client diễn ra hiệu quả hơn

2 Nguyên tắc hoạt động

Trong mô hình Client Server, server chấp nhận tất cả các yêu cầu hợp lệ từ mọi nơi khác nhau trên Internet, sau đó trả kết quả về máy tính đã gửi yêu cầu đó Máy tính được coi là máy khách khi chúng làm nhiệm vụ gửi yêu cầu đến các máy chủ và đợi câu trả lời được gửi về

Để máy khách và máy chủ có thể giao tiếp được với nhau thì giữa chúng phải có một chuẩn nhất định, và chuẩn đó được gọi là giao thức (Giao thức là gì thì các bạn có thể tham khảo tại đây ) Một số giao thức được sử dụng phổ biến hiện nay như: HTTPS, TCP/IP, FTP,

Nếu máy khách muốn lấy được thông tin từ máy chủ, chúng phải tuân theo một giao thức mà máy chủ đó đưa ra Nếu yêu cầu đó được chấp nhận thì máy chủ sẽ thu thập thông tin và trả về kết quả cho máy khách yêu cầu Bởi vì Server - máy chủ luôn luôn trong trạng thái sẵn sàng để nhận request từ client nên chỉ cần client gửi yêu cầu tín hiệu và chấp nhận yêu cầu đó thì server sẽ trả kết quả về phía client trong thời gian ngắn nhất

3 Ưu điểm

• Giúp chúng ta có thể làm việc trên bất kì một máy tính nào có hỗ trợ giao thức truyền thông Giao thức chuẩn này cũng giúp các nhà sản xuất tích hợp lên nhiều sản phẩm khác nhau mà không gặp phải khó khăn gì

• Có thể có nhiều server cùng làm một dịch vụ, chúng có thể nằm trên nhiều máy tính hoặc một máy tính

• Chỉ mang đặc điểm của phần mềm mà không hề liên quan đến phần cứng, ngoài yêu cầu duy nhất là server phải có cấu hình cao hơn các client

• Hỗ trợ người dùng nhiều dịch vụ đa dạng và sự tiện dụng bởi khả năng truy cập từ xa

• Cung cấp một nền tảng lý tưởng, cho phép cung cấp tích hợp các kỹ thuật hiện đại như mô hình thiết kế hướng đối tượng, hệ chuyên gia, hệ thông tin địa lý (GIS)

2 Đặc tả use case

1 Sơ đồ Use case

Hình 3.1 Sơ đồ USE CASE tổng quát

1.1.1.1 Danh sách các Actor

1 Quản trị viên Quản lý tất cả các chức năng và hoạt động của hệ

thống

2 Ban tổ chức Ban tổ chức sẽ Quản lý tạo cuộc thi và quản lý các

cuộc thi Ngoài ra, ban tổ chức sẽ quản lý và xét duyệt các đội thi của cuộc thi do chính ban tổ chức tạo ra và có thể xem lại lịch sử hoạt động của mình

3 Thí sinh Thí sinh là người có thể xem các cuộc thi và đăng

ký các cuộc thi mà thí sinh muốn tham gia, làm bài tập, xem bảng xếp điểm tích khi làm bài tập của các thi sinh trong hệ thống và có thể xem lại lịch sử hoạt động của mình

2 Xem lịch sử hoạt động

Tìm kiếm thông tin các hoạt động của tài khoản đã tham gia từ khi tạo tài khoản đến thời gian hiện tại

1 Quản lý tài khoản Thêm tài khoản / Xem lịch sử hoạt

động của tài khoản / Xoá tài khoản / Tìm kiếm tài khoản

Ban tổ chức

1 Quản lý tạo cuộc thi

Nhập thông tin và xác nhận quản

lý tạo cuộc thi

2 Quản lý cuộc thi Xoá / Cập nhật / Tìm kiếm cuộc

Thí sinh có thể cập nhật thông tin

cá nhân và mật khẩu của mình trong trang quản lý cá nhân

3 Xem bảng xếp hạng đội thi các cuộc thi

Thí sinh có thể xem bảng xếp hạng đội thi các cuộc thi có trong

hệ thống và tìm kiếm thông tin thí sinh trong bảng xếp hạng

2 Đặc tả Use-Case và sơ đồ hoạt động

1 Đăng nhập

1 Bảng 3.2.1 Đặc tả Use-Case “Đăng nhập” Tên Use-Case Đăng nhập

Mô tả Use-Case Người dùng đăng nhập vào ứng dụng hệ thống

Kích hoạt (Trigger) Người dùng nhấn vào nút ‘Đăng nhập’.

Actors Thí sinh/Quản trị viên/Ban tổ chức

Use-Case liên quan Không có

Tiền điều kiện

1 Người dùng phải truy cập vào Form ‘Đăng nhập’

mới có thể thực hiện đăng nhập

2 Tài khoản người dùng phải tồn tại trong CSDL trước khi đăng nhập

Hậu điều kiện Người dùng tương tác với giao diện người dùng với

phân quyền tương ứng

Luồng sự kiện chính

1 Người dùng chọn tab ‘Đăng nhập’ trên giao diện chính của người dùng

2 Hệ thống hiển thị trang ‘Đăng nhập’

3 Người dùng nhập thông tin đăng nhập (tên đăng nhập và mật khẩu), sau đó chọn vào nút ‘Đăng nhập’

4 Hệ thống xử lý tìm kiếm thông tin tài khoản đăng nhập trong CSDL

5 Nếu tìm thấy, hệ thống chuyển đến giao diện ‘Trang chủ’ tương ứng với quyền của người dùng

Luồng sự kiện ngoại

lệ

4.1 Nếu không tìm thấy thông tin đăng nhập và thông báo

‘Nhập thông tin không đúng’

Use-Case tiếp tục tại bước 3 để tiếp tục nhập hoặc chọn chức năng khôi phục mật khẩu

4.2 Trong trường hợp người dùng chọn chức năng ‘Khôi phục mật khẩu’ Hệ thống hiển thị trang khôi phục mật

khẩu

4.3 Người dùng nhập thông tin email và xác nhận

4.4 Hệ thống xử lý tìm kiếm email trong CSDL

4.4.1 Nếu không tìm thấy, hệ thống thông báo ‘Không tìm thấy email trong hệ thống’.

Use-Case tiếp tục tại bước 4.3 hoặc quay lại tại bước 2

4.5 Nếu tìm thấy, hệ thống tự động gửi code khôi phục mật khẩu

4.6 Người dùng nhập mã code vừa nhận

4.7 Hệ thống sẽ xử lý tìm kiếm mã code

4.7.1 Nếu không đúng mã code, hệ thống thông báo ‘Mã code nhập không đúng’

Use case quay lại bước 4.6

4.8 Nếu đúng mã code, hệ thống hiển thị trang nhập mật khẩu mới Người dùng tiến hành nhập mật khẩu mới và bấm

‘Lưu mật khẩu’ và hệ thống chuyển đến giao diện ‘Trang chủ’ tương ứng với quyền của người dùng

2 Hình 3.2.1 Sơ đồ hoạt động của Use-Case

“Đăng nhập”

2 Đăng ký tài khoản

1 Bảng 3.2.2 Đặc tả Use-Case “Đăng ký tài khoản”

Tên Use-Case Đăng ký tài khoản

Mô tả Use-Case Thí sinh đăng ký tài khoản cá nhân để được tham gia vào các

cuộc thi do các đơn vị tổ chức

Kích hoạt (Trigger) Thí sinh nhấn vào nút ‘Đăng ký tài khoản’.

Use-Case liên quan Không có

Tiền điều kiện

1 Thí sinh phải truy cập vào Form ‘Đăng ký tài khoản’ mới có thể thực hiện tạo tài khoản

2 Tài khoản của thí sinh chưa tồn tại trong CSDL trước khi đăng ký

Hậu điều kiện Thí sinh tạo tài khoản cá nhân thành công và được

tham gia các hoạt động của hệ thống

Luồng sự kiện chính

1 Thí sinh chọn tab ‘Đăng ký tài khoản’ trên giao diện chính của thí sinh

2 Hệ thống hiển thị trang đăng ký tài khoản

3 Người dùng nhập thông tin cá nhân và tải khoản

4 Hệ thống tiến hành kiểm tra định dạng thông tin

5 Nếu hợp lệ, hệ thống kiểm tra sự tồn tại của email trong CSDL

6 Nếu chưa tồn tại, lưu thông tin cá nhân và tài khoản của thí sinh vào CSDL

7 Hệ thống hiển thị thông báo tạo tài khoản thành

Use-Case quay lại bước 3

5.1 Nếu tồn tại, hiển thị thông báo ‘Email này đã tồn tại’

Use-Case quay lại bước 3

2 Hình 3.2.2 Sơ đồ hoạt động của Use-Case

“Đăng ký tài khoản”

3 Quản lý thông tin cá nhân

1 Cập nhật mật khẩu

1 Bảng 3.2.3.1 Đặc tả Use-Case “Cập nhật mật khẩu”

Tên Use-Case Cập nhật mật khẩu

Mô tả Use-Case Thí sinh/Ban tổ chức có thể cập nhật mật khẩu

Kích hoạt (Trigger) Thí sinh/Ban tổ chức nhấn vào nút ‘Cập nhật mật khẩu’

Actors Thí sinh/Ban tổ chức

Use-Case liên quan Không có

Tiền điều kiện

1 Thí sinh/Ban tổ chức phải đăng nhập vào hệ thống

2 Thí sinh/Ban tổ chức phải truy cập vào Form ‘Quản lý thông tin cá nhân’ mới có thể thực hiện cập nhật

Hậu điều kiện Thông tin dữ liệu đã được thay đổi trong CSDL

Luồng sự kiện chính

1 Thí sinh/Ban tổ chức chọn tab ‘Quản lý thông tin cá

nhân’ trên giao diện chính của thí sinh/ban tổ chức

2 Hệ thống hiển thị giao diện ‘Quản lý thông tin cá nhân’ với các thông tin đã được đưa lên từ CSDL

3 Thí sinh/Ban tổ chức chọn chức năng ‘Cập nhật mật

khẩu’

4 Thí sinh/Ban tổ chức tiến hành nhập mật khẩu cũ và mật khẩu mới