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

Trong bối cảnh công nghệ thông tin phát triển mạnh mẽ và trở thành động lực thúc đẩy tăng trưởng kinh tế toàn cầu, thương mại điện tử (TMĐT) đã trở thành một lĩnh vực có tính thời sự cao tại Việt Nam. Nhiều cơ quan, doanh nghiệp và cá nhân đã và đang đẩy mạnh ứng dụng công nghệ thông tin vào hoạt động sản xuất, kinh doanh nhằm tối ưu hóa quy trình bán hàng và mở rộng thị trường. Nhằm đóng góp vào việc số hóa quy trình kinh doanh thực tế, đề tài "Xây dựng và thiết kế website thương mại điện tử cho cửa hàng giày sử dụng công nghệ Reactjs" được tác giả Nguyễn Văn Thắng (sinh viên ngành Công nghệ thông tin, Trường Đại học Kinh Bắc) thực hiện dưới sự hướng dẫn của ThS. Vũ Ngọc Phan tại đơn vị thực tập là Viện Khoa học Đào tạo Phát triển Nhân lực (ISTDH).

Báo cáo xác định các mục tiêu và nhiệm vụ nghiên cứu cụ thể như sau:

  1. Ứng dụng các kiến thức đã học trong chương trình đào tạo để xây dựng một sản phẩm phần mềm hoàn chỉnh phục vụ thực tế.
  2. Nghiên cứu tổng quan về thương mại điện tử và nghiệp vụ quản lý bán hàng của cửa hàng giày; từ đó tiến hành phân tích, thiết kế hệ thống và xây dựng cơ sở dữ liệu.
  3. Nghiên cứu và sử dụng các ngôn ngữ, công nghệ lập trình web hiện đại bao gồm HTML, CSS, SCSS, JavaScript, kiến trúc API và thư viện ReactJS để xây dựng giao diện cũng như các module chức năng.
  4. Đạt được các kỹ năng lập trình hướng đối tượng, lập trình web, lập trình cơ sở dữ liệu qua API và hoàn thành website bán giày đáp ứng các yêu cầu nghiệp vụ cơ bản.

Đối tượng và phạm vi nghiên cứu của đề tài:

  • Đối tượng nghiên cứu: Các công nghệ và ngôn ngữ lập trình Front-end/API bao gồm JavaScript, CSS, HTML, SCSS, API và thư viện ReactJS; quy trình phân tích thiết kế hệ thống và quản trị bán hàng trực tuyến.
  • Phạm vi nghiên cứu: Khảo sát thực trạng ứng dụng website thương mại điện tử tại Việt Nam, phân tích mô hình bán hàng thực tế kết hợp trực tiếp tại cửa hàng và trực tuyến, đồng thời đối chiếu với hoạt động kinh doanh, chuyển giao công nghệ tại cơ sở thực tập là Viện Khoa học Đào tạo Phát triển Nhân lực trong năm 2023.

Cơ sở lý thuyết và phương pháp nghiên cứu

Khung lý thuyết và công nghệ nền tảng

Tác giả hệ thống hóa các kiến thức nền tảng trong phát triển ứng dụng web bao gồm:

  • HTML (HyperText Markup Language): Ngôn ngữ đánh dấu siêu văn bản định hình cấu trúc trang web thông qua các cặp thẻ (<tag></tag>), tạo nên cấu trúc phân cấp (cây thư mục) chứa các khối nội dung, heading, paragraph, liên kết.
  • CSS (Cascading Style Sheets) và SCSS (Sassy CSS): Chuẩn định dạng được duy trì bởi World Wide Web Consortium (W3C), giúp tách biệt nội dung và giao diện. SCSS hoạt động như một chương trình tiền xử lý (CSS preprocessor) với cú pháp mở rộng từ SASS/Ruby, bổ sung các tính năng lập trình như cú pháp lồng nhau (nesting), khai báo biến (variables) và tái sử dụng mã thông qua mixin.
  • JavaScript (JS): Ngôn ngữ kịch bản Client-side và Server-side (Node.js) cho phép tạo tương tác động qua Document Object Model (DOM), xử lý logic nhập liệu và điều khiển hiển thị.
  • ReactJS: Thư viện JavaScript mã nguồn mở do Facebook phát triển (ra mắt năm 2013), hỗ trợ render dữ liệu linh hoạt trên cả tầng Server và Client, xây dựng giao diện người dùng (UI) dựa trên các component có khả năng tái sử dụng cao, thân thiện với SEO và hỗ trợ debug hiệu quả qua Chrome Extension.
  • Kiến trúc Web API & RESTful: Giao thức kết nối, trao đổi dữ liệu qua HTTP/HTTPS với các phương thức chuẩn (GET, POST, PUT, DELETE), định dạng dữ liệu trả về (thường là XML/JSON), kiểm soát truy cập bằng API Key và tích hợp các thành phần mô hình MVC (routing, controller, action result, filter, dependency injection).
