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

Clase 34 de 57 • Curso de Ionic Avanzado 2017

Contenido del curso

Introducción a Ionic

Estructura de nuestra App con Ionic

Basics de Angular y TypeScript

Agregando estilos con CSS a nuestra aplicación

Acceso a datos remotos

Opciones y Acceso Nativo

Conversación

Amigos

Deploy

Contenido Bonus

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

 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);
  }

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

Introducción a Ionic

Intro a Ionic Framework, Angular, Platzinger, y Ionic CLI

Instalación de Ionic y más herramientas en Mac OS

Instalación de Ionic y más herramientas de desarrollo en Windows

Estructura de nuestra App con Ionic

Arquitectura de una app en Ionic

Proyecto: Platzinger App

Repositorio del curso

Qué son pages y cómo generar las primeras de nuestra app

Navegación básica entre pages

Reto: Página “Acerca de” accesible desde el menú lateral

Tomando los conceptos compartidos de Angular y Ionic

Basics de Angular y TypeScript

Aclaraciones Ionic vs Angular

Cómo usar tipos de datos con typescript

Qué son e implementando interfaces de TypeScript

NgFor aplicado en la lista de usuarios

NgIf aplicado en la lista de usuarios

Navegación con parámetros

Accediendo a nuestros usuarios con conversation.ts

Creando un servicio de usuarios e inyectando el servicio en nuestros pages

Pipes en TypeScript (Date, Number, Json)

Creando nuestro propio 'Pipe' para buscar entre nuestros contactos

Reto: Mostrar un icono diferente según el status del usuario

Agregando estilos con CSS a nuestra aplicación

Cómo usar estilos CSS y referenciar recursos

Implementando estilos en la pantalla de login

Implementando estilos en la pantalla de home

Implementando estilos en la pantalla de conversación

Usando ngStyle y ngClass para añadir estilos dinámicos

Cambiar icono según status

Acceso a datos remotos

Información importante antes de continuar

¿Qué es Firebase?

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

Login/Registro de usuarios con email y password

Login/Registro de usuarios con Facebook

Implementando Log Out