1. Avant de commencer
Créer une application de chat est une tâche difficile. Même si l'expérience utilisateur globale est un ressenti assez subjectif, les API Messaging et People fournies par Android améliorent et simplifient l'expérience de chat.
Dans cet atelier de programmation, vous allez apprendre à utiliser ces API afin de créer un écosystème attrayant pour les applications de chat sur Android. Vous vous appuierez sur JetChat, une application de chat épurée et non fonctionnelle qui utilise Jetpack Compose.
Prérequis
- Connaissances de base sur le développement Android
- Connaissances de base sur les notifications
Objectifs de l'atelier
Créer une appli JetChat étendue qui :
- affiche les notifications représentant les conversations dans la section du panneau des notifications réservée pour les conversations ;
- référence les cibles de partage dans ces notifications, ce qui vous permet de partager du contenu dans les conversations de votre appli ;
- applique les bonnes pratiques pour créer ces objets, ce qui permet de bénéficier des expériences fournies par défaut par le système afin d'améliorer votre application.
Points abordés
- Afficher les notifications liées aux conversations dans la section du panneau des notifications réservée aux conversations
- Comprendre les différentes expériences rendues possibles par les API Messaging et People
Ce dont vous aurez besoin
- Git
- Android Studio
- Un compte GitHub
2. Configuration
L'appli JetChat est notre point de départ. Le code de démarrage étend l'appli JetChat pour mieux présenter les API Messaging et People.
Télécharger le code de démarrage
Pour obtenir le code de démarrage utilisé dans cet atelier de programmation, procédez comme suit :
- À partir de votre ligne de commande, clonez le dépôt GitHub suivant :
git clone –branch starter-code \ https://github.com/android/people-messaging-codelab.git
- Ouvrez le projet dans Android Studio, puis sélectionnez Exécuter l'application. Le volet Émulateur apparaît et affiche l'appli.
Explorer l'application JetChat étendue
- Dans la zone de texte Message #composers de l'appli, saisissez un message et appuyez sur Envoyer.
- Quittez l'appli. Au bout de quelques secondes, vous recevrez une notification push qui contient la réponse d'une personne participant au chat.
3. Créer des notifications de conversation
Android 11 intègre des API permettant d'afficher des notifications de chat dans une section désignée du panneau des notifications, qui est strictement dédiée aux conversations.
La notification doit être de la classe Notification.MessagingStyle
et référencer un raccourci de partage de longue durée. Dans cette section, vous allez apprendre à répondre aux exigences de ces API pour afficher ces notifications de conversations dans la section des conversations.
Pour faire en sorte que la classe des notifications soit NotificationCompat.MessagingStyle
, procédez comme suit :
- Dans l'onglet Projet d'Android Studio, cliquez sur
app
>java
>com.example.compose.jetchat
>conversation
, puis double-cliquez surConversationFragment
. - Dans le fichier
ConversationFragment.kt
, recherchez la classeConversationFragment
, puis dans la fonctioncreateNotification
, recherchez le bloc de codeNotification
où la notification est créée. - Remplacez la méthode
setContentText
par une méthodesetStyle
qui définit le style de la notification sur la classeNotificationCompat.MessagingStyle
. Cette classe d'assistance ajoute le message qui a été défini avec la méthodesetContextText
, ainsi qu'un contexte supplémentaire concernant le message, l'heure d'envoi du message et son expéditeur par exemple.
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()
}
Exécuter l'application
- Exécutez l'application.
- Dans la zone de texte Message #composers de l'appli, saisissez un message et appuyez sur Envoyer.
- Quittez l'application. Vous recevez à nouveau une notification push, mais son style est différent. Elle inclut un avatar et un style distinct pour le message. Toutefois, d'autres opérations sont nécessaires pour que vos notifications s'affichent au bon endroit.
4. Créer des cibles de partage pour les conversations
Vous devez référencer un raccourci de partage ou une cible de partage dans la notification. Les cibles de partage sont définies dans le fichier shortcuts.xml
. Ce sont les points d'entrée pour gérer des raccourcis définis de façon automatisée. Les raccourcis que vous créez représentent les conversations dans l'appli. Ils vous permettent de partager du contenu dans vos conversations.
Définir les cibles de partage
- Dans l'onglet Projet, effectuez un clic droit sur le répertoire
res
, puis sélectionnez Nouveau > Répertoire. - Dans la zone de texte, saisissez
xml
, puis appuyez surEnter
(oureturn
sous macOS). - Effectuez un clic droit sur le répertoire
xml
et sélectionnez Fichier. - Dans la zone de texte, saisissez
shortcuts.xml
, puis appuyez surEnter
(oureturn
sous macOS). - Dans le fichier
shortcuts.xml
, déclarez la cible de partage qui gère le partage des données du typetext/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>
- Dans l'onglet Projet, cliquez sur
manifests
, puis double-cliquez surAndroidManifest.xml
. - Dans le fichier
AndroidManifest.xml
, définissez le fichiershortcuts.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>
- Dans le composant
activity
du fichierAndroidManifest.xml
, définissez le filtre d'intent qui contient la logique de partage :
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>
...
Définir les raccourcis
Vous devez associer le raccourci approprié à chaque notification. Vous définissez un raccourci unique par conversation, car le raccourci unique représente le contact avec lequel partager un contenu.
Pour générer un raccourci, procédez comme suit :
- Dans l'onglet Projet, cliquez sur
app
>java
>com.example.compose.jetchat
>conversation
>util
, puis double-cliquez surConversationUtil
. - Dans le fichier
ConversationUtil.kt
, ajoutez une fonctiongenerateShortcut
:
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()
}
Cette fonction contient les méthodes setPerson
et setLongLived
requises pour la conversation. La personne est le contact associé au raccourci. Lorsque vous définissez la "longue durée" sur la valeur true
, ce raccourci est mis en cache par le système et il apparaît dans différentes surfaces de l'interface utilisateur.
Référencer le raccourci dans la notification
Vous devez référencer le raccourci de partage dans la notification. Il faut toutefois créer le raccourci avant de transférer la notification.
Pour cela, procédez comme suit :
- Dans le fichier
ConversationFragment.kt
, recherchez la classeConversationFragment
. - Avant d'appeler la variable
notification
, créez une variableshortcut
qui référence le raccourci généré à partir deConversationUtil.generateShortcut
. - Dans la méthode
createNotification
de la variablenotification
, remplaceznull
en utilisant la variableshortcut
comme paramètre.
ConversationFragment.kt
private fun simulateResponseAsANotification() {
...
if (message.author != "me") {
...
val shortcut = ConversationUtil.generateShortcut(context!!, message.author)
val notification = createNotification(notificationId, message, person, shortcut, time)
...
}
}
- Dans la méthode
createNotification
, ajoutez la méthodeNotificationCompat.Builder#setShortcutInfo
, puis transmettez la variableshortcut
comme paramètre.
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()
}
Publier le raccourci
- Pour publier le raccourci, dans la fonction
simulateResponseAsANotification
avant la méthodenotificationManager.notify
, appelez la méthodepushDynamicShortcut
:
ConversationFragment.kt
import androidx.core.content.pm.ShortcutManagerCompat
...private fun simulateResponseAsANotification() {
...
if (message.author != "me") {
...
ShortcutManagerCompat.pushDynamicShortcut(context!!, shortcut)
...
}
}
Exécuter l'application
- Exécutez l'application.
- Dans la zone de texte Message #composers de l'appli, saisissez un message et appuyez sur Envoyer.
- Quittez l'application. Vous recevez à nouveau une notification push, mais comme il s'agit d'une notification liée à une conversation, son style est plus marqué. L'icône de l'avatar est plus prononcée et comporte l'icône de l'appli. L'expéditeur, l'heure et le texte sont également présentés de manière optimisée.
5. Facultatif : Activer les bulles
Les bulles ont été introduites dans Android 9, puis améliorées et réorientées pour une utilisation dans le contexte des conversations dans Android 11. Les bulles sont des superpositions circulaires qui constituent les avatars de vos conversations. Elles apparaissent dans le lanceur d'applications et vous permettent de répondre facilement aux conversations dans une bulle développée. Même lorsqu'elles sont implémentées, les bulles sont facultatives, et les utilisateurs peuvent choisir de les activer ou non.
Pour activer les bulles, procédez comme suit :
- Dans le fichier
AndroidManifest.xml
, ajoutez les attributsallowEmbedded
etresizeableActivity
, puis définissez-les sur la valeurtrue
:
AndroidManifest.xml
<activity
...
android:allowEmbedded="true"
android:resizeableActivity="true"
...
</activity>
- Dans le fichier
ConversationUtil.kt
, ajoutez les métadonnées de bulle dans la classeConversationUtil
:
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()
}
- Dans le fichier
ConversationFragment.kt
, créez et référencez les métadonnées de bulle sur la notification :
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()
}
Exécuter l'application
- Exécutez l'application.
- Dans la zone de texte Message #composers de l'appli, saisissez un message et appuyez sur Envoyer.
- Quittez l'appli. Au bout de quelques secondes, vous recevez une notification provenant du chat, sous forme de bulle.
- Appuyez sur la bulle. La conversation s'ouvre dans la bulle.
6. Facultatif : Partager un lien
Vous avez déclaré les cibles de partage et vous les avez référencées dans vos notifications, ce qui a également activé l'affichage de votre contact dans la Sharesheet, un composant ascendant qui apparaît lorsque l'intent ACTION
est envoyé. Les cibles de partage sont affichées dans la partie supérieure de la Sharesheet et vous permettent de partager du contenu enrichi dans vos conversations.
Pour appeler la Sharesheet, procédez comme suit :
- Sur votre appareil, ouvrez Google Chrome, puis accédez à une page Web, par exemple developer.android.com.
- Le cas échéant, cliquez sur Autres options.
- Cliquez sur Partager. La Sharesheet apparaît au bas de l'écran.
- Si possible, cliquez sur JetChat. L'URL est partagée dans le chat.
- Si vous ne voyez pas JetChat, cliquez sur Plus pour appeler la Sharesheet système, puis balayez l'écran vers le haut sur la ShareSheet et cliquez sur JetChat. L'URL est partagée dans le chat.
Il s'agit d'un exemple simple. Vous pouvez partager des types de contenu plus riche. Pour en savoir plus, consultez Récupération de données simples à partir d'autres apps.
7. Félicitations
Félicitations ! Vous savez maintenant comment ajouter des fonctionnalités de chat à une application Android grâce aux API Messaging et People. Profitez bien des fonctionnalités de chat !