Công nghệ / Khái niệm Vai trò trong hệ thống Đặc điểm kỹ thuật chính được trình bày
HTML Khung cấu trúc trang Ngôn ngữ đánh dấu siêu văn bản, tổ chức thẻ mở/đóng theo dạng cây phần tử
CSS / SCSS Định dạng giao diện Tách biệt mã nguồn hiển thị, hỗ trợ biến, cú pháp lồng nhau và mixin
JavaScript Xử lý logic và tương tác Tương tác DOM, kiểm tra dữ liệu đầu vào, tạo hiệu ứng động
ReactJS Thư viện xây dựng UI Tái sử dụng Component, tối ưu render client/server, quản lý luồng trạng thái
Web API / REST Giao tiếp và trao đổi dữ liệu Hỗ trợ chuẩn RESTful (GET, POST, PUT, DELETE), xác thực API Key, kiến trúc MVC

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

Đề tài sử dụng kết hợp 4 phương pháp nghiên cứu chính:

  1. Phương pháp nghiên cứu lý thuyết: Thu thập, tổng hợp tài liệu chuyên ngành về HTML, CSS, SCSS, JavaScript, ReactJS và kiến trúc API.
  2. Phương pháp tổng hợp: Tổng hợp các yêu cầu nghiệp vụ thực tế và định hướng từ phía cơ sở thực tập để định hình các phân hệ chức năng cho phần mềm.
  3. Phương pháp thực nghiệm: Nghiên cứu và khảo sát các sàn thương mại điện tử thực tế đang hoạt động (tiêu biểu như Shopee), xác định các luồng nghiệp vụ chuẩn về mua bán, quản lý giỏ hàng, đặt hàng để tiến hành lập trình và chạy thử nghiệm hệ thống.
  4. Phương pháp chuyên gia: Tiếp nhận ý kiến đóng góp, nhận xét và hướng dẫn học thuật từ cán bộ hướng dẫn (ThS. Vũ Ngọc Phan) để điều chỉnh mô hình dữ liệu và hoàn thiện báo cáo.

Thiết kế và triển khai hệ thống

Kiến trúc phân cấp chức năng và luồng dữ liệu

Hệ thống được thiết kế phân định rõ hai nhóm tác nhân chính:

  • Admin (Quản trị viên): Chịu trách nhiệm duy trì, điều hành toàn bộ phần mềm; thực hiện các thao tác thêm, sửa, xóa dữ liệu sản phẩm; tiếp nhận, quản lý và duyệt các đơn đặt hàng từ khách hàng; cập nhật thông tin tin tức, chương trình khuyến mãi và phản hồi khách hàng.
  • User (Khách hàng): Tìm kiếm, xem chi tiết danh mục hàng hóa; thêm sản phẩm vào giỏ hàng cá nhân; tiến hành điền thông tin đặt mua sản phẩm và gửi đơn hàng lên hệ thống.

Hệ thống phân tích chi tiết qua các sơ đồ nghiệp vụ:

  • Sơ đồ mức ngữ cảnh (Context Diagram) mô tả luồng tương tác giữa Người dùng, Quản trị viên và Website bán giày.
  • Sơ đồ luồng dữ liệu mức đỉnh (DFD mức 0) và sơ đồ luồng dữ liệu mức dưới đỉnh cho các phân hệ: Quản lý mua hàng phía Admin, Quản lý mua hàng phía User và Quản lý bán hàng.

Thiết kế cơ sở dữ liệu và danh mục sản phẩm

