Ưu đãi trong tuần: Nhập mã UD50 giảm 50k cho đơn từ 300k!
Trang chủ
Đăng nhập
Xem tất cả kết quả
Menu
Đăng nhập Đăng ký miễn phí

React.js AI Chatbot built with ChatGPT, Gemini and DeepSeek

Xây dựng Chatbot AI với React.js, tích hợp ChatGPT, Gemini và DeepSeek

Xây dựng Chatbot AI với React.js, tích hợp ChatGPT, Gemini và DeepSeek

Dự án React: Tạo Chatbot AI thời gian thực với ChatGPT, Gemini, DeepSeek, Claude & tích hợp API Grok

4.4
(583 đánh giá)
41,850 học viên
Giảng viên
Anton Voroniuk
Phụ đề Việt chất lượng cao Phụ đề tiếng Anh Bán chạy Đánh giá cao
50.000đ 349.000đ -86%
✓ Xem giỏ hàng và thanh toán
Bao gồm phụ đề tiếng Việt, tiếng Anh
23.0 giờ video
234 bài giảng
Truy cập vĩnh viễn
Học trên mọi thiết bị
Cập nhật: 30/05/2026
#Artificial Intelligence #Javascript #React #Web Development

Bạn sẽ học được gì

Hướng dẫn xây dựng ứng dụng Chatbot AI chức năng bằng React.js và Vite, nâng cao UI/UX với tính năng tự động cuộn, hỗ trợ Markdown, chế độ Sáng/Tối, trạng thái tải.
Cách tích hợp các mô hình AI ChatGPT, Gemini, DeepSeek, Claude và Grok thông qua API để trò chuyện thời gian thực và truyền phát tin nhắn.
Sự khác biệt chính giữa công cụ AI và API, cách xử lý giới hạn tốc độ, sửa lỗi API và gỡ lỗi tích hợp AI hiệu quả.
Và nhiều nội dung khác để nâng cao kỹ năng React.js và tích hợp AI.

Yêu cầu

Kiến thức cơ bản về React.js
Kiến thức cơ bản về JavaScript (chúng tôi cung cấp tài liệu đọc cho những ai chưa quen với JavaScript)
Kiến thức cơ bản về HTML/CSS

Đối tượng phù hợp

Dành cho nhà phát triển và sinh viên có kiến thức React.js cơ bản muốn khám phá và học hỏi điều mới
Dành cho những người muốn học cách tích hợp Open AI (ChatGPT), Google AI (Gemini) và DeepSeek (R1 và V3) vào ứng dụng frontend

Nội dung khóa học

