Xây dựng website kết nối các doanh nghiệp IT việt nam với khách hàng quốc tế

ĐẠI HỌC ĐÀ NẴNG
TRƯỜNG ĐẠI HỌC SƯ PHẠM
KHOA TIN HỌC

BÁO CÁO
KHÓA LUẬN TỐT NGHIỆP
TÊN ĐỀ TÀI

XÂY DỰNG WEBSITE
KẾT NỐI CÁC DOANH NGHIỆP
IT VIỆT NAM VỚI KHÁCH HÀNG QUỐC TẾ

CBHD

: PGS.TSKH. Trần Quốc Chiến

Sinh viên

: Hồ Tuấn Vũ

Lớp
MSSV

: 16 CNTTC
: 312045161136

ĐÀ NẴNG, tháng 05/2020


LỜI CẢM ƠN
Em chân thành cảm ơn các thầy cô trong khoa Tin, trường Đại học Sư

phạm, Đại học Đà Nẵng đã tận tình truyền đạt những kiến thức quý báu suốt
những năm đại học vừa qua, để hôm nay em có thể có đầy đủ kiến thức để
thực hiện đề tài thực tập này.
Đặc biêt, em xin chân thành cảm ơn GVHD PGS.TSKH. Trần Quốc
Chiến đã tận tình giúp đỡ, trực tiếp hướng dẫn em trong suốt quá trình thực
hiện đề tài này.
Đồng thời cũng gửi lời cảm ơn đến tất cả các bạn sinh viên cùng khóa
và tập thể lớp 16CNTTC khoa Tin học – Trường ĐH Sư phạm – ĐH Đà Nẵng
đã ủng hộ, giúp đỡ, chia sẻ kiến thức và kinh nghiệm trong thời gian qua
Mặc dù đã cố gắng hoàn thành đồ án trong phạm vi và khả năng cho
phép nhưng chắc chắn sẽ không tránh khỏi những thiếu sót. Em rất mong
nhận được sự thơng cảm, góp ý và tận tình chỉ bảo của quý Thầy Cô và các
bạn.
Đà nẵng, ngày 12 tháng 05 năm 2020
Sinh viên thực hiện
Hồ Tuấn Vũ


1
`

LỜI CAM ĐOAN
Tôi xin cam đoan:
1. Những nội dung trong báo cáo này là do tôi thực hiện dưới sự hướng dẫn
trực tiếp của GVHD PGS.TSKH. Trần Quốc Chiến và các anh chị trong
Công Ty Cổ Phần Napa Global Đà Nẵng.
2. Mọi tham khảo dùng trong báo cáo này đều được trích dẫn rõ ràng tên tác
giả, tên cơng trình, thời gian, địa điểm công bố.
3. Mọi sao chép không hợp lệ, vi phạm quy chế đào tạo, hay gian trá, tơi xin
chịu hồn tồn trách nhiệm.

Sinh viên thực hiện,

Hồ Tuấn Vũ

Hồ Tuấn Vũ – Lớp 16CNTTC (2016-2020)


2
`

NHẬN XÉT CỦA CÁN BỘ HƯỚNG DẪN
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………

………………………………………………………………………………………………
………………………………………………………………………………………………

Đà Nẵng, ngày tháng năm 2020
Cán bộ hướng dẫn

Hồ Tuấn Vũ – Lớp 16CNTTC (2016-2020)


3
`

NHẬN XÉT CỦA HỘI ĐỒNG PHẢN BIỆN
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………

………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………

Đà Nẵng, ngày tháng năm 2020
Hội đồng phản biện

Hồ Tuấn Vũ – Lớp 16CNTTC (2016-2020)


4
`

Mục lục
BẢNG PHÂN CÔNG CÔNG VIỆC TRONG DỰ ÁN ................................ 6
DANH MỤC CÁC BẢNG .............................................................................. 8
DANH MỤC HÌNH ẢNH ............................................................................. 10
MỞ ĐẦU ........................................................................................................ 12
1.Bối cảnh đề tài. ......................................................................................... 12
2.Sơ lược các bước trong đề tài................................................................... 13
Mục đích................................................................................................................... 13
Mục tiêu của đề tài ................................................................................................... 13
Kết quả dự kiến ........................................................................................................ 14

