Đồ án xây dựng website thương mại điện tử bán điện thoại di động

ĐẠI HỌC QUỐC GIA TP. HỒ CHÍ MINH

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN
KHOA CÔNG NGHỆ PHẦN MỀM

ĐỒ ÁN 1

XÂY DỰNG WEBSITE THƯƠNG MẠI ĐIỆN TỬ
BÁN ĐIỆN THOẠI DI ĐỘNG

GV HƯỚNG DẪN: ThS. Đỗ Thị Thanh Tuyền
SV THỰC HIỆN: Huỳnh Tiến Thịnh
MSSV: 20520311
Mã lớp: SE121.N21

TP. HỒ CHÍ MINH, 2023


LỜI CẢM ƠN
Sau quá trình học tập và rèn luyện tại khoa Công nghệ phần mềm trường Đại
học Công nghệ thông tin - ĐHQG TP.HCM em đã được trang bị các kiến thức cơ
bản, các kỹ năng thực tế để có thể lần đầu thực hiện Đồ án 1 của mình.
Để hồn thành Đồ án này, em xin gửi lời cảm ơn chân thành đến:
Ban Giám hiệu trường Đại học Cơng nghệ thơng tin – ĐHQG TP.HCM vì đã
tạo điều kiện về cơ sở vật chất với hệ thống thư viện hiện đại, đa dạng các loại sách,
tài liệu thuận lợi cho việc tìm kiếm, nghiên cứu thơng tin. Em xin gửi lời cảm ơn chân
thành đến cô Đỗ Thị Thanh Tuyền đã tận tình giúp đỡ, định hướng cách tư duy và
cách làm việc khoa học. Đó là những góp ý hết sức q báu khơng chỉ trong q trình
thực hiện đề tài mà cịn là hành trang tiếp bước cho em trong quá trình học tập và lập
nghiệp sau này.
Và cuối cùng, em xin gửi lời cảm ơn đến gia đình, tất cả thầy cơ trong khoa,

bạn bè là những người luôn sẵn sàng sẻ chia và giúp đỡ trong học tập và cuộc sống.
Tuy nhiên trong quá trình nghiên cứu đề tài, do kiến thức chuyên ngành cịn
hạn chế nên em vẫn cịn nhiều thiếu sót khi tìm hiểu, đánh giá, trình bày về đề tài.
Rất mong nhận được sự quan tâm, góp ý của cơ để đề tài của em được đầy đủ và hoàn
chỉnh hơn.
Em xin chân thành cảm ơn.

TP. Hồ Chí Minh, ngày 30 tháng 06 năm 2023
Sinh viên thực hiện
Huỳnh Tiến Thịnh


MỤC LỤC
TÓM TẮT ĐỒ ÁN......................................................................................................1
Chương 1. GIỚI THIỆU ĐỀ TÀI ...............................................................................3
1.1. Lý do chọn đề tài ..............................................................................................3
1.2. Mục đích...........................................................................................................4
1.3. Đối tượng .........................................................................................................4
1.4. Phạm vi nghiên cứu ..........................................................................................4
1.4.1. Phạm vi môi trường...................................................................................4
1.4.2. Phạm vi chức năng ....................................................................................4
Chương 2. NGHIÊN CỨU LÝ THUYẾT ..................................................................5
2.1. Cơ sở lý thuyết .................................................................................................5
2.1.1. Kiến thức nền tảng ....................................................................................5
2.1.2. Công nghệ sử dụng....................................................................................5
2.2. Phương pháp nghiên cứu................................................................................19
2.2.1. Phương pháp làm việc .............................................................................19
2.2.2. Phương pháp thực hiện ...........................................................................20
2.2.3. Phương pháp tài liệu ...............................................................................20
2.2.4. Phương pháp công nghệ ..........................................................................20

2.2.5. Phương pháp thực nghiệm ......................................................................20
Chương 3. PHÂN TÍCH HỆ THỐNG ......................................................................21
3.1. Phân tích yêu cầu hệ thống.............................................................................21
3.1.1. Yêu cầu chức năng ..................................................................................21
3.1.2. Yêu cầu phi chức năng ............................................................................44
3.2. Sơ đồ phân rã chức năng ................................................................................45


3.3. Phân tích thiết kế hệ thống .............................................................................46
3.3.1. Sơ đồ tuần tự ...........................................................................................46
3.3.2. Sơ đồ lớp .................................................................................................53
Chương 4. XÂY DỰNG WEBSITE VÀ KIỂM THỬ .............................................61
4.1. Cài đặt chương trình .......................................................................................61
4.1.1. Cài đặt chương trình hệ thống .................................................................61
4.1.2. Cài đặt giao diện chương trình ................................................................61
4.1.3. Cài đặt cơ sở dữ liệu................................................................................61
4.2. Kết quả chương trình......................................................................................62
4.2.1. Giao diện trang chủ .................................................................................62
4.2.2. Giao diện chi tiết điện thoại ....................................................................63
4.2.3. Giao diện đăng nhập, đăng ký .................................................................64
4.2.4. Giao diện sản phẩm .................................................................................65
4.2.5. Giao diện đặt hàng ..................................................................................66
4.2.6. Giao diện quản lý điện thoại ...................................................................67
4.2.7. Giao diện quản lý thành viên ..................................................................69
4.2.1. Giao diện quản lý đơn hàng ....................................................................69
4.2.2. Giao diện trò chuyện với khách hàng .....................................................70
4.3. Kiểm thử .........................................................................................................71
KẾT LUẬN ...............................................................................................................74
TÀI LIỆU THAM KHẢO .........................................................................................76

