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

Sơ đồ luồng dữ liệu tạo và chỉnh sửa bài viết trong forum.. Sơ đồ luồng dữ liệu bình luận bài viết của người dùng.. Mô tả chi tiết use case bình luận bài viết của người dùng khác.. Mô tả

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM

KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH

ĐỒ ÁN TỐT NGHIỆP NGÀNH CÔNG NGHỆ THÔNG TIN

XÂY DỰNG WEBSITE HỌC LẬP TRÌNH BẰNG SPRING BOOT DOCKER, NODEJS, REACTJS

GVHD: THẦY NGUYỄN MINH ĐẠO SVTH: HỒ NGUYỄN HOÀNG QUÂN SVTH: TRẦN THÀNH ĐẠT

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH KHOA CÔNG NGHỆ THÔNG TIN BỘ MÔN

CÔNG NGHỆ PHẦN MỀM

ĐỀ TÀI:

XÂY DỰNG WEBSITE HỌC LẬP TRÌNH BẰNG SPRING

BOOT DOCKER, NODEJS, REACTJS

SINH VIÊN THỰC HIỆN:

HỒ NGUYỄN HOÀNG QUÂN TRẦN THÀNH ĐẠT

GIẢNG VIÊN HƯỚNG DẪN

THẦY NGUYỄN MINH ĐẠO

NĂM HỌC 2019 – 2020

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH KHOA CÔNG NGHỆ THÔNG TIN BỘ MÔN

CÔNG NGHỆ PHẦN MỀM

ĐỀ TÀI:

XÂY DỰNG WEBSITE HỌC LẬP TRÌNH BẰNG SPRING

BOOT DOCKER, NODEJS, REACTJS

SINH VIÊN THỰC HIỆN:

HỒ NGUYỄN HOÀNG QUÂN TRẦN THÀNH ĐẠT

GIẢNG VIÊN HƯỚNG DẪN

THẦY NGUYỄN MINH ĐẠO

TP.HỒ CHÍ MINH NGHĨA VIỆT NAM



Họ và tên Sinh viên 1: Trần Thành Đạt MSSV 1: 16110308

Họ và tên Sinh viên 2: Hồ Nguyễn Hoàng Quân MSSV 2: 16110429

Ngành: Công nghệ phần mềm

Tên đề tài: Xây dựng website học lập trình bằng spring boot, docker, nodejs, reactjs

Họ và tên Giáo viên hướng dẫn: Nguyễn Minh Đạo

1 Về nội dung đề tài & khối lượng thực hiện:

2 Ưu điểm:

3 Khuyết điểm

4 Đề nghị cho bảo vệ hay

không?

5 Đánh giá loại:

6 Điểm:

Tp Hồ Chí Minh, Ngày tháng năm

Giáo viên hướng dẫn

(Ký và ghi họ tên)



PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN

Họ và tên Sinh viên 1: Trần Thành Đạt MSSV 1: 16110308

Họ và tên Sinh viên 2: Hồ Nguyễn Hoàng Quân MSSV 2: 16110429

Ngành: Công nghệ phần mềm

Tên đề tài: Xây dựng website học lập trình bằng spring boot, docker, nodejs, reactjs

Họ và tên Giáo viên phản biện: Mai Tuấn Khôi

1 Về nội dung đề tài & khối lượng thực hiện:

2 Ưu điểm:

3 Khuyết điểm

Tp Hồ Chí Minh, Ngày tháng năm

Giáo viên phản biện(Ký và ghi họ tên)

Thời gian: 15 tuần

15/04

20/0720/07

27/07

LỜI CẢM ƠN

Trên thực tế không có sự thành công nào mà không gắn liền với những sự hỗ trợ,giúp đỡ dù ít hay nhiều, dù trực tiếp hay gián tiếp của những người thân, bạn bè và quantrọng là người thầy Trong suốt thời gian từ khi bắt đầu học tập ở giảng đường đại họcđến nay, chúng em đã nhận được rất nhiều sự quan tâm, giúp đỡ của các thầy cô, gia đình

và bạn bè

Chúng em xin chân thành cảm ơn sự hướng dẫn tận tình trong suốt thời gian quacủa thầy Nguyễn Minh Đạo, khoa Công Nghệ Thông Tin, trường Đại học Sư phạm Kỹthuật Tp.HCM Thầy đã định hướng, góp ý và cũng cấp cho chúng em rất nhiều kiến thức