CHƯƠNG 1: CƠ SỞ LÝ THUYẾT ............................................................ 15
1.1 Tổng quan về nền tảng công nghệ ........................................................ 17
1.1.1Material UI ....................................................................................................... 17
1.1.2. CSS................................................................................................................. 17
1.1.3. ReactJS ........................................................................................................... 19
1.1.4 NodeJS ............................................................................................................ 20

1.1.5 HapiJS ............................................................................................................. 21
1.1.6 Test Driven Development ............................................................................... 21
1.1.7 Cypress ............................................................................................................ 23

1.2. Cơ sở dữ liệu PostgreSQL ................................................................... 24
1.2.1. Mục đích sử dụng cơ sở dữ liệu ..................................................................... 24
1.2.2 Giới thiệu về PostgreSQL ............................................................................... 25

CHƯƠNG 2: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG ........................ 27
2.1 Giới thiệu Website ................................................................................ 27
2.2 Phân tích và thiết kế hệ thống ............................................................... 27
2.2.1. Phân tích yêu cầu chức năng người dùng....................................................... 27
2.2.2 Thiết kế hệ thống ............................................................................................. 29
2.2.3 Sơ đồ luồng dữ liệu ......................................................................................... 30
2.2.4 Sơ đồ Use case tổng quát ................................................................................ 32
2.2.5 Phân rã sơ đồ chức năng ................................................................................. 36
2.2.6 Yêu cầu chức năng và đặc tả Use case ............................................................ 40
Hồ Tuấn Vũ – Lớp 16CNTTC (2016-2020)


5
`
2.2.7 Thiết kế cơ sở dữ liệu ...................................................................................... 44
2.2.8 Cấu trúc bảng và ràng buộc............................................................................. 45

CHƯƠNG 3: CÀI ĐẶT VÀ THỬ NGHIỆM ............................................. 51
3.1 Kết quả triển khai .................................................................................. 51
3.1.1 Giao diện trang index ...................................................................................... 51
3.1.2 Giao diện đăng ký ........................................................................................... 54
3.1.3 Giao diện đăng nhập........................................................................................ 55

3.1.4 Giao diện display project của doanh nghiệp IT và khách hàng quốc tế .......... 56
3.1.5 Giao diện đăng ký dự án ................................................................................. 57
3.1.6 Giao diện reviewBidding ................................................................................ 58
3.1.7 Giao diện phòng chat ...................................................................................... 59
3.1.8 Giao diện Company......................................................................................... 61
3.1.9 Giao diện trang OnGoing ................................................................................ 62
3.1.10 Giao diện trang OnGoing Detail ................................................................... 63
3.1.11 Giao diện User Profile ................................................................................... 64
3.1.12 Giao diện trang admin verify request ............................................................ 65

3.2 Kiểm thử website .................................................................................. 66
KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN ................................................... 67
TÀI LIỆU THAM KHẢO ............................................................................ 71

Hồ Tuấn Vũ – Lớp 16CNTTC (2016-2020)


6
`

BẢNG PHÂN CƠNG CƠNG VIỆC TRONG DỰ ÁN
Thành viên

Cơng việc

Mơ tả chi tiết

Mai Trọng Hiếu

Technical Leader

(Nhân sự tại công ty)

Product Owner

- Đào tạo về công nghệ cho
sinh viên thực tập
- Hướng dẫn cho sinh viên
thực tập về cách hoạt động
của một dự án, các yêu cầu
về dự án và quy định về
phương pháp làm việc
- Đưa ra các yêu cầu đánh
giá về sản phẩm
- Hỗ trợ giải đáp các thắc
mắc, khó khăn của sinh viên
trong q trình làm việc

Lê Xn Nhì
(Nhân sự tại cơng ty)

Project Manager
Data Scientist

- Quản lý về thời gian làm
việc của sinh viên tại công
ty
- Lập báo cáo thường nhật
sau mỗi sprint
- Đưa ra các góp ý về

database system

Dương Long Nhật

Developer

(Sinh viên thực tập)

Tester

- Tham gia thiết kế, xây
dựng, kiểm thử dự án
- Tham gia vào các màn
hình Display project, User
profile & Company profile

Nguyễn Hồng Duy

Developer

(Sinh viên thực tập)

Tester

- Tham gia thiết kế, xây
dựng, kiểm thử dự án
- Tham gia vào các màn
hình Index, Chat

