Nesta série, estamos revivendo alguns dos melhores artigos publicados no Portal iMasters durante o ano de 2017. A ideia é que o material não se perca e você possa relembrá-lo, entrando em 2018 preparado para receber mais conteúdos tão bons quanto esse!

***

O presente artigo detalhará como se criar uma aplicação nos moldes do WhatsApp. Ao final, você será capaz de criar um aplicativo tal como o mostrado abaixo.

http://docs.back4app.com/wp-content/uploads/2016/12/ezgif.com-optimize.gif

Antes de iniciar, garanta que seu projeto tenha ativado a API de Live Queries na plataforma Back4app. Utilize o seguinte link um guia para configurar as Live Queries: Live Query.

Criar uma Classe Mensagem

Teremos que criar uma classe chamada Message no Parse Dashboard. A mesma conterá os campos: Content, Sender e Message. Os resultados são mostrados abaixo.

Mais uma vez: não se esqueça de seguir os passos descritos no artigo relativo ao Live Query. Feito isto, todos os passos inerentes ao backend estão finalizados. Vamos agora para a aplicação.

Criar o projeto

No Android Studio, crie um novo projeto tal como mostrado abaixo:

Selecione os Form Factors tal como mostrado abaixo:

Selecione Basic Activity Model:

Nomeie como MessageBoardActivity:

Vamos, agora, adicionar elementos ao aplicativo.

Adicionar elementos ao App

Assim que abrir o projeto, vá para o Res Folder e encontre o Layout Folder. Feito isto, encontre o arquivo “activity_message_board.xml” e clique duas vezes sobre o mesmo para abrir a parte relacionada ao layout. Note que o template tem início com o botão FloatingActionButton nomeado de “fab”. Primeiramente, devemos renomear este botão, clicando uma vez no seu nome no Component Tree.

Mude seu ID para “send”, tal como mostrado abaixo:

Deve-se agora adicionar elementos ao aplicativo. Neste mesmo layout adicione o RelativeLayout para o CoordinatorLayout e adicione o PlainText no layout que foi criado. O ComponentTree ficará algo parecido com o mostrado abaixo:

Mude o ID do PlainText para “message” e altere seu “hint” para o campo “Type your Message” – deixe este campo como “text”. Também faça o campo “singleLine” ser ticado como True e seu “inputType” para “textShortMessage”. Todos estes ajustes podem ser realizados na tab Properities tal como mostrado abaixo:

Alinhe o elemento “message” com o botão “send” e estará tudo certo com este arquivo. Agora, vá para o arquivo “content_message_board.xml” e clique duas vezes sobre o mesmo.

Você verá outra parte do layout. Este layout será incluído naquele que foi modificado anteriormente, de forma automática, tão logo o app venha a mostrar o seu conteúdo. Vamos primeiramente modificar o ID do TextView. O mesmo está em RelativeLayout na “messageBoard”.

Feito isto, deixe em branco o campo “text” e cheque o campo “layout_alignParentBottom”. O mesmo deixará você alterar o tamanho do campo “text” para o tamanho desejado. No presente exemplo, o campo “layout_marginBottom” foi configurado para “50 dp”, que é um tamanho bastante conveniente. Esta opção está em “Layout_Margin”.

Você também necessitará configurar o campo “gravity” para “bottom”. Desta forma, o texto vem de baixo para cima. É necessário configurar o campo “maxLines” para 20 para que tão logo o chat esteja cheio, não ultrapasse os elementos “message” ou “send”.

Agora, devemos apenas notar que também existe um layout para o menu pequeno que aparece no canto superior direito. É importante saber que este layout apresenta o ID “action_settings”. É necessário programar cada elemento que tenha sido alterado ou adicionado nos layouts.

Adicionar código ao App

Toda parte do código que realiza alguma funcionalidade deve ser adicionada dentro do método “onCreate” em MessageBoardActivity. Primeiramente, vamos detalhar os elementos que vamos utilizar.

