phát triển phần mềm hướng dịch vụ website bán hàng trực tuyến

Với những khó khăn và phức tạp đó thì chúng ta đã đặt ra vấn đềvề việc đưa các ứng dụng công nghệ thông tin nhằm giúp giảm tải công việcquản lý bằng những phương pháp thủ công của con ng

TRƯỜNG ĐẠI HỌC KIẾN TRÚC HÀ NỘI

KHOA CÔNG NGHỆ THÔNG TIN

──────── *** ───────

BÁO CÁO

PHÁT TRIỂN PHẦN MỀM HƯỚNG DỊCH VỤ

Nhóm 5:

Đề tài: Website Bán Hàng Trực Tuyến

Sinh viên thực hiện : Đỗ Văn Chuyên

Kiều Đình Đàn

Nguyễn Thành Trung Trần Quang Huy

1.6 Giới thiệu về các công cụ được sử dụng trong đề tài: 7

1.6.1 Visual Studio code 7

1.8.1.Thư viện : ReactJS và ExpressJs 19

1.8.2.Môi trường : NodeJS 23

1.8.3.Cơ sở dữ liệu : NoSQL 27

CHƯƠNG 2: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG “WEB BÁN HÀNG” 28

2.1 Phân tích hệ thống: 28

2.1.1 Phân tích sơ bộ về hệ thống 28

2.1.2 Phân tích thành phần có trong hệ thống: 29

2.2 Thiết kế hệ thống: 31

2.2.1 Biểu đồ Usecase tổng quan của admin 32

2.2.2 Biểu đồ usecase tổng quan admin: 33

2.2.3 Biểu đồ usecase tổng quan của user 34

CHƯƠNG 3: XÂY DỰNG CHƯƠNG TRÌNH 37

3.1 Giao diện dành cho User 37

3.2 Giao diện cho Admin: 40

3.3 Thiết kế cơ sở dữ liệu 42

CHƯƠNG 4: CÀI ĐẶT , PHÂN QUYỀN, BỐ TRÍ CÁC THƯ MỤC DỰ ÁN 46

4.1 Cấu trúc thư mục cho dự án ReactJS 47

4.2 Cấu trúc dự Án Node.js (Express.js) 47

4.3 Quản lý mã nguồn với GitHub 48

CHƯƠNG 5 : CÀI ĐẶT KIỂM THỬ, ĐÁNH GIÁ VÀ HƯỚNG PHÁT TRIỂN 49

L I NÓI Đ UỜẦ

Ngày nay, đời sống con người ngày càng phát triển, dẫn đến nhu cầu muasắm của con người ngày càng được nâng cao Để đáp ứng được những nhu cầuđi mua sắm hàng ngày của khách hàng thì công việc quản lý của các cửa hànglớn nói riêng và các cửa hàng vừa và nhỏ nói chung, càng gặp nhiều khó khănvà phức tạp Với những khó khăn và phức tạp đó thì chúng ta đã đặt ra vấn đềvề việc đưa các ứng dụng công nghệ thông tin nhằm giúp giảm tải công việcquản lý bằng những phương pháp thủ công của con người là điều rất cần thiết đểgiải quyết vấn đề đã được nêu trên.

Là một doanh nhân, một chủ cửa hàng, một shop hay một người quản lý,chúng ta mong chờ điều tốt đẹp nhất với việc kinh doanh của chính mình, đó làlợi nhuận, là thương hiệu và sự phát triển hiện đại hóa lĩnh vực quản lý của cácshop Từ đây nhóm 5 chúng em thông qua nghiên cứu, học hỏi với sự chỉ dạycô, các nguồn tin và bạn bè về giải pháp quản lý bán hàng kết hợp với quá trình

tham khảo thực tế trên nhiều cửa hàng,… chúng em xin đưa ra đề tài “Web bán

hàng trực tuyến” dành cho các doanh nghiệp vừa và nhỏ Không chỉ là một giải

pháp quản lý, sản phẩm của chúng em còn hướng đến việc tối ưu hóa trảinghiệm mua sắm cho khách hàng Chúng em cam kết mang lại giá trị gia tăngcho doanh nghiệp và làm cho quá trình chuyển đổi kỹ thuật số trở nên trơn truvà hiệu quả Chúng em hy vọng rằng đề tài này không chỉ là sự hợp tác giữakiến thức chuyên môn và sự sáng tạo, mà còn là công cụ hữu ích cho doanhnghiệp vừa và nhỏ trong hành trình chuyển đổi số của họ Cùng nhau, chúng tasẽ xây dựng và phát triển không chỉ sản phẩm mà còn cộng đồng doanh nghiệpđang ngày càng đa dạng và phát triển