Hồ Tuấn Vũ

Developer

(Sinh viên thực tập)

Tester

- Tham gia thiết kế, xây
dựng, kiểm thử dự án
- Tham gia vào các màn
hình Login, Register, On
Going, OnGoing Detail

Hồ Tuấn Vũ – Lớp 16CNTTC (2016-2020)


7
`
..Register bidding
- Authorization
Nguyễn Hữu Bính Giáp

Developer

(Sinh viên thực tập)

Tester

- Tham gia thiết kế, xây
dựng, kiểm thử dự án

- Tham gia vào các màn
hình Create Project,
Attending project, Review
bidding

Hồ Tuấn Vũ – Lớp 16CNTTC (2016-2020)


8
`

DANH MỤC CÁC BẢNG

Bảng 1:Bảng mô tả sử dụng website của khách vãng lai ................................ 40
Bảng 2: Bảng mô tả sử dụng hệ thống của doanh nghiệp IT Việt Nam ......... 41
Bảng 3: Bảng mô tả sử dụng hệ thống của khách hàng quốc tế ..................... 42
Bảng 4: Bảng mô tả sử dụng hệ thống của Ban quản trị ................................. 43
Bảng 5: Bảng UserAccounts ........................................................................... 45
Bảng 6: Bảng Project....................................................................................... 45
Bảng 7: Bảng ProjectBiddings ........................................................................ 46
Bảng 8: Bảng TrialProjects ............................................................................. 46
Bảng 9: Bảng Companies ................................................................................ 47
Bảng 10: Bảng TrialProjectProposals ............................................................. 48
Bảng 11: Bảng VerifyCompanies ................................................................... 48
Bảng 12: Bảng Roles ....................................................................................... 49
Bảng 13: Bảng StatusAccounts ....................................................................... 49
Bảng 14: Notifications .................................................................................... 49
Bảng 15: Bảng UserProfiles ............................................................................ 50
Bảng 16: Bảng Messages ................................................................................ 50
Bảng 17: Bảng phân cơng cơng việc trong q trình thực tập ........................ 67

Hồ Tuấn Vũ – Lớp 16CNTTC (2016-2020)


9
`

Bảng 18: Chức năng dành cho khách hàng quốc tế ........................................ 68
Bảng 19: Chức năng dành cho Doanh nghiệp IT Việt Nam ........................... 68
Bảng 20: Chức năng dành cho Quản trị viên .................................................. 69

Hồ Tuấn Vũ – Lớp 16CNTTC (2016-2020)


10
`

DANH MỤC HÌNH ẢNH
Hình 1: Mơ hình chu trình TDD .................................................................... 22
Hình 2: Sơ đồ mức ngữ cảnh.......................................................................... 30
Hình 3: Sơ đồ mức 0 ...................................................................................... 31
Hình 4: Sơ đồ Use Case tổng quát ................................................................. 32
Hình 5: Sơ đồ Use Case tổng quát của quản trị viên ..................................... 33
Hình 6: Sơ đồ Use Case tổng quát của Doang nghiệp ................................... 34
Hình 7: Sơ đồ Use case tổng quát của khách hàng quốc tế ........................... 35
Hình 8: Sơ đồ phân rã chức năng của khách vãng lai .................................... 36
Hình 9: Sơ đồ phân rã chức năng của khách hàng ......................................... 37
Hình 10: Sơ đồ phân rã chức năng của doanh nghiệp.................................... 38
Hình 11: Sơ đồ phân rã chức năng của quản trị viên ..................................... 39
Hình 12: Sơ đồ cơ sở dữ liệu.......................................................................... 44
Hình 13: Giao diện trang index ...................................................................... 53

Hình 14: Giao diện trang đăng ký .................................................................. 54
Hình 15: Giao diện trang đăng nhập .............................................................. 55
Hình 16: Giao diện trang Display projects..................................................... 56
Hình 17: Giao diện trang đăng dự án ............................................................. 57
Hồ Tuấn Vũ – Lớp 16CNTTC (2016-2020)


