Xây dựng hệ thống hỗ trợ phỏng vấn ngành IT

Mục lục
LỜI CẢM ƠN .............................................................................................................6
Mục lục........................................................................................................................7
Danh mục các từ viết tắt............................................................................................10
Danh mục các bảng ...................................................................................................11
Danh mục các hình ....................................................................................................13
CHƯƠNG 1.

TỔNG QUAN ................................................................................15

1.1.

Khảo sát hiện trạng....................................................................................15

1.2.

Tính cấp thiết của đề tài ............................................................................ 15

1.3.

Mục tiêu và nhiệm vụ đề tài ......................................................................16

1.3.1.

Mục tiêu .............................................................................................16

1.3.2.

Nhiệm vụ ........................................................................................... 16

1.4.

Cơng nghệ lập trình ...................................................................................17

1.5.

Phạm vi nghiên cứu ...................................................................................17

CHƯƠNG 2.
2.1.

CƠ SỞ LÝ THUYẾT.....................................................................18

Giới thiệu về MERN Stack [1].................................................................. 18

2.1.1.

Stack là gì, tại sao nó ra đời?.............................................................18

2.1.2.

MERN Stack [2] ................................................................................18

2.2.

Các công nghệ hỗ trợ khác ........................................................................ 27

2.2.1.

Redux [3] ...........................................................................................27

2.2.2.

Sequelize ORM [4] ............................................................................29

2.2.3.

Ant Design [5] ...................................................................................30

2.2.4.

Cloudinary [6] ...................................................................................30

CHƯƠNG 3.
3.1.

XÁC ĐỊNH U CẦU BÀI TỐN .............................................32

Mơ hình hóa u cầu .................................................................................32

3.1.1.

Do Online Test For Interview ...........................................................35

3.1.2.

Manage quiz ...................................................................................... 37

3.1.3.

Manage account ................................................................................. 39

3.1.4.

Manage candidates ............................................................................ 41

3.1.5.

Manage campaigns ............................................................................ 42

CHƯƠNG 4.

THIẾT KẾ PHẦN MỀM ...............................................................45

7


4.1.

Thiết kế CSDL ..........................................................................................45

4.1.1.

user: Người dùng của hệ thống ........................................................ 46

4.1.2.

user_role: loại người dùng (HR / Candidate/ Interviewer) ...............46

4.1.3.

subject : thể loại ................................................................................47

4.1.4.

question_table: bài quiz .....................................................................47

4.1.5.

questiontable_question: bảng nối giữa question_table và question ..48

4.1.6.

question: bảng các câu hỏi................................................................. 48

4.1.7.

question_choices: bảng các câu trả lời .............................................. 49

4.1.8.

answer_record: bảng ghi nhận các lần thi của user với các bài quiz 49

4.1.9.

level: trình độ..................................................................................... 50

4.1.10.

work_type: loại làm việc ...................................................................50

4.1.11.

campaign: tin tuyển dụng ..................................................................50

4.1.12.

interview: đợt phỏng vấn ................................................................... 51

4.1.13.

group_candidate: ứng viên tham gia phỏng vấn ............................... 52

4.1.14.

company : Công ty ............................................................................ 52

4.1.15.

multichoice_choices: bảng nối giữa multichoice _table và choices . 53

4.2.

Thiết kế giao diện, Mô tả mục đích của màn hình ....................................54

4.2.1.

Join .................................................................................................... 54

4.2.2.

Activity/Created ................................................................................ 56

4.2.3.

Thumbnail (quiz detail) .....................................................................57

4.2.4.

Activity/Completed ...........................................................................58

4.2.5.

Setting Profile ....................................................................................59

4.2.6.

Pre-Game ........................................................................................... 62

4.2.7.

Review ...............................................................................................63

4.2.8.

Start game .......................................................................................... 65

4.2.9.

Do Quiz .............................................................................................65

4.2.10.

Pause ..................................................................................................67

4.2.11.

Creator popup .................................................................................... 68

4.2.12.

Quiz ...................................................................................................69

4.2.13.

Create question popup .......................................................................70

4.2.14.

Preview Popup ................................................................................... 72

8


4.2.15.

Teleport Popup ..................................................................................72

4.2.16.

Admin/My Quizz ...............................................................................73

4.2.17.

Admin/quizz control .......................................................................... 75

4.2.18.

Host Game ......................................................................................... 75

4.2.19.

Report ................................................................................................76

4.2.20.

Report/Interview/detail ......................................................................77

4.2.21.

Home .................................................................................................80

4.2.22.

Search Campaign ............................................................................... 81

4.2.23.

Recruit detail .....................................................................................82

4.2.24.

HR Manage........................................................................................84

4.2.25.

Assign interview ................................................................................ 90

4.3.

Thiết kế thư mục .......................................................................................95

CHƯƠNG 5.

KẾT QUẢ, THỰC NGHIỆM, PHÂN TÍCH .................................99

5.1.

Hệ thống Back-end.................................................................................... 99

5.2.

Hệ thống Front-end ...................................................................................99

CHƯƠNG 6.

KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN ...................................101

6.1.

Những điểm đạt được ..............................................................................101

6.2.

Những khó khăn và cách khắc phục .......................................................101

6.3.

Ưu điểm ...................................................................................................101

6.4.

Hướng phát triển .....................................................................................102

