inflearn logo

Tạo website bán hàng bằng AI: Từ trang chủ, Landing Page đến CMS dựa trên AI Agent – Thực hành sản xuất thực tế

Bạn sẽ được học quy trình sản xuất web có thể ứng dụng ngay vào thực tế, từ trang chủ, landing page, website tương tác cho đến CMS dựa trên AI Agent, bằng cách sử dụng các công cụ tạo hình ảnh/video AI và Vibe Coding. Khóa học này không đơn thuần là việc tạo ra một màn hình bằng AI. Chúng ta sẽ tạo hình ảnh và video bằng các công cụ AI mới nhất như OpenAI Images 2.0, Kling, Higgsfield, sau đó sử dụng chúng làm hero image, video nền, video chuyển cảnh và tài nguyên tương tác cho website thực tế. Dựa trên Next.js, chúng ta sẽ từng bước triển khai landing page phong cách điện ảnh, trang chủ tương tác dạng trò chơi, trang liên hệ và trang nội dung blog. Qua đó, bạn sẽ nắm vững cấu trúc và quy trình mà người làm chuyên môn có thể tham khảo ngay khi sản xuất trang chủ hoặc landing page. Đặc biệt, khóa học này không chỉ bó hẹp trong hình thức trang quản trị (CMS) truyền thống. Chúng ta sẽ triển khai cấu trúc CMS dựa trên AI Agent, nơi các AI Agent như Codex, Claude Code tham khảo các kỹ năng và quy tắc tải lên đã định sẵn để sắp xếp nội dung, tài nguyên hình ảnh, sau đó tải chúng lên Neon DB và Vercel Blob Store. Nói cách khác, thay vì quản trị viên phải nhập từng mục vào biểu mẫu, bạn sẽ trải nghiệm phương thức vận hành mà ở đó, khi bạn cung cấp chủ đề blog, tài liệu tham khảo và tài nguyên hình ảnh, AI Agent sẽ tự sắp xếp cấu trúc nội dung và tải lên theo định dạng thống nhất. Sau đó, tùy theo nhu cầu, bạn có thể nâng cấp cấu trúc này thành trang quản trị truyền thống, quy trình phê duyệt hoặc đường ống tự động hóa. Ngoài ra, không chỉ dừng lại ở việc sản xuất, khóa học còn chuẩn bị các yếu tố cần thiết cho việc vận hành thực tế như triển khai trên Vercel, kết nối tên miền GoDaddy, thiết lập thẻ meta SEO, favicon, ảnh OG, sitemap và robots.txt. Khóa học cũng bao gồm quy trình đăng ký trang web và xác minh quyền sở hữu trên Google Search Console, Bing Webmaster Tools, Naver Search Advisor, cũng như cách thiết lập Google Analytics và Google Tag Manager để theo dõi dữ liệu người truy cập. Kết thúc khóa học, bạn có thể tự mình tái hiện quy trình sản xuất web thực chiến xuyên suốt từ lập kế hoạch sử dụng AI, sản xuất tài nguyên hình ảnh/video, triển khai Next.js, tối ưu hóa SEO, triển khai (deploy), đăng ký công cụ tìm kiếm, thiết lập công cụ phân tích cho đến vận hành nội dung dựa trên AI Agent.

37 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

