Xây dựng website học lập trình bằng spring boot docker, nodejs, reactjs

GVHD: Nguyễn Minh Đạo Thời gian: 15 tuần Sản phẩm Kết quả thực tế Chữ ký của GVHD - Xác định yêu cầu - Mô hình hóa yêu cầu Đạt + Quân - Có được tính năng cơ bản - Có được Use Case tổng q

THÀNH PHỐ HỒ CHÍ MINH

BỘ GIÁO DỤC VÀ ĐÀO TẠO

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT

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

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

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

Tp Hồ Chí Minh, tháng 07/2020

SKL 0 0 7 1 0 0

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

NĂM HỌC 2019 – 2020

ĐỀ 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:

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

THẦY NGUYỄN MINH ĐẠO

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:

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

THẦY NGUYỄN MINH ĐẠO

NĂM HỌC 2019 – 2020 PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪ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 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

ĐẠI HỌC SƯ PHẠM KỸ THUẬT

TP.HỒ CHÍ MINH KHOA CÔNG NGHỆ THÔNG TIN



CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự do – Hạnh phúc



(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

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

ĐẠI HỌC SƯ PHẠM KỸ THUẬT

TP.HỒ CHÍ MINH KHOA CÔNG NGHỆ THÔNG TIN



CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự do – Hạnh phúc



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

GVHD: Nguyễn Minh Đạo

Thời gian: 15 tuần

Sản phẩm Kết quả

thực tế

Chữ

ký của GVHD

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

- Mô hình hóa yêu cầu

Đạt + Quân

- Có được tính năng cơ bản

- Có được Use Case tổng quát cho ứng dụng

- Xác định được yêu cầu cần làm trong ứng dụng

- - Bản vẽ use case chi tiết cho từng yêu cầu

- Tạo được cơ

sở dữ liệu đầu tiên

Đạt

- Tạo được server compile code cho nhiều ngôn ngữ bằng Java, Docker

- Tạo 1 RESTful API

cơ bản nhận resquest và trả

về kết quả của việc thực thi code

Đạt

- Tạo được một back office cho hệ thống compile code,

để quản lý compile các ngôn ngữ, thêm xóa sửa template code cho từng ngôn ngữ

Quân

- Tạo các trang bài học lý thuyết, và thực hành

- Sử dụng api

để tao các componet compile code

Đạt

- Xây dựng được phần discuss cho mỗi câu hỏi

Quân

- Tạo được RESTfull API cho ứng dụng

- Thêm chức năng xác minh người dùng

Quân

- Tạo các trang giao diện bằng ReactJs

- Thêm các hàm xử lý cho các

Quân + Đạt

- Tạo các trang giao diện bằng ReactJs

- Thêm các REST API từ backend để quản lý trang tin tức, forum

Quân + Đạt

- Code hoàn thiện cơ bản

- Ứng dụng được kiểm tra

Quân + Đạt

- Ứng dụng hoàn chỉnh, báo cáo hoàn chỉnh

Quân + Đạt

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à quan trọ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 qua củ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ời hướ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òn nhiề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ĩnh vự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ức khỏ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 cho thế 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

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

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

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

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

3.2 Phạm vi nghiên cứu 2

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

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

PHẦN NỘI DUNG 4

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

1 TỔNG QUAN VỀ DOCKER 4

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

3 TỔNG QUAN VỀ SPRING FRAMEWORD 8

4 TỔNG QUAN VỀ REACTJS 10

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

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

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

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

1 LƯỢC ĐỒ USECASE 20

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

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

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

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

2 DANH SÁCH GIAO DIỆN ADMIN 69

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

1 CÀI ĐẶT 73

2 KIỂM THỬ 77

PHẦN KẾT LUẬN 80

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

2 KHÓ KHĂN 80

3 ƯU ĐIỂM 80

4 HẠN CHẾ 81

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

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 6 Mô tả chi tiết use case xem danh sách các bài luyện thuật toán 27

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

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

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 28

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

1 TÍNH CẤP THIẾT CỦA ĐỀ 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ắt kị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ười muố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ệp chất xám (Công nghệ thông tin) này thì chúng ta luôn phải chủ động để học những cô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ào thự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ột website 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ước thà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ành công nghiệp khác nói chung

2 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

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

 Học sinh

 Sinh viê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

o Phương pháp tổng hợp lý thuyết: Nghiên cứu và tìm hiểu các tài liệ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ạo tính chính xác và khoa học của đề tài

o Phương pháp mô hình hóa: Mô phỏng website từ bước thiết kế cài đặt cho đến

kết

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

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ữ

 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 để 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

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

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

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à run application với container Nó cho phép tạo các môi trường độc lập và tách biệt để khởi chạy và phát triển ứng dụng và môi trường này được gọi là container Khi cần deploy lên bất kỳ server nào chỉ cần run container của Docker thì application của bạn sẽ được khở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ầ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 thật và máy thật của bạn Đảm bảo việc chạ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 đề xảy

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:

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ủa chú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

CMD <câu_lệnh>: 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 <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

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

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

- $ docker image/container ls

 Xóa image/container:

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

 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ó:

- $ docker ps –a

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

- $ docker stop <tên container>

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

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

 Dừng tất container:

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

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

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

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

- $ docker logs <tên container>

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

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

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

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

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

- $ docker pull <tên image>

 Khởi chạy một container:

- $ docker start <tên container>

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

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

2.3 Lợi ích của MongoDB

 Do MongoDB sử dụng lưu trữ dữ liệu dưới dạng Document JSON nên mỗi một collection sẽ có các kích cỡ và các document khác nhau, linh hoạ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ất thờ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ủa MongoDB 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

3 TỔNG QUAN VỀ SPRING FRAMEWORD

3.1 Spring là gì?

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

+ Spring for Android

+ Spring session

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ể

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ên phí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

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 render DOM tree thật

re-JSX:

JSX là một dạng ngôn ngữ cho phép viết các mã HTML trong Javascript Đặc điểm: Faster: Nhanh hơn JSX thực hiện tối ưu hóa trong khi biên dịch sang mã Javacsript Các mã này cho thời gian thực hiện nhanh hơn nhiều so với một mã tương đương viết trực tiếp bằng Javascript Safer: an toàn hơn Ngược với Javascript, JSX là kiểu statically-typed, nghĩa là nó được biên dịch trước khi chạy, giống như Java, C++ Vì thế các lỗi sẽ được phát hiện ngay trong quá trình biên dịch Ngoài ra, nó cũng cung cấp

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ên Javascript, 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ác framework khác Trong React, chúng ta xây dựng trang web sử dụng những thành phần (component) nhỏ Chúng ta có thể tái sử dụng một component ở nhiều nơi, với cá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ứa thà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ọi thứ React đều là component Chúng giúp bảo trì mã code khi làm việc với các dự án lớn Một react component đơn giản chỉ cần một method render Có rất nhiều methods khả 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ện trạng thái của ứng dụng, khi state thay đồi thì component đồng thời render lại để cập nhậ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

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

 Nội dung đa dạng

 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

b Ưu điểm:

 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

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

2 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 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 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

1.3.1 Đăng nhập

Đăng nhập

Các bước thực hiện

① Nhập email vào khung Email

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

③ Nhấn nút Login

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

1.3.2 Đăng xuất