11
`

Hình 18: Giao diện trang review Bidding ...................................................... 58
Hình 19: Giao diện trang Chat ....................................................................... 59
Hình 20: Giao diện trang chat trống, và popup thơng báo ............................. 60
Hình 21: Giao diện trang company profile .................................................... 61
Hình 22: Giao diện trang OnGoing ................................................................ 62
Hình 23: Giao diện trang OnGoing Detail ..................................................... 63
Hình 24: Giao diện trang User Profile ........................................................... 64
Hình 25: Giao diện trang admin verify request.............................................. 65

Hồ Tuấn Vũ – Lớp 16CNTTC (2016-2020)


12
`

MỞ ĐẦU
1.Bối cảnh đề tài.
Ngày nay, với sự phát triển mạnh mẽ của Công nghệ thông tin và
những ứng dụng mạnh mẽ của nó trong đời sống. Máy tính điện tử không phải
là một thứ phương tiện lạ lẫm đối với con người mà nó dần trở thành một

cơng cụ làm việc và giải trí thơng dụng và hữu ích của chúng ta, khơng chỉ ở
cơng sở mà cịn ngay cả trong gia đình. Trong nền kinh tế hiện nay, với xu thế
tồn cầu hóa nền kinh tế thế giới, mọi mặt của đời sống xã hội ngày càng
được nâng cao, đặc biệt là nhu cầu trao đổi hàng hóa của con người ngày càng
tăng cả về số lượng và chất lượng. Hiện nay các công ty tin học hàng đầu thế
giới không ngừng đầu tư và cải thiện các giải pháp cũng như các sản phẩm
nhằm cho phép tiến hành thương mại hóa trên internet. Thơng qua các sản
phẩm công nghệ này, chúng ta dễ dàng nhận ra tầm quan trọng và tính tất yếu
của thương mại điện tử. Với những thao tác đơn giản trên máy tính có nối
mạng Internet bạn sẽ có tận tay những gì mình cần mà không phải mất nhiều
thời gian. Để tiếp cận và góp phần đẩy mạnh sự phổ biến của thương mại điện
tử ở Việt Nam, em sẽ tìm hiểu xây dựng và cài đặt” Website kết nối các
doanh nghiệp IT vừa và nhỏ với các khác hàng quốc tế “. Qua khảo sát thực
tế, ở Việt Nam thì các cơng ty nhỏ tầm trung hoặc ngày cả các start up về IT
cũng khá đông, nhưng cơ hội để làm việc với các khách hàng nước ngồi thì
rất ít, mặt dù rất nhiều nhân tố dẫn đến vấn đề đó nhưng tổng quan lại thì yếu
tố danh tiếng chưa đủ để nhận được sự tin tưởng từ khách hàng là quan trọng
nhất, chính vì vậy việc xây dựng một website làm cầu nối giữa các doanh
nghiệp đó với khách hàng quốc tế với sự đảm bảo từ một công ty lớn có danh
tiếng là một điều rất khả thi.

Hồ Tuấn Vũ – Lớp 16CNTTC (2016-2020)


13
`

2.Sơ lược các bước trong đề tài
Mục đích
Đề tài được xây dựng trên mục đích tạo ra một website mà ở đó các

khách hàng quốc tế có nhu cầu tìm kiếm nguồn nhân lực IT ở Việt Nam với
chất lượng tốt và giá thành ổn có thể đăng thơng tin dự án và khi đó các cơng
ty IT ở Việt Nam có thể tìm được cơ hội làm các dự án phù hợp với khả năng
của công ty.
Mục tiêu của đề tài
Dự kiến xây dựng thành công website theo đề tài, đăng ký tên miền
deploy lên server và đưa vào hoạt động. Các mục tiêu của đề tài cần đạt được:
• Xây dựng thành cơng hệ thống đăng ký, đăng nhập, đăng tin, tìm
kiếm.
• Xây dựng thành cơng hệ thống đăng ký, đăng nhập, phân quyền
dành cho doanh nghiêp IT Việt Nam và khách hàng quốc tế.
• Xây dựng chức năng đăng dự án cần tìm nhà đấu thầu của khách
hàng quốc tế, chức năng chốt nhà thầu.
• Xây dựng chức năng đăng ký đấu thầu cho các công ty IT Việt Nam.
• Xây dựng chức năng AuditLog ghi lại tất cả các sự kiện liên quan
đến quá trình từ đăng dự án đến chốt dự án của cả 2 bên.
• Xây dựng chức năng Chat để 2 bên tương tác, đàm phán.
• Triển khai thành cơng hệ thống trên mơi trường thực tiễn, đưa vào
hoạt động.
• Tương thích với các thiết bị như điện thoại thơng minh, máy tính
bảng, máy tính xách tay, máy tính để bàn…

Hồ Tuấn Vũ – Lớp 16CNTTC (2016-2020)


14
`

