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”.

Anuncios

9 thoughts on “Login en el lado cliente con IONIC Framework.

  1. Una alternativa para resolver el problema del CORS –Cross Origin Resource Sharing en php es incluyendo las siguientes lineas al inicio.

    // Allow from any origin
    if (isset($_SERVER[‘HTTP_ORIGIN’])) {
    header(“Access-Control-Allow-Origin: {$_SERVER[‘HTTP_ORIGIN’]}”);
    header(‘Access-Control-Allow-Credentials: true’);
    header(‘Access-Control-Max-Age: 86400’); // cache for 1 day
    }

    // Access-Control headers are received during OPTIONS requests
    if ($_SERVER[‘REQUEST_METHOD’] == ‘OPTIONS’) {

    if (isset($_SERVER[‘HTTP_ACCESS_CONTROL_REQUEST_METHOD’]))
    header(“Access-Control-Allow-Methods: GET, POST, OPTIONS”);

    if (isset($_SERVER[‘HTTP_ACCESS_CONTROL_REQUEST_HEADERS’]))
    header(“Access-Control-Allow-Headers: {$_SERVER[‘HTTP_ACCESS_CONTROL_REQUEST_HEADERS’]}”);

    exit(0);
    }

    Me gusta

    • tienes que hacer un div que te contenga todo el contenido los imputs y el boton, o ensu defecto el div con la clase ” card” si lo has hecho asi, y luego en ese div tienes que colocar ng-controller=”loginController” y listo amigo

      Me gusta

  2. Hola Jose,

    Buen post, estoy buscando información de angular y mapas, no se si me puedas ayudar, quisiera poder obtener mi posición en un mapa y de igual manera dibujar unas ubicaciones obtenidas de la base de datos, en un rango de distancia seteado en mi app. Quisiera conocer un poco mas al respecto. O en lo que me puedas ayudar seria de gran ayuda. (los blog en español son muy pocos)

    Gracias.

    Me gusta

  3. Hola jose como estas, estoy arrancando con ionic, quisiera saber si tenés algún repositorio github o algo para poder bajar los ejemplos y de ahí poder hacer pruebas y entender mas como trabajan los servicios y controllers, desde ya muchas gracias

    Me gusta

  4. buenas tardes, estoy comenzando con Ionic v1 y lo que busco es que mi aplicación después de una vista de login me muestre diferentes menús para cada tipo de usuario…y le agradecería mucho si me diera alguna solución, perdone las molestias y gracias.

    Me gusta

  5. Buenas noches; felicitaciones por tan esmerado tutorial; requiero usar un logueo para cargar un menu principal con varias opciones, (una de ellas una calculadora). Le agradeceria la posibilidad de suministrarme informacion al respeto.

    Me gusta

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s