inflearn logo

Nền tảng cộng đồng bình chọn tạo bằng React & FastAPI: Từ hệ thống thanh toán đến kiếm tiền!

Trong khóa học này, chúng ta sẽ thực hành từng bước cách sử dụng React và FastAPI để xây dựng các tính năng mạng xã hội như bình chọn thời gian thực, bình luận, yêu thích, cũng như cách tích hợp các hệ thống thanh toán (Kakao Pay, Toss Pay, v.v.) để tạo ra doanh thu.

(2.7) 3 đánh giá

92 học viên

Độ khó Trung cấp trở lên

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

React
React
MySQL
MySQL
Docker
Docker
REST API
REST API
FastAPI
FastAPI
React
React
MySQL
MySQL
Docker
Docker
REST API
REST API
FastAPI
FastAPI

Đánh giá từ những học viên đầu tiên

2.7

5.0

JONG

100% đã tham gia

Khóa học này đã giúp tôi hiểu cách phát triển dịch vụ một cách tự nhiên từ giai đoạn hoàn thiện đến mở rộng.

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

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

  • Triển khai nền tảng cộng đồng mạng xã hội bao gồm các tính năng bình chọn, thích và bình luận

  • Xây dựng hệ thống xác thực JWT và đăng nhập/đăng ký người dùng

  • Tích hợp hệ thống kiếm tiền thông qua API thanh toán I'mport

  • Trải nghiệm toàn bộ quy trình dịch vụ web từ thiết lập môi trường phát triển dựa trên Docker đến thiết kế DB, tài liệu hóa API và triển khai.

Tự mình xây dựng cộng đồng bình chọn, từ Frontend đến Backend

Lần đầu tiên tôi nảy ra ý tưởng về nền tảng bỏ phiếu này là vào mùa đông năm 2024.
Vào thời điểm đó, như bạn đã biết, xã hội Hàn Quốc đang xôn xao vì một sự kiện chính trị, và đó là giai đoạn mà dư luận xung quanh việc có nên luận tội Tổng thống hay không bị chia rẽ cực độ.

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

"Liệu chúng ta cũng có thể tạo ra cái này không?"

Mọi chuyện đã bắt đầu như thế.
Một nền tảng cộng đồng đơn giản nhưng đầy ý nghĩa, nơi bạn có thể tạo ra các chủ đề đang được quan tâm → chia sẻ → thảo luận ý kiến ẩn danh → và cùng nhau kiểm tra kết quả.

Tôi đã triển khai luồng đó dưới dạng full-stack thông qua React, FastAPI và Docker.
Một không gian nơi ý kiến của ai đó không bị mất đi, mà được tích lũy lại để trở nên có ý nghĩa.
Tôi muốn cùng các bạn hoàn thiện một dự án vừa mang tính thực tiễn về mặt kỹ thuật, vừa là điều mà cá nhân tôi luôn muốn thực hiện.


🎉 Cuối cùng thì trang web demo cũng đã ra mắt!

https://talkandvote-d721d.web.app/

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

Lưu ý

Chức năng thanh toán trên trang web demo này sẽ thực hiện thanh toán thực tế và tiền sẽ được rút khỏi tài khoản.
Tuy nhiên, đây là thanh toán thử nghiệm và sẽ được tự động hủy trong một khoảng thời gian nhất định, vì vậy bạn có thể yên tâm. (Trong trường hợp không được hoàn tiền sau một khoảng thời gian nhất định, vui lòng liên hệ qua mục đặ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ừ hệ thống thanh toán đến kiếm tiền! Video YouTube

📘 Cung cấp ghi chú tổng hợp bài giảng dành cho học viên

Tất cả những ai tham gia khóa học này đều sẽ được cung cấp Ghi chú bài giảng dưới dạng tệp PDF.

Từ frontend đến backend, chúng tôi cung cấp giải thích chi tiết về những đoạn mã bạn chưa biết cùng với các mã ví dụ minh họa.

Ghi chú Front-end (tổng cộng 37 trang)

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

  • Cách cấu trúc component trong React

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

  • Mã style Tailwind CSS


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

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

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

  • Xác thực dựa trên JWT / Sơ đồ luồng xử lý 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 xa hơn cả việc bình chọn đơ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 trực tiếp tạo các chủ đề đang được quan tâm

Người dùng có thể tạo các chủ đề mà họ thắc mắc.
Từ nhập chủ đề → thêm các lựa chọn → đến chọn danh mục,
chỉ với việc điền một biểu mẫu đơn giản, một chủ đề sẽ được tạo ra và chia sẻ đến tất cả người dùng.

2) Kiểm tra biểu đồ bình chọn theo thời gian thực sau khi bình chọn

