Para crear una aplicación como WhatsApp, deberá codificar el lado del cliente y el servidor de la aplicación. Este tipo de aplicación también debería tener consultas en vivo. Para el lado del cliente, deberá decidir si su aplicación se ejecutará con iOS o Android o ambos. El tiempo que necesitará para desarrollar una aplicación depende de cuán complejo desee que sea la aplicación y si usará marcos para acelerar el desarrollo de software. Una aplicación consta de 02 capas de programación diferentes:
Backend: Back-end significa las partes que hacen el trabajo, pero el usuario final desconoce o no puede ver. Representa el 80% del trabajo total y contiene API, bases de datos, servicios, etc. Existen varios proveedores de BaaS – Backend as a Service para acelerar el desarrollo del backend. Back4app puede acelerar hasta un 80% el desarrollo del backend y es una buena opción para los desarrolladores que buscan flexibilidad y control sobre el código fuente. Firebase proporciona resultados similares, pero los usuarios no tienen acceso al código fuente y están bloqueados en la plataforma.
Frontend: Front end normalmente significa las partes del proyecto con las que un usuario interactúa. La interfaz puede ser móvil (Android, IOS, Windows, etc.) o web. Una buena plataforma para acelerar el desarrollo de la interfaz móvil es Xamarin y puede reducir hasta un 70% el tiempo total para desarrollar aplicaciones de Android e iOS.
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 usarFloatingActionButton sendButton = (FloatingActionButton) findViewById (R.id.send); final TextView messageBoard = (TextView) findViewById (R.id.messageBoard); messageBoard.setMovementMethod (new ScrollingMovementMethod ()); final Edit mensaje = (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 todos los mensajes final Subscription sub = new BaseQuery.Builder (“Message”) .where (“type”, “message”) .addField (“sender”) .addField (“content”) .addField (” escriba “) .build () .subscribe (); // Si se crea un mensaje, agregamos al texto fieldsub.on (LiveQueryEvent.CREATE, nuevo 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 (“objectder”); String toBeAdded = sender + “:” + mensaje; Cadena final updatedText = ‘\ n’ + toBeAdded; runOnUiThread (new Runnable () {@Override 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 sendButtonsendButton.setOnClickListener (nueva View.OnClickListener () {@Override public void onClick (vista de vista final) {String messageToSend = message.getText (). ToString (). ; Log.i (“Mensaje”, “creado correctamente,” + messageToSend); // Crear y enviar el mensaje ParseObject click = new ParseObject (“Message”); click.put (“content”, messageToSend); click.put (“remitente”, remitente); click.put (“tipo”, “mensaje”); click.saveInBackground (nuevo SaveCallback () {@Override public void done (ParseException e) {Log.i (“Mensaje”, “Enviado correctamente “);}}); runOnUiThread (new Runnable () {@Override public void run () {// Configurando 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 = new EditText (this); nuevo AlertDialog.Builder (este) .setTitle (“Configuración”) .setMessage (“Escriba el nombre de usuario que desee”) .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 ) { } }) .espectáculo();
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.
