Master class at @ Adalab together with @esther_epg Introduction to APIs API server code: https://github.com/dgomez-developer/adalab/tree/develop/heroines-api API JS client code: https://github.com/estherpato/ada-heroines-front/tree/5c813ae60c72c5ec567d28d95f2d92a1f4f66220

1. Developers APIs
Débora Gómez y Esther Pato
Adalab
6 Septiembre 2019

2. Débora Gómez
Team & Technical Lead
myToys Group
devblog.mytoys.de
dgomez.developer@gmail.com
@dgomezdebora
www.linkedin.com/in/deboragomezbertoli

3. Esther Pato
Angular Frontend Developer
DNest agency
dnestagency.com
estherpato@gmail.com
@esther_epg
www.linkedin.com/in/estherpato

4. ¿Qué vamos a ver?
➢ Introducción
➢ Conceptos básicos
➢ Programaremos
@dgomezdebora
@esther_epg

5. ¿Qué significa API?
@dgomezdebora
@esther_epg

6. ¿Qué significa API?
Application
Programming
Interface
An Interface used by Programs to interact with an Application
@dgomezdebora
@esther_epg

7. APIs exponen algo útil
Principalmente tienen dos misiones:
2. Y se usan para dar acceso a
los usuarios a tus datos o
recursos.
API Developers
1. Permiten que tu producto o tu
servicio se comunique con otro
producto o servicio.
@dgomezdebora
@esther_epg

8. Algunos ejemplos APIs públicas
@dgomezdebora
@esther_epg

9. APIs ¿por qué?
¿Por qué las empresas dan acceso a sus datos?
Pueden incrementar los beneficios de la empresa.
@dgomezdebora
@esther_epg

10. Let’s see the
APIs basics
@dgomezdebora

11. REST APIs - Definición
REST es cualquier interfaz entre sistemas que usen HTTP para obtener datos o
generar operaciones sobre esos datos en todos los formatos posibles, como
por ejemplo JSON.
➢ HTTP: es el protocolo usado en cada transacción Web.
➢ JSON: es un formato ligero de intercambio de datos.
Cada operación se compone de:
✔ Petición
✔ Respuesta
@dgomezdebora
@esther_epg

12. REST APIs - Petición
Cada petición contiene:
➢ Método
➢ URI
➢ Cabeceras
➢ Body
@dgomezdebora
@esther_epg

13. REST APIs - Petición (Method)
Las operaciones más importantes relacionadas con los datos en cualquier
sistema REST y la especificación HTTP son cuatro y es lo que se conoce como
CRUD (Create Read Update Delete)
Los recursos en REST siempre se manipulan a través de una URI.
➢ POST (crear)
➢ GET (leer y consultar)
➢ PUT (editar)
➢ DELETE (eliminar)
@dgomezdebora
@esther_epg

14. REST APIs - Petición (URI)
Estas son las partes que forman una URI:
http://www.googleapis.com/books/v1/volumes?q=isbn:0747532699
Protocolo
Host Path Query
@dgomezdebora
@esther_epg

15. REST APIs - Petición (Cabeceras)
Las Cabeceras HTTP son los parámetros que se envían en una petición o
respuesta HTTP al cliente o al servidor para proporcionar información esencial
sobre la transacción en curso.
http://www.googleapis.com/books/v1/volumes?q=isbn:0747532699
Estas cabeceras proporcionan información mediante la sintaxis 'Cabecera:
Valor' y son enviadas automáticamente por el navegador o el servidor Web.
● Content-Type: El tipo de contenido de la petición.
● Authorization: Credenciales de autorización.
@dgomezdebora
@esther_epg

16. REST APIs - Petición (Body)
La petición también puede contener un body:
{
“title”:”Adalabers sharing experiences”,
“author”:”Adalab”
}
http://www.googleapis.com/books/v1/volumes
Ejemplo:
GET https://www.googleapis.com/books/v1/volumes?q=isbn:0747532699
@dgomezdebora
@esther_epg

