Agrega funciones relacionadas con el chat a una app para Android con las APIs de People y Messaging

1. Antes de comenzar

Crear una app de mensajería es todo un desafío y aunque la experiencia general del usuario es subjetiva, Android proporciona las APIs de Messaging y People para mejorar y optimizar la experiencia de chat.

En este codelab, aprenderás a utilizar estas APIs para crear un ecosistema atractivo para las apps de chat que se ejecutan en Android. Extiende la app JetChat, una aplicación de chat básica y no funcional que utiliza Jetpack Compose.

Requisitos previos

• Conocimientos básicos sobre el desarrollo de Android
• Conocimientos básicos sobre las notificaciones

Qué compilarás

Una app extendida de JetChat que realice las siguientes acciones:

• Mostrar notificaciones que representen conversaciones en la sección reservada de conversaciones del panel lateral de notificaciones
• Hacer referencia a los objetivos de uso compartido en estas notificaciones para poder compartir contenido en las conversaciones de tu app
• Aplicar las prácticas recomendadas para la creación de estos objetos y así aprovechar las experiencias predeterminadas que ofrece el sistema y que mejoran tu app

Qué aprenderás

• Cómo mostrar notificaciones relacionadas con las conversaciones en la sección reservada de conversaciones del panel lateral de notificaciones
• Cómo comprender las variadas experiencias a las que las APIs de Messaging y People permiten acceder

Requisitos

• Git
• Android Studio
• Una cuenta de GitHub

2. Prepárate

El punto de partida se basa en la app de JetChat. El código de partida extiende la app de JetChat para mostrar mejor las APIs de Messaging y People.

Obtén el código de partida

Sigue estos pasos para obtener el código de partida de este codelab:

1. En tu línea de comandos, clona el siguiente repositorio de GitHub:

git clone –branch starter-code \
https://github.com/android/people-messaging-codelab.git

2. Abre el proyecto en Android Studio y, luego, haz clic en Run app. Aparecerá el panel Emulator y se mostrará la app.

Explora la app extendida de JetChat

1. En el cuadro de texto Message #composers de la app, ingresa un mensaje y, luego, presiona Send.
2. Navega fuera de la app y, luego de unos segundos, recibirás una notificación push con la respuesta de otra persona del chat.

Nota: La respuesta no es de una persona real. La app está programada para responder de modo que simule una experiencia de chat.

3. Crea notificaciones de conversaciones

Android 11 presentó las APIs que permiten a las notificaciones relacionadas con los chats aparecer en una sección designada del panel lateral de notificaciones, que está destinado estrictamente para las conversaciones.

La notificación debe ser de clase Notification.MessagingStyle y hacer referencia a un acceso directo de uso compartido de larga duración. En esta sección, aprenderás a cumplir con los requisitos de estas APIs para mostrar las notificaciones que representen conversaciones en la sección de conversaciones.

Sigue estos pasos para realizar notificaciones de la clase NotificationCompat.MessagingStyle:

1. En la pestaña Project de Android Studio, haz clic en app > java > com.example.compose.jetchat > conversation y, luego, haz doble clic en ConversationFragment.
2. En el archivo ConversationFragment.kt, encuentra la clase ConversationFragment y, luego, busca el bloque de Notification de la función createNotification donde se crea la notificación.
3. Reemplaza el método setContentText con un método setStyle que defina el estilo de la notificación en la clase NotificationCompat.MessagingStyle. Esta clase auxiliar agrega el mensaje que se configuró con el método setContextText con el contexto adicional relevante para el mensaje, como la hora a la que se envió y la persona que lo hizo.

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

Ejecuta la app

1. Ejecuta la app.
2. En el cuadro de texto Message #composers de la app, ingresa un mensaje y, luego, presiona Send.
3. Navega fuera de la app y, luego, recibirás otra notificación push, pero con un estilo diferente. En ella se incluye un avatar y un estilo diferente de mensaje. Sin embargo, debes realizar más acciones antes de que las notificaciones aparezcan en el lugar designado.

4. Crea objetivos de uso compartido para las conversaciones

