Construire une application de chat avec des composants prenant en compte le cycle de vie pour Android

Le SDK Nexmo In-App vous permet d'intégrer facilement des fonctions de chat dans vos applications Android. Lorsqu'il est combiné avec composants d'architecture Androidle SDK Nexmo In-App peut vous aider à produire un code mieux organisé, plus facile à maintenir et plus léger. Dans ce billet, nous allons prendre notre premier démarrage rapide Android et ajouter des composants prenant en compte le cycle de vie afin qu'il soit un peu plus facile à maintenir.

Si vous avez suivi le premier quickstart, vous verrez que nous nous abonnons et nous désabonnons aux événements de message dans les callbacks du cycle de vie de nos activités. Mais en ajoutant des composants sensibles au cycle de vie à notre application, nous pouvons déplacer le code des composants dépendants hors des méthodes du cycle de vie et dans les composants eux-mêmes.

Avant de commencer

Avant de commencer, vous devez compléter le premier démarrage rapide ou vous pouvez cloner le code source du quickstart. Vous devrez également générer un JWT utilisateur et récupérer un identifiant de conversation. Vous pouvez suivre les instructions d'installation du quickstart 1 pour apprendre à les générer.

Ajout de composants prenant en compte le cycle de vie

Mise en place des dépendances

Nous allons commencer par ajouter le dépôt Google Maven. Ouvrez le fichier build.gradle du projet et ajoutez google() comme suit :

//build.gradle
allprojects {
    repositories {
        jcenter()
        google()
    }
}

Nous pouvons ensuite ajouter la dépendance Lifecycles. Ouvrons le fichier build.gradle de l'application et vérifions qu'il contient les dépendances suivantes :

// app/build.gradle
dependencies {
    implementation "android.arch.lifecycle:extensions:1.1.1"
    annotationProcessor "android.arch.lifecycle:compiler:1.1.1"
}

Mettre en œuvre unLifecycleObserver

Actuellement, l'application de démonstration s'abonne et se désabonne des événements de message dans le fichier ChatActivity. Cela fonctionne bien pour un démarrage rapide, mais si nous continuons sur ce modèle, notre activité peut devenir gonflée avec trop d'appels qui gèrent l'interface utilisateur et d'autres composants en réponse à l'état actuel du cycle de vie. Nous allons donc séparer nos préoccupations en créant une classe qui peut surveiller le cycle de vie de ChatActivity en ajoutant des annotations aux méthodes de cette nouvelle classe.

Créons une nouvelle classe nommée StitchListenerComponent qui implémentera LifecycleObserver. Puisque notre ChatActivity utilise les éléments onResume et onPause nous allons créer deux méthodes dans notre StitchListenerComponent: onPause() et onResume(). Nous pouvons ensuite annoter ces méthodes avec l'annotation @OnLifecycleEvent correspondante. Nous allons également créer un constructeur et des variables membres pour que la méthode StitchListenerComponent puisse gérer la réception des messages et que la variable SubscriptionList qui appartient à la méthode Conversation.

class StitchListenerComponent implements LifecycleObserver {
  private Conversation conversation;
  private final EditText msgEditTxt;
  private final TextView chatTxt;
  private SubscriptionList subscriptions = new SubscriptionList();

  StitchListenerComponent(Conversation conversation, EditText msgEditTxt, TextView chatTxt) {
      this.conversation = conversation;
      this.msgEditTxt = msgEditTxt;
      this.chatTxt = chatTxt;
  }

  @OnLifecycleEvent(Lifecycle.Event.ON_PAUSE)
  void onPause() {

  }

  @OnLifecycleEvent(Lifecycle.Event.ON_RESUME)
  void onResume() {

  }
}

Ensuite, dans ChatActivity nous pouvons observer le cycle de vie avec la classe StitchListenerComponent que nous venons de créer :

//ChatActivity
...
@Override
protected void onCreate(Bundle savedInstanceState) {
  ...
  getLifecycle().addObserver(new StitchListenerComponent(conversation, msgEditTxt, chatTxt));
}

Déplacer la logique

Maintenant que nous avons créé notre LifecycleObservernous pouvons déplacer la logique qui réagit aux changements d'état du cycle de vie de ChatActivity vers StitchListenerComponent. Nous pouvons supprimer l'élément onResume, onPause, addListener, et showMessage de ChatActivity. Au lieu de cela, toute cette logique se trouvera dans StitchListenerComponent comme suit :

class StitchListenerComponent implements LifecycleObserver {
  //constructor and member variables
  ...

  @OnLifecycleEvent(Lifecycle.Event.ON_PAUSE)
  void onPause() {
      subscriptions.unsubscribeAll();
      Log.d(TAG, "onPause: Unsubscribe");
  }

  @OnLifecycleEvent(Lifecycle.Event.ON_RESUME)
  void onResume() {
      Log.d(TAG, "onResume: Subscribe to message events");
      conversation.messageEvent().add(new ResultListener<Event>() {
          @Override
          public void onSuccess(Event message) {
              showMessage(message);
          }
      }).addTo(subscriptions);
  }

  private void showMessage(final Event message) {
      if (message.getType().equals(EventType.TEXT)) {
          Text text = (Text) message;
          msgEditTxt.setText(null);
          final String prevText = chatTxt.getText().toString();
          chatTxt.setText(prevText + "\n" + text.getText());
      }
  }
}

Les méthodes comprennent des déclarations de journal afin que vous puissiez constater par vous-même que les méthodes annotées par le symbole @OnLifecycleEvent sont appelées. Ouvrez logcat et vérifiez !

Voir l'application de chat en action

Après avoir effectué les changements détaillés dans cet article, lancez l'application pour la voir fonctionner. L'application fonctionnera toujours de la même manière qu'avant, mais elle est maintenant mieux organisée et mieux entretenue. Les futurs développeurs qui travailleront sur cette application vous en seront reconnaissants ! Si vous souhaitez voir l'application dans son état final, vous pouvez consulter le code source sur notre page github de la communauté.

Quelle est la prochaine étape ?

Si vous souhaitez continuer à apprendre comment utiliser le SDK Nexmo In-App pour Android, consultez nos quickstarts où nous vous montrons comment inviter un autre utilisateur et discuter avec lui et utiliser plus d'écouteurs d'événements pour afficher l'historique du chat et quand un utilisateur est en train de taper.

Si vous avez d'autres questions sur l'utilisation du SDK Nexmo In-App, nous vous encourageons à rejoindre le communauté Nexmo slack et à consulter notre #stitch ou à nous envoyer un email directement à ea-support@nexmo.com.