เพิ่มฟีเจอร์เกี่ยวกับแชทในแอป Android ด้วย Messaging และ People API

1. ก่อนเริ่มต้น

การสร้างแอปรับส่งข้อความนั้นเป็นเรื่องยาก แม้ว่าประสบการณ์ของผู้ใช้โดยรวมจะขึ้นอยู่กับบุคคล แต่ Android มี Messaging และ People API ซึ่งจะช่วยปรับปรุงและเพิ่มประสิทธิภาพประสบการณ์การแชท

ใน Codelab นี้ คุณจะได้เรียนรู้วิธีใช้ API เหล่านี้เพื่อสร้างระบบนิเวศที่น่าสนใจสำหรับแอปแชทบน Android คุณขยายแอป JetChat ซึ่งเป็นแอปแชทที่ไม่มีการใช้งานและไม่มีฟังก์ชันการทำงานซึ่งใช้การเขียน Jetpack

ข้อกำหนดเบื้องต้น

  • ความรู้พื้นฐานเกี่ยวกับการพัฒนา Android
  • ความรู้พื้นฐานเกี่ยวกับการแจ้งเตือน

สิ่งที่คุณจะสร้าง

แอป JetChat แบบขยายที่ทำสิ่งต่อไปนี้

  • แสดงการแจ้งเตือนที่แสดงถึงการสนทนาในส่วนการสนทนาที่จองไว้ของลิ้นชักการแจ้งเตือน
  • ข้อมูลอ้างอิงการแชร์เป้าหมายในการแจ้งเตือนเหล่านี้ช่วยให้คุณแชร์ในการสนทนาของแอปได้
  • บังคับใช้แนวทางปฏิบัติแนะนำในการสร้างออบเจ็กต์เหล่านี้เพื่อใช้ประโยชน์จากประสบการณ์เริ่มต้นของระบบซึ่งช่วยปรับปรุงแอปของคุณ

สิ่งที่คุณจะได้เรียนรู้

  • วิธีแสดงการแจ้งเตือนเกี่ยวกับการสนทนาในส่วนการสนทนาที่จองไว้ของลิ้นชักการแจ้งเตือน
  • วิธีทำความเข้าใจประสบการณ์การใช้งานต่างๆ ที่เปิดใช้โดย Messaging และ People API

สิ่งที่คุณต้องมี

  • Git
  • Android Studio
  • บัญชี GitHub

2. ตั้งค่า

โดยจุดเริ่มต้นจะอิงตามแอป JetChat โค้ดเริ่มต้นช่วยขยายขอบเขตให้แอป JetChat แสดง API ของ Messaging และ People ได้ดียิ่งขึ้น

รับรหัสเริ่มต้น

โปรดทำตามขั้นตอนต่อไปนี้เพื่อรับโค้ดเริ่มต้นสำหรับ Codelab นี้

  1. โคลนที่เก็บ GitHub ต่อไปนี้จากบรรทัดคำสั่ง
git clone –branch starter-code \
https://github.com/android/people-messaging-codelab.git
  1. เปิดโปรเจ็กต์ใน Android Studio แล้วคลิก a1bbb9d97659a043.png เรียกใช้แอป แผงโปรแกรมจำลองจะปรากฏขึ้นและแสดงแอป

สำรวจแอป JetChat แบบขยาย

  1. ในกล่องข้อความข้อความ #composers ของแอป ให้ป้อนข้อความแล้วแตะส่ง
  2. ออกจากแอป หลังจากนั้นไม่กี่วินาที คุณจะได้รับข้อความ Push ที่มีการตอบกลับจากผู้ที่อยู่ในแชท

3. สร้างการแจ้งเตือนการสนทนา

Android 11 เปิดตัว API ที่ช่วยให้การแจ้งเตือนเกี่ยวกับแชทปรากฏในส่วนที่กำหนดในลิ้นชักการแจ้งเตือน ซึ่งใช้สำหรับการสนทนาโดยเฉพาะ

