Báo cáo chuyên Đề học phần kiểm thử phần mềm Đề tài kiểm thử trang web bán Đồ Điện tử qhd

1.2 Mục tiêu của kiểm thử phần mềm Kiểm thử phần mềm sẽ giúp hoàn thiện các ứng dụng phần mềm hoặc sảnphẩm so với yêu cầu kinh doanh và người sử dụng.. Kiểm thử bao phủ các lĩnh vực khác

TRƯỜNG ĐẠI HỌC ĐIỆN LỰC

KHOA CÔNG NGHỆ THÔNG TIN

BÁO CÁO CHUYÊN ĐỀ HỌC PHẦN

Ngành : CÔNG NGHỆ THÔNG TIN Chuyên ngành : CÔNG NGHỆ PHẦN MỀM Lớp : D16CNPM4

Khóa : 2021

STT Họ và tên sinh viên Nội dung thực hiện Điểm Chữ ký

1

Nguyễn Bá

Quý 21810310124

Giảng viên chấm 1:

Giảng viên chấm 2:

MỤC LỤC

LỜI CẢM ƠN 1

MỞ ĐẦU 2

1 Tổng quan tình hình nghiên cứu thuộc lĩnh vực của đề tài 2

2 Tính cấp thiết, ý nghĩa khoa học và thực tiễn của đề tài 2

CHƯƠNG 1: TỔNG QUAN VỀ KIỂM THỬ PHẦN MỀM 3

1.2 Mục tiêu của kiểm thử phần mềm 4

1.3 Vai trò của kiểm thử trong vòng đời phát triển phần mềm 5

1.3.1 Kiểm thử phần mềm trong mô hình thác nước 5

1.3.2 Kiểm thử phần mềm trong mô hình chữ V 5

1.3.3 Kiểm thử phần mềm trong Agile – Scrum 5

1.4 Cơ hội việc làm dành cho kiểm thử viên 6

CHƯƠNG 2: CƠ SỞ LÝ THUYẾT - CÁC CÔNG CỤ ĐƯỢC SỬ DỤNG 8

2.1 Ngôn ngữ lập trình JavaScript 8

2.1.1 Giới thiệu về ngôn ngữ lập trình JavaScript 8

2.1.2 Đặc trưng của ngôn ngữ lập trình JavaScript 8

2.1.3 Các phiên bản JavaScript 10

2.2 React 13

2.3 Node.js 16

2.4 Giới thiệu về Selenium 19

2.4.1 Công cụ kiểm thử tử động Selenium 19

2.4.2 Thành phần của Selenium 21

2.4.3 Tính năng của Selenium 21

2.4.4 Selenium Webdriver 21

2.5 Giới thiệu Visual Studio Code 23

CHƯƠNG 3 PHÂN TÍCH THIẾT KẾ HỆ THỐNG 25

3.1 Giới thiệu bài toán 25

3.1.1 Hoạt động nghiệp vụ 25

3.2 Xác định các Actor và Use case tổng quát của hệ thống 25

3.4 Phân tích usecase 27

3.4.1 Usecase đăng nhập 27

3.4.2 Usecase quản lí các mặt hàng 27

3.4.3 Usecase quản lí danh sách mặt hàng 28

3.4.4 Usecase quản lí Users 28

3.4.5 Usecase quản lí Orders 29

CHƯƠNG 4: DEMO SẢN PHẨM VÀ KIỂM THỬ PHẦN MỀM 30

4.1 Trang Web bán hàng điện tử QHD Online 30

4.1.1 Chức năng Login trang Web 30

4.1.2 Chức năng Register trang Web 30

4.1.3 Giao diện chính QHD Store 31

4.1.4 Giao diện admin 33

4.1.5 Giao diện User 35

4.2 Kiểm thử 38

KẾT LUẬN 40

TÀI LIỆU THAM KHẢO 41

LỜI CẢM ƠN

Lời đầu tiên, nhóm em xin gửi lời cảm ơn sâu sắc đến thầy Phạm ĐứcHồng, người đã nhiệt tình giảng giải, hỗ trợ và định hướng đưa ra những đónggóp quý báu, tạo mọi điều kiện tốt nhất cho nhóm em hoàn thành dự án Trongthời gian làm việc cùng thầy, nhóm em không ngừng tiếp thu thêm nhiều kiếnthức bổ ích mà còn học tập được tinh thần làm việc nghiêm túc, hiệu quả, đây lànhững điều rất cần thiết cho nhóm em trong quá trình học tập và công tác saunày