Tài liệu tham khảo ...................................................................................................103

9


Danh mục các từ viết tắt
HR: (Human Resources) nhân viên nhân sự
Interviewer: Nhân viên phỏng vấn
Candidate: Ứng viên
API: Application Programming Interface

10


Danh mục các bảng
Bảng 3.1 Usecase decription .....................................................................................32
Bảng 3.2. Usecase detail ...........................................................................................33

Bảng 3.3. Usecase Do Test Detail.............................................................................35
Bảng 3.4. Usecase manage quiz ................................................................................37
Bảng 3.5. Usecase manage account ..........................................................................39
Bảng 3.6. Usecase manage candidates ...................................................................... 41
Bảng 3.7. Usecase manage campaigns...................................................................... 43
Bảng 4.1. Bảng user. .................................................................................................46
Bảng 4.2. Bảng loại user ...........................................................................................46
Bảng 4.3. Bảng chủ đề/chuyên ngành .......................................................................47
Bảng 4.4. Bảng quiz ..................................................................................................47
Bảng 4.5. Bảng quan hệ giữa table và question ........................................................48
Bảng 4.6. Bảng câu hỏi .............................................................................................48
Bảng 4.7. Bảng câu trả lời ......................................................................................... 49
Bảng 4.8. Bảng ghi nhận câu trả lời của user............................................................ 49
Bảng 4.9. Bảng level ................................................................................................50
Bảng 4.10. Bảng work_type .....................................................................................50
Bảng 4.11. Bảng campaign ..................................................................................... 50
Bảng 4.12. Bảng interview .......................................................................................51
Bảng 4.13. Bảng group_candidate ...........................................................................52
Bảng 4.14. Bảng company ....................................................................................... 52
Bảng 4.15. Bảng quan hệ giữa multichoice_choices ............................................... 53
Bảng 4.16. Đặc tả giao diện Home ...........................................................................55
Bảng 4.17. Đặc tả giao diện Created .........................................................................57
Bảng 4.18. Đặc tả giao diện chi tiết của quiz ............................................................ 58
Bảng 4.19. Đặc tả giao diện completed ....................................................................59
Bảng 4.20. Đặc tả giao diện setting ..........................................................................60
Bảng 4.21. Đặc tả giao diện update role ................................................................... 61
Bảng 4.22. Đặc tả giao diện chuẩn bị thi ..................................................................63
Bảng 4.23. Đặc tả giao diện xem kết quả thi ............................................................64
Bảng 4.24. Đặc tả giao diện bắt đầu thi ....................................................................65
Bảng 4.25. Đặc tả giao diện thi quiz .........................................................................66

Bảng 4.26. Đặc tả giao diện pause khi đang thi ........................................................ 67
Bảng 4.27. Đặc tả giao diện tạo quiz ........................................................................68
Bảng 4.28. Đặc tả giao diện chỉnh sửa quiz .............................................................. 69
Bảng 4.29. Đặc tả giao diện tạo câu hỏi và câu trả lời.............................................. 71
Bảng 4.30. Đặc tả giao diện chỉnh sửa thông tin quiz .............................................. 72
Bảng 4.31. Đặc tả giao diện chỉnh sửa thông tin quiz .............................................. 73
Bảng 4.32. Đặc tả giao diện quản lý các bài quiz ..................................................... 74

11


Bảng 4.33. Đặc tả giao diện quản lý chi tiết quiz ..................................................... 75
Bảng 4.34. Đặc tả giao diện host quiz....................................................................... 76
Bảng 4.35. Đặc tả giao diện Report ..........................................................................77
Bảng 4.36. Đặc tả giao diện Report ..........................................................................78
Bảng 4.37. Đặc tả giao diện Report ..........................................................................79
Bảng 4.38. Đặc tả giao diện chính ............................................................................80
Bảng 4.39. Đặc tả giao diện search ........................................................................... 81
Bảng 4.40. Đặc tả giao diện recruit detail 1 .............................................................. 82
Bảng 4.41. Đặc tả giao diện recruit detail 2 .............................................................. 83
Bảng 4.42. Đặc tả giao diện HR manage .................................................................. 84
Bảng 4.43. Đặc tả giao diện HR manage create........................................................ 85
Bảng 4.44. Đặc tả giao diện HR manage edit ...........................................................86
Bảng 4.45. Đặc tả giao diện HR manage candidate .................................................. 87
Bảng 4.46. Đặc tả giao diện HR manage completed interview ................................88
Bảng 4.47. Đặc tả giao diện HR manage avalable candidates ..................................89
Bảng 4.48. Đặc tả giao diện manage campaign và interview của interviewer ........90

12

