Giới thiệu

Trong những năm qua, tôi đã phát triển các ứng dụng web sử dụng nền tảng web một cách truyền thống. Gần đây, cùng với nhiều người khác, tôi đã tìm hiểu về khả năng sử dụng trí tuệ nhân tạo (AI) để hỗ trợ trong việc tạo ra các mẫu, thành phần và thậm chí là toàn bộ ứng dụng. Trong bài viết này, tôi sẽ để Google Gemini tạo mọi thứ cho một bản demo web đơn giản, sử dụng các thành phần web và xem kết quả như thế nào.

Tập dữ liệu đơn giản

Để có dữ liệu, tôi đã yêu cầu Gemini tạo một tệp JSON chứa danh sách 100 tiểu thuyết cổ điển hàng đầu:

Câu lệnh: "Tạo một tệp JSON có cấu trúc, bao gồm danh sách 100 tiểu thuyết cổ điển hàng đầu, bao gồm tác giả, tiêu đề, năm phát hành và một tóm tắt ngắn."

Chỉ trong vài giây, tôi nhận được một tệp JSON chứa thông tin như sau:

{
  "classic_novels": [
    {
      "author": "Homer",
      "title": "The Odyssey",
      "release_year": -800,
      "synopsis": "Câu chuyện sử thi về Odysseus, vua của Ithaca, và hành trình trở về nhà kéo dài mười năm sau cuộc chiến thành Troy, đối mặt với những sinh vật huyền bí và những vị thần giận dữ."
    },
    {
      "author": "Mary Shelley",
      "title": "Frankenstein",
      "release_year": 1818,
      "synopsis": "Một nhà khoa học trẻ, Victor Frankenstein, tạo ra một sinh vật có trí tuệ trong một thí nghiệm khoa học không chính thống, dẫn đến những hậu quả bi thảm cho cả hai."
    },
    {
      "author": "Jane Austen",
      "title": "Pride and Prejudice",
      "release_year": 1813,
      "synopsis": "Câu chuyện về Elizabeth Bennet, người điều hướng những vấn đề về cách cư xử, giáo dục, đạo đức và hôn nhân trong xã hội quý tộc Anh thế kỷ 19."
    },
    {
      "author": "George Orwell",
      "title": "1984",
      "release_year": 1949,
      "synopsis": "Trong một siêu quốc gia dystopian được cai trị bởi Đảng toàn trị, Winston Smith bí mật chống đối chế độ, một hành động dẫn anh đến việc đặt câu hỏi về mọi thứ mà anh biết."
    },
    {
      "author": "Harper Lee",
      "title": "To Kill a Mockingbird",
      "release_year": 1960,
      "synopsis": "Được kể bởi một cô gái trẻ tên Scout Finch, tiểu thuyết này khám phá các chủ đề về bất công chủng tộc và sự mất mát của sự ngây thơ ở miền Nam nước Mỹ trong thời kỳ Đại Khủng Hoảng."
    }
  ]
}

Làm cho nó hiển thị

Sau đó, tôi đã yêu cầu Gemini tạo một trang HTML độc lập, nơi có thể tải tệp JSON và hiển thị nó chỉ bằng các tiêu chuẩn web, và lại trong vài giây, kết quả đã có:

Câu lệnh: "Bây giờ hãy tạo một trang web độc lập (HTML), nơi có thể tải tệp này và hiển thị trong một bảng, nơi người dùng có thể sắp xếp theo tác giả, tiêu đề hoặc năm phát hành. Không sử dụng bất kỳ phụ thuộc bên ngoài nào và các mục nên được hiển thị như một thẻ, được hiển thị giống như một thẻ thư viện cổ điển - sử dụng các thành phần web nhưng chỉ sử dụng các tiêu chuẩn web nguyên bản."

Chức năng sắp xếp hoạt động như mong đợi - thật tuyệt vời :)