CHƯƠNG 1: TỔNG QUAN VỀ ĐỀ TÀI

1.1 Tổng quan

1.1.1 Lý do chọn đề tài.

Trong bối cảnh sự phát triển mạnh mẽ của công nghệ và sự phổ biến của thiết bị công nghệ điện tử, việc tiếp cận hệ thống thông tin quản lý trở thành ưu tiên hàng đầu đối với các tổ chức và doanh nghiệp Chính với xu hướng này, nhóm đã chọn đề tài "Website bán hàng trực tuyến" để áp dụng công nghệ ReactJs và NodeJs, nhằm nâng cao chất lượng quản lý mua sắm và tạo ra một trải nghiệm mua sắm chuyên nghiệp và thuận lợi nhất.

Mục đích nghiên cứu đề tài là gì?

Vấn đề mục đích nghiên cứu đề tài xây dựng trang web bán hàng trựctuyến có thể làm nhằm cải thiện quy trình quản lý và hoạt động của cửahàng theo những vấn đề Dưới đây là một số mục đích nghiên cứu:

một hệ thống cửa hàng thông minh, giúp tăng cường hiệu quả vận hànhcủa shop Điều này có thể bao gồm quản lý hàng hóa, quản lý kho, quản lýthu chi, và tổ chức thông tin một cách hợp lý để giảm thiểu thời gian vàcông sức của người quản lý và nhân viên.

cải thiện trải nghiệm người dùng trên trang web bán hàng, bao gồm thiếtkế giao diện, tốc độ tải trang, và cách thức sắp xếp sản phẩm để tạo sự thuhút và thuận tiện cho người mua.

trường thời trang hiện tại, xác định các đối thủ cạnh tranh, và tìm ra cơ hộiđể phát triển kế hoạch kinh doanh của bạn.

định mua sắm của khách hàng trên trang web thời trang có thể giúp bạn tối

ưu hóa việc quảng cáo, cách chọn sản phẩm, và cách chăm sóc kháchhàng.

quy trình kinh doanh, từ quản lý hàng tồn kho và vận chuyển đến dịch vụkhách hàng và quản lý dữ liệu khách hàng.

phương tiện tiếp thị hiệu quả như quảng cáo trực tuyến, tiếp thị mạng xãhội, email marketing, và chiến dịch tiếp thị khác để tăng doanh số bánhàng.

dõi và dự đoán các xu hướng thời trang, giúp bạn cung cấp các sản phẩmphù hợp với sở thích của khách hàng.

1.1.2 Mô tả chức năng của người dùng có trong hệ thống web.

hàng trực tuyến (Admin) và người truy cập (User).

sửa thông tin, quản lý người dùng, hệ thống có chức năng cập nhật thông tinvề sản phẩm như: thêm, sửa thông tin sản phẩm, xóa sản phẩm ,…

người khách hàng là điều mà Admin cần lưu tâm nhất, để ý nhất Sẽ có chứcnăng thêm, sửa sản phẩm vào giỏ hàng được chọn, xóa sản phẩm khi khôngcòn nhu cầu khi đã đăng nhập vào hệ thống

1.1.3 Yêu cầu

Chương trình quản lý web shop thời trang gồm các vấn đề như:

cho web.

1.2 Công cụ và ngôn ngữ lập trình

1.2.1 Giới thiệu về các công cụ được sử dụng trong đề tài:

1.6.1 Visual Studio code.

Hình 1.1 Giao diện trong Visual Studio code.

 Visual Studio code là gì?

đoạn code để hỗ trợ trong quá trình thực hiện xây dựng, thiết kế website mộtcách nhanh chóng Visual Studio Code hay còn được viết tắt là VS Code.Trình soạn thảo này vận hành mượt mà trên các nền tảng như Windows,macOS, Linux Hơn thế nữa, VS Code còn cho khả năng tương thích vớinhững thiết bị máy tính có cấu hình tầm trung vẫn có thể sử dụng dễ dàng.

