Proyek 29 Artikel ⏱️ Estimasi Waktu Baca: 7 menit

Proyek Fungsional: Membangun Aplikasi Konverter Mata Uang Cerdas dengan API

Halo Sobat Jurnal Coding! Pernahkah kamu berbelanja alat elektronik di toko online luar negeri, atau mungkin kamu sedang merintis karir sebagai pekerja lepas (freelancer) dan mendapatkan tawaran gaji dalam bentuk Dolar Amerika? Pasti hal pertama yang kamu lakukan adalah membuka Google dan mengetikkan kalimat seperti "100 USD to IDR" untuk mengetahui berapa nilai tukarnya dalam Rupiah.

Kegiatan menghitung nilai tukar mata uang adalah hal yang sangat krusial di era ekonomi digital yang serba mengglobal ini. Nah, sebagai calon Software Engineer yang hebat, mengapa kita harus terus-terusan mengandalkan Google jika kita bisa membangun aplikasi konverter mata uang milik kita sendiri? Ya, kamu tidak salah dengar! Di proyek kali ini, kita akan membangun sebuah Aplikasi Konverter Mata Uang Cerdas yang bisa menarik data nilai tukar uang secara langsung (real-time) menggunakan teknologi API.

Proyek ini sangat penting untuk portofolio kamu karena dunia kerja saat ini sangat membutuhkan programmer yang bisa menghubungkan aplikasi mereka dengan layanan pihak ketiga. Kita akan menggunakan analogi "Pelayan Restoran" lagi untuk memahami cara kerja API keuangan ini.

Konsep Dasar Proyek Ini

Sebelum kita mulai mengetik kode, mari kita pahami dulu alur kerja aplikasi kita. Aplikasi ini membutuhkan tiga komponen utama agar bisa berjalan dengan sempurna:

Pertama, kita membutuhkan kerangka visual (HTML) yang berisi kotak input untuk mengetikkan jumlah uang, dan dua kotak pilihan (dropdown) untuk memilih mata uang asal dan mata uang tujuan. Kedua, kita membutuhkan desain (CSS) bergaya Glassmorphism agar aplikasi kita terlihat mahal dan elegan. Ketiga, kita membutuhkan otak penggeraknya (JavaScript) yang akan bertugas menelpon server bank pusat (melalui API), menanyakan nilai tukar hari ini, dan menghitung hasilnya untuk ditampilkan ke layar.

Untuk menelpon server pusat, kita akan meminjam layanan gratis dari antarmuka pemrograman aplikasi (API) bernama ExchangeRate-API. Layanan ini ibarat seorang kasir bank yang siap sedia 24 jam untuk menjawab pertanyaan kita tentang harga mata uang di seluruh dunia.

Langkah 1: Membangun Antarmuka (HTML)

Mari kita mulai dengan membuat kerangka rumahnya. Buka Text Editor kesayanganmu (seperti VS Code), buat file baru bernama index.html, dan ketikkan kode kerangka berikut. Kita akan menyiapkan kotak-kotak penampung untuk tempat pengguna memasukkan angka dan melihat hasil.



<div class="converter-box">


  <h2>Konverter Mata Uang</h2>


  <div class="input-group">


    <label>Jumlah Uang:</label>


    <input type="number" id="jumlahUang" value="1">


  </div>


  <div class="currency-selectors">


    <select id="mataUangAsal">


      <option value="USD">USD - Dolar Amerika</option>


      <option value="IDR">IDR - Rupiah Indonesia</option>


      <option value="EUR">EUR - Euro</option>


    </select>


    <span> KE </span>


    <select id="mataUangTujuan">


      <option value="IDR">IDR - Rupiah Indonesia</option>


      <option value="USD">USD - Dolar Amerika</option>


      <option value="EUR">EUR - Euro</option>


    </select>


  </div>


  <button id="tombolKonversi">Hitung Nilai Tukar</button>


  <h3 id="hasilKonversi">Hasil: Silakan hitung...</h3>


</div>

Pada kode HTML di atas, kita menyiapkan tag input berjenis angka agar pengunjung tidak bisa mengetikkan huruf secara sembarangan. Kita juga menyiapkan tag select yang berfungsi sebagai menu pilihan mata uang yang bisa diklik.

Langkah 2: Mempercantik dengan Sihir CSS

Website tanpa CSS ibarat rumah tanpa cat dan jendela, sangat membosankan! Mari kita hias aplikasi kita dengan gaya kaca buram transparan. Buat tag penata gaya di dalam file kamu dan tempelkan kode berikut.