DANH MỤC BẢNG BIỂU
Bảng 3.1. Danh sách các Actors................................................................................23
Bảng 3.2. Mô tả use case ...........................................................................................24
Bảng 3.3. Use-case Xem sản phẩm ...........................................................................26
Bảng 3.4. Use-case Xem trang chủ ...........................................................................27
Bảng 3.5. Use-case Tìm sản phẩm theo danh mục ...................................................28
Bảng 3.6. Use-case Đăng ký khách hàng thành viên ................................................29
Bảng 3.7. Use-case Đăng nhập .................................................................................30
Bảng 3.8. Use-case Thêm và xem giỏ hàng ..............................................................31
Bảng 3.9. Use-case Thanh toán .................................................................................32
Bảng 3.10. Use case Đánh giá sản phẩm ..................................................................33
Bảng 3.11. Use-case Xóa thành viên ........................................................................34
Bảng 3.12. Use-case Xem sản phẩm .........................................................................35
Bảng 3.13. Use case Xem đơn hàng .........................................................................36
Bảng 3.14. Use-case Xem báo cáo ............................................................................37
Bảng 3.15. Use-case Tạo vận đơn .............................................................................38
Bảng 3.16. Use-case Thay đổi trạng thái đơn hàng ..................................................39
Bảng 3.17. Use-case Tạo sản phẩm ..........................................................................40
Bảng 3.18. Use-case Sửa sản phẩm ..........................................................................41
Bảng 3.19. Use-case Xóa sản phẩm ..........................................................................42
Bảng 3.20. Use-case Lọc đơn hàng ...........................................................................43
Bảng 3.21. Use-case Xem đánh giá ..........................................................................44
Bảng 3.22. Danh sách các lớp đối tượng và quan hệ ................................................53
Bảng 3.23. Lớp wp_user ...........................................................................................54
Bảng 3.24. Lớp wp_usermeta ...................................................................................55
Bảng 3.25. Lớp wp_post ...........................................................................................55
Bảng 3.26. Lớp wp_postmeta ...................................................................................56
Bảng 3.27. Lớp wp_comments .................................................................................57
Bảng 3.28. Lớp wp_commentmeta ...........................................................................58

Bảng 3.29. Lớp wp_order_items ...............................................................................58
Bảng 3.30. Lớp wp_order_itemmeta ........................................................................59
Bảng 3.31. Lớp wp_dokan_orders ............................................................................59
Bảng 3.32. Lớp wp_revslider_sliders .......................................................................60
Bảng 4.1. Kiểm thử Đăng nhập & Đăng ký ..............................................................71
Bảng 4.2. Kiểm thử đặt hàng ....................................................................................72
Bảng 4.3. Kiểm thử quản lý đơn hàng ......................................................................72
Bảng 4.4. Kiểm thử quản lý sản phẩm ......................................................................73


DANH MỤC HÌNH ẢNH
Hình 2.1. Logo JavaScript ...........................................................................................5
Hình 2.2. Logo ReactJS ..............................................................................................9
Hình 2.3. Logo NodeJS .............................................................................................11
Hình 2.4. Logo TypeScript........................................................................................13
Hình 2.5. Logo Draw.io ............................................................................................17
Hình 2.6. Logo GitHub .............................................................................................18
Hình 3.1. Sơ đồ Use-case cho Khách hàng ...............................................................21
Hình 3.2. Sơ đồ Use-case cho Khách hàng thành viên .............................................22
Hình 3.3. Sơ đồ Use-case cho Quản trị viên .............................................................23
Hình 3.4. Sơ đồ phân rã chức năng ...........................................................................45
Hình 3.5. Sơ đồ tuần tự đăng nhập ............................................................................46
Hình 3.6. Sơ đồ tuần tự đăng ký thành viên ..............................................................47
Hình 3.7. Sơ đồ tuần tự tìm kiếm sản phẩm..............................................................47
Hình 3.8. Sơ đồ tuần tự đặt hàng...............................................................................48
Hình 3.9. Sơ đồ tuần tự xem thơng tin sản phẩm ......................................................48
Hình 3.10. Sơ đồ tuần tự bình luận ...........................................................................49
Hình 3.11. Sơ đồ tuần tự hiển thị danh sách sản phẩm .............................................49

Hình 3.12. Sơ đồ tuần tự thêm sản phẩm ..................................................................50
Hình 3.13. Sơ đồ tuần tự xóa sản phẩm ....................................................................50
Hình 3.14. Sơ đồ tuần tự xem đơn hàng ...................................................................51
Hình 3.15. Sơ đồ tuần tự xóa thành viên ...................................................................51
Hình 3.16. Sơ đồ tuần tự xóa đơn hàng.....................................................................52
Hình 3.17. Sơ đồ lớp mức thiết kế ............................................................................53
Hình 4.1. Giao diện trang chủ ...................................................................................62
Hình 4.2. Giao diện chi tiết điện thoại ......................................................................63
Hình 4.3. Giao diện đăng ký .....................................................................................64
Hình 4.4. Giao diện đăng nhập..................................................................................64
Hình 4.5. Giao diện sản phẩm ...................................................................................65


Hình 4.6. Giao diện giỏ hàng ....................................................................................66
Hình 4.7. Giao diện thanh tốn .................................................................................66
Hình 4.8. Giao diện quản lý điện thoại .....................................................................67
Hình 4.9. Giao diện thêm sản phẩm ..........................................................................68
Hình 4.10. Giao diện thêm bộ lọc chi tiết sản phẩm .................................................68
Hình 4.11. Giao diện quản lý thành viên ..................................................................69
Hình 4.12. Giao diện quản lý đơn hàng ....................................................................69
Hình 4.13. Giao diện trị chuyện với khách hàng .....................................................70