ลิ้นชักการแจ้งเตือนที่ปรากฏขึ้นเมื่อเลื่อนลงจากแถบสถานะ

การแจ้งเตือนต้องอยู่ในคลาส Notification.MessagingStyle และอ้างอิงทางลัดการแชร์ที่ใช้ได้นาน ในส่วนนี้ คุณจะได้รู้วิธีปฏิบัติตามข้อกำหนดของ API เหล่านี้เพื่อแสดงการแจ้งเตือนเหล่านี้ซึ่งแสดงถึงการสนทนาในส่วนการสนทนา

หากต้องการรับการแจ้งเตือนของชั้นเรียน NotificationCompat.MessagingStyle ให้ทําตามขั้นตอนต่อไปนี้

  1. ในแท็บโปรเจ็กต์ของ Android Studio ให้คลิก app > java com.example.compose.jetchat conversation แล้วดับเบิลคลิก ConversationFragment
  2. ในไฟล์ ConversationFragment.kt ให้ค้นหาคลาส ConversationFragment แล้วหาโค้ดบล็อก Notification ของฟังก์ชัน createNotification ที่สร้างการแจ้งเตือน
  3. แทนที่เมธอด setContentText ด้วยเมธอด setStyle ที่กำหนดสไตล์ของการแจ้งเตือนเป็นคลาส NotificationCompat.MessagingStyle ชั้นเรียนผู้ช่วยนี้จะเพิ่มข้อความที่ตั้งค่าด้วยเมธอด setContextText พร้อมบริบทเพิ่มเติมที่เกี่ยวข้องกับข้อความ เช่น เวลาที่ส่งและผู้ที่ส่งข้อความ

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()
}

เรียกใช้แอป

  1. เรียกใช้แอป
  2. ในกล่องข้อความข้อความ #composers ของแอป ให้ป้อนข้อความแล้วแตะส่ง
  3. ออกจากแอป คุณจะได้รับข้อความ Push อีกครั้ง แต่รูปแบบจะแตกต่างออกไป โดยมีอวตาร์และสไตล์ที่ชัดเจนของข้อความ อย่างไรก็ตาม ยังมีสิ่งที่ต้องทำอีกมากก่อนที่การแจ้งเตือนจะปรากฏในตำแหน่งที่ควรจะเป็น

4. สร้างเป้าหมายการแชร์สำหรับการสนทนา

คุณต้องอ้างอิงทางลัดการแชร์หรือแชร์เป้าหมายในการแจ้งเตือน เป้าหมายการแชร์จะกำหนดไว้ในไฟล์ shortcuts.xml และเป็นจุดแรกเข้าในการจัดการทางลัดที่กำหนดแบบเป็นโปรแกรม ทางลัดที่คุณสร้างจะแทนการสนทนาในแอปและช่วยให้คุณสามารถแชร์เนื้อหาในการสนทนาได้

กำหนดเป้าหมายการแชร์

  1. ในแท็บโปรเจ็กต์ ให้คลิกขวาที่ไดเรกทอรี res แล้วเลือกใหม่ > ไดเรกทอรี
  2. ในกล่องข้อความ ให้ป้อน xml แล้วกด Enter (หรือ return ใน macOS)
  3. คลิกขวาที่ไดเรกทอรี xml แล้วเลือก File
  4. ในกล่องข้อความ ให้ป้อน shortcuts.xml แล้วกด Enter (หรือ return ใน macOS)
  5. ในไฟล์ shortcuts.xml ให้ประกาศเป้าหมายการแชร์ ที่จัดการการแชร์ข้อมูลประเภท 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. ในแท็บโปรเจ็กต์ ให้คลิก manifests แล้วดับเบิลคลิก AndroidManifest.xml
  2. ในไฟล์ AndroidManifest.xml ให้กำหนดไฟล์ 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. ในคอมโพเนนต์ activity ของไฟล์ AndroidManifest.xml ให้กำหนดตัวกรอง Intent ที่มีตรรกะการแชร์ดังนี้

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>
...

