Nghiên Cứu Thiết Kế Website Bán Giày Hiệu Quả

Nghiên cứu thiết kế website bán giày giúp tối ưu hóa trải nghiệm người dùng, tăng cường khả năng tiếp cận và doanh thu cho cửa hàng trực tuyến.

• Tác giả: Võ Ngọc Thành Đạt
• Người hướng dẫn: TS. Nguyễn Trần Quốc Vinh
• Trường học: Đại học Sư Phạm Đà Nẵng
• Chuyên ngành: Công Nghệ Thông Tin
• Đề tài: Nghiên Cứu Xây Dựng Thiết Kế Website Bán Giày
• Loại tài liệu: báo cáo khóa luận tốt nghiệp
• Năm xuất bản: 2021
• Địa điểm: Đà Nẵng

Mục lục chi tiết

• LỜI CẢM ƠN
• MỞ ĐẦU
• 1. CHƯƠNG 1: TỔNG QUAN VỀ CÔNG NGHỆ THIẾT KẾ WEBSITE
• 1.1. Tìm hiểu về các ngôn ngữ lập trình
• 1.1.1. Ngôn ngữ HTML
• 1.1.2. Ngôn ngữ CSS
• 1.1.3. Ngôn ngữ lập trình NodeJS
• 1.2. Một số thư viện hỗ trợ
• 1.2.1. Thư viện Javascript
• 1.2.2. Thư viện Ajax
• 1.2.3. Thư viện BOOTSTRAP
• 1.2.4. Thư viện JQUERY
• 1.3. Cơ sở dữ liệu MongoDB
• 1.3.1. Khái niệm cơ sở dữ liệu MongoDB
• 1.3.2. Các thành phần của MongoDB
• 1.4. Giới thiệu về Dialogflow
• 1.4.1. Khái niệm về Dialogflow
• 1.4.2. Lịch sử ra đời và hoạt động
• 2. CHƯƠNG 2: PHÂN TÍCH THIẾT KẾ HỆ THỐNG WEBSITE
• 2.1. Khảo sát và đặc tả yêu cầu
• 2.1.1. Phần quản lý trong admin
• 2.1.2. Giao diện người dùng
• 2.2. Phân tích thiết kế hệ thống
• 2.2.1. Các chức năng của hệ thống
• 2.2.2. Các tác nhân của hệ thống
• 2.2.3. Biểu đồ use case
• 2.2.3.1. Biểu đồ Use – case tổng quát
• 2.2.3.2. Use case quản lý danh mục sản phẩm
• 2.2.3.3. Use case khách hàng quản lý giỏ hàng
• 2.2.3.4. Use case quản lý sản phẩm
• 2.2.3.5. Use case quản lý thành viên
• 2.2.3.6. Use case quản lý đơn đặt hàng
• 2.2.4. Biểu đồ tuần tự
• 2.2.4.1. Biểu đồ tuần tự chức năng đăng nhập
• 2.2.4.2. Biểu đồ tuần tự chức năng đăng ký
• 2.2.4.3. Biểu đồ tuần tự chức năng tìm kiếm sản phẩm
• 2.2.4.4. Biểu đồ tuần tự quản lý thành viên
• 2.2.4.5. Biểu đồ tuần tự quản lý đơn đặt hàng
• 2.2.5. Biểu đồ hoạt động
• 2.2.5.1. Biểu đồ hoạt động đăng ký tài khoản
• 2.2.5.2. Biểu đồ hoạt động đăng nhập tài khoản
• 2.2.5.3. Biểu đồ hoạt động mua hàng và thanh toán
• 2.2.5.4. Biểu đồ hoạt động tìm kiếm sản phẩm
• 2.2.6. Biểu đồ trạng thái
• 2.2.6.1. Biểu đồ trạng thái đăng ký tài khoản
• 2.2.6.2. Biểu đồ trạng thái đăng nhập tài khoản
• 2.2.6.3. Biểu đồ trạng thái quản lý thành viên
• 2.2.6.4. Biểu đồ trạng thái tìm kiếm sản phẩm
• 2.2.7. Biểu đồ lớp phân tích
• 2.2.8. Thiết kế cơ sở dữ liệu
• 2.2.9. Quy trình hệ thống chatbot
• 2.2.9.1. Khảo sát và sử dụng chatbot
• 2.2.9.2. Lựa chọn nền tảng và công cụ xây dựng chatbot
• 2.2.9.3. Xây dựng kịch bản triển khai chatbot
• 2.2.9.4. Chatbot phản hồi như thế nào?
• 2.2.9.5. Phân tích và theo dõi
• 3. CHƯƠNG 3: THIẾT KẾ VÀ XÂY DỰNG WEBSITE
• 3.1. Giao diện hiển thị
• 3.1.1. Giao diện trang chủ hiển thị
• 3.1.2. Giao diện sản phẩm
• 3.1.3. Giao diện đăng nhập
• 3.1.4. Giao diện đăng ký
• 3.1.5. Giao diện giỏ hàng
• 3.1.6. Giao diện hệ thống chatbot hỗ trợ người dùng
• 3.2. Giao diện chức năng quản lý
• 3.2.1. Giao diện trang chủ admin
• 3.2.2. Giao diện trang quản lý sản phẩm
• 3.2.3. Giao diện trang quản đơn đặt hàng
• 3.2.4. Giao diện trang quản lý người dùng
• 3.3. Kết quả đạt được
• 3.4. Hạn chế của đề tài
• 3.5. Hướng phát triển
• TÀI LIỆU THAM KHẢO

