Creando un CRUD implementando un API REST HTTP (con diversos backends)

Clase 42 de 63 • Curso de Angular 6 2018

Contenido del curso

Introducción

Definición de la estructura del App

Basics de Angular y TypeScript

Estilos

Acceso a datos remotos y login

Opciones y subida de imágenes

Conversación

Amigos

Deploy

Conclusión

Tomar examen

Las apps que construimos en Ionic, son meramente de frontend, esto quiere decir, que los archivos de la aplicación en sí, sólo son ejecutados en el browser cliente. Dado esto, nuestras apps deben usar ciertos mecanismos para conectarse con el backend, como comunicación a través de sockets puros o llamados HTTP. Nuestra app se comunica con Firebase usando la librería AngularFire, la cual establece comunicación con nuestra base de datos usando sockets, sin embargo, fácilmente puedes reemplazar esta librería (y firebase) por cualquier backend que exponga un API que el app pueda consumir.

Por ejemplo, puedes usar un backend de PHP, usando Laravel. Puedes usar este repositorio para montar tu propio servidor de Laravel: https://github.com/EduardoIbarra/laravelcrud (debes de hacer configuraciones de base de datos e instalación de dependencias usando composer, puedes encontrar cómo crear este backend y como ejecutarlo aquí: https://www.youtube.com/watch?v=2RNZ1TcK_kI&list=PLYPjmy5IVxT_EXZQK-Getu3xKAJ4bPOa6

Las funciones de un CRUD son las siguientes:

Create, usando un verbo HTTP llamado POST
Read, usando un verbo HTTP llamado GET
Update, usando un verbo HTTP llamado PUT
Delete, usando un verbo HTTP llamado DELETE

Te recomiendo crear un nuevo app de Ionic para consumir este CRUD de Laravel. Además, agregar un servicio como los que creamos para acceder a los datos de Firebase y de esta manera acceder al CRUD.

Para lograr acceder a métodos HTTP, necesitamos el Módulo de HttpClient de Angular. Lo que hay que hacer para tenerlo disponible en nuestra app es dirigirnos a nuestro app.module.ts, y en la sección de imports, colocar: HttpClientModule.

Luego, en el servicio que agregaste para el acceso al CRUD, en su constructor, agregar una propiedad del tipo HttpClient, de esta manera: private httpClient: HttpClient.

Aquí te muestro los métodos de acceso para este CRUD en particular:

 get() {
    return this.httpClient.get(this.API_ENDPOINT + '/movies');
  }

  save(movie: Movie) {
    const headers = new HttpHeaders({'Content-Type': 'application/json'});
    return this.httpClient.post(this.API_ENDPOINT + '/movies', movie, {headers: headers});
  }

  put(movie) {
    const headers = new HttpHeaders({'Content-Type': 'application/json'});
    return this.httpClient.put(this.API_ENDPOINT + '/movies/' + movie.id, movie, {headers: headers});
  }

  delete(id) {
    return this.httpClient.delete(this.API_ENDPOINT + '/movies/' + id);
  }

Y a partir de este punto, lo demás es casi exactamente igual que acceder a método de Firebase, simplemente, inyectas el servicio en tu Page o Componente y llamas a sus métodos, los cuáles regresan Observables a los que puedes suscribirte (.subscribe())

Si deseas el resultado final de este crud para Angular, puedes obtenerlo aquí: https://github.com/EduardoIbarra/angularcrud/tree/2_RoutingInterfaces

CRUD con Django

Para hacer el CRUD con Django, realmente el cambio es poco, puedes tomar el CRUD de Django que cree desde este repositorio de Github: https://github.com/EduardoIbarra/djangocrud

Este CRUD se desarrolló basándome en esta guía y adaptando el código al mismo caso del CRUD de Laravel: https://codeburst.io/create-a-django-api-in-under-20-minutes-2a082a60f6f3

Aquí está una versión del CRUD de Angular adaptado a nuestro nuevo CRUD de Django: https://github.com/EduardoIbarra/angularcrud/tree/django, si te ocurre algún error relacionado con Access-Control-Allow-Origin, checa este url: https://gist.github.com/miraculixx/6536381

Comentarios

Juan Antonio Campoy Lira

student•

Crud con C# API rest?

Carlos Enrique Ramírez Flores

student•

