Aggiungere funzionalità relative alla chat a un'app Android con le API Messaging e People

1. Prima di iniziare

È difficile creare un'app di messaggistica. Sebbene l'esperienza utente complessiva sia soggettiva, Android fornisce le API Messaging e People, che migliorano e semplificano l'esperienza di chat.

In questo codelab, imparerai a utilizzare queste API per creare un ecosistema coinvolgente per le app di chat su Android. Puoi estendere l'app JetChat, un'app di chat semplice e non funzionale che utilizza Jetpack Compose.

Prerequisiti

  • Conoscenza di base dello sviluppo di Android
  • Conoscenza di base delle notifiche

Cosa creerai

Un'app JetChat estesa che fa quanto segue:

  • Mostra le notifiche che rappresentano le conversazioni nella sezione delle conversazioni riservate del riquadro a scomparsa delle notifiche.
  • In queste notifiche, i riferimenti condividono gli obiettivi e ti consentono di condividerli nelle conversazioni dell'app.
  • Applica le best practice per la creazione di questi oggetti al fine di sfruttare le esperienze predefinite fornite dal sistema che migliorano la tua app.

Cosa imparerai a fare

  • Come visualizzare le notifiche relative alle conversazioni nella sezione delle conversazioni prenotate del riquadro a scomparsa delle notifiche.
  • Come comprendere le varie esperienze rese possibili dalle API Messaging e People.

Che cosa ti serve

  • Git
  • Android Studio
  • Un account GitHub

2. Configurazione

Il punto di partenza è basato sull'app JetChat. Il codice di avvio estende l'app JetChat per mostrare meglio le API Messaging e People.

Ottieni il codice di avvio

Per ottenere il codice iniziale per questo codelab:

  1. Dalla riga di comando, clona il seguente repository GitHub:
git clone –branch starter-code \
https://github.com/android/people-messaging-codelab.git
  1. Apri il progetto in Android Studio e fai clic su a1bbb9d97659a043.png Esegui app. Viene visualizzato il riquadro Emulatore, che mostra l'app.

Esplora l'app JetChat estesa

  1. Nella casella di testo Messaggio #composers dell'app, inserisci un messaggio e tocca Invia.
  2. Esci dall'app. Dopo alcuni secondi, ricevi una notifica push che contiene una risposta da parte di qualcuno nella chat.

3. Crea notifiche per le conversazioni

Android 11 ha introdotto delle API che consentono di visualizzare le notifiche relative alla chat in un'apposita sezione del riquadro di notifica a scomparsa esclusivamente per le conversazioni.

Il riquadro di notifica a scomparsa che viene visualizzato quando scorri verso il basso dalla barra di stato.

La notifica deve riguardare una classe Notification.MessagingStyle e fare riferimento a una scorciatoia di condivisione di lunga durata. In questa sezione imparerai a soddisfare questi requisiti dell'API per mostrare queste notifiche che rappresentano le conversazioni nella sezione delle conversazioni.

Per effettuare notifiche per il corso NotificationCompat.MessagingStyle:

  1. Nella scheda Progetto di Android Studio, fai clic su app > java > com.example.compose.jetchat > conversation, quindi fai doppio clic su ConversationFragment.
  2. Nel file ConversationFragment.kt, trova la classe ConversationFragment, quindi individua il blocco di codice Notification della funzione createNotification in cui viene creata la notifica.
  3. Sostituisci il metodo setContentText con un metodo setStyle che imposta lo stile della notifica sulla classe NotificationCompat.MessagingStyle. Questa classe helper aggiunge il messaggio impostato con il metodo setContextText con contesto aggiuntivo pertinente al messaggio, ad esempio l'ora in cui è stato inviato e la persona che lo ha inviato.

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

Esegui l'app

  1. Esegui l'app.
  2. Nella casella di testo Messaggio #composers dell'app, inserisci un messaggio e tocca Invia.
  3. Esci dall'app. Ricevi di nuovo una notifica push, ma il suo stile è diverso. Include un avatar e uno stile distinto per il messaggio. Tuttavia, è necessario fare molto per visualizzare le notifiche nella posizione corretta.

4. Creare destinazioni di condivisione per le conversazioni

Devi fare riferimento a una scorciatoia di condivisione o alla condivisione della destinazione nella notifica. Le destinazioni di condivisione sono definite nel file shortcuts.xml e sono i punti di ingresso per la gestione delle scorciatoie definite in modo programmatico. Le scorciatoie che crei rappresentano le conversazioni nell'app e ti consentono di condividere i contenuti delle conversazioni.

Definire i target di condivisione

  1. Nella scheda Progetto, fai clic con il tasto destro del mouse sulla directory res e seleziona Nuovo > Google Cloud.
  2. Nella casella di testo, inserisci xml e premi Enter (o return su macOS).
  3. Fai clic con il tasto destro del mouse sulla directory xml e seleziona File.
  4. Nella casella di testo, inserisci shortcuts.xml e premi Enter (o return su macOS).
  5. Nel file shortcuts.xml, dichiara il target della condivisione che gestisce la condivisione dei dati di tipo 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. Nella scheda Progetto, fai clic su manifests e quindi fai doppio clic su AndroidManifest.xml.
  2. Nel file AndroidManifest.xml, definisci il 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. Nel componente activity del file AndroidManifest.xml, definisci il filtro per intent che contiene la logica di condivisione:

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