Kết quả bình chọn có thể được kiểm tra thông qua biểu đồ thanh thời gian thực được cập nhật ngay lập tức sau khi lựa chọn. Hệ thống đượ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) Tính năng thành viên thông qua chức năng thanh toán

Bằng cách trực tiếp triển khai tích hợp với các hệ thống thanh toán nội địa như Toss, Kakao Pay, v.v., bạn sẽ không chỉ dừng lại ở việc thực hiện các tính năng đơn thuần mà còn được thiết kế một cấu trúc nền tảng có khả năng thương mại hóa.
Bạn có thể trải nghiệm từ việc giới hạn số lượng tạo chủ đề theo cấp độ thành viên cho đến quy trình thực sự tạo ra lợi nhuận 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ập trung toàn bộ dữ liệu người dùng, chủ đề và bình chọn tại trang quản trị FastAPI.
Bạn cũng sẽ tự mình cấu hình các chức năng back-office như thống kê bình chọn, chặn các chủ đề bất thường và thay đổi trạng thái người dùng.

Tự tạo website công ty cho riêng mình với React, Node.js, MongoDB: Hướng dẫn hoàn chỉnh

Nếu bạn muốn trải nghiệm từ A đến Z về phát triển web, tôi đề xuất khóa học này. React, Node.js Bạn có thể học các nguyên tắc cơ bản của phát triển web bằng cách tạo một trang web bao gồm cả blog và trang quản trị dựa trên nền tảng này.

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

“Nếu tôi ở trên tàu Titanic, liệu tôi có thể sống sót không?” – chúng ta sẽ giải quyết câu hỏi thú vị này bằng dữ liệu thực tế.
Bạn có thể hoàn thành một dự án full-stack bao quát cả AI và phát triển web bằng cách tạo mô hình AI với PyTorch, triển khai máy chủ backend với FastAPI và xây dựng giao diện web với Next.js.

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

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

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


A1. Khóa học này được thiết kế để những ai đã từng tiếp xúc với kiến thức cơ bản về React và Python í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 thực hiện từ đầu đến cuối, nên những phần khái niệm có thể gây nhầm lẫn đã được bổ sung chi tiết bằng ghi chú PDF và chú thích trong mã nguồn. Đây là mức độ khó phù hợp nhất cho những ai ở mức "đã từng làm thử" chứ không nhất thiết phải ở trạng thái "hiểu biết hoàn hảo".

💬 Q2. Một mình tôi có thể theo kịp đến cùng không? Môi trường thực hành có khó không?

Vì là dự án full-stack nên tôi cảm thấy hơi áp lực một chút… Việc thiết lập môi trường hay luồng thực hành có khó không ạ? Liệu tôi có thể tự mình hoàn thành đến cuối cùng không?


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

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

  • thoughtful Ghi chú PDF đã được tổng hợp

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

  • Hỏi đáp khi phát sinh lỗi

Chúng tôi đã chuẩn bị sẵn sàng tất cả như thế này.

Mục tiêu của tôi là thay đổi câu hỏi từ “Liệu tôi có thể tự mình làm được việc này không?”
thành “Tôi có thể mở rộng từ đây đến mức nào?”.

💬 Q3. Tính năng thanh toán có thanh toán thật không? Hay chỉ có thể thử nghiệm?

Bạn nói rằng sẽ tích hợp Toss và Kakao Pay… tiền có bị trừ thật không ạ?
Hay chỉ có thể thanh toán thử nghiệm thôi?


A3. Trong khóa học 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 để trực tiếp triển khai các phương thức thanh toán thực tế như thẻ tín dụng, Toss, Kakao Pay, v.v.

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

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 trở lên

    • macOS (bao gồm M1/M2)

    • Ubuntu 20.04 trở lên hoặc các hệ điều hành 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 trang / Backend 75 trang)

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


  • Cung cấp các 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 được sử dụng nếu cần thiết

📐 Dung lượng tài liệu và lưu ý

  • Dung lượng PDF: Khoảng 1MB trở lại

  • Mã nguồn: Có thể sao chép trực tiếp từ Notion

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

🔎 Kiến thức nền tảng (nếu có sẽ tốt hơn)

  • Ngữ 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 sẽ được sử dụng!

