Erstellen Sie eine Chat-App mit lebenszyklusabhängigen Komponenten für Android

Das Nexmo In-App SDK macht es Ihnen leicht, Chat-Funktionen in Ihre Android-Apps zu integrieren. In Kombination mit Android Architektur Komponentenkann das Nexmo In-App SDK Ihnen helfen, besser organisierten, einfacher zu wartenden und leichteren Code zu produzieren. In diesem Beitrag werden wir unseren ersten Android-Schnellstart und fügen Lebenszyklus-Komponenten hinzu, damit er etwas einfacher zu warten ist.

Wenn Sie dem ersten Quickstart gefolgt sind, werden Sie sehen, dass wir Nachrichtenereignisse in den Lifecycle-Callbacks innerhalb unserer Aktivitäten abonnieren und abbestellen. Durch das Hinzufügen von Lifecycle-fähigen Komponenten zu unserer Anwendung können wir den Code der abhängigen Komponenten aus den Lifecycle-Methoden in die Komponenten selbst verschieben.

Bevor Sie beginnen

Bevor wir beginnen, sollten Sie den ersten Schnellstart oder klonen Sie den Quellcode des Schnellstarts. Sie müssen auch ein Benutzer-JWT generieren und eine Konversations-ID abrufen. Sie können die Setup-Anleitung für Quickstart 1 folgen, um zu erfahren, wie man diese generiert.

Hinzufügen von lebenszyklusabhängigen Komponenten

Einrichten der Abhängigkeiten

Wir beginnen mit dem Hinzufügen des Google Maven-Repositorys. Öffnen Sie die build.gradle Datei für das Projekt und fügen Sie google() wie folgt:

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

Dann können wir die Abhängigkeit von Lebenszyklen hinzufügen. Öffnen wir die build.gradle Datei für die Anwendung und stellen Sie sicher, dass sie die folgenden Abhängigkeiten enthält:

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

Umsetzung einerLifecycleObserver

Derzeit abonniert und abmeldet die Demo-Anwendung Nachrichtenereignisse in der ChatActivity. Wenn wir dieses Muster jedoch beibehalten, kann unsere Aktivität mit zu vielen Aufrufen aufgebläht werden, die die Benutzeroberfläche und andere Komponenten als Reaktion auf den aktuellen Status des Lebenszyklus verwalten. Daher werden wir unsere Anliegen trennen, indem wir eine Klasse erstellen, die den Lebenszyklus von ChatActivity überwachen kann, indem wir die Methoden dieser neuen Klasse mit Anmerkungen versehen.

Lassen Sie uns eine neue Klasse namens StitchListenerComponent die Folgendes implementieren wird LifecycleObserver. Da unsere ChatActivity die onResume und onPause Lebenszyklus-Rückrufe verwendet, werden wir zwei Methoden in unserem StitchListenerComponent: onPause() und onResume(). Dann können wir diese Methoden mit der entsprechenden @OnLifecycleEvent Annotation versehen. Wir werden auch einen Konstruktor und Mitgliedsvariablen erstellen, damit die StitchListenerComponent den Empfang von Nachrichten verarbeiten kann und die SubscriptionList die zu der Methode 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() {

  }
}

Dann können wir in ChatActivity können wir den Lebenszyklus mit der StitchListenerComponent Klasse beobachten, die wir gerade erstellt haben:

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

Verschieben der Logik

Nachdem wir nun unsere benutzerdefinierte LifecycleObservererstellt haben, können wir die Logik, die auf Änderungen des Lebenszyklusstatus reagiert, von ChatActivity zu StitchListenerComponent. Wir können die onResume, onPause, addListener, und showMessage Methoden aus ChatActivity. Stattdessen wird die gesamte Logik in StitchListenerComponent wie folgt:

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

Die Methoden enthalten einige Protokollanweisungen, so dass Sie selbst sehen können, dass die Methoden, die mit @OnLifecycleEvent aufgerufen werden. Öffnen Sie logcat und sehen Sie es sich an!

Sehen Sie die Chat-App in Aktion

Nachdem Sie die in diesem Beitrag beschriebenen Änderungen vorgenommen haben, führen Sie die Anwendung aus, um zu sehen, wie sie funktioniert. Die App wird immer noch genauso funktionieren wie vorher, aber jetzt ist sie besser organisiert und gepflegt. Zukünftige Entwickler, die an dieser Anwendung arbeiten, werden Ihnen dankbar sein! Wenn Sie die App in ihrem endgültigen Zustand sehen möchten, können Sie den Quellcode auf unserer Community-Github-Seite.

Was kommt als Nächstes?

Wenn Sie weiter lernen möchten, wie Sie das Nexmo In-App SDK für Android verwenden, schauen Sie sich unsere Quickstarts an, in denen wir Ihnen zeigen, wie Sie Einladen und Chatten mit einem anderen Nutzer und mehr Ereignis-Listener verwenden um den Chatverlauf anzuzeigen und wenn ein Benutzer tippt.

Wenn Sie weitere Fragen zur Verwendung des Nexmo In-App SDK haben, können Sie sich im Nexmo-Gemeinschaft slack und schauen Sie sich unseren #stitch Kanal zu besuchen oder uns direkt eine E-Mail an ea-support@nexmo.com..