Danh mục các hình
Hình 2.1. Các bộ phận cấu thành một stack .............................................................. 18
Hình 2.2. MERN Stack .............................................................................................19
Hình 2.3. MySQL...................................................................................................... 21
Hình 2.4. NodeJS ...................................................................................................... 22
Hình 2.5. NodeJS Components .................................................................................23
Hình 2.6. ExpressJS ..................................................................................................24
Hình 2.7. ReactJS ......................................................................................................24
Hình 2.8. React lifecycle ...........................................................................................26
Hình 2.9. Nguyên lý hoạt động Redux......................................................................28
Hình 2.10. Cấu trúc Redux........................................................................................29
Hình 2.11. Sequelize ORM .......................................................................................30
Hình 2.12. Ant Design cho ReactJS ..........................................................................30
Hình 3.1. Usecase Diagram.......................................................................................32
Hình 3.2. Usecase Do Test Detail .............................................................................35
Hình 3.3. Usecase manage quiz ................................................................................37
Hình 3.4. Usecase manage account ........................................................................... 39
Hình 3.5. Usecase manage candidates ......................................................................41
Hình 3.6. Usecase manage campaigns ......................................................................42
Hình 4.1. EER Diagram ............................................................................................ 45
Hình 4.2. Giao diện Home ........................................................................................55
Hình 4.3. Giao diện Created......................................................................................57
Hình 4.4. Giao diện chi tiết của quiz.........................................................................58
Hình 4.5. Giao diện completed .................................................................................59
Hình 4.6. Giao diện setting .......................................................................................60
Hình 4.7. Giao diện update role ................................................................................ 61
Hình 4.8. Giao diện chuẩn bị thi ...............................................................................63
Hình 4.9. Giao diện giao diện xem kết quả thi .........................................................64
Hình 4.10. Giao diện bắt đầu thi ............................................................................... 65

Hình 4.11. Giao diện thi quiz .................................................................................... 66
Hình 4.12. Giao diện thi quiz với kiểu multichoice .................................................. 66
Hình 4.13. Giao diện pause khi đang thi ...................................................................67
Hình 4.14. Giao diện tạo quiz ...................................................................................68
Hình 4.15. Giao diện chỉnh sửa quiz .........................................................................69
Hình 4.16. Giao diện tạo câu hỏi và câu trả lời.........................................................71
Hình 4.17. Giao diện chỉnh sửa thơng tin quiz .........................................................72
Hình 4.18. Giao diện teleport .................................................................................... 73
Hình 4.19. Giao diện quản lý các bài quiz ................................................................74
Hình 4.20. Giao diện quản lý chi tiết quiz ................................................................75
Hình 4.21. Giao diện host quiz ................................................................................. 76

13


Hình 4.22. Giao diện Report .....................................................................................77
Hình 4.23. Giao diện Report .....................................................................................78
Hình 4.24. Giao diện Report .....................................................................................79
Hình 4.25. Giao diện chính ....................................................................................... 80
Hình 4.26. Giao diện search ...................................................................................... 81
Hình 4.27. Giao diện recruit detail 1 .........................................................................82
Hình 4.28. Giao diện recruit detail 2 .........................................................................83
Hình 4.29. Giao diện HR manage ............................................................................. 84
Hình 4.30. Giao diện HR manage create .................................................................. 85
Hình 4.31. Giao diện HR manage edit ......................................................................86
Hình 4.32. Giao diện HR manage candidate .............................................................87
Hình 4.33. Giao diện HR manage completed interview ...........................................88
Hình 4.34. Giao diện HR manage avalable candidates ............................................. 89
Hình 4.35. Giao diện manage campaign và interview của interviewer ................... 90

14


CHƯƠNG 1. TỔNG QUAN
1.1. Khảo sát hiện trạng
-

-

-

-

-

1.2.

Sự phát triển của công nghệ thông tin đã và đang làm thay đổi toàn bộ thế giới. Mọi
ngành nghề, mọi lĩnh vực như kinh tế, y khoa, công nghiệp… dần dần được tin học
hóa và làm cho cơng việc trở nên dễ dàng, nhanh chóng, chính xác hơn.
Đặc biệt trong cơng tác giáo dục và cả trong các công tác thi cử tuyển nhân sự, việc
tin học hóa góp phần nâng cao chất lượng dạy và học cũng như kiểm tra. Cho nên,
hình thức thi trắc nghiệm hay trắc nghiệm kết hợp với tin học đã trở thành một trong
những hình thức thi phổ biến nhất trên thế giới.
Với ưu điểm khách quan, chính xác và thuận tiện cho cả người ra đề và thí sinh đi
thi, hình thức thi này đã được áp dụng ở hầu khắp các nước, đặc biệt là trong các kỳ
thi của các tổ chức lớn có phạm vi toàn cầu như ETS (Educational Testing Service)
– tổ chức các kỳ thi TOEFL, GMAT, GRE…, Microsoft – tổ chức các kỳ thi MCSE,
MCAD…
Tại Việt Nam, trong những năm gần đây, song song với việc đổi mới phương pháp

dạy và học, việc đổi mới hình thức thi cử cũng trở thành một việc làm cấp thiết. Trong
các hình thức thi cử, trắc nghiệm khách quan là hình thức được nhiều người chú ý
nhất do những ưu điểm của nó trong việc kiểm tra, đánh giá trình độ người dự thi
như: khách quan, trung thực, kiểm tra được nhiều kiến thức, tránh được việc học tủ,
học vẹt…Do đó, trắc nghiệm đang là khuynh hướng của hầu hết các kỳ thi ở Việt
Nam hiện nay..
Chính vì vậy việc áp dụng tính năng này vào trong công tác tuyển nhân viên cho các
cơng ty để xác định được trình độ chun mơn cũng đang trên đà phát triển

Tính cấp thiết của đề tài

-