Tóm tắt

I. Tổng quan về thiết kế website bán giày chuyên nghiệp

Thiết kế website bán giày chuyên nghiệp không chỉ đơn thuần là việc tạo ra một trang web. Nó còn bao gồm việc tối ưu hóa trải nghiệm người dùng và đảm bảo rằng website có thể thu hút và giữ chân khách hàng. Một website tốt cần phải có giao diện thân thiện, dễ sử dụng và cung cấp đầy đủ thông tin về sản phẩm.

1.1. Tại sao cần thiết kế website bán giày chuyên nghiệp

Việc sở hữu một website bán giày chuyên nghiệp giúp doanh nghiệp tiếp cận được nhiều khách hàng hơn. Theo nghiên cứu, hơn 70% người tiêu dùng tìm kiếm sản phẩm trực tuyến trước khi quyết định mua hàng.

1.2. Các yếu tố cần có trong thiết kế website bán giày

Một website bán giày cần có các yếu tố như giao diện hấp dẫn, tính năng tìm kiếm sản phẩm, giỏ hàng và thanh toán dễ dàng. Ngoài ra, việc tối ưu hóa SEO cho website cũng rất quan trọng để tăng khả năng hiển thị trên các công cụ tìm kiếm.

II. Những thách thức trong thiết kế website bán giày

Thiết kế website bán giày không phải là một nhiệm vụ dễ dàng. Có nhiều thách thức mà các nhà thiết kế phải đối mặt, từ việc lựa chọn công nghệ phù hợp đến việc đảm bảo rằng website hoạt động tốt trên mọi thiết bị.

2.1. Khó khăn trong việc tối ưu hóa trải nghiệm người dùng

Một trong những thách thức lớn nhất là làm cho website dễ sử dụng và thân thiện với người dùng. Điều này bao gồm việc thiết kế giao diện trực quan và dễ dàng điều hướng.

2.2. Cạnh tranh từ các đối thủ

Thị trường bán giày trực tuyến đang ngày càng cạnh tranh. Các doanh nghiệp cần phải tìm ra cách để nổi bật hơn so với đối thủ, từ việc cung cấp sản phẩm độc đáo đến việc cải thiện dịch vụ khách hàng.

III. Phương pháp thiết kế website bán giày hiệu quả

Để thiết kế một website bán giày hiệu quả, cần áp dụng các phương pháp và công nghệ hiện đại. Việc sử dụng các công cụ thiết kế và phát triển web tiên tiến sẽ giúp tiết kiệm thời gian và nâng cao chất lượng sản phẩm.

3.1. Sử dụng công nghệ hiện đại

Các công nghệ như HTML5, CSS3 và JavaScript giúp tạo ra các trang web tương tác và hấp dẫn. Việc sử dụng các framework như Bootstrap cũng giúp tiết kiệm thời gian phát triển.

3.2. Tối ưu hóa SEO cho website bán giày

Tối ưu hóa SEO là một phần quan trọng trong thiết kế website. Điều này bao gồm việc sử dụng từ khóa phù hợp, tối ưu hóa tốc độ tải trang và đảm bảo rằng website thân thiện với các công cụ tìm kiếm.

IV. Ứng dụng thực tiễn của website bán giày

Website bán giày không chỉ là một công cụ bán hàng mà còn là một nền tảng để xây dựng thương hiệu. Các doanh nghiệp có thể sử dụng website để quảng bá sản phẩm và tương tác với khách hàng.

4.1. Tăng cường thương hiệu qua website

Một website được thiết kế tốt có thể giúp tăng cường nhận diện thương hiệu. Các doanh nghiệp có thể sử dụng các chiến dịch marketing trực tuyến để thu hút khách hàng đến với website.

4.2. Phân tích dữ liệu khách hàng

Website cũng cho phép doanh nghiệp thu thập dữ liệu về hành vi của khách hàng. Điều này giúp doanh nghiệp hiểu rõ hơn về nhu cầu và sở thích của khách hàng, từ đó cải thiện sản phẩm và dịch vụ.

V. Kết luận và tương lai của thiết kế website bán giày

Thiết kế website bán giày chuyên nghiệp là một yếu tố quan trọng trong việc phát triển kinh doanh trực tuyến. Với sự phát triển không ngừng của công nghệ, tương lai của thiết kế website sẽ ngày càng trở nên phong phú và đa dạng.

5.1. Xu hướng thiết kế website trong tương lai

Các xu hướng như thiết kế responsive, sử dụng trí tuệ nhân tạo và công nghệ thực tế ảo sẽ ngày càng phổ biến trong thiết kế website bán giày.

5.2. Tầm quan trọng của việc cập nhật công nghệ

Doanh nghiệp cần phải thường xuyên cập nhật công nghệ và xu hướng mới để duy trì tính cạnh tranh. Việc này không chỉ giúp cải thiện trải nghiệm người dùng mà còn nâng cao hiệu quả kinh doanh.

Nội dung chính

Bối cảnh và vấn đề nghiên cứu

