Membuat Aplikasi Jadwal Sholat di Android Studio Menggunakan Kotlin

Membuat Aplikasi Jadwal Sholat di Android Studio Menggunakan Kotlin

Cara Membuat Aplikasi Jadwal Sholat di Android Studio Menggunakan Kotlin
Cara Membuat Aplikasi Jadwal Sholat di Android Studio Menggunakan Kotlin

Hallo sobat ruangcoder, artikel kali ini tentang Cara Membuat Aplikasi Jadwal Sholat di Android Studio Menggunakan Kotlin, dimana tutorial membuat aplikasi android dengan android studio yang akan saya berikan , tutorial membuat aplikasi Jadwal Sholat Sederhana dengan android studio , jadwal sholat yang muncul akan berdasarka kota yang dipilih. aplikasi android studio ini belum melakukan deteksi lokasi menggunakan GPS. karena aplikasi android ini masih sangat sederhana, yang akan di fokuskan dari tutorial kali ini adalah pada proses penggunaan API Jadwal Sholat, dimana untuk proses membaca JSON API dan menampilkannya pada aplikasi android studio yang kita buat.

Aplikasi ini kita akan buat menggunakan bahasa pemrograman Kotlin dan API Jadwal sholat yang admin ambil dari API Fatimah Bot, Disana telah disediakan berbagai macam jenis API salah satunya ya seperti tutorial ini API Jadwal Sholat


Cara Membuat Aplikasi Jadwal Sholat di Android Studio Menggunakan Kotlin :



Langkah pertama silahkan sobat buka android studio sobat,saat terbuka android studio sobat klik -> Start a new Android Studio project -> pilih Empty Activity -> kasih nama project tersebut dengan nama "JadwalSholat" kemudian pilh Api 19 , yaitu Android KitKat dan pada "Language" pilih Kotlin , karena kita akan menggunakan bahasa pemrograman Kotlin, langsung Finish saja. Lalu sobat tunggu sampai Gradle dll nya selesai di Synchrone , tunggu saja, admin anggep sobat sudah selesai, jadi kita lanjut.

Kemudian silahkan sobat modifikasi file activity_main.xml sobat , dengan merubah codingannya seperti codingan yang ada gambar dibawah ini, dan btw admin mau memberi tau , disini admin sudah memakai android studio yang terbaru dan bisa sobat lihat disini admin sudah bermigrasi ke androidx jadi bagi sobat yang belum jangan di copas semua, sobat ketikkan dari pembuka tag LinearLayout sampai tentunya penutup LinearLayout nya, jadi sesuaikan dengan veri android studio sobat juga ya.



<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <LinearLayout
        android:padding="@dimen/padding"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <Spinner
            android:id="@+id/kota"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

        <LinearLayout
            android:orientation="vertical"
            android:layout_marginTop="@dimen/vertical_margin"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <TextView
                android:id="@+id/tv_tanggal"
                android:text="Tanggal"
                android:layout_marginBottom="@dimen/vertical_margin"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"/>

            <LinearLayout
                android:orientation="horizontal"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <TextView
                    android:text="Subuh"
                    android:layout_marginBottom="@dimen/vertical_margin"
                    android:layout_width="@dimen/left_width"
                    android:layout_height="wrap_content"/>

                <TextView
                    android:id="@+id/tv_subuh"
                    android:text="12"
                    android:layout_marginBottom="@dimen/vertical_margin"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"/>

            </LinearLayout>

            <LinearLayout
                android:orientation="horizontal"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <TextView
                    android:text="Dzuhur"
                    android:layout_marginBottom="@dimen/vertical_margin"
                    android:layout_width="@dimen/left_width"
                    android:layout_height="wrap_content"/>

                <TextView
                    android:id="@+id/tv_dzuhur"
                    android:text="12"
                    android:layout_marginBottom="@dimen/vertical_margin"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"/>

            </LinearLayout>

            <LinearLayout
                android:orientation="horizontal"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <TextView
                    android:text="Ashar"
                    android:layout_marginBottom="@dimen/vertical_margin"
                    android:layout_width="@dimen/left_width"
                    android:layout_height="wrap_content"/>

                <TextView
                    android:id="@+id/tv_ashar"
                    android:text="12"
                    android:layout_marginBottom="@dimen/vertical_margin"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"/>

            </LinearLayout>

            <LinearLayout
                android:orientation="horizontal"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <TextView
                    android:text="Maghrib"
                    android:layout_marginBottom="@dimen/vertical_margin"
                    android:layout_width="@dimen/left_width"
                    android:layout_height="wrap_content"/>

                <TextView
                    android:id="@+id/tv_maghrib"
                    android:text="12"
                    android:layout_marginBottom="@dimen/vertical_margin"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"/>

            </LinearLayout>

            <LinearLayout
                android:orientation="horizontal"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <TextView
                    android:text="Isya"
                    android:layout_marginBottom="@dimen/vertical_margin"
                    android:layout_width="@dimen/left_width"
                    android:layout_height="wrap_content"/>

                <TextView
                    android:id="@+id/tv_isya"
                    android:text="12"
                    android:layout_marginBottom="@dimen/vertical_margin"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"/>

            </LinearLayout>

        </LinearLayout>

    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