Việc phỏng vấn theo kiểu trực tiếp face to face chưa tối ưu về mặt thời gian và công
sức
o Người phỏng vấn chỉ có thể gặp một số lượng ứng viên nhất định trong một đợt phỏng
vấn để có thể hiểu rõ năng lực của từng ứng viên
o Bên cạnh đó người phỏng vấn phải kiểm tra từng người trong số họ để chọn lọc những
ứng cử viên sáng giá, chính vì thế làm tốn rất nhiều thời gian cho người phỏng vấn
cũng như kinh phí của cơng ty cho việc phỏng vấn
- Vấn đề đặt ra: Vậy có nên đưa tất cả các ứng viên vào trong một bài kiểm tra cụ thể
do người phỏng vấn đặt ra, sau đó chọn lọc ra các ứng viên sáng giá một cách nhanh
chóng? Từ đó sẻ giảm số lượng ứng viên sẽ cần phải phỏng vấn trực tiếp?
- Giải quyết vấn đề trên, việc thi giấy truyền thống cũng là một cách, nhưng cũng tiêu
tốn khá nhiều chi phí cho việc setup các tài liệu, đánh máy, khó chọn lọc câu hỏi theo
loại của các câu hỏi từ những bài kiểm tra trước, in ra,…

15

-

-

Chính vì thế việc cần một phần mềm vừa giúp nhân viên nhân sự đăng các bài tuyển
dụng cũng như quản lý các ứng viên đã nộp đơn ứng tuyển, vừa giúp cho người phỏng
vấn dễ dàng trong việc tạo bài quiz, hosting bài quiz và đưa cho các ứng viên thực
hiện, bên cạnh đó cịn có thể import các câu hỏi cần thiết từ file excel, chọn lọc các
câu hỏi cho bài quiz mới bằng cách lấy lại các câu hỏi của những bài quiz cũ theo
keyword
Cần có một thứ gì đó mới mẻ giúp cho ứng viên ứng tuyển cảm giác có một sự đặc
biệt nào đó đối với cơng ty, từ đó sẽ có nhiều ứng viên ứng tuyển hơn

1.3. Mục tiêu và nhiệm vụ đề tài
1.3.1. Mục tiêu

o
o
o
o
o
o
o
o
o
o
o

Xây dựng các tính năng hỗ trợ nhân viên nhân sự cho việc phỏng vấn và tuyển nhân
viên cho công ty:

Đăng tin tuyển dụng
Sắp xếp ứng viên theo các đợt phỏng vấn
Đưa các người phỏng vấn vào đợt phỏng vấn và ra các bài quiz cho ứng viên để kiểm
tra kiến thức
Xem xét các bài thi sau khi ứng viên đã thi xong và đưa ra kết quả phỏng vấn
Xây dựng một trang web trắc nghiệm trực tuyến, hỗ trợ cho việc kiểm tra trình độ,
rèn luyện, ơn tập kiến thức một cách cơ bản nhất với những chức năng sau
Quản lý thông tin bài quiz: Cho phép thêm, xóa, sửa bài quiz, import file, lấy lại được
các câu hỏi của các bài quiz trước,…
Quản lý kết quả của các ứng viên tham gia vào bài quiz và thông tin chi tiết của mỗi
bài quiz.
Quản lý câu hỏi: Cho phép thêm câu hỏi, xóa, chỉnh sửa câu hỏi, ...
Quản lý nhóm câu hỏi: chia làm 3 nhóm: dễ, bình thường và khó
Thực hiện cho thành viên làm bài
Lưu lại q trình làm trong trường hợp máy tính gặp sự cố hoặc ngắt mạng
Cũng có thể kiểm tra lại nếu như lần kiểm tra trước gặp sự cố

1.3.2. Nhiệm vụ

-

Tìm hiểu, tham khảo các chức năng và giao diện của các hệ thống tương tự
Tìm hiểu về các API để gửi trả dữ liệu từ BackEnd vào FrontEnd và ngược lại
Tìm hiểu thêm các cơng nghệ hỗ trợ khác để chỉnh sửa và xây dựng các tính năng
mới
Xây dựng trang web thân thiện, có liên kết account với Gmail
Xây dựng thêm các tính năng kiểm tra cho các ứng viên thi và các qui định thời gian
và số lượt làm bài tập cũng như lấy lại cookie bài đang thi nếu lỡ như ứng viên thoát
khỏi bài thi do sự cố nào đó

16


-

Tìm hiểu cách lưu các file có dung lượng lớn bằng cloudinary (như hình ảnh, pdf,…)
Nghiên cứu và deloy ứng dụng lên nền tảng Heroku

1.4. Cơng nghệ lập trình
-

Sử dụng ExpressJS và NodeJS để viết server backend và ReactJS phía Frontend
Sử dụng MySQL để tạo nên cơ sở dữ liệu chính cho project
Để triển khai hệ thống thơng qua mạng Internet, nhóm sử dụng các dịch vụ của
Heroku

1.5. Phạm vi nghiên cứu
- Tìm hiểu và áp dụng các cộng nghệ sử dụng trong đề tài:
o ReactJS: xây dựng Single Page Application áp dụng ReactJS và các thư viện liên
quan
o MySQL: Xây dựng lên các dữ liệu cần thiết cũng như các mối quan hệ giữa các bảng
tạo tiền đề để phát triển nên Project
o ExpressJS: Xây dựng lên các API để gửi và nhận dữ liệu từ ReactJS và NodeJS
o NodeJS: Xây dựng server cho cả Project