กำหนดแป้นพิมพ์ลัด

คุณต้องเชื่อมโยงแป้นพิมพ์ลัดที่เกี่ยวข้องสำหรับการแจ้งเตือนทุกรายการ คุณกำหนดทางลัดที่ไม่ซ้ำกันเพียงรายการเดียวต่อการสนทนา เนื่องจากทางลัดที่ไม่ซ้ำกันแสดงถึงรายชื่อติดต่อ 1 รายการที่จะแชร์ด้วย

หากต้องการสร้างทางลัด ให้ทำตามขั้นตอนต่อไปนี้

  1. ในแท็บโปรเจ็กต์ ให้คลิก app > java com.example.compose.jetchat conversation util แล้วดับเบิลคลิก ConversationUtil
  2. ในไฟล์ ConversationUtil.kt ให้เพิ่มฟังก์ชัน 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()
}

ฟังก์ชันนี้มีเมธอด setPerson และ setLongLived ที่จําเป็นสําหรับการสนทนา บุคคลดังกล่าวเป็นผู้ติดต่อที่เชื่อมโยงกับทางลัด และการตั้งค่าระยะเวลาใช้งานให้เป็นค่า true ก็จะช่วยให้ระบบแคชทางลัดนี้และแสดงในตำแหน่งต่างๆ ใน UI

โปรดดูทางลัดในการแจ้งเตือน

คุณต้องอ้างอิงทางลัดการแชร์ในการแจ้งเตือน แต่ต้องสร้างทางลัดก่อนส่งการแจ้งเตือน

โดยทำตามขั้นตอนต่อไปนี้

  1. ค้นหาชั้นเรียน ConversationFragment ในไฟล์ ConversationFragment.kt
  2. ก่อนเรียกใช้ตัวแปร notification ให้สร้างตัวแปร shortcut ที่อ้างอิงแป้นพิมพ์ลัดที่สร้างขึ้นจาก ConversationUtil.generateShortcut
  3. ในเมธอด createNotification ของตัวแปร notification ให้แทนที่ null ด้วยตัวแปร shortcut เป็นพารามิเตอร์

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. ในเมธอด createNotification ให้เพิ่มเมธอด NotificationCompat.Builder#setShortcutInfo แล้วส่งตัวแปร shortcut เป็นพารามิเตอร์

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()
}

เผยแพร่ทางลัด

  • หากต้องการเผยแพร่ทางลัด ในฟังก์ชัน simulateResponseAsANotification ก่อนเมธอด notificationManager.notify ให้เรียกใช้เมธอด pushDynamicShortcut ดังนี้

ConversationFragment.kt

import androidx.core.content.pm.ShortcutManagerCompat

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

เรียกใช้แอป

  1. เรียกใช้แอป
  2. ในกล่องข้อความข้อความ #composers ของแอป ให้ป้อนข้อความแล้วแตะส่ง
  3. ออกจากแอป คุณจะได้รับข้อความ Push อีกครั้ง แต่ข้อความจะมีสไตล์เป็นการแจ้งเตือนเกี่ยวกับการสนทนาอย่างชัดเจน ไอคอนอวาตาร์จะชัดเจนขึ้นและผสานรวมไอคอนแอปด้วย นอกจากนี้ ผู้ส่ง เวลา และข้อความยังทำงานได้ง่ายขึ้นด้วย

5. ไม่บังคับ: เปิดใช้บับเบิล

เราได้นำบับเบิลมาใช้ใน Android 9 รวมถึงปรับปรุงและนำกลับมาใช้ใหม่สำหรับการใช้งานในบริบทของการสนทนาใน Android 11 บับเบิลคือการวางซ้อนวงกลมที่เป็นรูปโปรไฟล์ในการสนทนา โดยจะปรากฏในตัวเปิดแอป และให้คุณตอบกลับการสนทนาได้ง่ายๆ ในลูกโป่งที่ขยายออก แม้ว่าจะใช้งานจริง บับเบิลเป็นตัวเลือกที่ไม่บังคับ ทั้งนี้ขึ้นอยู่กับความต้องการของผู้ใช้