Cơ sở dữ liệu được tổ chức thông qua các bảng dữ liệu API phục vụ hiển thị và xử lý nghiệp vụ, bao gồm:

  • Dữ liệu sản phẩm theo danh mục: Bảng Giày thể thao, Bảng Giày lười, Bảng Giày công sở, Bảng Giày loafer, Bảng Giày thể thao da, Bảng Phụ kiện.
  • Dữ liệu người dùng và đơn hàng: Bảng Tài khoản Admin (quản lý đăng nhập/phân quyền), Bảng Giỏ hàng (lưu vết sản phẩm, số lượng, đơn giá, tổng tiền của khách hàng).

Giao diện và các tuyến đường dẫn (Routing)

  • Phân hệ Client (Người dùng):
    • Trang chủ: Hiển thị thanh menu ngang liên kết tới các danh mục chính (Giày thể thao, Giày lười, Giày công sở, Giày loafer, Giày thể thao da, Phụ kiện); khu vực trung tâm hiển thị các sản phẩm được thống kê, xếp hạng theo độ phổ biến.
    • Trang chi tiết sản phẩm: Hiển thị hình ảnh, thông số, giá bán và nút chức năng thêm vào giỏ hàng.
    • Trang giỏ hàng: Cho phép kiểm tra lại các sản phẩm đã chọn, cập nhật số lượng, xem tổng tiền thanh toán và nhập biểu mẫu thông tin nhận hàng để đặt đơn.
  • Phân hệ Quản trị (Admin):
    • Tuyến đường dẫn truy cập trang quản trị được cấu hình cụ thể: http://localhost:3000/giaythethaoAD.
    • Giao diện Đăng nhập / Đăng ký Admin: Kiểm thực Username và Password của ban quản trị trước khi cấp quyền truy cập.
    • Giao diện Quản trị hàng hóa và đơn hàng: Cung cấp bảng điều khiển để nhập, thêm, sửa, xóa danh mục sản phẩm; xem danh sách đơn hàng mới từ giỏ hàng gửi về, kiểm tra thông tin khách hàng để tiến hành duyệt đơn và đóng gói giao hàng.

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

Mở đầu và tổng quan cơ sở thực tập

Phần mở đầu nêu rõ tính cấp thiết của đề tài, các mục tiêu, đối tượng, phạm vi và phương pháp nghiên cứu. Kèm theo đó là thông tin tổng quan về đơn vị thực tập:

  • Tên đơn vị: Viện Khoa học Đào tạo Phát triển Nhân lực (Tên giao dịch quốc tế: Institute of Science for Training and Development Human Resources – Tên viết tắt: ISTDH / IFL-ISTDH).
  • Pháp lý: Thành lập theo Quyết định số 30/QĐ-TWH ngày 10/12/2014 của Hội Khoa học phát triển nhân lực nhân tài Việt Nam; Giấy chứng nhận đăng ký hoạt động KH&CN số A-1247 ngày 22/01/2015 do Bộ Khoa học và Công nghệ cấp.
  • Địa chỉ: Tòa nhà ISTDH, Số 5/139, Đ. Bắc Từ Liêm, TP. Hà Nội.
  • Chức năng và chiến lược: Đào tạo ngoại ngữ, tin học, kỹ năng nghề; nghiên cứu khoa học kỹ thuật và công nghệ; liên kết đào tạo và chuyển giao công nghệ với các tổ chức trong và ngoài nước.
  • Nội dung công việc thực tập: Sinh viên tiếp nhận nhiệm vụ nghiên cứu lập trình hướng đối tượng, lập trình web, lập trình cơ sở dữ liệu qua API và hoàn thiện website bán giày.

Chương 1: Cơ sở lí thuyết