Agregue un metodo mas. para cuando van a editar una peli.
getById

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from "@angular/common/http";
import { Movie } from "../interfaces/movie";
@Injectable({
  providedIn: 'root'
})
export class MoviesService {
	API_ENDPOINT = 'http://localhost:8055/api';
	constructor(private http:HttpClient) {
	}
	get(){
		return this.http.get(this.API_ENDPOINT + "/movies")
	}
	getById(id){
		if(id){
			return this.http.get(this.API_ENDPOINT + "/movies/id/"+id);
		}
	}
	save(movie: Movie){
		const headers = new HttpHeaders({'Content-Type': 'application/json'});
		return this.http.post(this.API_ENDPOINT + '/movies',movie, {headers: headers});
	}
	put(movie){
		const headers = new HttpHeaders({'Content-Type':'application/json'});
		return this.http.put(this.API_ENDPOINT + '/movies/' + movie.id, movie, {headers: headers});
	}
	delete(id){
		return this.http.delete(this.API_ENDPOINT + '/movies/' + id);
	}
}```


lo mando llamar desde aqui.

import { Component, OnInit } from ‘@angular/core’;
import { MoviesService } from “…/services/movies.service”;
import { Movie } from “…/interfaces/movie”;
import { Router, ActivatedRoute } from “@angular/router”;

@Component({
selector: ‘app-form’,
templateUrl: ‘./form.component.html’,
styleUrls: [’./form.component.css’]
})
export class FormComponent implements OnInit {
movie: Movie = {
name :null,
genre :null,
year :null,
duration :null,
description :null
}
id:number;
editing:boolean;
constructor(private moviesService:MoviesService,
private router: Router,
private activatedRoute:ActivatedRoute) {
= this.activatedRoute.snapshot.params[‘id’];
if(){
this.editing= true;
this.moviesService.getById()
.subscribe((result:Movie)=>{
this.movie = result;
},(e)=>{
console.log(e);
});
}else{
this.editing= false;
}
}

ngOnInit() {
}
save(){
	if(this.id && this.editing){
		this.moviesService.put(this.movie)
			.subscribe(
				(res)=>{
					this.router.navigate(['home']);
				},(e)=>{

				});
	}else{
		this.moviesService.save(this.movie)
			.subscribe(
				(dat)=>{
					this.router.navigate(['home']);
				},(e)=>{
					console.log(e);
				})
	}
}

}```

David Stiven Valbuena Restrepo

student•

Otra opción que se puede tener para este tipo de CRUD es centralizar los servicios, cosa que puedas inyectar las dependencias desde diferentes componentes y realizar tu llamada desde éstos...

import { Injectable } from '@angular/core';
import { Http , Headers, RequestOptions } from '@angular/http';

@Injectable({
  providedIn: 'root'
})
export class ApirestService {

	public apiUrl: string = Url_api
	constructor(private http: Http)
    {
        this.http = http;
    }

    Post(route:string, body)
    {    
        let repos = this.http.post(this.apiUrl.concat(route), body);
        return repos;
    }

    Get(route:string)
    {
       let repos = this.http.get(this.apiUrl.concat(route), options);
        return repos;
    }

    queryDelete(route:string)
    {
        let repos = this.http.delete(this.apiUrl.concat(route), options);
        return repos;
    }
}

Ejemplo de solicitud:

let url '/getData'
this.service.Get(url).subscribe(
            response=>
            {      
                let result = response.json();  # obtenemos la respuesta en formato json
            },
            err => 
            {
                console.log(err);
            }
        );

Carlos Enrique Ramírez Flores

student•

import { Component, OnInit } from '@angular/core';
import { MoviesService } from "../services/movies.service";
import { Movie } from "../interfaces/movie";
import { Router, ActivatedRoute } from "@angular/router";

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})
export class FormComponent implements OnInit {
	movie: Movie = {
		name        :null,
		genre       :null,
		year        :null,
		duration    :null,
		description :null
	}
	id:number;
	editing:boolean;
	constructor(private moviesService:MoviesService,
				private router: Router,
				private activatedRoute:ActivatedRoute) {
		this.id = this.activatedRoute.snapshot.params['id'];
		if(this.id){
			this.editing= true;
			this.moviesService.getById(this.id)
				.subscribe((result:Movie)=>{
					this.movie = result;
				},(e)=>{
					console.log(e);
				});
		}else{
			this.editing= false;
		}
	}

	ngOnInit() {
	}
	save(){
		if(this.id && this.editing){
			this.moviesService.put(this.movie)
				.subscribe(
					(res)=>{
						this.router.navigate(['home']);
					},(e)=>{

					});
		}else{
			this.moviesService.save(this.movie)
				.subscribe(
					(dat)=>{
						this.router.navigate(['home']);
					},(e)=>{
						console.log(e);
					})
		}
	}

}

