Tutorial Lengkap Belajar Rust: Dari Dasar, Borrow Checker, Hingga WebAssembly (Wasm)

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

rustc --version

---

Jurus 2: Bikin Proyek Pertama Pakai Cargo

Nah, Rust ini punya asisten pribadi namanya Cargo. Dia ini package manager sekaligus build system. Jadi kalau mau bikin proyek baru, lu nggak usah bikin folder manual. Tinggal suruh Cargo:

cargo new app_laundry_cli
cd app_laundry_cli

Kenapa namanya app_laundry_cli? Iseng aja Bro, kita bikin simulasi program kasir sederhana via terminal buat Part 1 ini. Kalau lu buka folder-nya, Cargo udah bikinin struktur file yang rapi. Lu tinggal buka file src/main.rs.

---

Jurus 3: Script Tutorial (Mari Kita Ngoding!)

Hapus semua isi di main.rs, terus copy-paste script di bawah ini. Tenang, gue kasih komen bahasa manusia biar gampang dipahamin:

use std::io; // Kita pinjem alat bawaan Rust buat nerima input dari keyboard

fn main() {
    println!("=====================================");
    println!("🔥 Selamat Datang di Kasir Rust 🔥");
    println!("=====================================");

    println!("Bro, masukin nama pelanggan hari ini:");

    // Bikin variabel 'String' kosong buat nampung nama
    // 'mut' artinya mutable (nilainya boleh diubah-ubah nanti)
    let mut nama_pelanggan = String::new();

    // Disini kita baca ketikan keyboard lu, terus dimasukin ke variabel tadi
    io::stdin()
        .read_line(&mut nama_pelanggan)
        .expect("Waduh, gagal baca input nih Bro!");

    // Nah, .trim() fungsinya buat ngebuang spasi kosong atau enter ('\n') di akhir kata
    let nama = nama_pelanggan.trim();

    println!("-------------------------------------");
    // Di Rust, kalau mau masukin variabel ke teks, tinggal pake kurung kurawal {}
    println!("Halo, Bos {}! Cucian udah siap diproses.", nama);
    println!("Sistem aman, memori nggak bocor, gass terus!");
}

---

Jurus 4: Jalanin Aplikasinya (Simulasi Hasil)

Gimana cara liat hasilnya? Gampang banget. Lu nggak perlu compile manual. Di dalam folder proyek tadi, ketik aja ini di terminal lu:

cargo run

Hasilnya di terminal lu bakal kayak gini nih:

Keren kan? Kode lu langsung diubah jadi machine code yang super ngebut.

Di bagian selanjutnya, kita bakal mulai mainan yang namanya Borrow Checker—fitur nyebelin tapi bikin kangen yang bikin Rust dijulukin "Keamanan Tanpa Tanding".

Pantengin terus blog ini ya Bro. Jangan lupa seruput kopinya! ☕

---

Lanjut gass, Bro! kali ini gua bakal main-main sedikit lebih dalam. sebelomnya udah bikin program kasir yang cuma bisa nanya nama doang. Sekarang, kita bikin aplikasinya mikir dikit.

Kita bakal bahas Variabel, Tipe Data, dan Array, tapi biar nggak bosen, simulasi programnya kita ganti jadi aplikasi kalkulator bahan baku. Siapa tahu bisa bantu hitung-hitungan kalau mau rilis produk sabun cuci piring komersial ke marketplace.

Ngajarin Rust Berhitung: Bikin Kalkulator Bahan Baku Sabun

Halo anak-anak Rust! Welcome back di series belajar Rust bahasa manusia. Di Part 1 kemarin, lu udah berhasil nulis mantra buat nampilin teks di terminal pakai cargo run.

Sekarang, kita bakal ngajarin program kita buat nyimpen data dan berhitung. Di Rust, ada satu aturan fundamental yang wajib lu hafal mati: Secara default, semua variabel di Rust itu kekunci (Immutable).

Artinya apa? Kalau lu naruh air di gelas, airnya nggak bisa lu ganti jadi kopi. Kecuali dari awal lu udah bilang ke Rust, "Eh, ini gelasnya khusus buat gonta-ganti minuman ya!" (alias Mutable). Aturan ini sengaja dibikin biar kode lu aman dari bug pas lagi ngejalanin multithreading tingkat dewa nanti.

Biar gampang ngebayanginnya, ayo kita bikin program buat ngelist dan ngitung kebutuhan bahan kimia dasar. Buka lagi file src/main.rs lu, hapus kode yang kemarin, dan masukin kode ini:

Script Tutorial: Kalkulator Bahan Baku

fn main() {
    println!("===================================================");
    println!("🧪 Kalkulator Resep Sabun Cuci Piring 🧪");
    println!("===================================================");

    // 1. ARRAY (Ngelist Bahan)
    // Ingat, array di Rust ukurannya tetap. Kita masukin 3 bahan utama.
    let bahan_baku = ["MES", "Texapon", "LABS"]; 

    println!("Bahan utama yang kita pakai hari ini:");
    println!("1. {}", bahan_baku[0]);
    println!("2. {}", bahan_baku[1]);
    println!("3. {}", bahan_baku[2]);
    println!("---------------------------------------------------");

    // 2. VARIABEL IMMUTABLE (Nilai Tetap)
    // Tipe data 'f64' itu buat angka desimal (pecahan).
    // Anggap aja ini total liter yang mau kita bikin.
    let target_produksi_liter: f64 = 50.0; 

    // 3. VARIABEL MUTABLE (Nilai Bisa Berubah)
    // Pakai kata 'mut' karena stok awal nol, terus nanti mau kita isi nilainya.
    let mut stok_texapon_kg: f64 = 0.0;

    // Kita ubah nilai variabel mutable-nya (misal butuh 5% dari target produksi)
    stok_texapon_kg = target_produksi_liter * 0.05; 

    println!("Target Produksi: {} Liter", target_produksi_liter);
    println!("Kebutuhan {} yang harus disiapin: {} Kg", bahan_baku[1], stok_texapon_kg);
    
    println!("===================================================");
    println!("Sistem kalkulasi sukses. Nggak ada memori yang bocor!");
}

Penjelasan :

• ["MES", "Texapon", "LABS"]: Ini namanya Array. Cara ngambil datanya pakai angka indeks yang dimulai dari 0. Jadi bahan_baku[1] itu manggil "Texapon".
• let target_produksi_liter: Nggak pakai mut, berarti angkanya dikunci selamanya di angka 50. Kalau lu iseng nambahin kode target_produksi_liter = 100.0; di bawahnya, compiler Rust bakal ngamuk dan program lu gagal jalan.
• let mut stok_texapon_kg: Nah, kalau ada kata mut, baru deh lu bisa gonta-ganti isinya sesuka hati.

Hasil Aplikasinya (Simulasi Terminal)

Tinggal ketik cargo run lagi di terminal lu, dan boom! Ini hasilnya:

Gimana, Bro? Udah mulai kerasa kan bedanya? Di bahasa lain, lu bisa seenaknya ngubah variabel dan sering bikin error yang baru ketahuan pas aplikasinya udah jalan. Di Rust, dari awal ngetik aja lu udah dikawal ketat biar nggak salah langkah.

Selanjutnya gua bakal ngebahas Ownership dan Borrow Checker. Ini adalah materi yang bikin 90% pemula Rust pengen banting keyboard, tapi begitu lu paham, lu bakal ngerasa jadi programmer paling sakti.

---

Misteri "Borrow Checker": Satpam Memori yang Bikin Aplikasi Lu Anti-Crash

Halo Bro! Selamat datang di Part 3. Kemarin kita udah belajar bikin variabel dan array. Sekarang, tarik napas dalam-dalam, siapin kopi paling pekat yang lu punya, karena kita bakal masuk ke jantungnya Rust: Ownership & Borrow Checker.

Di bahasa seperti C++, lu bebas bikin dan hapus data di memori. Efeknya? Sering kejadian yang namanya Memory Leak (memori bocor) atau program tiba-tiba crash (Segfault). Di bahasa seperti Java atau JavaScript, ada "petugas kebersihan" otomatis yang namanya Garbage Collector. Aman sih, tapi bikin aplikasi jadi lebih lambat dan makan resource.

Nah, Rust ngambil jalan ninja yang beda. Dia nggak pakai Garbage Collector, tapi punya aturan super ketat yang dicek langsung pas lu ngetik kode. Aturan ini dijaga sama "satpam" galak bernama Borrow Checker.

Biar gampang paham, kita pakai Analogi Bisnis Laundry aja ya:

• Ownership (Kepemilikan): Setiap baju (data) pasti cuma punya SATU pemilik (owner). Kalau bajunya dipindahin ke orang lain, pemilik lama udah nggak berhak lagi ngurusin baju itu.
• Borrowing (Peminjaman): Kalau karyawan laundry mau ngecek noda di baju, dia cuma minjem buat dilihat (Immutable Borrowing). Banyak karyawan boleh ngelihat baju itu barengan. Tapi, kalau karyawan mau nyetrika atau nyuci (Mutable Borrowing), cuma boleh SATU orang yang pegang bajunya di satu waktu. Nggak boleh rebutan!