Tôi đã yêu cầu Gemini sửa đổi HTML để thêm hiệu ứng chuyển tiếp khi nhấp vào một thẻ để đưa nó vào tiêu điểm và một lần nữa, trong vài giây, kết quả đã có:

Câu lệnh: "Bạn có thể thay đổi HTML, để khi một thẻ được nhấp, nó sẽ thực hiện một chuyển tiếp hình ảnh để lấp đầy màn hình và khi nhấp lại, nó sẽ quay lại danh sách."

Nhìn vào mã

Khi xem qua HTML được tạo ra, thật tuyệt khi thấy các chú thích giải thích lý do phía sau các chức năng mà tôi không yêu cầu một cách rõ ràng, nhưng có lý trong ngữ cảnh - trong trường hợp này - là hình ảnh hóa năm xuất bản:

// Trợ giúp định dạng năm (ví dụ: -800 -> 800 TCN)
formatYear(year) {
    if (year < 0) {
        return `${Math.abs(year)} TCN`;
    }
    return year;
}

Cũng thật tốt khi thấy cách Gemini đã chọn xây dựng một hàm sắp xếp để xử lý cả văn bản (tiêu đề và tác giả) và số (năm xuất bản):

function sortData(key) {
    if (!novelsData || novelsData.length === 0) return;

    novelsData.sort((a, b) => {
        if (typeof a[key] === 'string') {
            // So sánh chuỗi không phân biệt chữ hoa chữ thường
            return a[key].localeCompare(b[key]);
        } else if (typeof a[key] === 'number') {
            // So sánh số
            return a[key] - b[key];
        }
        return 0;
    });
}

Đối với các trình duyệt không hỗ trợ API chuyển tiếp hình ảnh, còn có một phương thức thay thế:

cardContainer.addEventListener('click', (event) => {
    const clickedCard = event.target.closest('library-card');
    if (!clickedCard) return;

    const isFocused = clickedCard.classList.contains('focused');

    // Sử dụng API chuyển tiếp hình ảnh
    if (document.startViewTransition) {
        document.startViewTransition(() => {
            toggleFocus(clickedCard, !isFocused);
        });
    } else {
        toggleFocus(clickedCard, !isFocused);
    }
});

Nói chung, mã JavaScript, CSS và HTML được tạo ra hoàn thành nhiệm vụ và tôi rất ấn tượng.

Tạo một trò chơi

Sau khi thấy cách Gemini xử lý tốt nhiệm vụ, tôi muốn thử thách nó với một nhiệm vụ hơi khó khăn hơn: Tạo một trò chơi nhỏ với đầu vào từ bàn phím, âm thanh và tất cả.

Câu lệnh: "Sử dụng các tiêu chuẩn web nguyên bản, tạo một trò chơi nhỏ trong một tệp HTML độc lập, nơi có thể điều khiển một chiếc xe ô tô nhìn từ trên xuống, sử dụng các phím mũi tên trên bàn phím. Cũng bao gồm âm thanh hiệu ứng phát sinh thực tế sử dụng âm thanh web. Có thể 'lái' xe ô tô xung quanh trên màn hình, thu thập tiền xu được đặt ngẫu nhiên. Sẽ có một số điểm tích lũy ở góc trên bên phải."

Chỉ trong vài giây, nó đã cung cấp:

Lưu ý: Âm thanh không được ghi lại trong video, nhưng bạn có thể thử nghiệm trò chơi tại đây.

Kết luận

Thật thú vị và ấn tượng khi thấy cách dễ dàng để tạo ra các bản demo web hoàn chỉnh chỉ với một vài yêu cầu đơn giản gửi đến Gemini. Ngay cả khi đầu ra có thể không hoàn toàn như mong đợi, mã được cấu trúc tốt và dễ đọc, dễ chỉnh sửa.

Mã được tạo ra có thể được tìm thấy tại đây.

Hy vọng bạn thích :)