DanteCervantes.com

Cómo crear una aplicación tipo Whatsapp | Parte 2

Publicado por : Dante | 3 diciembre, 2015 | 2:30 am

 

Antes que nada si estás viendo este tutorial sin haber visto la primera parte, te recomiendo pases por ese artículo y te “empapes” un poco de ello.

Cómo crear una aplicación tipo Whatsapp

En esta segunda parte de nuestro tutorial, implementaremos:

  • Leer los contactos del dispositivo
  • Chat 1 a 1
  • Crear conversaciones con cada contacto
  • Eliminar conversaciones
  • Notificaciones Push con Google
  • Reproducir un sonido cuando una notificación llegue
  • Guardar datos persistentes (localForage)
  • Utilizar lodash como libreria de filtros en arrays y objetos
  • Uso de la librería moment.js (fechas, horas)

Leer contactos del dispositivo

Descargaremos la libreria para angular / cordova ng-cordova, la cual nos facilita el uso de plugins de cordova con la estructura de una dependencia de angular.

(Al parecer ngcordova.com, no se encuentra disponible), sin embargo les dejaré el proyecto con todos los archivos necesarios.

Para que nuestra aplicación tome forma, es necesario obtener los contactos de nuestro teléfono que tengan en su perfil de contacto un teléfono mobil, con esto me refiero a número de 10 dígitos ó más.

Para ello debemos instalar el plugin de cordova que nos permite leer los contactos del dispositivo, ejecutamos desde la linea de comandos la siguiente instrucción dentro de la carpeta de nuestro proyecto de ionic.

Lo que haremos a continuación será añadir a nuestro index.html el archivo de ng-cordova

Así como también añadir las dependencias del mismo a nuestro proyecto de angular.

Creamos nuestro controlador de contactos que estará ligado a nuestra vista de contactos

Ruta de los contactos

ContactList.html

Controlador de contactos

Aquí utilizaremos la dependencia de localForage que en un artículo anterior expliqué, añadimos las dependencias a nuestro controlador, utilizaremos:

  • $cordovaContacts (modulo de ng-cordova que permite leer contactos del dispositivo)
  • $ionicLoading (muestra un spinner de carga)
  • $localForage (almacenar de manera persistente los contactos para su posterior lectura)
  • globals (servicio de angular con funciones globales)

Crearemos una función que nos permitirá obtener los contactos del dispositivo.

La lógica del controlador es la siguiente, cada vez que abramos la aplicación verificará si existen datos en nuestra “base de datos local”, de ser así los obtendrá y usará, de lo contrario hará uso de la función getAllContacts() para leer todos los contactos del dispositivo que cuenten con las siguientes características

  1. El tipo de contactos es “mobile” , “others” ó “iphone”
  2. El contacto tiene uno o más teléfonos almacenados
  3. El nombre de contacto no está vacío

Posteriormente se hace un formato del teléfono para su próximo envío al servidor, Ej. si el teléfono es almacenado como “999 2 92 52 68” esta función automáticamente quitará espacios, caracteres especiales y solo dejará los 10 primeros números.

Una vez hayamos concluido con esto, crearemos una función adicional en este controlador para poder crear una conversación con el contacto en cuestión.

En la vista podemos apreciar que listamos todos los contactos y al momento de que el usuario final haga clic sobre alguno de sus contactos, este creará una conversación en caso de no existir, en caso contrario nos dirigirá a esa conversación.

Funciones globales

Estas funciones tienen como fin facilitarnos el estar duplicando código, reutilicemos siempre, en este archivo las funciones son :

  • gotoConversation (dirige a una conversación existente)
  • getConversations (obtiene todas las conversaciones)
  • saveMessages (guarda los mensajes de cada conversación)
  • playSound (reproduce un sonido, debe estar almacenado en la carpeta www/sounds)
  • updateConversation (actualiza los mensajes de la conversación actual con el contacto actual)
  • createblankConversation (crea una conversación en blanco, cuando hacemos clic sobre un contacto que no tiene conversación)
  • crearConversation (crea una conversación, esto funciona cuando recibimos una notificación y nos encontramos con una conversación abierta)

Este archivo hace uso del plugin de cordova:

  1. org.apache.cordova.media (se utiliza con ng-cordova con la dependencia $cordovaMedia)

Conversaciones

Cuando hacemos clic sobre un contacto que aún no tiene conversación, el controlador de contactos se encarga de crear una conversación en blanco, pero la vista y el controlador que manejan la conversación son distintos, la siguiente vista muestra los mensajes que tenemos en la conversación con el contacto actual.

El controlador detecta el presionar del botón “send”, el cual ejecuta una función que obtiene todos los mensajes actuales de la conversación, en caso de no haber ninguno, este crea un objeto de mensajes con el texto, la hora y el id de la conversación para posteriormente hacer el filtro y obtener los mensajes de cada conversación.

Hacemos uso de la dependencia de ionic framework $ionicScrollDelegate, con el cual obtenemos un efecto de “rebote” hacia abajo cuando enviamos o recibimos un mensaje nuevo.

