LKPD: Koding & Kecerdasan Artifisial (KKA)

Halo semuanya! Pada postingan materi sebelumnya, kalian sudah berkomentar mengenai ide rencana pembuatan aplikasi sederhana berbasis HTML (seperti contoh: penghitung luas bidang datar).

Hari ini, saatnya kita mengubah Rencana tersebut menjadi Realisasi menggunakan kekuatan Artificial Intelligence (AI) yang ada di Canva. Kita akan belajar bagaimana memberikan perintah (Prompt) yang tepat agar AI membuatkan kode dan desain untuk kita.

B. Tujuan Pembelajaran

1. Siswa mampu merumuskan Prompt yang detail untuk menghasilkan kode program.

2. Siswa mampu menggunakan fitur Canva Magic Write untuk men-generate kode HTML/CSS/JS.

3. Siswa mampu mempublikasikan hasil kerjanya menjadi sebuah Website (Landing Page) yang bisa diakses publik.

C. Alat dan Bahan

• Akun Canva (Belajar.id atau Pribadi).

• Browser (Chrome/Edge).

• Ide aplikasi (dari komentar kalian sebelumnya).

---

D. Langkah Kerja (Step-by-Step)

Ikuti panduan langkah demi langkah berikut ini:

Langkah 1: Siapkan Prompt (Perintah)

Buka kembali komentar kalian di materi sebelumnya. Ubah ide tersebut menjadi kalimat perintah yang detail untuk AI.

Rumus Prompt yang Baik: [Peran] + [Tugas Utama] + [Fitur Spesifik] + [Gaya Desain/Kode]

Contoh Prompt: "Bertindaklah sebagai programmer web. Buatkan kode HTML lengkap dengan CSS internal dan JavaScript untuk membuat aplikasi sederhana 'Kalkulator Luas Lingkaran'. Tampilannya harus modern, berwarna biru muda, dan responsif. Sertakan kolom input untuk jari-jari dan tombol hitung."

Langkah 2: Eksekusi di Canva

1. Buka Canva dan buat desain baru (pilih ukuran "Situs Web" atau "Website").

2. Gunakan fitur Canva Assistant (ikon bintang di pojok kanan bawah) atau ketik / (garis miring) pada halaman kosong.

3. Pilih Magic Write (Tulisan Ajaib).

4. Masukkan Prompt yang sudah kalian buat di Langkah 1.

5. Biarkan AI bekerja men-generate kode atau konten landing page kalian.

   • Catatan: Jika Canva menampilkan kode HTML mentah, kalian bisa mendesain ulang tampilannya secara visual menggunakan elemen Canva agar menjadi Landing Page yang menarik, lalu tempelkan (paste) kode tersebut sebagai teks agar pembaca tahu koding di baliknya.

Langkah 3: Desain & Publikasi

1. Hias halaman web kalian semenarik mungkin (tambahkan Judul Aplikasi, Penjelasan Singkat, dan Hasil Generate AI-nya).

2. Jika sudah selesai, klik tombol "Publikasikan Situs Web" (Publish Website) di pojok kanan atas.

3. Pilih opsi "Domain Gratis" (Free Domain).

4. Klik Lanjutkan hingga kalian mendapatkan alamat URL web kalian (contoh: namakamu.my.canva.site).

---

E. Tugas & Pengumpulan

Tugas kalian adalah memposting hasil link website tersebut di kolom komentar postingan ini.

Format Pengumpulan di Komentar:

Nama Lengkap: [Nama Kalian] Kelas: [Kelas Kalian] Prompt yang digunakan: "[Tuliskan prompt yang kalian masukkan ke Canva AI]" Link Project: [Paste Link Website Canva Kalian Disini]

---

F. Penilaian

Bapak/Ibu Guru akan menilai berdasarkan:

1. Kualitas Prompt: Seberapa detail perintah yang kalian berikan pada AI.

2. Kreativitas: Tampilan landing page di Canva.

3. Kesesuaian: Apakah hasil akhirnya sesuai dengan rencana awal kalian.

Selamat Mengerjakan! Gunakan AI sebagai asistenmu, bukan penggantimu.