Bikin Aplikasi Al-Quran menggunakan Json  


Pada postingan pertama ini,
Saya ingin berbagi Tutorial bagaimana membuat Aplikasi Al-Quran offline menggunakan json di Sketchware.
Semoga bermanfaat dan menambah ilmu ngoding bagi para Coder sekalian. Amiin!!!

Oke Langsung saja!
Pertama yang kita butuhkan adalah file json Al Quran-nya, Silahkan download disini 
MT Manager pro download disini 

Jika sudah proses pengunduhan filenya Selanjutnya kita buka Aplikasi Sketchware dan buatlah project baru.

  》Import Sound

• Tambahkan 2 mp3 dengan nama surat dan ayat setelah itu tekan tombol di bagian atas
• Buka MT manager dan extrak file Al-Quran.zip 
Di dalam folder tersebut ada 2 mp3 dan 2 json Tapi isinya tetap sama, 
Saya menambahkan ekstensi mp3 agar Sobat tidak perlu lagi mengganti ekstensinya, Json nya silahkan dipelajari dan dipahami Strukturnya, Object, Array serta Key dan Valuenya. 

Jadi yang kita perlukan hanya mp3nya saja ya karna Internal Sketchware tidak mendukung file berekstensi json Selanjutnya masuk ke Folder .sketchware》 resources》sounds

• Carilah mp3 yang Sobat tambahkan tadi, Jika sudah ketemu hapus saja filenya dan gantikan dengan file yang sudah diekstrak

Detail Gambar: 
Jika sudah selesai proses pemindahan filenya Silahkan kembali ke Project dan tambahkan layout baru
Mari kita mulai dari halaman pertama dulu  
》MainActivity 

 • Pada halaman ini aturlah tampilan sesuai selera teman-teman, Ini hanya proses pengambilan data. 
Contoh:



 • Buka Tab 》Event 》Moreblock 

Buat More Block dengan nama getJson 
Tambahkan Block ASD dan tempelkan Code ini:
Java

}
public String getJson(java.io.InputStream inputStream) {
java.io.ByteArrayOutputStream outputStream = new java.io.ByteArrayOutputStream();

byte buf[] = new byte[1024];
int i;
try {
while ((i = inputStream.read(buf)) != -1){
outputStream.write(buf, 0, i);
}
outputStream.close();
inputStream.close();
} catch (java.io.IOException e) {

}
return outputStream.toString();
• Buka Tab》Component 
Tambahkan 3 Component yaitu:
Intent, SharedPreferences dan Timer 
Khusus SharedPreferences 
Perhatikan penamaan filenya karna disitulah data Al Quran disimpan. 
 • Buka Tab》Event》Activity》onCreate Tambahkan 2 Variable String surat dan ayat dan susun Block seperti gambar di bawah ini: 
Pada Block ASD tempelkan Code ini:
Java

 java.io.InputStream inputSurat = getResources().openRawResource(R.raw.surat);
surat = getJson(inputSurat);
 java.io.InputStream inputAyat = getResources().openRawResource(R.raw.ayat);
ayat = getJson(inputAyat);
Yap! Halaman pertama sudah selesai Mari kita lanjut ke halaman kedua 
》SuratActivity 
 • Pada halaman ini cukup tambahkan listview1 
 • Buka》CustomView 
Masuk ke halaman surat_list dan atur tampilannya seperti gambar di bawah ini: 



linear1 = Linear(H)
textview1 = Nomor Surat
linear2 = Linear(V)
linear3 = Linear(H)
linear4 = Linear(V)
textview2 = Nama Surat (Indo)
textview3 = Nama Surat (Arab)
textview4 = Type
textview5 = Jumlah Ayat

Atur Custom View pada listview1
 • Buka Tab》Component 
 Tambahkan SharedPreferences dan Intent Nama Filenya tetap quran ya :) 
 • Buka Tab》Event》Activity》onCreate Tambahkan ListMap dengan nama suratList dan susunlah Block seperti gambar di bawah ini: 
 • Buka Tab》Event》 View 
Tambahkan Event onBindCustomView dan onItemClicked pada listview1

