Desafío #6: 🔥 Apliquemos todo

En el anterior desafío conocimos como hacer uso de un servicio, ahora apliquemos todo lo aprendido, construyendo una historia o tu experiencia en NgGirls.

A veces escribimos historias, poemas, pensamientos y experiencias en un diario o agenda y en esta gran época moderna con tantos recursos digitales, tenemos un gran abanico de opciones para compartirlos. Que tal si te digo que es posible crear un App, donde puedes narrar tú experiencia, o una historia que quieras ir generando, por medio de un formulario.

Paso #1 👍

Creemos un proyecto nuevo en Stackblitz.

En la carpeta app, borremos el contenido del archivo 'app.component.html' y empecemos por algo básico, coloquemos un titulo a nuestra app, haciendo uso de alguno de los siguientes tags de encabezados html:

<h1>Encabezado 1</h1>
<h2>Encabezado 2</h2>
<h3>Encabezado 3</h3>
<h4>Encabezado 4</h4>
<h5>Encabezado 5</h5>
<h6>Encabezado 6</h6>

Paso #2 👩‍💻

Crearemos un formulario, y para esto vamos a incluir unas cajas de texto (<input />) y algunos botones (<button></button>).

En el archivo 'app.component.html', vamos a incluir lo siguiente:

  1. Para el formulario, agregamos el tag: <form></form>

<form>
</form>

Debajo de nuestro titulo previamente creado, así:

2. Incluyamos unas cajas de texto y botones:

<div>
    <label>Nombre: 
		  <input type="text" placeholder="Ingresa un nombre">
    </label>
	</div>
  <div>
    <p>Encontremos el nombre por género</p>
  </div>
  <div>
    <label>Edad: 
		  <input type="number" placeholder="Ingresa una edad">
    </label>
	</div>	
	<div>
    <label>Animal 
		  <input type="text" placeholder="Ingresa un animal">
    </label>
	</div>
  <div>
    <button type="submit">Genera la historia</button>
  </div>

Puedes ir incluyendo las cajas de texto que consideres necesarias, de acuerdo a la historia que vayas creando.

3. Para trabajar formularios, también necesitamos incluir un paquete llamado: 'FormsModule'.

En el archivo 'app.module.ts' incluimos la dependencia de 'FormsModule' 👇

import { FormsModule } from '@angular/forms';

Esa sentencia nos indica que estamos importando FormsModule de la librería @angular/forms

Y necesitamos incluir FormsModule en los imports de @NgModule, en el archivo 'app.module.ts' 👇

Si quieres aprender mas de formularios en Angular, puedes ampliar tus conocimientos aquí.

Nuestra App, hasta el momento con las cajas de texto e importando la librería quedaría así 👇

Paso #3 🧚‍♀️

Creemos una sección debajo del form donde vamos a generar la historia.

<div>
</div>

Dentro de ese <div></div>, vamos a escribir la historia que queremos mostrar y donde vamos a usar la 'Interpolación', que aprendimos anteriormente, para colocar el contenido que queremos dinámico.

El siguiente es un ejemplo de como pueden ir narrando su experiencia/historia

<div>
  <h1>La experiencia de NGColombia para <strong>  Aquí va el nombre </strong></h1>
  <p><strong>  Aquí ira el nombre   </strong> es un <span>chico/chica (dependiendo del género)</span>, con una gran energía y personalidad, que le encanta el código.</p>
  <p><strong>  Aquí ira el nombre  </strong>, a sus <span>Aquí va la edad </span> años, le encantan los peluches con forma de<span>Aquí va el animal</span></p>
  <p>Un caluroso día un amigo le hablo sobre <strong>NgGirls</strong> a <strong>  Aquí ira el nombre  </strong>. <strong>  Aquí ira el nombre  </strong> inmediatamente aplico a la convocatoria con la expectativa de tener una maravillosa e increible experiencia ...</p>
</div>