Definire le scorciatoie

Devi associare la scorciatoia pertinente a ogni notifica. Devi definire una sola scorciatoia unica per conversazione perché rappresenta l'unico contatto con cui condividere.

Per generare una scorciatoia, segui questi passaggi:

  1. Nella scheda Progetto, fai clic su app > java > com.example.compose.jetchat > conversation > util, quindi fai doppio clic su ConversationUtil.
  2. Nel file ConversationUtil.kt, aggiungi una funzione 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()
}

Questa funzione contiene i metodi setPerson e setLongLived necessari per la conversazione. La persona è il contatto associato alla scorciatoia e l'impostazione di lunga durata su un valore true garantisce che questa scorciatoia venga memorizzata nella cache dal sistema e visualizzata in varie sezioni della UI.

Fare riferimento alla scorciatoia nella notifica

Devi fare riferimento alla scorciatoia di condivisione nella notifica. Tuttavia, devi creare la scorciatoia prima di inviare la notifica.

Per farlo, segui questi passaggi:

  1. Nel file ConversationFragment.kt, trova il corso ConversationFragment.
  2. Prima della chiamata alla variabile notification, crea una variabile shortcut che faccia riferimento alla scorciatoia generata da ConversationUtil.generateShortcut.
  3. Nel metodo createNotification della variabile notification, sostituisci null con la variabile shortcut come parametro.

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. Nel metodo createNotification, aggiungi il metodo NotificationCompat.Builder#setShortcutInfo e poi trasmetti la variabile shortcut come parametro.

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

Pubblica la scorciatoia.

  • Per pubblicare la scorciatoia, chiama il metodo pushDynamicShortcut nella funzione simulateResponseAsANotification prima del metodo notificationManager.notify:

ConversationFragment.kt

import androidx.core.content.pm.ShortcutManagerCompat

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

Esegui l'app

  1. Esegui l'app.
  2. Nella casella di testo Messaggio #composers dell'app, inserisci un messaggio e tocca Invia.
  3. Esci dall'app. Ricevi di nuovo una notifica push, ma è più chiaramente definita come notifica relativa alla conversazione. L'icona dell'avatar è più pronunciata e integra l'icona dell'app. Inoltre, il mittente, l'ora e il testo sono più semplificati.

5. (Facoltativo) Attiva le bolle

Le bolle sono state introdotte in Android 9 e sono state migliorate e riadattate per essere utilizzate nel contesto delle conversazioni in Android 11. Le bolle sono overlay circolari che fungono da avatar per le conversazioni. Vengono visualizzati in Avvio applicazioni e ti consentono di rispondere facilmente alle conversazioni in un fumetto espanso. Anche se sono implementati, i fumetti sono facoltativi, a seconda delle preferenze dell'utente.

Per attivare le bolle, procedi nel seguente modo:

  1. Nel file AndroidManifest.xml, aggiungi gli attributi allowEmbedded e resizeableActivity, quindi imposta ciascuno su un valore true:

AndroidManifest.xml

<activity
  ...
  android:allowEmbedded="true"
  android:resizeableActivity="true"
  ...
</activity>
  1. Nella classe ConversationUtil del file ConversationUtil.kt, aggiungi i metadati del fumetto:

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. Nel file ConversationFragment.kt, crea e fai riferimento ai metadati dei fumetti presenti nella notifica:

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

Esegui l'app

  1. Esegui l'app.
  2. Nella casella di testo Messaggio #composers dell'app, inserisci un messaggio e tocca Invia.
  3. Esci dall'app. Dopo qualche secondo, riceverai una notifica della chat sotto forma di fumetto.
  4. Tocca il fumetto. La conversazione si apre dalla bolla.

Fumetto di una conversazione

6. (Facoltativo) Condividere un link

Hai dichiarato i target di condivisione e li hai indicati nelle notifiche, il che ha consentito anche la visualizzazione del tuo contatto in Sharesheet, un componente dal basso che appare quando viene inviato un intent ACTION. Gli obiettivi di condivisione vengono visualizzati nella parte superiore di Sharesheet e ti consentono di condividere contenuti avanzati nelle tue conversazioni.

Per richiamare Sharesheet, procedi nel seguente modo:

  1. Sul dispositivo, apri Google Chrome, quindi vai a una pagina web di tua scelta, ad esempio developer.android.com.
  2. Se necessario, fai clic su 2fdbaccda71bc5f0.png Altro vert.
  3. Fai clic su 771b0be21764f6b6.png Condividi. Sharesheet viene visualizzato nella parte inferiore dello schermo.

Sharesheet

  1. Se possibile, fai clic su 468248e6b8a84bb3.png JetChat. L'URL viene condiviso nella chat.
  2. Se non vedi 468248e6b8a84bb3.png JetChat, fai clic su 145399af71577431.png Altro per richiamare lo Sharesheet di sistema, quindi scorri verso l'alto su ShareSheet e fai clic su 468248e6b8a84bb3.png JetChat. L'URL viene condiviso nella chat.

Questo è un semplice esempio. È possibile condividere tipi di contenuti più avanzati. Per ulteriori informazioni, vedi Recupero di dati semplici da altre app.

7. Complimenti

Complimenti! Ora sai come aggiungere funzionalità relative alla chat a un'app per Android con le API Messaging e People. Buona conversazione!

Scopri di più