Sự bùng nổ của mạng Internet và công nghệ thông tin đã thúc đẩy sự chuyển dịch mạnh mẽ của hoạt động thương mại từ phương thức truyền thống sang môi trường số. Trong bối cảnh toàn cầu hóa, việc sở hữu một website bán hàng trực tuyến không chỉ là một công cụ tiếp thị mà đã trở thành tiêu chuẩn bắt buộc đối với các doanh nghiệp nhằm duy trì năng lực cạnh tranh. Thực tế thị trường cho thấy sự thành công của các nền tảng thương mại điện tử quốc tế như Amazon, eBay cũng như các hệ thống bán hàng tại Việt Nam (như Vatgia) đã chứng minh vai trò thiết yếu của một kênh phân phối trực tuyến có cấu trúc thông tin hoàn chỉnh, giao diện thân thiện và vận hành ổn định.

Khóa luận tốt nghiệp "Nghiên cứu xây dựng thiết kế website bán giày" do sinh viên Võ Ngọc Thành Đạt (MSSV: 3120417004, Lớp 17CNTTC) thực hiện dưới sự hướng dẫn của TS. Nguyễn Trần Quốc Vinh tại Khoa Tin học, Trường Đại học Sư phạm – Đại học Đà Nẵng (năm 2021), được triển khai nhằm giải quyết nhu cầu thương mại điện tử thực tế trong lĩnh vực kinh doanh giày dép.

Nhiệm vụ và mục tiêu nghiên cứu của đề tài được xác định cụ thể như sau:

1. Nghiên cứu, tiếp cận và ứng dụng các ngôn ngữ, công nghệ lập trình web hiện đại gồm HTML, CSS, JavaScript, NodeJS, framework ReactJS và cơ sở dữ liệu MongoDB.
2. Khảo sát đặc tả yêu cầu, phân tích và thiết kế hệ thống thông tin quản lý bán hàng thông qua hệ thống mô hình hóa UML.
3. Xây dựng website bán giày trực tuyến với đầy đủ các phân hệ chức năng cho khách hàng và người quản trị, đảm bảo giao diện trực quan, tương thích đa thiết bị (Responsive Web Design).
4. Tích hợp nền tảng trí tuệ nhân tạo Dialogflow nhằm xây dựng hệ thống chatbot tự động tư vấn, hỗ trợ giải đáp thắc mắc cho người dùng.
5. Hỗ trợ nhà phân phối rút ngắn khoảng cách với người tiêu dùng, tối ưu hóa quy trình quản lý đơn hàng, danh mục sản phẩm và thống kê kinh doanh.

Đối tượng nghiên cứu của khóa luận là quy trình quản lý và kinh doanh bán lẻ giày dép trực tuyến, các giải pháp kỹ thuật xây dựng ứng dụng web Single Page Application (SPA), cơ sở dữ liệu phi quan hệ (NoSQL) và công nghệ xử lý ngôn ngữ tự nhiên ứng dụng trong chatbot. Phạm vi nghiên cứu tập trung vào việc hiện thực hóa mô hình website bán lẻ quy mô vừa và nhỏ, thực nghiệm tại Trường Đại học Sư phạm – Đại học Đà Nẵng trong năm 2021.

Cơ sở lý thuyết và phương pháp

Khóa luận thiết lập nền tảng kỹ thuật và phương pháp luận dựa trên các công nghệ phát triển phần mềm và tiêu chuẩn mô hình hóa hệ thống thông tin:

• Nền tảng công nghệ phía máy khách (Client-side):

  • HTML / HTML5: Chuẩn ngôn ngữ đánh dấu siêu văn bản do World Wide Web Consortium (W3C) phát triển, cung cấp cấu trúc trang, hỗ trợ các API và Document Object Model (DOM), xử lý các thành phần đa phương tiện.
  • CSS: Định dạng phong cách hiển thị các phần tử HTML, tận dụng tính kế thừa để tối ưu hóa mã nguồn.
  • JavaScript: Ngôn ngữ kịch bản tuân theo chuẩn ECMAScript, thực thi phía máy khách nhằm tạo tương tác động.
  • ReactJS: Thư viện JavaScript mã nguồn mở do Facebook phát triển phục vụ xây dựng giao diện ứng dụng đơn trang (SPA), sử dụng cú pháp JSX và cơ chế so sánh DOM ảo nhằm tối ưu hóa tốc độ kết xuất (rendering).
  • Bootstrap: Framework hỗ trợ thiết kế giao diện tương thích đa kích thước màn hình (Responsive Web Design), tích hợp hệ thống lưới (Grid System) 12 cột với độ rộng chuẩn 940px.
  • jQuery & Ajax: Thư viện JavaScript gọn nhẹ (kích thước nén khoảng 19KB) do John Resig phát triển năm 2006, tích hợp bộ chọn Sizzle và kỹ thuật Asynchronous JavaScript and XML (Ajax) thông qua đối tượng XMLHttpRequest để trao đổi dữ liệu không đồng bộ.

• Nền tảng công nghệ phía máy chủ (Server-side) và Cơ sở dữ liệu:

  • NodeJS: Nền tảng phát triển xây dựng trên V8 JavaScript Runtime của Chrome, có tầng lõi viết bằng C++, vận hành theo kiến trúc hướng sự kiện (Event-driven) và cơ chế xử lý I/O không chặn (Non-blocking I/O) đơn luồng (Single-threaded).
  • MongoDB: Hệ quản trị cơ sở dữ liệu NoSQL hướng tài liệu (Document-oriented), lưu trữ dữ liệu dưới định dạng JSON/BSON với lược đồ động. MongoDB chạy dịch vụ mặc định tại cổng 27017, mỗi bản ghi được gán khóa chính _id kiểu ObjectId có đánh chỉ mục (index) tự động. Hệ thống thực hiện cơ chế ghi đệm trên bộ nhớ RAM và đồng bộ xuống đĩa cứng sau mỗi chu kỳ 60 giây.