về một lĩnh vực mới khi chúng em bắt đầu thực hiện tiểu luận Nếu không có những lờihướng dẫn, dạy bảo của thầy thì bài báo cáo này của chúng em rất khó có thể hoàn thiệnđược

Bài báo cáo được thực hiện trong thời gian ngắn và kiến thức của chúng em cònnhiều hạn chế, bỡ ngỡ Do vậy, không tránh khỏi những thiếu sót, em rất mong nhậnđược những ý kiến đóng góp quý báu của thầy cô để kiến thức của chúng em trong lĩnhvực này được hoàn thiện hơn Sau cùng, chúng em xin kính chúc quý thầy cô dồi dào sứckhỏe, niềm tin tiếp tục thực hiện sứ mệnh cao đẹp của mình là truyền đạt kiến thức chothế hệ sau

Trân trọng

Nhóm sinh viên thực hiện

Mục lục

GIỚI THIỆU ĐỀ TÀI

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

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

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

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

3.2 Phạm vi nghiên cứu

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

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

PHẦN NỘI DUNG

CHƯƠNG 1: CƠ SỞ LÝ THUYẾT

1.TỔNG QUAN VỀ DOCKER .

2.TỔNG QUAN VỀ MONGODB VÀ NOSQL .

3.TỔNG QUAN VỀ SPRING FRAMEWORD .

4.TỔNG QUAN VỀ REACTJS .

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

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

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

CHƯƠNG 3: MÔ HÌNH HÓA YÊU CẦU VÀ THIẾT KẾ CSDL

1.LƯỢC ĐỒ USECASE .

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

3.THIẾT KẾ HỆ THỐNG .

CHƯƠNG 4: THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ .

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

2.DANH SÁCH GIAO DIỆN ADMIN .

CHƯƠNG 5: CÀI ĐẶT VÀ KIỂM THỬ .

1 CÀI ĐẶT .

2 KIỂM THỬ .

PHẦN KẾT LUẬN .

Danh mục hình ảnh

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

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 13

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

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

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

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

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

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

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

Hình 11 Giao diện thử thách trang hackerank.com 18

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 .44

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

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 .45

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

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

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

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

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

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

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

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

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

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

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

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

Hình 44 Giao diện trang chủ .60

Hình 45 Giao diện forum .61

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

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

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

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

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

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

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

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

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

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

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

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

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

Hình 59 Danh sách test case 80

Danh mục bảng biểu. Bảng 1 Mô tả chi tiết use case đăng nhặp 25

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

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

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

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

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

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 .29

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

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 .30

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

GIỚI THIỆU ĐỀ TÀI

Ngày nay việc tiếp thu kiến thức và luôn trao dồi cho mình những kỹ năng mới để bắtkịp với xu hướng hiện đại là một trong những điều mà ai trong chúng ta, những ngườimuốn phát triển lâu dài đều phải làm liên tục Đặc biệt là trong nghành công nghiệpchất xám (Công nghệ thông tin) này thì chúng ta luôn phải chủ động để học nhữngcông nghệ mới, công cụ mới, và nhiều kiến thức khác nữa… để có thể áp dụng vàothực tiễn cho các dự án đời sống một cách tối ưu nhất

Tuy nhiên để học được những kiến thức mới này đối với nhiều bạn thực sự rất khókhăn, bởi vì không phải ai cũng đủ điều kiện để đến trường lớp học được, bởi nhiều lý

do khác nhau như là không có thời gian đến lớp sau một ngày đi làm mệt mỏi, hay làcác bạn có gia cảnh khó khăn thì việc đến trường để học những kiến thức công nghệđược xem là điều gì đó quá xa vời

Hiểu và nắm bắt được tình hình chung của mọi người, cũng như xu hướng của thế giới

đã đưa mọi thứ offline thành online thì hôm nay nhóm em đã quyết định làm ra mộtwebsite giúp mọi người có thể lên học và trao dồi kinh nghiệm về lập trình, từ đó để cóthể tạo bước đệm vững chắc để chúng ta có thể áp dụng vào công việc một cách cóhiệu quả và tối ưu tiết kiệm chi phí nhất, cũng như cùng nhau chung sức đưa đất nướcthành một trong những nước dẫn đầu về công nghệ thông tin nói riêng và các nghànhcông nghiệp khác nói chung

 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

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

 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

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

