Einer Android-App mit den Messaging- und People-APIs Chatfunktionen hinzufügen

1. Hinweis

Es ist schwierig, eine Messaging-App zu erstellen. Obwohl die Nutzererfahrung insgesamt subjektiv ist, bietet Android die Messaging- und People-APIs, die das Chat-Erlebnis verbessern und optimieren.

In diesem Codelab erfährst du, wie du mit diesen APIs eine faszinierende Umgebung für Chat-Apps unter Android schaffst. Sie erweitern die JetChat-App, eine einfache und nicht funktionsfähige Chat-App, die Jetpack Compose verwendet.

Vorbereitung

Inhalt

Eine erweiterte JetChat-App, die Folgendes ausführt:

  • Zeigt Benachrichtigungen zu Unterhaltungen im Bereich für reservierte Unterhaltungen der Benachrichtigungsleiste an.
  • Referenzen teilen in diesen Benachrichtigungen Ziele, die du in den Unterhaltungen deiner App teilen kannst.
  • Erzwingt Best Practices zum Erstellen dieser Objekte, um die vom System bereitgestellten Standardfunktionen zur Optimierung Ihrer App zu nutzen.

Aufgaben in diesem Lab

  • Benachrichtigungen zu Unterhaltungen im Bereich für reservierte Unterhaltungen der Benachrichtigungsleiste einblenden
  • Informationen zu den verschiedenen Möglichkeiten, die durch die Messaging API und die People API ermöglicht werden

Voraussetzungen

  • Git
  • Android Studio
  • Ein GitHub-Konto

2. Einrichten

Der Ausgangspunkt basiert auf der JetChat-App. Der Startcode erweitert die JetChat-App, um die Messaging- und People-APIs besser präsentieren zu können.

Startercode abrufen

So rufen Sie den Startcode für dieses Codelab ab:

  1. Klonen Sie über die Befehlszeile das folgende GitHub-Repository:
git clone –branch starter-code \
https://github.com/android/people-messaging-codelab.git
  1. Öffnen Sie das Projekt in Android Studio und klicken Sie dann auf a1bbb9d97659a043.png App ausführen. Der Bereich Emulator mit der App wird eingeblendet.

Erweiterte JetChat App entdecken

  1. Geben Sie im Textfeld Nachricht #composers der App eine Nachricht ein und tippen Sie dann auf Senden.
  2. Verlassen Sie die App. Nach wenigen Sekunden erhalten Sie eine Push-Benachrichtigung mit einer Antwort von einem Chatteilnehmer.

3. Unterhaltungsbenachrichtigungen erstellen

Mit Android 11 wurden APIs eingeführt, die es ermöglichen, dass chatbezogene Benachrichtigungen in einem dafür vorgesehenen Bereich der Benachrichtigungsleiste angezeigt werden, was ausschließlich für Unterhaltungen vorgesehen ist.

Die Benachrichtigungsleiste, die erscheint, wenn Sie von der Statusleiste nach unten wischen

Die Benachrichtigung muss zur Notification.MessagingStyle-Klasse gehören und auf eine langlebige Verknüpfung zum Teilen verweisen. In diesem Abschnitt erfahren Sie, wie Sie diese API-Anforderungen erfüllen, damit Benachrichtigungen angezeigt werden, die Unterhaltungen im Bereich „Unterhaltungen“ repräsentieren.

So richten Sie Benachrichtigungen für den NotificationCompat.MessagingStyle-Kurs ein:

  1. Klicken Sie in Android Studio auf dem Tab Project (Projekt) auf app > java > com.example.compose.jetchat > conversation. Doppelklicken Sie dann auf ConversationFragment.
  2. Suchen Sie in der Datei ConversationFragment.kt die Klasse ConversationFragment und dann den Codeblock Notification der createNotification-Funktion, in dem die Benachrichtigung erstellt wird.
  3. Ersetzen Sie die Methode setContentText durch eine setStyle-Methode, die den Stil der Benachrichtigung auf die Klasse NotificationCompat.MessagingStyle festlegt. Diese Hilfsklasse fügt die mit der Methode setContextText festgelegte Nachricht mit zusätzlichem Kontext hinzu, der für die Nachricht relevant ist, z. B. die Zeit, zu der sie gesendet wurde, und die Person, die sie gesendet hat.

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

