Cómo "cocinar" una aplicación web PHP con Latch

Este viernes di mi charla en {Codemotion 2014}. La charla, bajo el título de {Love Always Takes Care & Humility} estaba centrada en una demo paso a paso para que un programador pudiera integrar una aplicación PHP con Latch desde cero. Para darle un toque curioso a la charla, la presentación estaba ambientada en la serie Breaking Bad y en este artículo os recojo paso a paso la demo de la charla.

Figura 1: Cómo "cocinar" una aplicación web PHP con Latch

Las diapositivas que utilicé para esta sesión las he subido a mi canal SlideShare por si alguien las quiere ver, pero en ellas no se encuentra descrita la demostración que enseñé durante la charla, por lo que os la paso a describir por aquí.

Figura 2: Codemotion ES 2014: Love Always Takes Care & Humility

Paso 1: Arquitectura de la aplicación PHP sin Latch

El sitio web, llamado Maligno.com, no estaba publicado a Internet, pero sí que tenía conexión a Internet para poder consultar en cualquier momento los servidores de Latch. El sitio solo cuenta con una página de inicio llamada index.php desde la que se puede acceder a un formulario de login que se publica desde login.php.

Figura 3: Arquitectura de la web sin usar Latch

El formulario de login es autenticado por loginController.php que se encarga de verificar incialmente que el usuario y la contraseña son correctas. Si son correctas las credenciales, el usuario accede a su página de perfil donde no hay nada más que un mensaje de bienvenida.

Figura 4: Tabla users en MySQL se ha habilitado una columna para guardar el Latch de cada usuario

Esa comprobación se realiza desde una función creada en latchHelpers.php, donde además de autenticar el usuario contra la base de datos, se ha creado otra función para saber si un usuario tiene puesto un Latch y cuál es su AccountID - en la base de datos LatchID -, que se ha llamado getLatchID().

Figura 5: Funciones authenticateUser() y getLatchID() en LatchHelpers.php

A partir de este punto, ya podemos comenzar a integar Latch en esta aplicación web en PHP en varios pasos, que fue lo que se hizo en la demo.

Paso 2: Creamos la aplicación Latch para esta web en PHP

Para comenzar la integración debemos crearnos una cuenta de desarrollador gratuita en Latch. Allí deberemos crear una aplicación Latch donde es necesario proporcionar información para mostrar en las alertas de usuario, como son el mensaje de texto, un logotipo para mostrar en la app, un correo electrónico y/o número de teléfono para casos de emergencia.

Figura 6: Pasos para crear la app de Latch para identificar la web en PHP

Una vez creada, la aplicación tendrá un Application ID y un Secret para autenticarse en el sistema y hacer uso del SDK de Latch. El SDK de Latch se puede descargar desde la web de Latch o en el caso de que utilices pear directamente con la herramienta de instalación de software.

Figura 7: Creación de la app de Latch. En este caso Pollos Hermanos.

El SDK de Latch para PHP son tres ficheros Latch.php, Errors.php y LatchResponse.php que se guardan dentro de la carpeta controllers/Latch/ para que puedan ser utilizados en la aplicación incluidos en aquellas partes donde será necesario hacer uso del API de Latch.

Figura 8: SDK de Latch, ficheros originales de la web
y Controladores de Integración con Latch

Los datos de ApplicationID y Secret se van a cargar en latchConfig.php, donde además se hace inclusión del SDK de Latch para PHP. A partir de este momento, cada vez que sea necesario utilizar el API de Latch bastará con incluir latchConfig.php que nos dará acceso directo a las funciones.

Figura 9: Configuración en latchConfig.php del SDK de Latch para PHP, el ApplicationID y el Secret

Paso 3: El pareado de la cuentas con Latch

Una vez que la aplicación web PHP está conectada con Latch, ya podemos pasar a la fase de parear las cuentas de usuario, para eso el proceso de integración será el siguiente descrito en el gráfico.

Figura 10: Proceso para parear cuentas de la web PHP con Latch

Lo primero es añadir en profile.php un formulario para solicitar el TTP (Token Temporal de Pareado) que da la app de Latch cuando se parea un servicio. Si no lo has hecho nunca, te recomiendo que sigas el tutorial con Tuenti, Nevele Bank o con OxWord para tener la experiencia de usuario clara. 

Figura 11: Formulario para solicitar el TTP dentro del perfil de usuario

El TTP es enviado a un controlador en latchController.php donde se va a recibir y solicitar el pareado. Para eso se hará uso de la función pair() del SDK de Latch para PHP que puede verse en Latch.php.

Figura 12: Funciones en Latch.php del SDK de Latch

Así, en latchController.php únicamente se carga latchConfig.php, se llama a la función pair() del API de Latch y el resultado se guarda haciendo un Update en la base de datos MySQL para que el AccounID (identificador único del Latch) quede asociado al usuario.

Figura 13: Código de LatchController.php para hacer el pareado de las cuentas

Como se puede ver, al final en la base de datos ya tendremos el id por el que preguntar el estado y al mismo tiempo al usuario le habrá salido - cuando realice el proceso completo de pareado - el Latch de nuestra app "Pollos Hermanos" en su aplicación.

Figura 14: Cuando el usuario hace el pareado, el resultado de la función pair() se almacena en la tabla users

Con esto habríamos acabado la parte del pareado de las cuentas y ya solo quedaría comprobar si el pestillo está abierto o cerrado en cada uno de los intentos de login en la web

Paso 4: Comprobación del estado del pestillo del usuario

Ahora, cada vez que se realice un proceso de login hay que comprobar cuál es el estado del AccountId asociado a esa cuenta de usuario. Para ello, el proceso que tendremos que hacer en la aplicación web PHP es el siguiente descrito en el gráfico.

Figura 15: Proceso para autenticar el estado del Latch de cada usuario

Como se puede ver, el proceso en la aplicación web PHP pasa por modificar el controlador de autenticación loginController.php para que además del usurario y la contraseña compruebe el estado que tiene ese AccountID. Para ello, el código necesario sería el siguiente.

Figura 16: Código de verificación del estado en LoginController.php

El resto del trabajo para un usuario es simplemente decidir desde su app de Latch si quiere tener un estado abierto o cerrado, como con el resto de las aplicaciones.

Figura 17: Aplicación de "Pollos Hermanos" en mi app de Latch

Paso 5: Finalización de la integración

Por supuesto, el resto del proceso aún está por terminar. Faltaría hacer un proceso de despareado, que podría ser de forma segura creando por ejemplo una operación que bloqueara si se puede realizar el unpair() o no, pero la parte principal del proceso ya estaría hecha. El objetivo de este ejemplo era que pudiera hacerse desde cero en 10 minutos dentro de la charla, para aprender a desarrollar mejor esta semana tenemos las formaciones gratuitas de Latch en Latch Talks. Mañana vía Internet de 16:00 a 17:00 horas para los desarrolladores de Java, el miércoles para los desarrolladores de .NET y el jueves para los desarrolladores en PHP.

Figura 18: Latch Talks para aprender a integrar apps Java, .NET y PHP con Latch

Por último, el fin de semana del CyberCamp tendrá lugar una serie de talleres gratuitos en los que se podrán hacer proyectos tutorizados, por lo que si quieres aprender bien es el lugar ideal. Después de esto, ya puedes llevarte los 10.000 USD del Latch Plugin Contest.

Saludos Malignos!