Đối với bất kỳ dự án nào, việc quan trọng đầu tiên là chuẩn bị một codebase chất lượng để việc thực hiện dự án đạt chất lượng tốt nhất. Một codebase tốt không chỉ giúp bạn dễ dàng hơn trong việc xây ứng dụng, mà còn hỗ trợ trong vấn đề phát triển các tính năng mới và khả năng bảo trì, bảo dưỡng (maintanability) ứng dụng trong tương lai.

Trong dự án này, ta sẽ sử dụng Next.js kết hợp với Redux để xây dựng một trang web e-commerce thực tế. Next.js là một framework được tạo ra dựa trên nền tảng React.js của Facebook, có rất nhiều tính năng hữu ích giúp thời giản xây dựng một trang web với React được rút ngắn rất nhiều. Bạn có thể tạo một dự án mới với Next.js tại đây.

Ngoài ra, chúng ta cũng sẽ sử dụng các UI Library như Bootstrap hoặc Semantic để đẩy nhanh thời gian tạo ra phần giao diện cho trang web. Các UI Library là tập hợp các UI component được thiết kế sẵn để tạo nên phần hình thức cho các trang web. Bằng việc sử dụng một UI Library, ta có thể tạo ra các nút bấm (Button), Danh sách (List), Pop-up hiển thị hoặc Modal, Form một cách nhanh chóng. Tìm hiểu thềm về Bootstrap (hoặc React Bootstrap) và Semantic UI (hoặc React Semantic UI).

Đối với các dự án dựa trên React.js, Redux là một công cụ mạnh mẽ để quản lý hiệu quả application state (dữ liệu hoạt động) của trang web. Redux có thể được sử dụng để lưu trữ các dữ liệu cần thiết để một website hoạt động hiệu quả. Đối với một website e-commerce, các dữ liệu cần được lưu trữ có thể kể đến như “Giỏ hàng”, “Thông tin sản phẩm”, “Thông tin khách hàng”, v/v. Tìm hiểu thêm về Redux.

Sau khi đã tạo được codebase và sẵn sàng bắt tay vào xây dựng trang web, còn một bước quan trọng cần phải thực hiện, đó là đưa vào codebase công cụ Version Control để quản lý codebase của mình. Tại WCS, các dự án sẽ sử dụng Git và Github, và Github cũng sẽ là phương thức nộp bài tập đối với khác khoá học của WCS. Tìm hiểu thêm về Git và Github.

Yêu cầu

Giai đoạn đầu tiên trong bất kỳ dự án nào, là tạo một codebase có chất lượng tốt, với đầy đủ các công cụ quan trọng hỗ trợ cho việc xây dựng tiếp theo. Vì vậy, trước tiên bạn hãy tạo một codebase cho dự án website e-commerce của mình nhé. Bạn cần thực hiện các nội dung sau:

  1. Tạo codebase cho dự án, sử dụng Next.js
  2. Tích hợp một trong các UI Library vào codebase vừa tạo (bạn có thể lựa chọn UI Library theo ý thích)
  3. Tích hợp Redux vào codebase vừa tạo
  4. Lưu trữ codebase vừa tạo trên Github

Sau khi đã hoàn thành các nội dung trên, bạn chuyển sang thẻ “Nộp bài”, nộp các nội dung đã hoàn thành để mở khoá giai đoạn tiếp theo.

Yêu cầu về bài nộp:

  • Code: đường link Github repo bạn đã tạo, và SHA của commit sau khi đã hoàn thành các nội dung của giai đoạn này.
  • Hình ảnh: Hình ảnh chạy thử trang web sau khi khởi tạo.

Kiến thức và kỹ năng bạn sẽ được học

  • React.js
  • Next.js
  • Bootstrap hoặc Semantic UI
  • Redux
  • Git và Github