Syntax Highlighting Đặc biệt là tự hoàn thành mã thông minh, Snippets, vàkhả năng cải tiến mã nguồn Nhờ tính năng tùy chỉnh, Visual Studio Codecũng cho

phép các lập trình viên thay đổi Theme, phím tắt, và đa dạng các tùy chọnkhác Mặc dù trình soạn thảo Code này tương đối nhẹ, nhưng lại bao gồmcác tính năng mạnh mẽ.

- Dù mới được phát hành nhưng VSCode là một trong những Code Editormạnh mẽ và phổ biến nhất dành cho lập trình viên Nhờ hỗ trợ nhiều ngônngữ lập trình phổ biến, tích hợp đầy đủ các tính năng và khả năng mở rộng,nên VSCode trở nên cực kì thân thuộc với bất kì lập trình viên nào.

 Lịch sử hình thành Visual Studio Code:

mốc thời gian sau:

+, Ngày 29/4/2015: Visual Studio Code được Microsoft công bố lần đầutiên tại Hội nghị Build 2015

+, Ngày 18/11/2015: Nguồn của Visual Studio Code đã được phát hànhtheo Giấy phép MIT và được cung cấp trên GitHub Bản hỗ trợ mở rộngcũng đã được công bố ngay sau đó.+, Ngày 14/4/2016: Visual Studio Codeđã hoàn thành bản preview công khai và được phát hành trên Web Lúcnày Visual Studio Code chỉ xếp thứ 13 trong số các công cụ phát triển phổbiến hàng đầu, với 7% trong số 47.000 người được hỏi sử dụng nó.

 Những ưu điểm nổi bật của Visual Studio Code:

trong các ứng dụng được dân IT “săn đón” và tải về và sử dụng rất nhiều.Visual Studio Code cũng luôn có những cải tiến và tạo ra đa dạng các tiệních đi kèm từ đó giúp cho các lập trình viên sử dụng dễ dàng hơn Trongđó có thể kể đến những ưu điểm sau:

+, Đa dạng ngôn ngữ lập trình giúp người dùng thỏa sức sáng tạo và sửdụng như HTML, CSS, JavaScript, C++,…

+, Ngôn ngữ, giao diện tối giản, thân thiện, giúp các lập trình viên dễ dàngđịnh hình nội dung

+, Tích hợp các tính năng quan trọng như tính năng bảo mật (Git), khảnăng tăng tốc xử lý vòng lặp (Debug),…

+, Đơn giản hóa việc tìm quản lý hết tất cả các Code có trên hệ thống.

+, VS Code có thể chạy trên nhiều nền tảng, bao gồm Windows, macOS vàLinux, mang lại sự linh hoạt cho những nhà phát triển sử dụng nhiều hệđiều hành.

nhất hiện nay Ứng dụng này cũng ngày càng chứng tỏ ưu thế vượt trội củamình khi so sánh với những phần mềm khác Visual Studio Code thực sựcó thể đáp ứng được hầu hết nhu cầu cơ bản của lập trình viên.

 Tại sao nên sử dụng Visual Studio Code:

chuộng sử dụng Visual Studio Code mang rất nhiều ưu điểm vượt trội sovới bất kỳ IDE nào khác:

+, Hỗ trợ đa nền tảng: Linux, Mac, Windows,

+, Hỗ trợ đa ngôn ngữ: C/C++, C#, F#, JavaScript, JSON, Visual Basic,HTML, CSS,

dụng chuyên biên tập, soạn thảo Code này trở nên phổ biến nhất hiện nay.Với việc không ngừng cải tiến và áp dụng rất nhiều các công nghệ mới,Visual Studio Code đã được các lập trình viên chứng minh hiệu quả Ngoàicác Developers, thì Testers hay Data Administrators và tất cả những ngườidùng đang quan tâm đến lập trình đều có thể sử dụng Visual Studio.