40 phần • 234 bài giảng
1 Chào mừng đến với khóa học
2 Yêu cầu khóa học
3 Cách học trên Udemy
4 Cách sử dụng tài nguyên mã nguồn
1 Tổng quan dự án
2 Giới thiệu về AI Sáng tạo (Generative AI)
3 Mô hình định giá API AI
4 Thiết lập môi trường
5 Tạo ứng dụng React
6 Dọn dẹp ứng dụng
1 Xây dựng bố cục ứng dụng
2 Hiển thị tin nhắn trò chuyện
3 Thêm ô nhập văn bản và nút Gửi
4 Xử lý tin nhắn trong cuộc trò chuyện
1 Tổng quan về các API AI phổ biến
2 Lấy API Key cho Google AI
3 Kết nối Google AI (Gemini) để trò chuyện
4 Tách biệt logic Google AI để tái sử dụng
5 Lấy API Key cho Open AI
6 Kết nối Open AI (ChatGPT) để trò chuyện
1 Hiển thị trạng thái đang tải
2 Thêm hỗ trợ Markdown cho tin nhắn
3 Tự động thay đổi kích thước ô nhập văn bản
4 Vô hiệu hóa điều khiển trò chuyện khi đang tải
5 Tự động đặt tiêu điểm vào ô nhập văn bản
6 Thêm tính năng tự động cuộn xuống dưới cùng
7 Cải thiện hành vi tự động cuộn
8 Thêm hỗ trợ chế độ Tối
1 Kết nối Google AI (Gemini) để truyền phát
2 Bật tính năng truyền phát trò chuyện thời gian thực
3 Kết nối Open AI (ChatGPT) để truyền phát
1 Tổng quan mô hình DeepSeek R1 và V3
2 Lấy API Key cho DeepSeek
3 Kết nối DeepSeek để trò chuyện
1 Giới hạn sử dụng và tốc độ của API AI
2 Mã không hoạt động? Học cách gỡ lỗi
3 Xử lý lỗi API từ các dịch vụ AI
4 Sử dụng thư viện Google AI (Gemini) mới
5 Xử lý và hiển thị thông báo lỗi thân thiện
1 Tổng quan mô hình Anthropic (Claude)
2 Lấy API Key cho Anthropic (Claude)
3 Kết nối Anthropic (Claude) để trò chuyện
1 Tổng quan mô hình xAI (Grok)
2 Lấy API Key cho xAI (Grok)
3 Kết nối xAI (Grok) để trò chuyện
1 Chuyển đổi giữa các trợ lý AI trong giao diện Chatbot
2 Mở rộng Chatbot để hỗ trợ thêm mô hình AI
3 Thêm bộ chọn chủ đề Sáng/Tối vào giao diện Chatbot
1 Tổng quan Sidebar mới để quản lý nhiều cuộc trò chuyện
2 Tạo bố cục Sidebar để hiển thị tất cả cuộc trò chuyện
3 Biến Sidebar thành menu Hamburger trên thiết bị di động
4 Tách logic tin nhắn khỏi Component chính (App)
5 Bật tính năng chuyển đổi cuộc trò chuyện từ Sidebar
6 Hiển thị toàn bộ lịch sử tin nhắn cho cuộc trò chuyện đang hoạt động
7 Cập nhật cuộc trò chuyện hiện có với tin nhắn mới
1 Thêm nút "Cuộc trò chuyện Mới" để bắt đầu hội thoại mới
2 Ngăn chặn việc tạo nhiều cuộc trò chuyện trống
3 Tự động tạo tiêu đề cuộc trò chuyện từ đầu vào người dùng
4 Hỗ trợ lịch sử riêng biệt cho từng cuộc trò chuyện (Đặc thù Google AI)
5 Tiếp tục phản hồi khi chuyển đổi giữa các cuộc trò chuyện
6 Xóa dữ liệu cuộc trò chuyện giả và sửa màn hình chào
7 Xử lý khối mã và cải thiện định dạng
1 Giới thiệu: Những gì bạn sẽ học ở đây
2 Duyệt tất cả mã ví dụ trên GitHub
3 Trả về nhiều phần tử
4 Không tạo khóa duy nhất
5 Vô tình hiển thị số 0
6 Thiếu khoảng trắng trong JSX
7 Thiếu dấu ngoặc nhọn trong Styles
8 Sử dụng class thay vì className
9 Bỏ qua cách thức hoạt động của Virtual DOM
1 Duyệt tất cả mã ví dụ trên GitHub
2 Nhầm lẫn giữa State và Props
3 Thay đổi State trực tiếp
4 Đọc State ngay sau khi cập nhật
5 Quên cập nhật State dạng hàm
6 Sử dụng Hooks bên trong vòng lặp hoặc điều kiện
7 Chuyển từ Uncontrolled sang Controlled
1 Duyệt tất cả mã ví dụ trên GitHub
2 Quên mảng phụ thuộc trong useEffect
3 Thiếu phụ thuộc trong useEffect
4 Tạo vòng lặp vô hạn với useEffect
5 Thêm mọi thứ vào mảng phụ thuộc
6 Không dọn dẹp Effect đúng cách
7 Sử dụng hàm Async bên trong useEffect
1 Kỹ thuật Prompt là gì?
2 Sai lầm và thách thức phổ biến
3 Thực hành tốt nhất khi viết Prompt
4 Kỹ thuật Prompt nâng cao
5 Prompt dựa trên vai trò để có kết quả thông minh hơn
1 ChatGPT là gì và cách thức hoạt động
2 Tạo tài khoản ChatGPT của bạn
3 Ngăn ChatGPT sử dụng dữ liệu của bạn để huấn luyện
4 Trường hợp sử dụng phổ biến của ChatGPT cho nhà phát triển
1 Cá nhân hóa ChatGPT với Hướng dẫn tùy chỉnh
2 Ví dụ Prompt với Hướng dẫn tùy chỉnh
3 Tổ chức và quản lý cuộc trò chuyện như một chuyên gia
4 Hiểu và sử dụng Bộ nhớ ChatGPT
5 Tải tệp lên và làm việc với ngữ cảnh
6 Tìm câu trả lời tốt hơn với Web & Nghiên cứu sâu
7 Sử dụng chế độ Giọng nói và chuyển văn bản từ cuộc hội thoại
8 Tăng năng suất gấp 10 lần với Dự án
9 4 ví dụ Prompt để tổ chức Dự án
1 Giải thích các mô hình ChatGPT
2 Chọn mô hình ChatGPT phù hợp
3 Gói thanh toán & Giới hạn của ChatGPT
4 Hiểu về Quyền riêng tư dữ liệu ChatGPT
1 Thiết lập Github Copilot và VS Code
2 Bắt đầu nhanh với GitHub Copilot trong VS Code
3 Tìm hiểu thêm về Hoàn thành mã
4 Sử dụng Inline Chat cho trình soạn thảo và terminal
5 Hành động thông minh của Github Copilot
6 Sử dụng giao diện trò chuyện Github Copilot
1 Giới thiệu: Tại sao bạn nên sử dụng Github Copilot
2 Tổng quan về GitHub Copilot
3 Trường hợp sử dụng phổ biến của GitHub Copilot cho nhà phát triển
4 Gói thanh toán & Giới hạn của Github Copilot
5 Hiểu về Quyền riêng tư dữ liệu Github Copilot
1 Sử dụng Copilot Chat – Chế độ Hỏi
2 Chỉnh sửa mã với Copilot – Chế độ Sửa
3 Tự động hóa tác vụ với Copilot – Chế độ Tác nhân
4 Sử dụng Ngữ cảnh trò chuyện để có phản hồi tốt hơn
1 Giới thiệu về dự án Copilot đầu tiên của bạn
2 Tổng quan ứng dụng — Xem những gì chúng ta sẽ xây dựng
3 Cách tiếp cận phổ biến để xây dựng ứng dụng với Copilot
4 Prompt và tài liệu cho ứng dụng Máy tính
5 Tạo kế hoạch phát triển cho Copilot
6 Xây dựng ứng dụng Máy tính từ kế hoạch
7 Tạo kiểu cho Máy tính với giao diện hiện đại
8 Thêm giới hạn đầu vào và định dạng hàng nghìn
9 Thay thế logic tùy chỉnh bằng thư viện định dạng
10 Viết và chạy kiểm thử đơn vị với Copilot
11 Tạo tài liệu dự án với AI
1 Cách thức hoạt động của Lập chỉ mục không gian làm việc trong Copilot
2 Quản lý tệp bị bỏ qua trong Copilot với .gitignore
3 Giải thích về Hướng dẫn tùy chỉnh trong Copilot
4 Tạo Hướng dẫn tùy chỉnh của riêng bạn
5 Tổng quan Hướng dẫn tùy chỉnh phổ biến từ cộng đồng
6 Mẫu Hướng dẫn tùy chỉnh cho nhà phát triển
7 Hiểu về Tệp Prompt cho các tác vụ lặp lại
8 Tạo Tệp Prompt của riêng bạn
9 Tổng quan Tệp Prompt phổ biến từ cộng đồng
10 Mẫu Tệp Prompt cho nhà phát triển
1 Thiết lập trình soạn thảo mã Cursor AI
2 Bắt đầu nhanh với Cursor AI
3 Tìm hiểu thêm về Hoàn thành Tab
4 Sử dụng Inline Chat cho trình soạn thảo và terminal
5 Sử dụng giao diện trò chuyện Cursor AI
1 Giới thiệu: Tại sao bạn nên sử dụng Cursor
2 Tổng quan về Cursor AI
3 Trường hợp sử dụng phổ biến của Cursor AI cho nhà phát triển
4 Gói thanh toán & Giới hạn của Cursor AI
5 Hiểu về Quyền riêng tư dữ liệu Cursor AI
1 Sử dụng Cursor Chat – Chế độ Hỏi
2 Chỉnh sửa mã với Cursor – Chế độ Thủ công
3 Tự động hóa tác vụ với Cursor – Chế độ Tác nhân
4 Sử dụng Ngữ cảnh trò chuyện để có phản hồi tốt hơn
5 Khám phá sức mạnh của Chế độ Lập kế hoạch
1 Giới thiệu về dự án Copilot đầu tiên của bạn
2 Tổng quan ứng dụng — Xem những gì chúng ta sẽ
3 Các cách tiếp cận phổ biến để xây dựng ứng dụng với Cursor
4 Prompt và tài liệu cho ứng dụng Chuyển đổi tiền tệ
5 Tạo kế hoạch phát triển với Cursor
6 Xây dựng ứng dụng Chuyển đổi tiền tệ từ kế hoạch
7 Lấy tỷ giá hối đoái trực tiếp từ API
8 Thêm nhiều loại tiền tệ và thiết lập giới hạn chuyển đổi
9 Cải thiện cấu trúc ứng dụng và sửa lỗi hiển thị kết quả
10 Viết và chạy Unit Test với Cursor
11 Tạo tài liệu dự án bằng AI
1 Cơ chế Indexing trong Codebase hoạt động như thế nào
2 Bỏ qua file và thư mục với .cursorignore
3 Hiểu về Project Rules và Memories
4 Tổng quan về các mẫu Rules phổ biến và cách áp dụng tốt nhất
5 Tạo Project Rules của riêng bạn từng bước
6 Mẫu Project Rules dành cho Frontend Developer
1 Cài đặt và thiết lập trình chỉnh sửa Windsurf
2 Hướng dẫn nhanh với Windsurf
3 Tìm hiểu thêm về Tab & Supercomplete
4 Sử dụng In-line Command cho câu hỏi nhanh
5 Windsurf Codelenses cho các thao tác nhanh
6 Cách dùng Windsurf Cascade (Giao diện Chat)
7 Làm chủ tính năng Vibe & Replace
8 Giải thích tính năng DeepWiki của Windsurf
1 Giới thiệu: Tại sao bạn nên dùng Windsurf
2 Tổng quan về Windsurf
3 Các trường hợp sử dụng Windsurf phổ biến cho Developer
4 Gói thanh toán & giới hạn của Windsurf
5 Hiểu về Quyền riêng tư dữ liệu của Windsurf
1 Sử dụng Windsurf Cascade – Chế độ Chat
2 Chỉnh sửa code với Cascade – Chế độ Write
3 Lập kế hoạch ứng dụng với Cascade - Chế độ Plan
4 Sử dụng Chat Context để có phản hồi tốt hơn
1 Giới thiệu
2 Động lực của tôi khi tạo khóa học
3 Về ưu điểm của khóa học của tôi
4 Tầm quan trọng của kỹ năng mềm
5 Tối đa hóa năng suất làm việc từ xa
6 Cộng tác tốt hơn trong nhóm
7 Ước lượng công việc một cách tự tin
8 Tăng tốc độ phát triển
9 Đơn giản hóa quy trình review code
10 Tổng kết
11 Kiệt sức: Cách tránh tình trạng này
12 Phát triển nhanh hơn với người hướng dẫn
13 Developer có thể kiếm được bao nhiêu?
14 Cách chọn một khóa học chất lượng
1 Cài đặt & Thiết lập Google Antigravity
2 Hướng dẫn nhanh với Google Antigravity
3 Tìm hiểu về tính năng Tab & Navigation
4 Sử dụng tính năng Command cho Inline Completions
5 Tổng quan về Agent Side Panel từ Antigravity
1 Tổng quan về Google Antigravity
2 Các trường hợp sử dụng Antigravity phổ biến cho Developer
3 Giải thích về gói thanh toán & tính năng
4 Các mô hình AI & giới hạn của Antigravity
5 Hiểu về Telemetry & Cài đặt quyền riêng tư dữ liệu
1 Thực thi tác vụ với Agent Fast Mode
2 Sử dụng Chat Context để có phản hồi tốt hơn
3 Lập kế hoạch công việc với Agent Planning Mode
1 Giới thiệu về dự án Antigravity đầu tiên
2 Tổng quan ứng dụng — Xem những gì chúng ta sẽ xây dựng
3 Các cách tiếp cận phổ biến để xây dựng ứng dụng Lịch với Antigravity
4 Prompt và tài liệu cho ứng dụng Lịch
5 Tạo kế hoạch triển khai
6 Xây dựng ứng dụng Lịch trong trình chỉnh sửa theo kế hoạch
7 Áp dụng các sửa lỗi UI, tạo thêm dữ liệu giả
8 Thêm chức năng Tạo, Chỉnh sửa và Xóa sự kiện
9 Nâng cao xác thực biểu mẫu và xử lý lỗi
10 Tái cấu trúc component lớn thành các component nhỏ hơn với AI
11 Kiểm thử ứng dụng Lịch — Unit Tests với Vitest
1 Khám phá công cụ Vibe Coding cho phát triển với Dmytro Vasyliev (Podcast)
1 Cách để lại đánh giá
2 Cách nhận chứng chỉ
3 Hãy làm 2 điều này

