Cipta visualisasi kod interaktif dengan Gemini 3 Pro Canvas | Alpha | PandaiTech

Cipta visualisasi kod interaktif dengan Gemini 3 Pro Canvas

Menggunakan ciri Canvas dalam Gemini 3 Pro untuk menjana kod dashboard visual serta menggunakan ciri 'Ask Gemini' untuk menambah elemen menarik seperti teleskop angkasa lepas.

Learning Timeline
Key Insights

Penjanaan Idea Ciri Automatik

Ciri 'Ask Gemini' dalam Canvas bertindak sebagai pembangun bersama (co-developer). Daripada menaip prompt secara manual untuk menambah ciri tertentu, anda boleh klik butang ini untuk mendapatkan cadangan yang sesuai dengan konteks bagi menambah baik aplikasi anda.

Kapasiti Kod Canvas

Gemini Canvas mampu mengendali dan memaparkan kod yang banyak dalam satu masa (contohnya, lebih 600 baris kod) untuk menghasilkan dashboard interaktif yang kompleks.
Prompts

Meta-Prompt untuk Demonstrasi Keupayaan

Target: Gemini 3 Pro
Give me a prompt to show the power of Gemini 3 Pro.
Step by Step

Menghasilkan dan Menambah Baik Aplikasi dengan Gemini Canvas

  1. Masukkan prompt ke dalam Gemini 3 Pro yang meminta visual dashboard atau aplikasi interaktif.
  2. Tunggu sehingga antara muka bertukar ke mod 'Canvas', yang akan membahagikan skrin kepada code editor dan paparan live preview.
  3. Biarkan proses penjanaan kod selesai sepenuhnya (contohnya, penghasilan fail HTML/CSS/JS).
  4. Cuba gunakan paparan preview di sebelah kanan untuk menguji fungsi semasa.
  5. Cari butang 'Ask Gemini' atau pilihan ciri tersebut dalam antara muka Canvas.
  6. Klik 'Ask Gemini' untuk meminta AI menganalisis kod semasa dan mencadangkan penambahbaikan yang logik.
  7. Pilih cadangan penambahbaikan (contohnya, 'Add deep space telescope') untuk mengubah suai kod secara automatik dan mengemas kini preview.
  8. Semak visualisasi yang telah dikemas kini untuk memastikan ciri baharu tersebut telah dimasukkan.

More from Coding & Pembangunan Aplikasi AI

View All