Cara Membuat applikasi chatting dengan Android Studio

Aplikasi chatting merupakan aplikasi yang sangat populer dan digunakan oleh banyak orang. Dalam artikel ini, kita akan belajar cara membuat aplikasi chatting dengan menggunakan Android Studio. Sebelum memulai, pastikan Anda telah menginstal Android Studio di komputer Anda.

Langkah 1: Membuat Proyek Baru

Pertama-tama, buka Android Studio dan buat proyek baru dengan mengklik File -> New -> New Project. Isi nama proyek Anda dan klik Next. Selanjutnya, pilih "Empty Activity" dan klik Next. Pada halaman selanjutnya, biarkan konfigurasi default dan klik Finish.

Langkah 2: Menambahkan Dependencies

Selanjutnya, kita perlu menambahkan beberapa dependencies ke proyek kita. Buka file build.gradle (Module: app) dan tambahkan kode berikut di bagian dependencies:

arduino
implementation 'com.google.android.material:material:1.4.0'
implementation 'androidx.recyclerview:recyclerview:1.2.1'
implementation 'com.squareup.okhttp3:okhttp:4.9.2'
implementation 'com.squareup.okhttp3:logging-interceptor:4.9.1'

Dependencies ini akan memungkinkan kita untuk menggunakan RecyclerView untuk menampilkan daftar chat dan menggunakan library OkHttp untuk berkomunikasi dengan server.

Langkah 3: Membuat Layout

Selanjutnya, buka file activity_main.xml dan tambahkan kode berikut:

xml
<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/rvChat"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp"
    android:clipToPadding="false"
    android:scrollbars="vertical"
    app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
    app:layout_constraintBottom_toTopOf="@+id/llInput"
    app:layout_constraintTop_toTopOf="parent" />

<LinearLayout
    android:id="@+id/llInput"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:padding="16dp"
    android:background="@color/white"
    android:layout_alignParentBottom="true">

    <EditText
        android:id="@+id/etMessage"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:hint="Type a message"
        android:background="@null"
        android:inputType="textMultiLine"
        android:maxLines="5"
        android:textColorHint="@color/gray"
        android:textColor="@color/black"
        android:textSize="16sp" />

    <Button
        android:id="@+id/btnSend"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Send"
        android:textColor="@color/white"
        android:background="@color/colorAccent"
        android:layout_gravity="bottom" />

</LinearLayout>

Layout ini akan menampilkan daftar chat dan input pesan yang akan dikirim.

Langkah 4: Membuat Model Chat 

Selanjutnya, buat model untuk chat dengan menambahkan kelas Chat:

kotlin
data class Chat(
    val id: String,
    val message: String,
    val sender: String,
    val receiver: String,
    val timestamp: Long
)

Model ini akan digunakan untuk menampung data chat yang akan ditampilkan di aplikasi.

Langkah 5: Membuat Adapter

Selanjutnya, kita perlu membuat adapter untuk RecyclerView. Buat kelas ChatAdapter dengan menambahkan dengan menambahkan kode berikut:

kotlin
class ChatAdapter(
    private val chats: List<Chat>,
    private val currentUserId: String
) : RecyclerView.Adapter<ChatAdapter.ChatViewHolder>() {

    inner class ChatViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        val tvMessage: TextView = itemView.findViewById(R.id.tvMessage)
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ChatViewHolder {
        val view = LayoutInflater.from(parent.context)
            .inflate(R.layout.item_chat, parent, false)
        return ChatViewHolder(view)
    }

    override fun onBindViewHolder(holder: ChatViewHolder, position: Int) {
        val chat = chats[position]
        holder.tvMessage.text = chat.message
        if (chat.sender == currentUserId) {
            holder.itemView.gravity = Gravity.END
        } else {
            holder.itemView.gravity = Gravity.START
        }
    }

    override fun getItemCount(): Int {
        return chats.size
    }
}