• Nền tảng Trí tuệ nhân tạo và Xử lý ngôn ngữ tự nhiên:

  • Google Dialogflow: Nền tảng AI đàm thoại xử lý ngôn ngữ tự nhiên (NLP) được Google đổi tên chính thức từ API.AI/Speak vào ngày 10/10/2017. Hệ thống nhận dạng ngữ cảnh dựa trên Intent (ý định), Entity (thực thể), Context (ngữ cảnh) và tích hợp Webhook để phản hồi tự động.

• Phương pháp nghiên cứu:

  • Phương pháp phân tích và thiết kế hướng đối tượng (OOAD) sử dụng ngôn ngữ mô hình hóa thống nhất UML (Unified Modeling Language).
  • Phương pháp khảo sát quy trình nghiệp vụ bán hàng thực tế để đặc tả yêu cầu chức năng và phi chức năng.
  • Phương pháp thực nghiệm phần mềm: Cài đặt, lập trình hệ thống và kiểm thử các giao diện chức năng.

Thiết kế và triển khai

Hệ thống được thiết kế phân quyền rõ ràng theo 3 nhóm tác nhân chính: Khách hàng, Quản lý và Quản trị viên (Admin).

Nhóm tác nhân	Chức năng chính	Trách nhiệm và quyền hạn
Admin	Đăng nhập, Quản lý giao diện, Quản lý tài khoản, Quản lý phân quyền.	Toàn quyền kiểm soát cấu hình hệ thống, cấp quyền vận hành cho nhân viên quản lý.
Quản lý	Đăng nhập, Quản trị hệ thống, Quản lý sản phẩm, Quản lý danh mục, Quản lý đặt hàng, Quản lý chi tiết đặt hàng, Quản lý khách hàng, Quản lý chi tiết hóa đơn, Quản lý giỏ hàng, Quản lý thống kê.	Giám sát hoạt động kinh doanh, cập nhật kho sản phẩm, theo dõi tình trạng đơn đặt hàng, thống kê doanh thu và hàng tồn.
Khách hàng	Đăng ký, Đăng nhập, Quản lý thông tin tài khoản, Tìm kiếm thông tin sản phẩm, Đặt hàng, Quản lý giỏ hàng, Thanh toán, Tương tác Chatbot.	Tìm kiếm, xem chi tiết sản phẩm, thực hiện giao dịch mua bán và nhận hỗ trợ tự động qua chatbot.

Quy trình phân tích thiết kế hệ thống được chi tiết hóa qua các mô hình UML:

• Mô hình Use Case: Bao gồm Use Case tổng quát, Use Case quản lý danh mục sản phẩm, Use Case khách hàng quản lý giỏ hàng, Use Case quản lý sản phẩm, Use Case quản lý thành viên và Use Case quản lý đơn đặt hàng. Các luồng sự kiện chính và rẽ nhánh (A1) được đặc tả chặt chẽ cho từng tác vụ thêm, sửa, xóa và kiểm tra hợp lệ dữ liệu.
• Mô hình Biểu đồ tuần tự (Sequence Diagram): Mô tả tương tác giữa tác nhân, giao diện, bộ điều khiển và cơ sở dữ liệu cho các tiến trình: Đăng nhập, Đăng ký, Tìm kiếm sản phẩm, Quản lý thành viên, Quản lý đơn đặt hàng.
• Mô hình Biểu đồ hoạt động (Activity Diagram): Thể hiện luồng xử lý nghiệp vụ cho các tác vụ Đăng ký tài khoản, Đăng nhập tài khoản, Mua hàng và thanh toán, Tìm kiếm sản phẩm.
• Mô hình Biểu đồ trạng thái (State Diagram): Xác định sự chuyển đổi trạng thái đối tượng trong các tiến trình Đăng ký tài khoản, Đăng nhập tài khoản, Quản lý thành viên, Tìm kiếm sản phẩm.
• Mô hình Dữ liệu và Biểu đồ lớp phân tích: Thiết kế cấu trúc các bảng/collection chính bao gồm bảng Admin, bảng Category_Product và bảng User.
• Quy trình hệ thống Chatbot: Thiết lập luồng đàm thoại từ bước tiếp nhận phát biểu của người dùng (ngôn ngữ tự nhiên), trích xuất tham số qua Intent và Entity trên Dialogflow, xử lý logic thông qua Webhook và trả lời người dùng trên giao diện web.

Nội dung chính theo từng chương

CHƯƠNG 1: TỔNG QUAN VỀ CÔNG NGHỆ THIẾT KẾ WEBSITE

Chương 1 hệ thống hóa cơ sở lý thuyết về các công nghệ, ngôn ngữ và nền tảng được lựa chọn để phát triển ứng dụng. Tác giả trình bày chi tiết về cấu trúc và vai trò của HTML/HTML5, các thuộc tính định kiểu của CSS và cơ chế kế thừa mã nguồn. Nền tảng NodeJS được phân tích sâu về kiến trúc đơn luồng, cơ chế non-blocking I/O và hiệu năng xử lý tác vụ thời gian thực. Thư viện ReactJS được làm rõ qua mô hình Component tái sử dụng, cú pháp JSX và cơ chế cập nhật DOM ảo.

