Este tutorial detallará los pasos de cómo crear una aplicación similar a WhatsApp y proporcionará una muestra del código fuente de la aplicación final.
Mensajero simple
Después de este tutorial, podrá crear una aplicación como esta:
Antes de entrar en la acción, asegúrese de tener un proyecto que esté configurado para usar la API Live Query de Back4App. Puede consultar el siguiente enlace a la guía de Live Query:
En este proyecto, crearemos una aplicación simple que funcionará como un cliente de intercambio de mensajes. Siga los pasos y consulte el código fuente al final de la página.
Paso 1 – Crear clase de mensaje
Tenemos que crear una clase llamada Mensaje en el Panel de control de Parse con los campos contenido, remitente y mensaje. El resultado se muestra en la imagen:
Además, no olvide seguir los pasos descritos en el artículo de Live Query. Después de eso, ya está todo listo en el backend. Ahora a la aplicación.
Paso 2 – Crea el proyecto
En Android Studio, cree un nuevo proyecto, como se muestra a continuación:
Seleccione los factores de forma que se muestran en la imagen a continuación:
Seleccione el modelo de actividad básica:
Y llámalo MessageBoardActivity:
Ahora es el momento de agregar elementos a la aplicación.
Paso 3: agrega elementos a la aplicación
Tan pronto como abra el proyecto, vaya a la carpeta res y busque la carpeta de diseño. Allí, busque el archivo “activity_message_board.xml” y haga doble clic para abrir la parte del diseño. Tenga en cuenta que la plantilla comienza con un FloatingActionButton llamado “fab”. Primero cambiemos el nombre de este botón, haciendo clic una vez en su nombre en el Árbol de componentes:
Y luego cambie su ID a “enviar”, como se muestra en las imágenes a continuación:
Ahora, tenemos que agregar los elementos a la aplicación. En este mismo diseño, agregue un RelativeLayout al CoordinatorLayout existente, y luego agregue un Texto sin formato al Diseño recién creado. El árbol de componentes debería ser así:
Cambie la ID del Texto sin formato que acaba de agregar a “mensaje” y cambie su campo “pista” a “Escriba su mensaje” y deje en blanco su campo “texto”. Además, marque su campo “singleLine” (verdadero) y su “inputType” a “textShortMessage”. Todos estos ajustes se pueden hacer en la pestaña Propiedades, como se muestra:
Alinee el elemento “mensaje” con el botón “enviar” y estará listo en este archivo. Ahora, dirígete al archivo llamado “content_message_board.xml” y haz doble clic para abrirlo.
Verás otra parte del diseño. Este diseño se incluirá en el que se modificó antes, automáticamente, tan pronto como la aplicación muestre su contenido. Primero cambiemos la ID de TextView que ya está en RelativeLayout existente a “messageBoard”.
Luego, deje en blanco su campo de “texto” y marque el campo “layout_alignParentBottom”, que le permitirá cambiar el tamaño del campo de texto al tamaño deseado, lo que debe hacer. En este ejemplo, el campo “layout_marginBottom” se configuró en “50 dp”, lo que le da un buen tamaño: esta opción está dentro de las opciones de “Layout_Margin”.
Además, deberá establecer el campo “gravedad” en “abajo”, de modo que el texto llegue de abajo hacia arriba y sea necesario establecer el campo “maxLines” en “20”, de modo que tan pronto como el chat está lleno, no pasa por encima del “mensaje” o los elementos “enviar”. A continuación se muestra una imagen con algunas de las propiedades que se han establecido:
Ahora, solo tenemos que tener en cuenta que también hay un diseño para el pequeño menú que aparece en la esquina superior derecha: el menú de configuración. No hay nada que hacer en este diseño, pero saber que su ID es “action_settings”. Es necesario programar cada elemento que se ha cambiado o agregado a los diseños.
Paso 4: agrega el código de trabajo a la aplicación
Cada pieza de código que hace alguna funcionalidad aquí debe agregarse dentro del método “onCreate”, en MessageBoardActivity. Primero, declaremos los elementos que usaremos:
// Elementos que vamos a usar
FloatingActionButton sendButton = (FloatingActionButton) findViewById (R.id.send);
final TextView messageBoard = (TextView) findViewById (R.id.messageBoard);
messageBoard.setMovementMethod (nuevo ScrollingMovementMethod ());
mensaje final de EditText = (EditText) findViewById (R.id.message);
Ahora, tenemos que agregar la inicialización de la API Parse de Back4App, que se puede ver en el Tutorial de Live Query. A continuación, tenemos que suscribirnos al canal y agregar el texto al “tablero de mensajes” tan pronto como se cree:
// Se realiza una suscripción que recibe cada mensaje
Suscripción final sub = nueva BaseQuery.Builder (“Mensaje”)
.where (“tipo”, “mensaje”)
.addField (“remitente”)
.addField (“contenido”)
.addField (“tipo”)
.construir()
.suscribir();
// Si se crea un mensaje, lo agregamos al campo de texto
sub.on (LiveQueryEvent.CREATE, nuevo OnListener () {
@Anular
vacío público en (objeto JSONObject) {
tratar {
Mensaje de cadena = (String) ((JSONObject) object.get (“object”)). Get (“content”);
String sender = (String) ((JSONObject) object.get (“object”)). Get (“sender”);
Cadena toBeAdded = remitente + “:” + mensaje;
Cadena final updatedText = ‘\ n’ + toBeAdded;
runOnUiThread (new Runnable () {
@Anular
public void run () {
messageBoard.append (updatedText);
}
});
} catch (JSONException e) {
e.printStackTrace ();
}
}
});
Luego, tenemos que agregar funcionalidad al botón “enviar”. Primero, necesitamos crear un campo de cadena llamado “remitente”, que en este ejemplo tiene un valor predeterminado de “Back4User” en esta misma clase en la que estamos agregando la funcionalidad. Luego, debemos agregar el siguiente código para que, tan pronto como se haga clic, se envíe el mensaje:
// Implementando las acciones que tendrá nuestra aplicación
// Comenzando con la funcionalidad sendButton
sendButton.setOnClickListener (nueva View.OnClickListener () {
@Anular
public void onClick (vista de vista final) {
Cadena messageToSend = message.getText (). ToString ();
Log.i (“Mensaje”, “creado correctamente”, + messageToSend);
// Creando y enviando el mensaje
ParseObject click = new ParseObject (“Mensaje”);
click.put (“contenido”, messageToSend);
click.put (“remitente”, remitente);
click.put (“tipo”, “mensaje”);
click.saveInBackground (nuevo SaveCallback () {
@Anular
vacío público hecho (ParseException e) {
Log.i (“Mensaje”, “Enviado correctamente”);
}
});
runOnUiThread (new Runnable () {
@Anular
public void run () {
// Establecer el texto en blanco nuevamente
message.setText (“”);
}
});
}
});
El siguiente elemento a configurar es el botón Configuración: el elemento “action_settings”. El diseño de este tipo de menú es tal que tiene sus propios métodos para activar las opciones del menú. Por lo tanto, es imprescindible modificar sus propios métodos, que en este caso es “onOptionsItemSelected”. Busque una declaración “if” que tenga la siguiente condición:
if (id == R.id.action_settings) {
…
}
Y agregue el siguiente código dentro de él:
// Crea un
EditText final txtUrl = nuevo EditText (este);
nuevo AlertDialog.Builder (este)
.setTitle (“Configuración”)
.setMessage (“Por favor escriba el nombre de usuario que desea”)
.setView (txtUrl)
.setPositiveButton (“Cambiar nombre de usuario”, nuevo DialogInterface.OnClickListener () {
public void onClick (DialogInterface dialog, int whichButton) {
// Establece el remitente
remitente = txtUrl.getText (). toString ();
}
})
.setNegativeButton (“Cancelar”, nuevo DialogInterface.OnClickListener () {
public void onClick (DialogInterface dialog, int whichButton) {
}
})
.mostrar();
Entonces, en esta aplicación utilizamos las capacidades de Live Query para crear un mensajero minimalista para Android. Creamos las clases en Back4App que se usaron para enviar los mensajes. Luego, configuramos el proyecto de Android utilizando una bonita plantilla que Google ofrece con Android Studio. Después de eso, agregamos y personalizamos los elementos de la aplicación (botones, campos de texto y diseños). Finalmente, agregamos el código que envía el mensaje al botón que existe en el diseño; agregó un código al menú de configuración, de modo que el nombre del remitente podría cambiarse y agregó un código para recibir mensajes.
Y eso es todo por esta aplicación. Mira el código completo a continuación:
https://github.com/rvitorper/bac …
Descargo de responsabilidad, soy fundador de Back4app.