Necesitas hacer referencia al acceso directo de uso compartido o a los objetivos de uso compartido en la notificación. Los objetivos de uso compartido se definen en el archivo shortcuts.xml y son los puntos de entrada para administrar los accesos directos que se definen de forma programática. Los accesos directos que crees representan las conversaciones en la app y te permiten compartir contenido en tus conversaciones.

Nota: Debes crear objetivos de uso compartido específicos para los mensajes entrantes, que aparecen como notificaciones en el dispositivo del usuario. También debes crear objetivos de uso compartido para los mensajes salientes, aunque no hablamos de ese tema en este codelab. Sin embargo, en el caso de los mensajes salientes, puedes aplicar los mismos pasos y muestras de código que te permitirán crear objetivos de uso compartido para los mensajes entrantes.

Define los objetivos de uso compartido

1. En la pestaña Project, haz clic con el botón derecho en el directorio res y, luego, selecciona New > Directory.
2. En el cuadro de texto, ingresa xml y, luego presiona Enter (o return si trabajas con macOS).
3. Haz clic con el botón derecho en el directorio xml y, luego, selecciona File.
4. En el cuadro de texto, ingresa shortcuts.xml y, luego presiona Enter (o return si trabajas con macOS).
5. En el archivo shortcuts.xml declara el objetivo de uso compartido que controla el uso compartido de datos de 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>

6. En la pestaña Project, haz clic en manifests y, luego, haz doble clic en AndroidManifest.xml.
7. En el archivo AndroidManifest.xml define el archivo 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>

8. En el componente activity del archivo AndroidManifest.xml, define el filtro de intents que contiene la lógica detrás del uso compartido:

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

Define los accesos directos

Para cada notificación, deberás asociar el acceso directo relevante. Debes definir solo un acceso directo por cada conversación porque representa el único contacto con el que se establecerá el uso compartido.

Sigue estos pasos para generar un acceso directo:

1. En la pestaña Project, haz clic en app > java > com.example.compose.jetchat > conversation > util y, luego, haz doble clic en ConversationUtil.
2. En el archivo ConversationUtil.kt agrega una función 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()
}

Esta función contiene los métodos setPerson y setLongLived necesarios para la conversación. La persona es el contacto asociado con el acceso directo, y la configuración de larga duración a un valor true garantiza que el sistema almacene en caché este acceso directo y que se muestre en varias plataformas en la IU.

Haz referencia a los accesos directos en las notificaciones

Nota: En el caso de los mensajes salientes, los objetivos de uso compartido publicados no se vinculan a una notificación porque estos generalmente no activan las notificaciones para el usuario que envía el mensaje.

Debes crear el acceso directo para hacer referencia al acceso directo de uso compartido en la notificación antes de enviarla.

Para hacerlo, sigue estos pasos:

1. En el archivo ConversationFragment.kt, busca la clase ConversationFragment.
2. Antes de llamar a la variable notification, crea una variable shortcut que haga referencia al acceso directo que se generó desde ConversationUtil.generateShortcut.
3. En el método createNotification de la variable notification, reemplaza la variable null con shortcut como parámetro.

ConversationFragment.kt

private fun simulateResponseAsANotification() {
   ...
   if (message.author != "me") {
       ...
       val shortcut = ConversationUtil.generateShortcut(context!!, message.author)
       val notification = createNotification(notificationId, message, person, shortcut, time)
       ...
   }
}

4. En el método createNotification agrega el método NotificationCompat.Builder#setShortcutInfo y, luego, pasa la variable shortcut como parámetro.

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

Nota: Se recomienda que el método NotificationCompat.Builder#setShortcutInfo también establezca la clase LocusId en el acceso directo. Si luego anotas la actividad asociada con la clase LocusId, envías indicadores a la inteligencia integrada en el dispositivo señalando que el acceso directo se asocia con esa conversación. Estos indicadores se usan para clasificar la conversación según corresponda, y garantizar que la muestras apropiadamente en función de la actividad del usuario. Para obtener más información, consulta las prácticas recomendadas.

Nota: Los objetivos de uso compartido no son exclusivos de las conversaciones, ya que se pueden presentar fuera de ellas. Para obtener más información sobre los objetivos de uso compartido, consulta API de Sharing Shortcuts.

Publica el acceso directo