Bên cạnh đó, chương này phân tích các thư viện hỗ trợ như JavaScript, Ajax, jQuery (phương châm "Write less, do more", bộ chọn Sizzle, dung lượng nén 19KB) và Bootstrap (hệ thống lưới 12 cột, Responsive Web Design). Về lưu trữ, MongoDB được trình bày với cấu trúc Document, Collection, Database, cơ chế đánh chỉ mục trên trường _id, bộ đệm RAM và độ trễ ghi đĩa 60 giây. Cuối chương là phần giới thiệu nền tảng Dialogflow của Google, lịch sử phát triển từ API.AI và các thành phần xử lý ý định người dùng.

CHƯƠNG 2: PHÂN TÍCH THIẾT KẾ HỆ THỐNG WEBSITE

Chương 2 tập trung vào việc mô hình hóa hệ thống từ giai đoạn khảo sát yêu cầu đến thiết kế chi tiết. Tác giả phân định rõ yêu cầu chức năng cho phân hệ Admin (quản lý giao dịch, hóa đơn, thống kê đơn hàng/liên hệ theo ngày và tháng, thống kê hàng tồn) và giao diện người dùng (tối ưu dung lượng, menu đơn giản, font chữ và màu sắc hài hòa, hỗ trợ đặt hàng không cần đăng ký hoặc có tài khoản thành viên).

Chương này trình bày hệ thống bảng đặc tả chức năng của Admin, Quản lý và Khách hàng; xây dựng 6 biểu đồ Use Case kèm kịch bản chi tiết; 5 biểu đồ tuần tự; 4 biểu đồ hoạt động; 4 biểu đồ trạng thái và biểu đồ lớp phân tích. Cấu trúc cơ sở dữ liệu được cụ thể hóa với các bảng Admin, Category_Product và User. Cuối cùng, chương 2 đặc tả quy trình 5 bước xây dựng hệ thống chatbot: khảo sát, lựa chọn nền tảng Dialogflow, xây dựng kịch bản, cấu hình phản hồi và theo dõi phân tích.

CHƯƠNG 3: THIẾT KẾ VÀ XÂY DỰNG WEBSITE

Chương 3 trình bày kết quả hiện thực hóa giao diện và các chức năng của website trên môi trường thực tế. Về phía người dùng, hệ thống triển khai các giao diện: Trang chủ hiển thị, Trang chi tiết sản phẩm, Giao diện đăng nhập, Giao diện đăng ký, Giao diện giỏ hàng và Khung hội thoại Chatbot hỗ trợ khách hàng trực tuyến.

Về phía quản trị, hệ thống cung cấp Giao diện trang chủ Admin, Trang quản lý danh mục và sản phẩm, Trang quản lý đơn đặt hàng và Trang quản lý người dùng/thành viên. Tác giả đánh giá mức độ đáp ứng của các module so với yêu cầu đặt ra, đồng thời thẳng thắn chỉ ra các hạn chế về mặt thuật toán, hiệu năng và giao diện do giới hạn về mặt thời gian thực hiện.

Kết quả và đóng góp

Khóa luận đã hoàn thành các mục tiêu nghiên cứu và đạt được các kết quả cụ thể:

• Xây dựng thành công hệ thống website bán giày trực tuyến hoàn chỉnh với đầy đủ hai phân hệ: giao diện thương mại điện tử dành cho khách hàng và phân hệ quản trị dành cho Admin/Quản lý.
• Nắm bắt và làm chủ quy trình phát triển ứng dụng web hiện đại, kết hợp thành công các công nghệ: ReactJS, NodeJS, JavaScript, Ajax, jQuery, Bootstrap, HTML5, CSS và cơ sở dữ liệu NoSQL MongoDB.
• Ứng dụng thành công nền tảng AI Dialogflow để tích hợp tính năng chatbot thông minh vào website, giúp tự động tiếp nhận và phản hồi các yêu cầu tư vấn của khách hàng.
• Hoàn thiện bộ hồ sơ phân tích thiết kế hệ thống chi tiết bao gồm 25 hình vẽ/sơ đồ mô hình hóa (biểu đồ use case, tuần tự, hoạt động, trạng thái, biểu đồ lớp và thiết kế bảng dữ liệu).

Hạn chế và hướng nghiên cứu tiếp

• Hạn chế:

  • Quy mô website mới dừng lại ở mức vừa và nhỏ.
  • Do giới hạn về thời gian và kinh nghiệm, một số chức năng của trang web bán hàng chưa thực sự hoàn thiện toàn diện.
  • Website còn tồn tại một số thiếu sót về mặt hiển thị giao diện cũng như việc tối ưu hóa thuật toán xử lý và thời gian phản hồi của hệ thống.

• Hướng phát triển:

  • Khắc phục các sai sót về mặt hiển thị và tối ưu hóa thuật toán xử lý dữ liệu.
  • Nâng cấp, bổ sung các chức năng chuyên sâu cho hệ thống thương mại điện tử.
  • Nâng cao hiệu năng vận hành và mở rộng khả năng đáp ứng của hệ thống trong tương lai.

Giá trị tham khảo

Khóa luận là tài liệu tham khảo phù hợp cho:

• Sinh viên chuyên ngành Công nghệ Thông tin, Kỹ thuật Phần mềm đang thực hiện đồ án môn học hoặc khóa luận tốt nghiệp về đề tài xây dựng ứng dụng web thương mại điện tử.
• Những người nghiên cứu muốn tìm hiểu quy trình kết hợp kiến trúc ReactJS ở phía máy khách với NodeJS và cơ sở dữ liệu MongoDB ở phía máy chủ.
• Các nhà phát triển cần tài liệu tham khảo thực tế về quy trình phân tích thiết kế hệ thống bằng UML và phương pháp tích hợp chatbot AI (Dialogflow) vào giao diện website bán hàng.

Câu hỏi thường gặp

1. Khóa luận sử dụng hệ quản trị cơ sở dữ liệu nào và cơ chế ghi dữ liệu xuống đĩa cứng được vận hành ra sao?
Khóa luận sử dụng cơ sở dữ liệu NoSQL MongoDB (chạy tại cổng mặc định 27017). Để tối ưu hiệu suất, dữ liệu mới được ghi đệm (cache) trên bộ nhớ RAM và sau chu kỳ 60 giây, MongoDB mới thực hiện ghi toàn bộ dữ liệu thay đổi từ RAM xuống đĩa cứng. Mỗi bản ghi (document) đều tự động có trường khóa chính _id kiểu ObjectId được đánh chỉ mục tự động.

2. Nền tảng nào được lựa chọn để phát triển chatbot hỗ trợ khách hàng và nguồn gốc của nó?
Hệ thống sử dụng nền tảng Dialogflow của Google. Dialogflow tiền thân là Speak/API.AI (công cụ tạo trợ lý ảo trên Android, iOS, Windows Phone) và được Google chính thức đổi tên thành Dialogflow vào ngày 10 tháng 10 năm 2017.

3. Khóa luận đã xây dựng những loại biểu đồ UML nào trong giai đoạn phân tích thiết kế hệ thống?
Tác giả đã xây dựng đầy đủ các loại biểu đồ UML bao gồm: Biểu đồ Use Case (tổng quát và chi tiết cho từng phân hệ), Biểu đồ tuần tự (Sequence Diagram), Biểu đồ hoạt động (Activity Diagram), Biểu đồ trạng thái (State Diagram) và Biểu đồ lớp phân tích (Class Diagram).

4. Khung giao diện (framework) nào được sử dụng để đảm bảo tính tương thích hiển thị trên nhiều thiết bị?
Đề tài sử dụng framework Bootstrap để thiết kế giao diện Responsive Web Design. Bootstrap cung cấp hệ thống lưới Grid System mặc định gồm 12 cột với độ rộng 940px, cho phép giao diện tự động thích ứng với nhiều kích thước màn hình khác nhau từ desktop đến thiết bị di động.

5. Phân hệ quản trị (Admin) cung cấp những chức năng thống kê nghiệp vụ nào?
Phân hệ Admin cung cấp chức năng thống kê tổng số đơn đặt hàng, tổng số liên hệ của người dùng theo ngày và theo tháng, cùng với chức năng thống kê các mặt hàng sản phẩm tồn đọng trong kho.

Kết luận

Khóa luận tốt nghiệp "Nghiên cứu xây dựng thiết kế website bán giày" của sinh viên Võ Ngọc Thành Đạt đã hoàn thành đầy đủ quy trình nghiên cứu, phân tích, thiết kế và cài đặt một hệ thống thương mại điện tử quy mô vừa và nhỏ. Bằng việc kết hợp các công nghệ web phổ biến như ReactJS, NodeJS, MongoDB cùng nền tảng xử lý ngôn ngữ tự nhiên Dialogflow, tác giả đã hiện thực hóa thành công một website bán hàng có giao diện trực quan và tích hợp trợ lý ảo hỗ trợ khách hàng. Mặc dù còn một số hạn chế về mặt tối ưu thuật toán và mức độ hoàn thiện chức năng do giới hạn thời gian, công trình là tài liệu thực hành có giá trị tham khảo rõ ràng cho sinh viên ngành Công nghệ Thông tin.

Trích đoạn nội dung tài liệu

CHƯƠNG 1: TỔNG QUAN VỀ CÔNG NGHỆ THIẾT KẾ WEBSITE 1.1 Tìm hiểu về các ngôn ngữ lập trình 1.1 Ngôn ngữ HTML HTML (HyperText Markup Language) – Ngôn ngữ đánh dấu siêu văn bản được sử dụng để tạo các tài liệu có thể truy cập trên mạng. Tài liệu HTML được tạo nhờ dùng các thẻ và các phần tử của HTML. File được lưu trên máy chủ dịch vụ web với phần mở rộng “. Các trình duyệt sẽ đọc tập tin HTML và hiển thị chúng dưới dạng trang web.

Các thẻ HTML sẽ được ẩn đi, chỉ hiển thị nội dung văn bản và các đối tượng khác: hình ảnh, media. Với các trình duyệt khác nhau đều hiển thị một tập HTML với một kết quả nhất định. Các trang HTML được gửi đi qua mạng internet theo giao thức HTTP. HTML không những cho phép nhúng thêm các đối tượng hình ảnh, âm thanh mà còn cho phép nhúng các kịch bản vào trong đó như các ngôn ngữ kịch bản như Javascript để tạo hiệu ứng động cho trang web.