※ Nội dung giải thích được xây dựng để ngay cả những người mới bắt đầu hoàn toàn cũng có thể theo kịp,
tuy nhiên chúng tôi khuyên bạn nên nắm vững các cú pháp cơ bản trước.

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

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

  • Nhà phát triển muốn thử triển khai tính năng thanh toán (Kakao Pay, Toss Pay, v.v.) vào trang web

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

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

  • Những người muốn nắm vững toàn bộ quy trình 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?

  • Các khái niệm cơ bản của React (cấu trúc component, props/state, cách sử dụng các 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 (hàm, lớp, cách sử dụng list/dictionary, v.v.)

Xin chào
Đây là dakgangjung123

1,693

Học viên

80

Đánh giá

65

Trả lời

4.5

Xếp hạng

9

Các khóa học

Xin chào! Tôi là sinh viên đã tốt nghiệp khoa Khoa học máy tính tại Đại học Sogang và hiện đang chuẩn bị học lên cao học.

Hồi cấp ba, tôi tình cờ bắt đầu học phát triển web full-stack và tự động hóa giao dịch bằng Python, từ đó tôi đã trở nên say mê lập trình.

Sau đó, tôi đã tích lũy kinh nghiệm qua nhiều dự án và hoạt động gia sư lập trình khác nhau, đồng thời chia sẻ các kỹ năng và bí quyết của mình. Thông qua những trải nghiệm này, tôi đang nỗ lực tạo ra những bài giảng có thể giúp ngay cả những người mới bắt đầu tiếp cận với lập trình cũng cảm thấy rằng "Hóa ra nó có thể dễ dàng đến thế!".

Tôi hy vọng có thể hỗ trợ việc học của các bạn thông qua những ví dụ thực tiễn và lời giải thích gần gũi. Xin cảm ơn.

Truy cập kho lưu trữ GitHub (Nhấp vào đây!)

Thêm

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

Tất cả

64 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ả

3 đánh giá

2.7

3 đánh giá

  • artline1412님의 프로필 이미지
    artline1412

    Đánh giá 9

    Đánh giá trung bình 5.0

    Đã chỉnh sửa

    5

    100% đã tham gia

    Khóa học này đã giúp tôi hiểu cách phát triển dịch vụ một cách tự nhiên từ giai đoạn hoàn thiện đến mở rộng.

    • dakgangjung123
      Giảng viên

      JONG님, cảm ơn bạn vì đánh giá quý báu! Mình rất vui vì luồng từ hoàn thiện dịch vụ đến mở rộng đã được truyền đạt tốt. Mình sẽ đáp lại bằng những bài giảng tốt hơn nữa!

  • griotold님의 프로필 이미지
    griotold

    Đánh giá 34

    Đánh giá trung bình 4.9

    2

    30% đã tham gia

    Haa... Phần 5. Ch.4 (Frontend) tôi đang làm trang chính. Vì bài giảng và tài liệu giảng khác nhau nên tôi đang rất vất vả để sửa bug. Có vẻ như đã upload bài giảng mà không kiểm tra nên rất tiếc. Đây không phải là bài giảng miễn phí mà phải trả tiền để nghe, nên tôi nghĩ chất lượng như thế này hơi không ổn. Mong rằng nội dung bài giảng và tài liệu giảng có thể được đồng bộ với nhau.

    • dakgangjung123
      Giảng viên

      Xin chào, cảm ơn bạn đã để lại đánh giá quý báu. Chúng tôi chân thành xin lỗi vì sự bất tiện mà bạn gặp phải ở phần trang chủ frontend trong Section 5, nơi nội dung bài giảng và tài liệu không khớp nhau. Chúng tôi đã xác nhận và khắc phục các lỗi cũng như vấn đề không nhất quán xảy ra trong phần đó, đồng thời đang xem xét lại toàn bộ khóa học một cách tỉ mỉ. Chúng tôi sẽ cải thiện để bài giảng và tài liệu khớp nhau chính xác hơn, tránh gây nhầm lẫn trong quá trình học tập. Chân thành cảm ơn bạn đã chịu đựng sự bất tiện và vẫn để lại ý kiến quý báu. Chúng tôi sẽ đáp lại bằng những bài giảng tốt hơn. Cảm ơn bạn.

  • farmerkyh2857님의 프로필 이미지
    farmerkyh2857

    Đánh giá 6

    Đánh giá trung bình 4.3

    1

    19% đã tham gia

    Thật tốt nếu bài giảng không chỉ đơn thuần đọc script mà giải thích rõ ràng quy trình

    • dakgangjung123
      Giảng viên

      Xin chào, cảm ơn bạn đã để lại đánh giá quý báu. Như bạn đã đề cập, thay vì chỉ đơn thuần đọc theo kịch bản, tôi đáng lẽ phải giải thích quá trình và lý do một cách rõ ràng hơn, xin lỗi vì những điểm còn thiếu sót. Từ nay tôi sẽ bổ sung để các bạn có thể hiểu được luồng và nguyên lý một cách dễ dàng hơn. Chân thành cảm ơn bạn đã góp ý, tôi sẽ đáp lại bằng những bài giảng tốt hơn. Cảm ơn bạn!

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!

Giảm 25% cho thành viên mới

1.208.079 ₫

25%

1.610.769 ₫