TÓM TẮT ĐỒ ÁN
Đặt vấn đề:
Hiện nay, hầu hết tại các cửa hàng điện thoại đã sử dụng rộng rãi ứng dụng
công nghệ thông tin, giúp người dùng dễ dàng mua hàng, dễ dàng quản lý thông tin
cá nhân,… Bên cạnh đó, sự hỗ trợ mạnh mẽ của các ngơn ngữ lập trình, cùng với sự
ra đời của các framework đã thúc đẩy em chọn đề tài “Xây dựng website thương mại
điện tử bán điện thoại di động”. Với đề tài này, website sẽ cho phép người sử dụng

thực hiện một cách nhanh chóng, chính xác việc tìm kiếm thơng tin, loại điện thoại,
giá cả và tiến hành việc đặt hàng,… với giao diện làm việc thân thiện, tiện dụng với
người sử dụng hệ thống, người tiêu dùng. Sử dụng ngôn ngữ Javascript với hai
framework tương ứng là Reactjs và Nodejs và hệ quản trị cơ sở dữ liệu MongoDB
làm đề tài cho môn này.
Mục tiêu nghiên cứu:
Mục tiêu của đồ án là tìm ra giải pháp hiệu quả để giải quyết công việc bán
hàng cho các cửa hàng điện thoại.
Đối tượng và phạm vi nghiên cứu:
Các khách hàng của cửa hàng điện thoại, vai trò của người quản lý cửa hàng,
các loại điện thoại trên thị trường, các chi nhánh của cửa hàng.
Phạm vi nghiên cứu:
Tập trung xây dựng hệ thống giúp người dùng đặt hàng trực tuyến và quản lý
thông tin của các điện thoại. Đề tài được xây dựng bởi các ngơn ngữ lập trình như:
Javascript, HTML, CSS và sử dụng hệ quản trị cơ sở dữ liệu MongoDB.
Sau đây, nhóm sẽ trình bày về phần mềm, quy trình thiết kế và cài đặt qua 5 phần:
• Chương 1: Giới thiệu đề tài: trình bày lý do chọn đề tài, mục đích, đối
tượng, phạm vi nghiên cứu của đề tài.
• Chương 2: Nghiên cứu lý thuyết: trình bày cơ sở lý thuyết và phương
pháp nghiên cứu lý thuyết.

1


• Chương 3: Phân tích hệ thống: phân tích yêu cầu hệ thống, sơ đồ phân
rã chức năng, phân tích thiết kế hệ thống.
• Chương 4: Xây dựng website và kiểm thử: trình bày cách cài đặt, kết
quả chương trình, kiểm thử chương trình.
• Kết luận: trình bày ưu điểm, hạn chế và hướng phát triển của ứng dụng.

2


Chương 1. GIỚI THIỆU ĐỀ TÀI
1.1. Lý do chọn đề tài
Điện thoại là một thiết bị máy tính xách tay hiện đang chiếm một vai trò rất
quan trọng trong cuộc sống, ai ai cũng có nhu cầu sử dụng nó hằng ngày chính vì thế
việc mua bán điện thoại đang trở nên thiết yếu hơn bao giờ hết. Nhưng việc chọn cho
mình một chiếc điện thoại ưng ý cả về bề ngoài cũng như chất lượng thường tốn rất
nhiều thời gian khi phải đến trực tiếp các cửa hàng điện thoại truyền thống. Trong khi
đó cuộc sống chúng ta ngày càng trở nên bận rộn và hình thức mua hàng online đang
dần trở thành xu hướng và đang dần thay thế kiểu mua hàng trực tiếp. Đây chính là
cơ hội để đưa công nghệ thông tin vào lĩnh vực kinh doanh nói chung và bán điện
thoại nói riêng.
Mạng internet là một trong những sản phẩm có giá trị hết sức lớn lao và ngày
càng trở nên một công cụ không thể thiếu, là nền tảng để truyền tải, trao đổi thơng tin
trên tồn cầu. Bằng internet, chúng ta đã thực hiện được những công việc với tốc độ
nhanh hơn, chi phí thấp hơn so với cách thức truyền thống. Trong sản xuất, kinh
doanh, thương mại điện tử đã được khẳng định được xúc tiến và thúc đẩy sự phát
triển của doanh nghiệp. Đối với một cửa hàng, việc quảng bá và giới thiệu sản phẩm
đến khách hàng đáp ứng nhu cầu mua sắm ngày càng cao của khách hàng là rất cần
thiết.
Chính vì những ưu điểm trên của internet là tốc độ, chi phí thấp kết hợp với
nhu cầu mua hàng online của thị trường, em quyết định chọn thực hiện đề tài "Xây
dựng website thương mại điện tử bán điện thoại di động". Cửa hàng có thể đưa
các sản phẩm lên website của mình và quản lý website đó, khách hàng có thể thỏa
thích chọn lựa mẫu mã, đặt mua hàng mà không cần đến cửa hàng, cửa hàng sẽ gửi
sản phẩm đến tận tay khách hàng, đồng thời website là nơi giúp cửa hàng quảng bá
tốt nhất các sản phẩm mà mình bán ra.

3