Definición de funciones:

  • refreshList (actualiza los mensajes recibidos del listado de conversaciones)
  • newMessage (agrega un mensaje nuevo a una conversación existente o inexistente)
  • sendMessage (encargado de enviar el mensaje a nuestro contacto, como notificación)
  • inputUp, inputDown (con la dependencia de ionic $scrollDelegate se obtiene un efecto de rebote)

Notificaciones Push

Esta es posiblemente la parte más interesante del proyecto, y la más complicada (posiblemente), debemos tener una cuenta de gmail, y debemos crear un proyecto en la consola de desarrolladores de google al cual le añadiremos la API de Google Cloud Messaging o GCM.

1.- Crear nuevo proyecto

Escribimos el nombre del proyecto, después de hacer clic sobre el botón Crear proyecto.

Captura de pantalla 2015-12-03 a las 1.24.01 a.m.

2.- Habilitar API de GCM

Una vez hayamos creado el proyecto, hacemos click en Habilitar y administrar APIs, seguidamente nos aparecerá una lista de todas las APIs que Google ofrece, a nosotros solo nos interesa Google Cloud Messaging for Android, hacemos clic en el nombre de la API, y seguidamente presionamos el botón Habilitar API.

Captura de pantalla 2015-12-03 a las 1.25.54 a.m.

Captura de pantalla 2015-12-03 a las 1.26.15 a.m.Captura de pantalla 2015-12-03 a las 1.27.02 a.m.

3 .- Configurar las credenciales

Nos saltará un mensaje diciendo que debemos configurar las credenciales, para poder hacer uso de la API de GCM.

Hacemos clic en Añadir credenciales, después seleccionamos la opción de Clave de API, nos saltará una ventana y elegimos Clave de Servidor, posteriormente le ponemos un nombre y nos saltará la llave de acceso. Guárdala bien, sin ella no podrás enviar notificaciones push.

Captura de pantalla 2015-12-03 a las 1.28.43 a.m. Captura de pantalla 2015-12-03 a las 1.28.57 a.m. Captura de pantalla 2015-12-03 a las 1.29.19 a.m. Captura de pantalla 2015-12-03 a las 1.29.38 a.m.

En el Panel de Control, desplegamos la lista y copiamos el Número del proyecto, es indispensable tenerlo, ya que nos servirá para poder enviar las notificaciones por medio de javascript.

Configurando las notificaciones

Debemos instalar el plugin de notificaciones, el cual es compatible con ng-cordova.

Una vez hecho esto, continuamos con la configuración en nuestro archivo app.js

Ahora nos vamos del lado del servidor con PHP, este archivo es bastante sencillo, una vez tengamos el identificador único del dispositivo, que se obtiene cuando el cliente envía el mensaje de texto y se verifica su número.

Volvemos al archivo verifyCtrl, que vimos en el tutorial pasado, dentro de la función “onSMSArrive”, añadiremos el siguiente código que se ejecuta una vez que llega el mensaje y se encarga de almacenar la información en nuestro servidor para su posterior uso.

Esta función almacena la información con localForage para su posterior uso y verificación al abrir nuevamente la app.

El archivo submit.php, contiene lo siguiente, fecha y hora, verificamos que todos los datos hayan sido enviados y ninguno se encuentre vacío, una vez esto sea comprobado almacenamos esta info en la base de datos.

Enviando notificaciones

La siguiente función nos da la facilidad de enviar notificaciones a los dispositivos registrados en la base de datos, la lógica es la siguiente, si el número 9999999999, envía un mensaje al número 1111111111, se obtendrá el identificador único del número 1111111111, para enviarle la notificación.

Es aquí donde hacemos uso de la API KEY ACCESS, la definimos como una variable global.

y Listo! el resultado es el siguiente:

Screenshot_2015-12-03-02-05-44Screenshot_2015-12-03-02-13-39 Screenshot_2015-12-03-02-12-38 Screenshot_2015-12-03-02-13-14 Screenshot_2015-12-03-02-13-32

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Cabe destacar que las notificaciones solo funcionan entre los contactos que se tienen unos a otros, si por ejemplo un usuario quiere mandar un mensaje a otro, que no tiene la app ó no está en sus contactos, las notificaciones no funcionarán.

Hasta aquí concluimos con el segundo tutorial para crear una aplicación como Whatsapp.

Conclusión

Es posible modificar el contenido de la aplicación para acomodarla a su gusto, le hacen falta varios módulos como:

  1. Enviar archivos
  2. Tomar foto y enviar con comentarios
  3. Enviar notas de voz
  4. Hacer funcional el chat de 1 a 1

Este código es totalmente abierto, por lo que cualquiera lo puede modificar, con la única condición de mencionar de donde se obtuvo.

Si alguno de ustedes gusta apoyar el proyecto, adelante.

No se olviden de comentar para cualquier duda o aclaración.

Innovar es siempre, un placer.

¿Te gustaría obtener el código fuente de este tutorial?, has clic en el botón de abajo!

Recibe los mejores desarrollos y tutoriales

* campos requeridos

redes sociales