7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Titanium Mobile

Autenticación de Usuarios con Titanium: Parte 1

Scroll to top
Read Time: 6 mins
This post is part of a series called Titanium User Authentication.
Titanium User Authentication: Part 2

Spanish (Español) translation by César García (you can also view the original English article)

Bienvenidos a la parte 1 de 3 en esta pequeña serie Autenticación de Usuarios con Titanium. Titanium es un compilador cruzado de código libre que te permite crear aplicaciones para iPhone y Android (próximamente blackberry) usando Javascript. ¡Sin necesidad de usar Objective-C! En este tutorial estaremos usando PHP del lado del servidor y una base de datos MySQL.

Paso 1: Crear la Tabla de usuarios e insertar una Fila en ella.

Crea una nueva base de datos o usa una existente, después ábrela. Para ahorrar tiempo en este paso, he incluido el siguiente código SQL que crea la tabla por ti. He llamado a la tabla 'users'. Después de crear la tabla, inserta una fila. He elegido 'rondog' como nombre de usuario y '1234' como contraseña, además mi nombre y correo real. NO OLVIDES ejecutar la función MD5 en el campo de la contraseña cuando insertes una fila. Si tu interfaz de MySQL no te ofrece la posibilidad de ejecutar la función MD5, utiliza este generador md5 y copiar/pegar la cadena de 32 caracteres en el campo de contraseña. Recuerda que no es necesario llenar el 'id', pues es de auto-incremento.

Nota: El código SQL fue exportado desde phpMyAdmin. Si tienes errores usando este código, tendrás que crear la tabla y campos manualmente, usando las configuraciones anteriores.

Paso 2: Crea un Proyecto Nuevo en Titanium

Abre titanium y crea un proyecto nuevo. El nombre que elijas no importa para este tutorial. Una vez que el proyecto haya sido creado, abre el archivo Resources/app.js. Contendrá mucho código que no necesitaremos. Elimina todo excepto la primer sentencia que elige el color de fondo(BackgroundColor).

Ahora necesitamos crear 3 cosas:

  • un grupo de pestañas (TabGroup)
  • una pestaña (Tab)
  • una ventana (Windows)

En seguida agregamos la ventana a la pestaña, y esta ultima al grupo de pestañas.

Hasta aquí hemos hecho la ventana, la pestaña y el grupo de pestañas.

Nota: Antes de compilar, checa la propiedad URL de la ventana. En la carpeta Resources, crea una carpeta llamada 'main_windows' y en esta un archivo JS llamado login.js. La propiedad URL le dice al compilador que use login.js en la ventana. Si no realizas esto, un espantoso error aparecerá en la pantalla del emulador.

Después de una compilación exitosa, tu pantalla debe verse algo así.


Paso 3: Crear la interfaz de Inicio de Sesión

Abre el archivo login.js después de crearlo. Agregaremos 2 campos de texto y un botón.

Compila, ahora tu interfaz debe verse de esta forma. No hay funcionalidad todavía, pero debes ser capaz de ingresar texto.


Paso 4: Lograr que el Botón haga algo

Necesitaremos usar el evento 'click', pero antes de checar si el usuario existe en la base de datos, debemos revisar si no hay errores en los campos. También crearemos un cliente HTTP con la función createHTTPClient().

Expliquemos el código: primero revisamos que ninguno de los campos esté vacío. En caso de que alguno lo esté, mostramos una alerta diciendo que los campos son requeridos. Si los 2 campos están llenos, abrimos nuestro archivo PHP (que crearemos muy pronto) y enviaremos algunos valores. Noten el uso de la función md5HexDigest() para encriptar la contraseña.


Paso 5: Crear el archivo PHP de autenticación.

Con este archivo PHP nuestra app interactúa cuando se presiona el botón. El nombre debe ser el mismo que en el método loginReq.open() del paso anterior. He nombrado al archivo post_auth.php. Remplaza los valores de 'mysql_connect' y 'mysql_select_db' con los valores de tu servidor.


Paso 6: Recibiendo los datos en login.js

Regresemos al archivo login.js. Manejemos un poco los datos que regresa PHP. Coloca este código entre 'var loginReq' y el evento click.

JSON.parse() es parte de la API de Titanium, y vuelve objeto la cadena que json_encode() genera en nuestro archivo PHP. Ejecutemos ahora. Ingresemos nombre de usuario y contraseña. Dependiendo de si los datos son válidos o no, verás el mensaje de bienvenida o el de error. Verifica los dos casos.

Si obtienes un error en la consola de Titanium diciendo algo sobre un error en 'JSON string', significa que estás fallando al seleccionar o conectar con la base de datos. Intenta acceder directamente al archivo post_auth.php desde tu navegar para ver más detalles del error. Yo navegaré al mio vía esta URL http://localhost:8888/post_auth.php

Conclusión

En la parte 1 de esta serie, creamos la base de datos y agregamos un usuario. Después hicimos nuestra interfaz de inicio de sesión usando distintos elementos de Titanium. Entonces le dimos al botón algunas acciones. Nuestro archivo PHP revisaba en la base de datos y si el inicio de sesión era válido, nos regresaba nuestro nombre y correo. Si fallaba, regresaba una cadena indicando que los datos son inválidos. Espero que hayan disfrutado de este tutorial y que no haya sido muy difícil de seguir considerando que usamos 3 diferentes tecnologías: PHP, MySQL y Titanium (Javascript). Estén pendientes de la segunda parte de esta serie donde crearemos una nueva pestaña que permita a los usuarios crear una cuenta.

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.