1.2. Mục đích
Xây dựng một website hỗ trợ mua bán điện thoại di động với nội dung phong
phú, giao diện trực quan, thân thiện, màu sắc hài hòa, đáp ứng các chức năng cần thiết
của một website bán hàng trực tuyến. Xây dựng một website dành cho quản trị viên
với các chức năng quản lý thông tin đa dạng, tiện dụng. Xây dựng báo cáo kinh doanh
thông minh với bố cục rõ ràng, thông tin cụ thể cho chủ cửa hàng.
1.3. Đối tượng
− Người dùng khách.
− Người dùng có tài khoản.
− Quản trị viên (Admin).
1.4. Phạm vi nghiên cứu
1.4.1. Phạm vi môi trường
Triển khai sản phẩm đề tài trên môi trường web.
1.4.2. Phạm vi chức năng
− Các chức năng liên quan đến tài khoản: đăng nhập, đăng xuất, quên mật khẩu,
thay đổi thông tin tài khoản,…
− Các chức năng liên quan đến sản phẩm: tìm kiếm, sắp xếp, lọc, đánh giá và
bình luận…
− Chức năng tính phí giao hàng thơng qua giao hàng nhanh GHN.
− Chức năng giỏ hàng, mua hàng, đơn hàng, mua hàng kết hợp tất cả cổng thanh
toán điện tử.
− Chức năng đăng sản phẩm, xem đánh giá, tạo mã khuyến mãi, cập nhật giao
diện cửa hàng cho người bán hàng…
− Các chức năng quản lý website: quản lý slide quảng cáo, quản lý tài khoản,
quản lý bài viết, quản lý sản phẩm, quản lý đơn hàng, thống kê doanh thu và
in báo cáo...

4


Chương 2. NGHIÊN CỨU LÝ THUYẾT
2.1. Cơ sở lý thuyết
2.1.1. Kiến thức nền tảng
Để thiết kế và hoàn thiện sản phẩm đúng với yêu cầu người dùng, em đã vận dụng
các kiến thức có liên quan, cụ thể:
− Cơng cụ thiết kế diagram: Draw.io.
− Ngôn ngữ sử dụng: JavaScript.
− Thư viện sử dụng: ReactJS, NodeJS.
− Hệ quản trị cơ sở dữ liệu: MongoDB.
− Source Control: Github.
2.1.2. Cơng nghệ sử dụng
JAVASCRIPT

Hình 2.1. Logo JavaScript

Javascript là gì?
Javascript chính là một ngơn ngữ lập trình với khả năng đem tới sự sinh động
khi thiết kế website. Đây là dạng ngôn ngữ theo kịch bản, dựa trên chính đối trượng
phát triển có sẵn, hoặc là tự định nghĩa ra. Chính vì tính tiện lợi, hiệu quả ứng dụng
cao mà ngơn ngữ lập trình này được tin dùng ngày càng nhiều, ứng dụng rộng rãi
trong các website hiệu quả [1].

5


Việc sử dụng ngơn ngữ JS có thể ứng dụng cho mọi trình duyệt khác nhau,
hiện được sử dụng phổ biến như Chrome, hay Firefox,… Hơn nữa, đây còn là ngơn

ngữ lập trình hoạt động hiệu quả, được hỗ trợ đầy đủ trên các trình duyệt của thiết bị
di động. Bởi thế mà việc sử dụng đa dạng, có thể đáp ứng tốt cho nhiều nhu cầu,
những đòi hỏi khác nhau của người dùng [1].
Nhìn chung, ngơn ngữ lập trình Javascript khi sử dụng được đánh giá dễ học,
được phát triển bởi Netscape và sử dụng trong hơn 92% các website ngày nay. Việc
sử dụng JS có thể gắn trong một element trong website, hoặc có thể trong một sự kiện
của trang web tiện lợi và hiệu quả. Chính việc có thể hoạt động nhanh, nhẹ và mượt
mà,… nên ngơn ngữ lập trình này càng được tin tưởng và ứng dụng nhiều hơn cho
nhu cầu của người dùng. Chúng ta có thể thêm trực tiếp JS trực tiếp với HTML, cũng
có thể lưu lại trên một files hồn tồn riêng biệt và sử dụng khi cần thiết [1].
Javascript là ngôn ngữ lập trình dễ dàng sử dụng:
Đơn giản, dễ dàng tìm hiểu và sử dụng là đặc điểm nổi bật của ngơn ngữ lập
trình này. Với những cú pháp khá tương đồng với tiếng Anh thì việc sử dụng
Javascript trở nên dễ dàng, dễ tiếp cận hơn rất nhiều. Thông qua mơ hình DOM được
sử dụng, cung cấp tới nhiều tính năng hữu ích, được viết sẵn đem lại khả năng đáp
ứng tốt cho những nhu cầu, những đòi hỏi khác nhau từ phía người dùng [1].
Với nhiều tính năng hữu ích mà ngơn ngữ lập trình Javascript mang lại thì
việc có thể phát triển kịch bản nhằm giải quyết u cầu, mục đích nào đó trở nên dễ
dàng hơn. Những mục đích tùy chính của con người được đáp ứng hiệu quả với sự
hỗ trợ của JS [1].
Sử dụng JS đảm bảo dễ học, dễ dàng phát hiện lỗi khi xuất hiện, đồng thời nó
hoạt động nhanh chóng và nhẹ nhàng hơn nhiều ngơn ngữ lập trình khác. Bởi thế, q
trình sử dụng có thể thích hợp với nhiều đối tượng người dùng, đem lại hiệu quả cao
và tránh những ảnh hưởng khơng mong muốn có thể xảy ra [1].
Java sở hữu giao diện thân thiện, nhiều tính năng:
Nếu so sánh với nhiều ngơn ngữ lập trình khác thì việc sử
dụng Javascript mang tới ưu điểm ở giao diện thân thiện, có thể phù hợp với mọi đối
tượng người dùng. Đem tới tính tương tác cao giúp q trình ứng dụng của mỗi người

6