Nhóm em xin chân thành cảm ơn các thầy cô giảng viên, cán bộ trườngĐại học Điện Lực đã nỗ lực cống hiến giảng dạy nhóm em trong suốt nhữngnăm đại học để chúng em có đủ kiến thức để hoàn thành dự án

Trong quá trình thực hiện, sản phẩm còn nhiều điểm hạn chế, kính mongcác thầy cô nhận xét, đánh giá để nhóm em có thể hoàn thiện sản phẩm hơn nữa

Chúng em xin trận thành cảm ơn !!!

MỞ ĐẦU

1 Tổng quan tình hình nghiên cứu thuộc lĩnh vực của đề tài

Chúng ta đang sống trong thời kỳ hiện đại hóa, khi mà công nghệ được ápdụng trên mọi lĩnh vực của cuộc sống như kinh doanh, y tế, giáo dục,

Đặc biệt là hiện nay con người thích sử dụng các thiết bị thông minh nhưđiện thoại, laptop, để dùng cho mục đích mua cũng như tiết kiệm thời gianphục vụ cho các hoạt động khác Chính vì thế các ứng dụng, website hỗ trợ conngười trong mục đích quản lý về nhiều lĩnh vực đang rất được ưa chuộng và phổbiến

Thành lập một trung tâm dạy học là một chuyện và để có thể quản lýđược trung tâm một cách tốt nhất, bài bản nhất thì rất cần một phần mềm quản

lý việc đặt hàng, mua hàng một cách tốt nhất , tối ưu nhất và quan trọng hơn hết

là thân thiện với người dùng Ở thời đại công nghệ 4.0 hiện nay việc sử dụngcông nghệ thông tin vào việc quản lý mua bán hàng hóa thay cho việc quản lýthủ công

Nắm bắt được tình hình trên, nhóm em đã tạo ra ý tưởng xây dựng mộtWebsite quản lý bán đồ điện tử Online QHD Giúp cho việc quản lý mua bántrở nên thuận tiện hơn.Đề tài này nhóm em phát triển chức năng theo nhóm tácnhân là người dùng và quản trị hệ thống, vì vậy trong khóa luận này nhóm em

sẽ giới thiệu, phân tích chức năng, giải quyết bài toán nghiệp vụ của người dùng

và quản trị hệ thống

2 Tính cấp thiết, ý nghĩa khoa học và thực tiễn của đề tài

Từ những phân tích trên, ý tưởng cho một phần mền quản lý mua bánhình thành nhằm mục đích giúp cho doanh nghiệp thuận tiện hơn trong việcquản lý người dùng và số lượng hàng hóa bán ra một cách thuận tiện nhất

Trong báo cáo đồ án này sẽ tập trung trình bày những nghiên cứu kiếnthức cơ bản về lập trình Nodejs, Reactjs Phần kiểm thử sẽ đi sâu vào Selenium,công cụ tiến hành kiểm thử tự động chức năng được sử dụng cho đồ án Triểnkhai các bước thiết kế, xây dựng ứng dụng giúp người dùng tra cứu thông tin,đăng kí, tìm kiếm, thanh toán một cách thuận tiện nhất

Đây không phải là một đề tài mới nhưng do kinh nghiệm của em chưanhiều và còn nhiều hạn chế cũng như sai sót mong thầy cô và các bạn đóng góp

ý kiến để đề tài được hoàn thiện hơn

CHƯƠNG 1: TỔNG QUAN VỀ KIỂM THỬ PHẦN MỀM

1.1 Tầm quan trọng của việc kiểm thử phần mềm

Một phần mềm được tạo ra thì luôn tồn tại lỗi Những lỗi phần mềm nàynếu không được phát hiện ra và chỉnh sửa thì có thể gây ra những sự cố đángtiếc Một trong những lỗi nổi tiếng nhất trong lịch sửa thế giới chính là Y2K.Y2K là viết tắt của Year 2000 và được gọi là “lỗi thiên niên kỷ” Vào cuốinhững năm 90, lỗi Y2K là lỗi được đề cập nhiều nhất khi cả thế giới chờ đợimáy bay va chạm, tàu vũ trụ biến mất, thị trường chứng khoán sụp đổ như dựđoán của nhiều chuyên gia công nghệ Lỗi này là một sai lầm đơn giản trong hệthống quản lý thời gian của các máy tính chỉ sử dụng hai chữ sốđể biểu thị mộtnăm Theo đó, 1970 sẽ được biểu diễn là 70 và năm 1999 sẽ được biểu diễn là

