Share
Bienvenido a la tercera parte de la autenticación de usuarios con Titanium. 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. Utilizaremos 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. En la tercera parte, cubriremos agregar una nueva ventana y pasarle los resultados de nuestra base de datos cuando un usuario inicie sesión utilizando eventos personalizados. Esta nueva ventana representará su interfaz de "Conectado". Si aún no lo has leído, te recomiendo que comiences con la primera parte..
En la primera parte creamos la base de datos 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, tras un inicio de sesión exitoso, devolvió nuestro nombre y correo electrónico. Si el 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 creamos una nueva pestaña en la pantalla principal. Esta pestaña cambió nuestra vista a una vista de "crear cuenta" que permitió al usuario registrarse. En la tercera parte haremos una nueva ventana cuando el usuario inicie sesión y le pasará algunos de los datos del usuario. Esta ventana es, en última instancia, su interfaz de "Conectado".
Permite abrir login.js y desplazarse hacia abajo a nuestro método loginReq.onload (). Vamos a deshacernos de la alerta que tenemos actualmente al iniciar sesión correctamente y reemplazarla con esta:
Accentsconagua
loginReq.onload = function () var json = this.responseText; respuesta var = JSON.parse (json); if (response.logged == true) username.blur (); password.blur (); Ti.App.fireEvent ('grantEntrance', name: response.name, email: response.email); win.close (); else alert (response.message); ; Entonces, lo que hicimos aquí fue reemplazar nuestra alerta con un evento que "disparamos". Desencadenamos un evento llamado 'grantEntrance' desde que el inicio de sesión fue exitoso. También estamos pasando dos objetos: nombre y correo electrónico. Establecemos el nombre del objeto igual a lo que fue la entrada del usuario cuando crearon su cuenta (esta información es devuelta por nuestro archivo post_auth.php). Lo mismo ocurre con su correo electrónico. También hemos llamado al método blur () para eliminar el cursor de cualquiera de los campos de texto. Finalmente, cerramos la ventana de inicio de sesión..
No compile todavía, ya que realmente no notará nada si lo hace. Para continuar, necesitamos agregar un detector de eventos. Lo haremos en los próximos pasos..
Abre app.js. Queremos crear una nueva ventana y una nueva pestaña. En los tutoriales anteriores, agregamos las pestañas de inmediato usando el método addTab (). En este caso, no lo añadiremos de inmediato. He llamado a mi ventana "Inicio de sesión" 'principal'. Simplemente agregue la nueva ventana y pestaña debajo de nuestra línea de grupo de pestañas en app.js:
Titanium.UI.setBackgroundColor ('# fff'); var tabGroup = Titanium.UI.createTabGroup (); var main = Titanium.UI.createWindow (); var mainTab = Titanium.UI.createTab (); 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 (); Tu app.js ahora debería reflejar lo anterior. Aún así, no compiles ya que no verás nada. Compilaremos a continuación, prometemos!
En login.js 'disparamos' nuestro evento 'grantEntrance'. Queremos hacer un detector de eventos para escuchar ese evento. Agregue esto al final de nuestro archivo app.js:
Ti.App.addEventListener ('grantEntrance', function (event) main.tabBarHidden = true; main.title = 'Welcome' + event.name; main.url = 'main_windows / main.js'; main.name = event .name; main.email = event.email; mainTab.window = main; tabGroup.addTab (mainTab); tabGroup.removeTab (loginTab); tabGroup.removeTab (accountTab);); Entonces, en este punto, vamos a establecer algunas propiedades en nuestra ventana 'principal'. Primero, oculte la barra de pestañas en la parte inferior ya que ya no necesitamos la pestaña de inicio de sesión y cuenta. Establecemos el título superior para que diga "Bienvenido a Ronnie Swietek" (o el nombre que ingresaste al crear la cuenta). Establecimos la propiedad URL para usar el archivo main.js. Creamos dos propiedades llamadas nombre y correo electrónico para que podamos llamarlas en cualquier momento en nuestra interfaz de "Inicio de sesión". Configuramos nuestra propiedad de ventana mainTab a nuestra ventana, main. Finalmente, finalmente agregamos nuestra pestaña y eliminamos loginTab así como accountTab ya que ya no son necesarios.
Antes de compilar, asegúrese de haber creado un archivo main.js y guárdelo en la carpeta main_windows. Ahora puedes seguir adelante y compilar. Cuando compile e inicie sesión, debería ver una pantalla en blanco, excepto el título en la parte superior que debe contener su nombre.
Cuando inicie sesión, debería ver el objeto que creamos mostrar en la consola de titanio. Mi consola de titanio dice esto cuando inicio mi sesión:
email = "[email protected]"; name = "Ronnie Swietek";
Abre main.js. En este momento debería estar en blanco, pero adelante, inserte esto, guarde y compile:
var win = Titanium.UI.currentWindow; var msg = Titanium.UI.createLabel (text: "Ha iniciado sesión correctamente. Al iniciar sesión, le devolvimos su dirección de correo electrónico y su nombre. Puede pasar todo tipo de datos simplemente creando objetos en su ventana. \ n \ nEl correo electrónico es: \ n "+ win.email +" \ n \ ntu nombre es: \ n "+ win.name, top: 10, left: 10, width: 300, height: 'auto'); win.add (msg);
Cuando inicie sesión, debería ver el texto que configuramos en nuestra etiqueta. También hemos accedido a los objetos que creamos a través de 'win.objectName'. En nuestro caso, win.name y win.email.
En la parte 3 de esta serie, aprendimos sobre eventos personalizados y cómo pasar datos a ventanas. Las posibilidades son infinitas en este punto. Depende de usted crear algo grande con su conocimiento de autenticación de usuario. Realmente espero que hayan disfrutado tomando estos tutoriales tanto como yo disfruté haciéndolos. Nos vemos de nuevo en el futuro.!