1.6.2 MongoDB

 MongoDB là một database hướng tài liệu (document), một dạngNoSQL database Vì thế, MongoDB sẽ tránh cấu trúc table-based củarelational database để thích ứng với các tài liệu như JSON có mộtschema rất linh hoạt gọi là BSON MongoDB sử dụng lưu trữ dữ liệudưới dạng Document JSON nên mỗi một collection sẽ các các kích cỡvà các document khác nhau Các dữ liệu được lưu trữ trongdocument kiểu JSON nên truy vấn sẽ rất nhanh.

 MongoDB lần đầu ra đời bởi MongoDB Inc., tại thời điểm đó là thế hệ10, vào tháng Mười năm 2007, nó là một phần của sản phẩm PaaS(Platform as a Service) tương tự như Windows Azure và Google AppEngine Sau đó nó đã được chuyển thành nguồn mở từ năm 2009. MongoDB đã trở thành một trong những NoSQL database nổi trội nhất

bấy giờ, được dùng làm backend cho rất nhiều website nhưeBay, SourceForge và The New York Times.

 Các feature của MongoDB gồm có:

 Các ad hoc query: hỗ trợ search bằng field, các phép search thông

thường, regular expression searches, và range queries.

 Indexing: bất kì field nào trong BSON document cũng có thể được

 Replication: có ý nghĩa là “nhân bản”, là có một phiên bản giống hệtphiên bản đang tồn tại, đang sử dụng Với cơ sở dữ liệu, nhu cầu lưutrữ lớn, đòi hỏi cơ sở dữ liệu toàn vẹn, không bị mất mát trước nhữngsự cố ngoài dự đoán là rất cao Vì vậy, người ta nghĩ ra khái niệm“nhân bản”, tạo một phiên bản cơ sở dữ liệu giống hệt cơ sở dữ liệuđang tồn tại, và lưu trữ ở một nơi khác, đề phòng có sự cố.

 Aggregation: Các Aggregation operation xử lý các bản ghi dữ liệu và

trả về kết quả đã được tính toán Các phép toán tập hợp nhóm các giátrị từ nhiều Document lại với nhau, và có thể thực hiện nhiều phép

toán đa dạng trên dữ liệu đã được nhóm đó để trả về một kết quả duynhất Trong SQL, count(*) và GROUP BY là tương đương vớiAggregation trong MongoDB.

 Lưu trữ file: MongoDB được dùng như một hệ thống file tận dụng

những function trên và hoạt động như một cách phân phối quasharding.

Hình 1.2 Giao diện MongoDB.

 Quản lý và truyền tải content – Quản lý đa dạng nhiều product củacontent chỉ trong một kho lưu trữ data cho phép thay đổi và phảnhồi nhanh chóng mà không chịu thêm phức tạp thêm từ hệ thốngcontent.

 Cấu trúc Mobile và Social – MongoDB cung cấp một platform cósẵn, phản xạ nhanh, và dễ mở rộng cho phép rất nhiều khả năng độtphá, phân tích real-time, và hỗ trợ toàn cầu.

 Quản lý data khách hàng – Tận dụng khả năng query nhanh chóngcho phân tích real-time trên cơ sở dữ liệu người dùng cực lớn vớcác mô hình data phức tạp bằng các schema linh hoạt và tự độngsharding cho mở rộng chiều ngang.

- Ưu điểm của MongoDB

 Dữ liệu lưu trữ phi cấu trúc, không có tính ràng buộc, toàn vẹn nêntính sẵn sàng cao, hiệu suất lớn và dễ dàng mở rộng lưu trữ.

 Dữ liệu được caching (ghi đệm) lên RAM, hạn chế truy cập vào ổcứng nên tốc độ đọc và ghi cao.

 MongoDB hỗ trợ Map-Reduce, một mô hình xử lý dữ liệu phân tángiúp thực hiện các phép toán phức tạp trên dữ liệu.

 MongoDB có một cộng đồng lớn và tích cực, cung cấp nhiều tàinguyên, hướng dẫn, và sự hỗ trợ từ cộng đồng.

 MongoDB có khả năng tích hợp tốt với nhiều công nghệ vàframework khác nhau, giúp tối ưu hóa quá trình phát triển ứngdụng.

 MongoDB có cú pháp dễ đọc và dễ học, đặc biệt là đối với nhữngngười làm việc với JavaScript Nó cũng dễ triển khai và cấu hình. MongoDB hỗ trợ chế độ replica sets, tức là sao lưu dữ liệu và duy trì

