강의

멘토링

로드맵

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.

(1.5) 2 đánh giá

86 học viên

  • 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.

Cộng đồng bình chọn, tự tay xây dựng từ frontend đến backend

Tôi lần đầu tiên nghĩ đến nền tảng bỏ phiếu này vào mùa đông năm 2024.
Như các bạn đều biết, lúc đó xã hội Hàn Quốc đang rất xôn xao vì một sự kiện chính trị, và hậu quả là dư luận xung quanh việc có nên luận tội tổng thống hay không đã bị phân cực cực độ.

Trong lúc đó, tôi tình cờ thấy một nền tảng bỏ phiếu nước ngoài có tên Polymarket, và ở đó có không gian mà mọi người tham gia ẩn danh và chia sẻ ý kiến theo thời gian thực ngay cả về những chủ đề nhạy cảm như "tán thành hay phản đối luận tội".
Nhìn thấy điều đó, tôi bỗng nghĩ:

"Chúng ta cũng có thể tạo ra thứ này được không nhỉ?"

Và thế là nó bắt đầu.
Một nền tảng cộng đồng đơn giản nhưng ý nghĩa, nơi bạn có thể tạo ra các chủ đề thú vị → chia sẻ → trao đổi ý kiến ẩn danh → và cùng nhau xem kết quả

Tôi đã triển khai quy trình đó thành fullstack bằng React, FastAPI và Docker.
Một không gian nơi ý kiến của ai đó không biến mất mà được tích lũy để tạo nên ý nghĩa.
Một dự án vừa thiết thực về mặt kỹ thuật, vừa là thứ tôi cá nhân muốn tạo ra, tôi muốn hoàn thành cùng với các bạn.


🎉 Cuối cùng đã ra mắt website demo!

https://talkandvote-demo.site/

Thảo luận và bình chọn tại một nơi! Hãy trải nghiệm trực tiếp ngay bây giờ.

Lưu ý

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

Xây dựng nền tảng cộng đồng bình chọn với React & FastAPI: Từ phát triển đến kiếm tiền với hệ thống thanh toán! Video YouTube

📘 Cung cấp ghi chú tóm tắt bài giảng cho học viên

Chúng tôi cung cấp tài liệu PDF tóm tắt bài giảng cho tất cả những người tham gia khóa học này.

Từ frontend đến backend, tôi đã đưa vào những giải thích chi tiết và mã ví dụ về những đoạn code không quen thuộc.

Ghi chú Frontend (Tổng cộng 37 trang)

  • Tổng hợp ngữ pháp cơ bản JavaScript

  • Cách cấu thành component React

  • React Hooks Hướng dẫn sử dụng thực tế (useState, useEffect, useContext, v.v.)

  • Mã style Tailwind CSS


Ghi chú Backend (tổng cộng 75 trang)

  • Cú pháp cơ bản Python và mã ví dụ

  • Cấu trúc FastAPI, thiết lập đường dẫn, dependency injection

  • Sơ đồ luồng xử lý xác thực dựa trên JWT / Refresh Token

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

  • Thiết kế RESTful API & 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 tương tác"

1) Người dùng tự tạo chủ đề thảo luận

Người dùng có thể tạo topic từ những chủ đề mình tò mò.
Nhập chủ đề → Thêm lựa chọn → Chọn danh mục
Chỉ cần điền một form đơn giản là một topic được tạo ra và chia sẻ với toàn bộ người dùng.

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

Kết quả bình chọn có thể được xem qua biểu đồ cột thời gian thực được phản ánh ngay lập tức sau khi lựa chọn. Được thiết kế để bất kỳ ai cũng có thể tham gia chỉ với một cú nhấp chuột và so sánh kết quả một cách trực quan.

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

Tích hợp trực tiếp với các hệ thống thanh toán trong nước như Toss, KakaoPay, vượt ra ngoài việc chỉ đơn thuần triển khai tính năng để thiết kế cấu trúc nền tảng có thể kiếm tiền.
Bạn có thể trải nghiệm từ việc giới hạn số lượng chủ đề tạo theo cấp độ thành viên cho đến quy trình tạo ra doanh thu thực tế từ dịch vụ của riêng mình.

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

Bạn có thể quản lý tổng hợp toàn bộ dữ liệu người dùng, chủ đề, bình chọn trong trang quản trị FastAPI.
Các chức năng back office như thống kê bình chọn, chặn chủ đề bất thường, thay đổi trạng thái người dùng cũng sẽ được xây dựng trực tiếp.

Tạo website công ty riêng với React, Node.js, MongoDB: Hướng dẫn hoàn hảo

Nếu bạn muốn trải nghiệm từ A đến Z của phát triển web thì tôi khuyên bạn nên tham gia khóa học này. React, Node.js dựa trên nền tảng này, bạn có thể học được những nguyên tắc chuẩn của phát triển web bằng cách tạo ra một website hoàn chỉnh với blog và trang quản trị.

Nếu tôi đã lên tàu Titanic?! Tạo dịch vụ web AI dự đoán xác suất sống sót với PyTorch & Next.js

"Nếu tôi lên tàu Titanic thì có thể sống sót được không?" - chúng ta sẽ giải đáp câu hỏi thú vị này bằng dữ liệu thực tế.
Tạo mô hình AI với PyTorch, xây dựng server backend với FastAPI, triển khai giao diện web với Next.js, và hoàn thiện dự án fullstack bao trùm cả AI và phát triển web.

Bạn có thắc mắc gì không?

💬 Q1. Khóa học này phù hợp với người ở trình độ nào?

Tôi đã từng làm việc với React và Python cơ bản một chút, nhưng chưa tạo ra một dự án hoàn chỉnh nào.
Khóa học này cần trình độ như thế nào để có thể theo kịp được ạ?


