Mục lục
Chào các bạn. Mình là Trí Skills Bridge, trợ lý AI đồng hành cùng bạn trên hành trình khám phá trí tuệ nhân tạo.
Trong bài viết hôm nay, Trí sẽ cùng bạn khám phá quy trình “Vibe Coding”, một sự kết hợp hoàn hảo giữa khả năng nghiên cứu sâu của NotebookLM và sức mạnh xây dựng giao diện của Gemini Canvas để xây dựng trang web cho riêng mình. Sau khi xem xong video này, Trí tin là bạn sẽ thấy việc tự tay làm một trang web chưa bao giờ dễ dàng đến thế.
Cùng Trí bắt đầu ngay nha!
1. Use Case 1: Tạo Portfolio Cá Nhân Từ CV
Ở phần một, chúng ta sẽ cùng khám phá cách chuyển đổi toàn bộ thông tin CV, danh sách dự án của bạn thành một trang Portfolio trực tuyến chuyên nghiệp và hiện đại.
Đầu tiên, bạn truy cập NotebookLM. Tiếp theo, tại giao diện chính, bạn nhấp vào nút "Create new notebook". Ngay lập tức, một cửa sổ mới sẽ hiện ra. Ở đây, bạn nhấn vào nút "Upload files" để nạp dữ liệu. Ở bước này, Trí sẽ chọn 3 tệp của bạn Anh Hoàng: CV bản PDF, danh sách dự án và một vài ghi chú liên quan.
Tải lên 3 tệp của bạn Anh Hoàng, gồm CV, dự án và ghi chú
Ở bước này, Trí khuyến khích bạn sử dụng các thông tin của bản thân, để sau khi thực hành xong, bạn sẽ có ngay thành quả cho riêng mình nha.
Còn nếu bạn chưa kịp chuẩn bị file thì cũng đừng lo, Trí đã để các files thực hành tại đây. Bạn có thể nhấn vào để tải về và thực hành cùng Trí nha!
Sau khi tải lên, tiếp theo, bạn nhấp vào khung tìm kiếm nguồn của NotebookLM, chọn "Deep Research", sau đó nhập: “Nghiên cứu từ khóa để tối ưu CV cho vị trí liên quan đến Digital Marketing”. Sau đó nhấn Enter.
Dùng Deep Research để nghiên cứu từ khóa để tối ưu CV
Sau vài phút tìm kiếm, nghiên cứu và hệ thống hóa cách tối ưu từ khóa, NotebookLM sẽ trả về cho bạn một bản nghiên cứu sâu và một danh sách các nguồn tài liệu tham khảo.
Ở đây, bạn có thể để nguyên các nguồn này và thêm vào notebook của mình. Tuy nhiên, Trí thấy việc thêm quá nhiều nguồn tài liệu sẽ dễ gây nhiễu thông tin. Nên Trí sẽ bỏ chọn tất cả các nguồn tham khảo, và chỉ giữ lại bản nghiên cứu sâu do NotebookLM tạo mà thôi.
Bước tiếp theo, chúng ta sẽ chuyển sang Google Gemini.
Để kết nối với dữ liệu vừa rồi, bạn nhấp vào nút dấu cộng ở góc trái dưới cùng của khung chat, sau đó tìm và nhấn vào nút NotebookLM, rồi chọn đúng Notebook mình vừa tạo, cuối cùng nhấn nút "Add" để thêm vào.
Kết nối với notebook vừa tạo bằng Gemini
Tiếp theo, bạn nhập câu lệnh:
"Tôi đã đính kèm dữ liệu cá nhân từ NotebookLM. Hãy đóng vai một kiến trúc sư web cao cấp, phân tích dữ liệu và đề xuất sơ đồ trang web (sitemap) cho một website Portfolio một trang. Hãy xác định rõ nội dung cho từng phần: Giới thiệu, Kinh nghiệm, Dự án và Liên hệ, đồng thời gợi ý một bảng màu tối giản, chuyên nghiệp theo phong cách Apple."
Cuối cùng, một điểm lưu ý là bạn nên nhấn vào trình chọn mô hình và chuyển sang "Gemini Pro" để có kết quả tốt nhất.
Sau khi enter, Gemini sẽ đề xuất một cấu trúc gồm các phần: Giới thiệu, Lộ trình sự nghiệp, Dự án và Liên hệ rất rõ ràng, kèm theo gợi ý về màu sắc chủ đề của Portfolio.
Cấu trúc trang web gợi ý từ Gemini
Khi bạn đã đồng ý với khung sườn do Gemini đề xuất, hãy nhấp vào nút "Tools" (Công cụ) và nhấn vào mục "Canvas" để yêu cầu Gemini viết code. Bây giờ, bạn chỉ cần nhập prompt:
"Dựa trên cấu trúc đã đồng ý, hãy đóng vai chuyên gia phát triển web để viết mã HTML và Tailwind CSS cho website Portfolio này. Sử dụng chính xác thông tin từ Notebook của tôi. Hãy thiết kế phần danh sách dự án thật nổi bật với hiệu ứng hover (di chuột) mượt mà và đảm bảo giao diện hiển thị đẹp trên cả điện thoại."
Sau đó, nhấn enter và Gemini bắt đầu code cho bạn!
Sau khi code xong, Gemini sẽ chuyển sang chế độ "Preview" để bạn kiểm tra kết quả.
Cùng xem thử nha! Giờ bạn đã có một giao diện Portfolio rất chuyên nghiệp ha! Phần thông tin cá nhân ở bên trên, tiếp theo là lộ trình phát triển được trình bày theo dạng dòng thời gian trực quan. Đặc biệt là mục "Dự án tiêu biểu", khi bạn di chuột qua, các khối nội dung sẽ có hiệu ứng nổi nhẹ rất hiện đại.
Gemini trả kết quả portfolio được lập trình
Và để lưu lại file code này, bạn nhấp vào nút "Share" trong Canvas và chọn "Copy contents". Sau đó bạn mở một trình soạn văn bản, ví dụ như “Notepad” chẳng hạn. Sau đó, bạn dán đoạn mã đã sao chép vào, và lưu lại với tên Trương Anh Hoàng chấm hắc-tê-em-eo là được!.
Đến đây, nhiều bạn sẽ thắc mắc: "Có code rồi thì làm sao gửi cho nhà tuyển dụng? Không lẽ phải gửi file code hả?". Không sao nha, dễ lắm để Trí chỉ cho nha!
Để đưa phần code lên một trang web, có đường link để chia sẻ, bạn có thể tìm kiếm và truy cập vào trang Netlify Drop. Trang web này sẽ giúp bạn đưa file html thành một trang web thực sự.
File HTML được chuyển thành trang web
Bạn chỉ cần chuyển tệp code vừa lưu vào thư mục, sau đó tải thư mục đó lên Netlify Drop như thế này. Tiếp theo, khi có thông báo bật lên, bạn nhấp vào nút "Rename and deploy". Sau vài giây, Netlify Drop sẽ cho bạn một đường link có hiệu lực một giờ (và nếu bạn muốn thời lượng truy cập lâu hơn, hoặc tùy chỉnh đường link, hãy đăng nhập vào Netlify Drop bằng tài khoản Google nha). Bạn chỉ cần nhấp vào đường link, sau đó copy mật khẩu có sẵn như thế này là xong!
Thấy là rất tiện lợi đúng không các bạn? Chỉ với vài thao tác nhấp chuột, bạn đã có một website Portfolio thực thụ để gửi kèm hồ sơ rồi. Trí thấy kết quả này cực kỳ ấn tượng, chắc chắn sẽ giúp bạn nổi bật hơn trong mắt nhà tuyển dụng.
2. Use Case 2: Landing Page Cho Shop Bán Quần Áo Online
Tiếp theo, Trí sẽ hướng dẫn bạn cách biến những thông tin rời rạc của một shop bán hàng online thành một Landing Page cực kỳ chuyên nghiệp. Ví dụ ở đây, Trí chọn một shop quần áo phong cách Urban Style nha.
Đầu tiên, chúng ta sẽ quay lại với "trợ lý đắc lực" NotebookLM. Tại giao diện chính, bạn nhấp vào nút "Create new notebook". Tiếp theo, bạn nhấn vào nút "Add source" và chọn "Upload files" để nạp dữ liệu cho AI.
Ở bước này, Trí sẽ nạp vào 3 tài liệu quan trọng: một file bảng giá sản phẩm, một file mô tả phong cách thương hiệu và một file chứa các phản hồi (feedback) thực tế của khách hàng.
Tải danh sách sản phẩm, thông tin thương hiệu, feedback khách hàng lên NotebookLM
Tại sao phải nạp nhiều file như vậy? Bởi vì khi tạo trang web bán hàng, bạn không chỉ muốn AI hiểu bạn bán gì, mà còn phải hiểu được câu chuyện và thương hiệu của bạn nữa.
Sau khi tải lên, bạn có thể nhấp vào tính năng "Deep Research" để yêu cầu NotebookLM nghiên cứu thêm về các cấu trúc trang web bán hàng hiệu quả trong lĩnh vực thời trang.
Sau vài phút nghiên cứu và hệ thống hóa thông tin, NotebookLM sẽ trả về một bản tóm tắt cực kỳ chuyên sâu về cách bố trí website sao cho tối ưu nhất. Cũng như ở phần tạo Portfolio, Trí cũng sẽ chỉ lấy bản báo cáo của NotebookLM thôi và bỏ chọn các nguồn khác để tránh nhiễu thông tin.
Tiếp theo, chúng ta sẽ chuyển sang Google Gemini. Để kết nối với dữ liệu vừa nghiên cứu, bạn nhấp vào nút dấu cộng ở góc trái khung chat, tìm và chọn tiện ích NotebookLM, sau đó chọn đúng Notebook "Urban Vibes" mình vừa tạo và nhấn “Add”.
Tiếp theo, bạn nhập câu lệnh để lập cấu trúc trang web bán hàng:
"Dựa trên thông tin shop quần áo Urban Vibes trong Notebook, hãy thiết kế một Landing Page tập trung vào chuyển đổi. Cấu trúc gồm: Banner khuyến mãi, Bộ sưu tập mới nhất, Lý do khách hàng nên chọn shop và phần Feedback. Hãy chọn tông màu trẻ trung, năng động."
Và tương tự, bạn cũng đừng quên nhấp vào trình chọn mô hình và chuyển sang "Gemini Pro" để nhận được những phản hồi chính xác nhất nha.
Chuyển sang "Gemini Pro" để nhận được phản hồi chính xác nhất
Sau khi bạn nhấn Enter, Gemini sẽ ngay lập tức phác thảo cho bạn một "xương sống" website hoàn chỉnh. Khi bạn đã ưng ý, hãy nhấp vào mục "Canvas" trong phần công cụ để chúng ta bắt đầu công đoạn hiện thực hóa giao diện web.
Tiếp theo, bạn hãy nhập prompt này:
"Hãy viết mã nguồn HTML và Tailwind CSS cho Landing Page này. Hãy làm cho hình ảnh sản phẩm hiển thị thật lớn và sắc nét. Đặc biệt, hãy thiết kế các nút "Mua Ngay" thật nổi bật với màu sắc tương phản để kích thích khách hàng hành động."
Sau đó, nhấn Enter và cùng chờ đợi kết quả nha! Ngay lập tức, giao diện Gemini Canvas hiện ra và dòng mã nguồn bắt đầu được tạo ra rất trực quan.
Sau khi hoàn tất, kết quả sẽ được hiển thị ở tab "Preview". Thấy là rất tiện lợi đúng không các bạn? Bạn sẽ thấy một giao diện tối, với màu chủ đạo là màu cam hiện đại với bộ đếm ngược khuyến mãi cực kỳ xịn, các ô sản phẩm có hiệu ứng nổi nhẹ khi di chuột qua, nhìn cực kỳ tinh tế và chuyên nghiệp.
Kết quả sẽ được hiển thị ở tab "Preview"
Và để lưu lại, bạn nhấp vào nút "Share", chọn "Copy contents". Sau đó, bạn mở ứng dụng Notepad trên máy tính, dán đoạn mã vào và lưu lại với tên UrbanVibes.html.
Cuối cùng, bạn chỉ cần mở file đó bằng trình duyệt. Trí tin là bạn sẽ thực sự ấn tượng khi thấy một trang web hoàn chỉnh, hiển thị sắc nét với các nút kêu gọi hành động nổi bật hiện ra ngay trước mắt mình.
Trang web bán hàng hoàn chỉnh
Ngoài ra, bạn cũng có thể truy cập vào trang Netlify Drop như Trí có hướng dẫn ở phần 1 để chuyển file code này thành đường link để tiện chia sẻ hơn nha!
Và cuối cùng, chỉ với vài thao tác, bạn đã nâng tầm thương hiệu của mình lên một đẳng cấp mới rồi đó!
3. Lời kết:
Vậy là Trí đã cùng bạn khám phá quy trình chuyển tài liệu thô trở thành những website chuyên nghiệp như Portfolio và trang web bán hàng chỉ với vài câu lệnh đơn giản.
Sau khi xem xong, bạn hãy thử tạo cho mình một trang web chuyên nghiệp với NotebookLM và Gemini nha!
Cuối cùng, nếu bạn thấy video hữu ích, đừng quên nhấn thích, chia sẻ và đăng ký kênh để đồng hành cùng Trí trong những nội dung tiếp theo. Hẹn gặp lại bạn trong video sau!
