Currency Converter Sederhana menggunakan API Pada Framework .NET (C#)
Howdy, partner 🤠!
Hari ini kita bakal belajar bareng bikin aplikasi Currency Converter sederhana .NET Framework C#. Kita bakal bikin dua versi, statis dan dinamis menggunakan Currency Converter API. So, stay tune.
Static Currency Converter
Pada versi yang statis, kita bakal nerapin fixed currency rate. Currency yang bakal kita pakai kali ini ada IDR, USD, EUR, JPY, CAD dan GBP. Kalau temen-temen pengen dapetin nilai currency yang terbaru bisa dapetin datanya dari internet atau Google.
Pertama, buat project Windows Form APP(.NET) baru, pastiin piliih yang bahasanya C# ya.
Kedua, bikin layout sesuai keinginan temen-temen. Kalau aku bakal pake 2 ComboBox dan 2 TextBox sama 1 Button nih, jadinya kira kira kaya gini.
Oh iya, kalau temen-temen masih bingung cara buat project baru sama cara pakai elemen Windows Form App di Visual Studio bisa baca di artikelku yang sebelumnya.
Belajar Membuat Aplikasi Kalkulator Sederhana Menggunakan Visual Studio (C#)
Satu lagi yang mungkin belum ada di tutorial sebelumnya itu buat nambahin pilihan Currency pada ComboBox nya. Temen-temen bisa akses tab Properties di atribut Items yang bagian Data, tekan tombol … nya nanti bakal keluar window buat ngisi currency sesuai yang temen-temen mau.
Ada tambahan lagi nih kalau temen-temen pengen ComboBox-nya nggak bisa diedit pake tulisan, kalian bisa nambahin code di bawah ini pada file Form1.cs
// name combobox nya udah aku ganti pake boxKiri dan boxKanan
boxKanan.DropDownStyle = ComboBoxStyle.DropDownList;boxKiri.DropDownStyle = ComboBoxStyle.DropDownList;
Ketiga, kita bakal buat fungsi converternya, sebelumnya temen-temen perlu install package Newtonsoft.JSON dulu. Caranya klik Tools>NuGet Packet Manager>Manage NuGet Packages for Solution
Browse Newtonsoft.JSON dan pilih project yang akan kita pasang Package ini, kemudian tekan tombol install
Setelah selesai install tambahkan code ini di atas file Form1.cs.
using Newtonsoft.Json.Linq;Sekarang buat fungsi untuk ngehandle tombol covert ketika diklik, tambahkan code ini di fungsi yang ngehandle klik tombol convert kalian.
// Data Fixed Currency rate
String CurrencyJSON = "{IDR_IDR: 1,IDR_USD: 6.8620757e-05,IDR_EUR: 5.8495421e-05,IDR_JPY: 0.007595,IDR_CAD: 8.6489945e-05,IDR_GBP: 4.9835482e-05,USD_IDR: 14572.85,USD_USD: 1,USD_EUR: 0.852275,USD_JPY: 110.652051,USD_CAD: 1.260325,USD_GBP: 0.726295,EUR_IDR: 17095.120506,EUR_USD: 1.173096,EUR_EUR: 1,EUR_JPY: 129.823011,EUR_CAD: 1.478512,EUR_GBP: 0.851768,JPY_IDR: 131.672467,JPY_USD: 0.009035,JPY_EUR: 0.007702,JPY_JPY: 1,JPY_CAD: 0.011388,JPY_GBP: 0.006562,CAD_IDR: 11562.642568,CAD_USD: 0.793421,CAD_EUR: 0.676348,CAD_JPY: 87.80707,CAD_CAD: 1,CAD_GBP: 0.576139,GBP_IDR: 20070.170848,GBP_USD: 1.377249,GBP_EUR: 1.174029,GBP_JPY: 152.416008,GBP_CAD: 1.735816,GBP_GBP: 1}";// Disimpan dalam bentuk Jobject agar bisa diakses pake key
var CurrencyObject = JObject.Parse(CurrencyJSON);// name elemen text dan combobox udah aku ganti pake
// textKanan, textKiri, boxKanan dan boxKiri
textKanan.Text = (Double.Parse(CurrencyObject[$"{boxKiri.Text}_{boxKanan.Text}"].ToString()) * Double.Parse(textKiri.Text)).ToString();
Lengkapnya code Form1.cs nanti bakal kaya gini
Udah jadi deh.
Dynamic Currency Converter
Sekarang kita bakal bikin Currency Converternya jadi dinamis. Kita bakal pake api dari web currency converter api. Temen-temen perlu registrasi dulu ya, buat dapetin API Key-nya. Cukup butuh masukin email aja dan nanti API Ket-nya bakal dikirim lewat e-mail yang udah dimasukin.
Langkah yang dilakuin untuk bikin tampilannya dan layoutnya sama kaya Currency Converter yang statis kok, jadi temen-temen bisa langsung pake / buat yang beda juga boleh. Tapi aku pake yang sama kaya sebelumnya, karena mager aja sih, hehe.
Pertama, kalau kalian sudah buat layout formnya sekarang waktunya kita implementasiin API pada aplikasi kita. Temen-temen pasti tahu dong biar kita bisa dapetin data dari API maka kita perlu pakai HTTP method GET. Caranya adalah kalian perlu menambahkan code ini pada bagian atas file Form1.cs
using System.Net.Http;Kedua, Method GET yang akan kita gunakan menerapkan sistem async await jadi kita perlu memodifikasi sedikit fungsi yang menghandle tombol convert ketika di klik, dengan menambahkan async didepan return type void deklarasi fungsinya. Seperti kode dibawah ini
private async void con_button(object sender, EventArgs e){ // Handle klik}
Ketiga, fetch data dari API kita dengan menambahkan kode dibawah ini. Aku ngambil referensi ini dari situs zetcode.com, kalau temen-temen pengen belajar lebih dalem tentang HTTP Request di C# langsung aja kunjungi situsnya aja ya.
var convert = $"{boxKiri.Text}_{boxKanan.Text}";
var key = [YOUR_API_KEY]
var url = $"https://free.currconv.com/api/v7/convert?q={convert}&compact=ultra&apiKey={key}";using var client = new HttpClient();
var content = await client.GetStringAsync(url);
Keempat, gunakan data yang diperoleh dengan cara yang sama seperti pada aplikasi statis, variabel content diatas sudah bertipe String dan isinya JSON, jadi bisa langsung kita ubah jadi JObject dan dikeluarkan sebagai output. Tapi mungkin sebagai perbandingan aku tulisin lagi dibawah.
var CurrencyObject = JObject.Parse(content);textKanan.Text = (Double.Parse(CurrencyObject[convert].ToString()) * Double.Parse(textKiri.Text)).ToString();
Lengkapnya code di file Form1.cs bakalan seperti ini.
Udah jadi deh, gampang nggak kira-kira? kalau kalian punya cara yang lebih gampang langsung komen aja ya, hasilnya bisa kalian lihat dibawah ini.
Temen-temen bisa lihat di video diatas kalau setelah diconvert ada jeda yang terjadi karena programnya perlu buat request data dari API jadi ada latensi antara waktu klik tombol dan munculnya hasil di kolom kanan.
Semoga artikel kali ini bermanfaat buat kalian semua ya. Mau diskusi atau kalian punya ide lain? Langsung komen aja, aku dengan senang hati menerimanya. Sampai jumpa di artikel- selanjutnya, peace out ✌🏼.