Alexander Grajales Vanegas

student•

buenas tardes, tengo un error al realizar el servicio no me esta registrado la respuesta que me envía el backend, si en el servicio adiciono un .map puedo tener la respuesta pero al tratar de retornarla al componente siempre me llega null

ejem -servicio saveImage(formData:FormData) : Observable<Object>{
return this.httpClient.post<Object>(GLOBALURLS().urlFile , formData) }

-componente saveImageEmpresa(imageInput: any){ var formData = new FormData(); this.file = imageInput.files[0]; formData.append('form', this.file); this.empresaService.saveImage(formData).subscribe((result) => { console.log(result); alert('Película actualizada'+result);
}, (error) => { console.log(error); alert('Ocurrió un error'); }); }

Wilson Alejandro Gonzalez Gaitan

student•

Un pequeño ejemplo, en este caso la realize con esta api https://rickandmortyapi.com/documentation/

Servicio

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

@Injectable({
  providedIn: 'root'
})
export class BackendService {

  API_ENDPOINT = 'https://rickandmortyapi.com/api/';

  constructor(private httpClient: HttpClient) {
  }

  get() {
    return this.httpClient.get(this.API_ENDPOINT + '/character/');
  }
}
>

Implementacion de home

<import {Component, OnInit} from '@angular/core';
import {AuthenticationService} from '../services/authentication.service';
import {UserService} from '../services/user.service';
import {Router} from '@angular/router';
import {BackendService} from '../services/backend.service';
import {Ricky} from '../interfaces/ricky';

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

export class LoginComponent implements OnInit {
  operation: string = 'login';
  email: string = null;
  password: string = null;
  nick: string = null;

  constructor(private authenticationService: AuthenticationService,
              private userService: UserService, private router: Router, private backend: BackendService) {
  }

  ngOnInit() {
  }

  login() {
    this.backend.get().subscribe((data: Ricky) => {
      console.log(data);
    }, (error) => {
      console.log(error);
      alert('Ocurrió un error');
    });
  }

  register() {
    this.authenticationService.registerWithEmail(this.email, this.password)
      .then((data) => {
        const user = {
          uid: data.user.uid,
          email: this.email,
          nick: this.nick
        };
        this.userService.createUser(user).then((data2) => {

        }).catch((error) => {
          console.log('Se presento problemas para create user');
        });
      }).catch((error) => {
      console.log(error);
    });
  }
}
>

Interfaz

<export interface Ricky {
  'info': {
    'count': number,
    'pages': number,
    'next': string,
    'prev': string
  };
  'results': [
    {
      'id': number,
      'name': string,
      'status': string,
      'species': string,
      'type': string,
      'gender': string,
      'origin': {
        'name': string,
        'url': string
      },
      'location': {
        'name': string,
        'url': string
      },
      'image': string,
      'episode': [],
      'url': string,
      'created': string
    }
    ];
}
>

Erik Ricardo Sánchez Pérez

student•

Igual recuerden que saber docker nos da un gran super poder para integrar todo nuestro ambiente de desarrollo ;)

Rubén Jiménez Torres

student•

Como implementar todo esto con un backend escrito con Java.

Andrés Felipe Moreno Torres

student•

Este es un ejemplo, espero te pueda servir

package co.com.gm.service;

import co.com.gm.data.PersonaDAO;
import co.com.gm.domain.Persona;
import java.util.List;
import java.util.Objects;
import javax.ejb.Stateless;
import javax.inject.Inject;
import javax.ws.rs.Consumes;
import javax.ws.rs.DELETE;
import javax.ws.rs.GET;
import javax.ws.rs.POST;
import javax.ws.rs.PUT;
import javax.ws.rs.Path;
import javax.ws.rs.PathParam;
import javax.ws.rs.Produces;
import javax.ws.rs.core.MediaType;
import javax.ws.rs.core.Response;

@Stateless
@Path("/personas")
public class PersonaServiceRS {
    
    @Inject
    private PersonaDAO personaDAO;
    
    @GET
    @Produces(value = MediaType.APPLICATION_JSON)
    public List<Persona> findAllPersonas() {
        List<Persona> listaPersonas = personaDAO.findAll();
        System.out.println("Personas Encontradas " + listaPersonas);
        return listaPersonas;
    }
    