Paso #4 👩‍🔬

Vamos a construir la lógica para obtener los valores del formulario.

1. En el archivo: 'app.component.ts', vamos a crear un objeto que sera el encargado de obtener los valores que se incluyen en el formulario.

formValues: any = {};

2. Vamos a crear una función, llamada 'generate', que al accionar el botón, nos permitirá adicionarle esta información a nuestra variable previamente creada.

generate(form: any) {
  this.formValues = form;
}

3. Añadimos una directiva a nuestro formulario, que nos permite referenciar el evento de enviar el formulario a nuestra función 'generate'

(ngSubmit)="generate(form.value)"

4. Declaramos #form en nuestro formulario, a la cual le asignamos: ngForm, esto nos permite que los elementos del formulario puedan ser controlados, en los respectivos campos de entrada o inputs.

#form="ngForm"

5. En cada input incluimos la directiva 'ngModel', que nos permitirá trabajar con los datos ingresados en el formulario. Ademas le añadiremos el atributo 'name' a cada caja de texto (input), para especificar el nombre de este elemento

<input type="text" placeholder="Ingresa un nombre" name="name" ngModel>

Nuestro formulario quedaría como el siguiente código:

<form #form="ngForm" (ngSubmit)="generate(form.value)">
  <div class="form-group">
    <label>Nombre: 
		  <input type="text" placeholder="Ingresa un nombre" name="name" ngModel>
    </label>
	</div>
  <div>
    <p>Encontremos el nombre por género</p>
	</div>
  <div>
    <label>Edad: 
		  <input type="number" placeholder="Ingresa una edad" name="age" ngModel>
    </label>
	</div>	
	<div>
    <label>Animal 
		  <input type="text" placeholder="Ingresa un animal" name="animal" ngModel>
    </label>
	</div>
  <div class="form-group">
    <button type="submit">Genera la historia</button>
  </div>
</form>

Paso #5 🎩

Usemos la interpolación para usar los datos que se digitaran en el formulario.

En las secciones que dejamos de nuestra historia donde se iban a incluir el nombre, la edad, el animal, las reemplazaremos por la variable que almacena la información del formulario, llamando a la respectiva propiedad, por ejemplo:

formValues.name
formValues.age
formValues.animal

Ademas incluiremos un '*NgIf', para hacer solo visible nuestra historia al activar el botón.

*ngIf="showHistory"

Declaramos una variable, que controlara la visibilidad de la sección de la historia:

showHistory: boolean = false;

Actualizaremos el valor de esa variable en nuestra función 'generate', quedando nuestra función de la siguiente forma:

generate(form: any) {
    this.formValues = form;
    this.showHistory = true;
}

Nuestra historia quedaria así:

<div *ngIf="showHistory">
  <h1>La experiencia de NGColombia para <strong>  {{ formValues.name }} </strong></h1>
  <p><strong>  {{ formValues.name }}  </strong> es un <span>chico/chica (dependiendo del género)</span>, con una gran energía y personalidad, que le encanta el código.</p>
  <p><strong>  {{ formValues.name }}  </strong>, a sus <span>{{ formValues.age }} </span> años, le encantan los peluches con forma de  <span>{{ formValues.animal }}</span></p>
  <p>Un caluroso día un amigo le hablo sobre <strong>NgGirls</strong> a <strong>  {{ formValues.name}}  </strong>. <strong>  {{ formValues.name}}  </strong> inmediatamente aplico a la convocatoria con la expectativa de tener una maravillosa e increible experiencia  ...</p>
</div>

Paso #6 💃

Para añadir el género, vamos a hacer uso de un API llamada: Genderize.io, la cual nos permite de acuerdo al nombre ingresado, identificar si es 'Femenino' o 'Masculino', para incluir el género en nuestra historia.

En el desafío anterior creamos un servicio y vamos a hacer uso de la misma funcionalidad, para usar esa API.