Giới thiệu khóa học

Unlock the power of AI to create smart, interactive apps that engage users in real time. You can easily add advanced features to your projects and build solutions that stand out in today’s market using OpenAI (ChatGPT), Google AI (Gemini), DeepSeek (R1 and V3), Anthropic (Cloud Sonnet and Haiku) and xAI (Grok 3) AI API’s.


What's in this course?

  • AI CHATBOT: Learn how to build an AI Chatbot with React, integrate Google AI, OpenAI, DeepSeek, Claude, and xAI APIs, and enhance Chat UI with Streaming, Themes, and Multi-Chat Features.

  • REACT MISTAKES: Learn how to fix React Beginner Mistakes — Missing Keys, Mutating State, Reading State Right After Update, Wrong useEffect Dependencies, Infinite Loops, and Broken Controlled Inputs.

  • PROMPTS: Learn how to apply Prompt Engineering, fix Mistakes, use Best Practices, and write Role-Based Prompts with Advanced Techniques.

  • CHAT GPT: Learn how to use ChatGPT for Coding, Research, and Projects, customize with Custom Instructions, manage Memory, explore Models, etc.

  • GITHUB COPILOT: Learn how to use GitHub Copilot in VS Code, explore Code Completions, Chat Modes, Custom Instructions, and Prompt Files for smarter AI Coding.

  • CURSOR: Learn how to use Cursor AI with Tab Completions, Chat Modes, Plan Mode, Rules, and Memories for faster AI Coding.

  • WINDSURF: Learn how to use Windsurf Editor with Supercomplete, Cascade Chat Modes, Plan Mode, DeepWiki, Rules, and Memories for efficient AI Development.

  • SOFT SKILLS: Learn how to improve Soft Skills for Developers, boost Remote Productivity, collaborate in Teams, estimate Tasks, and grow faster with Mentors.


This Course includes

  • Theory and Practice: Lectures with many practical examples (3-10 min lessons duration).

  • Source Code Examples: Full access to source code for all projects and exercises (practice on your own).

  • Udemy Certificate: which you will receive after completing the course.

  • Support: If you have any questions, we will always be willing to answer them.


Meet your instructor!

Dmytro Vasyliev - Senior Front-end Engineer with more than 10 years of professional experience in developing complex Web Applications. I have extensive experience with React and other frameworks, having used it in various projects to build dynamic and efficient user interfaces.


Do you need to be concerned?

This course comes with a 30-day money-back guarantee.

Join our course today to learn how to build your first application in React!

Khóa học liên quan

Khám phá thêm các khoá học cùng chủ đề

Hiển thị tất cả khoá học Artificial Intelligence
Hiển thị tất cả khoá học Javascript
Hiển thị tất cả khoá học React
Hiển thị tất cả khoá học Web Development
Zalo
Tôi có thể tư vấn khoá học cho bạn 😊