Adapter ini akan menampilkan daftar chat yang sudah dibuat ke dalam RecyclerView.

Langkah 6: Mengambil Data dari Server 

Selanjutnya, kita perlu mengambil data chat dari server. Buat kelas ChatClient dan tambahkan kode berikut:

kotlin
object ChatClient {

    private val client = OkHttpClient.Builder()
        .addInterceptor(HttpLoggingInterceptor().apply {
            level = HttpLoggingInterceptor.Level.BODY
        })
        .build()

    fun getChats(callback: (List<Chat>) -> Unit) {
        val request = Request.Builder()
            .url("https://my-chat-app.com/api/chats")
            .build()

        client.newCall(request).enqueue(object : Callback {
            override fun onFailure(call: Call, e: IOException) {
                Log.e("ChatClient", "Failed to fetch chats", e)
            }

            override fun onResponse(call: Call, response: Response) {
                val chats = mutableListOf<Chat>()
                response.body?.string()?.let { json ->
                    val jsonArray = JSONArray(json)
                    for (i in 0 until jsonArray.length()) {
                        val jsonObject = jsonArray.getJSONObject(i)
                        val chat = Chat(
                            jsonObject.getString("id"),
                            jsonObject.getString("message"),
                            jsonObject.getString("sender"),
                            jsonObject.getString("receiver"),
                            jsonObject.getLong("timestamp")
                        )
                        chats.add(chat)
                    }
                }
                callback(chats)
            }
        })
    }
}

Kelas ChatClient ini akan berfungsi untuk mengambil data chat dari server menggunakan library OkHttp.

Langkah 7: Menampilkan Data Chat

Selanjutnya, kita akan menampilkan data chat yang sudah diambil dari server. Buka file MainActivity dan tambahkan kode berikut:

kotlin
class MainActivity : AppCompatActivity() {

    private lateinit var chatClient: ChatClient
    private lateinit var chatAdapter: ChatAdapter
    private lateinit var etMessage: EditText
    private lateinit var rvChat: RecyclerView

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

        // Inisialisasi komponen UI
        etMessage = findViewById(R.id.et_message)
        rvChat = findViewById(R.id.rv_chat)

        // Inisialisasi ChatClient dan ChatAdapter
        chatClient = ChatClient()
        chatAdapter = ChatAdapter()

        // Set LayoutManager dan Adapter untuk RecyclerView
        rvChat.layoutManager = LinearLayoutManager(this)
        rvChat.adapter = chatAdapter

        // Ambil data chat dari server dan tampilkan di RecyclerView
        chatClient.getChatData { chatList ->
            runOnUiThread {
                chatAdapter.setData(chatList)
            }
        }
    }
}

Kode di atas akan membuat instance dari ChatClient dan ChatAdapter, kemudian menginisialisasi komponen UI seperti EditText dan RecyclerView. Setelah itu, kode akan mengambil data chat dari server menggunakan ChatClient dan menampilkan data tersebut di RecyclerView menggunakan ChatAdapter.

Pada baris ke-21, kita menggunakan fungsi runOnUiThread untuk memastikan bahwa proses pembacaan data chat dan pembaruan RecyclerView dilakukan di thread utama agar tidak mempengaruhi kinerja aplikasi.

Langkah 8: Menjalankan Aplikasi

Terakhir, jalankan aplikasi Anda dan coba kirim chat baru. Anda akan melihat bahwa chat baru akan ditampilkan di RecyclerView, dan juga akan ditambahkan ke daftar chat di server.

Kesimpulan

Dalam tutorial ini, kita telah membuat aplikasi chatting sederhana dengan menggunakan Android Studio dan Kotlin. Kita telah mempelajari cara membuat tata letak UI, menangani input pengguna, menggunakan RecyclerView untuk menampilkan daftar chat, dan mengambil data dari server menggunakan library OkHttp. Semoga tutorial ini bermanfaat bagi Anda yang ingin belajar membuat aplikasi Android.