Kết quả dự kiến
Sau khi thực hiện đề tài thì cần đạt được một số chức năng sau:

• Đăng nhập, đăng ký tài khoản.
• Quản lý tài khoản: tài khoản người dùng.
• Quản lý bài đăng: Duyệt, xóa, sửa các bài đăng.
• Doanh nghiệp IT Việt Nam có thể tìm kiếm những dự án phù
hợp với khả năng của công ty mình nhất để đăng ký đấu thầu
bằng cách đưa ra các bản Estimate về thời gian và giá tiền của dự
án.
• Khách hàng quốc tế có thể đăng dự án để tuyển nhà thầu phù
hợp, khách hàng có thể xem trước Estimate từ phía nhà thầu
đăng ký để chọn ra đối tượng phù hợp nhất.
• Thống kê số lượng người dùng cũng như bài đăng.
• Một số chức năng có thể được thêm vào trong q trình làm đề
tài

Hồ Tuấn Vũ – Lớp 16CNTTC (2016-2020)


15
`

CHƯƠNG 1: CƠ SỞ LÝ THUYẾT
Trong chương này nội dung chính sẽ trình bày cơ sở lý thuyết về các
nền tảng, các framework, quy trình quản lý, cơng nghệ sử dụng để xây dựng
và cài đặt cho website.
Material UI – Là một thư viện các React Component đã được tích hợp
thêm cả Google's Material Design.
CSS – Định dạng các siêu văn bản dạng thơ thành một bố cục website,
có màu sắc, ảnh nền…
ReactJS – Là một thư viện Javascript đang nổi lên trong những năm
gần đây với xu hướng Single Page Application. Trong khi những framework

khác cố gắng hướng đến một mơ hình MVC hồn thiện thì React nổi bật với
sự đơn giản và dễ dàng phối hợp với những thư viện Javascript khác.
NextJS – Là một React framework nhỏ gọn giúp bạn có thể xây dựng
ứng dụng Single Page App – Server Side Rendering với ReactJs một cách dễ
dàng
NodeJS – Là một nền tảng chạy trên môi trường V8 JavaScript runtime
- một trình thơng dịch JavaScript cực nhanh chạy trên trình duyệt Chrome.
Bình thường thì bạn cũng có thể tải bộ V8 và nhúng nó vào bất cứ thứ gì;
Node.js làm điều đó đối với các web server.

Hồ Tuấn Vũ – Lớp 16CNTTC (2016-2020)


16
`

HapiJS – Là một framework NodeJS, hệ thống plugin của hapi vô cùng
phong phú và mạnh mẽ, cho phép bạn thêm các tính năng mới và sửa lỗi với
tốc độ nhanh. Hapi cho phép bạn xây dựng các API có thể mở rộng, đây là một
điểm cộng rất lớn cho các ứng dụng lớn.
Test Driven Development - Là một phương thức làm việc, hay một
quy trình viết mã hiện đại. Lập trình viên sẽ thực hiện thơng qua các bước nhỏ
(BabyStep) và tiến độ được đảm bảo liên tục bằng cách viết và chạy các bài
test tự động (automated tests). Sử dụng để test cho back-end.
Cypress - Là front end testing tool được xây dựng cho các ứng dụng
Web hiện đại. Đây là một công cụ hỗ trợ hữu hiệu cho developers và QA trong
kiểm thử ứng dụng Web hiện đại. Cypress được xây dựng trên một kiến trúc
mới và chạy trong cùng vòng lặp chạy khi ứng dụng đang được thử nghiệm.
PostgreSQL - Là một hệ thống quản trị cơ sở dữ liệu quan hệ-đối
tượng (object-relational database management system) có mục đích chung, hệ

thống cơ sở dữ liệu mã nguồn mở tiên tiến nhất hiện nay

Hồ Tuấn Vũ – Lớp 16CNTTC (2016-2020)