17


CHƯƠNG 2. CƠ SỞ LÝ THUYẾT
2.1. Giới thiệu về MERN Stack [1]

-

Technical stack là gì? Lang thang trên mạng, ta thường nghe nhắc đến những một số
thuật ngữ như LAMP Stack, MEAN Stack,vv . Trong quá trình xây dựng sản phẩm
start-up, ta cũng hay nghe nhắc tới tầm quan trọng của việc chọn technical stack cho
phù hợp.

2.1.1. Stack là gì, tại sao nó ra đời?

-

-

-

Để làm ra một ứng dụng hồn chỉnh, chỉ viết code khơng thơi là khơng đủ. Khi cần
lưu trữ thông tin, ta phải đưa chúng vào cơ sở dữ liệu. Sau khi đã hoàn thành phần
code, ta phải tìm cách deploy nó, tức là đưa code lên một chỗ nào đó để chạy code.
Một chương trình hồn thiện khơng chỉ có code, mà cịn phải có nền tảng hệ điều
hành và những phần mềm đi kèm (web server, cơ sở dữ liệu). Người ta gom những
thứ này lại với nhau, tạo thành technical stack.
Technical Stack, còn gọi là solution stack, là một tập hợp những phần mềm/công
nghệ phối hợp chung với nhau, tạo thành một nền tảng để ứng dụng có thể hoạt động
được.

Hình 2.1. Các bộ phận cấu thành một stack

2.1.2. MERN Stack [2]

-

Một stack cũng khá nổi trong vài năm trở lại đây là MERN stack.
MERN stack là nguyên bộ combo open source các công nghệ đều liên quan đến
Javascript là cũng hot nhất hiện nay: MongoDB/MySQL, ExpressJS, React/React

18


Native, NodeJS. Người ta hay dùng MERN stack để xây dựng SPA (Single Page
Application).
-

Thật ra stack này khơng hồn tồn đúng chuẩn stack vì nó khơng bao gồm hệ điều
hành. NodeJS dùng để viết code server-side, có thể hoạt động như web server luôn
(Trong thực tế người ta thường dùng thêm nginx làm proxy server).

Hình 2.2. MERN Stack

2.1.2.1. MySQL
MySQL là hệ quản trị cơ sở dữ liệu tự do nguồn mở phổ biến nhất thế giới và được
các nhà phát triển rất ưa chuộng trong quá trình phát triển ứng dụng. Vì MySQL là
cơ sở dữ liệu tốc độ cao, ổn định và dễ sử dụng, có tính khả chuyển, hoạt động trên
nhiều hệ điều hành cung cấp một hệ thống lớn các hàm tiện ích rất mạnh. Với tốc độ
và tính bảo mật cao, MySQL rất thích hợp cho các ứng dụng có truy cập Cơ sở dữ
liệu trên internet. Người dùng có thể tải về MySQL miễn phí từ trang chủ. MySQL
có nhiều phiên bản cho các hệ điều hành khác nhau: phiên bản Win32 cho các hệ điều
hành dòng Windows, Linux, MacOSX, Unix, FreeBSD, NetBSD, Novell NetWare,
SGI Irix, Solaris, SunOS…[5]
- MySQL là một trong những ví dụ rất cơ bản về Hệ Quản trị Cơ sở dữ liệu quan hệ sử
dụng Ngơn ngữ truy vấn có cấu trúc (SQL).

- MySQL được sử dụng cho việc bổ trợ NodeJs, PHP, Perl, và nhiều ngôn ngữ khác,
làm nơi lưu trữ những thông tin trên các trang web viết bằng NodeJs, PHP hay Perl…
- Các đặc điểm của MySQL:

19


o Linh hoạt: Sự linh hoạt về platform là 1 đặc tính nổi bật của MySQL với các phiên
bản đang được hỗ trợ của Linux, Unix, Windows, MySQL cho phép tùy biến hoàn
toàn theo ý muốn, thêm vào các yêu cầu thích hợp cho database server.
o Thực thi cao: Các chun gia cơ sở dữ liệu có thể cấu hình máy chủ cơ sở dữ liệu
MySQL đặc trưng cho các ứng dụng đặc thù thơng qua kiến trúc storage-engine.
MySQL có thể đáp ứng khả năng xử lý những yêu cầu khắt khe nhất của từng hệ
thống, MySQL còn đưa ra các “công cụ” cần thiết cho các hệ thống doanh nghiệp
khó tính bằng tiện ích tải tốc độ cao, bộ nhớ cache và các cơ chế xử lý nâng cao khác.
o Sử dụng ngay: Các tiêu chuẩn đảm bảo của MySQL giúp cho người dùng vững tin
và chọn sử dụng ngay, MySQL đưa ra nhiều tùy chọn và các giải pháp để người sử
dụng dùng ngay cho server cơ sở dữ liệu MySQL
o Hỗ trợ giao dịch: MySQL hỗ trợ giao dịch mạnh 1 cách tự động, thống nhất, độc lập
và bền vững, ngoài ra khả năng giao dịch cũng được phân loại và hỗ trợ giao dịch đa
dạng mà người viết không gây trở ngại cho người đọc và ngược lại. Các dữ liệu được
đảm bảo toàn vẹn trong suốt q trình server có hiệu lực và các mức giao dịch độc
lập được chun mơn hóa cao.
o Nơi tin cậy để lưu trữ web và dữ liệu: Do MySQL có engine xử lý tốc độ cao và khả
năng chèn dữ liệu nhanh, hỗ trợ tốt cho các chức năng chuyên dùng cho web,…nên
MySQL là lựa chọn tốt nhất cho các ứng dụng web và các ứng dụng web doanh
nghiệp.
o Bảo mật tốt: Doanh nghiệp nào cũng cần tính năng bảo mật dữ liệu tuyệt đối vì đó
chính là lợi ích quan trọng hàng đầu, và đó cũng là lý do mà các chuyên gia về cơ sở
dữ liệu chọn dùng MySQL. MySQL có các kỹ thuật mạnh trong việc xác nhận truy

