Penampil App

Apa itu Penampil App?

Saat Agen AI menyelesaikan tugas, Penampil App akan muncul di bagian atas halaman. Fitur ini memungkinkan Anda mempratinjau app live Anda dan melakukan edit visual secara langsung — tanpa perlu coding.

Sebelum Anda Memulai

• Pemrosesan Agen mungkin memerlukan beberapa saat — harap tunggu dengan sabar.
• Periksa panel Terminal di sebelah kanan untuk melihat progres terperinci. Panel Terminal menampilkan log real-time tentang apa yang sedang dilakukan Agen AI, termasuk pembuatan file, generasi kode, dan error apa pun yang ditemukan selama proses build.
• Klik ikon Refresh kapan saja untuk memuat ulang pratinjau.

Cara Menggunakan Penampil App

Langkah 1: Tunggu pratinjau dimuat

Setelah Agen selesai, Penampil App memuat pratinjau Anda di jendela pratinjau utama.

⏱️ Biasanya memerlukan beberapa detik hingga satu menit.

Jika memerlukan waktu lebih dari 2 menit: Klik ikon Refresh di toolbar Penampil App. Jika masih macet, periksa panel Terminal untuk error (lihat Langkah 3 di bawah).

Langkah 2: Pratinjau app Anda

Setelah dimuat, Anda dapat melihat app live Anda di jendela pratinjau.

• Desktop / Tablet / Mobile — Gunakan toolbar perangkat di bagian atas jendela pratinjau untuk beralih antar tampilan dan menguji responsivitas. Toolbar menampilkan tiga ikon yang mewakili perangkat desktop, tablet, dan mobile. Klik setiap ikon untuk melihat bagaimana tampilan app Anda pada berbagai ukuran layar tanpa meninggalkan halaman.
• Buka di tab baru— Klik ikon panah di sudut kanan atas jendela pratinjau untuk membuka pratinjau di tab browser terpisah. Ini sangat berguna jika pratinjau tersemat macet atau tidak responsif.

Langkah 3: Periksa error (jika ada yang terlihat salah)

Jika app Anda tidak dimuat atau terlihat rusak, periksa panel Console untuk pesan error.

Panel Console terletak di sisi kanan layar, di bawah tab Terminal. Panel ini menampilkan log sistem dan pesan error yang dihasilkan selama proses build.

Jika Anda melihat pesan error berwarna merah, biasanya pesan tersebut mencakup:

• Deskripsi tentang apa yang salah
• File dan nomor baris tempat error terjadi
• Stack trace untuk membantu mengidentifikasi akar penyebab

Untuk memperbaiki error: (Untuk detail lebih lanjut, silakan lihat: Laporan Masalah)

• Klik "Resolve" — AI akan menganalisis dan memperbaiki semua bug yang teridentifikasi secara otomatis.
• Pratinjau akan dimuat ulang setelah perbaikan diterapkan. Anda dapat memantau progres secara real-time melalui panel Terminal.

Tidak ada tombol "Resolve"?

Klik "..." (opsi lainnya) di samping pesan terbaru Agen, lalu pilih "Feedback" untuk melaporkan masalah kepada tim dukungan kami. Harap sertakan Link Chat Anda dan tangkapan layar error tersebut.

Langkah 4: Ubah app Anda

Metode 1: Klik untuk mengedit (direkomendasikan untuk perubahan visual)

Klik elemen apa pun secara langsung di jendela pratinjau. Editor visual akan muncul di sisi kiri layar, memungkinkan Anda menyesuaikan:

• Warna — Ubah warna teks, warna latar belakang, atau warna border dengan pemilih warna
• Spasi — Sesuaikan padding, margin, dan jarak antar elemen
• Tipografi — Ubah ukuran, ketebalan, dan keluarga font
• Tata letak — Ubah perataan, pengaturan flexbox, atau properti grid
• Konten teks — Edit teks secara langsung di editor

Setelah Anda membuat perubahan, pratinjau akan langsung diperbarui sehingga Anda dapat melihat hasilnya secara real-time.

Editor visual juga mencakup tab Library tempat Anda dapat menelusuri dan menambahkan aset siap pakai seperti ikon, gambar, dan komponen UI ke proyek Anda.

Metode 2: Jelaskan di chat

Beri tahu Agen AI apa yang ingin Anda ubah menggunakan bahasa alami. Contohnya:

• "Buat warna latar belakang lebih gelap"
• "Kurangi padding di sekitar header"
• "Ubah warna tombol menjadi biru"

AI akan memahami permintaan Anda dan menerapkan perubahan pada app Anda.

Referensi Cepat

• Refresh pratinjau – Klik ikon Refresh di toolbar Penampil App untuk memuat ulang jendela pratinjau.
• Ganti tampilan perangkat – Gunakan ikon Desktop, Tablet, atau Mobile di toolbar pratinjau untuk menguji bagaimana tampilan app Anda pada berbagai ukuran layar.
• Buka di tab baru – Klik ikon panah di sudut kanan atas jendela pratinjau untuk membuka pratinjau di tab browser terpisah.
• Lihat log error – Periksa panel Console di sisi kanan layar untuk pesan error dan log sistem.
• Perbaiki error secara otomatis – Klik tombol "Resolve" di notifikasi Laporan Masalah agar AI memperbaiki semua bug yang teridentifikasi.
• Edit elemen visual – Klik elemen apa pun di jendela pratinjau untuk membuka editor visual di sisi kiri.
• Laporkan masalah – Klik "..." → "Feedback" pada pesan Agen mana pun untuk melaporkan masalah kepada tim dukungan.

FAQ

Mengapa Penampil App saya menampilkan layar loading?

Tampilan loading berarti website sedang dimuat. Penampil App berfungsi normal. Tunggu sebentar hingga pratinjau dimuat dengan benar. Jika memerlukan waktu lebih dari 2 menit, coba klik ikon Refresh atau periksa panel Console untuk error.

Mengapa Penampil App saya menampilkan pesan error berwarna merah?

Agen dapat mengalami masalah selama proses build, yang terkadang dapat menyebabkan error pada halaman web. Klik "Resolve," dan Agen akan memperbaiki error tersebut untuk Anda. Setelah diperbaiki, Penampil App akan melakukan pratinjau secara normal, jadi tidak perlu khawatir jika muncul pesan error merah.

Mengapa saya tidak bisa menghapus badge Atoms dari halaman yang saya publikasikan?

Penghapusan badge memerlukan Pro atau yang lebih tinggi. Anda dapat meningkatkan kapan saja dari Settings → Plans & Billing. Setelah upgrade, badge akan otomatis dihapus dari halaman yang Anda publikasikan.

Untuk upgrade, klik avatar Anda di sudut kanan atas, pilih Settings, lalu buka Plans & Billing. Pilih paket Pro atau Max dan selesaikan proses upgrade. Setelah di-upgrade, badge Atoms tidak akan lagi muncul di halaman yang Anda publikasikan.