17
`

1.1 Tổng quan về nền tảng công nghệ
1.1.1Material UI
Material-UI là một thư viện các React Component đã được tích hợp
thêm cả Google's Material Design. Theo như giới thiệu trên trang chủ thì được
xây dựng nhờ tình cảm với React và Google's Material Design. Do đó mà phần
hướng dẫn trên trang chủ của Material UI cũng đã nói nên sử dụng Material UI
với React.
Material UI đem đến cho bạn và trang web của bạn một giao diện hoàn toàn
mới, với những button, textfield, toogle... được design theo một phong cách
mới lạ, thay vì việc nhà nhà người người dùng Bootstrap như hiện nay.
1.1.2. CSS
CSS là chưc viết tắt của cụm từ tiếng anh (Cascading Style Sheet), CSS
được tổ chức Word Wide Web (W3C) giới thiệu vào năm 1996. CSS chỉ
đơn thuần là một file có phần mở rộng là .css, trong file này chứa những
câu lệnh CSS, mỗi câu lệnh CSS sẽ định dạng một thành phần nhật định
của tài liệu HTML như màu sắc, font chữ…
CSS tách riêng phần định dạng ra khỏi nội dung trang web giúp người
thiết kế kiểm sốt tồn bộ giao diện nhanh nhất và hiệu quả nhất, tiết kiệm
được nhiều thời gian trong chỉnh sửa, đặc biệt là các dự án lớn được kết
cấu từ nhiều trang HTML.
Do được tách rời khỏi nội dung của trang web, nên các mã HTML sẽ
gọn gàng hơn, giúp bạn thuận tiện hơn trong việc chỉnh sửa giao diện.

Kích thước của file .html cũng được giảm đáng kể. Hơn thế nữa sẽ được
trình duyệt tải một lần và dùng nhiều lần (cache), do đó giúp trang web
được load nhanh hơn.
CSS có nhiều kiểu nhưng gom lại thì sẽ có các thể loại thông dụng như
sau:
- Background : CSS tùy chỉnh hình nền.
Hồ Tuấn Vũ – Lớp 16CNTTC (2016-2020)


18
`

- Text : CSS tùy chỉnh cách hiển thị text.
- Font : CSS tùy chỉnh kích thước, kiểu chữ.
- Link : CSS tùy chỉnh link.
- List CSS tùy chỉnh danh sách.
- Table: CSS tùy chỉnh bảng.
- Box model: Mơ hình box model kết hợp padding, margin, border.
- …
Chúng ta có 3 cách để khai báo CSS trong tài liệu HTML là:
- CSS cục bộ: viết mã CSS trực tiếp trong thẻ HTML, cụ thể là trong
thuộc tính style, CSS cục bộ chỉ có tác dụng trong thẻ HTML được
khai báo.

Đoạn văn này sẽ bị
ảnh hưởng khi khai báo CSS cục bộ

- CSS nội tuyến là phần mã CSS được khai báo trong cặp thẻ <style>
và đặt trong phần <head> của tài liệu HTML. Khi sử dụng CSS nội
tuyến nó sẽ có tác dụng lên file html được khai báo nhưng không
ảnh hưởng đến các file khác trong cùng một website.
<style>

h1,h2,h3 {font-size: 14px;}
p {color: blue;}
</style>
- CSS ngoại tuyến:
• Đây là cách khai báo CSS được sử dụng nhiều nhất trong thực tế,
và cách khai báo này mới tận dụng được hết thế mạnh mà CSS
mang lại, tách biệt hoàn toàn khoải tài liệu HTML, người thiết kế
chỉ cần viết một file CSS duy nhất mà sử dụng nhiều lần trong
ứng dụng của họ.
• Nó có phạm vi ảnh hưởng tồn bộ đến website chứ khơng chỉ có
một file .html riêng biệt. Do đó mỗi khi muốn thay đổi thuộc tính
hiển thị của một thành phần nào đó trong website thì chỉ cần
chỉnh sửa file CSS này thay vì chỉnh sửa tất cả các file .html
Hồ Tuấn Vũ – Lớp 16CNTTC (2016-2020)


