Share
Bienvenido a la parte 2 de nuestra serie de 3 partes sobre autenticación de usuarios con Titanium Mobile. Titanium es un compilador cruzado de código abierto que te permite escribir aplicaciones para iPhone y Android (¡pronto también para Blackberry!) Usando Javascript. No se requiere Objective-C! Usaremos PHP como el código del lado del servidor y mi base de datos será MySQL. Para este ejemplo, estoy usando MAMP para desarrollar localmente. Recomiendo encarecidamente que repase la primera parte de esta serie antes de continuar, si aún no lo ha hecho. Sin embargo, alternativamente, puede descargar la fuente de la parte 1, crear la tabla de la base de datos y configurar las conexiones de la base de datos de PHP por su cuenta antes de saltar a este tutorial si desea.
En la parte 1, configuramos la base de datos para nuestra aplicación y agregamos un usuario. Luego creamos nuestra interfaz de inicio de sesión mediante la creación de un grupo de pestañas, una pestaña y una ventana. Entonces le dimos a nuestro botón de inicio de sesión algunas acciones. Nuestro archivo PHP consultó nuestra base de datos y, al iniciar sesión correctamente, devolvió nuestro nombre y correo electrónico. Si la autenticación de inicio de sesión falló, devolvimos una cadena simplemente indicando un nombre de usuario y / o contraseña no válidos. En la parte 2, crearemos una nueva pestaña en la pantalla principal que le permite a un usuario crear una nueva cuenta y luego iniciar sesión.
Abra app.js y cree la ventana y pestaña de la cuenta debajo de nuestra secuencia de comandos de inicio de sesión. También tenga en cuenta que eliminé la propiedad tabBarHidden en la ventana de inicio de sesión que hicimos en la parte 1. Eliminar esa propiedad nos permite ver las pestañas en la parte inferior del teléfono. También hemos añadido la ficha de cuenta al grupo de pestañas..
Accentsconagua
Titanium.UI.setBackgroundColor ('# fff'); var tabGroup = Titanium.UI.createTabGroup (); var login = Titanium.UI.createWindow (title: 'Demo de autenticación de usuario', url: 'main_windows / login.js'); var loginTab = Titanium.UI.createTab (title: "Login", window: login); var account = Titanium.UI.createWindow (title: 'New Account', url: 'main_windows / account.js'); var accountTab = Titanium.UI.createTab (title: 'New Account', window: account); tabGroup.addTab (loginTab); tabGroup.addTab (accountTab); tabGroup.open (); La propiedad de la URL en la var de la cuenta le dice al compilador que use account.js como nuestra ventana. Si omite esta parte, Titanium lanzará un error rojo feo en el emulador. Después de una compilación exitosa, su pantalla debería verse así:
Tradicionalmente, verías que la barra de pestañas en la parte inferior tiene iconos. Bueno, con Titanium, eso también es súper fácil. Simplemente usa la propiedad del icono en cada pestaña. Por ejemplo:
var accountTab = Titanium.UI.createTab (title: 'New Account', icono: 'images / account_icon.png', window: account);
Cree un nuevo archivo y asígnele el nombre account.js y guárdelo en su carpeta Resources / main_windows. Este es el mismo lugar donde guardamos nuestro archivo login.js en la parte 1.
var win = Titanium.UI.currentWindow; / * * Interfaz * / var scrollView = Titanium.UI.createScrollView (contentWidth: 'auto', contentHeight: 'auto', top: 0, showVerticalScrollIndicator: true, showHorizontalScrollIndicator: false)); win.add (scrollView); var username = Titanium.UI.createTextField (color: '# 336699', top: 10, izquierda: 10, ancho: 300, altura: 40, hintText: 'Nombre de usuario', keyboardType: Titanium.UI.KEYBOARD_DEFAULT, returnKeyType: Titanium .UI.RETURNKEY_DEFAULT, borderStyle: Titanium.UI.INPUT_BORDERSTYLE_ROUNDED); scrollView.add (nombre de usuario); var password1 = Titanium.UI.createTextField (color: '# 336699', arriba: 60, izquierda: 10, ancho: 300, altura: 40, texto de sugerencia: 'Password', passwordMask: true, keyboardType: Titanium. , returnKeyType: Titanium.UI.RETURNKEY_DEFAULT, borderStyle: Titanium.UI.INPUT_BORDERSTYLE_ROUNDED); scrollView.add (contraseña1); var password2 = Titanium.UI.createTextField (color: '# 336699', parte superior: 110, izquierda: 10, ancho: 300, altura: 40, texto de sugerencia: 'Password Again', passwordMask: true, keyboardType: Titanium. KEYBOARD_DEFAULT, returnKeyType: Titanium.UI.RETURNKEY_DEFAULT, borderStyle: Titanium.UI.INPUT_BORDERSTYLE_ROUNDED); scrollView.add (contraseña2); var names = Titanium.UI.createTextField (color: '# 336699', parte superior: 160, izquierda: 10, ancho: 300, altura: 40, texto de anotación: 'Nombre', keyboardType: Titanium.UI.KEYBOARD_DEFAULT, returnKeyType: Titanium .UI.RETURNKEY_DEFAULT, borderStyle: Titanium.UI.INPUT_BORDERSTYLE_ROUNDED); scrollView.add (nombres); var email = Titanium.UI.createTextField (color: '# 336699', parte superior: 210, izquierda: 10, ancho: 300, altura: 40, texto de anotación: 'email', keyboardType: Titanium.UI.KEYBOARD_DEFAULT, returnKeyType: Titanium .UI.RETURNKEY_DEFAULT, borderStyle: Titanium.UI.INPUT_BORDERSTYLE_ROUNDED); scrollView.add (correo electrónico); var createBtn = Titanium.UI.createButton (title: 'Create Account', top: 260, width: 130, height: 35, borderRadius: 1, font: fontFamily: 'Arial', fontWeight: 'bold', fontSize: 14); scrollView.add (createBtn);
De acuerdo, este bloque de código es realmente muy fácil de entender, pero hace mucho por nosotros. Con solo mirar nuestros nombres de variables, es bastante fácil descifrar lo que está sucediendo aquí. Creamos 5 campos:
También hicimos nuestro botón 'crear cuenta'.
También notará la var en la parte superior llamada scrollView. Agregar los objetos a una vista de desplazamiento permite que la vista sea desplazable, de modo que cuando el teclado se desliza hacia arriba, no se superponen nuestros campos de texto.
Sigue adelante y compila. Tras una compilación exitosa, su pantalla debería tener este aspecto después de cambiar a la pestaña de la cuenta. El botón crear cuenta todavía no hace nada, pero juegue con la selección de campos de texto y vea cómo funciona la vista de desplazamiento.
Ahora necesitamos crear un detector de eventos en nuestro botón para que cuando hagan clic en 'crear cuenta', envíen los datos, así como algunas validaciones..
var testresults; función checkemail (emailAddress) var str = emailAddress; var filter = / ^ ([A-Za-z0-9 _ \ - \.]) + \ @ ([A-Za-z0-9 _ \ - \.]) + \. ([A-Za-z] 2,4) $ /; if (filter.test (str)) testresults = true; else testresults = false; return (testresults); ; var createReq = Titanium.Network.createHTTPClient (); createReq.onload = function () if (this.responseText == "No se pudo insertar" || this.responseText == "Ese nombre de usuario o correo electrónico ya existe") createBtn.enabled = true; createBtn.opacity = 1; alerta (this.responseText); else var alertDialog = Titanium.UI.createAlertDialog (title: 'Alert', mensaje: this.responseText, buttonNames: ['OK']); alertDialog.show (); alertDialog.addEventListener ('clic', función (e) win.tabGroup.setActiveTab (0);); ; createBtn.addEventListener ('click', function (e) if (username.value! = "&& password1.value! =" && password2.value! = "&& names.value! =" && email.value! = ") if (password1.value! = password2.value) alert ("Sus contraseñas no coinciden"); else if (! checkemail (email.value)) alert ("Ingrese un correo electrónico válido"); else alert ("Todo se ve bien, así que envíe los datos"); else else alert ("Todos los campos son obligatorios");); Comenzando desde la parte superior, el método checkEmail () es una función simple que usa Expresión Regular para verificar si el correo electrónico que ingresa el usuario tiene el formato correcto. Creamos un nuevo HTTPClient que se utilizará para enviar nuestros datos a nuestro archivo PHP.
En el evento de clic, primero verificamos si algún campo está vacío. Si es así, alértelos diciendo "Todos los campos son obligatorios". Nuestra siguiente verificación es para ver si los dos campos de contraseña son los mismos. Si no lo están, alértelos diciendo "Sus contraseñas no coinciden". Nuestra comprobación final es para comprobar si la dirección de correo electrónico es válida. Si no es así, alértelos diciendo "Por favor ingrese un correo electrónico válido".
Una vez que se valide el formulario, se alertará "Todo se ve bien, así que envíe los datos". Continúe, compile y pruebe enviar el formulario sin valores, contraseñas no coincidentes y un correo electrónico no válido. Al enviar un formulario válido, verá la siguiente alerta:
Continúe y elimine la línea "Todo se ve bien, así que envíe los datos". Necesitamos reemplazarlo con los métodos open () y send ()..
createBtn.addEventListener ('click', function (e) if (username.value! = "&& password1.value! =" && password2.value! = "&& names.value! =" && email.value! = ") if (password1.value! = password2.value) alert ("Sus contraseñas no coinciden"); else if (! checkemail (email.value)) alert ("Ingrese un correo electrónico válido"); else createBtn.enabled = false; createBtn.opacity = 0.3; createReq.open ("POST", "http: // localhost: 8888 / post_register.php"); var params = username: username.value, password: Ti .Utils.md5HexDigest (password1.value), names: names.value, email: email.value; createReq.send (params); else else alert ("Todos los campos son obligatorios");); Entonces, al reemplazar esa línea, deshabilitamos el botón 'crear cuenta' y establecemos la opacidad en 30%. Luego tomamos el HTTPClient que creamos y llamamos al método open (). Está apuntando a un archivo PHP que haremos en el siguiente paso. Luego creamos un objeto params para contener todos los datos del formulario. Observe que estoy ejecutando un cifrado MD5 en el campo de contraseña. El paso final es llamar al método send () y pasarlo a nuestro objeto params.
Este archivo será el archivo PHP con el que hablará nuestra aplicación cuando presione el botón 'crear cuenta'. El nombre debe reflejar el nombre en nuestro método createReq.open () en el paso anterior. He nombrado el mío post_register.php. Reemplace mis configuraciones mysql_connect y mysql_select_db con sus configuraciones de conexión.
0) echo "Ese nombre de usuario o correo electrónico ya existe"; else $ insert = "INSERT INTO users (nombre de usuario, contraseña, nombre, correo electrónico) VALUES ('". $ username. "', '". $ password. "', '". $ names. "', '" . $ email. "')"; $ query = mysql_query ($ insert); if ($ query) echo "Gracias por registrarse. Ahora puede iniciar sesión."; else echo "Error al insertar"; ?> Así que aquí nos conectamos a nuestra base de datos y seleccionamos la base de datos llamada "prueba" (ese nombre cambiará dependiendo del nombre de su base de datos, obviamente). Puede ver que nuestras variables $ _POST reflejan los nombres que configuramos en el objeto params en nuestro último paso. Esa parte es crucial. Luego vemos si el nombre de usuario o la dirección de correo electrónico que ingresaron ya existe. Si no es así, inserte los datos en la base de datos. De acuerdo, ¡no compilemos todavía! Vamos a dar el siguiente paso, lo prometo..
Está bien volver a account.js. Vamos a hacer un manejo de datos para cuando nuestro PHP devuelve algo. Coloque este código debajo de var createReq y encima de nuestro evento de clic:
createReq.onload = function () if (this.responseText == "No se pudo insertar" || this.responseText == "Ese nombre de usuario o correo electrónico ya existe") win.remove (superposición); alerta (this.responseText); else var alertDialog = Titanium.UI.createAlertDialog (title: 'Alert', mensaje: this.responseText, buttonNames: ['OK']); alertDialog.show (); alertDialog.addEventListener ('clic', función (e) win.tabGroup.setActiveTab (0);); ; Entonces, cuando PHP devuelve algo, si 'this.responseText' es igual a "Insertar error" O "Ese nombre de usuario o correo electrónico ya existe", elimine la ventana de superposición (para que puedan volver a ingresar la información y enviarla) y alértelos .responseText '.
Al registrarse con éxito, avise con "Gracias por registrarse. Ahora puede iniciar sesión" (definido en nuestro archivo post_register.php). También agregamos un detector de eventos al botón OK para que al hacer clic en él, nos lleve automáticamente a la pantalla de inicio de sesión.
Si la alerta es un mensaje confuso acerca de mysql_connect y / o acceso denegado, entonces debe verificar su configuración de conexión de mysql en el PHP.
En la parte 2 de esta serie, agregamos ventanas con pestañas con las que puede cambiar. Luego creamos un nuevo formulario en el que un usuario puede ingresar datos y enviarlos. Al enviar, hicimos una validación de formulario y luego nuestro PHP devolvió un mensaje basado en si los datos estaban en uso y, si no, lo insertamos con éxito. Espero que hayan disfrutado leyendo este tutorial de mini series tanto como yo disfruté escribiéndolo.!