99 Lý do của việc này là để tiết kiệm bộ nhớ

Khi gần đến năm 2000, các lập trình viên máy tính nhận ra rằng máy tính

sẽ không thể biểu diễn chính xác năm 2000, vì 00 được dùng để biểu diễn năm

1900 Các hoạt động được lập trình hàng ngày hoặc hàng năm sẽ bị hư hỏnghoặc thiếu sót Vào ngày 31 tháng 12 năm 1999, chuyển sang ngày 1 tháng 1năm 2000, máy tính sẽ hiểu là từ ngày 31 tháng 12 năm 1999, chuyển sang ngày

1 tháng 1 năm 1900

Các ngân hàng, tính lãi suất hàng ngày, phải đối mặt với những vấn đềthực sự Lãi suất là số tiền mà người cho vay, ví dụ như ngân hàng, tính phí mộtkhách hàng, chẳng hạn như một cá nhân hoặc một doanh nghiệp khi họ vay tiền.Thay vì tỷ lệ lãi suất cho một ngày, máy tính sẽ tính tỷ lệ lãi suất cho gần 100năm!

Các trung tâm công nghệ, như các nhà máy điện, cũng bị đe dọa bởi lỗiY2K Nhà máy điện phụ thuộc máy tính để kiểm tra an toàn và bảo trì, chẳnghạn như áp lực nước hoặc mức độ bức xạ Không có ngày chính xác sẽ làm mấtnhững tính toán này và có thể đưa các cư dân gần đó đối mặt với nguy hiểm

Giao thông vận tải cũng phụ thuộc vào thời gian và ngày tháng chính xác.Các hãng hàng không đặc biệt bị đe doạ vì máy tính lưu thông tin về tất cả cácchuyến bay theo lịch trình sẽ bị đảo lộn hết cả

Cuối cùng, có Y2K đã không gây ra hậu quả gì nghiêm trọng nhưng cũngphải mất một thời gian để các nhà phát triển phần mềm khắc phục triệt để lỗinày

Hình 1.1: Kiểm thử phần mềm

Việc lỗi của phần mềm gây ra thiệt hại do không được phát hiện từ sớm,

từ đó tạo ra những hậu quả liên quan đến con người, kinh tế, xã hội, tiền bạc Đểtránh những tổn thất không đáng có hay giảm thiểu mức độ rủi ro cũng như đảmbảo chất lượng của phần mềm khi nó được tạo ra, việc kiểm thử phần mềm làmột điều vô cùng cần thiết Kiểm thử là quá trình không thể thiếu trong các quytrình phát triển phần mềm

1.2 Mục tiêu của kiểm thử phần mềm

Kiểm thử phần mềm sẽ giúp hoàn thiện các ứng dụng phần mềm hoặc sảnphẩm so với yêu cầu kinh doanh và người sử dụng Nó là rất quan trọng để đảmbảo kiểm thử tốt để kiểm thử các ứng dụng phần mềm hoàn toàn và chắc chắnrằng nó hoạt động tốt và theo các thông số kỹ thuật

Việc xác định phạm vi kiểm tra các trường hợp kiểm thử nên được thiết

kế tốt với khả năng tối đa của việc tìm kiếm các lỗi hiệu quả và được tính toán

là số bug báo cáo cho mỗi trường hợp kiểm thử

Kiểm tra phần mềm để chắc chắn kiểm thử đang thực hiện đúng cách và

hệ thống đã sẵn sàng để sử dụng Kiểm thử bao phủ các lĩnh vực khác nhau như:chức năng của các ứng dụng, khả năng tương thích của các ứng dụng với các hệđiều hành, phần cứng và các loại khác nhau của các trình duyệt, thực hiện kiểmthử để kiểm tra hiệu năng của các ứng dụng để đảm bảo rằng hệ thống đáng tincậy và không có trục trặc hay không nên có bất kỳ vấn đề cản trở Xác định rằngcác ứng dụng có thể được triển khai một cách dễ dàng với máytính và không cóbất kỳ sự cố Do đó các ứng dụng rất dễ dàng để cài đặt, tìm hiểu và sử dụng

