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

Đề tài "Báo cáo đồ án website nông sản" được thực hiện bởi nhóm sinh viên Lê Công Hải và Nguyễn Thọ Hoàng, chuyên ngành Công nghệ thông tin (khóa học 2019–2022), Khoa Khoa học Tự nhiên & Công nghệ, Trường Đại học Tây Nguyên, dưới sự hướng dẫn của ThS. Nguyễn Thị Như vào tháng 12 năm 2020.

Bối cảnh thực tiễn của đề tài xuất phát từ đặc thù Việt Nam là một quốc gia nông nghiệp, trong đó nông sản chiếm tỷ trọng xuất khẩu lớn (tính đến năm 2017). Trước đây, phương thức tiêu thụ nông sản chủ yếu thông qua các kênh truyền thống như siêu thị, công ty xuất nhập khẩu, chợ đầu mối và các đại lý thu mua trước khi đến tay người tiêu dùng cuối cùng. Tuy nhiên, sự phát triển của kinh tế số đã thúc đẩy nhu cầu đưa mọi mặt hàng lên mạng Internet. Cùng với đó, người tiêu dùng ngày càng quan tâm đến nguồn gốc, xuất xứ và tính an toàn của sản phẩm. Việc thiết lập một kênh truyền thông trực tuyến thông qua website được xác định là giải pháp nhằm nâng cao giá trị thương hiệu và hỗ trợ hoạt động kinh doanh nông sản.

Mục tiêu nghiên cứu được xác định cụ thể như sau:

  1. Mục tiêu chung: Nghiên cứu và xây dựng giải pháp đưa các mặt hàng nông sản lên môi trường mạng Internet; tạo dựng nền tảng giới thiệu thông tin tổng quan, chia sẻ kiến thức liên quan và phát triển website bán hàng nông sản tiện lợi cho người dùng.
  2. Mục tiêu cụ thể:
    • Thiết kế website hướng đến phục vụ hoạt động xuất khẩu các mặt hàng nông sản chủ lực (gạo, cam, quýt, bưởi, nho, rau củ...) sang thị trường quốc tế.
    • Xây dựng mô hình website cung cấp thực phẩm sạch và nông sản tươi sạch cho người tiêu dùng.

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

  • Đối tượng nghiên cứu: Khách hàng tại thị trường Việt Nam và các đối tác, công ty xuất nhập khẩu quốc tế.
  • Phạm vi không gian: Khảo sát tại các gian chợ truyền thống để so sánh ưu điểm, nhược điểm giữa phương thức mua sắm trực tiếp và kênh phân phối trực tuyến.
  • Phạm vi thời gian: Đồ án được triển khai và hoàn thành trong đợt đánh giá học phần vào tháng 12 năm 2020.

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

Khung lý thuyết và khái niệm

Tài liệu hệ thống hóa các khái niệm nền tảng về ngành hàng nông sản:

  • Khái niệm: Nông sản được định nghĩa là những sản phẩm hoặc bán thành phẩm của ngành sản xuất hàng hóa thông qua quá trình gây trồng và phát triển của cây trồng.
  • Phân loại nông sản:
    • Sản phẩm nông nghiệp cơ bản: Lúa gạo, lúa mì, hoa quả.
    • Sản phẩm phái sinh: Bánh mì, bơ, dầu ăn, thịt.
    • Sản phẩm chế biến: Bánh kẹo, các sản phẩm từ sữa.