    @GET
    @Produces(value = MediaType.APPLICATION_JSON)
    @Path("{idPersona}") //hace referencia al path /personas/{idPersona}, ejemplo /personas/1
    public Persona findById(@PathParam("idPersona") int idPersona) {
        Persona personaFind = personaDAO.findPersona(new Persona(idPersona));
        System.out.println("Persona Encontrada " + personaFind);
        return personaFind;
    }
    
    @POST
    @Consumes(value = MediaType.APPLICATION_JSON)
    @Produces(value = MediaType.APPLICATION_JSON)
    public Persona createPersona(Persona persona) {
        personaDAO.createPersona(persona);
        System.out.println("Persona Insertada " + persona);
        return persona;
        
    }
    
    @PUT
    @Consumes(value = MediaType.APPLICATION_JSON)
    @Produces(value = MediaType.APPLICATION_JSON)
    @Path("{idPersona}")
    public Response updatePersona(@PathParam("idPersona") int idPersona, Persona personaModificada) {
        Persona persona = personaDAO.findPersona(new Persona(idPersona));
        if(Objects.nonNull(persona)) {
            personaDAO.updatePersona(personaModificada);
            System.out.println("Persona modificada " + personaModificada);
            return Response.ok().entity(personaModificada).build();
        } else {
            return Response.status(Response.Status.NOT_FOUND).build();
        }
    }
    
    @DELETE
    @Produces(value = MediaType.APPLICATION_JSON)
    @Path("{idPersona}")
    public Response deletePersona(@PathParam("idPersona") int idPersona, Persona personaEliminar) {
        Persona persona = personaDAO.findPersona(new Persona(idPersona));
        if(Objects.nonNull(persona)) {
            personaDAO.deletePersona(personaEliminar);
            System.out.println("Persona eliminada con el id: " + idPersona);
            return Response.ok().build();
        } else {
            return Response.status(Response.Status.NOT_FOUND).build();
        }        
    }
}```

 get() {
    return this.httpClient.get(this.API_ENDPOINT + '/movies');
  }

  save(movie: Movie) {
    const headers = new HttpHeaders({'Content-Type': 'application/json'});
    return this.httpClient.post(this.API_ENDPOINT + '/movies', movie, {headers: headers});
  }

  put(movie) {
    const headers = new HttpHeaders({'Content-Type': 'application/json'});
    return this.httpClient.put(this.API_ENDPOINT + '/movies/' + movie.id, movie, {headers: headers});
  }

  delete(id) {
    return this.httpClient.delete(this.API_ENDPOINT + '/movies/' + id);
  }

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from "@angular/common/http";
import { Movie } from "../interfaces/movie";
@Injectable({
  providedIn: 'root'
})
export class MoviesService {
	API_ENDPOINT = 'http://localhost:8055/api';
	constructor(private http:HttpClient) {
	}
	get(){
		return this.http.get(this.API_ENDPOINT + "/movies")
	}
	getById(id){
		if(id){
			return this.http.get(this.API_ENDPOINT + "/movies/id/"+id);
		}
	}
	save(movie: Movie){
		const headers = new HttpHeaders({'Content-Type': 'application/json'});
		return this.http.post(this.API_ENDPOINT + '/movies',movie, {headers: headers});
	}
	put(movie){
		const headers = new HttpHeaders({'Content-Type':'application/json'});
		return this.http.put(this.API_ENDPOINT + '/movies/' + movie.id, movie, {headers: headers});
	}
	delete(id){
		return this.http.delete(this.API_ENDPOINT + '/movies/' + id);
	}
}```


lo mando llamar desde aqui.

ngOnInit() {
}
save(){
	if(this.id && this.editing){
		this.moviesService.put(this.movie)
			.subscribe(
				(res)=>{
					this.router.navigate(['home']);
				},(e)=>{

				});
	}else{
		this.moviesService.save(this.movie)
			.subscribe(
				(dat)=>{
					this.router.navigate(['home']);
				},(e)=>{
					console.log(e);
				})
	}
}

import { Injectable } from '@angular/core';
import { Http , Headers, RequestOptions } from '@angular/http';

@Injectable({
  providedIn: 'root'
})
export class ApirestService {

	public apiUrl: string = Url_api
	constructor(private http: Http)
    {
        this.http = http;
    }

    Post(route:string, body)
    {    
        let repos = this.http.post(this.apiUrl.concat(route), body);
        return repos;
    }

    Get(route:string)
    {
       let repos = this.http.get(this.apiUrl.concat(route), options);
        return repos;
    }