Kiểm thử phần mềm cho phép tạo ra những đánh giá khách quan về mức

độ phù hợp của hệ thống các yêu cầu đã nêu và thông số kỹ thuật Kiểm tra xácnhận rằng hệ thống đáp ứng các yêu cầu khác nhau bao gồm: chức năng, hiệusuất, độ tin cậy, an toàn, khả năng sử dụng và như vậy Việc xác nhận này đượcthực hiện để đảm bảo rằng đang xây dựng hệ thống phù hợp Xác nhận để đảmbảo đang xây dựng hệ thống phù hợp Ngoài việc giúp đưa ra quyết định, cácthông tin từ các kiểm thử phần mềm giúp quản lý rủi ro

1.3 Vai trò của kiểm thử trong vòng đời phát triển phần mềm

Kiểm thử phần mềm là hoạt động không thể tách rời với hoạt động pháttriển phần mềm Hiện nay có 3 quy trình phát triển phần mềm chủ yếu được sửdụng: mô hình thác nước, mô hình chữ V và mô hình Agile – Scrum

1.3.1 Kiểm thử phần mềm trong mô hình thác nước

Mô hình thác nước là một mô hình tuần tự được chia thành các giai đoạnkhác nhau trong hoạt động phát triển phần mềm Mỗi giai đoạn được thiết kế đểthực hiện hoạt động cụ thể trong giai đoạn phát triển phần mềm Giai đoạn kiểmthử trong mô hình thác nước chỉ bắt đầu sau khi hệ thống được xây dựng hoànthành Kiểm thử được thực hiện trong quá trình phát triển phần mềm

1.3.2 Kiểm thử phần mềm trong mô hình chữ V

Mô hình chữ V là một phần mở rộng của mô hình thác nước Khônggiống như mô hình thác nước, trong mô hình chữ V có một giai đoạn kiểm thửtương ứng cho từng giai đoạn phát triển phần mềm Trong mô hình chữ V, kiểmthử được thực hiện song song với giai đoạn phát triển phần mềm Kiểm thửđược thực hiện như một phần của giai đoạn phát triển phần mềm

1.3.3 Kiểm thử phần mềm trong Agile – Scrum

Mô hình Agile – Scrum không thực hiện toàn bộ yêu cầu của hệ thốngvào coding và testing một lúc mà chia ra làm nhiều giai đoạn (sprint) khác nhau,mỗi giai đoạn sẽ làm một số yêu cầu nhất định Cán bộ kiểm thử sẽ được thamgia dự án ngay từ đầu, đảm bảo cuối mỗi spint có sản phẩm hoàn thành cả code

và test

Trong mỗi một giai đoạn phải tạo task cho code và test Một task codexong phải có 1 test test liền sau đó Do thời gian làm ngắn ngày nên phải đảmbảo cuối sprint hoàn thành xong được cả test

1.4 Cơ hội việc làm dành cho kiểm thử viên

Nhìn vào hình ảnh so sánh có thể nhận ra ưu thế lương thuộc về bên lậptrình viên Nhưng mức độ lương ngoài phụ thuộc vào tính chất nghiệp vụ thìcòn có thể kể đến nhiều yếu tố khác như:

 Các kỹ năng và trình độ của các kỹ năng liên quan đến công việc

 Kinh nghiệm làm việc của bản thân với vị trí công việc

 Mức lương hiện tại nhận được trước khi đảm nhận một công việckhác

 Tính chất công việc

 Vị trí, địa điểm làm việc

 Công ty tuyển dụng

 Lợi nhuận nhận được khi làm việc

 Kỹ năng đàm phán lương khi đi phỏng vấn công việc

Nhưng bỏ qua khía cạnh về tiền bạc, có những giá trị khác sẽ nhận lạiđược như kiến thức học hỏi được trong quá trình làm việc, các mối quan hệ vớiđồng nghiệp, cùng các kĩnăng mềm như khả năng xử lý tình huống, kĩ nănglàm việc nhóm hay tư duy vấn đề

Để tạo nên một phần mềm tốt thì cần có sự kết hợp từ lập trình viên vàkiểm thử viên trong quá trình xây dựng và phát triển phần mềm

CHƯƠNG 2: CƠ SỞ LÝ THUYẾT - CÁC CÔNG CỤ ĐƯỢC SỬ DỤNG

