Cara parsing data json API di kodular

Pada kesempatan kali ini, saya akan menjelaskan bagaimana cara parsing data json API di kodular. Biasanya ketika membuat aplikasi, informasi yang akan disampaikan kepada pengguna tidak hanya bersumber pada database milik kita saja, misalkan pada aplikasi yang kita buat akan menampilkan data-data transaksi atau data detail pengiriman barang dari beberapa jasa pengiriman ataupun data-data lainnya yang sumber datanya bukan dari database kita.

Cara parsing data json API di Kodular
Cara parsing data json API di Kodular

Nah data-data tersebut didapat dari API milik perusahaan ataupun pihak-pihak yang menyediakan web service untuk membagikan data-data milik mereka secara gratis maupun berbayar. Data yang dibagikan dengan API biasanya dalam bentuk format json.

Lalu API dan JSON itu apa? silahkan baca penjelasan singkat dibawah ini.

Apa itu API?

API atau Application Programming Interface adalah sebuah interface yang dapat menghubungkan aplikasi satu dengan yang lainnya. Jadi API berperan sebagai perantara antar berbagai aplikasi berbeda, baik dalam satu platform yang sama, atau lintas platform.

Dikutip dari Niagahoster

Silahkan baca secara lengkap tentang apa itu API?

Apa itu JSON?

JSON atau JavaScript Object Notation adalah format yang digunakan untuk menyimpan data ataupun mentransfer data. Berbeda dengan XML dan format lainnya yang memiliki fungsi serupa, JSON memiliki struktur yang sederhana dan mudah dipahami. Itulah mengapa JSON sering digunakan pada API.

JSON tidak hanya digunakan pada Javascript namun juga bisa digunakan pada bahasa pemrograman lainnya seperti PHP, Python, Ruby, C++, dan Perl.

Dikutip dari Niagahoster

Nah setelah membaca penjelasan tentang API dan JSON saya harap kamu sudah paham walaupun hanya sedikit.

Balik lagi ke pembahasan artikel.

Bagaimana cara parsing data json API di kodular

Kali ini saya akan memberikan contoh cara parsing data json API dengan membuat sebuah aplikasi android sederhana yang akan menampilkan data informasi mengenai Covid-19 di Indonesia. Untuk pembuatan aplkasinya saya disini menggunakan Framework Kodular.

Apabila kamu pengguna App Inventor, silahkan untuk migrasi ke kodular, karena di kodular fitur untuk membuat aplikasinya lebih banyak dan bervariasi.

Lalu data API yang akan saya gunakan adalah api-covid19-v2 yang didapat dari repositori github milik Reynadi.

Pada repositori tersebut akan dijelaskan beberapa Endpoints yang bisa kita gunakan untuk mendapatkan data informasi Covid-19 di Indonesia.

Endpoint adalah ujung saluran komunikasi. Saat API berinteraksi dengan sistem lain, titik kontak dari komunikasi ini dianggap sebagai Endpoint. Untuk API, Endpoint dapat menyertakan URL server atau layanan. Setiap Endpoint adalah lokasi dari mana API dapat mengakses sumber daya yang mereka butuhkan untuk menjalankan fungsinya.

Silahkan kamu pilih endpoint yang akan kamu pakai, namun pada tutorial kali ini saya akan menggunakan 2 Endpoint yaitu /api/indonesia dan /api/indonesia/provinsi. Ketika URL Endpoint dibuka, maka akan menampilkan data informasi dalam bentuk format json seperti dibawah ini.

// data yang ditampilkan dari Endpoint /api/indonesia
{
positif: 3666031,
dirawat: 474233,
sembuh: 3084702,
meninggal: 107096,
lastUpdate: "2021-08-08T10:04:11.000Z"
}

