PWA Lista de la compra

26-06-2020 Tiempo de lectura: 7 minutos.

Primeros pasos con Angular

Con esta serie de post vamos a ir creando una aplicaci√≥n con la que podremos gestionar una sencilla lista de la compra. La iremos evolucionando y a√Īadiendo cosas seg√ļn vayamos avanzando en la serie y seg√ļn vay√°is pidiendo funcionalidades. Todo el c√≥digo se ir√° publicando en Github.

Como MVP vamos a tener una aplicaci√≥n con la que crear una lista, a√Īadir, borrar y editar art√≠culos de la misma.

Para los datos vamos a comenzar con el LocalStorage del propio navegador y por √ļltimo, como MVP, haremos que nuestra app sea instalable.

Como ya he dicho, de ah√≠ iremos a√Īadiendo funcionalidades pero paso a paso.

Asi que… me dejo de rollos y empezamos.

Angular-CLI

Lo primerísimo es instalar angular-CLI que nos ayudará a crear componentes, módulos y las distintas partes de nuestra aplicación.

npm install @angular/cli -g

Hasta aqu√≠ creo que ha sido f√°cil y no tendr√≠ais que haber tenido muchos problemas…

Explosi√≥n de caba√Īas indias

Creando el proyecto de angular

Vamos a utilizar angular-CLI para generar toda le estructura básica para nuestra aplicación.

Para esto lanzamos el siguiente comando:

ng new listaDeCompra --routing=true

Antes de seguir, –routing=true lo que har√° ser√° crearnos el m√≥dulo con el que gestionaremos las rutas de nuestra aplicaci√≥n. Con esta peque√Īa aclaraci√≥n seguimos.

Lo siguiente que tendremos que hacer es elegir con que vamos a crear nuestras hojas de estilo.

Elección de sistema para las hojas de estilo

Aquí es como más os guste, yo personalmente siempre suelo elegir SCSS, no por nada en especial sino porque es a lo que estoy acostumbrado. Como digo, aquí podéis elegir con lo que más cómodos trabajéis.

Consola de visual studio con el comando ejecut√°ndose

¡Pues ya tenemos nuestra aplicación angular hecha!

Si vamos al directorio del proyecto podemos ejecutar el comando para iniciar el servidor de desarrollo que angular-CLI nos provee.

npm start

o

ng serve

Si abres el navegador y accedes a localhost:4200 verás el logo de angular. Ahora entramos más en matería.

Ya teniendo la estructura base de la aplicación vamos a ir preparando el terreno para continuar con nuestra aplicación.

Angular Material

Para el dise√Īo aparte de nuestras hojas de estilos, vamos a usar Angular Material. Este m√≥dulo nos va a permitir crear un dise√Īo basado en Material Design, con lo que le daremos un aspecto m√°s de aplicaci√≥n m√≥vil.

ng add @angular/material

Eliges el tema de colores que m√°s te guste de los que nos propone, despu√©s vamos a decir que SI a lo de HammerJS con lo que tendremos la posibilidad de implementar gestos multitouch en nuestra web. S√© que es algo aburrido todo esto pero es necesario as√≠ que…

¬°Borra todo!

Borra todo el contenido de app.component.html y deja la siguiente linea:

<router-outlet></router-outlet>

Con esta linea mostraremos los componentes hijos de un componente, que en este caso es app.component el componente padre, y del que colgarán nuestros componentes y módulos.

Vamos a comenzar creando el módulo del header y para que sea visible en todas las rutas de nuestra aplicación. Utilizando angular-cli:

ng g component header

Estructura del componente header angular2

Como véis, la ejecución de este comando nos crea los ficheros del componente y automáticamente lo declara dentro del módulo principal de la aplicación.

Empezamos a trabajar con este componente y lo que vamos a hacer es a√Īadirlo al componente padre. Si os fij√°is en el fichero header.componente.ts, podr√©is ver la etiqueta/selector que debemos de utilizar para “inyectar” el componente.

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

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

As√≠ que a√Īadimos nuestro componente al componente padre(app.component). Quedando como sigue:

<app-header></app-header>
<router-outlet></router-outlet>

Si habéis hecho lo que he ido comentando en el post ahora mismo vuestro servidor se ha recargado solo y debe de mostrar header works!, lo que nos indica que hemos creado correctamente el componente Header.

En este primer post de la serie vamos a dejar la estructura b√°sica de la aplicaci√≥n creada, pero sin entrar en dise√Īo ni nada. Solo creaci√≥n del esqueleto b√°sico. Por lo que vamos a crear un componente m√°s que ser√° el listado de art√≠culos.

Repetimos el mismo proceso que con el header, pero ahora en vez de a√Īadirlo a ning√ļn sitio vamos a trabajar con las rutas, y vamos a indicar que la ruta ra√≠z deber√° cargar nuestro componente ItemList.

ng g component itemList

Exactamente igual que antes nos crea la estructura del componente.

App Routing Module

Aquí es donde vamos a trabajar para definir las distintas rutas que podría llegar a tener nuestra aplicación. En este fichero podríamos definir rutas tanto para componentes directamente como para otros módulos que a su vez podrían tener su propio routing.

Pero para nuestro caso vamos a a√Īadir lo sencillote, un objeto dentro del array de routes que est√° definido en el fichero app.routing.module.ts:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ItemListComponent } from './item-list/item-list.component';


const routes: Routes = [
  {path:'', component: ItemListComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Si véis en el navegador dos líneas como estas:

header works!

item-list works!

Significa que ya tenéis el esqueleto más básico para la app que vamos a construir.

Yo para no saturar más, lo voy a dejar aquí. Todo este código lo tenéis en un repositorio, en la rama master iré actualizando el código y cada post que escriba tendrá su propia rama para que puedas seguir o empezar en un determinado punto del desarrollo.

Si quer√©is que me detenga en algo m√°s concreto dec√≠dmelo en twitter y si puedo profundizar m√°s, lo har√©. S√© que quiz√°s no he entrado en detalle de angular pero creo que para empezar est√° bien, adem√°s, nos iremos enfrentando a retos seg√ļn vaya avanzando el desarrollo.