Creando una aplicación de blog usando Angular y MongoDB: Inicio de sesión

Spanish (Español) translation by Ana Paulina Figueroa (you can also view the original English article)

Angular es un framework integral para crear aplicaciones móviles y web empleando el mismo código reutilizable. A través del uso de Angular puedes dividir toda la aplicación en componentes reutilizables, lo que facilita el mantenimiento y la reutilización de código.

En esta serie de tutoriales aprenderás cómo comenzar a crear una aplicación web usando Angular con MongoDB como back-end. Para ejecutar el servidor usarás Node.js.

A lo largo de este tutorial construirás una aplicación de blog utilizando Angular, Node.js y MongoDB.

En este tutorial verás cómo comenzar a configurar la aplicación y crear el componente Login (Inicio de sesión).

Primeros pasos

Vamos a comenzar instalando la CLI de Angular.

1	npm install -g @angular/cli

Una vez que hayas instalado la CLI de Angular, crea una carpeta de proyecto llamada AngularBlogApp.

1	mkdir AngularBlogApp
2	cd AngularBlogApp

Desde la carpeta del proyecto, crea una nueva aplicación de Angular usando el siguiente comando:

1	ng new client

Una vez que hayas creado la aplicación client (Cliente), navega a la carpeta del proyecto e instala las dependencias necesarias usando Node Package Manager (npm), o Administrador de Paquetes de Node.

1	cd client
2	npm install

Arranca el servidor cliente usando npm.

npm start

La aplicación deberá ejecutarse en http://localhost:4200/.

Configurando la aplicación

Tu aplicación web de Angular tendrá un componente raíz (root). Crea una carpeta llamada root dentro del directorio src/app. Crea un archivo llamado root.component.html y agrega el siguiente código HTML:

1	<h3>
2	Root Component
3	</h3>

Añade un archivo llamado root.component.ts y agrega el siguiente código:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './root.component.html'
})
export class RootComponent {
  
}

Elimina los archivos app.component.html, app.component.ts, app.component.scss y app.component.spec.ts. Tendrás solamente un archivo llamado app.module.ts dentro de la carpeta src/app.

Importa el RootComponent dentro del archivo app.module.ts.

1	import { RootComponent } from './root/root.component';

Incluye al RootComponent en ngModules y ejecútalo.

@NgModule({
  declarations: [
    RootComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [RootComponent]
})

Guarda los cambios y reinicia el servidor. Ahora el RootComponent aparecerá al cargar la aplicación.

Usaremos Router de Angular para el enrutamiento en nuestra aplicación de blog. Por lo tanto, importa las dependencias relacionadas con el enrutamiento en un nuevo archivo llamado app.routing.ts dentro del directorio src/app.

1	import { RouterModule, Routes } from '@angular/router';
2	import { ModuleWithProviders } from '@angular/core/src/metadata/ng_module';

Define la ruta del enrutamiento junto con los componentes como se muestra a continuación:

1	export const AppRoutes: Routes = [
2	{ path: '', component: LoginComponent }
3	];

Exporta las rutas para crear un módulo con todos los proveedores de enrutamiento.

1	export const ROUTING: ModuleWithProviders = RouterModule.forRoot(AppRoutes);

El archivo app.routing.ts se ve de esta forma:

import { RouterModule, Routes } from '@angular/router';
import { ModuleWithProviders } from '@angular/core/src/metadata/ng_module';

import { LoginComponent } from './login/login.component';

export const AppRoutes: Routes = [
    { path: '', component: LoginComponent }
];

export const ROUTING: ModuleWithProviders = RouterModule.forRoot(AppRoutes);

Como puedes ver en el código anterior, aún no has creado el LoginComponent. Éste se agrega para mayor claridad.

Importa la clase ROUTING en el archivo app.module.ts.

1	import { ROUTING } from './app.routing';

Inclúyela en la sección imports de NgModule.

imports: [
    BrowserModule,
    ROUTING,
    FormsModule
]

Coloca RouterOutlet en la página root.component.html. Aquí es donde se representa el componente de la ruta.

1	<router-outlet></router-outlet>

Crea una carpeta llamada login dentro del directorio src/app. Dentro de la carpeta login, crea un archivo llamado login.component.ts y añade el siguiente código:

import { Component } from '@angular/core';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html'
})
export class LoginComponent {

  constructor() {
      
  }

}

Crea un archivo llamado login.component.html y agrega el siguiente código:

1	<h3>
2	Login Component
3	</h3>

Guarda los cambios anteriores y reinicia el servidor. El LoginComponent será mostrado de acuerdo a las rutas definidas al cargar la aplicación.

Creando el Login Component (Componente de Inicio de sesión)

Ya has sentado las bases para el LoginComponent al configurar la aplicación. Vamos a crear la vista para el LoginComponent usando Bootstrap.

Descarga e incluye el estilo CSS de bootstrap en la carpeta assets e incluye la referencia en la página src/index.html.

1	<link rel="stylesheet" type="text/css" href="./assets/bootstrap.min.css">

Coloca un contenedor alrededor de app-root en la página index.html.

1	<div class="container">
2	<app-root></app-root>
3	</div>

Agrega el siguiente código HTML a la página login.component.html.

<form class="form-signin">
     <h2 class="form-signin-heading">Please sign in</h2>
     <label for="inputEmail" class="sr-only">Email address</label>
        <input name="email" type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
        <label for="inputPassword" class="sr-only">Password</label>
        <input name="password"  type="password" id="inputPassword" class="form-control" placeholder="Password" required>
        <div class="checkbox">
          <label>
            <input type="checkbox" value="remember-me"> Remember me
          </label>
        </div>
    <button class="btn btn-lg btn-primary btn-block" type="button">Sign in</button>