// data yang ditampilkan dari Endpoint /api/indonesia/provinsi
[
{
provinsi: "DKI JAKARTA",
kasus: 829828,
dirawat: 10182,
sembuh: 806868,
meninggal: 12778
},
{
provinsi: "JAWA BARAT",
kasus: 634733,
dirawat: 100116,
sembuh: 524246,
meninggal: 10371
},
{
provinsi: "JAWA TENGAH",
kasus: 410450,
dirawat: 41732,
sembuh: 346238,
meninggal: 22480
},
....
]

nah ketika kita sudah membuka URL Endpoint tersebut, janga lupa untuk copy linknya lalu simpan di notepad terlebih dahulu.

Setelah itu kita lanjut membuat desain untuk aplikasinya.

Desain aplikasi covid-19

Berikut di bawah ini adalah desain dari aplikasi yang saya buat, desain yang saya buat masih sederhana, kamu dapat membuatnya lebih bagus lagi.

desain aplikasi covid-19
desain aplikasi covid-19

Untuk menampilkan data covid nasional saya menggunakan komponen Card, lalu untuk menampilkan data covid setiap provinsi saya menggunakan komponen Listview Image. Selain itu kamu janga lupa untuk upload logo untuk aplikasi ataupun untuk logo disetiap listview.

adapun komponen yang sangat diperlukan untuk proses pengambilan data melalui API, komponen tersebut adalah web. Tambahkan komponen web ke layar aplikasi. Di tutorial ini saya menambahkan 2 komponen web karena untuk mendapatkan data covid indonesia dan data covid disetiap provinsi.

Block program aplikasi covid-19

Berikut di bawah ini block program yang dibuat dalam satu screen.

block program inisiasi untuk mendapatkan data covid-19 indonesia
block program inisiasi untuk mendapatkan data covid-19 indonesia

pada bagian kompone web1 url masukkan link yang sudah disalin tadi ke komponen ini, komponen ini berisi link “https://apicovid19indonesia-v2.vercel.app/api/indonesia” yang akan menampilkan data covid-19 di Indonesia.

block program untuk proses menampilkan data covid-19 indonesia
block program untuk proses menampilkan data covid-19 indonesia

kemudian untuk komponen web2 URL masukkan link yang disalin tadi, link ini akan menampilkan data covid-19 untuk setiap provinsi. Berikut URL Endpointnya “https://apicovid19indonesia-v2.vercel.app/api/indonesia/provinsi”

block program inisiasi untuk mendapatkan data covid-19 setiap provinsi
block program inisiasi untuk mendapatkan data covid-19 setiap provinsi
block program untuk proses menampilkan data covid setiap provinsi
block program untuk proses menampilkan data covid setiap provinsi

Setelah selesai proses pembuatan block programnya, selanjutnya adalah melakukan testing pada aplikasi dengan cara deploy project yang dibuat menjadi sebuah aplikasi android.

Deploy project ke aplikasi

untuk mendeploy bisa dilakukan dengan cara klik menu Export lalu pilih menu Android App, untuk merubah project kedalam bentuk aplikasi.

berikut di bawah ini hasil dari tutorial yang dibuat.

Dokumentasi Video

Apabila ada yang ingin ditanyakan, silahkan tulis komentar di bawah ini. Sekian dari tutorial yang saya buat semoga bermanfaat. Berikut file aia saya lampirkan sebagai bahan pembelajaran untuk kamu.

5 comments

  1. Selamat Siang.
    Saya ingin menanyakan jika ingin membuat koneksi antar sesama project Kodular bagaimana ya? misalnya saya buat aplikasi toko online, kemudian utk tahu ada pesanan masuk saya harus buat project baru khusus halaman saya sbg pemilik toko agar tahu ada pesanan masuk, bagaimana membuat koneksi antar project tersebut?

  2. maaf mau bertanya. di bagian blok when web2. got text
    memunculkan call corona_negara
    json

    seperti apa caranya ? atau otomatis. mohon pencerahannya

    1. block call corona negara itu prosedure, kalau sudah buat prosedurenya nanti blok nya ada. Kalau belum ada call corona negara di block, maka harus buat prosedurenya. Scroll kebawah sedikit disitu sudah saya buat prosedure corona negara.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.