Trong chương này sẽ tập trung trình bày lý thuyết về ngôn ngữ lập trìnhdựa trên ngôn ngữ lập trình JavaScript cụ thể là React và Node.js dành cho việclập trình web Phần kiểm thử sẽ giới thiệu về Selenium cùng các công cụ được

sử dụng cho việc kiểm thử chức năng web

2.1 Ngôn ngữ lập trình JavaScript

2.1.1 Giới thiệu về ngôn ngữ lập trình JavaScript

JavaScript là một ngôn ngữ lập trình phổ biến chủ yếu dùng để phát triểncác ứng dụng web và tạo các trang web tương tác Được phát triển vào năm

1995 bởi Brendan Eich, JavaScript ban đầu ra đời nhằm giúp tạo các hiệu ứngđộng cho trình duyệt web Theo thời gian, ngôn ngữ này đã phát triển và trởthành một trong những công nghệ cốt lõi của web, cùng với HTML và CSS

Hình 2.1: Ngôn ngữ lập trình JavaScript

2.1.2 Đặc trưng của ngôn ngữ lập trình JavaScript

JavaScript có nhiều đặc trưng nổi bật, giúp nó trở thành một trong nhữngngôn ngữ lập trình phổ biến nhất hiện nay Dưới đây là các đặc trưng chính củaJavaScript:

1 Ngôn ngữ Đa Nền Tảng

 JavaScript có thể chạy trên hầu hết các trình duyệt và nền tảng, nhưWindows, macOS, Linux, và các thiết bị di động, mà không cần càiđặt thêm phần mềm

 Cả ứng dụng web và các ứng dụng không phụ thuộc vào nền tảng(cross-platform) đều có thể xây dựng bằng JavaScript, đặc biệt với cáccông nghệ như Node.js và Electron.js

2 Được Thông Dịch (Interpreted Language)

 JavaScript là một ngôn ngữ được thông dịch, tức là mã JavaScript cóthể được chạy ngay lập tức trong môi trường mà không cần biên dịch

 Trình duyệt web thường sẽ xử lý mã JavaScript trực tiếp mà khôngcần phải qua bước biên dịch, giúp tăng tốc độ phát triển và thửnghiệm

3 Lập Trình Hướng Đối Tượng (Object-Oriented Programming)

 JavaScript hỗ trợ lập trình hướng đối tượng với các tính năng như đốitượng, hàm tạo (constructor), và kế thừa thông qua prototype

 Các lớp (Class) và kế thừa (Inheritance) cũng đã được giới thiệu vớiES6, làm cho JavaScript dễ tiếp cận hơn đối với các nhà phát triểnquen thuộc với lập trình hướng đối tượng

4 Lập Trình Bất Đồng Bộ (Asynchronous Programming)

 JavaScript hỗ trợ các tác vụ bất đồng bộ như AJAX và Fetch API,giúp xử lý yêu cầu mạng, đọc/ghi tệp, và các tác vụ khác mà khônglàm gián đoạn ứng dụng

 JavaScript cung cấp các cơ chế như Callbacks, Promises, vàasync/await để quản lý các tác vụ bất đồng bộ dễ dàng hơn

5 Ngôn ngữ Dynamic Typing (Động kiểu)

 JavaScript là ngôn ngữ động, nghĩa là kiểu dữ liệu của biến có thểthay đổi trong quá trình thực thi

 Bạn không cần khai báo kiểu dữ liệu cho biến, và điều này làm choJavaScript linh hoạt nhưng cũng có thể gây ra lỗi không mong muốnnếu không được quản lý chặt chẽ

6 Hướng Sự Kiện (Event-Driven)

 JavaScript hoạt động dựa trên sự kiện, giúp các hành động như nhấnnút, di chuột, hay cuộn trang có thể được xử lý bằng cách đăng ký vàlắng nghe các sự kiện

 Điều này đặc biệt hữu ích trong các ứng dụng web, cho phép các nhàphát triển tạo trải nghiệm người dùng động và phản hồi nhanh

7 Single-Threaded với Mô Hình Event Loop

 JavaScript là ngôn ngữ đơn luồng (single-threaded), nghĩa là nó chỉthực thi một tác vụ tại một thời điểm.

 Để xử lý bất đồng bộ, JavaScript sử dụng mô hình Event Loop, chophép các tác vụ bất đồng bộ được đẩy vào hàng đợi và thực thi khiluồng chính rảnh