Vibe Coding
Vibe Coding
codex
codex
vercel
vercel
prompt engineering
prompt engineering
Next.js
Next.js
Vibe Coding
Vibe Coding
codex
codex
vercel
vercel
prompt engineering
prompt engineering
Next.js
Next.js

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

  • Cách lập kế hoạch và triển khai trang chủ, trang đích (landing page), trang nội dung phù hợp với quy trình làm việc thực tế bằng cách sử dụng AI và Vibe Coding.

  • Cách tạo tài sản hình ảnh và video để sử dụng cho trang web bằng các công cụ AI như OpenAI Images 2.0, Kling và Higgsfield

  • Cách sử dụng hình ảnh và video do AI tạo ra làm hình ảnh chính (hero image), video nền, video chuyển cảnh và tài sản tương tác (interaction assets)

  • Kinh nghiệm thực tế trong việc xây dựng trang chủ và trang landing page có thể triển khai thực tế dựa trên Next.js

  • Cách hiện thực hóa trải nghiệm web tương tác khác biệt như trang đích điện ảnh (cinematic landing page), tương tác cuộn chuột (scroll interaction) và UX/UI dạng trò chơi.

  • Cách để hiểu cấu trúc CMS dựa trên AI Agent, sử dụng các AI Agent như Codex và Claude Code để sắp xếp và đăng tải nội dung.

  • Cách kết nối Neon DB và Vercel Blob Store để quản lý nội dung blog và tài sản hình ảnh

  • Cách chuẩn bị thẻ meta SEO, favicon, hình ảnh OG, sitemap và robots.txt để tạo nền tảng hiển thị trên công cụ tìm kiếm

  • Cách đăng ký trang web và xác minh quyền sở hữu trên Google Search Console, Bing Webmaster Tools và Naver Search Advisor

  • Cách công khai trang web bạn tự làm bằng tên miền thực tế thông qua việc kết nối tên miền GoDaddy với triển khai Vercel

  • Cách thiết lập Google Analytics và Google Tag Manager để theo dõi dữ liệu khách truy cập và kiểm tra các chỉ số vận hành

  • Toàn bộ quy trình hoàn thiện các sản phẩm tạo ra bởi AI, không chỉ dừng lại ở bản thảo đơn thuần mà trở thành một trang web và hệ thống nội dung có thể vận hành thực tế.

Website bán hàng bằng AI
Hoàn thiện từ sản xuất thực tế đến vận hành!

Tự mình triển khai cả CMS dựa trên AI.


Hãy thoát khỏi phương thức sản xuất trang web truyền thống.
Bằng cách sử dụng các công cụ AI mới nhất và Next.js để hoàn thành các
dự án có thể vận hành thực tế, bạn sẽ phát triển khả năng lập kế hoạch và sản xuất dịch vụ web độc đáo.


Xây dựng Web AI:
Tạo website thực tế với các công cụ AI và Next.js.

OpenAI Images 2.0, Kling, Higgsfield và các công cụ AI mới nhất khác được sử dụng để
tạo hình ảnh và video, đồng thời bạn sẽ trực tiếp triển khai từ trang landing page đậm chất điện ảnh,
trang chủ tương tác cho đến CMS dựa trên AI Agent bằng Next.js.



Đây không chỉ đơn thuần là một khóa học tạo ra màn hình.
Bạn sẽ được trải nghiệm cả phương thức vận hành CMS dựa trên AI, nơi AI Agent sắp xếp nội dung và tự động tải lên Neon DB, Vercel Blob Store.



Triển khai trên Vercel, kết nối tên miền GoDaddy, tối ưu hóa SEO,
thiết lập Google Analytics, Tag Manager
và nắm vững toàn bộ quy trình vận hành thực tế.

Tạo trang web của riêng bạn
với AI và Next.js

Phần 1 - Thiết lập môi trường phát triển web AI và Định hướng

Thiết lập các công cụ AI và môi trường phát triển sẽ sử dụng trong khóa học này, đồng thời xem trước kết quả tổng thể của trang web sẽ được xây dựng. Bao gồm quá trình tạo dự án Next.js và liên kết với GitHub.

Phần 2 - Cơ bản về tạo trang Landing Page điện ảnh

Sử dụng OpenAI Images 2.0 và higgsfield để tạo ra các thành phần cơ bản của trang landing page điện ảnh. Học từng bước cách triển khai các tương tác điện ảnh động dựa trên thao tác cuộn chuột.

Phần 3 - Xây dựng trang chủ dạng trò chơi dựa trên AI

Sử dụng Higgsfield, GPT Image và Next.js để tạo trang chủ tương tác theo phong cách trò chơi. Thực hành từ việc tạo hình ảnh chủ đạo (key visual) cho anh hùng đến hoàn thiện trang liên hệ dạng chuyển cảnh video.

Phần 4 - Triển khai trang web và tối ưu hóa công cụ tìm kiếm

