inflearn logo

Xây dựng trang web bán hàng bằng vibe coding

Đề cập đến vấn đề có file Excel bán hàng nhưng giao diện, API và cơ sở dữ liệu tách riêng nên không thể kiểm tra tại một địa chỉ duy nhất. Vite, FastAPI, PostgreSQL và nginx được phân chia theo từng thư mục, sau đó kiểm tra mã nhận được bằng vibe coding thông qua số dòng và giao diện khách hàng.

3 học viên đang tham gia khóa học này

Độ khó Cơ bản

Thời gian Không giới hạn

React
React
Python
Python
FastAPI
FastAPI
PostgreSQL
PostgreSQL
Docker
Docker
React
React
Python
Python
FastAPI
FastAPI
PostgreSQL
PostgreSQL
Docker
Docker

Bạn sẽ nhận được điều này sau khi học.

  • Chia dự án bán hàng thành frontend và backend rồi mở giao diện Vite.

  • Đưa dữ liệu bán hàng trong Excel vào PostgreSQL và kiểm tra bằng số dòng.

  • Mở CORS để giao diện React gọi FastAPI

  • Đồng bộ danh sách khách hàng và cửa sổ đăng ký với dữ liệu máy chủ

  • Chạy cả giao diện và API cùng lúc bằng Docker Compose và nginx.

Có file Excel bán hàng, nhưng nếu giao diện, API và cơ sở dữ liệu nằm ở những nơi khác nhau thì rất khó kiểm tra bằng một địa chỉ duy nhất. Khóa học này kết nối giao diện React chạy bằng Vite, FastAPI, PostgreSQL và nginx thành một dự án duy nhất. Bạn sẽ nhận mã bằng phương pháp lập trình vibe, đồng thời kiểm tra xem mọi thứ đã đúng chưa dựa trên vị trí thư mục và kết quả chạy.

Phù hợp với những người như thế này

Phù hợp với những người đã nhận mã giao diện và mã máy chủ riêng nhưng không thể kết nối chúng tại cùng một địa chỉ. Phù hợp với những người muốn chuyển bản ghi bán hàng trong Excel sang cơ sở dữ liệu và màn hình tra cứu. Phù hợp với những người đã nhận tệp bằng cách lập trình vibe nhưng không biết phải đặt chúng vào thư mục nào. Chỉ cần từng thử thực thi một dòng lệnh trong terminal là có thể theo kịp khóa học.

Tiêu chí được xem xét trong buổi học

Chỉ hướng dẫn vai trò và kiểm tra bằng kết quả. Phần giao diện được chia thành api, query, pages và components. api xử lý các yêu cầu, query cập nhật danh sách, pages là màn hình, còn components là bảng và modal. API được chia thành web, service và repository. schema là JSON, còn model là bảng. Việc có đúng hay không được kiểm tra qua số hàng đã nạp, phản hồi của Swagger, danh sách khách hàng được tải lại sau khi đăng ký và các container đang chạy.

Dự án và dữ liệu

Chia sales_project thành frontend và backend, mở giao diện React bằng Node.js và Vite. Kiểm tra vị trí các container trong Docker Desktop. Xác định mối quan hệ giữa các bảng khách hàng, sản phẩm, phân loại sản phẩm, khuyến mãi, kênh và bán hàng, rồi chuẩn bị PostgreSQL bằng docker-compose.yml. Đọc tệp Excel và đưa dữ liệu vào các bảng, sau đó kiểm tra việc nạp dữ liệu thông qua số hàng. Phân chia chức năng của GET, POST, PUT, DELETE, đồng thời kết nối địa chỉ giao diện và địa chỉ API bằng CORS.

Giao diện và API