8 Hỗ Trợ Các Module

 Với sự ra đời của ES6, JavaScript hỗ trợ sử dụng module, cho phépchia tách mã nguồn thành các phần nhỏ hơn và dễ quản lý hơn

 Modules giúp quản lý các phụ thuộc (dependencies), tăng tính bảo mật

và hiệu suất cho các dự án lớn

9 Tương Tác với HTML và DOM

 JavaScript có thể tương tác trực tiếp với HTML và Document ObjectModel (DOM), cho phép các thay đổi trực tiếp lên cấu trúc trang web,như thay đổi nội dung, thay đổi kiểu dáng CSS, hay thao tác với cácphần tử HTML

 Điều này giúp JavaScript tạo ra các trang web và ứng dụng web cótính tương tác cao

10 Cộng Đồng và Hệ Sinh Thái Lớn

 JavaScript có một cộng đồng nhà phát triển rộng lớn và một hệ sinhthái phong phú với nhiều thư viện và framework nổi tiếng như React,Angular, Vue cho frontend, và Node.js cho backend

 Sự phong phú này giúp JavaScript có thể được áp dụng rộng rãi vànhanh chóng cập nhật với các công nghệ và xu hướng mới

 Phiên bản này giới thiệu nhiều cải tiến quan trọng như RegularExpressions (Biểu thức chính quy), câu lệnh try/catch, và cải thiện khảnăng xử lý lỗi.

 Đây là phiên bản được sử dụng rộng rãi trong suốt nhiều năm trướckhi có các phiên bản mới hơn

 let và const cho khai báo biến

 Arrow functions (hàm mũi tên) giúp đơn giản hóa cú pháp hàm

 Classes (lớp) cho lập trình hướng đối tượng

 Template literals giúp dễ dàng chèn biến vào chuỗi

 Destructuring (phân rã) cho phép lấy các giá trị từ mảng hoặc đốitượng dễ dàng hơn

 Exponentiation operator (**) cho phép tính lũy thừa

 Array.prototype.includes() kiểm tra một phần tử có trong mảng haykhông

 Thêm các tính năng cải tiến cho lập trình bất đồng bộ.

 Tính năng nổi bật:

 async và await giúp xử lý bất đồng bộ dễ dàng và trực quan hơn

 Object.entries() và Object.values() để duyệt qua đối tượng

7 ES9 / ES2018 - 2018

 Bổ sung các phương pháp làm việc với mảng và đối tượng

 Tính năng nổi bật:

 Rest/Spread properties cho đối tượng

 Asynchronous Iteration cho phép duyệt qua các giá trị bất đồng bộ

 Promise.prototype.finally() để thực hiện các tác vụ sau khi Promisehoàn tất

 BigInt cho phép xử lý các số nguyên lớn

 Nullish Coalescing Operator (??) để xử lý các giá trị null hoặcundefined

 Optional Chaining (?.) để truy cập thuộc tính một cách an toàn màkhông gây lỗi

10 ES12 / ES2021 - 2021

 Cải tiến khả năng xử lý chuỗi và hẹn giờ

 Tính năng nổi bật:

 String.prototype.replaceAll() để thay thế tất cả các chuỗi con.

 Promise.any() trả về kết quả đầu tiên của một trong những Promisethành công

 Logical Assignment Operators như &&=, ||=, và ??=

