Crear una aplicación de chat con componentes conscientes del ciclo de vida para Android

El Nexmo In-App SDK hace que sea fácil para usted para construir funciones de chat en sus aplicaciones Android. Cuando se combina con Componentes de Arquitectura AndroidNexmo In-App SDK puede ayudarte a producir un código mejor organizado, más fácil de mantener y más ligero. En este post, vamos a tomar nuestro primer Android quickstart y añadir componentes conscientes del ciclo de vida para que sea un poco más fácil de mantener.

Si has seguido el primer quickstart, verás que nos suscribimos y desuscribimos a eventos de mensajes en los callbacks del ciclo de vida dentro de nuestras actividades. Pero al añadir componentes conscientes del ciclo de vida a nuestra aplicación, podemos mover el código de los componentes dependientes fuera de los métodos del ciclo de vida y dentro de los propios componentes.

Antes de empezar

Antes de empezar deberías completar el primer inicio rápido o puedes clonar el código fuente del quickstart. También necesitarás generar un JWT de usuario y recuperar un ID de conversación. Puedes seguir las instrucciones de configuración del quickstart 1 para aprender a generarlos.

Añadir componentes conscientes del ciclo de vida

Configurar las dependencias

Comenzaremos añadiendo el repositorio de Google Maven. Abre el archivo build.gradle del proyecto y añade google() así:

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

A continuación, podemos añadir la dependencia Lifecycles. Abramos el archivo build.gradle de la aplicación y asegurémonos de que contiene las siguientes dependencias:

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

Poner en marcha unLifecycleObserver

Actualmente, la aplicación de demostración se suscribe y se da de baja de los eventos de mensajes en el directorio ChatActivity. Esto funciona bien para una puesta en marcha rápida, pero si continuamos con este patrón, nuestra actividad puede hincharse con demasiadas llamadas que gestionan la interfaz de usuario y otros componentes en respuesta al estado actual del ciclo de vida. Así que vamos a separar nuestras preocupaciones mediante la creación de una clase que puede controlar el ciclo de vida de ChatActivity añadiendo anotaciones a los métodos de esta nueva clase.

Creemos una nueva clase llamada StitchListenerComponent que implementará LifecycleObserver. Dado que nuestra clase ChatActivity está usando las etiquetas onResume y onPause haremos dos métodos en nuestra aplicación StitchListenerComponent: onPause() y onResume(). Luego podemos anotar esos métodos con la anotación @OnLifecycleEvent correspondiente. También vamos a crear un constructor y variables miembro para que el método StitchListenerComponent pueda manejar la recepción de mensajes y el método SubscriptionList que pertenece al método 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() {

  }
}

Entonces en ChatActivity podemos observar el ciclo de vida con la clase StitchListenerComponent que acabamos de crear:

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

Mover la lógica

Ahora que hemos creado nuestro LifecycleObserverpodemos mover la lógica que reacciona a los cambios en el estado del ciclo de vida de ChatActivity a StitchListenerComponent. Podemos eliminar el icono onResume, onPause, addListenery showMessage de ChatActivity. En su lugar, toda esa lógica vivirá en StitchListenerComponent así:

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

Los métodos incluyen algunas declaraciones de registro para que pueda ver por sí mismo que los métodos anotados con @OnLifecycleEvent están siendo llamados. Abre logcat y compruébalo.

Vea la aplicación de chat en acción

Después de hacer los cambios detallados en este post, ejecuta la app para verla funcionar. La aplicación seguirá funcionando igual que antes, pero ahora está en un estado mejor organizado y más mantenido. Los futuros desarrolladores que trabajen con esta aplicación te lo agradecerán. Si quieres ver la aplicación en su estado final, puedes consultar el código fuente en nuestra página github de la comunidad.

¿Y ahora qué?

Si quieres seguir aprendiendo a utilizar Nexmo In-App SDK para Android, echa un vistazo a nuestros quickstarts donde te mostramos cómo invitar y chatear con otro usuario y utilizar más escuchadores de eventos para mostrar el historial de chat y cuando un usuario está escribiendo.

Si tiene más preguntas sobre el uso de la Nexmo In-App SDK le animamos a unirse a la Nexmo comunidad slack y echa un vistazo a nuestro #stitch o envíenos un correo electrónico directamente a ea-support@nexmo.com.