nhiều bản sao của cơ sở dữ liệu trên các server khác nhau Điều nàygiúp đảm bảo sẵn sàng và độ tin cậy cao của hệ thống.

 Không ứng dụng được cho các mô hình giao dịch nào có yêu cầuđộ chính xác cao do không có ràng buộc.

 Không có cơ chế transaction (giao dịch) để phục vụ các ứng dụngngân hàng.

 Dữ liệu lấy RAM làm trọng tâm hoạt động vì vậy khi hoạt độngyêu cầu một bộ nhớ RAM lớn.

 Mọi thay đổi về dữ liệu mặc định đều chưa được ghi xuống ổ cứngngay lập tức vì vậy khả năng bị mất dữ liệu từ nguyên nhân mấtđiện đột xuất là rất cao.

1.6.3 Postman

Hình 1.3 Giao diện Postman.

 Postman là một ứng dụng cho phép người dùng có thể tương tác vớiAPI API là tên viết tắt của Application Programming Interface –giao diện lập trình ứng dụng API chịu trách nhiệm tạo ra các kếtnối giữa những ứng dụng khác nhau Còn Postman sẽ chịu tráchnhiệm giúp cho thao tác của người dùng với API trở nên dễ dànghơn Thông thường, Postman sẽ được dùng cho API REST.Postman có thể dễ dàng gọi REST mà không cần tạo code như cáchtruyền thống.

 Postman còn chịu trách nhiệm cho rất nhiều thao tác phát triển phầnmềm như test, chạy thử, rà lỗi, cung cấp các đoạn code tự động cầnthiết… Nhìn chung, lợi ích mà Postman mang lại là rất nhiều.

 Đặc biệt, Postman tương thích với hầu hết các giao thức HTTP, baogồm: Get, Put, Delete, Post, Patch… Cấu tạo của Postman hướngđến sự linh động Postman có sẵn nhiều phiên bản cho các hệ điềuhành và môi trường khác nhau Đó cùng là điểm khiến nó trở nênphổ biến hơn.

 Collections giống như một thư viện trong Postman Nhiệm vụchính của nó là lưu trữ và hiển thị các dữ liệu, yêu cầu mà ngườidùng tạo nên.

 Phần quan trọng nhất trong Postman là API Content Trong APItồn tại 3 thành phần chính: environment, request và response.Environment là môi trường để thực hiện các hành động vớiAPI.Nó cung cấp các thông tin môi trường cần thiết để lập trìnhviên có thể thay đổi khi cần thiết.

 Khi đã ổn định được môi trường rồi, người dùng sẽ tiến hànhgửi các yêu cầu – request để hệ thống hoạt động Kết quả sauthao tác được trả về chính là response.

 CSS (Cascading Style Sheets) : định nghĩa về cách hiển thị của mộttài liệu HTML CSS đặc biệt hữu ích trong việc thiết kế Web Nógiúp cho người thiết kế dễ dàng áp đặt các phong cách đã được thiếtkế lên bất kì page nào của website một cách nhanh chóng, đồng bộ

 HTML :

đến CSS hoặc JavaScript

văn bản), <img> (hình ảnh), <a> (liên kết).

 CSS :

dụng kiểu dáng.

kiểu dáng, chẳng hạn như màu sắc, font, kích thước, v.v.

Hình 1.4 Javascript.

 JavaScript là một ngôn ngữ lập trình thông dịch với khả năng hướng đếnđối tượng Là một trong 3 ngôn ngữ chính trong lập trình web và có mốiliên hệ lẫn nhau để xây dựng một website sống động, chuyên nghiệp:+, HTML: Hỗ trợ trong việc xây dựng layout, thêm nội dung dễ dàng trên

+, CSS: Hỗ trợ việc định dạng thiết kế, bố cục, style, màu sắc,…

+, JavaScript: Tạo nên những nội dung “động” trên website Cùng tìm hiểurõ hơn ở phần dưới đây.

 Lịch sử phát triển của Javascript

- Brendan Eich chính là người đã phát triển JS tại Netscape với tiền thânlà Mocha Sau đó, Mocha được đổi thành LiveScript và cuối cùng mớiđổi thành JavaScript.

- Năm 1998, JavaScript với phiên bản mới nhất là ECMAScript 2 pháthành và đến năm 1999 thì ECMAScript 3 được ra mắt

- Năm 2016, ứng dụng JavaScript đã đạt kỷ lục lên tới 92% website sửdụng, đồng thời cũng được đánh giá là một công cụ cực kỳ quan trọngđối với lập trình viên.

 Các khái niệm liên quan đến JavaScript JavaScript Framework là gì?