So sánh sự khác nhau giữa package.json và node_modules, đồng thời tách schema và model trong FastAPI. Khách hàng và sản phẩm có thể được đăng ký và chỉnh sửa, còn doanh số được để ở dạng chỉ xem. Kiểm tra kết quả yêu cầu trong Swagger. Đặt mã giao diện nhận được vào thư mục, rồi kiểm tra xem danh sách khách hàng và cửa sổ đăng ký có khớp với dữ liệu máy chủ hay không. Sau khi đăng ký, lấy lại danh sách.

Docker và nginx

Ghép đúng vai trò mà backend Dockerfile, frontend, nginx, .env và docker-compose.yml đảm nhận. Đặt image PostgreSQL và volume dữ liệu, rồi dùng docker compose up để khởi chạy container cơ sở dữ liệu. Trong nginx.conf, phân chia tệp giao diện và đường dẫn /api. Đưa các gói Python vào requirements.txt để đóng gói vào image. Kiểm tra xem các container backend, nginx và db-init đã chạy hay chưa.

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

Bạn nhận mã thực hành ở đâu? Bạn chỉ dẫn vai trò của các thư mục cho ChatGPT để nhận mã. Trong lớp học, chúng ta sẽ đặt tệp đó vào thư mục nào, đồng thời kiểm tra xem số dòng, giao diện và các container có khớp hay không.

Có cần học xong React và FastAPI riêng rồi mới tham gia không? Trong lớp, chúng ta sẽ tiến hành quá trình chia phần giao diện và máy chủ thành các thư mục riêng rồi kết nối chúng lại. Chỉ cần có các lệnh terminal, Node.js và Docker Desktop là được.

Docker có bắt buộc phải sử dụng không? Cơ sở dữ liệu và máy chủ sẽ được khởi chạy dưới dạng các container. Bạn chỉ cần cài đặt Docker Desktop trước và tham gia lớp học.

Trước khi nghe

Buổi thực hành được tiến hành trên máy tính có Node.js, Docker Desktop và Python. Phần giao diện sử dụng Vite và React, máy chủ sử dụng FastAPI, dữ liệu sử dụng PostgreSQL. Video là bản ghi lại buổi học được tổ chức tại lớp học.

Trình tự của buổi học

Đây là buổi học được tiến hành theo thứ tự: thư mục dự án, bảng bán hàng, nạp dữ liệu Excel, kết nối API, cấu hình giao diện, Docker Compose và nginx. Cuối cùng, chúng ta sẽ kiểm tra để đảm bảo giao diện và API hoạt động tại cùng một địa chỉ.

Hãy lần lượt chọn từng dòng trong tám tiêu đề ngắn sau và đổi thành tiêu đề: Phù hợp với những người này, Tiêu chí được xem xét trong khóa học, Dự án và dữ liệu, Giao diện và API, Docker và nginx, Các câu hỏi thường gặp, Trước khi học, Trình tự của khóa học.


Khuyến nghị cho
những người này

Khóa học này dành cho ai?

  • Người đã nhận riêng mã giao diện và mã máy chủ nhưng không thể kết nối chúng vào cùng một địa chỉ.

  • Những người có bản ghi bán hàng trong Excel nhưng chưa thể chuyển sang cơ sở dữ liệu và màn hình tra cứu

  • Người đã nhận được tệp bằng vibe coding nhưng không biết nên đặt vào thư mục nào

Cần biết trước khi bắt đầu?

  • Chỉ cần bạn từng chạy một dòng lệnh trong terminal là được.

  • Cài đặt Node.js và Docker Desktop.

  • Mã thực hành được nhận bằng cách yêu cầu ChatGPT cung cấp.

Xin chào
Đây là kogo14905334

Xác minh sự nghiệp

Chương trình giảng dạy

Tất cả

7 bài giảng

Tài liệu khóa học:

Tài liệu bài giảng
Ngày đăng: 
Cập nhật lần cuối: 

Đánh giá

Chưa có đủ đánh giá.
Hãy trở thành tác giả của một đánh giá giúp mọi người!

Khóa học tương tự

Khám phá các khóa học khác trong cùng lĩnh vực!

Miễn phí