có được kết quả tốt đẹp. Cùng với nhiều tính năng mà ngôn ngữ này mang tới chắc
chắn sẽ giúp website chúng ta tạo ra có được hiệu quả sử dụng lý tưởng.
Có thể kể tới như việc tiến hành thêm slider, hay slideshow, thực hiện hiệu
ứng cuộn trang khi chuột di tới, tính năng kéo thả,… đều được cung cấp đầy đủ. Từ
đó giúp việc sử dụng ngơn ngữ này trong lập trình đem lại lợi ích lớn, thiết thực [1].
So sánh Javascript với các ngơn ngữ lập trình khác:
Mỗi ngơn ngữ lập trình khác nhau mang những đặc điểm khác biệt nhất định.
Đó là điều hiển nhiên mà chúng ta có thể tìm hiểu và xác định cụ thể và chính xác.
Theo đó, ngơn ngữ Javascript nếu đem ra so sánh với những ngơn ngữ khác thì điểm
khác biệt lớn, tạo nên tính phổ biến của nó chính là tính linh hoạt. Bởi thế, có khá
nhiều các lập trình viên lựa chọn Javascript trở thành ngơn ngữ chính, sử dụng các
ngôn ngữ khác là phụ, bổ sung khi cần thiết.
Ngơn ngữ Javascript: Với ngơn ngữ lập trình này đảm bảo giúp tăng hiệu quả
tương tác trên website ở mức tốt nhất. Với Script này khi hoạt động trên các trình
duyệt của người dùng, thay vì sử dụng trên các server hiệu quả. Khơng chỉ vậy, nó
thường được dùng trên thư viện của một bên thứ ba, từ đó giúp tăng thêm chức năng
cho website dễ dàng, thay vì việc phải thông qua code ngay từ ban đầu [1].
Ngôn ngữ HTML: HTML – Hypertext Markup Language là một trong những
ngơn ngữ lập trình phổ biến, được tin dùng nhiều hiện nay trên các website, giúp việc
xây dựng các khối chính của trang web được thực hiện hiệu quả.
Ngơn ngữ PHP: Đây là ngơn ngữ ở phía server, nó hồn toàn khác biệt so với
JS được sử dụng chạy trên các máy client. Ngôn ngữ này được ứng dụng chủ yếu
trong các hệ quản trị nội dung nền PHP, tiêu biểu như WordPress. Ngồi ra, sử dụng
PHP cịn được ứng dụng trong việc lập trình back-end, giúp tạo ra những kênh để
truyền thông tin hiệu quả nhất từ database.
Ngôn ngữ CSS: CSS – Cascading Style Sheets có nhiệm vụ chính là việc giúp
webmaster có thể xác định được styles, cũng như định nghĩa tốt nhiều loại nội dung
khác nhau. Người dùng có thể tiến hành thực hiện những cơng việc hoàn toàn thủ

7


cơng, với những yếu tố có trong HTML. Tuy nhiên, nếu thực hiện theo cách này đòi
hỏi chúng ta phải lặp đi lặp lại các thành phần đó, để sử dụng ở nhiều nơi khác nhau.
Nói tóm lại, tìm hiểu về bản chất của từng ngơn ngữ lập trình giúp chúng ta có
cái nhìn tổng quan nhất, cơ bản nhất về những ngơn ngữ thơng dụng này. Nếu chúng
ta nhìn nhận việc lập trình như là xây dựng một căn nhà thì trong đó: HTML có nhiệm
vụ chính là định dạng được kiến trúc của ngơi nhà, CSS có nhiệm vụ là thảm và tường
giúp căn nhà được trang trí đẹp hơn, trong khi đó Javascript có nhiệm vụ giúp tăng
cường tương tác của ngôi nhà như hệ thống cửa, hay hệ thống đèn chiếu sáng.
Chúng ta hồn tồn có thể lập trình, tạo nên một trang web mà khơng cần tới
sự hỗ trợ, sử dụng ngôn ngữ JS. Tuy nhiên, một thực tế cho thấy là khi ngôn ngữ
Javascript khơng được ứng dụng thì nguy cơ chúng ta sẽ tạo ra một website lỗi thời,
khơng đem tới tính ứng dụng cao như những ở thập niên 90 của thế kỷ 20 là điều
hồn tồn có thể xảy ra. Điều này vơ tình gây ra tác động tiêu cực tới q trình ứng
dụng web, đáp ứng cho nhu cầu, địi hỏi ngày càng nhiều, càng cao của người dùng.
Hạn chế cịn tồn tại của ngơn ngữ Javascript:
Tồn tại song song với những ưu điểm là hạn chế mà ngôn ngữ lập trình
Javascript đang phải đối mặt. Việc tìm hiểu và xác định được những hạn chế giúp
chúng ta chủ động trong đánh giá, đưa ra quyết định sử dụng sao cho thích hợp nhất.
Là ngơn ngữ lập trình dễ bị khai thác: Việc dễ dàng bị khai thác, với nhiều đối
tượng người dùng khác nhau vơ tình khiến việc bảo mật cho ngơn ngữ lập trình này
khơng được đánh giá cao. Bởi thế, q trình sử dụng ln tồn tại những nguy cơ
nhất định cần chúng ta tìm hiểu và chủ động chú ý cẩn trọng.
Một hạn chế của ngôn ngữ JS chính là việc chúng ta có thể sử dụng để thực thi
mã độc trên máy tính của người dùng. Tình trạng này vơ tình gây ra những thiệt hại,
những ảnh hưởng không hề nhỏ tới công việc mà chúng ta đang thực hiện.
Trong một số trường hợp, trong một vài trình duyệt cụ thể việc sử dụng ngơn

ngữ lập trình Javascript khơng thể thực hiện được. Nó gây ra ảnh hưởng tới việc
ứng dụng, đáp ứng cho nhu cầu của từng người.
Sử dụng ngơn ngữ lập trình này có một hạn chế khác khi có JS code snippets
khá lớn. Khi có khả năng triển khai khác nhau tùy từng thiết bị, nó vừa là ưu điểm