Tiến hành quy trình triển khai trang web bằng Vercel và kết nối tên miền GoDaddy. Học cách thiết lập thẻ meta SEO, chuẩn bị favicon, hình ảnh OG và đăng ký công cụ tìm kiếm, cũng như phương pháp xác thực quyền sở hữu.

Phần 5 - Hệ thống quản lý nội dung (CMS) dựa trên AI Agent

Xây dựng hệ thống CRM tinh gọn để quản lý các bài viết blog và đăng tải lên trang web bằng cách sử dụng các AI Agent như Codex, Claude Code. Bao gồm việc kết nối Neon DB và Vercel Blob Store.

Phần 6 - Thiết lập công cụ phân tích vận hành trang web

Bạn sẽ học cách thiết lập Google Analytics và Google Tag Manager để theo dõi và phân tích dữ liệu khách truy cập trang web. Thông qua đó, bạn sẽ tạo nền tảng để đo lường và cải thiện hiệu quả vận hành trang web.

Trong khóa học này, chúng ta sẽ thực hiện từ khâu lập kế hoạch đến triển khai trang web bằng cách sử dụng Vibe Coding và Prompt Engineering, đồng thời bao quát quy trình sản xuất web AI thực tế từ việc tạo dịch vụ thực tế với Codex và Next.js cho đến việc kết nối triển khai trên Vercel.

Việc tạo trang web bằng AI vẫn còn khiến bạn cảm thấy mông lung sao?
Khóa học này được tạo ra chính là dành cho những người như bạn.


✔️ Những người muốn nhanh chóng tạo website thực tế bằng AI và Next.js

  • Những ai muốn trực tiếp tạo ra hình ảnh/video chất lượng cao bằng các công cụ AI mới nhất (Images 2.0, Kling, v.v.)

  • Những ai muốn tự mình triển khai các trang landing page điện ảnh hoặc trang chủ dạng trò chơi dựa trên Next.js

  • Những ai muốn nắm vững quy trình xây dựng CMS dựa trên AI Agent và tự động hóa vận hành nội dung.

✔️ Những nhà hoạch định và thiết kế muốn trải nghiệm toàn bộ quy trình từ lập kế hoạch website đến triển khai và vận hành

  • Những ai muốn biến ý tưởng của người lập kế hoạch thành hiện thực, từ việc tạo tài sản AI đến triển khai trang web.

  • Những ai muốn nắm vững quy trình vận hành thực tế từ triển khai Vercel, kết nối tên miền, thiết lập SEO, cho đến cài đặt GA/GTM.

  • Những ai muốn học hỏi bí quyết xây dựng trang web tương tác sử dụng AI

✔️ **Tất cả những ai muốn hoàn thiện dịch vụ của riêng mình bằng công nghệ mới**

  • Những ai muốn vượt qua các bài hướng dẫn đơn thuần để tạo ra một trang web có khả năng vận hành thực tế kết hợp giữa AI và lập trình.

  • Những ai muốn tích lũy kinh nghiệm xây dựng hệ thống vận hành và quản lý nội dung hiệu quả bằng cách sử dụng AI Agent.

  • Những ai muốn hiểu toàn bộ quy trình sản xuất web thực tế cần thiết trong kỷ nguyên AI và muốn tự mình tái hiện lại quy trình đó.


Hãy biến ý tưởng của bạn thành dịch vụ thực tế với AI và Next.js.
Từ lập kế hoạch đến vận hành, giờ đây bạn có thể thực hiện mọi thứ một cách suôn sẻ.

Lưu ý trước khi khóa học bắt đầu


Môi trường thực hành

  • Hệ điều hành: Có thể sử dụng Windows, macOS và Linux.

  • Phần mềm: Cần có Node.js (khuyến nghị phiên bản LTS mới nhất), Cursor (trình soạn thảo mã nguồn) và Git.

  • Cấu hình PC: Khuyến nghị RAM từ 8GB trở lên để phát triển web và chạy các công cụ AI. Việc lắp đặt ổ cứng SSD sẽ giúp môi trường thực hành mượt mà hơn.