ứng dụng liên quan đến các công nghệ đang tìm hiểu

o Phương pháp chuyên gia: Tham khảo ý kiến của Thầy hướng dẫn cùng các

anh, chị và bạn bè có kinh nghiệm liên quan đến các vấn đề của tiểu luận để tạotính

chính xác và khoa học của đề tài

cho đến kết

quả thành phẩm của website

 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ữ

 Rest api cho client

 Xây dựng một hệ thống client bằng nodejs sử dụng hệ thống compile code

2

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

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 4: Lập trình

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

3

PHẦN NỘI DUNG CHƯƠNG 1: CƠ SỞ LÝ THUYẾT

1 TỔNG QUAN VỀ DOCKER.

1.1 Docker là gì?

Docker là một nền tảng cho developers và sysadmin để develop, deploy và runapplication với container Nó cho phép tạo các môi trường độc lập và tách biệt để khởichạy và phát triển ứng dụng và môi trường này được gọi là container Khi cần deploylên bất kỳ server nào chỉ cần run container của Docker thì application của bạn sẽ đượckhởi chạy ngay lập tức

1.2 Lợi ích của docker.

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ầnduy 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 thật và máy thật của bạn Đảm bảo việcchạy và khởi tạo ứng dụng không ảnh hưởng tới máy thật của bạn khi có vấn

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.

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 Dockerimage đượ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:

FROM <base_image>:<phiên_bản>: đây là câu lệnh bắt buộc phải có trong bất kỳ

Dockerfile nào Nó dùng để khai báo base Image mà chúng ta sẽ build mới Image củachúng ta

MAINTAINER <tên_tác_giả>: 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 <câu_lệnh>: 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

ADD <src> <dest>: 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 <src>) vào một vị trí nào đó trên Container (khai báo bằng dest)

ENV <tên_biến>: định nghĩa biến môi trường trong Container.

ENTRYPOINT <câu_lệnh>: định nghĩa những command mặc định, cái mà sẽ được

chạy khi container running

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

Container

5

1.5 Các lệnh cơ bản.

-$ docker image/container ls

-$ docker image/container rm <tên image/container >

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

-$ docker ps –a

-$ docker stop <tên container>

-$ docker run –name <tên container> <tên image>

-$ docker stop $(docker ps –a –q)

-$ docker rm $(docker ps –a –q)

-$ docker logs <tên container>

-$ docker build -t <tên container>.

-$ docker run -d <tên image>

-$ docker pull <tên image>

2 TỔNG QUAN VỀ MONGODB VÀ NOSQL.

2.1 Nosql là gì?

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à 1 mảnh vá cho những khuyết điểm và thiếu xót cũng như hạn chếcủa mô hình dữ liệu quan hệ RDBMS (Relational Database Management System- Hệquản trị cơ sở dữ liệu quan hệ) về tốc độ, tính năng, khả năng mở rộng,

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ụngCassandra do FaceBook phát triển, Google phát triển và sử dụng BigTable, …

ta sẽ dùng khái niệm là collection thay vì bảng

So với RDBMS thì trong MongoDB collection ứng với table, còn document sẽ ứng vớirow, 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ưutrữ không cần tuân theo một cấu trúc nhất định

7

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

 Do MongoDB sử dụng lưu trữ dữ liệu dưới dạng Document JSONnên mỗi một collection sẽ có các kích cỡ và các document khác nhau, linhhoạt trong việc lưu trữ dữ liệu, nên bạn muốn gì thì cứ insert vào thoải mái

 Dữ liệu trong MongoDB không có sự ràng buộc lẫn nhau, không cójoin như trong RDBMS nên khi insert, xóa hay update nó không cần phải mấtthời gian kiểm tra xem có thỏa mãn các ràng buộc dữ liệu như trong RDBMS

 MongoDB rất dễ mở rộng (Horizontal Scalability) Trong MongoDB

có một khái niệm cluster là cụm các node chứa dữ liệu giao tiếp với nhau,khi muốn mở rộng hệ thống ta chỉ cần thêm một node với vào cluster:

 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, bản ghi được cached lên bộ nhớ Ram,

