Menambahkan fitur terkait chat ke aplikasi Android dengan Messaging API dan People API

1. Sebelum memulai

Pembuatan aplikasi pesan bukan proses yang mudah. Sekalipun pengalaman pengguna secara keseluruhan bersifat subjektif, Android menyediakan Messaging API dan People API yang meningkatkan kualitas dan menyederhanakan pengalaman chat.

Dalam codelab ini, Anda akan mempelajari cara menggunakan API ini untuk membuat ekosistem menarik untuk aplikasi chat di Android. Anda akan memperluas aplikasi JetChat, yakni aplikasi chat paling dasar dan non-fungsional yang menggunakan Jetpack Compose.

Prasyarat

  • Pengetahuan dasar tentang pengembangan Android
  • Pengetahuan dasar tentang notifikasi

Yang akan Anda bangun

Aplikasi JetChat yang diperluas yang dapat melakukan hal berikut ini:

  • Memunculkan notifikasi yang menunjukkan percakapan dalam bagian percakapan yang dipesan dari panel samping notifikasi.
  • Mereferensikan target berbagi dalam notifikasi ini, sehingga Anda dapat berbagi informasi ke dalam percakapan aplikasi.
  • Menerapkan praktik terbaik untuk pembuatan objek ini guna memanfaatkan pengalaman default yang disediakan sistem yang meningkatkan kualitas aplikasi Anda.

Yang akan Anda pelajari

  • Cara memunculkan notifikasi terkait percakapan dalam bagian percakapan yang dipesan dari panel samping notifikasi.
  • Cara memahami berbagai pengalaman yang dihasilkan berkat Messaging API dan People API.

Yang akan Anda butuhkan

  • Git
  • Android Studio
  • Akun GitHub

2. Memulai persiapan

Titik awal dimulai dari aplikasi JetChat. Kode awal memperluas aplikasi JetChat agar lebih baik dalam menampilkan Messaging API dan People API.

Mendapatkan kode awal

Guna mendapatkan kode awal untuk codelab ini, ikuti langkah-langkah berikut:

  1. Dari command line, clone repositori GitHub berikut:
git clone –branch starter-code \
https://github.com/android/people-messaging-codelab.git
  1. Buka project di Android Studio lalu klik a1bbb9d97659a043.png Jalankan aplikasi. Panel Emulator akan muncul dan menampilkan aplikasi.

Jelajahi aplikasi JetChat yang diperluas

  1. Dalam kotak teks Message #composers di aplikasi, masukkan pesan lalu ketuk Kirim.
  2. Keluar dari aplikasi. Setelah beberapa detik, Anda akan menerima notifikasi push yang berisi respons dari seseorang dalam chat.

3. Membuat notifikasi percakapan

Android 11 memperkenalkan API agar notifikasi terkait chat dapat muncul di bagian yang ditetapkan dalam panel samping notifikasi, yang khusus dibuat untuk percakapan.

Panel samping notifikasi yang muncul saat digeser ke bawah dari status bar

Notifikasi harus berasal dari class Notification.MessagingStyle dan mereferensikan pintasan berbagi jangka panjang. Di bagian ini, Anda akan mempelajari cara memenuhi persyaratan API untuk memunculkan notifikasi yang menunjukkan percakapan dalam bagian percakapan.

Untuk membuat notifikasi dari class NotificationCompat.MessagingStyle, ikuti langkah-langkah berikut:

  1. Di tab Project dalam Android Studio, klik app > java > com.example.compose.jetchat > conversation lalu klik dua kali ConversationFragment.
  2. Dalam file ConversationFragment.kt, cari class ConversationFragment, lalu cari blok kode Notification dari fungsi createNotification tempat notifikasi dibuat.
  3. Ganti metode setContentText dengan metode setStyle yang menetapkan gaya notifikasi ke class NotificationCompat.MessagingStyle. Class bantuan ini menambahkan pesan yang ditetapkan dengan metode setContextText beserta konteks tambahan yang relevan dengan pesan, seperti waktu saat pesan dikirim serta pengirim pesan tersebut.

ConversationFragment.kt

private fun createNotification(
   notificationId: Int,
   message: Message,
   person: Person,
   shortcut: ShortcutInfoCompat,
   time: Long
): Notification? {
    ...
    .setStyle(NotificationCompat.MessagingStyle(person).addMessage(
                      NotificationCompat.MessagingStyle.Message(
                          message.content,
                          time,
                          person
                      )
    )
    )
    ...
    .build()
}

Menjalankan aplikasi

  1. Jalankan aplikasi.
  2. Dalam kotak teks Message #composers di aplikasi, masukkan pesan lalu ketuk Kirim.
  3. Keluar dari aplikasi. Anda akan menerima lagi notifikasi push, tetapi kali ini gayanya berbeda. Notifikasi ini mencakup avatar dan gaya yang berbeda untuk pesan tersebut. Meskipun demikian, ada hal lainnya yang perlu dilakukan sebelum notifikasi Anda muncul di tempat yang seharusnya.

4. Membuat target berbagi untuk percakapan

