Conexión a REST APIs con Angular HTTP y buenas prácticas

Clase 1 de 23 • Curso de Consumo de APIs REST con Angular

Resumen

¡Hola! Bienvenido o bienvenida al Curso de Consumo de API rest con Angular. Angular es un gran framework de desarrollo front-end con todo un ecosistema de herramientas que te facilitan el trabajo a la hora de desarrollar una aplicación.

En este curso, aprenderás todo lo relacionado con el consumo de APIs con Angular, utilizando su Cliente HTTP.

Otros temas que vas a explorar

Además de estos conocimientos también profundizarás en los siguientes temas:

Buenas prácticas de desarrollo
Verbos HTTP
Conexión HTTP con API Rest
CORS
Manejo de ambientes en Angular
Autentificación
Seguridad y tokens
Manejo avanzado de Observables con RxJS
Descarga y subida de archivos
¡Y mucho más!

¡Comencemos!

Contribución creada por: Kevin Fiorentino.

Nicolas Molina

teacher•

Hola, este es el repo con el código base en donde lo puedes descargas desde la rama main https://github.com/platzi/angular-APIS

Edgardo Molina Gonzalez

student•

Profe el DTO es la mejor práctica para los métodos http cierto???

Ricardo Sánchez

student•

****El repositorio no se puede usar correctamente!!!! La api no devuelve las imágenes bien. Tienes que cambiarlo todo: la interface, en todos los componentes donde se llama al array de products......

Luis Enrique Partida Vega

student•

Vengo de React y en mi trabajo me llamaron para un proyecto con Angular, gracias a estos cursos tuve la confianza para decir que si, vamos con todo!

Tania Sosa

student•

¡Que emocionante 🤩 leer ésto Luis Enrique! Te deseo mucho éxito en tu nuevo proyecto con Angular.

Obed Paz

student•

Me paso lo mismo, me asignaron a un proyecto que ya estaba empezado con Angular y la saga de cursos, más la documentación, esta bastante buena.

Diego Laurentin

student•

Para las grandes mentes que verán este curso en un futuro, la manera correcta de instalar el repositorio es la siguiente: .

Clonas el repositorio de github utilizando Git Clone, si tienes conectada tu llave SSH a github, sería tan fácil como:

$ git clone git@github.com:platzi/angular-APIS.git

Recuerda que siempres puedes saber como conectar tu llave de una manera muy facil en el Curso de Git y Github o directamente en la siguiente clase Vinculando nuestra llave SSH en Github .
De lo contrario, utiliza el método HTTPS que nos ofrece github:

$ git clone https://github.com/platzi/angular-APIS.git

Una vez hayas descargado el repo, ejecuta NPM Install para que se instalen todas las dependencias que serán utilizadas, recuerda que esto debes hacerlo dentro de la carpeta “angular-APIS”.

$ npm init

Una vez instaladas todas las dependencias, debes asegurarte de no tener ninguna vulnerabilidad en el proyecto, de lo contrario tendrás que ejecutar:

npm audit fix

Si esto no arregla las vulnerabilidades, puedes recurrir a:

npm audit fix --force

Y listo! ya tienes tu proyecto a la perfección para poder empezar a programar! .

¡Nunca pares de aprender!

Aaron Paredes Cabrera

student•

Construyendo el conocimiento que construirá mi futuro.

Arnold Stuwar Pedraza Marin

student•

en medellin se necesita mucho

Johan Mateo Franco Vargas

student•

Hola, soy nuevo en el tema de angular y git, para clonar el repositorio tube que escoger un sitio en mi computador y escribir: git clone https://github.com/platzi/angular-APIS.git

Despues de que se clone debemos instalar las dependencias, por lo cual es necesario tener instalado node.js, yo instale la version mas actual del node.js

luego abri, la carpeta en visual studio code y habilite los scripts de windows de la siguiente manera:

abrir el power shell de windows como administrador y escribir : Set-ExecutionPolicy Unrestricted y darle que si

luego regrese a visual studio code, y instale las dependencias con npm install, sin ocurren errores corri npm audix fix , y si aparecen mas npm audix fix --force

luego si aparece un error, como el que me aparecio es por la version de angular que usa el proyecto que es la 12.1, esta toca actualizarla de la siguiente manera

en la terminal escribir : ng update @angular/cli@13 @angular/core@13 --allow-dirty --force

si no es suficiente actualizo a la siguiente: ng update @angular/cli@14 @angular/core@14 --allow-dirty --force

hasta llegar a la version compatible y listo para verificar corri el comando ng serve -o .

Alex Lihuel Mujica

student•

Los figmas del proyecto: Mobile: https://www.figma.com/proto/bcEVujIzJj5PNIWwF9pP2w/Platzi_YardSale?node-id=0%3A462&amp%3Bscaling=scale-down&amp%3Bpage-id=0%3A1&amp%3Bstarting-point-node-id=0%3A719 Desktop: https://www.figma.com/proto/bcEVujIzJj5PNIWwF9pP2w/Platzi_YardSale?node-id=12%3A3214&amp%3Bscaling=scale-down&amp%3Bpage-id=0%3A998&amp%3Bstarting-point-node-id=5%3A2808

David Castro

student•

Gracias por tu aporte, Alex.

Raul Castillo

student•

Comencemos este nuevo curso.

Angel Larios

student•

3er Curso de mi ruta de Angular :D

Jimmy Buriticá Londoño

student•

Iniciando un nuevo curso de Angular, realmente el manejo de APIs es muy importante para un desarrollador, tengo grandes espectativas.

Jerson Hernán Uribe Montenegro

student•

Me interesa mucho el mundo de las APIs sin embargo quisiera saber que cursos debo tomar antes de este para poder tener bases sólidas en este campo, actualmente me encuentro aprendiendo Python.

Brandon Lee Aguero Fernandez

student•

En la escuela de Desarrollo Web encontraras rutas para especializarte en lo que sería el desarrollo de APIs

andres.castillo0627

student•

Ejecutar = npm install
Ejecutar = ng update y finalmente
Ejeutar = npm update
Ejecutar

ng update @angular/cli @angular/core @angular-eslint/schematics --allow-dirty --force

Roger Jim Padilla Rengifo

student•

muchas gracias, fue de mucha ayuda

Antonella Soledad Castagna

student•

La guia de actualizacion de Angular :D https://update.angular.io/

Jhon Stiven Granada Acevedo

student•

Nuevo curso nuevo look todo pinta bien .. xd

Kevin Daniel

student•

Hola si alguien actualizo el proyecto a la versión 15 de angular, lo puede subir, xfa, ya hice todo lo posible para actualizar el proyecto e igual me sigue dando error.