Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
Programming

/

Full-stack

Xây dựng nền tảng cộng đồng bình chọn với React & FastAPI: Kiếm tiền thông qua hệ thống thanh toán!

Trong khóa học này, chúng ta sẽ thực hành từng bước về các tính năng xã hội như bình chọn thời gian thực, bình luận, lượt thích, v.v., sử dụng React và FastAPI, cũng như cách tích hợp các hệ thống thanh toán (KakaoPay, TossPay, v.v.) để kiếm tiền.

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

  • dakgangjung123
리액트감잡기
백엔드이해하기
도커활용하기
결제기능구현
aws배포
React
MySQL
Docker
REST API
FastAPI

Dịch cái này sang tiếng Việt

  • Cách phát triển ứng dụng web full-stack bằng React và FastAPI

  • Triển khai nền tảng cộng đồng xã hội có chức năng bỏ phiếu, thích, bình luận.

  • Hệ thống xác thực JWT, đăng nhập & đăng ký người dùng

  • 결제 시스템 연동

  • Trải nghiệm toàn bộ quy trình của web service từ xây dựng môi trường phát triển dựa trên Docker, thiết kế DB, viết tài liệu API cho đến triển khai.

Xây dựng cộng đồng bỏ phiếu từ đầu đến cuối

Vào mùa đông năm 2024 , tôi lần đầu tiên nghĩ ra nền tảng bỏ phiếu này.
Như các bạn đã biết, xã hội Hàn Quốc vào thời điểm đó đang hỗn loạn vì một sự kiện chính trị, và kết quả là dư luận chia rẽ sâu sắc về việc có nên luận tội tổng thống hay không.

Sau đó, tình cờ tôi biết đến một nền tảng bỏ phiếu ở nước ngoài tên là Polymarket , nơi mọi người có thể tham gia ẩn danh và chia sẻ ý kiến ​​của mình theo thời gian thực, ngay cả về các chủ đề nhạy cảm như "ủng hộ hay phản đối luận tội".
Khi tôi đang nhìn vào nó, một ý nghĩ đột nhiên xuất hiện trong đầu tôi:

"Chúng ta không thể làm điều này nữa sao?"

Mọi chuyện bắt đầu như thế đó.
Tạo chủ đề nóng → Chia sẻ → Chia sẻ ý kiến ​​ẩn danh → Cùng nhau kiểm tra kết quả
Một nền tảng cộng đồng đơn giản nhưng có ý nghĩa.

Chúng tôi đã triển khai luồng này trong một ngăn xếp đầy đủ bằng cách sử dụng React, FastAPI và Docker.
Một không gian nơi ý kiến ​​của ai đó không biến mất mà tích tụ lại và trở nên có ý nghĩa.
Tôi muốn hoàn thành một dự án vừa có tính thực tế về mặt kỹ thuật vừa là điều mà cá nhân tôi muốn cùng bạn thực hiện .


🎉 Trang web demo cuối cùng đã được phát hành!

https://talkandvote-demo.site/

Thảo luận và bỏ phiếu tại cùng một nơi! Hãy tự mình trải nghiệm.

Lưu ý

Chức năng thanh toán trên trang web demo này thực chất là xử lý thanh toán và rút tiền.
Tuy nhiên, xin hãy yên tâm rằng đây là khoản thanh toán thử nghiệm và sẽ tự động bị hủy trong một khoảng thời gian nhất định . (Nếu khoản hoàn lại không được thực hiện sau một khoảng thời gian nhất định, vui lòng liên hệ với chúng tôi qua bài đăng Hỏi & Đáp.)

📦 Ghi chú bản vá

  • Chức năng thanh toán được triển khai (16 tháng 6 năm 2025)
    Hoàn thiện việc triển khai và thử nghiệm hệ thống thanh toán của người dùng

  • Hoàn tất triển khai miền HTTPS dựa trên AWS (17 tháng 6 năm 2025)
    Tải lên bài giảng về triển khai HTTPS bằng cách sử dụng kết hợp AWS EC2 + DuckDns + Nginx

🔄 Kế hoạch cập nhật đang diễn ra

  • Các bài giảng bổ sung do nhóm của chúng tôi chuẩn bị sẽ được đăng tải hàng tháng.

  • Chúng tôi cũng đang nhận phản hồi thông qua [ Google Form ] để thu thập các tính năng bạn muốn.
    Chúng tôi dự định sẽ dạy những tính năng được yêu cầu nhiều nhất trước, theo nguyên tắc ai đến trước sẽ được phục vụ trước .

Nền tảng cộng đồng bỏ phiếu được xây dựng bằng React & FastAPI: Kiếm tiền bằng hệ thống thanh toán! Video YouTube

📘 Ghi chú tóm tắt bài giảng được cung cấp cho sinh viên