Phương pháp nghiên cứu và phát triển

  • Phương pháp khảo sát và phân tích yêu cầu: Phân tích nhu cầu của các nhóm tác nhân (khách hàng B2B, B2C, người dùng thông thường và quản trị viên hệ thống); đối chiếu phương thức bán lẻ truyền thống tại chợ với thương mại điện tử.
  • Phương pháp phân tích và mô hình hóa hệ thống:
    • Xây dựng sơ đồ Use-case tổng quan phía người dùng nhằm phân rã chức năng hệ thống.
    • Xây dựng sơ đồ Use-case và sơ đồ hoạt động (Activity Diagram) chi tiết cho luồng nghiệp vụ Đăng nhập.
  • Phương pháp quản lý tiến độ (Work Breakdown Structure): Phân chia nhiệm vụ tổng thể thành các gói công việc nhỏ (tasks) có thể hoàn thành trong khoảng thời gian từ nửa ngày đến một ngày; theo dõi tiến độ và trao đổi công việc nhóm qua các kênh trực tuyến (Facebook Messenger) kết hợp gặp trực tiếp.
  • Nguồn dữ liệu: Dữ liệu thông tin sản phẩm nông nghiệp, hình ảnh minh họa, video giới thiệu độ phân giải cao và các biểu mẫu tương tác người dùng.

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

Hệ thống website được thiết kế dựa trên cấu trúc phân tầng giao diện, kết hợp các công nghệ trình bày và xử lý kịch bản phía client:

Thành phần kỹ thuật Chi tiết triển khai theo tài liệu
Cấu trúc trang (Layout) Bố cục chuẩn HTML5 phân định rõ ràng các khối: Header, Menu, Navigation, Content, Footer.
Hiệu ứng đồ họa CSS3 - Thuộc tính transform-style: preserve-3d: Xoay ảnh tin tức 360 độ quanh trục Y khi hover; xoay tròn danh sách 8 thẻ <img> quanh logo trung tâm trong chu kỳ 20 giây.
- Hiệu ứng đổ bóng phản chiếu: -webkit-box-reflect.
- Biến dạng và chuyển vị: transform: skewy(2deg) và transform: translateY(-40px) khi hover khối nội dung người sáng lập.
- Hoạt ảnh màu sắc (Animation): Chuyển đổi màu chữ luân phiên giữa xanh nước biển, rêu và hồng.
Thiết kế thích ứng (Responsive) Tối ưu hóa hiển thị trên màn hình di động: Thanh điều hướng chuyển thành biểu tượng menu rút gọn; các khối nội dung và hình ảnh được xếp dồn thành một hàng dọc.
Kiểm thực dữ liệu (Form Validation) - Form đăng nhập: Kiểm tra trường bắt buộc, mật khẩu có độ dài > 6 ký tự, định dạng email chuẩn.
- Form đăng ký: Kiểm tra đầy đủ thông tin, mật khẩu > 6 ký tự, trường xác nhận mật khẩu trùng khớp, số điện thoại phải ở định dạng số.
Đa phương tiện (Media) Tích hợp trình phát video trực tuyến độ phân giải 4K phục vụ giới thiệu quy trình và phân loại nông sản.

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

Phần thứ nhất: Mở đầu và Chương 1: Tổng quan về cơ sở lý thuyết

Nội dung chương mở đầu tập trung làm rõ lý do lựa chọn đề tài xuất phát từ tiềm năng của ngành nông sản Việt Nam và xu hướng chuyển đổi số trong kinh doanh. Tác giả chỉ ra rằng mặc dù nông sản xuất hiện trên Internet chậm hơn so với các ngành hàng khác, nhu cầu xây dựng website chuyên biệt đã xuất hiện từ lâu. Chương 1 cung cấp định nghĩa chuẩn xác về nông sản và phân loại thành ba nhóm hàng hóa: cơ bản (lúa gạo, trái cây), phái sinh (bơ, dầu ăn) và chế biến (bánh kẹo, sữa), tạo tiền đề phân loại danh mục sản phẩm trên website.

Chương 2: Phân tích và thiết kế hệ thống