.converter-box {


  background: rgba(255, 255, 255, 0.1);


  backdrop-filter: blur(10px);


  padding: 30px;


  border-radius: 15px;


  border: 1px solid rgba(255, 255, 255, 0.2);


  color: white;


  text-align: center;


  max-width: 400px;


  margin: auto;


}





input, select, button {


  width: 100%;


  padding: 10px;


  margin: 10px 0;


  border-radius: 5px;


  border: none;


  background: rgba(255, 255, 255, 0.9);


  color: #333;


  font-size: 16px;


}





button {


  background: #00ffff;


  cursor: pointer;


  font-weight: bold;


}

Dengan kode CSS tersebut, kotak aplikasi kita akan terlihat mengambang dan tembus pandang layaknya sebuah kaca mahal di atas meja kerja seorang bankir profesional.

Langkah 3: Menghidupkan Mesin dengan JavaScript

Sekarang tibalah kita di bagian paling menegangkan sekaligus paling menyenangkan. Kita akan menyuruh JavaScript untuk pergi ke internet, mengambil data kurs terbaru, dan melakukan perhitungan matematika secara instan.

Perhatikan baik-baik kode di bawah ini. Kita menggunakan fungsi bernama fetch. Bayangkan fetch ini adalah seorang kurir pengantar pesan. Kita memberikan alamat website bank pusat kepadanya, lalu kurir tersebut akan pergi, mengambil bungkusan paket berisi data nilai tukar uang (dalam format JSON), lalu membawanya pulang ke laptop kita.



const tombolHitung = document.getElementById("tombolKonversi");


const tampilHasil = document.getElementById("hasilKonversi");





tombolHitung.addEventListener("click", function() {


  const jumlah = document.getElementById("jumlahUang").value;


  const dari = document.getElementById("mataUangAsal").value;


  const ke = document.getElementById("mataUangTujuan").value;





  tampilHasil.innerHTML = "Sedang menghitung nilai tukar...";





  const alamatAPI = "https://api.exchangerate-api.com/v4/latest/" + dari;





  fetch(alamatAPI)


    .then(response => response.json())


    .then(data => {


      const nilaiTukar = data.rates[ke];


      const totalKonversi = (jumlah * nilaiTukar).toLocaleString("id-ID");


      tampilHasil.innerHTML = jumlah + " " + dari + " = " + totalKonversi + " " + ke;


    })


    .catch(error => {


      tampilHasil.innerHTML = "Waduh, koneksi ke bank terputus!";


    });


});

Mari kita bedah sihirnya baris demi baris! Pertama, kita menempelkan telinga gaib (Event Listener) pada tombol hitung. Begitu tombol itu diklik, JavaScript segera mencatat berapa jumlah uang yang diketik pengguna, mata uang asal, dan mata uang tujuan.

Selanjutnya, kita merangkai alamat URL dengan menambahkan mata uang asal di bagian paling belakang. Jika pengguna memilih USD, maka URL-nya menjadi alamat pencarian untuk kurs USD. Kurir fetch kemudian melesat pergi mengambil data tersebut.

Setelah kurir kembali, kita membuka paket datanya dengan perintah response.json. Di dalam paket tersebut, kita mencari nilai tukar spesifik untuk mata uang tujuan kita. Terakhir, kita tinggal mengalikan jumlah uang yang dimasukkan pengguna dengan nilai tukar dari bank pusat. Sangat mudah dan logis, bukan?

Untuk membuatnya terlihat profesional, saya juga menambahkan fungsi toLocaleString. Fungsi ini sangat sakti karena ia akan memberikan titik pemisah ribuan secara otomatis. Bayangkan jika uang yang dihitung mencapai jutaan, tentu mata kita akan pusing membaca angka nol yang berjejer tanpa titik pemisah!

Pesan Penutup untuk Karirmu

Selamat! Kamu baru saja merakit mesin waktu finansial milikmu sendiri. Proyek ini membuktikan bahwa kamu kini telah mampu menghubungkan antarmuka visual (Frontend) dengan server data jarak jauh (Backend).

Banyak sekali perusahaan rintisan (startup) dan perusahaan teknologi besar yang berani membayar mahal programmer yang fasih menggunakan API. Jika kamu sudah berhasil merakit aplikasi ini, cobalah untuk berkreasi lebih liar lagi! Kamu bisa mencoba menambahkan daftar mata uang dari seluruh negara di benua Asia, atau mungkin menambahkan grafik pergerakan nilai tukar dari hari ke hari.

Teruslah mengasah rasa ingin tahu kamu. Jangan pernah lelah menekan tombol perbarui di browser untuk melihat hasil karya ketikanmu hidup dan melayani kebutuhan manusia. Sampai jumpa di tantangan proyek Jurnal Coding selanjutnya, dan tetap semangat merajut masa depan digitalmu!