    queryDelete(route:string)
    {
        let repos = this.http.delete(this.apiUrl.concat(route), options);
        return repos;
    }
}

let url '/getData'
this.service.Get(url).subscribe(
            response=>
            {      
                let result = response.json();  # obtenemos la respuesta en formato json
            },
            err => 
            {
                console.log(err);
            }
        );

import { Component, OnInit } from '@angular/core';
import { MoviesService } from "../services/movies.service";
import { Movie } from "../interfaces/movie";
import { Router, ActivatedRoute } from "@angular/router";

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})
export class FormComponent implements OnInit {
	movie: Movie = {
		name        :null,
		genre       :null,
		year        :null,
		duration    :null,
		description :null
	}
	id:number;
	editing:boolean;
	constructor(private moviesService:MoviesService,
				private router: Router,
				private activatedRoute:ActivatedRoute) {
		this.id = this.activatedRoute.snapshot.params['id'];
		if(this.id){
			this.editing= true;
			this.moviesService.getById(this.id)
				.subscribe((result:Movie)=>{
					this.movie = result;
				},(e)=>{
					console.log(e);
				});
		}else{
			this.editing= false;
		}
	}

	ngOnInit() {
	}
	save(){
		if(this.id && this.editing){
			this.moviesService.put(this.movie)
				.subscribe(
					(res)=>{
						this.router.navigate(['home']);
					},(e)=>{

					});
		}else{
			this.moviesService.save(this.movie)
				.subscribe(
					(dat)=>{
						this.router.navigate(['home']);
					},(e)=>{
						console.log(e);
					})
		}
	}

}

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

@Injectable({
  providedIn: 'root'
})
export class BackendService {

  API_ENDPOINT = 'https://rickandmortyapi.com/api/';

  constructor(private httpClient: HttpClient) {
  }

  get() {
    return this.httpClient.get(this.API_ENDPOINT + '/character/');
  }
}
>

<import {Component, OnInit} from '@angular/core';
import {AuthenticationService} from '../services/authentication.service';
import {UserService} from '../services/user.service';
import {Router} from '@angular/router';
import {BackendService} from '../services/backend.service';
import {Ricky} from '../interfaces/ricky';

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

export class LoginComponent implements OnInit {
  operation: string = 'login';
  email: string = null;
  password: string = null;
  nick: string = null;

  constructor(private authenticationService: AuthenticationService,
              private userService: UserService, private router: Router, private backend: BackendService) {
  }

  ngOnInit() {
  }

  login() {
    this.backend.get().subscribe((data: Ricky) => {
      console.log(data);
    }, (error) => {
      console.log(error);
      alert('Ocurrió un error');
    });
  }

  register() {
    this.authenticationService.registerWithEmail(this.email, this.password)
      .then((data) => {
        const user = {
          uid: data.user.uid,
          email: this.email,
          nick: this.nick
        };
        this.userService.createUser(user).then((data2) => {

        }).catch((error) => {
          console.log('Se presento problemas para create user');
        });
      }).catch((error) => {
      console.log(error);
    });
  }
}
>

<export interface Ricky {
  'info': {
    'count': number,
    'pages': number,
    'next': string,
    'prev': string
  };
  'results': [
    {
      'id': number,
      'name': string,
      'status': string,
      'species': string,
      'type': string,
      'gender': string,
      'origin': {
        'name': string,
        'url': string
      },
      'location': {
        'name': string,
        'url': string
      },
      'image': string,
      'episode': [],
      'url': string,
      'created': string
    }
    ];
}
>

package co.com.gm.service;

import co.com.gm.data.PersonaDAO;
import co.com.gm.domain.Persona;
import java.util.List;
import java.util.Objects;
import javax.ejb.Stateless;
import javax.inject.Inject;
import javax.ws.rs.Consumes;
import javax.ws.rs.DELETE;
import javax.ws.rs.GET;
import javax.ws.rs.POST;
import javax.ws.rs.PUT;
import javax.ws.rs.Path;
import javax.ws.rs.PathParam;
import javax.ws.rs.Produces;
import javax.ws.rs.core.MediaType;
import javax.ws.rs.core.Response;

@Stateless
@Path("/personas")
public class PersonaServiceRS {
    
    @Inject
    private PersonaDAO personaDAO;
    
    @GET
    @Produces(value = MediaType.APPLICATION_JSON)
    public List<Persona> findAllPersonas() {
        List<Persona> listaPersonas = personaDAO.findAll();
        System.out.println("Personas Encontradas " + listaPersonas);
        return listaPersonas;
    }
    