</form>

Crea un archivo llamado login.component.css dentro de la carpeta login y agrega el siguiente estilo CSS.

.form-signin {
  max-width: 330px;
  padding: 15px;
  margin: 0 auto;
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
  margin-bottom: 10px;
}
.form-signin .checkbox {
  font-weight: 400;
}
.form-signin .form-control {
  position: relative;
  box-sizing: border-box;
  height: auto;
  padding: 10px;
  font-size: 16px;
}
.form-signin .form-control:focus {
  z-index: 2;
}
.form-signin input[type="email"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

Modifica el decorador @Component para incluir el estilo CSS.

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})

Guarda los cambios anteriores e intenta cargar la aplicación. El LoginComponent aparecerá con la vista de inicio de sesión.

Creando el servicio de inicio de sesión

El LoginComponent necesitará interactuar con la base de datos para verificar si el usuario que inició sesión es válido o no. Por lo tanto necesitará hacer llamadas a APIs. Vamos a mantener la parte de interacción con la base de datos en un archivo separado llamado login.service.ts.

Crea un archivo llamado login.service.ts y agrega el siguiente código:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class LoginService {

    constructor(private http: HttpClient){

	}
	
	validateLogin(){
		
	}

}

Importa el LoginService en el LoginComponent y agrégalo como proveedor en el decorador del componente.

1	import { LoginService } from './login.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css'],
  providers: [ LoginService ]
})

Añade un método llamado validateLogin en el archivo login.service.ts que hará la llamada a la API. Esto se ve de la siguiente manera:

validateLogin(user: User){
	return this.http.post('/api/user/login',{
		username : user.username,
		password : user.password
	})
}

Como se observa en el código anterior, éste devuelve un observable que será suscrito en el archivo login.component.ts. El archivo login.service.ts se ve de la siguiente manera:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { User } from '../models/user.model';

@Injectable()
export class LoginService {

    constructor(private http: HttpClient){

	}
	
	validateLogin(user: User){
		return this.http.post('/api/user/login',{
			username : user.username,
			password : user.password
		})
	}

}

Implementando la validación de inicio de sesión de usuario

Agrega la directiva ngModel a los elementos de entrada en login.component.html.

 <input name="email" [(ngModel)] = "user.username" type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>

 <input name="password" [(ngModel)] = "user.password" type="password" id="inputPassword" class="form-control" placeholder="Password" required>

Agrega un evento click al botón de inicio de sesión.

1	<button class="btn btn-lg btn-primary btn-block" (click)="validateLogin();" type="button">Sign in</button>

El archivo login.component.html modificado se ve de esta forma:

<form class="form-signin">
     <h2 class="form-signin-heading">Please sign in</h2>
     <label for="inputEmail" class="sr-only">Email address</label>
        <input name="email" [(ngModel)] = "user.username" type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
        <label for="inputPassword" class="sr-only">Password</label>
        <input name="password" [(ngModel)] = "user.password" type="password" id="inputPassword" class="form-control" placeholder="Password" required>
        <div class="checkbox">
          <label>
            <input type="checkbox" value="remember-me"> Remember me
          </label>
        </div>
    <button class="btn btn-lg btn-primary btn-block" (click)="validateLogin();" type="button">Sign in</button>
</form>

Define e inicializa la variable del usuario en el archivo login.component.ts.

public user : User;

constructor(private loginService: LoginService) {
  this.user = new User();
}

El modelo User ha sido definido en la carpeta src/app/models. A continación se muestra cómo se ve:

export class User {
    constructor(){
		this.username = '';
		this.password = '';
	}
	public username;
	public password;
}

Define un método llamado validateLogin que será invocado cuando se haga clic en el botón. El método se ve de la siguiente manera:

validateLogin() {
  if(this.user.username && this.user.password) {
  	this.loginService.validateLogin(this.user).subscribe(result => {
    console.log('result is ', result);
  }, error => {
    console.log('error is ', error);
  });
  } else {
  	alert('enter user name and password');
  }
}

Cuando tanto el nombre de usuario como la contraseña hayan sido introducidos, el método validateLogin se suscribe al método LoginService para validar el inicio de sesión del usuario.

De esta manera se ve el archivo login.component.ts:

import { Component } from '@angular/core';
import { LoginService } from './login.service';
import { User } from '../models/user.model';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css'],
  providers: [ LoginService ]
})
export class LoginComponent {

  public user : User;

  constructor(private loginService: LoginService) {
      this.user = new User();
  }

  validateLogin() {
  	if(this.user.username && this.user.password) {
  		this.loginService.validateLogin(this.user).subscribe(result => {
        console.log('result is ', result);
      }, error => {
        console.log('error is ', error);
      });
  	} else {
  		alert('enter user name and password');
  	}
  }

}

Concluyendo

En esta parte de la serie de tutoriales para crear una aplicación de blog en Angular viste cómo iniciar con la creación de una aplicación web usando Angular. Generaste la estructura básica de la aplicación de Angular y creaste el LoginComponent que permitirá al usuario validar su nombre de usuario y contraseña.

En la siguiente parte de esta serie de tutoriales escribirás la API REST para la validación del inicio de sesión del usuario y crearás el componente home.

El código fuente de este tutorial se encuentra disponible en GitHub.

Háznos llegar tus ideas y sugerencias en los comentarios a continuación.