19
`

trong ứng dụng. Đến đây chúng ta thấy được sự cần thiết và hiệu
quả mà CSS mang lai.
• Để khai báo CSS ngoại tuyến, ta chỉ cần tạo ra một file style.css
chẳng hạn, sau đó chèn đoạn code sau trong phần
<head></head> của trang web.
media=” screen” >

rel=”stylesheet”

type=”text/css”

Thứ tự ưu tiên trong CSS: CSS cục bỘ >> CSS nội tuyến >> CSS
ngoại tuyến >> CSS mặc định của trình duyệt.
Chúng ta cần phân biệt rõ giữa CSS và Style trong HTML. Nếu như
Style được dùng để định dạng nội dung trong HTML thì CSS là một file chứa
Style.
1.1.3. ReactJS
React.js là một thư viện Javascript đang nổi lên trong những năm gần
đây với xu hướng Single Page Application. Trong khi những framework khác
cố gắng hướng đến một mơ hình MVC hồn thiện thì React nổi bật với sự đơn
giản và dễ dàng phối hợp với những thư viện Javascript khác. Nếu như
AngularJS là một Framework cho phép nhúng code javasscript trong code
html thơng qua các attribute như ng-model, ng-repeat...thì với react là một
library cho phép nhúng code html trong code javascript nhờ vào JSX, bạn có
thể dễ dàng lồng các đoạn HTML vào trong JS.Tích hợp giữa javascript và
HTML vào trong JSX làm cho các component dễ hiểu hơn.
React là một thư viện UI phát triển tại Facebook để hỗ trợ việc xây
dựng những thành phần (components) UI có tính tương tác cao, có trạng thái
và có thể sử dụng lại được. React được sử dụng tại Facebook trong
production, và www.instagram.com được viết hoàn toàn trên React.
Hồ Tuấn Vũ – Lớp 16CNTTC (2016-2020)


20
`

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 trên DOM. Trươc khi đến cài đặt và

cấu hình, chúng ta sẽ đi đến một số khái niệm cơ bản.
1.1.4 NodeJS
Node.js là một hê thống phần mềm được thiết kế để viết các ứng dụng
internet có khả năng mở rộng, đặc biệt là máy chủ web. Chương trình được
viết bằng JavaScript, sử dụng kỹ thuật điều khiển theo sự kiện, nhâp/xuất
không đồng bộ để tối tiểu tổng chi phí và tối đại khả năng mở rộng. Node.js
bao gồm có v8 javascript engine của Google, libUV, và vài thư viện khác.
Node.js được tạo bởi Ryan Dahl từ năm 2009, và phát triển dưới sự bảo
trợ của Joyent
Mục tiêu ban đầu của Dahl là làm cho trang web có khả năng push như
trong một số ứng dụng web như Gmail. Sau khi thử với vài ngôn ngữ Dahl
chọn Javascript vì một API Nhập/Xuất khơng đầy đủ. Điều này cho phép anh
có thể định nghĩa một quy ước Nhập/Xuất điểu khiển theo sự kiện, nonblocking.
Vài môi trường tương tự được viết trong các ngôn ngữ khác bao
gồm Twisted cho Python, Perl Object Environment cho Perl,
libevent cho C và EventMachine cho Ruby. Khác với hầu hết các chương
trình Javascript, Nodejs khơng chạy trên một trình duyệt mà chạy trên Server.
Node.js sử dụng nhiều chi tiết kỹ thuật của CommonJS. Nó cung cấp một môi
trường Repl cho kiểm thử tương tác.
Node.js được Infoworld bình chọn là "Cơng nghệ của năm" năm 2012.
Hồ Tuấn Vũ – Lớp 16CNTTC (2016-2020)