cập cơ sở dữ liệu và chỉ có người dùng đã được xác nhận mới có thể truy cập vào
server cơ sở dữ liệu. Bên cạnh đó, tiện ích backup và recovery cho phép backup logic
và recovery toàn bộ hoặc tại 1 thời điểm nào đó.
o Phát triển ứng dụng hỗn hợp: MySQL cung cấp hỗ trợ hỗn hợp cho bất kỳ sự phát
triển ứng dụng nào nên MySQL được xem là cơ sở dữ liệu mã nguồn mở phổ biến
nhất thế giới. Thư viện plugin có sẵn để nhúng vào cơ sở dữ liệu MySQL hỗ trợ trong
bất kỳ ứng dụng nào. MySQL còn cung cấp các bộ kết nối cho phép tất cả các form
của ứng dụng ưu tiên sử dụng MySQL như 1 server quản lý dữ liệu.
o Dễ quản lý : Quá trình cài đặt MySQL diễn ra khá nhanh chóng trên Microsoft
Windows, Linux, Macintosh hoặc Unix. Sau khi cài đặt, các tính năng tự động mở
rộng không gian, tự khởi động lại và cấu hình động được thiết lập sẵn sàng cho người
quản trị cơ sở dữ liệu làm việc. MySQL cịn có các cơng cụ quản lý đồ họa mà một
DBA có thể quản lý, sửa chữa và điều khiển hoạt động của nhiều server, điều khiển
tác vụ thiết kế dữ liệu và ETL, quản trị cơ sở dữ liệu hoàn thiện cũng như quản lý
công việc và thực hiện kiểm tra.
o Mã nguồn mở tự do và hỗ trợ xuyên suốt: Nhiều doanh nghiệp lo lắng việc sử dụng
mã nguồn mở là khơng an tồn và khơng được hỗ trợ tốt vì đa số tin vào các phần

20


mềm có bản quyền, nhưng đối với MySQL, các nhà doanh nghiệp hồn tồn có thể
n tâm về điều này, MySQL có chính sách bồi thường hẳn hoi và ln hỗ trợ tối đa
cho quý doanh nghiệp.
o Chi phí thấp: Đối với các dự án phát triển mới, nếu các doanh nghiệp sử dụng MySQL
thì đó là 1 chọn lựa đúng đắn vừa tiết kiệm chi phí vừa đáng tin cậy. Mức duy trì của
MySQL khơng chiếm nhiều thời gian sửa chữa của người quản trị cơ sở dữ liệu và
các doanh nghiệp thật sự hài lòng về khả năng xử lý thông qua việc sử dụng server
cơ sở dữ liệu MySQL và kiến trúc scale-out.[6]

Hình 2.3. MySQL

2.1.2.2. NodeJS
2.1.2.2.1. Giới thiệu NodeJS
-

-

NodeJS là một mã nguồn được xây dựng dựa trên nền tảng Javascript V8 Engine, nó
được sử dụng để xây dựng các ứng dụng web như các trang video clip, các forum và
đặc biệt là trang mạng xã hội phạm vi hẹp.
NodeJS là một mã nguồn mở được sử dụng rộng bởi hàng ngàn lập trình viên trên
tồn thế giới.
NodeJS có thể chạy trên nhiều nền tảng hệ điều hành khác nhau từ WIndow cho tới
Linux, OS X nên đó cũng là một lợi thế. NodeJS cung cấp các thư viện phong phú ở
dạng Javascript Module khác nhau giúp đơn giản hóa việc lập trình và giảm thời gian
ở mức thấp nhất

21


Hình 2.4. NodeJS

2.1.2.2.2. Các đặc tính của NodeJS
- Qua phần tìm hiểu NodeJS là gì mình có giới thiệu một đặc tính rất quan trọng đó là
Realtime, tuy nhiên vẫn cịn khá nhiều đặc tính mà bạn cần phải biết trước khi học
NodeJS.
o Không đồng bộ: Tất cả các API của NodeJS đều khơng đồng bộ (none-blocking), nó
chủ yếu dựa trên nền của NodeJS Server và chờ đợi Server trả dữ liệu về. Việc di
chuyển máy chủ đến các API tiếp theo sau khi gọi và cơ chế thông báo các sự kiện

