Hướng Dẫn Tạo Ứng Dụng Xem Tarot Sử Dụng Gemini API

Nền tảng: Hướng dẫn phát triển ứng dụng xem Tarot với Gemini API

Bạn có phải là một GenZ đang tìm kiếm những câu trả lời từ vũ trụ? 🤓 Đôi khi, để tự hiểu bản thân, bạn có thể cân nhắc việc xem Tarot. Câu chuyện bắt đầu khi mình đợi một người bạn rảnh để xem Tarot nhưng lại vô tình khám phá ra một đoạn prompt thú vị trên Tiktok về việc xem Tarot. Sau khi thử nghiệm qua cả ChatGPT và Gemini, mình phát hiện ra rằng cả hai đều có một thông điệp chung: Năng lượng vũ trụ đang rất mạnh mẽ. 😝

Nếu bạn đang nghiêm túc, có thể bỏ qua phần này. Kệ cho cái Năng lượng vũ trụ này đi!

Ý Tưởng Phát Triển

Ý tưởng của mình là thay vì chỉ ngẫu nhiên chọn ra 3 lá bài từ bộ 78 lá, mình sẽ hiển thị tất cả 78 lá bài để người dùng có thể lựa chọn 3 lá mà họ muốn. Sau đó, mình sẽ chỉnh sửa lại prompt để gọi API của Gemini, từ đó cung cấp cho người dùng kết quả chính xác hơn.

Triển Khai

Giao Diện Người Dùng

Công nghệ sử dụng: Mình chọn Next.js vì nó dễ triển khai và hỗ trợ quá trình làm việc trên Vercel. Để xây dựng giao diện, trước tiên, mình cần tải lên 78 hình ảnh của các lá bài Tarot và truy cập chúng qua S3 hoặc lưu trữ trực tiếp trong thư mục src.

Tiếp theo, mình tạo một bộ dữ liệu dưới dạng JSON cho các lá bài Tarot. Mình đã sử dụng ChatGPT để tạo dữ liệu này với cấu trúc bao gồm ID, tên lá bài, ý nghĩa chính và ngược lại, mô tả, cùng với đường dẫn hình ảnh.

Dữ liệu JSON mẫu:

json Copy

[
    {
        "id": 0,
        "name": "The Fool",
        "mainMeaning": "Khởi đầu, ngây thơ, tự phát, tinh thần tự do",
        "reverseMeaning": "Kiềm chế, liều lĩnh, mạo hiểm",
        "description": "The Fool là biểu tượng của khởi đầu mới, tin tưởng vào tương lai và sự ngây thơ.",
        "src": "/the-fool.png",
        "type": "major-arcana"
    },
    ...
]

Random Các Lá Bài Tarot

Mình đã viết một hàm để trộn (shuffle) thứ tự hiển thị của các lá bài và hiển thị các lựa chọn cho người dùng. Mỗi khi người dùng muốn chọn lại, họ có thể nhấn nút để làm mới danh sách lá bài.

Kết Nối với Gemini API

Bước 1: Tạo một API Key trên trang aistudio.google và thêm vào file .env của dự án.
Bước 2: Cập nhật prompt để phù hợp với mục đích.
Bước 3: Xử lý logic và kết nối với Gemini API.

Mình đã thiết lập mã để quản lý số lượng yêu cầu gửi tới API nhằm bảo đảm không vượt quá hạn mức. API sẽ trả về thông điệp liên quan đến 3 lá bài mà người dùng đã chọn.

Triển Khai Ứng Dụng

Cuối cùng, để triển khai ứng dụng, bạn cần tạo một kho lưu trữ GitHub và kết nối với tài khoản Vercel của mình để tiến hành triển khai. Sau khi thiết lập mọi thứ, bạn có thể chạy ứng dụng trên địa chỉ URL mà Vercel cung cấp.

Demo Và Tài Nguyên Tham Khảo

Truy cập vào tarot1.bunhere.com để xem phiên bản demo. Phiên bản chính thức có thể được tìm thấy tại tarot.bunhere.com.

Kết Luận

Hy vọng bạn sẽ tìm thấy những thông tin hữu ích trong bài viết này. Chúc bạn mãi tìm thấy niềm vui và sự hứng khởi trong hành trình khám phá bản thân qua Tarot! 👩🏼‍💻

Tác giả: bunhere.com
Rất mong nhận được phản hồi từ bạn về bài viết này! ❤️
source: viblo