หากต้องการเปิดใช้ลูกโป่ง ให้ทำตามขั้นตอนต่อไปนี้

  1. ในไฟล์ AndroidManifest.xml ให้เพิ่มแอตทริบิวต์ allowEmbedded และ resizeableActivity แล้วตั้งค่าแต่ละรายการให้เป็นค่า true ดังนี้

AndroidManifest.xml

<activity
  ...
  android:allowEmbedded="true"
  android:resizeableActivity="true"
  ...
</activity>
  1. ในคลาส ConversationUtil ของไฟล์ ConversationUtil.kt ให้เพิ่มข้อมูลเมตาของลูกโป่งดังนี้

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. ในไฟล์ ConversationFragment.kt ให้สร้างและอ้างอิงข้อมูลเมตาของลูกโป่งในการแจ้งเตือนดังนี้

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()
}

เรียกใช้แอป

  1. เรียกใช้แอป
  2. ในกล่องข้อความข้อความ #composers ของแอป ให้ป้อนข้อความแล้วแตะส่ง
  3. ออกจากแอป หลังจากนั้นไม่กี่วินาที คุณจะได้รับการแจ้งเตือนจากแชทในรูปแบบบับเบิล
  4. แตะบับเบิล การสนทนาจะเปิดขึ้นจากบับเบิล

บับเบิลการสนทนา

6. ไม่บังคับ: แชร์ลิงก์

คุณได้ประกาศเป้าหมายการแชร์และอ้างอิงเป้าหมายในการแจ้งเตือน ซึ่งช่วยเปิดเผยรายชื่อติดต่อของคุณใน Sharesheet ด้วย ซึ่งเป็นคอมโพเนนต์จากล่างขึ้นบนที่ปรากฏขึ้นเมื่อมีการส่ง Intent ของ ACTION เป้าหมายการแชร์จะปรากฏที่ด้านบนของ Sharesheet และให้คุณแชร์เนื้อหาที่น่าสนใจในการสนทนาได้

หากต้องการเรียกใช้ Sharesheet ให้ทำตามขั้นตอนต่อไปนี้

  1. บนอุปกรณ์ ให้เปิด Google Chrome จากนั้นไปยังหน้าเว็บที่คุณต้องการ เช่น developer.android.com
  2. หากจำเป็น ให้คลิก 2fdbaccda71bc5f0.png จุดยอดเพิ่มเติม
  3. คลิก 771b0be21764f6b6.png แชร์ Sharesheet จะปรากฏที่ด้านล่างของหน้าจอ

Sharesheet

  1. หากเป็นไปได้ ให้คลิก 468248e6b8a84bb3.png JetChat ระบบจะแชร์ URL ในแชท
  2. หากไม่เห็น 468248e6b8a84bb3.png JetChat ให้คลิก145399af71577431.png เพิ่มเติมเพื่อเรียกใช้ Sharesheet ของระบบ จากนั้นปัดนิ้วขึ้นใน ShareSheet แล้วคลิก 468248e6b8a84bb3.png JetChat ระบบจะแชร์ URL ลงในแชท

ต่อไปนี้เป็นตัวอย่างง่ายๆ มีประเภทเนื้อหาที่สมบูรณ์ยิ่งขึ้นที่จะแชร์ ดูข้อมูลเพิ่มเติมได้ที่การดึงข้อมูลแบบง่ายจากแอปอื่นๆ

7. ขอแสดงความยินดี

ยินดีด้วย ตอนนี้คุณก็ทราบวิธีเพิ่มคุณลักษณะเกี่ยวกับแชทลงในแอป Android ด้วย Messaging และ People API แล้ว ขอให้สนุกกับการรับส่งข้อความ

ดูข้อมูลเพิ่มเติม