Mari kita lihat wujud aslinya di kode. Buka src/main.rs dan ketik ini:

Script Tutorial: Belajar Minjem Data

fn main() {
    println!("=======================================");
    println!("🕵️‍♂️ Latihan Borrow Checker Rust 🕵️‍♂️");
    println!("=======================================\n");

    // 1. CONTOH OWNERSHIP (Kepemilikan)
    let pelanggan_a = String::from("Raja Digital"); 
    
    // Data dipindah (di-Move) ke pelanggan_b. 
    // Sekarang pelanggan_a udah 'kosong' dan nggak valid lagi!
    let pelanggan_b = pelanggan_a; 

    // Kalau lu iseng nulis: println!("{}", pelanggan_a); 
    // Compiler Rust bakal ngamuk dan kode lu GAGAL jalan.
    println!("Data sekarang dipegang oleh: {}", pelanggan_b);
    println!("---------------------------------------");


    // 2. CONTOH BORROWING (Peminjaman dengan tanda &)
    let nota_cucian = String::from("Cuci Kilat 5 Kg");

    // Kita pakai tanda & (Ampersand) buat 'minjem' data tanpa ngambil hak miliknya.
    let karyawan_1 = &nota_cucian;
    let karyawan_2 = &nota_cucian;

    // Karena cuma minjem buat DIBACA, dua karyawan bisa akses barengan. Aman!
    println!("Karyawan 1 baca: {}", karyawan_1);
    println!("Karyawan 2 baca: {}", karyawan_2);
    
    // Pemilik asli (nota_cucian) juga masih bisa dipakai karena hak miliknya nggak hilang.
    println!("Pemilik asli datanya tetap: {}", nota_cucian);
    
    println!("=======================================");
    println!("Lulus ujian satpam memori! Gass lanjut!");
}

Penjelasan Santai:

• String::from(...): Ini cara kita bikin teks yang disimpen di memori Heap (memori dinamis).
• Konsep Move: Saat kita nulis let pelanggan_b = pelanggan_a;, Rust langsung matiin akses pelanggan_a buat nyegah Double Free Error (kondisi fatal di mana komputer nyoba ngehapus data yang sama dua kali).
• Tanda & (Ampersand): Ini kunci utamanya. Kalau lu liat tanda &, artinya lu cuma ngasih akses "numpang baca". Ini bikin memori lu sangat efisien karena lu nggak perlu ngopi-ngopi data berat (kayak gambar atau video) ke berbagai tempat, cukup kasih alamat pinjamannya aja.

Hasil Aplikasinya (Simulasi Terminal)

Tinggal run pakai Cargo, dan terminal lu bakal nampilin ini:

Mantap! Begitu lu udah bisa ngalahin Borrow Checker, sisa materi Rust rasanya bakal kayak jalan-jalan sore. Kode lu dijamin bebas dari error gaib yang biasanya baru ketahuan pas aplikasi udah live dipake klien.

Sekarang kita lanjut gaspol ke Selanjutnya. Di sini kita bakal belajar cara bikin cetakan data pakai Struct (Structures). Ini kepake banget buat ngerapihin logika data di aplikasi lu.

---

Bikin "Blueprint" Data Pakai Struct: Manajemen Orderan Nggak Pake Ribet

Halo para Rustacean! Udah pada sembuh kan kepalanya habis dihajar Borrow Checker? Santai, hari ini kita bakal belajar sesuatu yang lebih gampang dan dijamin langsung kepake buat proyek dunia nyata.

Bayangin lu lagi bikin sistem backend buat bisnis laundry. Lu butuh nyimpen data: Nama Pelanggan, Berat Cucian, dan Jenis Layanan (Reguler/Kilat). Kalau lu pakai variabel misah-misah buat tiap pelanggan, kode lu bakal panjang banget sampai bikin scroll mouse rusak.

Solusinya? Kita bungkus semua data itu pakai Struct.

Struct itu ibarat formulir kosong atau blueprint. Kita tinggal cetak formulirnya berkali-kali buat pelanggan yang beda-beda. Yuk, langsung kita praktekin!

Script Tutorial: Bikin Sistem Pencatatan Order

Buka file src/main.rs lu, hapus yang lama, dan masukin kode ini. Perhatiin gimana rapinya data kalau udah dibungkus Struct.

// 1. KITA BIKIN BLUEPRINT-NYA DULU (Struct)
struct PesananLaundry {
    id_order: u32,
    nama_pelanggan: String,
    berat_kg: f64,
    layanan_kilat: bool, // true kalau kilat, false kalau reguler
}

// 2. KITA BIKIN FUNGSI KHUSUS BUAT STRUCT INI (Impl)
// Biar gampang cetak struknya
impl PesananLaundry {
    fn cetak_struk(&self) {
        println!("----------------------------------");
        println!("🧾 STRUK LAUNDRY - ORDER #{}", self.id_order);
        println!("----------------------------------");
        println!("Pelanggan : {}", self.nama_pelanggan);
        println!("Berat     : {} Kg", self.berat_kg);
        
        // Logika simpel pakai if-else
        if self.layanan_kilat {
            println!("Layanan   : EXPRESS ⚡ (Besok Jadi)");
        } else {
            println!("Layanan   : REGULER 🐢 (Santai Aja)");
        }
        println!("----------------------------------\n");
    }
}

fn main() {
    println!("==================================");
    println!("Sistem Manajemen Raja Digital ID");
    println!("==================================\n");

    // 3. KITA ISI FORMULIRNYA (Bikin Instance dari Struct)
    let orderan_pertama = PesananLaundry {
        id_order: 101,
        // Karena tipe datanya String, kita harus ubah teks biasa pakai .to_string()
        nama_pelanggan: "Si Bos Kopi".to_string(), 
        berat_kg: 3.5,
        layanan_kilat: true,
    };

    let orderan_kedua = PesananLaundry {
        id_order: 102,
        nama_pelanggan: "Anak Kosan".to_string(),
        berat_kg: 5.0,
        layanan_kilat: false,
    };

    // 4. JALANIN FUNGSINYA
    orderan_pertama.cetak_struk();
    orderan_kedua.cetak_struk();
}

Penjelasan Santai:

• struct PesananLaundry { ... }: Ini mangkoknya, Bro. Kita definisiin tipe data apa aja yang ada di dalam sebuah orderan. u32 itu angka bilangan bulat positif (cocok buat ID), f64 buat angka desimal (berat timbangan), dan bool buat milih benar/salah (kilat atau reguler).
• impl PesananLaundry { ... }: Ini kependekan dari Implement. Ibaratnya, kita ngajarin si mangkok tadi buat ngelakuin sesuatu. Di sini kita ajarin dia cara nge-print datanya sendiri pakai fungsi cetak_struk.
• &self: Nah, ini sisa-sisa ilmu Borrow Checker kemarin. Artinya, fungsi ini cuma "minjem" data dari Struct buat dibaca, nggak diubah-ubah isinya.

Hasil Aplikasinya (Simulasi Terminal)

Kalau lu tembak perintah cargo run di terminal, ini yang bakal muncul:

Gila, makin rapi kan kode lu sekarang? Bayangin kalau ini nanti di-konekin ke web pake API atau ditampilin di frontend yang lu build pakai HTML/CSS yang udah dioptimasi. Kodenya gampang di- maintenance dan yang paling penting: super ngebut!

Lu udah berhasil naklukin Borrow Checker dan bikin Struct di tutorial sebelumnya. Sekarang, kita bakal masuk ke salah satu fitur paling hardcore dan jadi alasan utama kenapa perusahaan besar pada hijrah ke Rust: Multithreading dan Concurrency.

---

Multithreading "Dewa": Ngerjain Banyak Tugas Barengan Tanpa Takut Race Condition

Kalau lu pengen bikin aplikasi backend super ngebut, atau mau ngoptimalin sistem web biar bisa ngelayanin ribuan request dalam satu detik tanpa ngelag, lu wajib paham ilmu ini.

Tapi tunggu dulu, bukannya jalanin banyak thread barengan itu rawan bikin aplikasi crash karena rebutan data (Race Condition)? Nah, di bahasa lain iya. Tapi di Rust, lu bakal kenalan sama senjata andalan kita: Mutex.

Biar gampang paham, kita pakai analogi toilet umum.

Analogi Mutex (Mutual Exclusion)

Bayangin ada satu data penting (misalnya, total pengunjung website) yang mau di- update sama 10 thread (tugas) secara bersamaan. Kalau mereka rebutan nulis data di waktu yang persis sama, datanya bakal kacau balau (Race Condition).

Solusinya? Data itu ditaruh di dalam ruangan pakai Mutex. Mutex ini ibarat kunci toilet umum. Kalau ada satu thread masuk buat update data, pintu otomatis dikunci dari dalam. Thread lain yang mau update harus antre nunggu pintunya kebuka lagi. Simpel, aman, dan anti tabrakan!

