TỔNG QUAN
Một số vấn đề còn tồn tại
Việc xây dựng một website bán hàng online có hai phương thức chính: sử dụng các mẫu thiết kế có sẵn hoặc tùy chỉnh trang web theo yêu cầu thông qua dịch vụ gia công.
Việc xây dựng trang web bán hàng dựa trên các bản thiết kế có sẵn trở nên dễ dàng nhờ các nền tảng như WordPress và Wix với tính năng kéo thả Tuy nhiên, phương pháp này vẫn tồn tại nhiều hạn chế trong khả năng tùy chỉnh và linh hoạt.
Nghiệp vụ bán hàng và giao diện thường bị giới hạn trong một số khuôn mẫu cố định, gây khó khăn cho việc tùy biến khi cần các chức năng phức tạp như quản lý mã khuyến mãi, quà tặng, chương trình giảm giá và kiểm duyệt.
Hiệu suất trang web và dung lượng lưu trữ, cùng với các chức năng nâng cao, yêu cầu người dùng phải chi thêm tiền để trải nghiệm Tuy nhiên, khách hàng sẽ không được hoàn tiền nếu các tính năng không đáp ứng yêu cầu của họ.
Khi xảy ra lỗi hoặc trang web bị tấn công mạng, việc xử lý trực tiếp như gỡ lỗi, khôi phục dữ liệu và thiết kế lại cơ chế bảo mật sẽ trở nên khó khăn do thiếu nguồn liên hệ cụ thể.
Để xây dựng dựa trên gia công, việc lựa chọn nguồn gia công chất lượng cao là rất quan trọng Nguồn gia công này cần phải nắm bắt tốt các yêu cầu và ứng dụng công nghệ hiện đại, mặc dù điều này có thể tốn nhiều thời gian và chi phí Tuy nhiên, việc đầu tư này sẽ đảm bảo chất lượng sản phẩm và cung cấp nguồn hỗ trợ bảo trì, phát triển khi cần thiết.
− Một số hạn chế vẫn còn tồn đọng trong việc xây dựng theo phương pháp phát triển web truyền thống:
• Phụ thuộc vào một ngôn ngữ hoặc cần nhúng script vào phía giao diện HTML như JSP (Java), CSHTML (C#), PHP…
The interface lacks smoothness and performance due to continuous page redirects, which is a significant drawback in e-commerce website development, primarily caused by the use of server-side rendering for processing tasks.
Việc đóng gói thành phần và máy chủ hoàn toàn phụ thuộc vào sản phẩm; nếu xảy ra sự cố ở máy chủ, website có thể bị "sập" và không thể sử dụng.
• Thiếu nguồn hỗ trợ về phía giao diện, phần giao diện được xây dựng bằng HTML, CSS, VanillaJS đòi hỏi gia công nhiều thời gian.
Vấn đề nghiên cứu
Để xây dựng một trang web với giao diện thân thiện và khả năng chịu tải tốt, cần áp dụng các công nghệ hiện đại Những công nghệ này không chỉ giúp dễ bảo trì và phát triển mà còn giải quyết hiệu quả các bài toán nghiệp vụ.
− Kĩ thuật lấy nguồn dữ liệu và tạo các bộ dữ liệu lớn và phương thức tối ưu khi dữ liệu tăng cao
− Hosting ứng dụng và ảnh hưởng của chúng đến với hiệu suất xử lí dữ liệu và hiệu năng trang web
− Một số kĩ thuật tối ưu trong việc xử lí dữ liệu để phục vụ các yêu cầu tài nguyên từ phía người dùng
− Tiêu chí đánh giá cho website đạt chuẩn SEO
NGHIÊN CỨU
Các công nghệ sử dụng
Node.js là nền tảng phát triển dựa trên JavaScript, sử dụng JavaScript Engine V8 của Google Chrome, cho phép thực thi mã JavaScript trên máy chủ thay vì chỉ trên trình duyệt Nó cung cấp một môi trường phát triển mạnh mẽ cho các ứng dụng web.
5 thích hợp để xây dựng các ứng dụng web và các dịch vụ mạng khác, nhờ vào khả năng xử lý các yêu cầu I/O không đồng bộ
Node.js nổi bật với hiệu suất cao nhờ kiến trúc không đồng bộ và sự kiện I/O không chặn Điều này cho phép nó xử lý hàng ngàn kết nối đồng thời mà không làm tắc nghẽn luồng xử lý.
Express là một framework web mạnh mẽ cho Node.js, cho phép xây dựng ứng dụng web và API một cách đơn giản và linh hoạt Nó giúp lập trình viên tiết kiệm thời gian và công sức bằng cách cung cấp các tính năng cần thiết như xử lý yêu cầu và phản hồi HTTP, quản lý định tuyến, xử lý lỗi và tạo middleware.
− Thư viện mã nguồn mở hỗ trợ phát triển giao diện Web phổ biến nhất thời điểm hiện tại do Facebook phát hành
Tiếp cận theo tư duy thành phần giúp hỗ trợ nhiều bộ giao diện và công nghệ, đồng thời tính năng luôn được cập nhật nhờ vào cộng đồng lớn.
Hỗ trợ mạnh mẽ cho các thư viện và API phát triển như Hook, Redux, và Axios, đồng thời đảm bảo tính tương thích cao với nhiều công nghệ frontend, sản phẩm này luôn được cập nhật liên tục.
− Framework đáng tin cậy và phổ biến nhất trong lập tình web frontend trong thời điểm hiện tại
− Kho chứa dữ liệu hướng cấu trúc mã nguồn mở, thường được sử dụng làm database, cache hoặc message broker
− Công nghệ phổ biến nhất hiện tại trong cache nhằm tăng hiệu suất đọc dữ liệu
Khả năng cải thiện tốc độ đọc có thể tăng từ 3 đến 10 lần, mang lại lợi ích đặc biệt cho các ứng dụng thường xuyên truy cập dữ liệu từ server, đặc biệt là trên các website thương mại điện tử, blog hoặc tin tức.
MongoDB là một hệ quản trị cơ sở dữ liệu NoSQL nổi bật, được thiết kế đặc biệt để đáp ứng nhu cầu lưu trữ dữ liệu cho các ứng dụng web và dịch vụ mạng có yêu cầu cao.
MongoDB được tối ưu hóa cho hiệu suất cao nhờ cơ chế lưu trữ dữ liệu trên bộ nhớ, cho phép tốc độ truy vấn nhanh chóng Nó còn hỗ trợ các truy vấn phong phú và tích hợp nhiều tính năng như indexing, sharding và replica sets để nâng cao hiệu suất hoạt động.
Kỹ thuật lấy nguồn dữ liệu
− Hai nguồn dữ liệu chính của website được lấy từ 2 website celllphones và thegioididong
Cả hai website cellphoneS và thegioididong đều được xây dựng trên nền tảng HTML và CSS, cho phép nhóm thực hiện việc thu thập dữ liệu tự động thông qua các thư viện có sẵn của Node.js Nhóm đã tiến hành trích xuất thông tin về toàn bộ sản phẩm, bao gồm các thông số kỹ thuật của laptop và smartphone từ cả hai trang web.
The team utilized various libraries in Node.js, specifically employing Puppeteer for data crawling and Axios for making requests to the websites of Cellphones and Thegioididong to extract valuable information.
Hosting website
Để tiết kiệm thời gian trong việc tìm hiểu về hosting ứng dụng, nhóm đã triển khai các thành phần của ứng dụng lên các nền tảng đám mây uy tín như Netlify và Azure.
Phần frontend của dự án được triển khai trên Netlify, nơi cung cấp gói hỗ trợ cho các sản phẩm ReactJs Trong khi đó, phần backend được triển khai trên Azure, một trong những dịch vụ lưu trữ đám mây hàng đầu, cũng có gói hỗ trợ dành cho học sinh và sinh viên.
Do hạn chế về kinh phí và sự hỗ trợ từ nhà cung cấp, nhóm chỉ có thể sử dụng gói hosting giá rẻ trên các server đặt tại Singapore, điều này có thể ảnh hưởng đến tốc độ của ứng dụng.
Khi sử dụng dịch vụ lưu trữ đám mây từ các nhà cung cấp lớn, người dùng sẽ nhận được sự hỗ trợ theo dõi các chỉ số (metric) hiệu quả, từ đó có cái nhìn tổng quan hơn về sản phẩm trong thực tế.
Một số kĩ thuật tối ưu trong việc xử lí dữ liệu
− Cài đặt index cho các trường trong table
− Caching dữ liệu phía server và người dùng
− Tối ưu hóa cơ sở dữ liệu để giảm thời gian truy xuất dữ liệu
− Tối ưu hóa dung lượng và hiển thị hình ảnh trên các trang màn hình thích hợp
− Kĩ thuật phân trang nhằm giảm thiểu việc tải các dữ liệu quá lớn không cần thiết
− Tối ưu hóa frontend bằng việc hạn chế quá nhiều CSS và các thư viện giao diện.
Tiêu chí đánh giá cho website đạt chuẩn SEO
Tốc độ tải trang là yếu tố quan trọng, vì một trang web được tối ưu hóa để tải nhanh sẽ mang lại trải nghiệm người dùng tốt hơn và nâng cao thứ hạng trong kết quả tìm kiếm.
Trang web cần được tối ưu hóa cho thiết bị di động, đảm bảo tính tương thích và mang lại trải nghiệm người dùng mượt mà và thuận tiện trên các thiết bị này.
Sitemap là một công cụ quan trọng giúp tối ưu hóa website, đóng vai trò như bản đồ điều hướng để các bot của Google dễ dàng và nhanh chóng thu thập dữ liệu nội dung.
− Phần code hiển thị website
• Có thành phần Tittle, Meta description
• Mỗi trang website chỉ có duy nhất 1 thẻ H1
• Không trùng lặp thẻ heading trong các trang website
− Tối ưu trải nghiệm người dùng: phải có bộ lọc, có thanh tìm kiếm chung
− Các tính năng CMS (Content Management System)
Mục lục bài viết giúp người dùng dễ dàng nắm bắt các nội dung chính và điều hướng qua bài viết một cách thuận tiện Ngoài ra, việc sử dụng mục lục còn hỗ trợ website hiển thị sitelink trên trang tìm kiếm, cải thiện khả năng hiển thị và tối ưu hóa SEO.
Schema là mã JavaScript dùng để đánh dấu dữ liệu có cấu trúc, giúp tối ưu hóa việc cung cấp thông tin cho công cụ tìm kiếm Google Việc tối ưu cấu trúc schema không chỉ làm cho dữ liệu dễ dàng được hiểu mà còn giúp điều phối thông tin một cách hợp lý và đúng đối tượng người dùng.
Thẻ canonical cho phép bạn chỉ định URL gốc mà Googlebot nên thu thập dữ liệu, giúp xác định nguồn gốc đáng tin cậy Tối ưu hóa thẻ canonical là cách hiệu quả để ngăn chặn việc Google đánh giá nội dung trùng lặp từ các bản sao khác của URL.
CÁCH THỰC HIỆN
Phân tích các công nghệ và cách ứng dụng vào đồ án
− Redis và MongoDB: các ưu thế về công nghệ đã được mô tả tại mục 3.1
Node.js là môi trường chạy mã JavaScript phía máy chủ, còn Express là framework phổ biến giúp xây dựng ứng dụng web Sự kết hợp giữa Node.js và Express Framework mang lại nhiều lợi ích và hỗ trợ hiệu quả cho quá trình phát triển ứng dụng web.
Node.js mang lại hiệu suất cao nhờ kiến trúc sự kiện không đồng bộ, cho phép xử lý hàng ngàn kết nối đồng thời mà không bị chặn IO, giúp ứng dụng của bạn hoạt động nhanh chóng và đáng tin cậy.
Sử dụng mã JavaScript duy nhất cho cả máy chủ và máy khách giúp tiết kiệm thời gian và công sức trong việc phát triển ứng dụng web Việc chia sẻ mã giữa hai phía tạo ra kiến trúc đơn giản, dễ bảo trì.
Express Framework hỗ trợ routing linh hoạt với cú pháp đơn giản và mạnh mẽ, cho phép bạn dễ dàng định nghĩa các tuyến đường trong ứng dụng Nó giúp xử lý các yêu cầu HTTP, tạo và quản lý các tham số động, cũng như quản lý các định tuyến phức tạp một cách hiệu quả.
Express là một framework mạnh mẽ cho Node.js, cho phép sử dụng middleware để xử lý yêu cầu HTTP trước khi chuyển đến các xử lý chính của ứng dụng Điều này hỗ trợ thực hiện các chức năng quan trọng như xác thực, ghi nhật ký và nén dữ liệu Với sự hỗ trợ từ cộng đồng Node.js, có nhiều middleware sẵn có, giúp bạn dễ dàng mở rộng ứng dụng của mình.
Node.js và Express Framework được hỗ trợ bởi một hệ sinh thái phong phú, bao gồm hàng ngàn module và gói phần mềm (npm) do cộng đồng phát triển Việc tận dụng các module này giúp giảm thiểu thời gian và công sức trong quá trình phát triển ứng dụng.
Express cho phép tích hợp dễ dàng với các cơ sở dữ liệu phổ biến như MongoDB, MySQL và PostgreSQL Việc sử dụng các thư viện ORM như Mongoose giúp tương tác với cơ sở dữ liệu trở nên thuận tiện hơn.
Express Framework hỗ trợ hiệu quả trong việc xây dựng API RESTful, cho phép người dùng dễ dàng định nghĩa các phương thức HTTP như GET, POST, PUT và DELETE cho các tài nguyên trong ứng dụng.
Thư viện ReactJS hỗ trợ hiệu quả trong việc tạo giao diện và các component Nhóm đã nghiên cứu và lựa chọn một số công nghệ, thư viện được xem là best-practice cho quá trình phát triển.
• React Hook: các API do React cung cấp nhằm tạo tính “động” của một trang web như thay đổi trạng thái, lưu trữ thuộc tính, hàm
• Redux Toolkit: thư viện cung cấp các API quản lí State Management trong Redux được đơn giản hóa và thuận tiện hơn cho việc phát triển
• Styled Component và Tailwind Css: các framework CSS có thể tích hợp với React nhằm viết CSS nhanh và rõ ràng hơn
• Các thư viện khác: Axios (dùng cho các giao thức HTTP) và các component giao diện.
Cơ sở dữ liệu
4.2.1 Mô hình dữ liệu quan hệ cho cơ sở dữ liệu
Hình 1 Mô hình dữ liệu quan hệ cho cơ sở dữ liệu
4.2.2 Danh sách chi tiết các quan hệ trong dữ liệu
Bảng 1 Danh sách chi tiết các quan hệ
STT Tên quan hệ Diễn giải
1 SANPHAM Lưu trữ thông tin sản phẩm
2 LOAISANPHAM Lưu trữ thông tin các loại sản phẩm
3 THUONGHIEU Lưu trữ thông tin các loại thương hiệu
4 THONGSO Lưu trữ thông tin các thông số kỹ thuật
5 SP_TS Lưu trữ thông tin thông số kỹ thuật cho từng sản phẩm cụ thể
6 PHIENBANSANPHAM Lưu trữ thông tin các phiên bản khác của sản phẩm
4.2.3 Mô tả các quan hệ
Bảng 2 Mô tả quan hệ SANPHAM
STT Thuộc tính Kiểu dữ liệu Diễn giải
1 MaSanPham ObjectId Mã sản phẩm
2 MaLoaiSanPham ObjectId Mã loại sản phẩm
3 MaThuongHieu ObjectId Mã thương hiệu
4 HinhAnh String Hình ảnh sản phẩm
5 MoTa String Mô tả thông tin sản phẩm
6 SoLuongHangTon Int Số lượng sản phẩm còn lại
7 GiaBan Int Giá bán của sản phẩm
Trạng thái của sản phẩm (còn sản xuất, ngưng sản xuất,…)
STT Thuộc tính Kiểu dữ liệu Diễn giải
1 MaLoaiSanPham ObjectId Mã loại sản phẩm
2 TenLoaiSanPham String Tên loại sản phẩm
3 MoTa String Mô tả thông tin loại sản phẩm
Trạng thái của loại sản phẩm (còn sản xuất, ngưng sản xuất,…)
Bảng 3 Mô tả quan hệ LOAISANPHAM
STT Thuộc tính Kiểu dữ liệu Diễn giải
1 MaThuongHieu ObjectId Mã thương hiệu
2 TenThuongHieu String Tên thương hiệu
3 MoTa String Mô tả thông tin thương hiệu
Trạng thái của thương hiệu (còn cung cấp, ngưng cung cấp,…)
Bảng 4 Mô tả quan hệ THUONGHIEU
STT Thuộc tính Kiểu dữ liệu Diễn giải
1 MaThongSo ObjectId Mã thông số kỹ thuật
2 TenThongSo String Tên thông số kỹ thuật
3 MoTa String Mô tả thông tin thương hiệu
Trạng thái của thương hiệu (hoạt động, ngưng hoạt động,…)
5 DonVi String Đơn vị của thông số kỹ thuật
Bảng 5 Mô tả quan hệ SANPHAM
STT Thuộc tính Kiểu dữ liệu Diễn giải
1 MaSanPham ObjectId Mã sản phẩm
2 MaThongSo ObjectId Mã thông số kỹ thuật
Kiến trúc hệ thống
3 MoTa String Mô tả thông tin
Trạng thái của thông số trên sản phẩm (hoạt động, ngưng hoạt động,…)
5 GiaTri String Giá trị của thông số trên sản phẩm
Bảng 6 Mô tả quan hệ SP_TS
STT Thuộc tính Kiểu dữ liệu Diễn giải
1 MaPhienBan ObjectId Mã phiên bản sản phẩm
2 MaSanPham ObjectId Mã sản phẩm
3 TenPhienBan String Tên phiên bản
4 TenHienThi String Tên phiên bản để hiển thị
5 ImgL String Hình ảnh lớn của phiên bản
6 ImgS String Hình ảnh nhỏ của phiên bản
7 Mota String Mô tả phiên bản sản phẩm
8 GiaBan Int Giá bán của phiên bản sản phẩm
9 SoLuongHangTon Int Số lượng hàng còn lại
Trạng thái của phiên bản sản phẩm (còn sản xuất, ngưng sản xuất,…)
Bảng 7 Mô tả quan hệ PHIENBANSANPHAM
Giao diện người dùng (Frontend) được phát triển bằng thư viện ReactJS, cho phép tạo ra các web component để hiển thị thông tin và tương tác với người dùng Các yêu cầu từ phía người dùng sẽ được gửi qua Web Services do server cung cấp để xử lý các nghiệp vụ liên quan.
Phần server (Backend) trong ứng dụng Spring MVC định nghĩa các Web Services để xử lý yêu cầu nghiệp vụ thông qua giao thức HTTP và endpoint URL qua RESTful API Các Web Services này được khởi tạo theo mô hình Multi Service Instances per Host, với mã nguồn xử lý nghiệp vụ được cài đặt tại các tầng dưới, nơi mà các Controller sẽ gọi đến.
− Mô hình kiến trúc chính của đồ án dựa trên 2 mẫu thiết kế (Design Pattern) chính là MVC (Model – View – Controller) kết hợp 3-layers Pattern
− Cơ sở dữ liệu cho đồ án sử dụng hệ quản trị cơ sở dữ liệu MongoDB
Hình 2 Kiến trúc luồng xử lí giữa client-side và server-side
Khách hàng chịu trách nhiệm hiển thị thông tin trên website, bao gồm danh sách sản phẩm, chi tiết và các thành phần tương tác như nút nhấn và hình chọn để người dùng dễ dàng thao tác.
Các dịch vụ Web RESTful được phát triển và triển khai bằng ExpressJs trên máy chủ localhost, nhằm xử lý các yêu cầu nghiệp vụ thông qua các URL Endpoint và các phương thức HTTP được phép.
− Các thông tin, thao tác xử lí ở phía Client sẽ thông qua API Caller gọi đến RESTful Web Service
− Các implement của Web Service sử dụng các Repository để thao tác với database, xử lí nghiệp vụ dữ liệu theo yêu cầu của người dùng
After fulfilling the request, the service will return essential information to the client for further processing through the response body, header, and status code.
Hình 3 Kiến trúc xử lí giữa client và server
Kiến trúc mã nguồn
4.4.1 Link source code đồ án nhóm
− Backend: https://github.com/TriTran951/FE_DoAn1_WebsiteBanHang
− Frontend: https://github.com/TriTran951/BE_DoAn1_WebsiteBanHang
4.4.2 Cấu trúc mã nguồn phía client-side
− Thành phần môi trường yêu cầu: package manager npm
Cách chia cây thư mục và các thành phần theo kiểu đệ quy giúp tổ chức màn hình một cách hiệu quả Mỗi màn hình bao gồm các thành phần và màn hình con, trong khi các màn hình con cũng chứa các thành phần và màn hình con khác Quy trình này tiếp tục cho đến khi màn hình được chia nhỏ nhất có thể, đảm bảo sự đơn giản và dễ hiểu.
Giao diện người dùng (UI) đóng vai trò quan trọng trong việc khởi tạo các thành phần hiển thị thông tin như hình ảnh, bảng và thông số, đồng thời cung cấp các công cụ tương tác cho người dùng như nút nhấn và đường dẫn.
The /service/api directory is designed for server-side interaction, housing API callers that utilize the Axios library to communicate with RESTful Web Services provided by the server This setup effectively manages requests, responses, and error handling between the client and server.
4.4.3 Cấu trúc mã nguốn phía server-side
4.4.3.1 Các thành phần trường yêu cầu
4.4.3.2 Cấu trúc các module project
− Config: chứa các file config cho website, server Redis và kết nối csdl Mongodb
− Router: cài đặt và cung cấp các RESTful Web Services – phương thức giao tiếp giữa client-side và server-side
− Controller: Điều khiển sự tương tác của của các router đến các service
− Service: Cài đặt lớp trung gian của Controller và các Model
− Model: Truy vấn và thao tác đến cơ sở dữ liệu nhờ mongoose
Cách thu thập dữ liệu (crawl) từ một website
Trong phần này, chúng ta sẽ sử dụng Puppeteer và Axios để thu thập dữ liệu từ website Thế Giới Di Động và CellphoneS Kỹ thuật lấy nguồn dữ liệu đã được trình bày chi tiết trong mục 3.2.
4.5.1 Cấu trúc của module product crawl
− Base: chứa file excel crawl dữ liệu của sản phẩm như tên, giá tiền, thông số, image link và các sản phẩm liên quan
− Dữ liệu của website được lấy bằng cách request đến server của website thegioididong và cellphoneS dưới dạng file html
− Sau khi crawl dữ liệu, sử dụng puppeteer để tách dữ liệu cần thiết và ghi vào file excel
− Từ các file dữ liệu đã được tạo, dùng thư viện XLSX để đọc file và ghi vào database.
Kiểm thử REStfull Web Server được tạo
4.6.1 Lấy thông tin tất cả sản phẩm
− Lần request đầu tiên khi bắt đầu chạy server tốc độ request 790ms
Hình 4 Minh chứng request tất cả sản phẩm lần đầu
− Những lần request sau tốc độ giảm còn 185ms do redis đã cache data nên tốc độ tăng lên
Hình 5 Minh chứng request tất cả sản phẩm
4.6.2 Lấy thông tin sản phẩm theo loại sản phẩm
− Lần request đầu tiên lấy tất cả sản phẩm loại smartphone tốc độ request 374ms
Hình 6 Minh chứng request tất cả sản phẩm loại smartphone lần đầu
− Những lần request sau tốc độ giảm còn 137ms do redis đã cache data.E
Hình 7 Minh chứng request tất cả sản phẩm loại smartphone
4.6.3 Lấy thông tin sản phẩm theo bộ lọc
− Request lấy thông số ‘Dung lượng RAM’ với giá trị ‘4 GB’ thì tốc độ request 41ms
Hình 8 Minh chứng request tất cả sản phẩm loại smartphone theo thông số.
Website bán hàng chuẩn SEO
4.7.1 Danh sách các giao diện màn hình
Hình 9 Màn hình trang chủ (phần 1)
Hình 10 Màn hình trang chủ (phần 2)
4.7.1.2 Màn hình loại sản phẩm
Hình 11 Màn hình loại sản phẩm (phần 1)
Hình 12 Màn hình loại sản phẩm (phần 2)
4.7.1.3 Màn hình chi tiết sản phẩm
Hình 13 Màn hình chi tiết sản phẩm
4.7.2 Các bước đưa website lên trên thanh tìm kiếm của Google
4.7.2.1 Các nền tảng và công cụ để triển khai và quản lý web trên google
Netlify là dịch vụ đám mây giúp phát triển và triển khai trang web, cung cấp nền tảng tích hợp cho quản lý mã nguồn, xây dựng và phân phối trang web tĩnh và động Dịch vụ này hỗ trợ lưu trữ mã nguồn và quản lý phiên bản qua Git, đồng thời tích hợp với các công cụ phát triển như GitHub, GitLab và Bitbucket Khi có thay đổi trong mã nguồn, Netlify tự động kích hoạt quá trình xây dựng và triển khai lại trang web.
App Services trên Microsoft Azure là một dịch vụ quan trọng, cung cấp môi trường đám mây lý tưởng cho việc phát triển, triển khai và quản lý ứng dụng web, mobile và API Dịch vụ này mang đến nền tảng quản lý đơn giản và linh hoạt, cho phép người dùng triển khai ứng dụng mà không cần lo lắng về việc quản lý cơ sở hạ tầng.
Google Search Console là bộ công cụ miễn phí từ Google, giúp chủ sở hữu trang web theo dõi và quản lý hiệu suất của họ trên kết quả tìm kiếm Công cụ này cung cấp thông tin và báo cáo về hiển thị trang web, tốc độ tải trang, liên kết, phân tích từ khóa và nhiều yếu tố quan trọng khác.
4.7.2.2 Các bước đưa trang web lên thanh tìm kiếm của Google
− Bước 1: Triển khai front-end thông qua Netlify:
− Bước 2: Triển khai back-end thông qua App Service được cung cấp bởi Azure
− Bước 3: Khai báo website cho Google Search Console Tools
4.7.3 Đánh giá hiệu suất trang web bằng PageSpeed Insights
PageSpeed Insights là công cụ miễn phí từ Google giúp đánh giá tốc độ và hiệu suất của trang web trên máy tính và thiết bị di động Nó phân tích các yếu tố ảnh hưởng đến tốc độ tải trang và hiệu suất tổng thể, đồng thời đưa ra các khuyến nghị để cải thiện trải nghiệm người dùng trên trang web của bạn.
− Các yếu tố của trang web làm giảm chỉ số hiệu suất:
• Thời gian phản hồi bên máy chủ Netlify chậm
• Kích thước DOM quá lớn.
4.7.3.1 Đánh giá hiệu suất của trang chủ
Hình 14 Minh chứng đánh giá hiệu suất của trang chủ
Hình 15 Minh chứng đánh giá chuẩn SEO của trang chủ
4.7.3.2 Đánh giá hiệu suất của trang loại sản phẩm
Hình 16 Minh chứng đánh giá hiệu suất của trang loại sản phẩm
Hình 17 Minh chứng đánh giá chuẩn SEO của trang loại sản phẩm
4.7.3.3 Đánh giá hiệu suất của trang chi tiết sản phẩm
Hình 18 Minh chứng đánh giá hiệu suất của trang chi tiết sản phẩm
Hình 19 Minh chứng đánh giá chuẩn SEO của trang chi tiết sản phẩm
4.7.4 Hiển thị của website trên thanh tìm kiếm trên Google
Hình 20 Minh chứng hiển thị của website trên thanh tìm kiếm trên Google.
HƯỚNG PHÁT TRIỂN
Hướng phát triển về mặt tính năng
− Hỗ trợ thanh toán trực tuyến
− Chức năng trò chuyện với người quản lí (người bán hàng) (thông qua messenger)
− Chức năng phóng to ảnh khi trỏ chuột vào hình ảnh của sản phẩm
− Chức năng xác thực người dùng, khôi phục mật khẩu, thông tin đơn hàng, chương trình khuyến mãi đến người dùng qua mail
− Hệ thống thông báo đến người dùng.
Hướng phát về mặt kỉ thuật
− Tối ưu hoá performance của frontend bằng cách giảm thiểu số lượng code CSS không cần thiết
− Cải thiện cấu trúc cơ sở dữ liệu và các kỉ thuật tối ưu hiệu suất cho website
− Cải thiện kỉ thuật để đạt được nhiều tiêu chí cho web chuẩn SEO.