Chúng tôi cung cấp bản tóm tắt PDF về bài giảng cho tất cả sinh viên tham gia khóa học này.

Từ front-end đến back-end, nó chứa các giải thích chi tiết và mã ví dụ cho các mã mà bạn không biết.

Ghi chú về Frontend (tổng cộng 37 chương)

  • Tóm tắt ngữ pháp JavaScript cơ bản

  • Cách cấu trúc các thành phần React

  • Cách sử dụng React Hooks trong thực tế (useState, useEffect, useContext, v.v.)

  • Mã kiểu CSS Tailwind


Ghi chú cuối trang (tổng cộng 75 trang)

  • Cơ bản về ngữ pháp Python và mã ví dụ

  • Cấu trúc FastAPI, thiết lập tuyến đường, tiêm phụ thuộc

  • Biểu đồ luồng xử lý mã thông báo xác thực/làm mới dựa trên JWT

  • Thiết kế mô hình DB & cấu trúc dữ liệu quan hệ

  • Thiết kế API RESTful & Cấu trúc phản hồi


🧩 Xem trước các tính năng chính của nền tảng

"Vượt ra ngoài việc bỏ phiếu đơn thuần, hướng tới một nền tảng cộng đồng có sự tham gia"

1) Người dùng tạo ra chủ đề nóng của riêng họ

Người dùng có thể tạo chủ đề về những chủ đề mà họ tò mò.
Nhập chủ đề → Thêm tùy chọn → Chọn danh mục
Chỉ cần điền vào biểu mẫu, một chủ đề sẽ được tạo và chia sẻ với tất cả người dùng.

2) Kiểm tra biểu đồ bỏ phiếu thời gian thực sau khi bỏ phiếu

Kết quả bỏ phiếu có thể được kiểm tra trong biểu đồ thanh thời gian thực được phản ánh ngay sau khi lựa chọn. Bất kỳ ai cũng có thể tham gia chỉ bằng một cú nhấp chuột và được cấu trúc sao cho kết quả có thể được so sánh một cách trực quan.

3) Chức năng thành viên thông qua chức năng thanh toán

Bằng cách triển khai trực tiếp tích hợp với các hệ thống thanh toán trong nước như Toss và Kakao Pay, chúng tôi sẽ thiết kế một cấu trúc nền tảng vượt ra ngoài phạm vi triển khai chức năng đơn giản và cho phép cung cấp các dịch vụ trả phí .
Tùy thuộc vào cấp độ thành viên, bạn có thể gặp phải giới hạn về số lượng chủ đề có thể tạo và thậm chí là giới hạn luồng có thể thực sự tạo ra doanh thu từ dịch vụ của riêng bạn.

4) Triển khai trang quản trị FastAPI

Bạn có thể quản lý tất cả dữ liệu người dùng, chủ đề và bình chọn theo cách tích hợp trên trang quản trị FastAPI .
Bạn cũng có thể cấu hình các chức năng văn phòng như thống kê bỏ phiếu, chặn chủ đề bất thường và thay đổi trạng thái người dùng.

Bạn có thắc mắc nào không?

💬 Câu hỏi 1. Người có trình độ nào thì phù hợp để tham gia khóa học này?

Tôi đã trình bày những kiến ​​thức cơ bản về React và Python, nhưng tôi vẫn chưa tạo ra một dự án hoàn chỉnh.
Học sinh ở trình độ nào có thể theo học khóa học này?


A1. Khóa học này được xây dựng để bất kỳ ai đã từng tiếp xúc với React và Python cơ bản đều có thể theo dõi. Vì chúng ta cùng nhau xây dựng từ đầu đến cuối, tôi đã bổ sung các phần mà các khái niệm có thể gây nhầm lẫn ở đây và ở đó bằng các ghi chú PDF và bình luận mã . Đây là mức độ khó phù hợp với những người "đã thử" hơn là "biết rõ".

💬 Câu hỏi 2. Tôi có thể tự mình theo dõi đến hết không? Môi trường thực hành có khó không?

Tôi cảm thấy hơi gánh nặng vì đây là dự án full-stack… Thiết lập môi trường hay quy trình thực hành có khó không? Tôi có thể tự hoàn thành không?


A2. Bạn có thể theo dõi. Nó không bắt đầu quá phức tạp ngay từ đầu và cấu hình React + FastAPI + Docker được xây dựng theo từng bước .

Và phần có thể gây nhầm lẫn trong quá trình thực hành là

  • Ghi chú PDF được sắp xếp

  • Mã đầy đủ được cung cấp cho mỗi chương Notion

  • Câu hỏi và câu trả lời khi xảy ra lỗi

Tôi đã chuẩn bị mọi thứ như thế này.

Thay vì hỏi “Tôi có thể tự làm việc này không?”
Mục tiêu là thay đổi câu hỏi thành “Tôi có thể mở rộng đến đâu từ đây?”