1. Crearemos un 'servicio' dando clic sobre la carpeta 'app', seleccionamos 'service', nombramos el servicio como: 'gender', el nos creara un archivo llamado: 'gender.service.ts'

Importamos las dependencias que usamos anteriormente:

import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError as observableThrowError } from 'rxjs';
import { catchError, map } from 'rxjs/operators';

Incluimos el 'HttpClientModule' en el 'app.module.ts'

import { HttpClientModule } from '@angular/common/http';

y también en el '@NgModule' en el 'app.module.ts'

imports:      [ BrowserModule, FormsModule, HttpClientModule ],

En el 'constructor' de nuestro servicio 'gender.service.ts', declararemos una variable de tipo 'HttpClient'

private http: HttpClient

Crearemos dos funciones, una para manejar los errores: 'handleError' y otra que nos obtendrá el genero: 'getGender'

getGender(APIRoot) {
    return this.http
      .get<Array<{}>>(APIRoot)
      .pipe(map(data => data), catchError(this.handleError));
  }

  private handleError(res: HttpErrorResponse | any) {
    console.error(res.error || res.body.error);
    return observableThrowError(res.error || 'Server error');
  }

Ahora en nuestro 'app.component.ts', vamos a llamar al servicio que creamos, primero importamos el servicio: 'GenderService' y luego en el constructor lo declaramos, dentro del 'export class AppComponent':

import { GenderService } from './gender.service';

export class AppComponent  {
    constructor(private genderService: GenderService) { }
}

Crearemos una variable, de tipo string' donde le asignaremos la url del API. En nuestra función 'generate', crearemos un 'Observable' que nos permitirá subscribirnos, a la petición que hacemos de los datos, usando la variable que definimos con la ruta del API 'Genderize'.

apiRoot: string = 'https://api.genderize.io/';

Nuestra función quedaria así:

generate(form: any) {
    this.formValues = form;
    this.showHistory = true;
    this.genderService
      .getGender(this.apiRoot+ '?name='+ this.formValues['name'])
      .subscribe(
      response => (console.log(response)),
      error => (console.log('Ups! we have an error: ', error))
      )
  }

La respuesta que obtendremos por consola, sera como la siguiente:

{"name":"Ana","gender":"female","probability":"0.90","count":687}

Para mostrar el género, declararemos una variable, donde le asignaremos la respuesta que obtenemos de la petición que hacemos, al subscribirnos.

genderResponse: any = {};

this.genderService
      .getGender(this.apiRoot+ '?name='+ this.formValues['name'])
      .subscribe(
      response => ( this.genderResponse = response ),
      error => (console.log('Ups! we have an error: ', error))
      )

En nuestro HTML: 'app.component.html', agregaremos la variable 'genderResponse' y de acuerdo a la respuesta mostraremos el texto correspondiente.

<span> {{ genderResponse.gender === 'female' ? 'chica' : 'chico'}}</span>

Paso #7 👩‍🎨

Podemos añadir a los nombres el Pipe: 'uppercase', para colocar el nombre en mayúscula o 'titlecase', para colocarlo con mayúscula inicial.

{{ formValues.name| uppercase }}
{{ formValues.name | titlecase }}

Podemos ademas añadir un emoji dependiendo del género o una imagen.

{{ genderResponse.gender === 'female' ? 'chica 👩‍💻' : 'chico 👨‍💻'}}

Puedes usar mas emojis usando la siguiente página:

https://unicode.org/emoji/charts/full-emoji-list.html

Podemos incluir una imagen, que muestre una imagen aleatoria dependiendo del género, usando Loremflickr

<img [src]="genderResponse.gender === 'female' ? 'https://loremflickr.com/320/240/girl/all' : 
'https://loremflickr.com/320/240/man/all'" />

¡¡Lo lograste!! 💪

Puedes revisar la solución aquí 👇

PreviousDesafío #5: 🔮 de Cristal

Last updated