8


song cũng tồn tại những hạn chế nhất định. Chính điều này khiến nguy cơ khơng
đồng nhất có thể xảy ra, gây ảnh hưởng tới quá trình thực hiện mục tiêu cuối cùng.
REACTJS

Hình 2.2. Logo ReactJS

Giới thiệu React:
React (Hay ReactJS, React.js) là một thư viện Javascript mã nguồn mở để xây
dựng các thành phần giao diện có thể tái sử dụng. Nó được tạo ra bởi Jordan Walke,
một kỹ sư phần mềm tại Facebook. Người bị ảnh hưởng bởi XHP (Một nền tảng
thành phần HTML cho PHP). React lần đầu tiên được triển khai cho ứng
dụng Newsfeed

của Facebook năm

2011,

sau

đó

được

triển

khai

cho Instagram.com năm 2012. Nó được mở mã nguồn (open-sourced) tại JSConf
US tháng 5 năm 2013.
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 [2].
Virtual DOM:
Công nghệ DOM ảo giúp tăng hiệu năng cho ứng dụng. Việc chỉ node gốc mới
có trạng thái và khi nó thay đổi sẽ tái cấu trúc lại tồn bộ, đồng nghĩa với việc DOM
tree cũng sẽ phải thay đổi một phần, điều này sẽ ảnh hưởng đến tốc độ xử lý. ReactJS

9


sử dụng Virtual DOM (DOM ảo) để cải thiện vấn đề này.Virtual DOM là một object
Javascript, mỗi object chứa đầy đủ thông tin cần thiết để tạo ra một DOM, khi dữ liệu
thay đổi nó sẽ tính tốn sự thay đổi giữa object và tree thật, điều này sẽ giúp tối ưu
hoá việc re-render DOM tree thật [2].
Cơ chế one-way data binding – luồng dữ liệu 1 chiều. Dữ liệu được truyền từ
parent đến child thông qua props. Luồng dữ liệu đơn giản giúp chúng ta dễ dàng kiểm
soát cũng như sửa lỗi. Với đặc điểm ở trên, React dùng để xây dựng các ứng dụng
lớn mà dữ liệu của chúng thay đổi liên tục theo thời gian. Dữ liệu thay đổi thì hầu hết
kèm theo sự thay đổi về giao diện. Ví dụ như Facebook: trên Newsfeed của bạn cùng
lúc sẽ có các status khác nhau và mỗi status lại có số like, share, comment liên tục
thay đổi. Khi đó React sẽ rất hữu ích để sử dụng [2].

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ã
Javascript. 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 q trình biên dịch. Ngồ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 Javascript có thể sử
dụng [2].
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.

10


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 [2].
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 [2].
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 [2].

NODEJS

Hình 2.3. Logo NodeJS

Giới thiệu về Nodejs:
Node.js là một JavaScript runtime được build dựa trên Chrome’s V8
JavaScript engine. Node.js sử dụng mơ hình event-driven, non-blocking I/O khiến nó
trở nên nhẹ và hiệu quả. V8 engine là một JavaScript engine mã nguồn mở chạy trên
các trình duyệt Chrome, Opera và Vivaldi. Nó được thiết kế tập trung vào hiệu năng
và chịu trách nhiệm cho việc dịch mã JavaScript sang mã máy để máy tính có thể
hiểu và chạy được. Nhưng bạn cũng nên tránh nhầm lẫn rằng Node chạy trên trình

11


duyệt. Cha đẻ của Node dựa trên V8 engine, cải tiến một số tính năng chẳng hạn file
system API, thư viện HTTP và một số phương thức liên quan đến hệ điều hành. Điều
đó có nghĩa là Node.js là một chương trình giúp ta có thể chạy code JavaScript trên
máy tính, nói cách khác nó là một JavaScript runtime [3].
Mơ hình hoạt động của Nodejs:
Để cho dễ hiểu, khi bạn connect đến một server truyền thống, chẳng hạn
Apache, nó sẽ sinh ra một thread mới để xử lý request. Ở các ngơn ngữ như PHP hay
Ruby, mỗi một phép tốn I/O (ví dụ truy cập database) sẽ chặn execution trên code
của bạn cho đến khi phép tốn đó hồn thành. Nói cách khác, server sẽ đợi cho đến
khi database được duyệt xong mới xử lý kết quả. Nếu có những request mới, server
lại tiếp tục sinh những thread mới để xử lý chúng. Điều này dẫn đến nguy cơ kém
hiệu quả, khi một lượng lớn thread được tạo ra sẽ khiến cho hệ thống trở nên chậm
chạp, tệ hơn nữa có thể khiến site bị sập. Cách thơng thường để giải quyết tình trạng
này là bổ sung thêm server [3].
Node.js, mặt khác là single-threaded. Nó cũng thuộc dạng event-driven hay

nói cách khác tất cả những gì xảy ra trong Node là để phản hồi lại với một sự kiện.
Ví dụ, khi một request được gửi đến, server bắt đầu xử lý nó. Nếu nó gặp phải phép
tốn I/O, thay vì đợi cho phép tốn này kết thúc, nó sẽ đăng ký một callback trước
khi tiếp tục xử lý event tiếp theo. Khi phép toán I/O kết thúc, server sẽ chạy callback
và tiếp tục làm việc trên request ban đầu. Ở tầng bên dưới, Node sử dụng thư
viện libuv để thực hiện hoạt động asynchronous (non-blocking) này. Mơ hình hoạt
động này của Node giúp server có thể xử lý một lượng lớn kết nối đến đồng thời.
Quan điểm truyền thống để scale một Node app là clone nó và để instance được clone
chia sẻ cơng việc. Node.js thậm chí có module built-in sẵn để giúp bạn thực hiện
chiến lược clone này trên một server duy nhất [3].