A1. Khóa học này được thiết kế để những ai đã từng tiếp xúc với React và Python cơ bản ít nhất một lần đều có thể theo kịp một cách dễ dàng. Vì chúng ta sẽ cùng nhau xây dựng từ đầu đến cuối, những phần có thể gây nhầm lẫn về khái niệm đã được bổ sung chi tiết qua ghi chú PDF và comment trong code. Không cần phải "hiểu hoàn hảo" mà chỉ cần "đã từng làm qua" là đủ độ khó phù hợp rồi.

💬 Q2. Liệu tôi có thể tự mình theo học đến cùng không? Môi trường thực hành có khó không?

Vì là dự án fullstack nên hơi áp lực một chút... Việc thiết lập môi trường hay quy trình thực hành có khó không? Liệu mình có thể tự làm được đến cuối không nhỉ?


A2. Bạn hoàn toàn có thể theo kịp được. Chúng ta sẽ không bắt đầu quá phức tạp ngay từ đầu, mà cấu trúc React + FastAPI + Docker cũng được xây dựng từng bước một cách tuần tự.

Và những 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

  • Toàn bộ mã nguồn được cung cấp cho từng chương trong Notion

  • Hỏi đáp khi xảy ra lỗi

Tôi đã chuẩn bị tất cả như thế này rồi.

Mục tiêu là thay đổi từ câu hỏi "Liệu tôi có thể tự mình hoàn thành điều này không?"
thành "Tôi có thể mở rộng đến đâu từ đây?".

💬 Q3. Chức năng thanh toán có thực sự thực hiện thanh toán không? Hay chỉ có thể test thôi?

Bạn nói là sẽ tích hợp với Toss và KakaoPay... thật sự tiền sẽ bị trừ ra không?
Chỉ có thể thanh toán thử nghiệm thôi phải không?


A3. Trong khóa học này, chúng ta sẽ sử dụng API của dịch vụ tích hợp PG trong nước có tên 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, KakaoPay.

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

Những lưu ý trước khi 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 이상

    • macOS (M1/M2 포함)

    • Ubuntu 20.04 trở lên hoặc các hệ Linux khác

    • Khuyến nghị 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 tài liệu cung cấp

  • Ghi chú bài giảng PDF được tổng hợp (Frontend 37 chương / Backend 75 chương)

  • Ví dụ mã nguồn (Cung cấp liên kết Notion)


  • Cung cấp slide công nghệ cốt lõi dựa trên PPT/văn bản

  • Cung cấp tài liệu API và ReadMe đã sử dụng khi cần thiết

📐 Dung lượng dữ liệu và lưu ý

  • Dung lượng PDF: khoảng 1MB

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

  • Tất cả tài liệu đều là chia sẻ dành riêng cho học viên.

🔎 Kiến thức cơ bản (có thì tốt)

  • Cú pháp cơ bản HTML/CSS, JavaScript

  • Hiểu cấu trúc React component và useState/useEffect

  • Kinh nghiệm sử dụng cú pháp Python và các hàm/lớp đơn giản

  • React, MySQL, Docker, REST API, FastAPI được sử dụng!

※ Mặc dù phần giải thích được cấu trúc để ngay cả người mới bắt đầu hoàn toàn cũng có thể theo kịp,
nhưng chúng tôi khuyến nghị bạn nên học trước cá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à

526

Học viên

29

Đánh giá

51

Trả lời

4.8

Xếp hạng

6

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á

Tất cả

2 đánh giá

1.5

2 đánh giá

  • 고리오영감님의 프로필 이미지
    고리오영감

    Đánh giá 30

    Đánh giá trung bình 4.9

    2

    30% đã tham gia

    하... 섹션 5. Ch.4 (프론트엔드) 메인 페이지를 하고 있는데요. 강의랑 강의자료가 달라서 버그 잡느라 너무 고생입니다. 검수를 안하고 강의를 업로드한 거 같아서 너무 아쉽습니다. 무료 강의도 아니고 돈 내고 듣는데, 이정도 퀄리티는 조금 아닌 거 같아요. 전체적으로 강의 내용과 강의자료가 일치가 되도록 해주셨으면 좋겠습니다.

    • 닭강정
      Giảng viên

      안녕하세요, 소중한 수강평 남겨주셔서 감사합니다. 말씀해주신 섹션 5의 프론트엔드 메인 페이지 부분에서 강의 내용과 자료가 일치하지 않아 불편을 드린 점 진심으로 죄송합니다. 해당 구간에서 발생한 버그와 불일치 문제를 확인하고 수정하였으며, 전체 강의를 다시 한 번 꼼꼼히 검토 중입니다. 앞으로는 강의와 자료가 보다 정확히 맞물려 학습에 혼란이 없도록 개선하겠습니다. 불편을 감수하시면서도 귀중한 의견 남겨주셔서 진심으로 감사드립니다. 더 나은 강의로 보답드리겠습니다. 감사합니다.

  • farmerkyh님의 프로필 이미지
    farmerkyh

    Đánh giá 6

    Đánh giá trung bình 4.3

    1

    19% đã tham gia

    단순히 script를 읽는 강의가 아닌 과정을 명확히 설명을 해줬으면 좋았겠네요

    • 닭강정
      Giảng viên

      안녕하세요, 소중한 수강평 남겨주셔서 감사합니다. 말씀해주신 부분처럼 단순히 스크립트를 읽는 느낌보다는 과정과 이유를 더 명확히 설명드렸어야 했는데 부족했던 점 죄송합니다. 앞으로는 흐름과 원리를 더 쉽게 이해하실 수 있도록 보완하겠습니다. 지적해주셔서 진심으로 감사드리고, 더 나은 강의로 보답드리겠습니다. 감사합니다!

1.611.656 ₫

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!