Vamos a desarrollar desde cero una aplicación para poder realizar gestión de aulas con Ionic y esta va a realizar las siguientes funciones: pantalla de login, validación de usuarios y consulta de permisos, creación de incidencias que podrán ser atendidas por otros perfiles, reserva de aulas mediante calendario, etc.
Hoy en nuestra primera entrada acerca de cómo desarrollar nuestra aplicación vamos a centrarnos en el login y para ello vamos a empezar cómo siempre viendo una imagen de como ha de quedar nuestra aplicación al terminar de realizar los pasos indicados.
Índice
Primeros pasos construyendo la aplicación gestor de aulas Ionic.
Primero y como siempre, vamos a hacer una instalación limpia de la arquitectura inicial de ionic , la versión que vamos a utilizar es la 3.3.0. Abrimos nuestro ventana de comandos, elegimos el directorio donde vamos a instalar la aplicación y ejecutamos la siguiente línea: ionic start gestor-de-aulas blank.
durante el proceso de instalación nos pedirá si queremos crear o mejor dicho sincronizar nuestro nuevo proyecto en https://apps.ionic.io y por supuesto que la respuesta es «Y». Ya que necesitamos disponer del app_id y del app_key. Por lo tanto ya sabes, si no tienes cuenta deberás crear una nueva.
Al terminar la instalación accederemos desde cmd al directorio de esta: cd gestor-de-aulas y una vez en el, vamos a instalar el paquete cloud angular ya que es necesario para que todo funcione correctamente npm install @ionic/cloud-angular –save
Modificando código en el gestor de aulas Ionic.
Abrimos y editamos ./src/app/app.module.ts e insertamos el siguiente código con nuestro editor favorito recordando cambiar la línea ‘app_id’: ‘3fc5409d’ por nuestro id de aplicación. Como siempre, comentar que para mí en estos momentos Atóm es una auténtica maravilla para trabajar.
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 { CloudSettings, CloudModule } from '@ionic/cloud-angular';
const cloudSettings: CloudSettings = {
'core': {
'app_id': '3fc5409d'
}
};
@NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
CloudModule.forRoot(cloudSettings)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
Modificando código de vista en el gestor de aulas Ionic.
Vamos ahora a modificar el script que tenemos en ./src/pages/home/home.html ya que este será el aspecto inicial de la caja de login de nuestra aplicación. El código fuente deberá quedar de este modo.
<ion-header>
<ion-navbar>
<ion-title>
Autenticación de usuario
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<div *ngIf="!auth.isAuthenticated()">
<h4>
Registro o Login
</h4>
<ion-list>
<ion-item>
<ion-label fixed>Email</ion-label>
<ion-input type="text" [(ngModel)]="email"></ion-input>
</ion-item>
<ion-item>
<ion-label fixed>Password</ion-label>
<ion-input type="password" [(ngModel)]="password"></ion-input>
</ion-item>
</ion-list>
<ion-grid>
<ion-row>
<ion-col width-50>
<button ion-button block (click)="register()">Nuevo usuario</button>
</ion-col>
<ion-col width-50>
<button ion-button block (click)="login()">Entrar</button>
</ion-col>
</ion-row>
</ion-grid>
</div>
<div *ngIf="auth.isAuthenticated()">
<h4>
Perfil de usuario
</h4>
<ion-list *ngIf="auth.isAuthenticated()">
<ion-item>
<ion-label fixed>Nombre</ion-label>
<ion-input class="right" type="text" [(ngModel)]="name"></ion-input>
</ion-item>
<ion-item>
<ion-label>Fecha de nacimiento</ion-label>
<ion-datetime displayFormat="MM/DD/YYYY" [(ngModel)]="birthday">
</ion-datetime>
</ion-item>
</ion-list>
<ion-grid>
<ion-row>
<ion-col width-50>
<button ion-button color="secondary" block (click)="save()">Guardar</button>
</ion-col>
<ion-col width-50>
<button ion-button color="dark" block (click)="logout()">Salir</button>
</ion-col>
</ion-row>
</ion-grid>
</div>
</ion-content>Si en este momento intentamos lanzar la aplicación vía navegador o con ionic viewer veremos que da error, eso es porque estamos lanzando llamadas desde la vista home.html al controlador home.ts que todavía no existen. Vamos a ello entonces, editamos ./src/pages/home/home.ts y lo dejamos como se muestra a continuación.
Código de lógica del controlador home.ts.
import { Component } from '@angular/core';
import { NavController, LoadingController, ToastController } from 'ionic-angular';
import { Auth, User, UserDetails, IDetailedError } from '@ionic/cloud-angular';
@Component({
templateUrl: 'home.html'
})
export class HomePage {
public email: string = "";
public password: string = "";
public name: string = "";
public birthday: string = "";
constructor(public navCtrl: NavController, public auth: Auth, public user: User, public loadingCtrl: LoadingController, public toastCtrl:
ToastController) {
this.initProfile();
}
private initProfile() {
if (this.auth.isAuthenticated()) {
this.name = this.user.get('name', '');
this.birthday = this.user.get('birthday', '');
}
}
register() {
let details: UserDetails = {
'email': this.email, 'password':
this.password
};
let loader = this.loadingCtrl.create({
content: "Registrando usuario, por favor espere..."
});
loader.present();
this.auth.signup(details).then(() => {
console.log('User is now registered');
console.log(this.user);
loader.dismiss();
return this.auth.login('basic', {
'email': this.email, 'password':this.password
});
}, (err: IDetailedError<string[]>) => {
loader.dismiss();
for (let e of err.details) {
if (e === 'conflict_email') {
alert('El email del usuario que está intentando dar de alta ya existe.');
} else {
alert('Error al crear un nuevo suario.');
}
}
});
}
login() {
let details: UserDetails = {
'email': this.email, 'password':
this.password
};
let loader = this.loadingCtrl.create({
content: "Logeando al usuario..."
});
loader.present();
this.auth.login('basic', details).then((data) => {
console.log('Login finalizado');
this.initProfile();
loader.dismiss();
console.log(data);
console.log(this.user);
}, (err) => {
loader.dismiss();
alert('Error en las credenciales.');
});
}
save() {
let toast = this.toastCtrl.create({
message: 'El usuario ha sido guardado correctamente.',
position: 'bottom',
duration: 3000
});
toast.present();
this.user.set('name', this.name);
this.user.set('birthday', this.birthday);
this.user.save();
}
logout() {
this.auth.logout();
this.email = '';
this.password = '';
this.name = '';
this.birthday = '';
}
}Para terminar, vamos a mejorar la hoja de estilos ligeramente.
page-home {}
.home-page {
ion-input.right > input {
text-align: right;
}
}
Resultado de la validación de gestor de clases Ionic.
Llegados a este punto ya podemos lanzar la aplicación vía navegador ejecutando el parámetro ionic serve -l y podremos disfrutar de su correcto funcionamiento.
Al igual que si vamos a nuestro dashboard comprobaremos que tras pulsar el botón «Guardar» de nuestra aplicación gestor de clases Ionic, veremos que el perfil se ha dado de alta correctamente.
¿Cómo funciona todo esto?
Vamos a explicar brevemente el funcionamiento. Cuando nosotros pulsamos sobre el botón de «Nuevo usuario», se está ejecutando el siguiente trozo de código.
this.auth.signup(details).then(() => {
console.log('User is now registered');
console.log(this.user);
loader.dismiss();
return this.auth.login('basic', {
'email': this.email, 'password':this.password
});
}Los valores que trae en este caso el objeto details son el email y el password que hemos insertado anteriormente en el formulario. Una vez se ha completado correctamente, lanzamos los valores contra this.auth.login.
Si los valores son correctos y el email del usuario no existe ya en nuestra aplicación, nos aparecerá una pantalla adicional que nos permite guardar datos personales (en este caso el nombre y la fecha de nacimiento). Se puede decir que es una generación de alta en 2 pasos, el primero aplica validaciones y si todo está correcto crea el registro y el segundo guarda datos adicionales.
¿Qué es lo que estamos haciendo en la sección de Perfil de usuario?
Aquí el funcionamiento sigue siendo sencillo, cuando pulsamos el botón «Salir» simplemente estamos cerrando la sesión y se vuelve a mostrar la página principal. En cambio, cuando pulsamos sobre el botón «Guardar» estamos registrando valores adicionales del usuario que hizo login con la llamada a…
save() {
let toast = this.toastCtrl.create({
message: 'El usuario ha sido guardado correctamente.',
position: 'bottom',
duration: 3000
});
toast.present();
this.user.set('name', this.name);
this.user.set('birthday', this.birthday);
this.user.save();
}Y por supuesto todo esto queda registrado en nuestro dashboard.
Hay algunas cosas en las que no he entrado en detalle, como los mensajes a modo flash que aparecen durante el proceso de alta y guardado de datos, los alerts en caso de errores, la recuperación de datos desde apps.ionic.io en caso de que el usuario ya existiera y que los inputs no aparezcan vacíos, la implementación de calendario en el campo fecha de nacimiento, etc… Todo esto es muy sencillo y lo dejo para que tú mismo puedas ver cómo se realiza.
Ah y recuerda!!!, si quieres estar al día acerca de la creación de nuevas entradas, no te olvides de suscribirte al blog.
[wysija_form id=»1″]
Versiones utilizadas, tiempo y dificultad de desarrollo:
Dificultad del ejercicio: Iniciación.
Tiempo de realización: 30 minutos.
Ionic Framework version: 3.3.0
Node versión: 7.5.0
NPM versión: 4.6.1
Cordova versión: 7.0.1
Sistema operativo: Windows 7