Membuat Prototipe Aplikasi Desktop & Web Instan dengan Canva AI (Panduan Prompt Engineering)

 

Halo Siswa Kelas X! 👋

Selamat datang di materi Pemrograman Dasar. Jika biasanya kita pusing dengan sintaks coding, hari ini kita akan belajar skill yang tidak kalah mahalnya di industri teknologi saat ini: Prompt Engineering dan Rapid Prototyping.

Alih-alih mengetik kode Python dari nol, kita akan menggunakan Canva Magic Design untuk membangun kerangka aplikasi (website) secara instan. Tujuannya adalah melatih logika berpikir kalian dalam merancang sebuah sistem sebelum diterjemahkan ke dalam bahasa pemrograman.

Berikut adalah 6 Langkah Sakti membuat aplikasi menggunakan AI:

---

A. Mengidentifikasi Kebutuhan Fungsional

Sebelum menyuruh AI bekerja, kalian harus menjadi "Arsitek"-nya. AI butuh instruksi yang jelas.

Kalian harus menentukan IPO (Input - Proses - Output) dari aplikasi yang mau dibuat.

Contoh Kasus: Aplikasi Perpustakaan Sekolah

• Fungsionalitas Utama: Peminjaman buku & Cek stok buku.

• Input: Siswa memasukkan judul buku.

• Proses: Sistem mengecek ketersediaan di database.

• Output: Tampilan lokasi rak buku atau status "Dipinjam".

Tugasmu: Tentukan 1 ide aplikasi, lalu tulis 3 poin fungsionalitas utamanya di kertas.

---

B. Merancang Struktur Aplikasi 

Aplikasi berbasis web memiliki struktur standar. Karena kita menggunakan Canva Website, bayangkan struktur aplikasi kalian memanjang ke bawah (scrolling):

1. Hero Section (Beranda): Judul besar aplikasi dan tombol utama (misal: "Login" atau "Mulai").

2. About/Fitur: Penjelasan singkat aplikasi ini bisa apa saja.

3. Layanan/Service: Bagian interaktif (misal: Daftar Buku, Form Input).

4. Footer: Kontak dan Copyright.

Kalian tidak perlu menggambar, cukup susun urutannya di kepala agar nanti bisa dituliskan ke dalam Prompt.

---

C. Implementasi Bentuk Prompt

Ini adalah inti pelajaran kita. Prompt adalah perintah teks untuk AI. Rumus prompt yang baik untuk Canva Magic Design adalah:

$$TipeAplikasi+TargetPengguna+Nuansa/Tema+DetailIsi$$

Contoh Prompt yang SALAH:

"Buatkan website perpustakaan." (Terlalu umum, hasil akan acak).

Contoh Prompt yang BENAR (Structure):

"Buatkan landing page website aplikasi perpustakaan sekolah SMK (Tipe & Target). Gunakan gaya modern, teknologi, dengan warna dominan biru dan putih (Nuansa). Harus ada judul besar 'E-Library SMK', bagian daftar buku populer, dan formulir pencarian buku (Detail Isi)."

---

D. Menerapkan ke Canva AI

Sekarang, mari kita eksekusi di Canva!

Langkah-langkah:

1. Buka Canva (Pastikan sudah Login).

2. Di kolom pencarian utama, ketik "Website" lalu tekan Enter.

3. Pilih "Magic Design" (Biasanya muncul opsi Generate a website with AI atau klik tombol "Magic Design" di bagian template).

4. Masukkan Prompt yang sudah kalian racik di langkah C ke dalam kolom deskripsi.

5. Tekan Enter dan tunggu AI bekerja "menyihir" permintaan kalian.

Canva akan membuatkan tampilan UI (User Interface) lengkap dengan teks, gambar, dan tata letak secara otomatis.

---

E. Melakukan Analisis Kesesuaian dan Debugging

Dalam pemrograman, Debugging adalah mencari error kode. Dalam AI, Debugging adalah mencari Ketidaksesuaian Logika.

Cek hasil yang diberikan Canva:

1. Analisis Visual: Apakah warnanya sudah sesuai perintah? Apakah teksnya terbaca?

2. Analisis Fungsional: Apakah ada tombol yang hilang? (Misal: Kalian minta tombol "Cari Buku", tapi AI lupa membuatnya).

3. Analisis Konten: Apakah gambar yang dipilihkan AI nyambung? (Jangan sampai aplikasi perpustakaan tapi gambarnya orang sedang memasak).

---

F. Memperbaiki Prompt (Iterasi)

Jarang ada program yang sekali jadi langsung sempurna. Jika hasilnya belum pas, kalian harus melakukan Refining (Perbaikan Prompt).

Jangan langsung edit manual gambarnya! Cobalah minta AI lagi dengan perintah yang lebih spesifik.

• Masalah: Tampilannya terlalu kaku seperti koran.

• Perbaikan Prompt: Tambahkan kata kunci "Use minimalistic clean UI, rounded buttons, and interactive layout" (Gunakan UI minimalis bersih, tombol membulat, dan tata letak interaktif).

Ulangi langkah D dengan prompt baru ini sampai mendapatkan hasil yang paling mendekati bayangan kalian.

---

📝 Tantangan Praktikum

1. Buka Canva dan cari fitur Website.

2. Pikirkan satu aplikasi desktop/web sederhana.

3. Buat Prompt-nya dan Generate.

4. Lakukan perbaikan minimal 1 kali.

5. Publish Website (sebagai Free Domain di Canva) lalu kumpulkan Link-nya di kolom komentar blog ini!

Selamat berkarya dengan AI! Jadikan AI asistenmu, bukan penggantimu. 🚀

 

contoh promt 

" 

Buatkan desain antarmuka website aplikasi pendidikan matematika yang ceria, penuh warna, dan bergaya animasi 3D untuk siswa sekolah. Judul aplikasinya "Hitung Cepat Luas Bangun Datar".

Gaya Desain: Gunakan gaya kartun modern dengan tombol-tombol yang terlihat timbul (3D) dan warna-warni cerah (Kuning, Biru Langit, Merah Muda).

Konten Wajib:

1. Judul Besar: Di tengah dengan font yang tebal dan seru.

2. Menu Pilihan Rumus: Tampilkan 3 kartu besar yang terpisah untuk:

   • Persegi (Warna Kuning)

   • Persegi Panjang (Warna Biru)

   • Segitiga (Warna Merah)

3. Area Hitung: Sertakan ilustrasi kotak isian (Form Input) untuk memasukkan angka Panjang, Lebar, atau Tinggi.

4. Area Hasil: Kotak khusus untuk menampilkan jawaban luas.

Pastikan desainnya terlihat interaktif, seperti tombol yang siap ditekan.

"

hasilnya beemedia.my.canva.site/hitung-cepat-luas-bangun-datar