21
`

1.1.5 HapiJS
Hapi.js là một framework Node.js mạnh mẽ để xây dựng các giao diện
lập trình ứng dụng (API) và các ứng dụng phần mềm khác. Hapi.js được giới
thiệu lần đầu bởi Eran Hammer vào năm 2011 tại Walmart trong nỗ lực xử lý

lưu lượng truy cập vào mỗi khi “Ngày thứ Sáu đen tối” diễn ra. Hapi.js có
một hệ thống plugin mạnh mẽ cùng những tính năng nổi bật như validate dữ
liệu đầu vào, chức năng dựa trên cấu hình, thực hiện bộ nhớ đệm, xử lý lỗi,
đăng nhập … Chính vì vậy Hapi.js được dùng để xây dựng các ứng dụng hữu
ích và cung cấp các giải pháp cơng nghệ cho nhiều website quy mô lớn như
Walmart, Disney, PayPal và Concrete.
Hapi có cấu trúc đơn giản, dễ dàng làm quen và sử dụng. Cộng đồng sử
dụng đông đảo nên bạn sẽ nhận được nhiều support. Hệ thống plugin của hapi
vô cùng phong phú và mạnh mẽ, cho phép bạn thêm các tính năng mới và sửa
lỗi với tốc độ nhanh. Hapi cho phép bạn xây dựng các API có thể mở rộng,
đây là một điểm cộng rất lớn cho các ứng dụng lớn.
1.1.6 Test Driven Development
TDD (Test Driven Development) là một phương thức làm việc, hay
một quy trình viết mã hiện đại. Lập trình viên sẽ thực hiện thơng qua các
bước nhỏ (BabyStep) và tiến độ được đảm bảo liên tục bằng cách viết và chạy
các bài test tự động (automated tests). Quá trình lập trình trong TDD cực kỳ
chú trọng vào các bước liên tục sau:
1. Viết 1 test cho hàm mới. Đảm bảo rằng test sẽ fail.
2. Chuyển qua viết code sơ khai nhất cho hàm đó để test có thể pass.

Hồ Tuấn Vũ – Lớp 16CNTTC (2016-2020)


22
`

3. Tối ưu hóa đoạn code của hàm vừa viết sao cho đảm bảo test vẫn
pass và tối ưu nhất cho việc lập trình kế tiếp
4. Lặp lại cho các hàm khác từ bước 1
Thực tế, nên sử dụng UnitTestFramework cho TDD (như JUnit trong Java),

chúng ta có thể có được mơi trường hiệu quả vì các test được thơng báo rõ
rang thơng qua màu sắc:
•

Đỏ: test fail, chuyển sang viết function cho test pass

•

Xanh lá: viết một test mới hoặc tối ưu code đã viết trong màu đỏ.

Điều luật khi áp dụng TDD
•

Khơng cho phép viết bất kỳ một mã chương trình nào cho tới khi nó
làm một test bị fail trở nên pass.

•

Khơng cho phép viết nhiều hơn một unit test mà nếu chỉ cần 1 unit test
cung đã đủ để fail. Hãy chuyển sang viết code function để pass test đó
trước.

•

Khơng cho phép viết nhiều hơn 1 mã chương trình mà nó đã đủ làm
một test bị fail chuyển sang pass.

Mơ hình chu trình sử dụng TDD.

Hình 1: Mơ hình chu trình TDD

Hồ Tuấn Vũ – Lớp 16CNTTC (2016-2020)


23
`

1.1.7 Cypress
Cypress là front end testing tool được xây dựng cho các ứng dụng Web
hiện đại. Đây là một công cụ hỗ trợ hữu hiệu cho developers và QA trong
kiểm thử ứng dụng Web hiện đại. Cypress được xây dựng trên một kiến trúc
mới và chạy trong cùng vòng lặp chạy khi ứng dụng đang được thử nghiệm.
Cypress thường được so sánh với Selenium. Nhưng Cypress hoàn toàn khác
biệt với Selenium và nó khơng gặp phải các hạn chế như Selenium. Điều này
giúp chúng ta thực thi các Test Cases một cách đơn giản và dễ dàng hơn.
Cypress hỗ trợ chúng ta:
•

Set up tests

•

Write tests

•

Run tests

•

Debug Tests

Đằng sau Cypress là một máy chủ Node.js. Quá trình Cypress và Node.js
liên tục liên lạc, đồng bộ hóa và thực hiện các nhiệm vụ thay mặt cho nhau. Có
quyền truy cập vào cả hai phần (front and back) cho phép khả năng phản hồi
các sự kiện của ứng dụng trong thời gian thực, đồng thời hoạt động bên ngồi
trình duyệt cho các tác vụ yêu cầu đặc quyền cao hơn.
Thường thì những đối tượng sử dụng Cypress là developers hoặc QA
khi xây dựng một ứng dụng Web có sử dụng Javascript framework.
Cypress cho phép người dùng thực thi rất nhiều loại test:
•

End-to-end tests

•

Integration tests

•

Unit tests Cypress có thể test bất cứ thứ gì chạy trên trình duyệt.

Hồ Tuấn Vũ – Lớp 16CNTTC (2016-2020)