của Node.js giúp máy chủ để có được một phản ứng từ các cuộc gọi API trước
(Realtime).
o Chạy rất nhanh: NodeJ được xây dựng dựa vào nền tảng V8 Javascript Engine nên
việc thực thi chương trình rất nhanh.
o Đơn luồng nhưng khả năng mở rộng cao: Node.js sử dụng một mơ hình luồng duy
nhất với sự kiện lặp. cơ chế tổ chức sự kiện giúp các máy chủ để đáp ứng một cách
không ngăn chặn và làm cho máy chủ cao khả năng mở rộng như trái ngược với các
máy chủ truyền thống mà tạo đề hạn chế để xử lý yêu cầu. Node.js sử dụng một
chương trình đơn luồng và các chương trình tương tự có thể cung cấp dịch vụ cho
một số lượng lớn hơn nhiều so với yêu cầu máy chủ truyền thống như Apache HTTP
Server.
o Khơng đệm: NodeJS khơng đệm bất kì một dữ liệu nào và các ứng dụng này chủ yếu
là đầu ra dữ liệu.
o Có giấy phép: NodeJS đã được cấp giấy phép bởi MIT License.
- Sau đây là sơ đồ về các thành phần quan trọng trong NodeJS mà trong series này
chúng ta sẽ tìm hiểu dần (hình sưu tầm từ tutorialspoint).

22


Hình 2.5. NodeJS Components

2.1.2.3. Express
- ExpressJS là một trong những framework phổ biến dùng để xây dựng API và Website
phổ biến nhất của NodeJS. Nó được sử dụng rộng rãi đến mức hầu như mọi dự án
Web nào đều bắt đầu bằng việc tích hợp Express. Có rất nhiều lý do để chọn
ExpressJS:
o Có nhiều tính năng hỗ trợ tất cả những gì bạn cần trong việc xây dựng Web và API
o Quản lý các route dễ dàng
o Cung cấp một nền tảng phát triển cho các API

o Hỗ trợ nhiều thư viện và plugin
o Bảo mật và an toàn hơn so với việc code thuần
o Hỗ trợ cộng đồng tuyệt vời

23


Hình 2.6. ExpressJS

2.1.2.4. ReactJS
2.1.2.4.1. Giới thiệu

Hình 2.7. ReactJS

-

ReactJS là thư viện front-end được phát triển bởi Facebook. Là một trong số những
thư viện Javascript phổ biến nhất trên thế giới. ReactJS ra đời để giải quyết các vấn
đề của những ứng dụng MVC, khi sử dụng ReactJS ứng dụng sẽ trở nên nhanh, đơn
giản, nâng cao hiệu năng và dễ dàng mở rộng hơn.

24


-

ReactJS sử dụng Virtual-DOM để tăng hiệu năng cho ứng dụng. Thay vì tạo ra thay
đổi trực tiếp vào DOM của trình duyệt nó tạo ra thay đổi trên Virtual-DOM sau đó
so sánh sự khác biệt giữa hai DOM và chỉ nhập sự khác biệt giữa hai DOM cho DOM
của trình duyệt.

2.1.2.4.2. JSX
- JSX (Javascript XML) là cú pháp mở rộng cho dành cho Javascript là sự kết hợp của
Javascript và XML. JSX cung cấp cú pháp thay cho câu lệnh React.createElement().
- Mã lệnh viết bằng JSX sẽ được chuyển sang Javascript để trình duyệt có thể hiểu
được.
- JSX dùng để khai báo React element hoặc khi render component.
2.1.2.4.3. Component
- Component cho phép chúng ta chia nhỏ các phần của giao diện độc lập để dễ dàng
quản lý và tái sử dụng ở nhiều nơi với các trạng thái hoặc thuộc tính khách nhau.
- Ta sử dụng component bằng cách gọi tên component và sử dụng giống như thẻ trong
HTML.
- Có hai loại component trong ReactJS:
 Function Component trả về một đoạn JSX và đoạn này sẽ được biên dịch thành một
React Element, thường được sử dụng trong trường hợp Component chỉ để hiển thị
mà không cần quản lý các trạng thái của Component. Tuy nhiên hiện nay ReactJS đã
tạo ra một khái niệm React Hook để có thể quản lý state (trạng thái) trong Function
Component và được khuyên dùng để thay thế Class Component.
 Class Component thường được sử dụng khi cần quản lý các state (trạng thái) của
Component. ReactJS quản lý và sử dụng state và props.
-

Component quản lý và sử dụng props và state. State là trạng thái của riêng
Component, khi state thay đổi Component được render lại và từ đó cập nhật lại DOM.
Props là viết tắt của property thường được dùng để truyền dữ liệu từ Component này
sang Component khác, props thì khơng được thay đổi bên trong Component.

2.1.2.4.4. Life Circle
- React lifecycle chia làm 3 giai đoạn:
 Mounting.

 Updating.
 Unmounting.

25


Hình 2.8. React lifecycle

-

Cũng như con người chúng ta được sinh ra lớn lên và mất đi. ReactJS được sinh ra
trong giai đoạn Mounting, lớn lên ở Updating và kết thúc tại Unmounting. Giai đoạn
Mounting và Unmounting chỉ xảy ra một lần, giai đoạn Updating được thực hiện liên
tục trong suốt quá trình ứng dụng chạy.

26


Với mỗi giai đoạn ReactJS sẽ hỗ trợ một vài phương thức để xử lý sau:
 Mounting