    @GET
    @Produces(value = MediaType.APPLICATION_JSON)
    @Path("{idPersona}") //hace referencia al path /personas/{idPersona}, ejemplo /personas/1
    public Persona findById(@PathParam("idPersona") int idPersona) {
        Persona personaFind = personaDAO.findPersona(new Persona(idPersona));
        System.out.println("Persona Encontrada " + personaFind);
        return personaFind;
    }
    
    @POST
    @Consumes(value = MediaType.APPLICATION_JSON)
    @Produces(value = MediaType.APPLICATION_JSON)
    public Persona createPersona(Persona persona) {
        personaDAO.createPersona(persona);
        System.out.println("Persona Insertada " + persona);
        return persona;
        
    }
    
    @PUT
    @Consumes(value = MediaType.APPLICATION_JSON)
    @Produces(value = MediaType.APPLICATION_JSON)
    @Path("{idPersona}")
    public Response updatePersona(@PathParam("idPersona") int idPersona, Persona personaModificada) {
        Persona persona = personaDAO.findPersona(new Persona(idPersona));
        if(Objects.nonNull(persona)) {
            personaDAO.updatePersona(personaModificada);
            System.out.println("Persona modificada " + personaModificada);
            return Response.ok().entity(personaModificada).build();
        } else {
            return Response.status(Response.Status.NOT_FOUND).build();
        }
    }
    
    @DELETE
    @Produces(value = MediaType.APPLICATION_JSON)
    @Path("{idPersona}")
    public Response deletePersona(@PathParam("idPersona") int idPersona, Persona personaEliminar) {
        Persona persona = personaDAO.findPersona(new Persona(idPersona));
        if(Objects.nonNull(persona)) {
            personaDAO.deletePersona(personaEliminar);
            System.out.println("Persona eliminada con el id: " + idPersona);
            return Response.ok().build();
        } else {
            return Response.status(Response.Status.NOT_FOUND).build();
        }        
    }
}```

Creando un CRUD implementando un API REST HTTP (con diversos backends)

Introducción

Qué aprenderás sobre Angular 6

Introducción a Angular

Configurando nuestro proyecto en Git y Github

Introducción a Angular CLI y al proyecto de Platzinger

Instalación del entorno de desarrollo en Mac OS

Instalación del entorno de desarrollo en Windows e información acerca del editor que usaré (WebStorm) y alternativas

Corriendo nuestra app en el navegador

Reto: Desarrolla un tutorial escrito comparando Angular con otro Framework (Vue, React)

Definición de la estructura del App

¿Qué hará nuestra app? ¿Cuál es su arquitectura? ¿De qué pantallas se compondrá? ¿Cuál será su look?

Explorando el sistema de archivos

¿Qué son y cómo generar los primeros componentes de nuestra app?

Navegación básica entre componentes

Componentes anidados: Creando un componente con nuestras rutas de navegación que funcione como menú

Reto: Varias conversaciones a la vez

Basics de Angular y TypeScript

¿Cómo usar tipos de datos con TypeScript?

Qué son las interfaces de TypeScript y su implementación

NgFor aplicado en la lista de usuarios

NgIf aplicado en la lista de usuarios

Navegación con parámetros

Accediendo a nuestros usuarios desde Conversation.ts

Creando un servicio de usuarios e Inyectando el servicio en nuestros componentes

Pipes en Angular (date, number, json)

Creando nuestro propio pipe para buscar entre nuestros contactos

Estilos

¿Cómo usar estilos CSS y referenciar recursos?

Instalando librerías usando npm (bootstrap y font-awesome) y Referenciando CSS en el angular.json

Reto: Cambiar ícono según estatus

Implementando estilos en la pantalla de login

Terminando de implementar los estilos de nuestra pantalla de login

Implementando estilos en el navbar

Implementando estilos en la pantalla de home

Implementando estilos en home, lista de contactos

Implementando estilos en profile

Reto: Estilos en la pantalla de conversación

Usando ngClass para añadir estilos dinámicos

Reto: Mejorar estilos en la pantalla de conversación

Acceso a datos remotos y login

¿Qué es Firebase? Creando nuestro proyecto

Diferencia entre conexión por sockets y HTTP

Instalación y setup de la librería AngularFire a través de npm

Login/Registro de usuarios con email y password

Reemplazo del servicio de usuarios por un servicio dinámico con conexión a Firebase

Guards para verificar Firebase auth