![](https://i.imgur.com/ld6aL74.png =200x) # ¿Que es una API? ## Introducción a las APIs {%vimeo 110256895%} ### HTTP Refresher Vamos a refrescar los conceptos sobre el ciclo de request/response: ![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_a3fd4881503ace1d73598f2cb9ec6931.png) El flujo típico es que: 1. Un cliente/navegador realiza una solicitud 2. El servidor web recibe la solicitud. 3. La solicitud HTTP se gestiona y enruta. 4. Se reciben los datos relevantes de la base de datos. 5. Se envía una respuesta al cliente, *generalmente en HTML* Hasta ahora, la respuesta del servidor ha sido un estado HTTP y luego algo de `text/html`, después de que el motor de plantillas haya renderizado una plantilla. ![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_7982e7fd91af538385c88bb86d9161aa.png) Sin embargo, HTTP nos permite enviar otros tipos de contenido distintos a **HTML**. Echemos un vistazo rápido a los tipos de **contenido HTTP**. ### Tipos de contenido (Content-Type) La propiedad del *header* [Content-Type](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Type) se utiliza en HTTP para indicar el tipo de medio del recurso que se envía a los clientes. HTTP puede enviar no solo HTML, sino también muchos tipos diferentes de contenido al navegador. Aquí hay una lista completa de los diferentes **tipos de contenido** que podemos recibir: Content-Type | ¿Para qué es? | Subclasses :-------------:|----------------|-------------- text | Información de texto | `text/plain`, `text/html`, `text/stylesheets` image | Imágenes | `image/jpg`, `image/gif` audio | Audio data | `audio/mp3`, `audio/ogg` video | Video data | `video/mpeg` multipart | Varios | `multipart/mixed` application | Data Binaria | `application/octet-stream` -- *[W3C.org | rfc1341 | The Content-Type Header Field](https://www.w3.org/Protocols/rfc1341/4_Content-Type.html)* `text/html` fue diseñado para que los humanos entendieran el contenido. HTML se envía al navegador y luego se analiza en hermosas interfaces, pero... :::info :bulb: **¿Qué pasaría si quisiéramos solicitar algunos datos de un sitio web a través de Internet y luego hacer algo programático con esos datos?** ::: Todavía tendríamos que hacer una solicitud HTTP para obtener los datos de nuestro servidor web: ¡así es como funciona Internet! Sin embargo, es posible que deseemos que la respuesta esté en un formato que sea un poco más fácil de entender para un programa. `text/html` es solo un tipo de datos que se pueden enviar y recibir en Internet. Otro común es `application/json`. ### JSON ![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_3fdae0989f15509bbce68b92b4c3e057.png) [JSON](https://en.wikipedia.org/wiki/JSON) (JavaScript Object Notation) es un formato ligero de intercambio de datos: :::success - Fácil de leer y escribir para los humanos - Fácil de analizar y generar para las máquinas. - Basado en un subconjunto del lenguaje de programación JavaScript ::: **Ejemplo de JSON** ```javascript { "id": 123, "name": "JSON T-Shirt", "price": 99.99, "tags": [ "Bar", "Eek" ], "stock": { "warehouse": 300, "retail": 20 } } ``` JSON es solo un formato que podemos usar para enviar y recibir información a través de Internet. Hay algunos otros como [XML](https://en.wikipedia.org/wiki/XML) que puede que veas por internet. Sin embargo, JSON es el más común y el más fácil de usar. ## API (Application Programming Interface) En ciencias de computación, API ([application programming interface](https://en.wikipedia.org/wiki/Application_programming_interface)) un término bastante amplio. :::info :bulb: **API** (application program interface) es un conjunto de rutinas, protocolos y herramientas para crear aplicaciones de software. La API especifica cómo deben interactuar los componentes de software y las API se utilizan al programar componentes de interfaz gráfica de usuario (GUI). ::: Este término puede ser bastante confuso ya que es TAN amplio. ### Web API Sin embargo, cuando pensamos en las API en el contexto del desarrollo de aplicaciones web, simplemente podemos pensar en ellas como **un sitio web que devuelve JSON en lugar de HTML** para que una computadora pueda usar los datos devueltos para hacer algo con ellos. Permite que un programa interactúe con un sitio web a través de Internet para que pueda usar los datos de ese sitio web. ![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_414e811e5af908e9092e4233dd28693d.png) ### ¿Por qué necesitas una API? Hoy en día, existen muchas razones diferentes por las que necesitaría una API [application programming interface](https://en.wikipedia.org/wiki/Application_programming_interface) para tu aplicación web. 1. Es probable que desee proporcionar datos a una aplicación iOS/Android 2. Permitir que otros desarrolladores utilicen tus datos. 3. Dividir tu código en varios servicios más pequeños para que sea más fácil de administrar. 4. Utilizar un framwork de front-end para servir sus datos como Angular, VueJS o ReactJS Éstas son solo algunas de las razones. Ahora es muy difícil ser desarrollador y no tener que trabajar sin usar una API. ## Ejemplos de APIs Muchos sitios web proporcionan APIs para que podamos escribir software que interactúe con sus servicios. Aquí puede ver una pequeña lista de lo que es posible cuando cualquier servicio proporciona una API: ### [Twitter](https://dev.twitter.com/rest/public) ![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_8e8bc28015f040bdea2c71345a338c33.png) ---- ### [Soundcloud](https://developers.soundcloud.com/docs/api/reference) ![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_dcdd8d7e755372d6cd6700e1f53dea1b.png) ---- ### [ProgrammableWeb | API Directory](https://www.programmableweb.com/category/all/apis) ![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_2a60bf9b7f2fe55c3a7fc3d7284030df.png) ---- ### APIs falsas Algunas personas también han creado API falsas para poder probar y jugar un poco: - [ReqRes](http://reqres.in/) - [JSONPlaceHolder](http://jsonplaceholder.typicode.com/)