Chương 2 trình bày chi tiết quá trình xác định yêu cầu và mô hình hóa hệ thống:

  • Yêu cầu đối với khách hàng: Phục vụ cả hai mô hình B2B (doanh nghiệp xuất nhập khẩu quốc tế tìm kiếm đối tác) và B2C (bán lẻ nông sản cao cấp, ngũ cốc, hạt dinh dưỡng).
  • Yêu cầu đối với người dùng: Giao diện trực quan, hỗ trợ tìm kiếm sản phẩm nhanh chóng, cung cấp không gian tương tác và học hỏi kiến thức nông sản.
  • Yêu cầu đối với quản trị viên: Hệ thống đảm bảo tốc độ xử lý nhanh, bảo mật thông tin tài khoản, giao diện dễ bảo trì và cập nhật nội dung tin tức, quảng cáo, sản phẩm.
  • Đặc tả Use-case: Mô tả chi tiết Use-case Đăng nhập gồm tác nhân người dùng, điều kiện khởi tạo, luồng sự kiện kiểm tra tính hợp lệ của tài khoản (thông báo lỗi khi nhập sai, thông báo thành công khi nhập đúng), điều kiện sau và điều kiện thoát.
  • Thiết kế chi tiết các màn hình: Thiết lập layout và hành vi tương tác cho Trang chủ, Trang giới thiệu (tích hợp video 4K và vòng xoay 3D), Trang sản phẩm (thông tin giá, xuất xứ, tình trạng, quy cách đóng gói), Trang góp ý, Trang đăng nhập, Trang đăng ký và Footer (thông tin liên hệ, ảnh động GIF, phương thức thanh toán).
+-----------------------------------------------------------------------+
| Sơ đồ hoạt động chức năng Đăng nhập                                  |
| [Người dùng nhập SĐT/Email & Mật khẩu] -> [Kiểm tra thông tin]        |
|                                                  |                    |
|          +---------------------------------------+                    |
|          | (Sai)                                 | (Đúng)             |
|          v                                       v                    |
|   [Báo đăng nhập thất bại]               [Đăng nhập thành công]       |
+-----------------------------------------------------------------------+

Chương 3: Xây dựng website

Chương này mô tả kế hoạch triển khai dự án trong 4 tuần cùng kết quả dựng giao diện thực tế:

  • Kế hoạch 4 tuần:
    • Tuần 1: Xây dựng ý tưởng thiết kế, thu thập nội dung và hình ảnh tư liệu.
    • Tuần 2: Xác định yêu cầu tính năng, tiêu chuẩn mỹ thuật và tiếp nhận dữ liệu thiết kế.
    • Tuần 3: Phác thảo cấu trúc giao diện (wireframe), thiết kế mẫu và tiến hành lập trình giao diện.
    • Tuần 4: Hoàn thiện toàn bộ các trang giao diện website.
  • Hiện thực hóa giao diện: Trình bày hình ảnh và mô tả cấu trúc của các trang: Trang chủ (kèm phiên bản responsive đa cấp), Trang giới thiệu, Trang danh mục sản phẩm, Trang thu thập ý kiến đóng góp, Trang đăng nhập, Trang đăng ký (bao gồm trạng thái hiển thị thông báo lỗi khi nhập sai quy cách) và Trang Footer.

Chương 4: Kết quả nghiên cứu đề tài

Chương cuối cùng tổng kết các hoạt động kiểm thử kỹ thuật và kết quả hoạt động nhóm:

  • Kiểm thử website:
    • Kiểm thử liên kết (Broken links): Rà soát toàn bộ các đường dẫn nội bộ và liên kết ngoài, đảm bảo không có liên kết hỏng.
    • Kiểm thử biểu mẫu (Web forms): Xác minh khả năng nhận diện dữ liệu và các thông báo lỗi của form đăng ký, đăng nhập và góp ý.
    • Kiểm thử HTML và CSS: Kiểm tra tính hợp lệ của mã nguồn, đảm bảo các công cụ tìm kiếm có thể thu thập dữ liệu thuận lợi.
    • Kiểm tra nội dung: Rà soát tính chính xác của thông tin sản phẩm và tin tức.
    • Kiểm tra độ tương thích trình duyệt: Đánh giá khả năng hiển thị đồng nhất trên trình duyệt máy tính và trình duyệt thiết bị di động.
  • Kết quả làm việc nhóm: Nhóm đã vận dụng kỹ năng lắng nghe, tôn trọng ý kiến phản biện, phân chia khối lượng công việc đồng đều và duy trì tiến độ thực hiện đồ án.

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