Langkah selanjutnya setelah memodifikasi codingan activity_main.xml. Disini sobat perlu menyiapkan suatu API Client yang akan membaca data dari server JSON API dari Fatimah Bot seperti penjelasan sebelumnya. Disini sobat akan mengaplikasikan AsyncTask Loader dan HTTPClient untuk memjalankan suatu proses pada background. Selain itu sobat juga memerlukan class data (POJO) yang nantinya akan digunakan untuk meyimpan data kota.

Untuk itu sobat membuat class POJO, dengan cara klik kanan pada folder java -> com.example.jadwalsholat -> New -> Kotlin File/Class, kemudian berinama Kota.kt dan tulis kode berikut:



class Kota {
    var id: Int? = null
    var nama: String? = null

    override fun toString(): String {
        return nama.toString()
    }
}

Langkah Selanjutnya sobat buat sebuah class baru lagi dengan nama ClientAsyncTask.kt untuk membuat suatu class API Client. Disini sobat akan mengaplikasikan penggunaan AsyncTask Loader untuk memanggil data dari server JSON API dengan cara sobat memanfaatkan HttpURLConnection.

Pada class tersebut sobat akan menambahkan sebuah interface event listener yang dimana fungsinya adalah untuk memproses hasilnya pada event onPostExecute.

Kemudian ketik codingan yang ada dibawah ini, btw itu cara bikin nya sama ya , jadi admin tidak perlu mendemokan lagi.



import android.content.Context
import android.os.AsyncTask
import java.io.BufferedReader
import java.io.InputStream
import java.io.InputStreamReader
import java.net.HttpURLConnection
import java.net.URL

class ClientAsyncTask constructor(private val mContext: Context, postExecuteListener: OnPostExecuteListener) :
    AsyncTask<String, String, String>() {
    val CONNECTON_TIMEOUT_MILLISECONDS = 60000
    private val mPostExecuteListener : OnPostExecuteListener = postExecuteListener

    interface OnPostExecuteListener {
        fun onPostExecute(result: String)
    }

    /*init {
        if (mPostExecuteListener == null)
            throw Exception("Param cannot be null.")
    }*/

    override fun onPostExecute(result: String) {
        super.onPostExecute(result)
        if (mPostExecuteListener != null) {
            mPostExecuteListener.onPostExecute(result)
        }
    }

    override fun doInBackground(vararg urls: String?): String {
        var urlConnection: HttpURLConnection? = null

        try {
            val url = URL(urls[0])

            urlConnection = url.openConnection() as HttpURLConnection
            urlConnection.connectTimeout = CONNECTON_TIMEOUT_MILLISECONDS
            urlConnection.readTimeout = CONNECTON_TIMEOUT_MILLISECONDS

            var inString = streamToString(urlConnection.inputStream)

            return inString
        } catch (ex: Exception) {

        } finally {
            if (urlConnection != null) {
                urlConnection.disconnect()
            }
        }

        return ""
    }

    fun streamToString(inputStream: InputStream): String {

        val bufferReader = BufferedReader(InputStreamReader(inputStream))
        var line: String
        var result = ""

        try {
            do {
                line = bufferReader.readLine()
                if (line != null) {
                    result += line
                }
            } while (line != null)
            inputStream.close()
        } catch (ex: Exception) {

        }

        return result
    }

}

lanjut sobat modifikasi file MainActivity.kt nya, dengan codingan yang ada dibawah ini.



import android.os.AsyncTask
import android.util.Log
import android.view.View
import android.widget.AdapterView
import android.widget.ArrayAdapter
import kotlinx.android.synthetic.main.activity_main.*
import org.json.JSONException
import org.json.JSONObject
import java.lang.Exception
import java.text.SimpleDateFormat
import java.time.LocalDateTime
import java.time.format.DateTimeFormatter
import java.util.*