+, Là thư viện được xây dựng dựa trên JS phục vụ cho từng mục đích vàlĩnh vực khác nhau

+, JavaScript Framework là thư viện được xây dựng dựa vào ngôn ngữlập trình JavaScript Từ đó, mỗi framework được tạo ra để phục chotừng lĩnh vực khác nhau Bạn có thể tìm hiểu kỹ hơn về framework làgì, sẽ giúp bạn có thêm nhiều thông tin rõ ràng hơn Hiện nay, có rấtnhiều JavaScript Framework thông dụng như:

 Reactjs: Thư viện dùng cho ứng dụng mobile.

 Node.js: Dùng để xây dựng và phát triển ứng dụng realtime từ phíamáy chủ.

 Angular: Dùng để xây dựng ứng dụng Single Page…. Javascript hoạt động trên trang web như thế nào?

+, Thông thường, JavaScript sẽ được nhúng trực tiếp vào một websitehoặc chúng được tham chiếu qua file js hoặc JavaScript

+, Đây là một ngôn ngữ đến từ phía Client nên Script sẽ được downloadvề máy client khi truy cập

+, Mã JavaScript thường được sử dụng để xử lý sự kiện Sự kiện có thểlà hành động của người dùng như nhấp chuột, nhập liệu từ bàn phím,hoặc sự kiện khác như tải trang JavaScript có thể gán các hàm xử lý sựkiện để thực hiện các hành động cụ thể khi sự kiện xảy ra

+, Tại đây, chúng sẽ được hệ thống xử ý Vì vậy, bạn không cần phảitải về máy server rồi chờ cho chúng xử lý xong mới phản hồi được kếtquả đến client

 Javascript dùng để làm gì?

để làm gì cũng rất quan trọng Việc nắm bắt được mục đích của ngônngữ đặc biệt này sẽ giúp bạn dễ dàng sử dụng chúng hơn trong côngviệc Cụ thể như sau:

JavaScript chính là getElementById () Chúng được sử dụng để tìm mộtphần tử của HTML với id =”demo” và dùng để thay đổi nội dung củaphần từ (Internal HTML) sang thành “Hello JavaScript”

sử dụng để thay đổi các giá trị của thuộc tính Ví dụ: thay đổi thuộc tínhsrc (source) của tag<img>

 Ưu nhược điểm của ngôn ngữ lập trình Javascript

Là một ngôn ngữ lập trình rất phổ biến hiện nay, Javascript có cho mìnhrất nhiều ưu điểm nổi bật Tuy nhiên, bên cạnh những ưu điểm đó thìnhược điểm của ngôn ngữ lập trình này cũng cần được lưu ý.

 Ưu điểm:

Một số ưu điểm nổi bật của ngôn ngữ lập trình JS như sau:

+, Những lỗi Javascript rất dễ để phát hiện, từ đó giúp bạn sửa lỗi mộtcách nhanh chóng hơn

+, Những trình duyệt web có thể dịch thông qua HTML mà không cầnsử dụng đến một compiler.

+, JS có thể hoạt động ở trên nhiều nền tảng và các trình duyệt web khácnhau.

+, Được các chuyên gia đánh giá là một loại ngôn ngữ lập trình nhẹ vànhanh hơn nhiều so với các ngôn ngữ lập trình khác

+, JS còn có thể được gắn trên một số các element hoặc những eventscủa các trang web

+, Những website có sử dụng JS thì chúng sẽ giúp cho trang web đó cósự tương tác cũng như tăng thêm nhiều trải nghiệm mới cho người dùng.+, Người dùng cũng có thể tận dụng JS với mục đích là để kiểm tranhững input thay vì cách kiểm tra thủ công thông qua hoạt động truyxuất database

+, Giao diện của ứng dụng phong phú với nhiều thành phần như Dragand Drop, Slider để cung cấp đến cho người dùng một Rich Interface(giao diện giàu tính năng)

+, Giúp thao tác với người dùng phía Client và tách biệt giữa các Clientvới nhau

 Nhược điểm

tương tự như các ngôn ngữ lập trình khác hiện nay Cụ thể:

+, JS Code Snippet khá lớn

+, JS dễ bị các hacker và scammer khai thác hơn

+, JS cũng không có khả năng đa luồng hoặc đa dạng xử lý