App ausführen

  1. Starten Sie die App.
  2. Geben Sie im Textfeld Nachricht #composers der App eine Nachricht ein und tippen Sie dann auf Senden.
  3. Verlassen Sie die App. Sie erhalten wieder eine Push-Benachrichtigung, diese ist jedoch anders gestaltet. Sie enthält einen Avatar und einen individuellen Stil für die Nachricht. Es gibt jedoch noch einiges zu tun, bis deine Benachrichtigungen an der gewünschten Stelle angezeigt werden.

4. Freigabeziele für Unterhaltungen erstellen

Sie müssen in der Benachrichtigung auf eine Verknüpfung oder ein Freigabeziel verweisen. Freigabeziele werden in der Datei shortcuts.xml definiert und sind die Einstiegspunkte für die Verarbeitung von Verknüpfungen, die programmatisch definiert sind. Die von dir erstellten Verknüpfungen repräsentieren die Unterhaltungen in der App und ermöglichen es dir, Inhalte in deinen Unterhaltungen zu teilen.

Freigabeziele definieren

  1. Klicken Sie auf dem Tab Project (Projekt) mit der rechten Maustaste auf das Verzeichnis res und wählen Sie dann New > Verzeichnis.
  2. Geben Sie in das Textfeld xml ein und drücken Sie dann Enter (oder return unter macOS).
  3. Klicken Sie mit der rechten Maustaste auf das Verzeichnis xml und wählen Sie Datei aus.
  4. Geben Sie in das Textfeld shortcuts.xml ein und drücken Sie dann Enter (oder return unter macOS).
  5. Deklarieren Sie in der Datei shortcuts.xml das Freigabeziel , das die Freigabe von Daten vom Typ text/plain verwaltet:

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. Klicken Sie auf dem Tab Projekt auf manifests und doppelklicken Sie dann auf AndroidManifest.xml.
  2. Definieren Sie in der Datei AndroidManifest.xml die Datei 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. Definiere in der Komponente activity der Datei AndroidManifest.xml den Intent-Filter, der die Freigabelogik enthält:

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

Tastenkombinationen festlegen

Für jede Benachrichtigung musst du die entsprechende Verknüpfung verknüpfen. Sie definieren nur ein eindeutiges Kürzel pro Konversation, da dieses für den Kontakt steht, mit dem Sie die Daten teilen möchten.

So erstellen Sie eine Verknüpfung:

  1. Klicken Sie auf dem Tab Project (Projekt) auf app > java > com.example.compose.jetchat > conversation > util und dann doppelt auf ConversationUtil.
  2. Fügen Sie in der Datei ConversationUtil.kt eine generateShortcut-Funktion hinzu:

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

Diese Funktion enthält die für die Unterhaltung erforderlichen Methoden setPerson und setLongLived. Die Person ist der Kontakt, der mit der Verknüpfung verknüpft ist. Wenn du für „Langlebig“ einen true-Wert festlegst, wird diese Verknüpfung vom System im Cache gespeichert und auf verschiedenen Oberflächen der Benutzeroberfläche angezeigt.

Verweisen Sie auf den Kurzbefehl in der Benachrichtigung.

Sie müssen in der Benachrichtigung auf die Freigabeverknüpfung verweisen. Sie müssen jedoch die Verknüpfung erstellen, bevor Sie die Benachrichtigung senden.

Führen Sie dazu die folgenden Schritte aus:

  1. Suchen Sie in der Datei ConversationFragment.kt nach der Klasse ConversationFragment.
  2. Erstellen Sie vor dem Aufruf der Variablen notification eine shortcut-Variable, die auf die aus ConversationUtil.generateShortcut generierte Tastenkombination verweist.
  3. Ersetzen Sie in der Methode createNotification der Variablen notification den Parameter null durch die Variable shortcut als 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. Fügen Sie in der Methode createNotification die Methode NotificationCompat.Builder#setShortcutInfo hinzu und übergeben Sie dann die Variable shortcut als 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()
}

Verknüpfung veröffentlichen

  • Rufen Sie zum Veröffentlichen der Verknüpfung in der Funktion simulateResponseAsANotification vor der Methode notificationManager.notify die Methode pushDynamicShortcut auf:

ConversationFragment.kt

import androidx.core.content.pm.ShortcutManagerCompat

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

App ausführen

  1. Starten Sie die App.
  2. Geben Sie im Textfeld Nachricht #composers der App eine Nachricht ein und tippen Sie dann auf Senden.
  3. Verlassen Sie die App. Sie erhalten wieder eine Push-Benachrichtigung, aber diese ist individueller als unterhaltungsbezogene Benachrichtigung gestaltet. Das Avatarsymbol ist ausgeprägter und das App-Symbol ist integriert. Auch Absender, Uhrzeit und Text wurden optimiert.

5. Optional: Bubbles aktivieren

In Android 9 wurden Bubbles eingeführt, verbessert und umfunktioniert, um sie im Kontext von Unterhaltungen in Android 11 zu verwenden. Bubbles sind kreisförmige Overlays, die Avatare für deine Unterhaltungen sind. Sie werden im App Launcher angezeigt und ermöglichen es Ihnen, auf Unterhaltungen in einer maximierten Bubble ganz einfach zu antworten. Auch wenn die Funktion implementiert wurde, sind Bubbles je nach den Einstellungen des Nutzers optional.

So aktivieren Sie Bubbles:

  1. Fügen Sie in der Datei AndroidManifest.xml die Attribute allowEmbedded und resizeableActivity hinzu und legen Sie jedes Attribut auf einen Wert true fest:

AndroidManifest.xml

<activity
  ...
  android:allowEmbedded="true"
  android:resizeableActivity="true"
  ...
</activity>
  1. Fügen Sie in der Klasse ConversationUtil der Datei ConversationUtil.kt die Metadaten der Bubble hinzu:

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. Erstellen Sie in der Datei ConversationFragment.kt die Bubble-Metadaten und verweisen Sie auf diese:

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

App ausführen

  1. Starten Sie die App.
  2. Geben Sie im Textfeld Nachricht #composers der App eine Nachricht ein und tippen Sie dann auf Senden.
  3. Verlassen Sie die App. Nach wenigen Sekunden erhalten Sie vom Chat eine Benachrichtigung in Form einer Bubble.
  4. Tippen Sie auf das Infofeld. Die Unterhaltung wird in der Bubble geöffnet.

Eine Sprechblase

6. Optional: Link teilen

Du hast Freigabeziele deklariert und in deinen Benachrichtigungen darauf verwiesen. Dadurch kann dein Kontakt auch im Sharesheet angezeigt werden. Dies ist eine Bottom-up-Komponente, die angezeigt wird, wenn ein ACTION-Intent gesendet wird. Inhalte zum Teilen werden oben auf dem Sharesheet angezeigt. So kannst du Rich Content in deinen Unterhaltungen teilen.

So rufst du das Sharesheet auf:

  1. Öffnen Sie auf Ihrem Gerät Google Chrome und rufen Sie eine Webseite Ihrer Wahl auf, z. B. developer.android.com.
  2. Klicken Sie, falls erforderlich, auf 2fdbaccda71bc5f0.png Mehr vert.
  3. Klicken Sie auf 771b0be21764f6b6.png Teilen. Das Sharesheet wird unten auf dem Bildschirm angezeigt.

Das Sharesheet

  1. Klicken Sie nach Möglichkeit auf 468248e6b8a84bb3.png JetChat. Die URL wird im Chat geteilt.
  2. Wenn 468248e6b8a84bb3.png JetChat nicht angezeigt wird, klicken Sie auf 145399af71577431.png Mehr, um das System-Sharesheet aufzurufen. Wischen Sie dann in ShareSheet nach oben und klicken Sie auf 468248e6b8a84bb3.png JetChat. Die URL wird im Chat geteilt.

Dies ist ein einfaches Beispiel. Es gibt umfangreichere Inhaltstypen, die Sie mit anderen teilen können. Weitere Informationen finden Sie unter Einfache Daten aus anderen Apps abrufen.

7. Glückwunsch

Glückwunsch! Jetzt wissen Sie, wie Sie einer Android-App mit der Messaging API und der People API chatbezogene Funktionen hinzufügen. Viel Spaß beim Messaging!

Weitere Informationen