Login en el lado cliente con IONIC Framework.

En este post veremos la creación de una página de login con IONIC Framework.

Vamos a partir del siguiente proyecto:

Al momento, tenemos definidas solamente 2 vistas (misPedidos.html y principal.html):

Vamos a crear una nueva vista que llamaremos «login.html» y vamos a ubicarla en la carpeta «templates«, note como nuestra nueva vista «login.html», se divide en las secciones convencionales de IONIC (ion-view, ion-header-bar, ion-content).

Con haber incluído la vista, sólo tenemos la mitad del trabajo, porque debemos especificar en el método config() de nuestro app.js las reglas de navegación y estados para login.html, por lo tanto definimos la regla de navegación como sigue:

Con esta regla estamos especificando un nuevo estado llamado «entrar«, al cual llegaremos a través de la url «/entrar«, cuando un usuario ingrese a esta url, IONIC va a renderizar la vista «templates/login.html«.

Ahora vamos a decirle al motor de rutas de IONIC que nos lleve a la vista «login.html» por defecto, para esto, debemos editar el archivo app.js en el método config(), para especificar este comportamiento.

Hasta el momento, nuestra aplicación, debe tener el siguiente aspecto:

Seguidamente, vamos a definir nuestro formulario de login, básicamente estará compuesto por usuario y clave, además de un botón «entrar«. Para esta labor nos podemos apoyar en la documentación oficial de IONIC para formularios.

El código de «login.html» debe quedar como sigue:

Al visualizar la aplicación funcionando, vemos que tiene la siguiente apariencia:

IONIC Framework, utiliza AngularJS como plataforma de desarrollo, es decir, disponemos de un modelo (MVC – Modelo, Vista, Controlador):

Modelo: Son los objetos de datos o de lógica con los que interactúa nuestra aplicación, en este caso, el modelo de la aplicación corresponde a un objeto con la siguiente definición:

Objeto: login

• nombre (string)
• clave (string)

Es decir, nuestro modelo se componte de un objeto que se llama Login, este objeto, tiene 2 atributos: nombre y clave.

Vista: Es el elemento que nos permite mostrarle componentes visuales a los usuarios finales, es la presentación como tal, en nuestro caso la vista es «/templates/login.html«, generalmente la vista contiene código HTML que es lo que finalmente va a visualizar el usuario, como mostramos en este framento de la vista «login.html»:

Controlador: Es el componente que nos permite unir la vista con el modelo, generalmente, el controlador recibe los eventos que provienen de la vista, es decir, cuando un usuario hace click sobre un botón, el origen de este evento es la vista, posteriormente, el controlador toma este evento y despacha alguna lógica/programación sobre el modelo. No te que la comunicación entre el controlador y la vista es bi-direccional, es decir, la vista le envía mensajes (eventos) al controlador, este, a su vez, actualiza el modelo y refresca/actualiza la vista.

Hasta el momento en nuestra aplicación, disponemos solamente del componente de La Vista, a continuación, vamos a definir el controlador.

Lo primero que debemos hacer, es crear el archivo controllers.js, donde vamos a guardar todos los controladores de nuestras vistas.

Actualmente, en nuestra aplicación, tenemos un módulo llamado «starter»:

Como necesitamos crear controladores para que se comuniquen las vistas, vamos a crear un nuevo módulo, en este caso, vamos a denominarlo «starter_controllers«. AngularJS nos permite definir una estructura modular, es decir, basada en módulos que inter-operan entre sí, en este caso, tenemos 2 módulos: «starter» y «starter_controller», el módulo «starter» necesita del módulo «starter_controller», con esto estamos especificando una relación de dependencia entre ambos módulos:

De la misma forma que un automóvil necesita de las llantas, el módulo starter necesita del módulo starter_controller, un automóvil sin llantas no anda, el módulo starter, sin el módulo starter_controller no va a funcionar.

A nivel de código, las dependencias (automóvil->llanta) las especificamos así:

En este caso «starter» es igual a «automóvil» y «starter_controller» es igual a «llantas», en el sentido de relación de dependencia.

Para continuar de forma adecuada con el desarrollo de nuestra aplicación de login, debemos incorporar el archivo controller.js en el index.html:

Vamos a definir un controlador para la vista «login.html»:

En el código anterior, vemos que el módulo «starter_controllers» tiene un controlador llamado «loginController», como podemos ver, el loginController, necesita de un objeto denominado $scope.

Anteriormente, dijimos que la vista se actualiza con la información que hay en el controller, para que esto sea posible, el objeto $scope, es quien tiene la posibilidad de actualizar los datos de la vista, es decir, nuestro modelo de datos (un objeto llamado login –que aún no lo hemos definido-) contiene los atributos que podemos visualizar en la vista, este objeto login, al pertenecer al $scope va a actualizar la vista automáticamente.

Ya tenemos la vista y el controlador, vamos a definir el modelo. Este modelo lo definimos dentro del objeto $scope, para que la vista se actualice automáticamente con la información que tengamos en el modelo, es decir, en el objeto login.

Ahora que tenemos los 3 componentes (modelo, vista y controlador), sólo nos queda interconectarnos.

Inicialmente, vamos a interconectar la vista con el controlador, para esto, editamos las reglas de navegación en el archivo app.js, esto es necesario porque en una aplicación real vamos a tener muchas vistas y vamos a tener muchos controlador. ¿Qué controlador va con qué vista?:

Ya tenemos la vista, tenemos el controlador, tenemos el modelo, también hemos conectado la vista con el controlador, ahora vamos a terminar la vista, para que se conecte con el modelo, mediante el controlador, a través del objeto $scope.

Finalmente, vamos a definir el método ingresar() del controller. Este método lo especificamos en el objeto $scope para que tenga visibilidad desde la vista:

Ahora, debemos decirle a la vista que invoque el método ingresar(), cuando se haga click en el botón «Ingresar»:

De esta forma, cuando hagamos click en el botón «Ingresar», se invocará el método ingresar() que definimos en el $scope del controller «loginController».