DanteCervantes.com

Cómo crear una aplicación tipo Whatsapp

Publicado por : Dante | 16 noviembre, 2015 | 10:34 am

 

Tal es la popularidad de dichas aplicaciones de mensajería como Whatsapp, Telegram, Snapchat, etc, que algunas personas (clientes) solicitan hacer algo semejante, pero con un fin distinto.

Es por eso que hoy, aprenderemos a cómo hacer una aplicación tipo Whatsapp, el cual emulará la funcionalidad de “validar” nuestro teléfono por medio de un SMS, el cual es enviado desde el teléfono del usuario con su “crédito” o “saldo”.

Necesitamos

1 .- Instalar cordova / ionic framework (material)

2 .- Dispositivo android

3 .- Mac / Windows

4 .- Paciencia y ganas

5 .- Conocimientos previos en angular (introducción)

6 .- Instalar plugin de cordova para manejar los mensajes de texto 

Creando el proyecto 

Para crear nuestro proyecto, debemos entrar a nuestra terminal del sistema, e introducir los siguientes códigos para instalar ionic framework en nuestro sistema, esto nos instalará, cordova y ionic al mismo tiempo.

Una vez hecho esto, creamos el proyecto, introduciendo los siguientes códigos

Creación de los Controladores y rutas con angular.js

Controladores y Rutas

Comenzamos con la diversión, creamos un controlador llamado verifyCtrl.js y lo integramos a nuestro archivo index.html, así mismo creamos una vista llamada verifyView.html, de igual manera creamos una ruta en nuestra configuración de angular y la establecemos como la principal.

VerifyCtrl.js

Controlador para verificar el número de teléfono, dependiendo país, enviar un mensaje de texto, y comprobar que sea un humano el que se integra a nuestro sistema.

app.js

Configuración principal de angular, es aquí donde crearemos nuestra ruta para el controlador y la vista de verificación de número

Como ven, tiene una validación, para que cuando el cliente vuelva a abrir la aplicación, no lo mande a la verificación nuevamente.

verifyView.html

Esta vista contiene imágenes que vienen adjuntas al descargar el archivo compreso, así mismo cuenta con funciones que describiremos a continuación.

funciones del controlador verifyCtrl.js, el controlador cuenta con un arreglo de objetos, con toda la información telefónica del mundo y sus países, esto nos servirá para enviar correctamente el mensaje de texto dependiendo del país en el que el cliente se encuentre, (la aplicación fue desarrollada en inglés por mayor comodidad).

Podemos notar que al momento de que el cliente “toque” para seleccionar su país, se desplegará una ventana modal con un filtro para buscar sobre el listado de países, una vez el cliente elija su país, se cerrará la ventana modal y el campo de “lada” se actualizará al seleccionado por el cliente.

Utilizamos una directiva para que el campo de texto tome el formato de “teléfono”.

directiva para formato de teléfono créditos a Philip Da Silva

Así mismo tenemos un botón que dice “Next Step”, al momento de que el campo de teléfono sea distinto de vacío, el botón se activará y nos permitirá ejecutar dicha acción.

El envío del SMS consta de 6 pasos.

  1. Generar un número aleatorio que nos servirá para validar el número de teléfono correcto
  2. Bloquear a las otras aplicaciones para que no puedan recibir ni leer los mensajes de texto entrantes
  3. Comenzar la escucha de los mensajes entrantes
  4. Enviar SMS, con el número aleatorio generado
  5. Validar contenido del SMS en busca del número aleatorio generado, y compararlo con el que guardamos con anterioridad.
  6. Guardar la información en la base de datos.

 

Por último probaremos la aplicación en nuestro dispositivo android, para ello, debemos escribir los siguientes comandos

Probar aplicación en dispositivo

En un próximo tutorial seguiremos con el envío de mensajes via 1 a 1.

Conforme vaya desarrollando los módulos los iré publicando en las redes sociales.

Si quieres descargar el contenido del tutorial haz clic aquí.

 

 

Recibe los mejores desarrollos y tutoriales

* campos requeridos

redes sociales