class MainActivity : AppCompatActivity() {
    private var listKota : MutableList<Kota>? = null
    private var mKotaAdapter: ArrayAdapter<Kota>? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        listKota = ArrayList<Kota>()
        mKotaAdapter = ArrayAdapter<Kota>(this, android.R.layout.simple_spinner_item,
            listKota as ArrayList<Kota>
        )
        mKotaAdapter!!.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item)
        kota.adapter = mKotaAdapter
        kota.onItemSelectedListener = object : AdapterView.OnItemSelectedListener {
            override fun onNothingSelected(p0: AdapterView<*>?) {

            }

            override fun onItemSelected(p0: AdapterView<*>?, view: View?, position: Int, id: Long) {

                val kota = mKotaAdapter!!.getItem(position)
                loadJadwal(kota!!.id)
            }

        }

        loadKota()
    }

    private fun loadJadwal(id: Int?) {
        try {
            val id_kota = id.toString()

            val current = SimpleDateFormat("yyyy-MM-dd")
            val tanggal = current.format(Date())

            var url = "https://api.banghasan.com/sholat/format/json/jadwal/kota/$id_kota/tanggal/$tanggal"
            val task = ClientAsyncTask(this, object : ClientAsyncTask.OnPostExecuteListener {
                override fun onPostExecute(result: String) {

                    Log.d("JadwalData", result)
                    try {
                        val jsonObj = JSONObject(result)
                        val objJadwal = jsonObj.getJSONObject("jadwal")
                        val obData = objJadwal.getJSONObject("data")

                        tv_tanggal.text = obData.getString("tanggal")
                        tv_subuh.text = obData.getString("subuh")
                        tv_dzuhur.text = obData.getString("dzuhur")
                        tv_ashar.text = obData.getString("ashar")
                        tv_maghrib.text = obData.getString("maghrib")
                        tv_isya.text = obData.getString("isya")

                        Log.d("dataJadwal", obData.toString())

                    } catch (e: JSONException) {
                        e.printStackTrace()
                    }
                }

            })
            task.execute(url)
        }catch (e: Exception) {
            e.printStackTrace()
        }

    }


    fun loadKota() {
        try {
            var url = "https://api.banghasan.com/sholat/format/json/kota"
            val task = ClientAsyncTask(this, object : ClientAsyncTask.OnPostExecuteListener {
                override fun onPostExecute(result: String) {

                    Log.d("KotaData", result)
                    try {
                        val jsonObj = JSONObject(result)
                        val jsonArray = jsonObj.getJSONArray("kota")
                        var kota: Kota? = null
                        for (i in 0 until jsonArray.length()) {
                            val obj = jsonArray.getJSONObject(i)
                            kota = Kota()
                            kota!!.id = obj.getInt("id")
                            kota!!.nama = obj.getString("nama")
                            listKota!!.add(kota)
                        }
                        mKotaAdapter!!.notifyDataSetChanged()

                    } catch (e: JSONException) {
                        e.printStackTrace()
                    }
                }

            })
            task.execute(url)
        }catch (e: Exception) {
            e.printStackTrace()
        }
    }


}


Langkah selanjutnya adalah sobat menambahkan codingan ini pada AndroidManifest , codingan ini yang mengaktifkan Internet karena kita menggunakan API secara online jadi kita menggunakan codingan ini.



 <uses-permission android:name="android.permission.INTERNET" />

Dan langkah yang terakhir adalah merapihkan tampilannya agar lebih baik lagi dengan cara sobat ke res -> values -> dimens.xml , jika sobat gak ada dimens.xml nya , sobat buat baru aja ya, lalu sobat ketikkan codingan dibawah ini.



<?xml version="1.0" encoding="utf-8"?>
<resources>
    <dimen name="padding">16dp</dimen>
    <dimen name="vertical_margin">16dp</dimen>
    <dimen name="left_width">100dp</dimen>
</resources>

Nah sekarang sobat tinggal running saja programnya, dan sobat bisa lihat hasilnya seperti gambar dibawah ini.




Nah jadi sobat mungkin tutorial segini saja dulu, semoga bermanfaat artikel kali ini, dan jangan lupa di share apabila artikel ini bermanfaat, sampai jumpa di tutorial selanjutnya sobat

Anda mungkin menyukai postingan ini