// Elements we are going to use
FloatingActionButton sendButton = (FloatingActionButton) findViewById(R.id.send);
final TextView messageBoard = (TextView) findViewById(R.id.messageBoard);
messageBoard.setMovementMethod(new ScrollingMovementMethod());
final EditText message = (EditText) findViewById(R.id.message);

Agora, devemos inicializar a API do Back4app tal como mostrado no tutorial do Live Query. O próximo passo é adicionar o texto para “messageBoard” tão logo o mesmo seja criado.

// Subscription being made that receives every message
final Subscription sub = new BaseQuery.Builder("Message")
        .where("type", "message")
        .addField("sender")
        .addField("content")
        .addField("type")
        .build()
        .subscribe();

// If a message is created, we add to the text field
sub.on(LiveQueryEvent.CREATE, new OnListener() {
    @Override
    public void on(JSONObject object) {
        try {
            String message = (String) ((JSONObject) object.get("object")).get("content");
            String sender = (String) ((JSONObject) object.get("object")).get("sender");
            String toBeAdded = sender + ": " + message;

            final String updatedText = '\n' + toBeAdded;

            runOnUiThread(new Runnable() {
                @Override
                public void run() {
                    messageBoard.append(updatedText);
                }
            });
        } catch (JSONException e) {
            e.printStackTrace();
        }
    }
});

Devemos adicionar a funcionalidade para o botão “send”. Primeiramente, vamos criar um campo String nomeado “sender”. O mesmo no presente exemplo terá um valor padrão de “Back4User” na mesma classe em que estaremos adicionando a funcionalidade. A seguir, devemos acrescentar o código abaixo de forma que a mensagem seja enviada.

// Implementing the actions that our app will have
// Starting with the sendButton functionality
sendButton.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(final View view) {
        String messageToSend = message.getText().toString();

        Log.i("Message", "created correctly, "+messageToSend);

        //Creating and sending the message
        ParseObject click = new ParseObject("Message");
        click.put("content", messageToSend);
        click.put("sender", sender);
        click.put("type", "message");
        click.saveInBackground(new SaveCallback() {
            @Override
            public void done(ParseException e) {
                Log.i("Message", "Sent correctly");
            }
        });

        runOnUiThread(new Runnable() {
            @Override
            public void run() {
                //Setting the text blank again
                message.setText("");
            }
        });
    }
});

O próximo elemento a ser configurado é o botão Settings (“action_settings”). O desenho deste tipo de menu é tal que apresenta seus próprios métodos para disparar as opções de menu. Logo, é imperativo que se modifique seus próprios métodos que são “onOptionsItemSelected”. Localize a declaração “if” que apresenta a seguinte condição.

if (id == R.id.action_settings) {
    ...
}

E adicione o seguinte código:

//Creates a 
final EditText txtUrl = new EditText(this);

new AlertDialog.Builder(this)
        .setTitle("Settings")
        .setMessage("Please write the username you want")
        .setView(txtUrl)
        .setPositiveButton("Change username", new DialogInterface.OnClickListener() {
            public void onClick(DialogInterface dialog, int whichButton) {
                //Sets the sender
                sender = txtUrl.getText().toString();
            }
        })
        .setNegativeButton("Cancel", new DialogInterface.OnClickListener() {
            public void onClick(DialogInterface dialog, int whichButton) {
            }
        })
        .show();

Neste app, utilizamos as capacidades das Live Queries para criar um Messenger minimalista para Android. Criamos as classes e as mesmas foram usadas para enviar as mensagens no Back4app. Então, configuramos o projeto Android usando o template que Google disponibiliza via Android Studio.

Depois disso, adicionamos e personalizamos os elementos do aplicativo (botões, campos de textos e layouts). Finalmente, nós adicionamos o código que envia a mensagem ao botão existente no layout.