12


Ưu điểm:
− Có tốc độ xử lý nhanh nhờ cơ chế xử lý bất đồng bộ (non-blocking). Bạn có thể
dễ dàng xử lý hàng ngàn kết nối trong khoảng thời gian ngắn nhất.
− Giúp bạn dễ dàng mở rộng khi có nhu cầu phát triển website.Ứng dụng về các sự
kiện và lắng nghe.
− Nhận và xử lý nhiều kết nối chỉ với một single-thread. Nhờ đó, hệ thống xử lý sẽ
sử dụng ít lượng RAM nhất và giúp q trình xử Nodejs lý nhanh hơn rất nhiều.
− Có khả năng xử lý nhiều Request/s cùng một lúc trong thời gian ngắn nhất.
− Có khả năng xử lý hàng ngàn Process cho hiệu suất đạt mức tối ưu nhất.
Nhược điểm:
− Nodejs gây hao tốn tài nguyên và thời gian. Nodejs được viết bằng C++ và
JavaScript nên khi xử lý cần phải trải qua một quá trình biên dịch. Nếu bạn cần
xử lý những ứng dụng tốn tài ngun CPU thì khơng nên sử dụng Nodejs.
− Nodejs so với các ngôn ngữ khác như PHP, Ruby và Python sẽ khơng có sự chênh
lệch quá nhiều. Nodejs có thể sẽ phù hợp với việc phát triển ứng dụng mới. Tuy
nhiên khi xây dựng và triển khai dự án quan trọng thì Nodejs khơng phải là sự lựa

chọn hồn hảo nhất.
TYPESCRIPT

Hình 2.4. Logo TypeScript

13


Giới thiệu chung:
TypeScript là một dự án mã nguồn mở được phát triển bởi Microsoft, nó có
thể được coi là một phiên bản nâng cao của Javascript bởi việc bổ sung tùy chọn kiểu
tĩnh và lớp hướng đối tượng mà điều này khơng có ở Javascript. TypeScript có thể sử
dụng để phát triển các ứng dụng chạy ở client-side (Angular2) và server-side
(NodeJS). TypeScript sử dụng tất cả các tính năng của của ECMAScript 2015 (ES6)
như classes, modules. Không dừng lại ở đó nếu như ECMAScript 2017 ra đời thì
mình tin chắc rằng TypeScript cũng sẽ nâng cấp phiên bản của mình lên để sử dụng
mọi kỹ thuật mới nhất từ ECMAScript. Thực ra TypeScript không phải ra đời đầu
tiên mà trước đây cũng có một số thư viện như CoffeeScript và Dart được phát triển
bởi Google, tuy nhiên điểm yếu là hai thư viện này sử dụng cú pháp mới hồn tồn,
điều này khác hồn tồn với TypeScript, vì vậy tuy ra đời sau nhưng TypeScript vẫn
đang nhận được sự đón nhận từ các lập trình viên [4].
Tại sao nên sử dụng TYPESCRIPT?
− Dễ phát triển dự án lớn: Với việc sử dụng các kỹ thuật mới nhất và lập trình
hướng đối tượng nên TypeScript giúp chúng ta phát triển các dự án lớn một cách
dễ dàng.
− Nhiều Framework lựa chọn: Hiện nay các Javascript Framework đã dần khuyến
khích nên sử dụng TypeScript để phát triển, ví dụ như AngularJS 2.0 và Ionic 2.0.
− Hỗ trợ các tính năng của Javascript phiên bản mới nhất: TypeScript luôn đảm
bảo việc sử dụng đầy đủ các kỹ thuật mới nhất của Javascript, ví dụ như version
hiện tại là ECMAScript 2015 (ES6).

− Là mã nguồn mở: TypeScript là một mã nguồn mở nên bạn hồn tồn có thể sử
dụng mà khơng mất phí, bên cạnh đó cịn được cộng đồng hỗ trợ.
− TypeScript là Javascript: Bản chất của TypeScript là biên dịch tạo ra các đoạn
mã Javascript nên bạn có thể chạy bất kì ở đâu miễn ở đó có hỗ trợ biên dịch
Javascript. Ngồi ra bạn có thể sử dụng trộn lẫn cú pháp của Javascript vào bên
trong TypeScript, điều này giúp lập trình viên tiếp cận TypeScript dễ dàng hơn.

14


Ưu điểm:
− TypeScript miễn phí và có sự thuận tiện: Một loại ngơn ngữ lập trình tĩnh như
TypeScript cùng với tất cả số liệu và thông số của bạn sẽ được lấy một cách dễ
dàng nhờ IDE cùng trình biên dịch. Hỗ trợ cho chính q trình tìm kiếm giúp tiết
kiệm về thời gian hơn cho việc kiểm tra lại code, hay như không cần thông qua
bất cứ ai để tìm hiểu thơng tin dữ liệu. Cạnh đó, TypeScript cịn giúp giảm về
phần trăm của việc va chạm tại thời gian vận hành.
− Thực hiện đơn giản và thao tác nhanh: Thao tác của TypeScript rất đơn giản,
tiết kiệm thời gian mà kết quả nhận được lại là sự bất ngờ khi khắc phục được lỗi
và giúp người đọc dễ hiểu. Thay vì như một ngơn ngữ thường sẽ cần thực hiện rất
nhiều bước: bắt đầu từ việc restart lại hàm, đổi số để hồn thành đoạn mã và tiếp
đó khi apply hồn tất và có đủ cơng cụ thì vận hành, cuối cùng khi vận hành có
lỗi thì sửa lại.
− Giúp tái cấu trúc: Tất nhiên lỗi xảy ra trong quá trình làm việc của các lập trình
viên là thường xuyên với những lỗi nhỏ. Khi đó việc sử dụng TypeScript sẽ giúp
cho việc chỉnh sửa code dễ hơn qua lệnh Rename Symbol hoặc Find All
Occurrences. Còn về các ngơn ngữ khác khi muốn sửa thì sẽ cần thay đổi cả về
các tập tin đặc biệt là có sự liên quan hay sử dụng RegEx. Nếu bạn muốn sử dụng
TypeScript cho việc nâng cấp hệ thống thì chắc chắn ngôn ngữ sẽ giúp tái cấu trúc
lại phù hợp theo nhu cầu về tìm kiếm. Hơn nữa khơng gây sự hỗn loạn và khi code