Để trình bày trang web hiệu quả hơn thì HTML cho phép sử dụng kết hợp với CSS. HTML không những cho phép nhúng thêm các đối tượng hình ảnh, âm thanh mà còn cho phép nhúng các kịch bản vào trong đó như các ngôn ngữ kịch bản như Javascript để tạo hiệu ứng động cho trang web. HTML là một chuẩn ngôn ngữ internet được tạo ra và phát triển bởi tổ chức World Wide Web Consortium còn được viết tắc là W3C. Trước đó thì HTML xuất bản theo chuẩn của RFC.

HTML được tương thích với mọi hệ điều hành cùng các trình duyệt của nó. Khả năng dễ học, dễ viết là một ưu điểm của HTML không những vậy việc soạn thảo đòi hỏi hết sức đơn giản, chúng ta có thể dùng word, notepad hay bất cứ một trình soạn thảo văn bản nào để viết và chỉ cần lưu với định dạng “.htm” là đã có thể tạo 16 ra một file chứa HTML. Hiện nay, phiên bản mới nhất của HTML là HTML5 với nhiều tính năng ưu việt so với các phiên bản cũ HTML cải tiến khá nhiều đặc biệt hỗ trợ mạnh mẽ các phần tử multimedia mà không cần các plugin. Một tập tin HTML bao gồm trong đó là các đoạn văn bản HTML, được tạo lên bởi các thẻ HTML.