11 ES13 / ES2022 - 2022

 Tập trung vào cải thiện hiệu suất và khả năng sử dụng

 Tính năng nổi bật:

 Top-level await cho phép sử dụng await bên ngoài các hàm async

 Các tính năng Private Fields (#field) và Static Block cho lớp(class)

 Cải tiến về Regular Expressions và Error Cause cho Error (newError(message, { cause }))

 WeakRef để quản lý bộ nhớ hiệu quả hơn

2.2 React

React là một thư viện JavaScript mã nguồn mở, do Facebook phát triển,dùng để xây dựng giao diện người dùng (UI) cho các ứng dụng web React nổibật trong việc tạo các ứng dụng web đơn trang (SPA - Single Page Application),giúp mang lại trải nghiệm nhanh và mượt mà cho người dùng React tập trungvào Component-Based Architecture – một kiến trúc chia giao diện thành cácthành phần nhỏ, có thể tái sử dụng, linh hoạt và dễ bảo trì

Hình 2.2: Ngôn ngữ lập trình React JS

Các đặc điểm nổi bật của React :

1 Component-Based Architecture (Kiến trúc dựa trên thành phần)

 React chia UI thành các thành phần (component) riêng lẻ Mỗicomponent đảm nhiệm một phần cụ thể của giao diện và có thểquản lý dữ liệu và logic riêng

 Các component này có thể được tái sử dụng, giúp cho mã nguồn

dễ quản lý và phát triển hơn

2 Virtual DOM (DOM Ảo)

 React sử dụng Virtual DOM – một bản sao nhẹ của DOM thật –

để so sánh và tối ưu hóa các thay đổi trước khi cập nhật DOMthật

 Điều này giúp cải thiện hiệu suất của ứng dụng vì chỉ nhữngphần tử thay đổi mới được cập nhật thay vì toàn bộ trang

3 One-Way Data Binding (Ràng buộc dữ liệu một chiều)

 React sử dụng mô hình dữ liệu một chiều, dữ liệu chỉ truyền từcomponent cha sang component con qua props (thuộc tính)

 Điều này giúp cho việc kiểm soát dữ liệu và trạng thái trở nên

dễ dàng hơn, hạn chế lỗi và giúp ứng dụng có cấu trúc rõ rànghơn

4 JSX (JavaScript XML)

 React sử dụng JSX, một cú pháp mở rộng của JavaScript chophép bạn viết mã UI dễ dàng và trực quan giống HTML

 JSX kết hợp JavaScript và HTML, giúp mã dễ đọc và dễ quảnlý.

5 State Management (Quản lý trạng thái)

 State trong React là dữ liệu động của component, lưu trữ vàquản lý thông tin thay đổi trong suốt vòng đời của componentđó

 Đối với các ứng dụng lớn, quản lý state có thể trở nên phức tạp;

vì vậy React cung cấp Context API và các thư viện như Redux

để quản lý state hiệu quả hơn

6 React Hooks

 Từ phiên bản React 16.8, Hooks được giới thiệu để giúp các nhàphát triển sử dụng state và các tính năng của React mà khôngcần sử dụng class components

 Một số hooks phổ biến là useState, useEffect, useContext, vàuseReducer, giúp quản lý trạng thái và logic dễ dàng hơn trongfunction components

Ứng dụng của React :

 Single Page Applications (SPA): Các ứng dụng web như Facebook,Instagram, hay Twitter sử dụng React để tạo SPA có trải nghiệmngười dùng mượt mà, nhờ khả năng tải lại từng phần mà không cần tảilại toàn bộ trang

 Ứng dụng di động: Với React Native, React còn được sử dụng để xâydựng ứng dụng di động cho cả iOS và Android, tận dụng tối đa mãnguồn từ ứng dụng web

 Ứng dụng Web Phức Tạp: React có thể tích hợp với các thư viện vàcông cụ khác để tạo các ứng dụng web có khả năng mở rộng và hiệusuất cao

Các công cụ và thư viện liên quan đến React :

 React Router: Thư viện quản lý điều hướng (routing), đặc biệt quantrọng trong các SPA

 Redux, MobX: Các thư viện quản lý state, giúp chia sẻ và quản lý dữliệu dễ dàng giữa các component trong các ứng dụng lớn

 Axios, Fetch API: Thư viện hỗ trợ gửi yêu cầu HTTP để lấy dữ liệu từserver.

 Next.js, Gatsby: Frameworks phát triển trên nền React, hỗ trợ Side Rendering (SSR) và tạo các trang web tĩnh, giúp tối ưu SEO vàtốc độ tải trang

Server-Lợi ích khi sử dụng React

 Phát triển nhanh chóng nhờ kiến trúc component-based

 Cộng đồng lớn và tài liệu phong phú giúp dễ dàng tìm kiếm hỗ trợ

 Khả năng mở rộng cao cho phép xây dựng từ ứng dụng nhỏ đến hệthống phức tạp

 Tối ưu hiệu suất với Virtual DOM, giúp trang phản hồi nhanh và hiệuquả

2.3 Node.js

Node.js là một nền tảng mã nguồn mở, dựa trên JavaScript runtime củaChrome V8 Engine, cho phép các nhà phát triển xây dựng các ứng dụng phíaserver (backend) bằng JavaScript Được phát triển vào năm 2009 bởi RyanDahl, Node.js đã mở ra khả năng sử dụng JavaScript cho cả phía client vàserver, giúp phát triển các ứng dụng toàn diện và dễ dàng hơn

Hình 2.3: Ngôn ngữ lập trình Node JS

Đặc điểm nổi bật của Node.js

1 Kiến trúc Non-blocking, Asynchronous I/O (I/O không chặn và bấtđồng bộ)

 Node.js sử dụng mô hình sự kiện (event-driven) và không chặn(non-blocking), cho phép xử lý nhiều yêu cầu đồng thời mà khôngcần tạo nhiều thread cho mỗi yêu cầu

 Điều này giúp Node.js trở nên rất hiệu quả, đặc biệt khi xử lý cáctác vụ I/O như kết nối cơ sở dữ liệu, đọc/ghi file hoặc giao tiếp vớiAPI

2 Single-threaded (Đơn luồng)

 Node.js hoạt động trên một thread duy nhất, và sử dụng event loop

để quản lý các tác vụ bất đồng bộ Điều này giúp giảm tiêu tốn tàinguyên hệ thống, vì không cần phải tạo thêm thread cho mỗi yêucầu mới

3 Sử dụng JavaScript ở phía server

 Node.js cho phép sử dụng JavaScript ở phía server, giúp dễ dànghơn trong việc phát triển full-stack vì nhà phát triển chỉ cần thànhthạo một ngôn ngữ cho cả client và server

4 NPM (Node Package Manager)

 Node.js đi kèm với NPM, một hệ thống quản lý các thư viện và góicài đặt JavaScript lớn nhất thế giới NPM giúp nhà phát triển dễdàng tích hợp các thư viện bên ngoài vào dự án, từ thư viện đơngiản đến các framework phức tạp

5 Khả năng mở rộng cao (Scalability)

 Node.js rất thích hợp cho các ứng dụng cần mở rộng nhờ vào kiếntrúc không chặn và mô hình event-driven Các ứng dụng có thể dễdàng xử lý nhiều kết nối đồng thời mà không ảnh hưởng đến hiệusuất

6 Cộng đồng lớn và hệ sinh thái phong phú

 Node.js có cộng đồng lớn và hỗ trợ mạnh mẽ, với hàng ngàn thưviện, công cụ và framework như Express, Koa, NestJS, giúp pháttriển ứng dụng backend nhanh chóng và dễ dàng hơn

1 API và Backend cho ứng dụng web

 Node.js thường được sử dụng để xây dựng các RESTful API hoặcGraphQL API Các framework như Express.js, NestJS cung cấpcấu trúc tốt cho việc phát triển backend nhanh chóng

2 Ứng dụng Realtime

 Nhờ vào khả năng xử lý hàng ngàn kết nối đồng thời, Node.js rấtphù hợp cho các ứng dụng realtime như chat, game online, và cácdịch vụ streaming dữ liệu (như video hoặc âm nhạc)

3 Microservices Architecture

 Node.js thường được sử dụng để phát triển các kiến trúcmicroservices, nơi mỗi service là một thành phần độc lập Điều nàygiúp ứng dụng dễ bảo trì và mở rộng theo từng phần riêng lẻ

4 Ứng dụng xử lý dữ liệu nặng về I/O

 Các ứng dụng xử lý dữ liệu lớn từ các nguồn khác nhau như hệthống file, API, và cơ sở dữ liệu rất phù hợp với Node.js nhờ vàokiến trúc bất đồng bộ và không chặn

Các Framework và Thư viện phổ biến của Node.js

1 Express.js: Framework phổ biến nhất cho việc phát triển ứng dụngbackend với Node.js Express.js đơn giản hóa quá trình xây dựng API

và xử lý yêu cầu HTTP

2 Koa.js: Được phát triển bởi cùng một đội ngũ tạo ra Express, Koacung cấp một kiến trúc tối giản hơn, giúp linh hoạt trong việc xử lýmiddleware

3 NestJS: Một framework tiên tiến dựa trên TypeScript cho việc xâydựng các ứng dụng server-side, đặc biệt thích hợp cho các ứng dụnglớn, phức tạp

4 Socket.io: Thư viện giúp phát triển ứng dụng realtime dễ dàng hơnbằng cách cung cấp giao thức WebSocket cho các ứng dụng Node.js

5 Mongoose: Thư viện giúp kết nối và làm việc với MongoDB dễ dàngtrong Node.js bằng cách cung cấp một mô hình dữ liệu và các phươngthức tương tác với MongoDB

Ưu điểm của Node.js