Langsung aja kita sikat kodenya. Buka file src/main.rs dan copy-paste mantra di bawah ini:

Script Tutorial: Simulasi Pengunjung Web dengan Mutex

use std::sync::{Arc, Mutex};
use std::thread;
use std::time::Duration;

fn main() {
    println!("=============================================");
    println!("🚀 Simulasi Multithreading Raja Digital ID 🚀");
    println!("=============================================\n");

    // 1. SIAPIN DATA DAN MUTEX
    // Kita bikin data 'total_pengunjung' yang nilainya 0, lalu dibungkus pakai Mutex.
    // Terus dibungkus lagi pakai Arc (Atomic Reference Counted).
    // Arc fungsinya biar Mutex ini bisa di-share (dipinjemin) ke banyak thread dengan aman.
    let total_pengunjung = Arc::new(Mutex::new(0));

    // Kita bikin penampung buat nyimpen semua thread yang lagi jalan
    let mut kumpulan_thread = vec![];

    // 2. KITA JALANIN 10 THREAD BARENGAN!
    println!("Mulai ngebuka 10 pintu masuk buat pengunjung...");
    
    for i in 1..=10 {
        // Bikin "kloningan" dari Arc biar tiap thread pegang tiket masuknya sendiri
        let tiket_masuk = Arc::clone(&total_pengunjung);

        // Spawn (lahirkan) thread baru
        let tugas = thread::spawn(move || {
            // Tunggu bentar pura-puranya lagi loading data (10 milidetik)
            thread::sleep(Duration::from_millis(10));

            // Thread mencoba masuk ke "toilet" (ngunci Mutex)
            let mut data_dikunci = tiket_masuk.lock().unwrap();
            
            // Tambahin jumlah pengunjung
            *data_dikunci += 1;
            
            println!("Thread {} berhasil masuk! Total pengunjung sekarang: {}", i, *data_dikunci);
            // Begitu blok kode ini selesai, Mutex otomatis kebuka lagi buat thread lain (auto-unlock)
        });

        // Masukin thread ke dalam daftar kumpulannya
        kumpulan_thread.push(tugas);
    }

    // 3. TUNGGU SEMUA THREAD SELESAI
    // Kita bilang ke program utama: "Woi, jangan tutup dulu aplikasinya sebelum 10 thread kelar!"
    for tugas in kumpulan_thread {
        tugas.join().unwrap();
    }

    // 4. HASIL AKHIR
    println!("\n=============================================");
    println!("Semua tugas selesai!");
    println!("Total Pengunjung Final: {}", *total_pengunjung.lock().unwrap());
    println!("Nggak ada tabrakan data (Race Condition)! Aman sentosa.");
}

Penjelasan:

• thread::spawn: Ini perintah buat nyuruh komputer ngerjain tugas di jalur (thread) yang beda, di luar jalur utama (main thread).
• Mutex::new(0): Kita ngurung angka 0 di dalam "ruangan berpengaman".
• Arc::new(...): Karena aturan Ownership Rust sangat ketat, satu data normalnya cuma boleh punya satu owner. Karena kita punya 10 thread yang mau ngakses data ini, kita butuh Arc. Dia ini yang bertugas nge- copy referensi datanya ke banyak thread tapi tetap ngitung jumlah pemakainya biar memori nggak dikosongin sebelum semua thread kelar.
• lock().unwrap(): Ini aksi "ngunci pintu". Kalau pintu berhasil dikunci, data di dalamnya bisa kita ubah.

Hasil Aplikasinya (Simulasi Terminal)

Tinggal run pakai cargo run, dan lu bakal ngelihat tulisan yang munculnya cepet banget (karena mereka jalan berbarengan, urutan selesainya bisa beda-beda tiap kali lu nge- run aplikasinya):

Gila, powerful banget kan Bro? Dengan teknik Multithreading pakai Arc dan Mutex ini, lu udah punya fondasi buat bikin server tingkat dewa yang bisa ngelayanin banyak user barengan tanpa takut aplikasinya kacau gara-gara Race Condition.

Bro! Masih kuat kan ngoprek bahasa "Dewa" ini? Di Part 5 kemarin kita udah seru-seruan ngebahas Multithreading pakai Mutex. Lu udah bisa bikin sistem yang ngerjain banyak tugas barengan tanpa takut tabrakan data.

Nah, sekarang kita bahas musuh bebuyutan semua programmer: Error.

---

Selamat Tinggal "Kutukan Null": Cara Rust Nanganin Error Biar Web Lu Nggak Tiba-Tiba Nge-Blank

Pernah nggak sih lu bikin script JavaScript buat web, udah dioptimasi gila-gilaan biar dapet skor PageSpeed 100/100, eh tiba-tiba fiturnya mati gara-gara error konyol kayak Cannot read property of undefined? Atau kalau di bahasa lain kena kutukan NullPointerException? Itu terjadi karena program lu nyoba ngakses data yang ternyata kosong (Null).

Di Rust, kata "Null" itu nggak ada. Nggak eksis, Bro! Sebagai gantinya, Rust punya dua senjata pamungkas buat nanganin data kosong atau error: Option dan Result.

Analogi Kotak Misteri (Option) dan Laporan Kerja (Result)

Biar gampang nangkepnya, gini logikanya:

Option (Kotak Misteri): Dipakai kalau lu nyari sesuatu yang mungkin ada, mungkin nggak ada. Kayak lu nyari data pelanggan di database. Hasilnya cuma dua:

• Some(datanya) -> "Nih Bro, datanya dapet!"
• None -> "Kosong Bro, nggak nemu."

Result (Laporan Kerja): Dipakai buat proses yang mungkin sukses, mungkin gagal/error. Kayak lu nyoba ngurangin saldo buat bayar laundry. Hasilnya:

• Ok(hasilnya) -> "Sukses dibayar!"
• Err(pesan error) -> "Gagal Bro, saldo kurang!"

Yang bikin Rust "Keamanan Tanpa Tanding" adalah: Compiler bakal maksa lu buat nanganin kondisi None atau Err. Kalau lu cuekin, kode lu nggak bakal mau di-compile. Jadi lu nggak bakal kecolongan bug di production.

Langsung aja kita sikat kodenya. Buka src/main.rs lu dan copy-paste ini:

Script Tutorial: Sistem Pengecekan Saldo & Pencarian Pelanggan

fn main() {
    println!("=============================================");
    println!("🛡️ Sistem Anti-Error Raja Digital ID 🛡️");
    println!("=============================================\n");

    // 1. CONTOH OPTION (Nyari Data)
    let nama_dicari = "Anak Kosan";
    
    // Kita panggil fungsi cari_pelanggan, lalu kita 'buka' kotaknya pakai 'match'
    println!("🔍 Mencari data '{}'...", nama_dicari);
    match cari_pelanggan(nama_dicari) {
        Some(nama) => println!("✅ Ketemu nih: Bos {}", nama),
        None => println!("❌ Waduh, data pelanggan '{}' nggak ada di sistem!", nama_dicari),
    }

    println!("---------------------------------------------");

    // 2. CONTOH RESULT (Proses Transaksi)
    let saldo_dompet = 50000;
    let tagihan_laundry = 75000;

    println!("💸 Coba bayar tagihan Rp{} dengan saldo Rp{}...", tagihan_laundry, saldo_dompet);
    // Buka laporan kerja pakai 'match'
    match proses_pembayaran(saldo_dompet, tagihan_laundry) {
        Ok(kembalian) => println!("✅ Pembayaran sukses! Kembalian lu: Rp{}", kembalian),
        Err(pesan_error) => println!("❌ Transaksi Ditolak: {}", pesan_error),
    }

    println!("\n=============================================");
    println!("Aplikasi selesai tanpa crash. Mantap Bro!");
}

// ================= FUNGSI-FUNGSI =================

// Fungsi ini mengembalikan Option (bisa Some, bisa None)
fn cari_pelanggan<'a>(nama_target: &'a str) -> Option<&'a str> {
    let database = ["Si Bos Kopi", "Raja Digital", "Juragan Laundry"];
    
    for &pelanggan in database.iter() {
        if pelanggan == nama_target {
            return Some(pelanggan); // Kalau nemu, bungkus pakai Some
        }
    }
    None // Kalau sampai akhir nggak nemu, balikin None
}

// Fungsi ini mengembalikan Result (bisa Ok, bisa Err)
fn proses_pembayaran(saldo: i32, tagihan: i32) -> Result<i32, String> {
    if saldo >= tagihan {
        Ok(saldo - tagihan) // Kalau duit cukup, bungkus kembaliannya pakai Ok
    } else {
        Err(String::from("Saldo lu kurang Bro, ngutang dulu gih!")) // Kalau kurang, lempar Err
    }
}

Penjelasan :