+, Có thể được dùng để thực thi những mã độc ở trên máy tính củangười sử dụng

+, Những thiết bị khác nhau có thể sẽ thực hiện JS khác nhau, từ đó dẫnđến sự không đồng nhất

+, Vì tính bảo mật và an toàn nên các Client-Side Javascript sẽ khôngcho phép đọc hoặc ghi các file

 Trong khi những framework khác cố gắng hướng đến một mô hìnhMVC hoàn thiện thì React nổi bật với sự đơn giản và dễ dàng phốihợp với những thư viện Javascript khác

-React là gì ?

 React là một thư viện UI phát triển tại Facebook để hỗ trợ việc xâydự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ạiFacebook trong production, và instagram được viết hoàn toàn trênReact.

 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 sử dụng khái niệm DOM ảo (Virtual DOM) để chọn lựa vàrender những phần tử của node dựa tên sự thay đổi trạng thái khiếncho ta chỉ cần thay đổi ít thành phần nhất có thể để giữ DOMupdate.

-Virtual DOM hoạt động như thế nào ?

 Tưởng tượng bạn có một vật thể được thiết kế dựa trên một người.Nó có mọi bộ phận một người có thể có, và phản ánh lại trạng tháihiện tại của người đó Đây là điều cơ bản React làm với DOM. Cách React hoạt động là thay vì lấy một người thật và tái tạo lại từ

đầu, React chỉ thay đổi khuôn mặt và tay Điều này có nghĩa là khibạn nhập vào 1 đoạn text và render xong thì đoạn text này sẽ khôngbị ảnh hưởng cho tới khi parent node được sắp xếp lại.

 Vì React sử dụng một DOM giả nên cũng có khá nhiều ý tưởng thúvị xung quanh thư viện này Ví dụ như ta có thể render DOM giảnày trên server.

-Các thành phần cơ bản

 JSX :

được sử dụng để xây dựng giao diện người dùng

cho việc viết mã nguồn của React trở nên dễ đọc và hiểu hơn.

 Components:

độc lập có khả năng tái sử dụng, giúp tổ chức và quản lý giao diệnngười dùng của ứng dụng

văn bản hoặc một hình ảnh, hoặc là một phần tử phức tạp như mộtbiểu mẫu hoặc một trang web đầy đủ.

 `useState` là một React Hook được sử dụng để quản lý trạng tháitrong functional components của React Nó cho phép bạn khai báobiến trạng thái và tạo một hàm để cập nhật giá trị của trạng thái đómà không cần sử dụng class components Điều này giúp tăng khảnăng tái sử dụng và đơn giản hóa quản lý trạng thái trong ứng dụngReact.

 `useEffect` là một React Hook được sử dụng để thực hiện các tácvụ liên quan đến side effects trong functional components củaReact Side effects bao gồm các hoạt động như gọi API, thay đổitrạng thái, đăng ký sự kiện, và nhiều hoạt động khác `useEffect`giúp quản lý và đồng bộ các side effects này trong quá trìnhlifecycle của component.

 ExpressJs

-ExpressJS là gì ?

 Express js là một Framework nhỏ, nhưng linh hoạt được xây dựngtrên nền tảng của Nodejs Nó cung cấp các tính năng mạnh mẽ để pháttriển web hoặc mobile

 Về các package hỗ trợ: Expressjs có vô số các package hỗ trợ nên cácbạn không phải lo lắng khi làm việc với Framework này.

 Về performance: Express cung cấp thêm về các tính năng (feature) đểdev lập trình tốt hơn Chứ không làm giảm tốc độ của NodeJS.

 Và hơn hết, các Framework nổi tiếng của NodeJS hiện nay đều sửdụng ExpressJS như một core function, chẳng hạn: SailsJS, MEAN,

- Cấu trúc của ExpressJS

 package.json chứa các package cho ứng dụng chạy Nếu bạn nào làmvới PHP hoặc RoR rồi thì file này có chức năng tương tự nhưcomposer.json hoặc Gemfile

 Folder routes: chứa các route có trong ứng dụng Folder view: chứa view/template cho ứng dụng

 Folder public chứa các file css, js, images, cho ứng dụng