💬 Câu hỏi 3. Chức năng thanh toán có thực sự thực hiện thanh toán không? Có phải chỉ để thử nghiệm không?

Bạn nói rằng bạn đang liên kết Toss và Kakao Pay… Liệu có thực sự mất tiền không?
Tôi chỉ có thể thanh toán thử phải không?


A3. Trong bài giảng này, chúng ta sẽ sử dụng API của dịch vụ liên kết PG trong nước có tên là I'mport để triển khai trực tiếp các phương thức thanh toán thực tế như thẻ tín dụng, Toss và Kakao Pay .

Thực tế, một yêu cầu thanh toán được gửi đi và tiền sẽ bị khấu trừ.
Nhưng đừng lo lắng! Nếu bạn không đăng ký là doanh nghiệp, bạn sẽ không thực sự nhận được tiền .
Sau một khoảng thời gian nhất định , khoản thanh toán sẽ tự động bị hủy (hoàn lại) .

Những điều cần lưu ý trước khi tham gia lớp học

Hệ điều hành (OS)

  • Khóa học này có thể thực hành trên tất cả các hệ điều hành dưới đây.

    • Windows 10 trở lên

    • macOS (bao gồm M1/M2)

    • Ubuntu 20.04 trở lên hoặc các phiên bản Linux khác

    • Chúng tôi khuyên bạn nên sử dụng môi trường phát triển dựa trên trình duyệt Chrome.

📦 Hướng dẫn tài liệu học tập

📁 Định dạng dữ liệu được cung cấp

  • Ghi chú bài giảng PDF được sắp xếp (Chương 37 về Frontend / Chương 75 về Backend)

  • Ví dụ về mã nguồn (liên kết Notion được cung cấp)


  • Cung cấp các slide công nghệ cốt lõi dạng PPT/văn bản

  • Cung cấp tài liệu API và ReadMe khi cần thiết

📐 Dung lượng dữ liệu và ghi chú

  • Kích thước PDF: khoảng 1MB

  • Mã nguồn: Có thể sao chép theo thời gian thực trong Notion

  • Mọi tài liệu đều được chia sẻ dành riêng cho sinh viên .

🔎 Kiến thức của người chơi (tốt nếu có)

  • HTML/CSS, ngữ pháp cơ bản của JavaScript

  • Hiểu về các thành phần React và cấu trúc useState/useEffect

  • Kinh nghiệm với cú pháp Python và các hàm/lớp đơn giản

  • Chúng tôi sử dụng React, MySQL, Docker, REST API và FastAPI !

※ Phần giải thích được xây dựng sao cho ngay cả người mới bắt đầu cũng có thể hiểu được.
Tôi khuyên bạn nên học ngữ pháp cơ bản.

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

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

  • Lập trình viên muốn thử tích hợp tính năng thanh toán (Kakao Pay, Toss Pay, v.v.) vào website

  • Những ai muốn trải nghiệm dự án full-stack kết hợp React và FastAPI.

  • Những ai muốn triển khai dịch vụ cộng đồng có sự tham gia của người dùng (như bình luận, thích, bình chọn, v.v.)

  • Người muốn nắm vững toàn bộ luồng của dịch vụ web bao gồm cả Docker và triển khai

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

  • Khái niệm cơ bản của React (cấu trúc component, props/state, cách sử dụng hook cơ bản như useState, useEffect, v.v.)

  • Cấu trúc cơ bản của FastAPI (Định nghĩa router, xử lý yêu cầu/phản hồi)

  • Cơ bản về cú pháp Python (Sử dụng hàm, lớp, list/dictionary, v.v.)

Xin chào
Đây là

424

Học viên

25

Đánh giá

44

Trả lời

5.0

Xếp hạng

5

Các khóa học

안녕하세요! 서강대학교 컴공과를 졸업하고 현재 대학원 진학을 준비 중인 학생입니다.

고등학교 때 우연히 풀스택 웹 개발과 파이썬을 활용한 자동 매매를 시작하면서 프로그래밍에 빠지게 되었습니다.

그 후 다양한 프로젝트와 프로그래밍 과외활동을 경험하며 실력과 노하우를 공유했습니다. 이러한 경험을 통해 프로그래밍을 처음 접하는 분들에게도 "이렇게 쉬울 수 있구나!"라는 느낌을 줄 수 있는 강의를 만들고자 노력하고 있습니다.

 

실용적인 예제와 친근한 설명으로 여러분의 학습을 돕고 싶습니다. 감사합니다.

 

GitHub 저장소 바로가기 (클릭!)

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

Tất cả

63 bài giảng ∙ (17giờ 17phút)

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!

1.611.840 ₫

Khóa học khác của dakgangjung123

Hãy khám phá các khóa học khác của giảng viên!

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!