Kiến thức tiên quyết và lưu ý

  • Nếu bạn đã có kinh nghiệm phát triển Frontend, bạn sẽ có thể hiểu nội dung bài giảng dễ dàng hơn.

  • Sẽ rất tốt nếu bạn có hiểu biết cơ bản về Next.js và JavaScript.

  • Nếu bạn lần đầu sử dụng các công cụ AI, việc tìm hiểu trước về cách viết prompt có thể sẽ giúp ích cho bạn.

Tài liệu học tập

  • File PDF slide bài giảng sẽ được cung cấp.

  • Tất cả các ví dụ mã nguồn được sử dụng trong thực hành sẽ được cung cấp thông qua GitHub.

  • Nên tham khảo tài liệu chính thức của các công cụ tạo hình ảnh và video AI (OpenAI Images 2.0, Kling, Higgsfield, v.v.).


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

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

  • Những người muốn nhanh chóng tạo trang web thực tế hoặc trang đích (landing page) bằng cách sử dụng AI.

  • Nhà phát triển trình độ sơ trung cấp muốn thử tạo một trang web có thể triển khai thực tế bằng Next.js

  • Nhà thiết kế/Người lập kế hoạch muốn thử ứng dụng các tài sản hình ảnh và video AI vào tương tác trên trang web.

  • Những người muốn nắm vững quy trình vận hành web từ SEO, kết nối tên miền, đăng ký công cụ tìm kiếm cho đến GA/GTM.

  • Những ai muốn xây dựng cấu trúc tự động hóa vận hành nội dung bằng các AI Agent như Codex hay Claude Code

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

  • Sẽ rất tốt nếu bạn biết các khái niệm cơ bản về HTML, CSS và JavaScript.

  • Nếu bạn đã từng có kinh nghiệm sử dụng React hoặc Next.js dù chỉ một lần, bạn sẽ dễ dàng theo kịp.

  • Sẽ rất tốt nếu bạn đã có kinh nghiệm chạy lệnh npm trong terminal và cài đặt dự án.

  • Nếu bạn biết cách sử dụng cơ bản của Git và GitHub, bạn sẽ dễ dàng hiểu được quy trình triển khai và quản lý phiên bản.

  • Không có kinh nghiệm sử dụng các công cụ AI cũng không sao, nhưng nếu bạn đã từng có kinh nghiệm viết câu lệnh (prompt) thì sẽ rất hữu ích.

Xin chào
Đây là ludgi

706

Học viên

34

Đánh giá

8

Trả lời

3.8

Xếp hạng

10

Các khóa học

Xin chào, tôi là đại diện của Công ty Cổ phần Ludge.


Tôi đã thực hiện nhiều dự án trong các lĩnh vực đa dạng như startup, tài chính và cơ quan nhà nước,

Tôi đã tích lũy được kinh nghiệm không chỉ trong việc phát triển mà còn trực tiếp vận hành dịch vụ.

Trong quá trình này, tôi đã rèn luyện được khả năng giải quyết vấn đề và hoàn thành dự án thông qua việc hợp tác với các thành viên trong nhóm và các freelancer. Đặc biệt, không chỉ dừng lại ở vai trò của một nhà phát triển, tôi tự mình...

Trong quá trình này, tôi đã rèn luyện được khả năng giải quyết vấn đề và hoàn thành dự án thông qua việc cộng tác với các thành viên trong nhóm và những người làm việc tự do.


Đặc biệt, tôi tin rằng mình có thể giúp ích nhiều hơn cho những ai có ước mơ tự vận hành dịch vụ của riêng mình, thay vì chỉ dừng lại ở vai trò của một nhà phát triển đơn thuần.

Tôi rất mong chờ chúng ta sẽ cùng nhau trải nghiệm niềm vui và cảm giác thành tựu khi hoàn thành mục tiêu để cùng nhau trưởng thành. Xin cảm ơn.

Thêm

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

Tất cả

19 bài giảng ∙ (3giờ 2phút)

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 khác của ludgi

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!

Ưu đãi có thời hạn

16.720 ₫

60%

895.263 ₫