Bina Web App AI Custom dengan Claude Artifacts & Templates

Customizing the AI Tutor Template

Cara Menggunakan Claude Artifacts Gallery

1. Buka pelayar web dan log masuk ke akaun Claude.ai anda.
2. Cari dan akses bahagian 'Claude Artifacts Gallery' untuk melihat koleksi template aplikasi sedia ada.
3. Skrol melalui galeri untuk melihat pelbagai jenis aplikasi seperti 'Office Simulator', 'Tutor', atau alat produktiviti lain.
4. Pilih satu template yang anda ingin gunakan sebagai asas dengan klik pada kad aplikasi tersebut.
5. Aplikasi tersebut akan dibuka dalam panel Artifact di sebelah kanan skrin untuk anda lihat fungsinya secara 'live'.

Customise Template Menggunakan Prompt

1. Pergi ke ruangan chat Claude di sebelah kiri panel Artifact.
2. Taip prompt yang spesifik untuk mengarahkan Claude mengubah suai template tersebut mengikut keperluan anda (rujuk Prompt Card).
3. Tekan 'Enter' dan tunggu Claude menjana semula kod aplikasi berdasarkan arahan baru anda.
4. Setelah Artifact baru muncul, cuba berinteraksi dengan elemen aplikasi (seperti butang atau input) untuk memastikan fungsinya mengikut kehendak anda.

Publish dan Kongsi Web App

1. Klik butang 'Publish' yang terletak di bahagian atas penjuru kanan panel Artifact.
2. Satu pop-up akan muncul, klik butang 'Publish & Copy Link' untuk menghoskan aplikasi tersebut secara automatik di web.
3. Buka tab baru dalam pelayar (dicadangkan guna Incognito mode) dan 'Paste' link tersebut untuk melihat rupa aplikasi anda sebagai pengguna luar.
4. Hantar link tersebut kepada sesiapa sahaja untuk dikongsi; mereka boleh menggunakan aplikasi tersebut terus dari pelayar web.

Cara Membaiki Error Secara Automatik

1. Jika aplikasi anda tidak berfungsi atau memaparkan mesej ralat, jangan panik.
2. Highlight dan 'Copy' (Salin) keseluruhan mesej ralat atau 'error message' yang muncul pada skrin.
3. Paste mesej ralat tersebut ke dalam ruangan chat Claude dan arahkan Claude untuk membaikinya.
4. Tunggu Claude memberikan versi kod yang telah dikemas kini.
5. Uji semula aplikasi tersebut, dan jika sudah berfungsi, klik 'Publish' sekali lagi untuk mengemas kini link sedia ada.