• Para publicar el acceso directo, en la función simulateResponseAsANotification antes del método notificationManager.notify, llama al método pushDynamicShortcut:

ConversationFragment.kt

import androidx.core.content.pm.ShortcutManagerCompat

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

Nota: Existen varias formas que permiten la publicación de un acceso directo, sin embargo, el método pushDynamicShortcut utiliza la API reportShorcutUsed, lo que le indica a la inteligencia artificial que este es un contacto para compartir información. El método pushDynamicShortcut también garantiza la actualización de los accesos directos sin la necesidad de controlar el límite de accesos directos.

Nota: Mantener presionada la notificación MessagingStyle sin un acceso directo referenciado pone en evidencia que no es compatible con las funciones de las conversaciones. Con un acceso directo referenciado, puedes definir la prioridad y la configuración de esta notificación. Para obtener más información, consulta Cómo probar las notificaciones y los accesos directos de las conversaciones.

Ejecuta la app

1. Ejecuta la app.
2. En el cuadro de texto Message #composers de la app, ingresa un mensaje y, luego, presiona Send.
3. Navega fuera de la app, luego, recibirás otra notificación push, pero esta se parecerá más a una notificación relacionada con una conversación. El ícono del avatar se destaca más y se integra en el ícono de la app. También se optimizan la hora, el texto y el remitente.

5. Habilita las burbujas (opcional)

Las burbujas se presentaron en Android 9, lo que permitió mejorar y reutilizar su uso en el contexto de las conversaciones en Android 11. Las burbujas son superposiciones circulares que sirven como avatares para tus conversaciones. Estas aparecen en el selector de aplicaciones y te permiten responder fácilmente a las conversaciones en una burbuja expandida. Incluso cuando se implementan, el uso de las burbujas es opcional según las preferencias del usuario.

Sigue estos pasos para habilitar las burbujas:

1. En el archivo AndroidManifest.xml, agrega los atributos allowEmbedded y resizeableActivity y, luego, configura cada uno en un valor true:

AndroidManifest.xml

<activity
  ...
  android:allowEmbedded="true"
  android:resizeableActivity="true"
  ...
</activity>

2. En la clase ConversationUtil del archivo ConversationUtil.kt, agrega los metadatos de la burbuja:

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

3. En el archivo ConversationFragment.kt, crea y haz referencia a los metadatos de la burbuja en la notificación:

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

Ejecuta la app

1. Ejecuta la app.
2. En el cuadro de texto Message #composers de la app, ingresa un mensaje y, luego, presiona Send.
3. Navega fuera de la app y, luego de unos segundos, recibirás una notificación del chat en forma de burbuja.
4. Presiona la burbuja y la conversación se abrirá desde ella.

6. Comparte un vínculo (opcional)

En las notificaciones declaraste los objetivos de uso compartido y también hiciste referencia a ellos, lo que también permitió que el contacto apareciera en Sharesheet, un componente ascendente que se muestra cuando se envía un intent ACTION. Los objetivos de uso compartido aparecen en la parte superior de Sharesheet y te permiten compartir contenido enriquecido en tus conversaciones.

Sigue estos pasos para invocar Sharesheet:

1. En tu dispositivo, abre Google Chrome y, luego, navega a una página web que elijas, como developer.android.com.
2. Si es necesario, haz clic en More vert.
3. Haz clic en Share. Sharesheet aparecerá en la parte inferior de la pantalla.

4. Si es posible, haz clic en JetChat. La URL se compartirá en el chat.
5. Si no ves JetChat, haz clic en More para invocar el sistema de Sharesheet y, luego, desliza el dedo hacia arriba en Sharesheet y haz clic en JetChat. La URL se compartirá en el chat.

Este es un ejemplo sencillo. Existen tipos de contenido más enriquecido para compartir. Para obtener más información, consulta Recuperar datos sencillos de otras apps.

7. Felicitaciones

¡Felicitaciones! Ahora sabes cómo agregar funciones relacionadas con el chat a una app para Android con las APIs de Messaging y People. Disfruta el envío de mensajes.

Más información

• Compatibilidad con emojis
• Cómo recibir contenido enriquecido
• Clase PeopleManager
• Personas y conversaciones