• match: Ini adalah "pisau bedah"-nya Rust. Saat fungsi ngembaliin kotak Option atau Result, lu wajib pakai match buat ngebongkar isinya. Lu harus nulis kondisi buat sukses (Some/Ok) DAN kondisi buat gagal (None/Err).

Karena compiler maksa lu nulis penanganan buat kondisi gagal, aplikasi web lu nanti nggak bakal tiba-tiba layar putih (blank) gara-gara error yang lupa lu tangkep.

Hasil Aplikasinya (Simulasi Terminal)

Langsung tembak cargo run di terminal lu, Bro. Hasilnya bakal nampilin skenario gagal tapi ditangani dengan elegan (nggak crash):

Gimana? Kelihatan kan elegannya Rust? Walaupun datanya kosong dan duitnya kurang, programnya tetep jalan sampai akhir dan ngasih feedback yang jelas, bukannya mati di tengah jalan sambil ngeluarin log error yang panjangnya sekilo.

Ini adalah salah satu secret sauce yang bikin kode Rust itu "tidaknya bisa tidur nyenyak" karena lu tahu aplikasi lu nggak bakal crash di tengah malam pas lagi diakses pengunjung.

Sebelonnya kita sempat bahas Array buat nyimpen daftar bahan baku. Tapi kelemahan Array itu ukurannya kaku, nggak bisa ditambah atau dikurangin di tengah jalan.

Nah, kalau lu lagi bikin aplikasi nyata—misalnya keranjang belanjaan buat jualan sabun cuci piring di marketplace—lu pasti butuh tempat nyimpen data yang ukurannya bisa melar. Di sinilah kita butuh Vector dan HashMap.

---

Array Kekecilan? Kenalan Sama Vector & HashMap Buat Nampung Data Tanpa Batas!

Sebelonnya kita udah belajar gimana cara nanganin error pakai Option dan Result biar web atau aplikasi lu anti-ngeblank.

Sekarang, kita bakal balik lagi ngomongin soal data. Lu masih ingat Array di Part 2? Array itu ibarat rak sepatu yang jumlah slotnya udah dipatenkin dari awal. Kalau lu pesen rak isi 3, ya lu cuma bisa masukin 3 sepatu. Gimana kalau tiba-tiba orderan meledak dan lu butuh nyimpen 100 data baru? Array bakal nyerah, Bro.

Makanya, Rust ngasih kita dua struktur data yang paling sering dipake di dunia nyata: Vector dan HashMap.

• Vector (Vec): Ini kerdus ajaib yang ukurannya bisa melar. Lu bisa nambahin atau ngeluarin barang kapan aja.
• HashMap: Ini mirip Object di JavaScript atau Dictionary di Python. Konsepnya pakai kunci dan nilai (Key-Value). Buat nyari data, lu nggak usah repot ngurutin dari awal, tinggal panggil "Kuncinya", datanya langsung keluar.

Biar kebayang, ayo kita bikin simulasi sistem keranjang belanja sederhana buat produk sabun cuci piring komersial kita. Buka src/main.rs, hapus yang lama, dan masukin kode ini:

Script Tutorial: Sistem Keranjang Belanja Dinamis

// Kita harus 'impor' HashMap dulu dari standard library Rust
use std::collections::HashMap;

fn main() {
    println!("=============================================");
    println!("🛒 Sistem Manajemen Order Raja Digital ID 🛒");
    println!("=============================================\n");

    // 1. VECTOR (Daftar Belanjaan yang bisa nambah terus)
    // Kita bikin Vector kosong yang isinya teks (String)
    let mut keranjang_belanja: Vec<String> = Vec::new();

    // Masukin barang ke Vector pakai .push()
    keranjang_belanja.push(String::from("Sabun Cuci Piring Jeruk Nipis 1L"));
    keranjang_belanja.push(String::from("Bahan MES 1Kg"));
    keranjang_belanja.push(String::from("Bahan LABS 500ml"));

    println!("📦 Isi Keranjang Lu Saat Ini:");
    for (index, barang) in keranjang_belanja.iter().enumerate() {
        println!("{}. {}", index + 1, barang);
    }
    
    // 2. HASHMAP (Daftar Harga pakai sistem Key-Value)
    // Key = Nama Barang (Teks), Value = Harga (Angka)
    let mut daftar_harga = HashMap::new();

    // Masukin data ke HashMap pakai .insert()
    daftar_harga.insert("Sabun Cuci Piring Jeruk Nipis 1L", 15000);
    daftar_harga.insert("Bahan MES 1Kg", 25000);
    daftar_harga.insert("Bahan LABS 500ml", 30000);

    println!("\n---------------------------------------------");
    println!("💸 Pengecekan Harga:");

    // 3. MENGGABUNGKAN KEDUANYA
    // Kita hitung total harga barang yang ada di keranjang
    let mut total_bayar = 0;

    for barang in &keranjang_belanja {
        // Kita cari harga barang di HashMap. 
        // Ingat pelajaran Part 6! .get() mengembalikan Option (Some / None)
        match daftar_harga.get(barang.as_str()) {
            Some(harga) => {
                println!("- {} : Rp{}", barang, harga);
                total_bayar += harga;
            },
            None => println!("- {} : Harga belum diatur di sistem!", barang),
        }
    }

    println!("---------------------------------------------");
    println!("Total yang harus dibayar: Rp{}", total_bayar);
    println!("=============================================");
}

Penjelasan :

• Vec::new(): Mantra buat bikin kerdus kosong. Karena kita taruh kata mut di depannya, kerdus ini boleh kita isi barang pakai perintah .push().
• HashMap::new(): Mantra buat bikin loker penyimpanan. Beda sama Vector yang urutannya berdasarkan angka (0, 1, 2), di HashMap kita manggil data pakai kata kuncinya. Contoh: "Berapa harga Bahan MES?". Sistem bakal langsung lompat ke laci "Bahan MES" tanpa ngecek laci lain. Ngebut banget kan?
• .as_str(): Cuma trik kecil buat ngubah tipe String jadi tipe teks referensi biasa &str biar cocok pas dicari di HashMap.

Hasil Aplikasinya (Simulasi Terminal)

Tembak cargo run di terminal lu, Bro. Terminal lu bakal nampilin struk belanjaan dinamis kayak gini:

Gimana, Bro? Udah mulai kerasa kan gimana asiknya ngoding logika bisnis pakai Rust? Kodenya rapi, anti-error, dan performanya saat dieksekusi bisa bikin PageSpeed web lu tetap enteng kalau nanti ini dijadiin backend API atau di-compile jadi WebAssembly.

sebelumnya kita udah bahas soal Vector dan HashMap buat nyimpen data belanjaan yang ukurannya fleksibel.

Sekarang, bayangin lu udah berhasil ngerilis produk sabun cuci piring lu ke marketplace kayak Shopee. Lu pasti butuh sistem buat ngelacak status pesanan: apakah masih "Belum Dibayar", "Lagi Dikemas", atau "Udah Dikirim" pakai nomor resi.

Kalau di bahasa pemrograman jadul, lu mungkin bakal pakai angka (misal 0 buat belum bayar, 1 buat dikemas) atau teks string yang rawan typo. Di Rust, kita punya fitur elegan yang namanya Enum.

---

Bikin Sistem Lacak Resi Ala Shopee Pakai "Enum": Logika Web Makin Rapi!

kita bakal ngebahas senjata rahasia Rust yang bikin logika aplikasi lu rapi dan anti-bug: Enum (kependekan dari Enumeration).

Buat lu yang lagi ngebangun sistem toko online (misalnya mau jualan sabun cuci piring komersial skala besar di Shopee), lu pasti pusing kalau harus nge-track status orderan pakai If-Else yang panjangnya sekilo. Belum lagi kalau lu pakai tipe data String buat nyimpen status, rawan banget kena typo. Niatnya ngetik "DIKIRIM", eh malah ngetik "DIKIRIMMM". Program lu bisa error bacanya!

Nah, Enum ini fungsinya buat mendaftar semua kemungkinan yang valid. Lu ngebatasin pilihan biar sistem nggak nerima input ngawur. Asyiknya lagi di Rust, Enum bisa diselipin data tambahan, kayak nomor resi kurir!

Mari kita langsung coding. Buka src/main.rs dan copy-paste mantra ini:

Script Tutorial: Sistem Pelacakan Orderan

// 1. KITA BIKIN DAFTAR STATUS YANG VALID (Enum)
// Nggak ada status di luar dari 4 pilihan ini!
enum StatusPesanan {
    MenungguPembayaran,
    SedangDikemas,
    // Kerennya Rust, Enum bisa bawa data! Di sini bawa String (Nomor Resi)
    SedangDikirim(String), 
    Selesai,
}

// 2. BIKIN BLUEPRINT ORDERAN (Ingat materi Struct di Part 4?)
struct Orderan {
    id_order: u32,
    nama_pembeli: String,
    produk: String,
    status: StatusPesanan, // Tipe datanya kita set pakai Enum di atas
}