để phục vụ lượt truy vấn sau diễn ra nhanh hơn mà không cần phải đọc từ ổcứng

 Hiệu năng cao: Tốc độ truy vấn (find, update, insert, delete) củaMongoDB nhanh hơn hẳn so với các hệ quản trị cơ sở dữ liệu quan hệ(RDBMS) Với một lượng dữ liệu đủ lớn thì thử nghiệm cho thấy tốc độinsert của MongoDB có thể nhanh tới gấp 100 lần so với MySQL

Là framework phát triển ứng dụng phổ biến nhất dành cho Java Enterprise,

là một Java Platform mã nguồn mở, một giải pháp gọn nhẹ dành cho Java Enterprise.Với Spring Framework các nhà phát triển có thể tạo ra các mã có hiệu suất cao, dễkiểm thử và có thể sử dụng lại được

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

 Web framework của spring là một Web MVC framework có thiết kế tốt, nó là một thay thế tuyệt vời cho Structs và các công nghệ 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ẹ Điều này có lợi ích cho việc phiển

và triển khai các ựng dụng trên các máy tính có bộ nhớ và tài nguyên CPU hạnchế

 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)

9

+ Spring for Android

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ảotại đây để biết rõ hơn về cách sử dụng cụ thể

4 TỔNG QUAN VỀ REACTJS.

4.1 Reactjs là gì?

React là thư viện JavaScript phổ biến nhất để xây dựng giao diện người dùng (UI) Nócho tốc độ phản hồi tuyệt vời khi user nhập liệu bằng cách sử dụng phương pháp mới

để render trang web

Một trong những điểm hấp dẫn của React là thư viện này không chỉ hoạt động trênphía client, mà còn được render trên server và có thể kết nối với nhau React so sánh

sự thay đổi giữa các giá trị của lần render này với lần render trước và cập nhật ít thayđổi nhất trên DOM

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

Virtual DOM:

Công nghệ DOM ảo giúp tăng hiệu năng cho ứng dụng Việc chỉ node gốc mới cótrạng thái và khi nó thay đổi sẽ tái cấu trúc lại toàn bộ, đồng nghĩa với việc DOM treecũng sẽ phải thay đổi một phần, điều này sẽ ảnh hưởng đến tốc độ xử lý React JS sửdụng Virtual DOM (DOM ảo) để cải thiện vấn đề này.Virtual DOM là một objectJavascript, mỗi object chứa đầy đủ thông tin cần thiết để tạo ra một DOM, khi dữ liệuthay đổi nó sẽ tính toán sự thay đổi giữa object và tree thật, điều này sẽ giúp tối ưu hoáviệc re-render DOM tree thật

10

tính năng gỡ lỗi khi biên dịch rất tốt Easier: Dễ dàng hơn JSX kế thừa dựa trênJavascript, vì vậy rất dễ dàng để cho các lập trình viên Javascripts có thể sử dụng(tham khảo tại https://jsx.github.io/)

Components:

React được xây dựng xung quanh các component, chứ không dùng template như cácframework khác Trong React, chúng ta xây dựng trang web sử dụng những thànhphần (component) nhỏ Chúng ta có thể tái sử dụng một component ở nhiều nơi, vớicác trạng thái hoặc các thuộc tính khác nhau, trong một component lại có thể chứathành phần khác Mỗi component trong React có một trạng thái riêng, có thể thay đổi,

và React sẽ thực hiện cập nhật component dựa trên những thay đổi của trạng thái Mọithứ React đều là component Chúng giúp bảo trì mã code khi làm việc với các dự ánlớn Một react component đơn giản chỉ cần một method render Có rất nhiều methodskhả dụng khác, nhưng render là method chủ đạo

Props và State:

Props: giúp các component tương tác với nhau, component nhận input gọi là props, vàtrả thuộc tính mô tả những gì component con sẽ render Prop là bất biến State: thể hiệntrạng thái của ứng dụng, khi state thay đồi thì component đồng thời render lại để cậpnhật UI

4.3 Lợi ích của Reactjs.

 Dễ sử dụng

 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

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

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

 Tốc độ load trang 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

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

14

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

 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

 Giao diện mới lạ

 Có sắp sếp câu trả lời hay nhất

 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

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

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

16

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

 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

 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

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

18

 Tìm kiếm tra cứu:

-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

CHƯƠNG 3: MÔ HÌNH HÓA YÊU CẦU VÀ THIẾT KẾ

CSDL

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

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

20