Anda perlu mereferensikan pintasan berbagi atau target berbagi dalam notifikasi. Target berbagi ditetapkan dalam file shortcuts.xml dan merupakan titik entri untuk menangani pintasan yang ditetapkan secara terprogram. Pintasan yang Anda buat menunjukkan percakapan dalam aplikasi serta memungkinkan Anda membagikan konten dalam percakapan.

Menetapkan target berbagi

  1. Di tab Project, klik kanan direktori res lalu pilih Baru > Direktori.
  2. Dalam kotak teks, masukkan xml lalu tekan Enter (atau return di macOS).
  3. Klik kanan direktori xml lalu pilih File.
  4. Dalam kotak teks, masukkan shortcuts.xml lalu tekan Enter (atau return di macOS).
  5. Dalam file shortcuts.xml, deklarasikan target berbagi yang menangani pembagian data dengan jenis text/plain

shortcuts.xml

<shortcuts xmlns:android="http://schemas.android.com/apk/res/android">
  <share-target android:targetClass="com.example.compose.jetchat.NavActivity">
   <data android:mimeType="text/plain" />
   <category android:name="com.example.compose.jetchat.share.TEXT_SHARE_TARGET" />
 </share-target>
</shortcuts>
  1. Di tab Project, klik manifests lalu klik dua kali AndroidManifest.xml.
  2. Di file AndroidManifest.xml, tetapkan file shortcuts.xml:

AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.compose.jetchat">

   <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/Theme.Jetchat.NoActionBar">
...
 <meta-data android:name="android.app.shortcuts"
            android:resource="@xml/shortcuts" />

    </application>
</manifest>
  1. Dalam komponen activity dari file AndroidManifest.xml, tetapkan filter intent yang berisi logika berbagi:

AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
   package="com.example.compose.jetchat">

   ...
       <activity
           ...
           <intent-filter>
               <action android:name="android.intent.action.SEND" />
               <category android:name="android.intent.category.DEFAULT" />
               <data android:mimeType="text/plain" />
           </intent-filter>
...

Menetapkan pintasan

Untuk tiap pintasan, Anda perlu mengaitkan pintasan terkait. Anda hanya menetapkan satu pintasan unik per percakapan karena pintasan unik menunjukkan satu kontak yang akan menjadi tujuan berbagi

Untuk membuat pintasan, ikuti langkah-langkah berikut:

  1. Dalam tab Project, klik app > java > com.example.compose.jetchat > conversation > util lalu klik dua kali ConversationUtil.
  2. Di file ConversationUtil.kt, tambahkan fungsi generateShortcut:

ConversationUtil.kt

import android.content.Intent
import androidx.core.content.pm.ShortcutInfoCompat
import com.example.compose.jetchat.NavActivity

class ConversationUtil {