Chương 1 đi sâu vào các khái niệm công nghệ cốt lõi:

  • Trình bày chi tiết cú pháp thẻ HTML, cấu trúc file .html/.htm và cơ chế phân tích cú pháp của trình duyệt web.
  • Phân tích cơ chế Cascading của CSS trong việc chuẩn hóa giao diện; so sánh chi tiết giữa cú pháp SASS (dùng thụt đầu dòng, file .sass) và SCSS (cú pháp mở rộng dựa trên CSS/Ruby, file .scss), nêu bật các ưu điểm về biến số, lồng khối lệnh và mixin.
  • Khái quát ngôn ngữ JavaScript, vai trò điều khiển DOM, các thư viện/framework phổ biến (ReactJS, Node.js, Angular) và khả năng ứng dụng mở rộng (như xử lý biểu mẫu trong Adobe PDF).
  • Trình bày kiến trúc component của ReactJS, ưu điểm về khả năng tái sử dụng thành phần giao diện, hỗ trợ SEO thông qua cơ chế render linh hoạt và công cụ debug trên Chrome.
  • Tổng quan về Web API, cấu trúc chuẩn RESTful, các phương thức truyền nhận HTTP (GET, POST, PUT, DELETE), cơ chế xác thực thông qua API Key và khả năng tích hợp mô hình MVC.

Chương 2: Thực trạng nghiên cứu

Chương 2 tập trung giải quyết bài toán khảo sát và thiết kế hệ thống phần mềm:

  • Khảo sát quy trình nghiệp vụ:
    • Tại cửa hàng: Khách xem mẫu trực tiếp $\rightarrow$ Nhân viên giới thiệu $\rightarrow$ Khách chọn và chốt số lượng $\rightarrow$ Nhân viên xuất hóa đơn thanh toán $\rightarrow$ Khách trả tiền và nhận sản phẩm.
    • Trên website: Khách truy cập web xem danh mục $\rightarrow$ Chọn mua và điền biểu mẫu giao hàng $\rightarrow$ Hệ thống ghi nhận đơn $\rightarrow$ Nhân viên lập hóa đơn, đóng gói vận chuyển $\rightarrow$ Khách thanh toán qua thẻ ngân hàng hoặc khi nhận hàng (COD).
  • Mục tiêu hệ thống đặt ra: Tối ưu hóa việc tìm kiếm sản phẩm từ xa; cung cấp cơ chế hỗ trợ Influencer tham gia tiếp thị sản phẩm qua các kênh mạng xã hội; tự động hóa tính toán tổng chi phí trong giỏ hàng; hỗ trợ công cụ quản lý toàn diện cho Admin.
  • Mô hình hóa hệ thống: Xây dựng sơ đồ phân cấp chức năng, sơ đồ mức ngữ cảnh, sơ đồ DFD mức đỉnh và mức dưới đỉnh cho các quy trình bán hàng/mua hàng.
  • Hiện thực hóa CSDL và giao diện: Xây dựng cấu trúc các bảng API cho 6 nhóm mặt hàng (giày thể thao, giày lười, công sở, loafer, thể thao da, phụ kiện), bảng tài khoản admin và bảng giỏ hàng. Thiết kế chi tiết hệ thống màn hình người dùng và bảng điều khiển quản trị http://localhost:3000/giaythethaoAD.

Chương 3: Kết quả nghiên cứu

Chương 3 tổng kết toàn bộ kết quả thu được sau quá trình thực tập và triển khai dự án:

  • Về mặt công nghệ: Sinh viên nắm vững quy trình thiết kế web động, phương pháp tổ chức dữ liệu qua API và cách thức vận hành các dịch vụ Web trên môi trường Internet.
  • Về mặt phần mềm: Xây dựng thành công ứng dụng website với giao diện thân thiện, hoàn thiện các chức năng: giới thiệu mặt hàng, tìm kiếm và tra cứu sản phẩm, tạo và quản lý giỏ hàng, gửi đơn đặt hàng, tiếp nhận và xử lý đơn hàng phía quản trị, cập nhật thông tin dữ liệu (sản phẩm, khách hàng, đơn hàng) và thống kê phân loại mặt hàng.
  • Đề xuất giải pháp mở rộng: Tích hợp cổng thanh toán trực tuyến qua thẻ ATM nội địa/ngân hàng và mở rộng hệ thống cho phép doanh nghiệp nhập hàng trực tiếp từ nhà cung cấp qua môi trường mạng.

Kế hoạch và tiến độ thực tập thực tế

Theo nhật ký thực tập được ghi nhận từ ngày 06/02/2023 đến ngày 28/03/2023 (tổng cộng 7 tuần làm việc), tiến độ triển khai được thực hiện tuần tự như sau:

Tuần Thời gian Nội dung công việc thực hiện Kết quả ghi nhận
Tuần 1 06/02/2023 – 12/02/2023 Ôn tập các kiến thức lập trình web căn bản (HTML, CSS, JavaScript) Hoàn thành
Tuần 2 13/02/2023 – 19/02/2023 Tìm hiểu thư viện ReactJS, kiến trúc Web API; tiến hành cài đặt môi trường ReactJS Hoàn thành
Tuần 3 20/02/2023 – 26/02/2023 Làm bài tập mẫu ứng dụng ReactJS; thực hành gọi dữ liệu từ API (Call API) Hoàn thành
Tuần 4 27/02/2023 – 05/03/2023 Thực hành thiết kế giao diện web với ReactJS; khảo sát và phân tích thiết kế hệ thống Hoàn thành
Tuần 5 06/03/2023 – 12/03/2023 Xây dựng cơ sở dữ liệu API; lập trình mã nguồn giao diện website Hoàn thành
Tuần 6 13/03/2023 – 19/03/2023 Lập trình các chức năng tương tác của website; hoàn thành mã nguồn dự án Hoàn thành
Tuần 7 20/03/2023 – 28/03/2023 Viết, chỉnh sửa và hoàn thiện toàn bộ báo cáo thực tập tốt nghiệp Hoàn thành

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

Kết quả đạt được