Kết quả chính đạt được

  • Xây dựng hoàn chỉnh bộ giao diện website bán nông sản với đầy đủ các trang chức năng: Trang chủ, Giới thiệu, Sản phẩm, Góp ý, Đăng nhập, Đăng ký và Footer.
  • Ứng dụng thành công các kỹ thuật giao diện CSS3 hiện đại (không gian 3D, hiệu ứng phản chiếu, chuyển động animation, hiệu ứng skew và translateY).
  • Triển khai thành công tính năng responsive, đảm bảo bố cục tự động căn chỉnh tối ưu khi chuyển từ màn hình máy tính sang màn hình thiết bị di động.
  • Thiết lập cơ chế kiểm thực dữ liệu đầu vào (validation) trên các biểu mẫu người dùng, ngăn ngừa việc để trống trường thông tin hoặc nhập sai định dạng email, mật khẩu, số điện thoại.
  • Hoàn thành quy trình kiểm thử hệ thống bao gồm: kiểm tra liên kết, kiểm thử form, kiểm tra mã nguồn HTML/CSS và kiểm tra tương thích trình duyệt di động.

Đóng góp của đề tài

  • Đề xuất một mô hình giao diện trực quan cho ngành hàng nông sản, kết hợp giữa việc bán lẻ sản phẩm tươi sạch (B2C) và giới thiệu thông tin xuất khẩu cho các đối tác quốc tế (B2B).
  • Cung cấp tài liệu tham khảo chi tiết về quy trình phân tích Use-case, phân chia công việc theo phương pháp WBS và triển khai kỹ thuật thiết kế web cho sinh viên ngành Công nghệ thông tin trong học phần Website cơ bản.

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

  • Hạn chế:
    • Theo tự nhận định của tác giả trong lời cảm ơn, kiến thức và kinh nghiệm lập trình của sinh viên còn hạn chế.
    • Phạm vi đề tài tập trung chủ yếu vào việc xây dựng, thiết kế giao diện tĩnh và xử lý kịch bản client-side; chưa hoàn thiện hệ thống cơ sở dữ liệu động và các chức năng xử lý giao dịch thanh toán backend phức tạp.
    • Kỹ năng thuyết trình và báo cáo của tác giả còn bộc lộ điểm yếu trong quá trình bảo vệ đồ án.
  • Hướng phát triển:
    • Tích hợp hệ quản trị cơ sở dữ liệu (CSDL) hoàn chỉnh để quản lý động danh mục sản phẩm, đơn hàng và tài khoản người dùng.
    • Mở rộng các tính năng hỗ trợ giao dịch thương mại điện tử chuyên sâu như cổng thanh toán trực tuyến, theo dõi hành trình vận chuyển nông sản và đa ngôn ngữ phục vụ khách hàng B2B quốc tế.

Giá trị tham khảo

Tài liệu là nguồn tham khảo hữu ích cho:

  • Sinh viên ngành Công nghệ thông tin, Kỹ thuật phần mềm: Tham khảo cách trình bày một báo cáo đồ án môn học chuẩn quy cách, từ phân tích Use-case, vẽ sơ đồ hoạt động đến thiết kế giao diện HTML5/CSS3.
  • Người học lập trình Front-end cơ bản: Tham khảo các đoạn mã thuộc tính CSS3 nâng cao (transform-style: preserve-3d, -webkit-box-reflect, skewy, translateY) và quy tắc viết hàm kiểm tra dữ liệu biểu mẫu (form validation).
  • Nhóm sinh viên thực hiện đồ án: Tham khảo mô hình phân chia tiến độ 4 tuần và danh mục kiểm thử website (testing checklist) ở giai đoạn nghiệm thu sản phẩm.

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

