Construct 2 - Menggunakan JSON Object untuk Fitur Online

February 15, 2018 in #Coding #Construct 2 | | | Share on Google+

JSON (Javascript Object Notation) adalah sebuah format standar yang digunakan untuk bertransaksi data. JSON digunakan baik untuk mengirimkan data ke server, dan sebaliknya. Dulu, saya pernah menulis tutorial yang mirip, namun ada beberapa kekurangan di situ. Apa saja?

  • Kurang terstruktur, hasil kembalian hanyalah sebuah string
  • tidak bisa mengirimkan banyak data sekaligus

Oleh karena itu, dalam kesempatan ini saya akan membuat versi lebih baiknya, sehingga sama dengan tutorial fitur online untuk Unity yang juga pernah saya tulis.

Kenapa Enggak Pakai CSV Aja?

Mungkin ada yang menyarankan menggunakan csv karena alasan kemudahan. Hingga pada titik tertentu, betul lebih mudah. Namun perlu saya ingatkan lagi kalau JSON adalah format standar, dan CSV tidak bisa mengolah data berbentuk hirarki. (CMIIW)



Struktur JSON

JSON Adalah data yang berbentuk mirip dictionary. Jika ingin mengakses sebuah value, kamu harus tau key dari data tersebut. Di dalam JSON, terdapat istilah level atau hirarki. Hirarki level pertama disebut dengan root, kemudian level kedua, ketiga disebut dengan child.

Jadi, objek JSON dapat memiliki objek JSON lain di dalamnya.

Contoh dari objek JSON adalah seperti gambar di bawah.

Gambar di atas adalah sebuah contoh data JSON berupa data matakuliah. Dalam gambar tersebut, terlihat jelas leveling di dalam sebuah data JSON. Dalam level pertama (root), terdapat dua key, yaitu status dan data. Selanjutnya, data memiliki child yang berisi array JSON data matakuliah. Di sinilah yang tadi saya sebut sebagai hirarki. Dengan hirarki tersebut, data dapat kita susun sedemikian rupa sehingga lebih rapi dan dapat dipahami dengan mudah.

Meringkas penjelasan di atas, objek JSON :

  • diakses secara key dan value seperti dictionary
  • dapat tersusun dari objek JSON lain
  • dapat berisi bermacam-macam data (teks, array, integer, dll)


Menggunakan JSON Object

Persiapan

Setelah memahami tentang JSON, mari kita mulai mengimplementasikannya. Pertama, download dulu plugin lewat repository githubnya. Kemudian untuk file contoh datanya, kita gunakan data matakuliah yang tadi saya contohkan. Untuk mempercepat, saya akan hosting file JSON saya di alamat berikut : https://api.myjson.com/bins/mv0j9. Coba cek dulu linknya, jika datanya tidak ada (dihapus sistem), silakan membuat sendiri.

Setelah semuanya siap, bukalah Construct dan buatlah event di bawah ini :

Event di atas akan mengambil data JSON di situs myjson.com dan menampilkannya di debug preview seperti berikut :

Jika sudah muncul, selanjutnya kita akan coba beberapa fitur utama yang dimiliki plugin JSONObject.


Untuk mengambil valuesebuah data, digunakan ekspresi JSON.Value(). Dalam kasus ini, kita akan mencoba menampilkan seluruh data matakuliah. Karena data matakuliah berada di level kedua, kita perlu menunjukkan lokasi dari value yang akan diambil. Contoh untuk mengambil matakuliah Pendidikan Agama, path yang dilalui adalah :

0 (root) / daftar_matakuliah / 0 (indeks ke-n dari array of JSON) / nama_matakuliah

Sehingga, untuk event untuk menampilkan semua data matakuliah adalah seperti berikut :

Hasilnya :

Jika path yang kamu berikan kurang, maka akan menjadi seperti berikut :

Dalam contoh ini, path yang saya berikan bentuknya seperti ini :

0 / data_matakuliah / loopindex

Oleh karena itu, wajar jika teks menampilkan tulisan "object", karena value dari path yang kita berikan berupa objek JSON (data sebuah matakuliah yang berisi kode, nama matakuliah, dan jumlah sks), bukan string.



Relative Path dan Reference

Bisa jadi, path yang kita tunjuk lokasinya dalam sekali. Nah biar mempersingkat, kita bisa menggunakan current path. Setelah memberikan lokasi, kita tinggal mengakses data lewat JSON.CurrentValue.

Bandingkan dengan cara yang pertama tadi.

Untuk reference gunanya hampir mirip dengan relative path.

Membuat Data JSON

Setelah tau bagaimana cara mengakses, sekarang kita akan mencoba membuat data JSON. Data JSON inilah yang nantinya kita kirimkan ke server menggunakan AJAX.

Pertama, kita perlu membersihkan dulu isi dari JSONObject. Kemudian kita bisa memulai membuat dengan perintah Set New Object atau Set New Array. Struktur dari data JSON yang kita buat akan mirip dengan data JSON yang tadi kita ambil.

Pertama, kita buat sebuah objek yang akan menampung seluruh data matakuliah. Di dalamnya, berisi array matakuliah sejumlah N.

Setelah itu, kita masukkan data di setiap indeks array dengan objek JSON baru, yang berisi data kode, nama matakuliah, dan jumlah SKS.

Terakhir, tinggal kita kirimkan data JSON dengan AJAX.



Download Source Code!

Source code bisa didownload di sini.

February 15, 2018 in #Coding #Construct 2 | | | Share on Google+