// 3. FUNGSI BUAT NGECEK STATUS PAKAI 'MATCH'
fn cek_posisi_paket(order: &Orderan) {
    println!("---------------------------------------------");
    println!("📦 Order #{} - {}", order.id_order, order.nama_pembeli);
    println!("Produk: {}", order.produk);
    
    // Kita pakai 'match' buat ngecek statusnya. 
    // Compiler Rust bakal maksa kita nulis SEMUA kemungkinan dari Enum.
    match &order.status {
        StatusPesanan::MenungguPembayaran => {
            println!("Status: ⏳ Woi Bro, buruan transfer biar cepet diproses!");
        }
        StatusPesanan::SedangDikemas => {
            println!("Status: 📦 Sabun lagi dibungkus bubble wrap, aman!");
        }
        StatusPesanan::SedangDikirim(nomor_resi) => {
            println!("Status: 🚚 Paket udah dibawa kurir. Resi: {}", nomor_resi);
        }
        StatusPesanan::Selesai => {
            println!("Status: ✅ Mantap! Duit udah cair ke saldo penjual.");
        }
    }
    println!("---------------------------------------------\n");
}

fn main() {
    println!("=============================================");
    println!("🛒 Sistem Tracking Toko Raja Digital ID 🛒");
    println!("=============================================\n");

    // Kita bikin simulasi beberapa orderan pelanggan
    let order_1 = Orderan {
        id_order: 1001,
        nama_pembeli: String::from("Juragan Kopi"),
        produk: String::from("Sabun Cuci Piring MES Formula 5L"),
        status: StatusPesanan::MenungguPembayaran,
    };

    let order_2 = Orderan {
        id_order: 1002,
        nama_pembeli: String::from("Ibu Kos"),
        produk: String::from("Sabun Cuci Piring Jeruk Nipis 1L"),
        status: StatusPesanan::SedangDikemas,
    };

    let order_3 = Orderan {
        id_order: 1003,
        nama_pembeli: String::from("Bapak RT"),
        produk: String::from("Paket Hemat Sabun + Spons"),
        // Di sini kita masukin nomor resinya ke dalam Enum
        status: StatusPesanan::SedangDikirim(String::from("JNT-8899223344")), 
    };

    // Panggil fungsinya satu-satu
    cek_posisi_paket(&order_1);
    cek_posisi_paket(&order_2);
    cek_posisi_paket(&order_3);
}

Penjelasan Santai:

• enum StatusPesanan: Ini ibarat lu ngasih dropdown menu yang isinya cuma 4 pilihan. Program lu nggak bakal bisa diisi "Lagi Nyasar" atau "Kurir Ketiduran" kalau nggak lu daftarin di sini.
• SedangDikirim(String): Ini level dewa-nya Enum di Rust. Enum biasa cuma nyimpen label, tapi di Rust, Enum bisa nyimpen nilai nyelip di dalamnya (dalam hal ini, nomor resi kurir).
• match: Ini pasangan sejati-nya Enum. Sama kayak di Part 6 kemarin, match itu switch-case versi steroid. Kalau lu nambahin status baru di Enum (misal: Dibatalkan), tapi lu lupa nulis efeknya di dalam match, compiler Rust bakal teriak dan program lu gagal di-compile. Jadi, nggak bakal ada kondisi yang "terlewat"!

Hasil Aplikasinya (Simulasi Terminal)

Langsung aja tembak cargo run di terminal lu, Bro. Hasil pelacakannya bakal keluar cakep kayak gini:

Gimana? Kodenya jadi kerasa gampang dibaca kayak baca buku cerita kan? Bayangin kalau logika se-aman ini lu terjemahin ke web yang udah teroptimasi PageSpeed-nya, dijamin user experience bakal mulus banget.

Silakan di-compile! dan Jangan lupa ngopi waa ngudud!

---

Bro! Udah saatnya kita keluar dari zona terminal/CMD dan bawa kode Rust lu biar bisa diakses lewat browser (Chrome, Firefox, Safari, dkk).

Karena fokus gua sekarang mau main di optimasi web biar performanya maksimal, nah gua pakai Rust buat backend, karena ini pilihan jitu. gua bakal pakai framework namanya Actix-Web. Ini salah satu framework web paling ngebut di dunia, cocok banget buat ngelayanin jutaan request tanpa bikin server jebol.

Tinggalkan Terminal! Bikin Web Server Super Ngebut Pakai Rust

Buat lu yang sering ngoprek web dan ngejar skor PageSpeed Insights 100/100, pasti tahu kalau performa backend (server) itu ngaruh banget ke waktu loading (Time to First Byte / TTFB). Nah, Rust ini jagonya bikin server yang super efisien dan hemat memori.

Di tutorial kali ini, kita nggak pakai alat bawaan aja, tapi kita bakal minjem framework sakti bernama Actix-Web. Yuk, langsung kita rakit servernya ada 3 jurus beksi(beksi itu silat khas betawi)!

Jurus 1: Tambahin "Bumbu" di Cargo.toml

Sebelonnya kita cuma ngedit file main.rs, sekarang kita kenalan sama file Cargo.toml. Ini ibarat daftar belanjaan buat proyek lu. Buka file Cargo.toml di folder proyek lu, terus di bawah tulisan [dependencies], tambahin baris ini:

[dependencies]
actix-web = "4.0"

Begitu lu save, si Cargo (asisten pribadi kita) bakal otomatis nge- download semua alat tempur yang dibutuhin buat bikin web server.

Jurus 2: Script Tutorial (Bikin Servernya)

Sekarang balik ke src/main.rs, hapus semua isinya, dan copy-paste mantra di bawah ini:

// 1. KITA IMPOR ALAT-ALAT DARI ACTIX-WEB
use actix_web::{get, App, HttpResponse, HttpServer, Responder};

// 2. BIKIN RUTE (ENDPOINT) HALAMAN UTAMA
// Tanda '/' artinya halaman depan web lu (Homepage)
#[get("/")]
async fn halaman_utama() -> impl Responder {
    // Kita balikin respon ke browser berupa teks HTML biasa
    HttpResponse::Ok()
        .content_type("text/html; charset=utf-8")
        .body("<h1>🚀 Halo Bro! Server Rust Udah Nyala!</h1><p>Ini web dari <b>Raja Digital ID</b>. Gila, enteng banget servernya!</p>")
}

// 3. JALANIN SERVERNYA
// Tanda #[actix_web::main] ini wajib biar Rust tahu ini program utama buat web
#[actix_web::main]
async fn main() -> std::io::Result<()> {
    println!("=============================================");
    println!("🌐 Menyalakan Mesin Server Raja Digital ID 🌐");
    println!("Akses di browser: http://127.0.0.1:8080");
    println!("Tekan CTRL+C di terminal kalau mau matiin server.");
    println!("=============================================\n");

    // Kita bikin server, pasang rute halaman_utama, lalu 'bind' (ikat) ke port 8080
    HttpServer::new(|| {
        App::new().service(halaman_utama)
    })
    .bind(("127.0.0.1", 8080))?
    .run()
    .await
}

Penjelasan :

• async & .await: Di web modern, server nggak boleh nungguin satu pengunjung selesai loading baru ngelayanin pengunjung lain. Kata async ngajarin Rust buat ngerjain tugas secara paralel (asinkronus). Jadi kalau ada ribuan orang akses web lu barengan, server nggak bakal ngelag!
• HttpResponse::Ok(): Ini adalah bahasa standar internet yang ngasih tahu browser, "Hei Chrome, halamannya sukses dimuat nih (Status 200 OK)!".
• 127.0.0.1:8080: Ini alamat lokal komputer lu (Localhost), dan 8080 itu pintunya (Port).

Jurus 3: Jalanin dan Buktikan Hasilnya!

Sekarang buka terminal lu dan ketik mantra kebanggaan kita:

cargo run

Note: Karena ini pertama kalinya pakai Actix-Web, si Cargo bakal nge-download file lumayan banyak. Tungguin aja sambil seruput kopi lu. Kalau udah kelar, terminal lu bakal nampilin ini:

Lihat Hasilnya di Browser

Buka Chrome, Firefox, atau browser andalan lu. Ketik alamat ini di kolom URL: http://localhost:8080 (atau http://127.0.0.1:8080). Tekan Enter.

BOOM! 💥 Di layar browser lu sekarang bakal muncul tulisan HTML gede:

Selamat, Bro! Lu udah resmi naik kelas dari sekadar bikin script terminal ke level pengembang backend web tingkat dewa. Dari titik ini, lu bebas mau nyambungin web lu ke database, nampilin data produk pakai JSON, atau bikin API buat aplikasi kasir lu.

---

Bro! sekarang ini gua bakal ngebahas hal yang super esensial buat bikin web modern: API (Application Programming Interface) dan JSON.

Kalau lu mau bikin aplikasi kasir buat bisnis laundry atau sistem manajemen stok sabun cuci piring lu, frontend (web atau aplikasi HP) butuh ngobrol sama backend (server Rust kita) pakai format data yang disepakati sedunia, yaitu JSON.