Đề tài này do ai thực hiện và thuộc đơn vị đào tạo nào?

Đồ án do nhóm sinh viên Lê Công Hải và Nguyễn Thọ Hoàng, chuyên ngành Công nghệ thông tin (khóa 2019–2022) thuộc Khoa Khoa học Tự nhiên & Công nghệ, Trường Đại học Tây Nguyên thực hiện dưới sự hướng dẫn của ThS. Nguyễn Thị Như vào tháng 12 năm 2020.

Website nông sản này phục vụ những nhóm đối tượng người dùng nào?

Hệ thống được thiết kế hướng tới ba nhóm đối tượng: khách hàng mua sắm cá nhân (mô hình B2C tìm kiếm nông sản tươi sạch, ngũ cốc, hạt dinh dưỡng), các công ty xuất nhập khẩu quốc tế (mô hình B2B tìm nguồn hàng nông sản xuất khẩu) và người quản trị hệ thống (quản lý tin tức, sản phẩm, bảo mật).

Nhóm tác giả đã sử dụng những hiệu ứng CSS3 cụ thể nào để tạo chuyển động trên giao diện?

Nhóm đã sử dụng:

  • Thuộc tính transform-style: preserve-3d để tạo hiệu ứng quay 360 độ quanh trục Y cho hình ảnh tin tức và vòng xoay 3D cho 8 thẻ hình ảnh trái cây trong 20 giây.
  • Thuộc tính -webkit-box-reflect tạo bóng phản chiếu.
  • Thuộc tính transform: skewy(2deg) tạo độ nghiêng và transform: translateY(-40px) tạo chuyển động dịch chuyển khối nội dung khi hover.
  • Hoạt ảnh (animation) đổi màu chữ tiêu đề qua lại giữa màu xanh nước biển, rêu và hồng.

Các biểu mẫu Đăng ký và Đăng nhập yêu cầu những quy tắc kiểm thực dữ liệu nào?

Quy tắc kiểm thực quy định: không được để trống thông tin; mật khẩu phải có độ dài lớn hơn 6 ký tự (password > 6); địa chỉ email phải đúng cấu trúc định dạng; trường nhập lại mật khẩu tại form đăng ký phải trùng khớp hoàn toàn với mật khẩu đã nhập; số điện thoại bắt buộc phải là ký tự số.

Quá trình kiểm thử website ở Chương 4 bao gồm những nội dung gì?

Hoạt động kiểm thử bao gồm 5 nội dung chính: kiểm thử liên kết hỏng (broken links), kiểm thử tính hợp lệ của biểu mẫu (web form validation), kiểm thử chuẩn mã nguồn HTML/CSS hỗ trợ thu thập dữ liệu tìm kiếm, kiểm tra độ chính xác của nội dung hiển thị và kiểm tra tính tương thích trên các trình duyệt máy tính cũng như trình duyệt di động.

Kết luận

Báo cáo đồ án của sinh viên Lê Công Hải và Nguyễn Thọ Hoàng tại Trường Đại học Tây Nguyên đã giải quyết bài toán thiết kế website thương mại điện tử cho ngành nông sản ở mức độ đồ án môn học cơ bản. Tài liệu thể hiện rõ quy trình từ khảo sát bối cảnh xuất khẩu nông sản, phân tích yêu cầu nghiệp vụ B2B/B2C, xây dựng giao diện tương tác với HTML5/CSS3 đến kiểm thử đa trình duyệt. Đây là tài liệu mang tính thực hành rõ nét, phản ánh đầy đủ năng lực ứng dụng kỹ thuật thiết kế web đáp ứng và kỹ năng quản lý dự án nhóm của sinh viên Công nghệ thông tin.