Crie um aplicativo de bate-papo com componentes que levam em conta o ciclo de vida para Android

O SDK do Nexmo para aplicativos facilita a integração de recursos de chat em seus aplicativos Android. Quando combinado com os Android Architecture Components, o SDK Nexmo In-App pode ajudá-lo a produzir um código mais organizado, mais fácil de manter e mais leve. Nesta postagem, vamos dar nosso primeiro guia rápido para Android e adicionar componentes que levam em conta o ciclo de vida, para que ele fique um pouco mais fácil de manter.

Se você acompanhou o primeiro guia de início rápido, percebeu que nos inscrevemos e cancelamos a inscrição em eventos de mensagem nos callbacks do ciclo de vida dentro de nossas atividades. Mas, ao adicionar componentes sensíveis ao ciclo de vida ao nosso aplicativo, podemos transferir o código dos componentes dependentes para fora dos métodos do ciclo de vida e para dentro dos próprios componentes.

Antes de começar

Antes de começarmos, você deve concluir o primeiro guia de início rápido ou clonar o código-fonte do guia de início rápido. Você também precisará gerar um JWT de usuário e recuperar um ID de conversa. Você pode seguir as instruções de configuração do guia rápido 1 para saber como gerá-los.

Incorporando componentes sensíveis ao ciclo de vida

Configure as dependências

Vamos começar adicionando o repositório do Google Maven. Abra o build.gradle arquivo do projeto e adicione google() da seguinte maneira:

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

Em seguida, podemos adicionar a dependência do Lifecycles. Vamos abrir o build.gradle arquivo do aplicativo e verificar se ele contém as seguintes dependências:

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

Implementar um LifecycleObserver

Atualmente, o aplicativo de demonstração se inscreve e cancela a inscrição em eventos de mensagem no ChatActivity. Isso funciona bem para um início rápido, mas, se continuarmos com esse padrão, nossa atividade pode ficar sobrecarregada com muitas chamadas que gerenciam a interface do usuário e outros componentes em resposta ao estado atual do ciclo de vida. Portanto, vamos separar nossas responsabilidades criando uma classe capaz de monitorar o ciclo de vida de ChatActivity , adicionando anotações aos métodos dessa nova classe.

Vamos criar uma nova classe chamada StitchListenerComponent que irá implementar LifecycleObserver. Como nosso ChatActivity está usando o onResume e onPause callbacks de ciclo de vida, vamos criar dois métodos em nossa StitchListenerComponent: onPause() e onResume(). Em seguida, podemos anotar esses métodos com a @OnLifecycleEvent . Também vamos criar um construtor e variáveis de membro para que o StitchListenerComponent possa lidar com o recebimento de mensagens e o SubscriptionList que pertença ao 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() {

  }
}

Então, em ChatActivity podemos observar o ciclo de vida com a StitchListenerComponent classe que acabamos de criar:

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

Mudança da lógica

Agora que criamos nosso LifecycleObserver, podemos transferir a lógica que reage às mudanças no status do ciclo de vida de ChatActivity para StitchListenerComponent. Podemos remover o onResume, onPause, addListener, e showMessage métodos de ChatActivity. Em vez disso, toda essa lógica ficará em StitchListenerComponent da seguinte forma:

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

Os métodos incluem algumas instruções de log para que você possa verificar por si mesmo que os métodos anotados com @OnLifecycleEvent estão sendo chamados. Abra o logcat e confira!

Veja o aplicativo de bate-papo em ação

Depois de fazer as alterações detalhadas nesta postagem, execute o aplicativo para ver como ele funciona. O aplicativo continuará funcionando da mesma forma que antes, mas agora está mais bem organizado e melhor mantido. Os futuros desenvolvedores que trabalharem neste aplicativo ficarão muito gratos! Se você quiser ver o aplicativo em sua versão final, pode conferir o código-fonte na nossa página da comunidade no GitHub.

E agora?

Se você quiser continuar aprendendo a usar o SDK do Nexmo In-App para Android, confira nossos guias de início rápido, nos quais mostramos como convidar e conversar com outro usuário e usar mais ouvintes de eventos para exibir o histórico de bate-papo e indicar quando um usuário está digitando.

Se você tiver mais dúvidas sobre como usar o SDK do Nexmo para aplicativos, recomendamos que participe da Slack da comunidade Nexmo e conferir nossa #stitch ou nos envie um e-mail diretamente para ea-support@nexmo.com.