Bienvenidos al cuarto y último artículo de nuestra Introducción a Ionic Framework. En este artículo comenzaremos un nuevo proyecto en blanco en donde realizaremos un Login de usuario y navegaremos entre diferentes pantallas usado AngularJS.
Introducción
Ionic Framework como toda herramienta de programación cuenta con una serie de funciones preestablecidas en donde nos sirven para navegar entre pantallas, así como también verificar datos que fueron ingresados en los campos de texto de nuestro formulario.
Iniciando nuestro proyecto
Lo primero que debemos de hacer ya que se trata de un proyecto nuevo es crearlo. Como hablamos en los post anteriores para crear un nuevo proyecto debemos de abrir una terminal de nuestro sistema operativo, posicionarnos en la carpeta donde queramos generarlo y ejecutar el comando ionic start loginProject blank, en donde nuestro proyecto tendrá el nombre de loginProject y será del tipo blank. Luego de este paso debemos de iniciar nuestra aplicación situándonos en la carpeta loginProject recientemente generada y ejecutar el comando ionic serve. Una vez hagamos esto se nos abrirá una pestaña nueva en el navegador y nos mostrará una página con el título Ionic Blank.
Creando nuevas páginas
La consola de Ionic (CLI) cuenta con una serie de comandos que nos permite generar las páginas que vamos a necesitar en nuestra aplicación. Lo que debemos de hacer es posicionarnos en la carpeta de nuestro proyecto loginProject y ejecutar el comando ionic g page <nombre de la pagina>, de esta manera nos genera una página con el nombre que nosotros queramos. En nuestro caso generaremos 3 páginas nuevas llamadas login, register y welcome, por lo que las lineas que debemos de ejecutar son las siguientes:
[andres@localhost loginProject]$ ionic g page login [OK] Generated a page named login! [andres@localhost loginProject]$ ionic g page register [OK] Generated a page named register! [andres@localhost loginProject]$ ionic g page welcome [OK] Generated a page named welcome!
Una vez realicemos esto debemos de abrir nuestro proyecto en un editor de texto como Atom o Sublime Text y verificar que las páginas se crearon correctamente, esto lo podemos hacer situándonos en la carpeta llamada pages la cual esta ubicada en la ruta loginProject/src/pages y verificando que dentro existen 3 carpetas con los nombres respectivos.
Configurando nuestras páginas
En este punto realizaremos la configuración de nuestras páginas así como también la navegación entre las mismas.
Primero que nada debemos de notificarle a Ionic que generamos tres nuevas vistas en nuestro proyecto para que puedan ser utilizadas. Para realizar esto debemos de editar el archivo app.module.ts que se encuentra en al ruta loginProject/src/app/app.module.ts importando cada una de nuestras páginas indicando su ubicación y a su vez debemos de agregar sus nombres en los Array llamados declarations y entryComponents, por lo que nuestro archivo completo quedaría de la siguiente manera.
import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { LoginPage } from '../pages/login/login';
import { RegisterPage } from '../pages/register/register';
import { WelcomePage } from '../pages/welcome/welcome';
@NgModule({
declarations: [
MyApp,
HomePage,
LoginPage,
RegisterPage,
WelcomePage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
LoginPage,
RegisterPage,
WelcomePage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {} Diseñando nuestras vistas
Es este apartado diseñaremos las 3 vistas que agregamos recientemente y también la página de inicio.
Pagina de inicio (Home)
En esta vista colocaremos 2 botones los cuales nos llevaran a la parte de registro y de login de la aplicación.
Lo que haremos a continuación es asignarle 1 función a cada uno de los botones para luego mediante AngularJS cuando se presione alguno de ellos se muestre la página correspondiente.
Para realizar esto debemos de modificar el archivo home.html que se encuentra en la ruta loginProject/src/pages/home/home.html y colocar lo siguiente.
<ion-header> <ion-navbar> <ion-title> Pagina de inicio </ion-title> </ion-navbar> </ion-header> <ion-content padding> <button block ion-button (click)="login()">INICIAR SESION</button> <button block ion-button (click)="register()">REGISTRARSE</button> </ion-content>
Página de Login
En esta página mostraremos 2 campos de texto llamados username y password y un botón que nos permitirá llamar a una función en donde mas adelante validaremos si son determinados valores para realizar una determinada acción.
El archivo que debemos de modificar se llama login.html y se encuentra en la ruta loginProject/src/pages/login/login.html.
<ion-header> <ion-navbar> <ion-title>Login</ion-title> </ion-navbar> </ion-header> <ion-content padding> <ion-list> <ion-item> <ion-label floating>Username</ion-label> <ion-input type="text" value="" #username></ion-input> </ion-item> <ion-item> <ion-label floating>Password</ion-label> <ion-input type="password" #password></ion-input> </ion-item> </ion-list> <div padding> <button block ion-button (click)="login()" >INICIAR SESIÓN</button> </div> </ion-content>
Página de Registro
Esta vista será igual que la de Login con la única diferencia en el nombre del botón ya que no se va a realizar ninguna acción en la misma.
Lo que debemos de realizar es editar el archivo llamado register.html que esta ubicado en loginProject/src/pages/register/register.html colocando lo mismo que en el caso anterior pero modificando el botón, el cual quedaría de la siguiente manera:
<button block ion-button>CREAR CUENTA</button>
Página de Bienvenido
En es página simplemente le daremos un mensaje de bienvenida luego de que el usuario ingrese satisfactoriamente con los datos correctos.
Lo que debemos de hacer es modificar el archivo welcome.html que se encuentra en la ruta loginProject/src/pages/welcome/welcome.html colocando lo que se indica a continuación.
<ion-header> <ion-navbar> <ion-title>Bienvenido</ion-title> </ion-navbar> </ion-header> <ion-content padding> <h1>¡¡Bienvenido a nuestra aplicación!!</h1> </ion-content>
Navegación y funciones
En este punto realizaremos la navegación entre las vistas mediante las funciones que le hemos asignado a los botones anteriormente en el diseño de las páginas.
Página de inicio
En este apartado debemos de crear dos funciones con los nombres de login y register que fueron las que declaramos que llamarían los botones de la vista, para realizar esto debemos de editar el archivo home.ts que esta en la ruta loginProject/src/pages/home/home.ts en donde tendremos que importar las páginas de LoginPage y RegisterPage para poder hacer uso de las mismas y poder retornar la vista correspondiente.
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { LoginPage } from '../login/login';
import { RegisterPage } from '../register/register';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController) {}
login(){
this.navCtrl.push(LoginPage);
}
register(){
this.navCtrl.push(RegisterPage);
}
} De esta manera al presionar el botón que llama a la función login va a mostrar la página LoginPage al igual que la función register va a llamar a la vista RegisterPage.
Página de Login
En este apartado viene la parte mas interesante que es en donde se compara y se validan los datos ingresados para luego dependiendo si son correctos o no realizar determinada acción.
Para hacer esto debemos de modificar el archivo login.ts ubicado en la ruta loginProject/src/pages/login/login.ts en donde debemos hacer un importación de la clase ViewChild la cual nos permite obtener el valor que hemos ingresado en el campo usuario y contraseña para que luego sean validados. A su vez necesitaremos importar la clase AlertController la cual nos permitirá mostrar un mensaje de error si el usuario coloco los datos de forma incorrecta, así como también deberemos de importar la página que creamos anteriormente llamada WelcomePage para mostrarla luego de que los datos sean correctos.
Como ejemplo en este caso vamos a corroborar que si el usuario es igual a «admin» y la contraseña es igual a «admin» vamos a validar los campos y a mostrar la vista de WelcomePage, por lo que el código quedaría de la siguiente manera.
import { Component, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { AlertController } from 'ionic-angular';
import { WelcomePage } from '../welcome/welcome';
@IonicPage()
@Component({
selector: 'page-login',
templateUrl: 'login.html',
})
export class LoginPage {
@ViewChild('username') user;
@ViewChild('password') password;
constructor(public navCtrl: NavController, public navParams: NavParams, public alertCtrl: AlertController) {}
ionViewDidLoad() {
console.log('ionViewDidLoad LoginPage');
}
login(){
if(this.user.value == "admin" && this.password.value == "admin"){
this.navCtrl.push(WelcomePage);
}else{
let alert = this.alertCtrl.create({
title: 'Datos incorrectos',
subTitle: 'Los datos ingresados son incorrectos.',
buttons: ['OK']
});
alert.present();
}
}
} De esta manera dejamos todo configurado para que dependiendo si se ingresan los datos correctos realice una acción y si no realice otro.
Conclusión
En este post vimos que en Ionic Framework es relativamente fácil generar una navegación entre páginas utilizando AngularJS así como también obtener los valores de los campos ingresados en los formularios y validar si son correctos o no. Solamente es necesario importar una serie de clases para poder hacer llamado a de las funciones de las mismas y asi dejar nuestra aplicación corriendo.
Espero que les haya gustado esta serie de post que hemos creado relacionado a la Introducción de Ionic Framework, ahora que ya tienes los conocimientos básicos puedes seguir aprendiendo sobre Ionic consultando las guías oficiales.