HTML5 nói chung mạnh mẽ hơn nhiều không chỉ về tốc độ và độ thích ứng cao mà chính là khả năng hỗ trợ API (Application Programming Interface - giao diện lập trình ứng dụng) và DOM (Document Object Model – các đối tượng thao tác văn bản).2 Ngôn ngữ CSS CSS (Cascading Style Sheets) là một ngôn ngữ quy định cách trình bày cho các tài liệu viết bằng HTML, XHTML, XML, SVG, hay UML,…CSS quy định cách hiển thị của các thẻ HTML bằng cách quy định các thuộc tính của các thẻ đó (font chữ, kích thước, màu sắc. CSS có cấu trúc đơn giản và sử dụng các từ tiếng anh để đặt tên cho các thuộc tính. CSS khi sử dụng có thể viết trực tiếp xen lẫn vào mã HTML hoặc tham chiếu từ một file css riêng biệt. Hiện nay CSS thường được viết riêng thành một tập tin với mở rộng là “.

Chính vì vậy mà các trang web có sử dụng CSS thì mã HTML sẽ trở nên ngắn gọn hơn. Ngoài ra có thể sử dụng một tập tin CSS đó cho nhiều website tiết kiệm rất nhiều thời gian và công sức. Một đặc điểm quan trọng đó là tính kế thừa của CSS do đó sẽ giảm được số lượng dòng code mà vẫn đạt được yêu cầu. Tuy nhiên, đối với CSS thì các trình duyệt hiểu theo kiểu riêng của nó.

Do vậy, việc trình bày một nội dung trên các trình duyệt khác nhau là không thống nhất. CSS cung cấp hàng trăm thuộc tính trình bày dành cho các đối tượng với sự sáng tạo cao trong kết hợp các thuộc tính giúp mang lại hiệu quả.3 Ngôn ngữ lập trình NodeJS Nodejs là một nền tảng (Platform) phát triển độc lập được xây dựng ở trên Javascript Runtime của Chrome mà chúng ta có thể xây dựng được các ứng dụng mạng một cách nhanh chóng và dễ dàng mở rộng. Một tập tin PHP có phần mở rộng *.php, nó có thể chứa các văn bản, mã nguồn HTML, CSS, Javascript, Jquery. và đương nhiên có thể chứa mã nguồn PHP.

Phần Core bên dưới của Nodejs được viết hầu hết bằng C++ nên cho tốc độ xử lý và hiệu năng khá cao. Nodejs tạo ra được các ứng dụng có tốc độ xử lý nhanh, realtime thời gian thực. Nodejs áp dụng cho các sản phẩm có lượng truy cập lớn, cần mở rộng nhanh, cần đổi mới công nghệ, hoặc tạo ra các dự án Startup nhanh nhất có thể. Các ứng dụng Nodejs được viết bằng javascript, ngôn ngữ này là một ngôn ngữ khá thông dụng.

Theo tác giả của ngôn ngữ Javascript, Ryan Dahl: “Javascript có những đặc tính mà làm cho nó rất khác biệt so với các ngôn ngữ lập trình động còn lại, cụ thể là nó không có khái niệm về đa luồng, tất cả là đơn luồng và hướng sự kiện.” Nodejs chạy đa nền tảng phía Server, sử dụng kiến trúc hướng sự kiện Event-driven, cơ chế non-blocking I/O làm cho nó nhẹ và hiệu quả. Có thể chạy ứng dụng Nodejs ở bất kỳ đâu trên máy Mac – Window – Linux, hơn nữa cộng đồng Nodejs rất lớn và hoàn toàn miễn phí. Các bạn có thể thấy cộng đồng Nodejs lớn như thế nào tại đây, các package đều hoàn toàn free: https://www.com/ Các ứng dụng NodeJS đáp ứng tốt thời gian thực và chạy đa nền tảng, đa thiết bị.4 Framework ReactJS React.js là một thư viện Javascript đang nổi lên trong những năm gần đây với xu hướng Single Page Application. Trong khi những framework khác cố gắng hướng đến một mô hình MVC hoàn thiện thì React nổi bật với sự đơn giản và dễ dàng phối hợp với những thư viện Javascript khác.

Nếu như AngularJS là một Framework cho phép nhúng code javasscript trong code html thông qua các attribute như ng-model, ng-repeat.thì với react là một library cho phép nhúng code html trong code javascript nhờ vào JSX, bạn có thể dễ dàng lồng các đoạn HTML vào trong JS.Tích hợp giữa javascript và HTML vào trong JSX làm cho các component dễ hiểu hơn. React là một thư viện UI phát triển tại Facebook để hỗ trợ việc xây dựng những thành phần (components) UI có tính tương tác cao, có trạng thái và có thể sử dụng lại được. React được sử dụng tại Facebook trong production, và www.com được viết hoàn toàn trên React. 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 Một số thư viện hỗ trợ 1.1 Thư viện Javascript JavaScript là một ngôn ngữ dạng script thường được sử dụng cho việc lập trình web ở phía client, nó tuân theo chuẩn ECMAScript. Là một ngôn ngữ linh động, cú pháp dễ sử dụng như các ngôn ngữ khác và dễ dàng lập trình. JavaScript không hề liên quan tới ngôn ngữ lập trình java, được hầu hết các trình duyệt ngày nay hỗ trợ. Với javascript, ứng dụng web của bạn sẽ trở nên vô cùng sinh động, mang tính trực quan và tương tác cao.

JavaScript theo 19 phiên bản hiện hành là một ngôn ngữ lập trình kịch bản dựa trên đối tượng được phát triển từ các ý niệm nguyên mẫu. Ngôn ngữ này được dùng rộng rãi cho các trang web, nhưng cũng được dùng để tạo khả năng viết script sử dụng các đối tượng nằm sẵn trong các ứng dụng. Giống Java, JavaScript có cú pháp tương tự ngôn ngữ lập trình C.js” là phần mở rộng thường được dùng cho tập tin mã nguồn JavaScript.2 Thư viện Ajax AJAX (Asynchronous JavaScript and XML - JavaScript và XML) là một nhóm các công nghệ phát triển web được sử dụng để tạo các ứng dụng web động hay các ứng dụng giàu tính Internet. Ajax là một kỹ thuật phát triển web có tính tương tác cao bằng cách kết hợp các ngôn ngữ: HTML (hoặc XHTML) với CSS trong việc hiển thị thông tin.

Mô hình DOM (Document Object Model) được thực hiện thông qua JavaScript, nhằm hiển thị thông tin động và tương tác với những thông tin được hiển thị. Đối tượng XMLHttpRequest để trao đổi dữ liệu một cách không đồng bộ với máy chủ web. XML thường là định dạng cho dữ liệu truyền, mặc dầu bất cứ định dạng nào cũng có thể dùng, bao gồm HTML định dạng trước, văn bản thuần (plain text), JSON và ngay cả EBML.3 Thư viện BOOTSTRAP Bootstrap là một Framework có chứa HTML, CSS, JAVASCRIPT, Framework trong tiếng việt có nghĩa là “khuôn khổ” giúp tiết kiệm được thời gian, công sức hơn nữa việc xây dựng hai teamplate cho giao diện Desktop và Mobile đã lỗi thời thay vào đó là Responsive. Responsive sẽ giúp website của 20 bạn hiển thị tương thích với mọi kích thước màn hình nhờ đó bạn sẽ tùy chỉnh hiện thị được nhiều hơn trên các loại màn hình khác nhau.

Ưu điểm của Bootstrap. ✓ Tiết kiệm thời gian: Boostrap giúp người thiết kế giao diện website tiết kiệm rất nhiều thời gian. Các thư viện Bootstrap có những đoạn mã sẵn sàng cho bạn áp dùng vào website của mình. Bạn không phải tốn quá nhiều thời gian để tự viết code cho giao diện của mình.

✓ Tùy biến cao: Bạn hoàn toàn có thể dựa vào Bootstrap và phát triển nền tảng giao diện của chính mình. Bootstrap cung cấp cho bạn hệ thống Grid System mặc định bao gồm 12 bột và độ rộng 940px. Bạn có thể thay đổi, nâng cấp và phát triển dựa trên nền tảng này. ✓ Responsive Web Design: Với Bootstrap, việc phát triển giao diện website để phù hợp với đa thiết bị trở nên dễ dàng hơn bao giờ hết.

Đây là xu hướng phát triển giao diện website đang rất được ưu chuộng trên thế giới.4 Thư viện JQUERY JQuery là một thư viện kiểu mới của JavaScript, được tạo bởi John Resig vào năm 2006 với một phương châm tuyệt vời: Write less, do more - Viết ít hơn, làm nhiều hơn. JQuery làm đơn giản hóa việc truyền tải HTML, xử lý sự kiện, tạo hiệu ứng động và tương tác Ajax. Với jQuery, khái niệm Rapid Web Development đã không còn quá xa lạ. JQuery là một bộ công cụ tiện ích JavaScript làm đơn giản hóa các tác vụ đa dạng với việc viết ít code hơn.

Dưới đây liệt kê một số tính năng tối quan trọng được hỗ trợ bởi jQuery: ✓ Thao tác DOM − jQuery giúp dễ dàng lựa chọn các phần tử DOM để traverse (duyệt) một cách dễ dàng như sử dụng CSS, và chỉnh sửa nội 21 dung của chúng bởi sử dụng phương tiện Selector mã nguồn mở, mà được gọi là Sizzle.