Hệ thống đã hiện thực hóa đầy đủ các luồng chức năng phục vụ mô hình kinh doanh bán lẻ giày dép trực tuyến:

  • Thiết lập phân hệ người dùng hoàn chỉnh với các trang hiển thị theo từng phân loại sản phẩm chuyên biệt: Giày thể thao, Giày lười, Giày công sở, Giày loafer, Giày thể thao da và Phụ kiện.
  • Chức năng chi tiết sản phẩm và giỏ hàng tự động hóa việc tính toán tổng chi phí đơn hàng dựa trên số lượng và đơn giá sản phẩm.
  • Thiết lập hệ thống quản trị nội bộ tại địa chỉ cục bộ (http://localhost:3000/giaythethaoAD) với cơ chế xác thực tài khoản quản trị viên, cho phép thêm, xóa, sửa thông tin sản phẩm và duyệt đơn hàng của khách.

Đóng góp thực tiễn

  • Báo cáo cung cấp tài liệu mô tả chi tiết quy trình xây dựng website thương mại điện tử quy mô vừa và nhỏ từ giai đoạn phân tích nghiệp vụ, thiết kế sơ đồ luồng dữ liệu (DFD), thiết kế cơ sở dữ liệu đến triển khai giao diện với ReactJS.
  • Đưa ra giải pháp kết nối giữa việc bán hàng truyền thống tại cửa hàng và kinh doanh trực tuyến, đồng thời định hướng tích hợp mô hình tiếp thị liên kết (Influencer marketing) nhằm hỗ trợ quảng bá sản phẩm thông qua mạng xã hội.

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

Hạn chế

  • Thời gian thực hiện đề tài có hạn (7 tuần thực tập) nên hệ thống chủ yếu tập trung vào các tính năng nền tảng của một website thương mại điện tử cơ bản.
  • Chưa tích hợp module thanh toán trực tuyến tự động qua cổng thẻ ngân hàng/ATM, việc thanh toán vẫn phụ thuộc vào phương thức nhận hàng trả tiền hoặc chuyển khoản thủ công.
  • Chưa có phân hệ xử lý nghiệp vụ nhập hàng và kết nối trực tiếp với các đơn vị cung cấp nguồn hàng.

Hướng phát triển tiếp theo

Báo cáo đề xuất 2 giải pháp chính để hoàn thiện hệ thống trong giai đoạn tiếp theo:

  1. Xây dựng và tích hợp module cho phép khách hàng thực hiện thanh toán trực tuyến trực tiếp qua thẻ ATM/tài khoản ngân hàng ngay trên giao diện web.
  2. Mở rộng và phát triển phân hệ quản lý chuỗi cung ứng, cho phép doanh nghiệp thực hiện mua hàng, nhập hàng trực tiếp từ các đối tác cung cấp thông qua mạng Internet.

Giá trị tham khảo

Báo cáo thực tập tốt nghiệp này mang lại giá trị tham khảo thiết thực cho:

  • Sinh viên ngành Công nghệ thông tin, Kỹ thuật phần mềm: Là tài liệu tham khảo trực quan về cấu trúc một báo cáo thực tập tốt nghiệp chuẩn mực, từ cách trình bày cơ sở lý thuyết (HTML, CSS/SCSS, ReactJS, API) đến các bước vẽ sơ đồ phân cấp chức năng, DFD và tổ chức giao diện Front-end.
  • Lập trình viên phát triển web mới bắt đầu: Tham khảo cách phân chia danh mục cơ sở dữ liệu sản phẩm, cách tổ chức module giỏ hàng và cách xây dựng trang quản trị Admin cơ bản với ReactJS.
  • Tài liệu tham khảo chuyên ngành được sử dụng trong khóa luận:
    1. Samer Buna (2019), React Succinctly.
    2. Anthony Molinaro (2005), SQL Cookbook.
    3. Jennifer Niederst Robbins (2012), Learning Web Design.
    4. Nguồn thư viện trực tuyến: react-icons.io/react-icons.

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

1. Đề tài được thực hiện bởi ai, thuộc đơn vị đào tạo và cơ sở thực tập nào?

Đề tài do sinh viên Nguyễn Văn Thắng (MSV: 08D4800084, Lớp: 08D.CNTT02), Khoa Công nghệ thông tin – Điện tử truyền thông, Trường Đại học Kinh Bắc thực hiện năm 2023 dưới sự hướng dẫn của ThS. Vũ Ngọc Phan. Cơ quan thực tập là Viện Khoa học Đào tạo Phát triển Nhân lực (ISTDH).

2. Hệ thống website quản lý những danh mục sản phẩm giày dép cụ thể nào?

Hệ thống quản lý và phân loại dữ liệu thành 6 danh mục sản phẩm chính gồm: Giày thể thao, Giày lười, Giày công sở, Giày loafer, Giày thể thao da và Phụ kiện.

3. Phân hệ quản trị (Admin) được truy cập qua đường dẫn nào và có những chức năng gì?

Quản trị viên truy cập trang quản trị qua đường dẫn http://localhost:3000/giaythethaoAD. Sau khi đăng nhập bằng Username và Password quản trị, Admin có quyền nhập, thêm, sửa, xóa dữ liệu hàng hóa, xem danh sách thông tin khách hàng và thực hiện duyệt đơn hàng chuyển từ giỏ hàng sang để tiến hành đóng hàng.

4. Tác giả đã sử dụng những công nghệ và thư viện Front-end nào để xây dựng giao diện?

Tác giả sử dụng HTML để định hình cấu trúc trang, SCSS/CSS để thiết kế giao diện (tận dụng tính năng biến, lồng nhau, mixin), JavaScript xử lý logic tương tác qua DOM, thư viện ReactJS để xây dựng các component hiển thị/quản trị và gói thư viện biểu tượng react-icons.

5. Những tính năng nào được tác giả đề xuất nâng cấp trong tương lai?

Tác giả đề xuất 2 tính năng nâng cấp: tích hợp cổng thanh toán trực tiếp qua thẻ ATM ngân hàng cho khách hàng và xây dựng phân hệ cho phép công ty thực hiện giao dịch mua hàng, nhập hàng trực tiếp qua mạng.

Kết luận

Báo cáo thực tập tốt nghiệp của sinh viên Nguyễn Văn Thắng đã hệ thống hóa đầy đủ cơ sở lý thuyết về phát triển ứng dụng web hiện đại và quy trình nghiệp vụ thương mại điện tử cho cửa hàng giày. Thông qua quá trình phân tích thiết kế hệ thống và xây dựng cơ sở dữ liệu qua API, tác giả đã triển khai thành công một website hoàn chỉnh với giao diện ReactJS thân thiện cho cả khách hàng và quản trị viên. Đề tài phản ánh đúng khối lượng công việc theo tiến độ 7 tuần thực tập tại Viện Khoa học Đào tạo Phát triển Nhân lực, đồng thời đề xuất định hướng mở rộng thiết thực về thanh toán trực tuyến và quản lý nhập hàng.