htmlcssjavascriptqrapiPemula8 mnt baca

UI Generator QR Code

Membangun antarmuka generator QR code memakai API publik gratis.

Kenapa QR Generator?

QR code ada di mana-mana: menu restoran, pembayaran, tiket. Membuat generator QR mengajarkan cara memakai API publik gratis tanpa API key, pola yang berguna untuk banyak widget.

Langkah Membangun

HTML: Input teks/URL, pilihan ukuran, tombol "Buat QR", area tampil QR, tombol download.

CSS: Kartu sederhana di tengah dengan area QR berbingkai. QR tampil dengan animasi fade-in.

JS: Pakai API gratis api.qrserver.com:

js
const url = "https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=" + encodeURIComponent(teks);

Set sebagai src gambar. Tombol download: buat elemen <a> dengan href yang sama dan atribut download.

encodeURIComponent penting agar teks dengan spasi dan karakter khusus tidak merusak URL.

Pelajaran API Publik

Banyak API gratis tidak butuh key untuk penggunaan ringan. Selalu baca batasannya (rate limit) dan siapkan pesan error jika API down. Untuk produksi serius, generate QR di sisi client dengan library seperti qrcode.js agar tidak bergantung pihak ketiga.

Kesalahan Umum

  • Lupa encodeURIComponent sehingga URL dengan & atau ? rusak.
  • Tidak ada validasi input kosong (API mengembalikan QR kosong yang membingungkan).
  • Download tidak jalan karena cross-origin (sebagian browser memblokir download lintas domain; fallback: klik kanan simpan).
Live Playground
export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}
Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Tantangan: QR WiFi

Tambahkan mode "QR WiFi": form SSID + password + tipe keamanan yang menghasilkan string format WIFI:T:WPA;S:nama;P:sandi;; lalu jadi QR yang bisa langsung di-scan untuk gabung WiFi.