Buat latihan ini, kita pakai database bohongan dulu di dalam memori pakai ilmu Mutex yang udah kita pelajari di Part 5. Kenapa? Karena nyambungin ke database asli kayak MySQL atau PostgreSQL itu butuh konfigurasi panjang yang bakal kita pisah di part khusus biar kepala nggak ngebul.

Bikin API Kasir & Tampil Data JSON: Saatnya Web Lu Ngobrol Sama Sistem!

Sebelonnya kita udah berhasil nyalain mesin server pakai Actix-Web dan nampilin teks HTML ke browser. Keren sih, tapi di dunia nyata, server backend itu jarang banget disuruh nge- render HTML langsung.

Biasanya, backend dibikin cuma buat nyediain API. Jadi, tugas server lu cuma ngirim mentahan data dalam bentuk JSON (JavaScript Object Notation). Nanti urusan nampilin visual webnya diserahin ke frontend yang lu build pakai HTML/JS, biar skor PageSpeed lu tetep 100/100 tanpa beban server yang berat.

Hari ini, kita bakal bikin API Kasir sederhana buat ngecek daftar stok sabun cuci piring dan nambah produk baru ke database ada 3 jurus beksi (beksi seni beladiri khas betawi). Gass!

Jurus 1: Panggil "Penerjemah" di Cargo.toml

Rust punya Struct (blueprint data kita), sementara internet butuh JSON. Biar Rust bisa nerjemahin Struct jadi JSON secara otomatis, kita butuh alat sakti bernama Serde (Serialize/Deserialize).

Buka file Cargo.toml lu, dan update bagian [dependencies] jadi kayak gini:

[dependencies]
actix-web = "4.0"
# Tambahin ini Bro!
serde = { version = "1.0", features = ["derive"] }

Save file-nya, nanti Cargo bakal otomatis nge- download Serde.

Jurus 2: Script Tutorial (Bikin API Kasir)

Sekarang buka src/main.rs, hapus yang lama, dan masukin kode sakti ini. Perhatiin gimana ilmu Struct dan Mutex yang udah lu pelajarin kepake semua di sini!

use actix_web::{get, post, web, App, HttpResponse, HttpServer, Responder};
use serde::{Deserialize, Serialize};
use std::sync::Mutex;

// 1. KITA BIKIN BLUEPRINT PRODUK (Struct)
// #[derive(...)] ini mantra ajaib dari Serde biar Struct ini bisa otomatis diubah jadi JSON
#[derive(Serialize, Deserialize, Clone)]
struct Produk {
    id: u32,
    nama: String,
    harga: u32,
    stok: u32,
}

// 2. KITA BIKIN DATABASE BOHONGAN (App State)
// Ingat materi Multithreading di Part 5? Kita pakai Mutex biar data aman pas diakses banyak pengunjung!
struct AppState {
    db_produk: Mutex<Vec<Produk>>,
}

// 3. ENDPOINT 1: NGECEK BARANG (GET Request)
// Kasir butuh lihat daftar barang buat transaksi
#[get("/api/produk")]
async fn get_produk(data: web::Data<AppState>) -> impl Responder {
    // Kita buka gembok Mutex-nya biar bisa baca data
    let database = data.db_produk.lock().unwrap();
    
    // Langsung balikin datanya jadi JSON! Gampang banget kan?
    HttpResponse::Ok().json(&*database)
}

// 4. ENDPOINT 2: NAMBAH BARANG (POST Request)
// Saat produksi beres, lu masukin stok baru ke sistem
#[post("/api/tambah")]
async fn tambah_produk(item: web::Json<Produk>, data: web::Data<AppState>) -> impl Responder {
    let mut database = data.db_produk.lock().unwrap();
    
    // Masukin barang baru (dari request JSON) ke dalam Vector database kita
    database.push(item.into_inner());
    
    HttpResponse::Created().body("✅ Mantap Bro! Sukses nambah produk ke database.")
}

// 5. JALANIN SERVERNYA
#[actix_web::main]
async fn main() -> std::io::Result<()> {
    println!("=======================================================");
    println!("🛒 API Kasir Raja Digital ID Udah Online! 🛒");
    println!("Cek data produk di: http://127.0.0.1:8080/api/produk");
    println!("=======================================================\n");

    // Kita masukin modal stok awal ke dalam database kita
    let state = web::Data::new(AppState {
        db_produk: Mutex::new(vec![
            Produk {
                id: 1,
                nama: String::from("Sabun Cuci Piring MES Formula 1L"),
                harga: 15000,
                stok: 100,
            },
            Produk {
                id: 2,
                nama: String::from("Paket Komplit Laundry Kiloan"),
                harga: 45000,
                stok: 20,
            },
        ]),
    });

    // Nyalain server dan daftarin Endpoint-nya
    HttpServer::new(move || {
        App::new()
            .app_data(state.clone()) // Pasang database ke server
            .service(get_produk)     // Daftarin rute GET
            .service(tambah_produk)  // Daftarin rute POST
    })
    .bind(("127.0.0.1", 8080))?
    .run()
    .await
}

Penjelasan :

• #[derive(Serialize, Deserialize)]: Di bahasa lain lu harus nulis kode panjang buat parsing JSON secara manual. Di Rust? Tinggal pasang mantra ini di atas Struct, dan boom! Rust bakal ngerjain semuanya di background.
• web::Data<AppState>: Ini cara Actix-Web nge- share "Database" kita ke semua rute (endpoint). Jadi, kalau lu nambah barang di rute /api/tambah, barangnya bakal kelihatan pas lu ngecek di /api/produk.

Jurus 3: Buktikan Hasilnya!

Jalanin server lu di terminal pakai perintah:

cargo run

Tes Ambil Data (GET): Buka browser lu, terus ketik alamat ini: http://127.0.0.1:8080/api/produk

Hasilnya di Browser bakal nampilin format JSON murni kayak gini:

[
  {
    "id": 1,
    "nama": "Sabun Cuci Piring MES Formula 1L",
    "harga": 15000,
    "stok": 100
  },
  {
    "id": 2,
    "nama": "Paket Komplit Laundry Kiloan",
    "harga": 45000,
    "stok": 20
  }
]

Gila, clean banget kan Bro? Data JSON inilah yang nantinya bakal ditangkap sama script JavaScript (kayak fetch API) di web frontend lu buat dirender jadi katalog produk yang cantik.

Karena backend lu pakai Rust, proses ngeluarin JSON ini kecepatannya di luar nalar, makan memori cuma beberapa Megabyte, dan siap dihajar ribuan request pengunjung Shopee atau pelanggan laundry lu secara bersamaan.

lu udah sukses bikin mesin server backend pakai Actix-Web yang bisa ngeluarin data stok sabun dan paket laundry dalam format JSON. Keren banget! Tapi masalahnya, pelanggan atau kasir lu kan nggak mungkin disuruh baca teks JSON mentahan yang bentuknya keriting gitu.

Mereka butuh antarmuka web (Frontend) yang cakep. Nah, berhubung lu sering mainan optimasi template web, di part ini kita bakal ngejahit API Rust lu tadi ke dalam halaman web HTML pakai JavaScript.

Biar API lu bisa dipanggil dari domain web lain, kita harus ngebuka gerbang yang namanya CORS di server Rust kita.

---

Kawin Silang Rust & HTML: Nampilin Data API ke Web Frontend Tanpa Bikin PageSpeed Anjlok!

Kalau sebelonnya kita udah asik ngoprek "dapur" (backend) pakai Rust buat bikin API Kasir berformat JSON, sekarang saatnya kita bawa data itu ke "ruang tamu" (frontend).

Misi kita hari ini adalah: Gimana caranya web HTML lu bisa narik data stok sabun cuci piring dari server Rust kita?

Buat lu yang tergila-gila sama optimasi PageSpeed Insights biar tembus 100/100, tenang aja. Kita nggak bakal pakai framework JS yang berat-berat. Kita bakal pakai fitur bawaan browser aja yaitu Vanilla JS (Fetch API). Dijamin kodenya super enteng, hardware-accelerated tetep jalan mulus, dan pastinya bebas dari forced reflow yang bikin web lu ngelag.

Tapi sebelum itu, kita harus tambahin satu "satpam" di server Rust kita biar web luar diizinkan buat ngambil data. Namanya CORS (Cross-Origin Resource Sharing). nah ada 3 Jurus yang kita lakuin :

Jurus 1: Buka Gerbang CORS di Rust (Cargo.toml)

Buka file Cargo.toml di proyek Rust lu, dan tambahin satu alat bantu lagi di bawah daftar [dependencies]:

[dependencies]
actix-web = "4.0"
serde = { version = "1.0", features = ["derive"] }
# Tambahin ini biar API lu nggak diblokir sama browser!
actix-cors = "0.6"

Jurus 2: Update Server Rust Lu (main.rs)