17. REST APIs - Respuesta
Las respuestas contienen:
● Cabeceras.
● Código de respuesta.
● Body.
200 La petición ha sido procesada.
Nada ha cambiado.
401 Unauthorized
201 Creado 403 Forbidden
204 No content 404 Not found
400 Bad Request 500 Server error
Códigos de respuesta:
@dgomezdebora
@esther_epg

18. REST APIs - Respuesta
{
"kind": "books#volumes",
"totalItems": 1,
"items": [
{
"kind": "books#volume",
"id": "yZ1APgAACAAJ",
"etag": "FV4GQ8mw2PA",
"selfLink": "https://www.googleapis.com/books/v1/volumes/yZ1APgAACAAJ",
"volumeInfo": {
"title": "Harry Potter 1 and the Philosopher's Stone",
"authors": [
"J. K. Rowling"
],
"publisher": "Bloomsbury Pub Limited",
"publishedDate": "1997",
"description": "Harry Potter is an ordinary boy who lives in a cupboard under
the stairs at his Aunt Petunia and Uncle Vernon's house, which he thinks is normal
for someone like him who's parents have been killed in a 'car crash'. He is bullied
by them and his fat, spoilt cousin Dudley, and lives a very unremarkable life with
only the odd hiccup ...", @dgomezdebora
@esther_epg

19. REST APIs - Guidelines
Las peticiones GET se utilizan para leer un recurso o un conjunto de recursos.
1. Un recurso: normalmente genera un 404 si no existe.
2. Un conjunto: genera un 200 (si la lista es vacía) or 404 (si no existe).
3. No debe contener un body con datos (o bien usamos GET con
parámetros en la URL (recommended) or un POST con body).
@dgomezdebora
@esther_epg

20. REST APIs - Guidelines
Las peticiones POST se utilizan para crear recursos dentro de una colección.
1. Peticiones exitosas:
1. El servidor creará el recurso.
2. Generará un 200 (si ya existía y se ha actualizado), 201 (si el recurso se ha creado), and 202
(si la petición ha sido aceptada pero no ha terminado todavía)
2. Se pueden utilizar como un GET que necesita un body.
@dgomezdebora
@esther_epg

21. REST API - Guidelines
Las peticiones PUT para actualizar recursos enteros.
1. Se aplican a un solo recurso reemplazando toda su información. No se
aplica a una colección.
2. Es robusto frente a la no existencia del recurso implícitamente creándolo en
dicho caso.
3. Genera un 200 o 204 (si el recurso fue actualizado - con o sin retornar
la información actualizada), y 201 (si el recurso fue creado).
@dgomezdebora
@esther_epg

22. Guidelines - HTTP Methods
Las requests DELETE se usan para borrar recursos.
1. Se aplica a un solo recurso, no a colecciones ya que implicaría borrar la
colección entera.
2. Una request exitosa genera un 200 (si el recurso fue borrado y se retorna
información) o un 204 (si no se retorna información).
3. Una request fallida genera un 404 (si no se encuentra el recurso) or 410 (si el
recurso ya se había borrado anteriormente).
@dgomezdebora
@esther_epg

23. Let’s get dirty
@dgomezdebora

24. REST API - Ada Heroines
https://heroines-api.herokuapp.com/swagger-ui.html
Este API nos va a permitir:
● Obtener la lista de Ada Heroines.
● Crear nuevas Ada Heroines.
● Eliminar una Ada Heroin de nuestra lista.
● Actualizar los super poderes de una Ada Heroin.
@dgomezdebora
@esther_epg

25. Let’s actually
code
@dgomezdebora

26. REST API – Ada Heroines (javascript client)
Clonad el repositorio: https://github.com/estherpato/ada-heroines-front
Rama master está el ejemplo completo.
Ejercicio:
● Obtener lista de heroinas.
● Crear una heroina.
● Actualizar una heroina existente.
● Borrar una heroina.
@dgomezdebora
@esther_epg

27. Thanks!
dgomez.developer@gmail.com
@dgomezdebora
www.linkedin.com/in/deboragomezbertoli
estherpato@gmail.com
@esther_epg
www.linkedin.com/in/estherpato