của bạn dùng không match được bất cứ dữ liệu nào thì sẽ được báo đến ngay để
xử lý.
− Giảm về tỷ lệ mắc lỗi: Thông qua việc cảnh báo về lỗi khi bắt đầu viết code từ
đó giúp tỷ lệ mắc lỗi giảm xuống mức thấp nhất và bạn sẽ được TypeScript trả lại
giá trị null hay với một gợi ý thay đổi sửa. Một lần chỉnh sửa đó hệ thống hoạt
động sẽ khơng phải mắc lại lỗi từ đó tiết kiệm về chính thời gian sửa lỗi.
− Thử nghiệm về boilerpalte được hạn chế: Đối với các quy trình kiểm tra cũng
như việc báo lỗ tự động khi code sẽ giúp bạn có thể chắc chắn hơn về việc các
biến dữ liệu được đặt đúng chỗ. Từ đó giúp bạn khơng cần lo lắng về hệ thống

15


không cần vận hành hay như kiểm tra lại tạo sự ưu tiên hơn cho kiểm tra chất
lượng logic. Hay như các bước thử nghiệm cũng được giảm đi mà hiệu quả công
việc nhận được luôn luôn cao.
− Tạo sự hợp nhất mã đơn giản hơn: Khi hoàn thiện về một đoạn code chúng ta
đã có thể chạy thử nghiệm dù là tại đó mọi thứ đều chạy trơn tru. Tuy nhiên, khi
áp dụng tổng thể thì liệu rằng bạn có chắc rằng đoạn code đó sẽ hoạt động tốt hơn
khi áp dụng cho mơi trường khác. Có lẽ đây chính là điểm mạnh mà TypeScript
đem lại vì tạo nên sự hợp nhất mã đơn giản và dễ dàng cho việc đánh giá đoạn mã
mới qua kiểm tra biên dịch.
− Giúp tối ưu cho quy trình làm việc: Tuy là tối ưu những TypeScript sẽ khơng
bao giờ khuyến khích người dùng có sự nhảy bước và thực hiện sai các thao tác
chung. Mà TypeScript sẽ chỉ khuyến khích người dùng đưa ra các quyết định về
một kiểu dữ liệu chuẩn bị cho việc sử dụng ngơn ngữ tĩnh. Từ chính quy luật đó
mà giúp lập trình viên đem lại hiệu quả cho q trình làm việc của chính mình.
Nhược điểm:
− Cần có sự bắt buộc về dụng biên dịch để có thể vận hành TypeScript cùng đi
.js khi trên nền tảng Node.js cho việc tái sử dụng.

− Bước thiết lập cũng sẽ cồng kềnh hơn vì khi dùng TypeScript bạn sẽ cần đảm bảo
về máy chủ Node.js hay trình thử nghiệm, webpack đều có thể hoạt động được
với TypeScript. Hay như mỗi khi apply hoặc thêm về library bất kỳ thì cũng cần
thêm về Typedef vào.
− Mang tính năng mở trong việc sử dụng nên sẽ gây sự khó khăn phần nào đó về
việc kiểm sốt các thay đổi và cập nhật.
− Những ứng dụng phức tạp sẽ cần tới sự đòi hỏi rất nhiều về file source cũng như
tách thành nhiều thư mục riêng mới đảm bảo về sự thống nhất nhưng lại tốn nhiều
cơng sức vì thao tác bằng tay.
− Có thể là Javascript có sự hỗ trợ về OOP tuy nhiên khi áp dụng lại khó khăn và
việc triển khai code lại không hề đơn giản như các ngôn ngữ bậc cao khác.

16


DRAW.IO

Hình 2.5. Logo Draw.io

Giới thiệu:
Draw.io là một cơng cụ vẽ sơ đồ rất mạnh mẽ, hỗ trợ nhiều hình khối, chạy
online khơng cần cài đặt mà lại miễn phí và không bị giới hạn số biểu đồ như nhiều
tool vẽ nền web khác. Bạn có thể vẽ sơ đồ về mạng, điện, phác thảo vị trí các căn
phịng trong nhà, hay vẽ các quy trình kinh doanh, vận hành, sản xuất [6].
Draw.io có thư viện template rất phong phú để bạn có thể bắt đầu nhanh hơn, khơng
phải tự mình vẽ lại hết tự đầu.
Sau khi vẽ xong, có thể: Lưu file draw.io vào Google Drive hoặc Download file về
máy tính được hỗ trợ các định dạng hình ảnh, pdf và ảnh vector SVG.
Ưu điểm:
− Nó là một chương trình sử dụng miễn phí.

− Nó là khá nhanh trong q trình xử lý.
− Các tính năng hấp dẫn.
− Khơng có yêu cầu tối thiểu để sử dụng nó.
− Cho phép bạn chia sẻ thiết kế của mình.
− Nhiều mẫu để lựa chọn.

17