Buka file src/main.rs lu dari Part 10 kemarin. Kita cuma perlu nambahin sedikit modifikasi di bagian bawah pas nyalain servernya. (Data Struct dan Endpoint GET/POST tetep sama persis ya!).

use actix_cors::Cors; // Impor alat CORS-nya
use actix_web::{get, post, web, App, HttpResponse, HttpServer, Responder};
use serde::{Deserialize, Serialize};
use std::sync::Mutex;

// ... (KODE STRUCT DAN ENDPOINT GET/POST DARI PART 10 TETAP DI SINI) ...
// (Biar artikelnya nggak kepanjangan, kita skip nulis ulang Struct-nya ya Bro)

#[actix_web::main]
async fn main() -> std::io::Result<()> {
    println!("=======================================================");
    println!("🚀 Server Raja Digital ID + CORS Udah Nyala!");
    println!("=======================================================\n");

    let state = web::Data::new(AppState {
        db_produk: Mutex::new(vec![
            Produk { id: 1, nama: String::from("Sabun Cuci Piring MES 1L"), harga: 15000, stok: 100 },
            Produk { id: 2, nama: String::from("Paket Komplit Laundry"), harga: 45000, stok: 20 },
        ]),
    });

    HttpServer::new(move || {
        // KITA BIKIN ATURAN CORS: "Permissive" artinya bebas diakses dari mana aja
        let cors = Cors::permissive(); 

        App::new()
            .wrap(cors) // Pasang sabuk pengaman CORS-nya di sini!
            .app_data(state.clone())
            .service(get_produk)
            .service(tambah_produk)
    })
    .bind(("127.0.0.1", 8080))?
    .run()
    .await
}

Jalanin lagi server lu pakai cargo run dan biarin terminalnya nyala.

Jurus 3: Script Tutorial Frontend (HTML + JS)