   companion object {
...
fun generateShortcut(context: Context, shortcutId: String): ShortcutInfoCompat {
   return ShortcutInfoCompat.Builder(context, shortcutId)
   .setCategories(setOf(CATEGORY_SHARE))
   .setLongLived(true)
   .setShortLabel(shortcutId)
   .setLongLabel(shortcutId)
   .setIntent(
       Intent(context, NavActivity::class.java)
           .setAction(Intent.ACTION_VIEW)
   )
   .build()
}

Fungsi ini berisi metode setPerson dan setLongLived yang diperlukan untuk percakapan. Orang (person) adalah kontak yang dikaitkan dengan pintasan, dan menetapkan jangka panjang ke nilai true akan memastikan bahwa pintasan ini di-cache oleh sistem dan dimunculkan dalam berbagai platform di UI.

Mereferensikan pintasan dalam notifikasi

Anda harus mereferensikan pintasan berbagi dalam notifikasi. Namun, Anda harus membuat pintasan sebelum mengirim notifikasi push.

Untuk melakukannya, ikuti langkah-langkah berikut:

  1. Di file ConversationFragment.kt, cari class ConversationFragment.
  2. Sebelum panggilan ke variabel notification, buat variabel shortcut yang mereferensikan pintasan yang dibuat dari ConversationUtil.generateShortcut.
  3. Dalam metode createNotification dari variabel notification, ganti null dengan variabel shortcut sebagai parameter.

ConversationFragment.kt

private fun simulateResponseAsANotification() {
   ...
   if (message.author != "me") {
       ...
       val shortcut = ConversationUtil.generateShortcut(context!!, message.author)
       val notification = createNotification(notificationId, message, person, shortcut, time)
       ...
   }
}
  1. Dalam metode createNotification, tambahkan metode NotificationCompat.Builder#setShortcutInfo, lalu teruskan dalam variabel shortcut sebagai parameter.

ConversationFragment.kt

private fun createNotification(
  notificatoinIf: Int,
  messagin: Message,
  person: Person,
  shortcut: ShortcutInfoCompat?,
  time: Long
): Notification {
...
return NotificationCompat.Builder(context!!,  ConversationUtil.CHANNEL_MESSAGES)
   ...
   .setShortcutInfo(shortcut)
   .build()
}

Memublikasikan pintasan

  • Untuk memublikasikan pintasan, dalam fungsi simulateResponseAsANotification sebelum metode notificationManager.notify, panggil metode pushDynamicShortcut:

ConversationFragment.kt

import androidx.core.content.pm.ShortcutManagerCompat

...private fun simulateResponseAsANotification() {
   ...
   if (message.author != "me") {
       ...
       ShortcutManagerCompat.pushDynamicShortcut(context!!, shortcut)
       ...
   }
}

Menjalankan aplikasi

  1. Jalankan aplikasi.
  2. Dalam kotak teks Message #composers di aplikasi, masukkan pesan lalu ketuk Kirim.
  3. Keluar dari aplikasi. Anda akan menerima lagi notifikasi push, tetapi gayanya kali ini lebih seperti notifikasi terkait percakapan. Ikon avatar terlihat lebih kentara dan mengintegrasikan ikon aplikasi. Nama pengirim, waktu, dan teks juga terlihat lebih sederhana.

5. Opsional: Mengaktifkan balon

Balon diperkenalkan dalam Android 9, serta ditingkatkan kualitasnya dan disesuaikan untuk digunakan dalam konteks percakapan dalam Android 11. Balon adalah overlay lingkaran yang merupakan avatar untuk percakapan Anda. Balon muncul dalam peluncur aplikasi, sehingga Anda mudah merespons percakapan dalam balon yang diperluas. Bahkan saat diterapkan, balon bersifat opsional bergantung pada preferensi pengguna.

Untuk mengaktifkan balon, ikuti langkah-langkah berikut:

  1. Dalam file AndroidManifest.xml, tambahkan atribut allowEmbedded dan resizeableActivity lalu tetapkan masing-masing ke nilai true:

AndroidManifest.xml

<activity
  ...
  android:allowEmbedded="true"
  android:resizeableActivity="true"
  ...
</activity>
  1. Dalam class ConversationUtil dari file ConversationUtil.kt, tambahkan metadata balon:

ConversationUtil.kt

import androidx.core.app.NotificationCompat
import androidx.core.graphics.drawable.IconCompat

fun createBubbleMetadata(context: Context, icon: IconCompat): NotificationCompat.BubbleMetadata {
        // Create bubble intent
        val target = Intent(context, NavActivity::class.java)
        val bubbleIntent = PendingIntent.getActivity(context, REQUEST_BUBBLE, target, flagUpdateCurrent(mutable = true))

        // Create bubble metadata
        return NotificationCompat.BubbleMetadata.Builder(bubbleIntent, icon)
            .setDesiredHeight(400)
            .setSuppressNotification(true)
            .build()
    }
  1. Dalam file ConversationFragment.kt, buat dan referensikan metadata balon di notifikasi:

ConversationFragment.kt

private fun createNotification(
  notificatoinIf: Int,
  messagin: Message,
  person: Person,
  shortcut: ShortcutInfoCompat?,
  time: Long
): Notification {
...
// Reference the bubble metadata in the notification.
  return NotificationCompat.Builder(context!!,     ConversationUtil.CHANNEL_MESSAGES)
    ...
     .setBubbleMetadata(ConversationUtil.createBubbleMetadata(context!!, person.icon!!))
...
    .build()
}

Menjalankan aplikasi

  1. Jalankan aplikasi.
  2. Dalam kotak teks Message #composers di aplikasi, masukkan pesan lalu ketuk Kirim.
  3. Keluar dari aplikasi. Setelah beberapa detik, Anda akan menerima notifikasi dari chat dalam bentuk balon.
  4. Ketuk balon. Percakapan akan terbuka dari balon.

Balon percakapan

6. Opsional: Membagikan link

Anda mendeklarasikan target berbagi dan mereferensikannya dalam notifikasi, yang juga mengaktifkan kemunculan kontak Anda di Sharesheet, yakni komponen dasar yang muncul saat intent ACTION dikirim. Target berbagi akan muncul di bagian atas Sharesheet sehingga Anda dapat membagikan konten lengkap dalam percakapan.

Untuk memanggil Sharesheet, ikuti langkah-langkah berikut:

  1. Di perangkat Anda, buka Google Chrome, lalu buka halaman web pilihan Anda seperti developer.android.com.
  2. Jika perlu, klik 2fdbaccda71bc5f0.png More vert.
  3. Klik 771b0be21764f6b6.png Bagikan. Sharesheet akan muncul di bagian bawah layar.

Sharesheet

  1. Jika mungkin, klik 468248e6b8a84bb3.png JetChat. URL akan dibagikan dalam chat.
  2. Jika Anda tidak melihat 468248e6b8a84bb3.png JetChat, klik 145399af71577431.png Lainnya untuk memanggil Sharesheet sistem, lalu geser ke atas di Sharesheet dan klik 468248e6b8a84bb3.png JetChat. URL akan dibagikan dalam chat.

Ini adalah contoh sederhana. Terdapat jenis konten lebih lengkap untuk dibagikan. Untuk mengetahui informasi selengkapnya, baca artikel Pengambilan data sederhana dari aplikasi lain.

7. Selamat

Selamat! Sekarang Anda tahu cara menambahkan fitur terkait chat ke aplikasi Android dengan Messaging API dan People API. Selamat mengirim pesan!

Pelajari lebih lanjut