o constructor(): hàm constructor thường được sử dụng để định nghĩa props, khai báo
state hoặc kiểm tra điều kiện trước khi render giao diện.
o componentDidMount(): thường được sử dụng để gọi API và lưu dữ liệu vào state.
 Updating
o componentDidUpdate(): phương thức được gọi khi component update, nên hạn chế
sử dụng phương thức này vì nó có thể dẫn đến vịng lặp vơ tận giảm hiệu năng ứng
dụng.
 Unmounting
o componentWillUnmount(): được gọi trước khi một component mất đi, sử dụng để
remove các listener, các hàm setInterval, cancel network request.

2.2. Các công nghệ hỗ trợ khác
2.2.1. Redux [3]

-

Redux js là một thư viện Javascript giúp tạo ra thành một lớp quản lý trạng thái của
ứng dụng. Được dựa trên nền tảng tư tưởng của ngôn ngữ Elm kiến trúc Flux do
Facebook giới thiệu, do vậy Redux thường là bộ đơi kết hợp hồn hảo với React
(ReactJs và React Native).

27


Hình 2.9. Nguyên lý hoạt động Redux

- Redux được xây dựng dựa trên 3 nguyên lý:
o Nguồn dữ liệu tin cậy duy nhất: State của toàn bộ ứng được chứa trong một object
tree nằm trong Store duy nhất
o Trạng thái chỉ được phép đọc: Cách duy nhất để thay đổi State của ứng dụng là phát
một Action (là 1 object mơ tả những gì xảy ra)
o Thay đổi chỉ bằng hàm thuần túy: Để chỉ ra cách mà State được biến đổi bởi Action
chúng ta dùng các pure function gọi là Reducer
- Về cơ bản Redux có 4 thành phần như sau:
o Action: Là nơi mang các thông tin dùng để gửi từ ứng dụng đến Store. Các thông tin
này là 1 object mơ tả những gì đã xảy ra.
o Reducer: Là nơi xác định State thay đổi như thế nào.
o Store: Là nơi quản lý State, cho phép truy cập State qua getState(), update State qua
dispatch(action), đăng kí listener qua subscribe(listener).
o View: Hiển thị dữ liệu được cung cấp bởi Store

28


Hình 2.10. Cấu trúc Redux

2.2.2. Sequelize ORM [4]

-

-

ORM (“Object Relational Mapping”) là tên gọi chỉ việc ánh xạ các record dữ liệu
trong hệ quản trị cơ sở dữ liệu sang dạng đối tượng mà mã nguồn đang định nghĩa
trong class. Là một khái niệm phổ biến, được cài đặt trong tất cả các loại ngôn ngữ
hiện đại ngày nay như: java, php, node.js, swift…
Sequelize là một ORM nền Promise dành cho Node.js và io.js. Nó hỗ trợ biên dịch
PostgreSQL, MySQL, MariaDB, SQLite và MSSQL và hỗ trợ giao tác cứng, các
quan hệ, read replication và nhiều hơn thế

29


Hình 2.11. Sequelize ORM

-

Điểm mạnh của ORM là lập trình viên có thể giữ tư duy như với đối tượng của
JavaScript thay vì phải ngơn ngữ thuần t viết riêng cho cơ sở dữ liệu, điều này càng
đúng khi bạn phải làm việc với nhiều loại cơ sở dữ liệu (trên cùng hoặc khác trang

web). ORM còn cung cấp các tính năng để thực hiện xác thực và kiểm tra dữ liệu

2.2.3. Ant Design [5]

-

Ant là tập hợp các components của React được xây dựng theo chuẩn thiết kế của Ant
UED Team.
Tương tự như chuẩn Material Design, Ant cung cấp hầu hết các component thông
dụng trong ứng dụng web hiện đại, như Layout, Button, Icon, DatePicket, v.v…
Bên cạnh đó Ant cũng có những component riêng thú vị, như LocaleProvider cho
phép bạn thay đổi ngơn ngữ trên tồn ứng dụng.

Hình 2.12. Ant Design cho ReactJS

2.2.4. Cloudinary [6]

2.2.4.1. Giới thiệu
- Cloudinary là một cloud-based service, nó cung cấp một giải pháp quản lý hình ảnh
bao gồm upload, lưu trữ, thao tác, tối ưu hóa và delivery.
- Với cloudinary bạn có thể dễ dàng upload ảnh lên cloud, tự động thực thi các thao
tác với ảnh một cách thông minh mà không cần phải cài đặt bất kì một phần mềm

30


phức tạp nào khác. Cloudinary cung cấp các APIs toàn diện và màn hình quản lý giúp
chúng ta dễ dàng tích hợp vào các trang web và ứng dụng di động.
2.2.4.2. Những tính năng chính
- Cloudinary cung cấp một Ruby Gem để dễ dàng cho việc tương tác với các app viết

bởi ngôn ngữ Ruby với một số framwork như là Rails hay Sinatra với các tương tác
chính sau:
o Xây dựng các URL để chuyển đổi và thao tác với hình ảnh
o Rails view helper cho việc nhúng và thay đổi hình ảnh
o API wrappers: upload image, quản lý và nhiều thứ khác
o Upload image trực tiếp từ trình duyệt sử dụng một jQuery plugin.
o Tích hợp với Active Record
o CarrierWave plugin
o Hình ảnh tĩnh đồng bộ với CDN delivery
o Migration tool

31