1.7.2 Môi trường : NodeJS

 Đây là một trình thông dịch thực thi mã JavaScript cho phép tạo cácứng dụng web như video clip và diễn đàn, đặc biệt có thể mở rộngnhanh chóng và dễ dàng cũng như thu hẹp phạm vi hoạt động của cáctrang mạng mạng xã hội.

 Đây được xem là một lợi thế khi NodeJS có thể hoạt động trên nhiềunền tảng hệ điều hành khác nhau, từ Windows, Linux đến OS X.

NodeJS cung cấp một thư viện phong phú dưới dạng các mô-đunJavascript khác nhau giúp đơn giản hóa việc lập trình và giảm thiểu thờigian cần thiết.

 Ý tưởng chính của Node js là sử dụng non – blocking, nhanh chóngđịnh tuyến đầu vào/ đầu ra dữ liệu thông qua các tác vụ thời gian thực.Bởi vì Node js có khả năng mở rộng nhanh chóng và có thể xử lý mộtsố lượng lớn các kết nối đồng thời với thông lượng cao.

 Hầu hết các ứng dụng web truyền thống sử dụng tài nguyên hệ thốngkhông hiệu quả khi các yêu cầu tạo ra các luồng xử lý yêu cầu mới vàtiêu tốn khá nhiều bộ nhớ hệ thống.

 Vì vậy giải pháp mà NodeJS đưa ra chính là sử dụng luồng đơn có têntiếng anh là Single – Threaded, đây là sự kết hợp non – blocking I/ Ođể thực hiện các yêu cầu, điều này cho phép nó hỗ trợ hàng chục hàngnghìn kết nối đồng thời.

Ưu điểm

 IO hướng sự kiện không đồng bộ, cho phép xử lý nhiều yêu cầu đồngthời.

 Sử dụng JavaScript – một ngôn ngữ lập trình dễ học. Chia sẻ cùng code ở cả phía client và server.

 NPM(Node Package Manager) và module Node đang ngày càng pháttriển mạnh mẽ.

 Cộng đồng hỗ trợ tích cực.

 Cho phép stream các file có kích thước lớn

Nhược điểm

 Không có khả năng mở rộng, vì vậy không thể tận dụng lợi thế môhình đa lõi trong các phần cứng cấp server hiện nay.

-Node js sử dụng để làm gì

 Phát triển Ứng Dụng Web Server-Side: Node.js cho phép phát triển

máy chủ web hiệu quả, sử dụng JavaScript cả ở phía máy chủ và máykhách.

 Xây Dựng API (Application Programming Interface): Node.js là

lựa chọn phổ biến cho việc xây dựng và quản lý các dịch vụ web cungcấp dữ liệu cho ứng dụng khác thông qua API.

 Ứng Dụng Thời Gian Thực: Với khả năng xử lý đồng thời cao,

Node.js thích hợp cho việc xây dựng ứng dụng thời gian thực như chat,trò chơi trực tuyến, và cập nhật dữ liệu trực tiếp.

 Phát triển Dịch Vụ Web Nhỏ (Microservices): Node.js làm cho việc

xây dựng và quản lý các dịch vụ web độc lập trở nên linh hoạt và hiệuquả.

 Kịch Bản Tự Động Hóa: Node.js có thể được sử dụng để viết các

kịch bản tự động hóa các nhiệm vụ phổ biến trong quy trình phát triểnvà triển khai ứng dụng.

 Xây Dựng Ứng Dụng IoT (Internet of Things): Với sự nhẹ nhàng và

hiệu quả, Node.js là lựa chọn phổ biến cho việc xây dựng các ứngdụng IoT.

 Phát triển Ứng Dụng Desktop: Sử dụng các framework như Electron,

Node.js có thể được sử dụng để xây dựng ứng dụng desktop đa nềntảng.

 Quản lý Dự Án và Công Cụ Phát Triển: Node.js thường được tích

hợp vào các công cụ như npm để quản lý dependencies và thực hiệncác công việc xây dựng.

 Phát triển Ứng Dụng Serverless: Với các dịch vụ như AWS Lambda,

Node.js thường được sử dụng để xây dựng ứng dụng không cần máychủ (serverless).

 Xử Lý Streaming Dữ Liệu: Node.js làm cho xử lý streaming dữ liệu

trở nên thuận tiện, phù hợp cho các ứng dụng streaming video và âmnhạc.

1.7.3 Cơ sở dữ liệu : NoSQL