• onBindCustomView 
Susun block seperti gambar di bawah ini: 
 • onItemClicked 
Susun Block seperti gambar di bawah ini: 
Nah... Setelah kita mendefinisikan klik pada listview1 maka Intent akan mengirim data dengan key "nomor" dan "nama" dari Posisi Surat yang kita klik lalu berpindah ke AyatActivity 

Fungsi dari 2 key tersebut untuk memberitahu Program bahwa kita hanya butuh Ayat dari Surat yang kita klik. Misalnya jika kita klik Surat Al - Fatihah, maka nomor = 1 dan nama = Al - Fatihah Lebih jelasnya "nomor" untuk mengambil Object Key pada Ayat, dan "nama" untuk mengganti title pada Activity. Paham ya? :)  
Jadi kita tidak perlu membuat sebanyak 114 Activity untuk menampilkan setiap Surat yang diklik. Ini sederhana tapi penting untuk dipahami bagi pemula :) 

》AyatActivity
• Pada halaman ini cukup tambahkan listview1 
 • Buka》Custom View 
Masuk ke halaman ayat_list dan atur tampilannya seperti gambar di bawah ini: 
linear1 = Linear(V)
linear2 = Linear(H)
textview1 = Tulisan Ayat (Latin)
textview2 = Tulisan Ayat (Indo)
textview3 = Nomor Ayat
textview4 = Tulisan Ayat (Arab)
Atur Custom View pada listview1


 •Tambahkan Component SharedPreferences 
Nama filenya tetap quran ya :) 
 • Buka Tab》Event》Activity》onCreate 
Tambahkan Variable String nomor dan ayat dan susun Block seperti gambar di bawah ini: 
Di bagian onCreate ini berbeda dengan SuratActivity karna pada Json Surat dibungkus dengan Array [...] Jadi kita boleh langsung memindahkannya ke ListMap. Sedangkan pada Json Ayat dibungkus dengan Object {...} Perbedaannya dapat dilihat dari 2 gambar berikut: 
Pada Block ASD tempelkan Code ini:
Java

if (ayat != null) {
  try {
     org.json.JSONObject jsonObj = new org.json.JSONObject(ayat);
     org.json.JSONArray jumlah_ayat = jsonObj.getJSONArray(nomor);
     for (int i = 0; i < jumlah_ayat.length(); i++) { 
     org.json.JSONObject key = jumlah_ayat.getJSONObject(i); 

    String obj1 = key.getString("nomor"); 
    String obj2 = key.getString("arab"); 
    String obj3 = key.getString("indo"); 
    String obj4 = key.getString("latin"); 

    HashMap map = new HashMap<>(); 
    map.put("nomor", obj1);
    map.put("arab", obj2); 
    map.put("indo", obj3); 
    map.put("latin", obj4); 

    ayatList.add(map);
    listview1.setAdapter(new Listview1Adapter(ayatList));
    }
 } catch (final org.json.JSONException e) { 
     runOnUiThread(new Runnable() { 
    @Override public void run() {
    
     }
  }); 
} 

    } else { 
      runOnUiThread(new Runnable() {
      @Override public void run() {
          Toast.makeText(AyatActivity.this, "Tidak ada data" , 0).show();
          }
    }); 
}
Karna pada tulisan Latin menggunakan tag html maka kita perlu mengkonversi tulisannya dalam format html. 
• Buatlah MoreBlock dengan nama setText 
Tambahkan Block ASD dan tempelkan Code ini:
Java

 _text.setText(Html.fromHtml(_str));

• onBindCustomView 
Tambahkan ListMap dengan nama ayatList dan susun Block seperti gambar di bawah ini: 
Yap! Akhirnya selesai juga, Mudah 'kan? Kita tidak perlu lagi menulis Ayat satu persatu pada Listmap :D 
Itulah fungsi dari JSON, sangat mudah dalam pertukaran Data..

》Run dan Install 
 Sekarang Run dan Install Aplikasinya
Jika tidak error maka hasilnya seperti ini: 
Sekian dulu tutorial kali ini 
Happy Coding 😊