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
  1. Abre el proyecto en Android Studio y, luego, haz clic en a1bbb9d97659a043.png 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.

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.

El panel lateral de notificaciones que aparece cuando se desliza el dedo hacia abajo desde la barra de estado

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.

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

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

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

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

Una burbuja de conversación

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 2fdbaccda71bc5f0.png More vert.
  3. Haz clic en 771b0be21764f6b6.png Share. Sharesheet aparecerá en la parte inferior de la pantalla.

La función Sharesheet

  1. Si es posible, haz clic en 468248e6b8a84bb3.png JetChat. La URL se compartirá en el chat.
  2. Si no ves 468248e6b8a84bb3.png JetChat, haz clic en 145399af71577431.png More para invocar el sistema de Sharesheet y, luego, desliza el dedo hacia arriba en Sharesheet y haz clic en 468248e6b8a84bb3.png 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