Nah, ini bagian serunya! Lu tinggal bikin satu file HTML biasa, kasih nama kasir.html, atau lu bisa langsung copy-paste kode di bawah ini ke dalam widget HTML/JS di template Blogger lu.

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sistem Kasir Frontend</title>
    <style>
        /* CSS simpel aja biar tampilannya rapi */
        body { font-family: sans-serif; padding: 20px; background: #f4f4f9; }
        .kartu-produk { background: white; padding: 15px; margin-bottom: 10px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
        .harga { color: #2ecc71; font-weight: bold; font-size: 1.2em; }
        button { background: #3498db; color: white; border: none; padding: 10px 15px; border-radius: 5px; cursor: pointer; }
        button:hover { background: #2980b9; }
    </style>
</head>
<body>

    <h1>📦 Data Stok Gudang</h1>
    <button onclick="tarikDataAPI()">🔄 Segarkan Data JSON</button>
    
    <div id="etalase-produk" style="margin-top: 20px;"></div>

    <script>
        // Pakai Vanilla JS biar enteng dan PageSpeed tembus 100!
        async function tarikDataAPI() {
            const etalase = document.getElementById('etalase-produk');
            etalase.innerHTML = "<i>Lagi narik data dari server Rust yang ngebut...</i>";

            try {
                // Kita panggil alamat server Rust kita
                let response = await fetch("http://127.0.0.1:8080/api/produk");
                let dataJSON = await response.json();
                
                // Bersihin layar sebelum nampilin data baru
                etalase.innerHTML = "";

                // Kita 'looping' isi datanya buat dibikin elemen HTML
                dataJSON.forEach(produk => {
                    let kartu = document.createElement('div');
                    kartu.className = 'kartu-produk';
                    kartu.innerHTML = `
                        <h3>🏷️ ${produk.nama}</h3>
                        <p class="harga">Rp ${produk.harga.toLocaleString('id-ID')}</p>
                        <p>📦 Stok Gudang: <b>${produk.stok} unit</b></p>
                    `;
                    etalase.appendChild(kartu);
                });

            } catch (error) {
                etalase.innerHTML = "<b style='color:red;'>Gagal narik data Bro! Server Rust-nya udah nyala belum?</b>";
            }
        }

        // Otomatis tarik data pas web pertama kali dibuka
        tarikDataAPI();
    </script>

</body>
</html>

Hasil Aplikasinya (Simulasi Frontend)

Pastiin server Rust lu masih running di terminal. Klik ganda file kasir.html tadi biar kebuka di browser Chrome lu.

BOOM! 💥 Alih-alih ngelihat kode JSON yang bikin sakit mata, browser lu sekarang bakal nampilin desain kotak-kotak rapi yang isinya "Sabun Cuci Piring MES" dan "Paket Komplit Laundry", lengkap dengan harga dan stoknya!

Kalau lu klik tombol "Segarkan Data", browser lu bakal diem-diem ngobrol sama server Rust di belakang layar buat minta data terbaru tanpa perlu nge- refresh seluruh halaman.

Gila kan? Lu sekarang udah berhasil bikin ekosistem Full-Stack lu sendiri. Backend-nya pakai bahasa tingkat dewa yang anti- crash dan hemat memori, frontend-nya pakai racikan HTML/JS vanilla lu yang super ngebut.

---

karena gua paling demen mainin optimasi web dan ngejar skor PageSpeed 100/100, kita bakal bahas WebAssembly (Wasm). Ini adalah teknologi "ilmu hitam (kalo di marih di sebutnya dukun)" di mana gua bisa masukin kecepatan native Rust langsung ke dalam browser kaga butuh server backend lagi.

AJIAN SANTET Rahasia Web Super Ngebut: Bawa Rust ke Browser Pakai WebAssembly (Wasm)!

sebelonnya kita udah berhasil nyambungin frontend HTML pakai Vanilla JS ke server backend Rust. Performanya emang udah ngebut banget, tapi gimana kalau kita pengen bikin web lu lebih gila lagi? Gimana kalau script logika berat yang biasanya bikin web ngelag (kayak ngitung diskon ribuan data, filter produk, atau manipulasi gambar) kita pindahin dari JavaScript ke Rust, dan kita jalanin langsung di dalam browser pelanggan lu?

Kenalin: WebAssembly (Wasm).

Dengan Wasm, lu bisa ngubah kode Rust jadi format binary yang bisa dibaca sama Chrome, Safari, atau Firefox. Eksekusinya hardware-accelerated dan hampir secepat aplikasi PC (native). Efeknya? Web lu nggak bakal kena forced reflow atau render-blocking gara-gara JS yang kepanjangan. Skor PageSpeed Insights lu bakal melenggang mulus di 100/100!

Yuk, kita bikin modul diskon grosir buat sabun cuci piring komersial kita. ada 5 mahar yang harus lu lakuin :

Mahar 1: Siapin Alat Tempur Wasm

Pertama, lu butuh tool khusus buat ngubah Rust jadi Wasm. Buka terminal lu dan ketik mantra ini buat nge-install wasm-pack:

cargo install wasm-pack

(Tungguin bentar ya Bro, ini cuma perlu di-install sekali seumur hidup di PC lu).

Mahar 2: Bikin Proyek "Library" Baru

Karena kita nggak bikin aplikasi yang jalan di terminal/server, kita bikin proyeknya sebagai library (perpustakaan kode). Ketik di terminal:

cargo new --lib diskon_wasm
cd diskon_wasm

Buka file Cargo.toml-nya, dan tambahin mesin penerjemah Rust-ke-JS bernama wasm-bindgen:

[package]
name = "diskon_wasm"
version = "0.1.0"
edition = "2021"

[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen = "0.2"

Mahar 3: Script Tutorial (Tulis Logika Rust Lu)

Buka src/lib.rs (bukan main.rs ya!), hapus semua isinya, dan copy-paste kode ini:

use wasm_bindgen::prelude::*;

// Mantra #[wasm_bindgen] ini ngasih tahu Rust: "Eh, fungsi ini nanti mau dipanggil dari JavaScript ya!"
#[wasm_bindgen]
pub fn hitung_diskon_grosir(jumlah_botol: i32, harga_satuan: i32) -> String {
    let total_awal = jumlah_botol * harga_satuan;
    let mut diskon = 0;

    // Logika perhitungan berat (bisa lu isi dengan kalkulasi matriks atau array besar sekalipun, Wasm nggak bakal ngelag)
    if jumlah_botol >= 100 {
        diskon = total_awal * 20 / 100; // Diskon grosir 20%
    } else if jumlah_botol >= 50 {
        diskon = total_awal * 10 / 100; // Diskon 10%
    }

    let harga_akhir = total_awal - diskon;
    
    // Balikin hasilnya dalam bentuk teks String ke JavaScript
    format!(
        "Beli {} botol. Harga Normal: Rp{}. Diskon: Rp{}. Total Bayar: Rp{}", 
        jumlah_botol, total_awal, diskon, harga_akhir
    )
}

Mahar 4: Compile Jadi WebAssembly!

Sekarang lu suruh wasm-pack buat nge- build kode lu biar siap masuk web. Balik ke terminal dan ketik:

wasm-pack build --target web

Kalau udah sukses, lu bakal lihat ada folder baru namanya pkg. Di situlah file rahasia WebAssembly lu (.wasm dan .js) nongkrong!

Mahar 5: Panggil Wasm Lu di HTML (Simulasi)

Sekarang, bikin file index.html di dalam folder proyek lu, sejajar sama Cargo.toml. Terus masukin script Vanilla JS ini buat manggil Rust langsung ke halaman web:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Wasm Kasir Super Cepat</title>
    <style>
        body { font-family: Arial; padding: 20px; background: #fafafa; }
        .hasil { background: #d4edda; color: #155724; padding: 15px; border-radius: 5px; margin-top: 20px; font-weight: bold;}
    </style>
</head>
<body>

    <h1>🚀 Kalkulator Grosir (Powered by Rust Wasm)</h1>
    <p>Hitung diskon 1000 data pun browser nggak bakal <i>freeze</i>!</p>

    <div id="output" class="hasil">Sedang memuat WebAssembly...</div>

    <script type="module">
        // Impor fungsi inisialisasi dan fungsi Rust kita dari folder 'pkg'
        import init, { hitung_diskon_grosir } from './pkg/diskon_wasm.js';

        async function jalankanWasm() {
            // Tunggu sampai mesin Wasm menyala
            await init();

            // PANGGIL FUNGSI RUST LANGSUNG DARI JAVASCRIPT!
            // Kita coba hitung beli 120 botol dengan harga Rp15.000
            const hasilKalkulasi = hitung_diskon_grosir(120, 15000);
            
            // Tampilkan di HTML
            document.getElementById('output').innerText = hasilKalkulasi;
        }

        jalankanWasm();
    </script>

</body>
</html>

Hasil Aplikasinya (Simulasi Browser)

Buat ngetes ini, lu harus jalanin local server (lu nggak bisa cuma double-click file HTML-nya gara-gara sistem keamanan browser). Kalau lu pakai Python di PC, ketik aja python -m http.server di terminal, terus buka http://localhost:8000 di browser.

BOOM! 💥 Browser lu bakal nampilin tulisan ini dalam sekejap mata:

Kelihatannya simpel? Emang! Tapi di balik layar, perhitungan diskon itu tidak dikerjakan oleh JavaScript. JS cuma bertugas nampilin hasilnya aja. Semua logika beratnya dikerjain secara native oleh binary file Rust lu.

Bayangin lu masukin fitur filtering jutaan produk, bikin animasi kalkulasi hardware-accelerated, atau enkripsi data pelanggan pakai teknik Wasm ini di template web lu. PageSpeed bakal aman sentosa, user experience bakal maksimal! Banggalah Bro, lu baru aja menguasai masa depan teknologi web modern.

---

Trik PageSpeed 100/100: Bikin Script Auto-Kompres Gambar & Konversi Next-Gen Pakai Rust!

Ditulis oleh: Tim Raja Digital ID

Sebelonnya kita udah berhasil ngebawa performa Rust langsung ke browser pakai WebAssembly. Nah, karena fokus utama kita sering banget ngebahas soal performa web, SEO, dan gimana caranya dapetin skor PageSpeed Insights 100/100, ada satu "musuh utama" yang selalu bikin web jadi lemot: Gambar yang ukurannya raksasa.

Kalau ngomongin soal optimasi web dan ngejar metrik performa maksimal, Gua pasti setuju kalau ukuran gambar itu sering jadi biang kerok yang bikin skor PageSpeed anjlok. Buat web komersial atau etalase produk (misalnya lu lagi mau pajang foto produk sabun cuci piring lu ke Shopee atau landing page), foto beresolusi tinggi itu wajib. Tapi kalau ukurannya tembus 5MB per foto? Web lu bakal loading selamanya, Bro!

Daripada lu capek nge- resize dan ngompres gambar satu-satu pakai software pihak ketiga sebelum di- upload ke server atau etalase marketplace, kenapa nggak kita bikin script otomatisnya aja pakai Rust? Solusinya adalah pakai format Next-Gen dan otomatisasi resizing. Di Part 13 ini, kita bakal bikin program CLI sederhana pakai Rust buat nge- resize gambar mentah dan nge- compress ukurannya biar enteng banget tapi kualitasnya tetep tajam. ada 3 MANTRA AJAIB Gass!

Mantra 1: Siapin "Mesin" Pengolah Gambar

Bikin proyek baru dulu di terminal lu:

cargo new optimasi_gambar
cd optimasi_gambar

Buka file Cargo.toml-nya. Kita bakal pakai library sakti bernama image. Tambahin baris ini di bawah [dependencies]:

[dependencies]
image = "0.24"

Mantra 2: Script Tutorial (Kalkulator Kompresi)

Siapin satu foto mentah yang ukurannya gede banget, misal namanya sabun_raw.jpg, dan taruh di folder proyek lu (sejajar sama folder src).

Sekarang buka src/main.rs, hapus isinya, dan copy-paste mantra ini:

use image::imageops::FilterType;
use std::time::Instant;

fn main() {
    println!("=====================================================");
    println!("🖼️ Mesin Optimasi Gambar Raja Digital ID 🖼️");
    println!("=====================================================\n");

    // Kita pakai stopwatch buat ngukur seberapa ngebut Rust memproses gambar
    let waktu_mulai = Instant::now();

    let nama_file_asli = "sabun_raw.jpg";
    let nama_file_hasil = "sabun_optimized.jpg";

    println!("⏳ Lagi ngebaca file: {}...", nama_file_asli);

    // 1. BUKA GAMBAR MENTAH
    // Ingat pelajaran Part 6 soal error handling (Result)? 
    // Kita pakai .expect() biar ketahuan kalau gambarnya nggak ketemu.
    let gambar_mentah = image::open(nama_file_asli)
        .expect("Waduh Bro! File gambarnya nggak ada di folder.");

    // Cek dimensi aslinya
    let (lebar_asli, tinggi_asli) = gambar_mentah.dimensions();
    println!("Teks Asli: {} x {} pixels", lebar_asli, tinggi_asli);

    // 2. RESIZE GAMBAR (Optimasi Ukuran)
    // Misalnya kita mau lebar maksimal 800px aja buat web, tingginya menyesuaikan otomatis.
    let target_lebar = 800;
    let target_tinggi = (tinggi_asli * target_lebar) / lebar_asli; 

    println!("✂️ Lagi nge-resize jadi: {} x {} pixels...", target_lebar, target_tinggi);

    // FilterType::Lanczos3 itu algoritma resize yang bikin hasil tetep tajem HD
    let gambar_kecil = gambar_mentah.resize(target_lebar, target_tinggi, FilterType::Lanczos3);

    // 3. SIMPAN HASILNYA
    println!("💾 Nyimpen hasil optimasi ke: {}...", nama_file_hasil);
    gambar_kecil.save(nama_file_hasil)
        .expect("Gagal nyimpen gambar Bro!");

    // Catat waktu selesai
    let durasi = waktu_mulai.elapsed();

    println!("\n=====================================================");
    println!("✅ Beres Bro! Semua dieksekusi dalam waktu {:?}", durasi);
    println!("Gambar udah siap di-upload! PageSpeed dijamin hijau!");
    println!("=====================================================");
}

Penjelasan Santai:

• image::open: Ini perintah buat ngebaca file gambar ke dalam memori Rust.
• FilterType::Lanczos3: Saat lu ngecilin ukuran gambar (resize), lu butuh algoritma buat nentuin piksel mana yang dibuang dan dipertahanin. Lanczos3 ini salah satu algoritma tingkat tinggi yang hasilnya paling tajam, cocok banget buat foto produk biar nggak blur.
• Instant::now(): Kita selipin alat pengukur waktu dari Standard Library Rust. Tujuannya? Buat ajang pamer betapa gilanya kecepatan kompilasi dan eksekusi si Rust ini!

Mantra 3: Eksekusi dan Lihat Hasilnya

Pastiin lu udah naruh foto sabun_raw.jpg di folder utama proyek lu. Terus, tembak perintah ini di terminal: (Tips: Pakai bendera --release biar Rust jalanin mode performa maksimalnya tanpa mode debug!)

cargo run --release

Hasilnya di terminal lu bakal kayak gini:

Gila kan, Bro? Cuma butuh sekian milidetik buat ngeproses resize gambar resolusi raksasa pakai algoritma Lanczos3. Kalau lu ngecek foldernya, ukuran file yang tadinya mungkin 4MB sekarang cuma tinggal beberapa ratus KB aja dengan kualitas visual yang sama persis di mata pengunjung.

Dari sini, script ini bisa lu kembangin lagi. Lu bisa masukin looping (perulangan) buat nge-batch ratusan gambar sekaligus dalam satu folder, atau bahkan dikombinasiin sama materi Wasm.

Eksplorasi terus, Bro. Sampai jumpa di oprekan tech tingkat dewa selanjutnya!