{"id":1579,"date":"2024-08-02T07:29:42","date_gmt":"2024-08-02T05:29:42","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=1579"},"modified":"2024-08-02T07:29:43","modified_gmt":"2024-08-02T05:29:43","slug":"001-introduccion-a-la-api-rest","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/javascript\/javascript-practico\/16-api-rest\/001-introduccion-a-la-api-rest\/","title":{"rendered":"001. Introducci\u00f3n a la API REST"},"content":{"rendered":"\n

En este cap\u00edtulo vamos a ver una introducci\u00f3n a lo que son las API REST<\/strong>. En cap\u00edtulos anteriores hemos estado manejando como acceder a datos que est\u00e1n expuestos en Internet en una base de datos<\/strong>, en un servicio<\/strong>… din\u00e1micamente y as\u00edncronamente con la t\u00e9cnica de Ajax<\/strong>.<\/p>\n\n\n\n\n\n\n\n

El concepto de API REST<\/strong> se vuelve muy importante porque de hecho es el paradigma o manera en como se trabajan en la actualidad tanto las aplicaciones web<\/strong> como las aplicaciones nativas<\/strong>.<\/p>\n\n\n\n

As\u00ed como en la primera d\u00e9cada del siglo XXI el modelo de arquitectura MVC<\/strong> fue muy popular, en la actualidad el esquema est\u00e1 basado en la arquitectura denominada API REST<\/strong>.<\/p>\n\n\n\n

Qu\u00e9 es una API REST<\/h2>\n\n\n\n

En los cap\u00edtulos dedicados al DOM<\/strong> comentamos lo que son las APIs<\/strong>, y dec\u00edamos que significaba Application Programming Interface<\/strong> (Interface de programaci\u00f3n de aplicaciones<\/strong>) no es mas que un conjunto de rutinas que nos provee acceso a ciertas funcionalidades de un software espec\u00edfico, como eran las APIs<\/strong> para la manipulaci\u00f3n del HTML<\/strong> v\u00eda Javascript<\/strong> como es la API del DOM<\/strong>, pero no s\u00f3lo tenemos eso, tenemos infinitas APIs<\/strong> como la de la geolocalizaci\u00f3n<\/strong>, el acceso a la webcam<\/strong>…<\/p>\n\n\n\n

APIs nativas y APIs externas<\/h2>\n\n\n\n

Dentro del mundo de las APIs<\/strong> tenemos APIs nativas<\/strong> y APIs externas<\/strong>, las primeras son aquellas en las cuales todo el motor de Javascript<\/strong> trae integrado para acceder al DOM<\/strong>, a la webcam<\/strong>, a la bater\u00eda<\/strong>, los puertos USB<\/strong>, los estados de conexi\u00f3n<\/strong>, la geolocalizaci\u00f3n<\/strong>.<\/p>\n\n\n\n

Y tambi\u00e9n podemos tener APIs<\/strong> externas<\/strong>, como por ejm acceder a datos externos mediante la API de GitHub<\/strong>, el API de Facebook<\/strong>, el API de Twitter<\/strong> para obtener los datos de un usuario, WordPress<\/strong>, desde hace algunos a\u00f1os tiene una API de tipo REST<\/strong> en la cual podemos construir un front<\/strong> con HTML<\/strong> simplemente accediendo a la API REST<\/strong> de un sitio web<\/strong>, y poder extraer categor\u00edas<\/strong>, etiquetas<\/strong>, art\u00edculos<\/strong>, informaci\u00f3n de los usuarios<\/strong>, y no tener que depender de los fronts<\/strong> de las plantillas de WordPress<\/strong>.<\/p>\n\n\n\n

La mayor\u00eda de APIs<\/strong> externas facilitan una documentaci\u00f3n para que sepas como se pueden usar, dici\u00e9ndote cuales son las rutas<\/strong> o los endpoints<\/strong>, y de tal manera debes recoger la informaci\u00f3n.<\/p>\n\n\n\n

Comercios electr\u00f3nicos<\/strong> como Amazon<\/strong> tienen sus propias APIs<\/strong> y son externas porque no son nativas del navegador, si no que las han hecho terceras personas.<\/p>\n\n\n\n

Qu\u00e9 es REST<\/h2>\n\n\n\n

REST<\/strong> es un t\u00e9rmino acu\u00f1ado en una tesis doctoral de una persona llamada Roy Fielding<\/strong> al que se le considera el padre de la especificaci\u00f3n HTTP<\/strong>, fue de las personas que estableci\u00f3 las reglas que tiene este protocolo, y hay que recordar que el protocolo HTTP<\/strong> es en el que navegamos en Internet<\/strong>. REST<\/strong> significa REpresentational State Transfer<\/strong> o Transferencia del Estado Representacional<\/strong>, y un servicio REST<\/strong> es un conjunto de restricciones con las que podemos crear un estilo de arquitectura de software<\/strong> que es el que se viene desarrollando con toda la nueva hornada de frameworks<\/strong> reactivos como son React<\/strong>, Angular<\/strong>, Vue<\/strong>, Svelt<\/strong>… hemos ido migrando de un modelo vista controlador<\/strong> a un esquema de arquitectura basada en REST<\/strong>.<\/p>\n\n\n\n

REST<\/strong> se basa en las reglas<\/strong> y est\u00e1ndares<\/strong> del protocolo HTTP<\/strong>, y en la mayor\u00eda de las empresas as\u00ed es como trabajan tanto en el desarrollo web<\/strong> como en el desarrollo nativo<\/strong>.<\/p>\n\n\n\n

Caracter\u00edstica REST<\/h2>\n\n\n\n

1. Relaci\u00f3n cliente – servidor<\/h3>\n\n\n\n

A diferencia de lo que era un modelo vista controlador<\/strong> donde el controlador<\/strong> era el orquestador<\/strong> y el que se comunicaba con la base de datos<\/strong> y el que recib\u00eda las peticiones de los usuarios… en REST<\/strong> el cliente<\/strong> y el servidor<\/strong> est\u00e1n d\u00e9bilmente acoplados<\/strong>, lo que quiere decir que est\u00e1n separados, es decir, al cliente<\/strong> no le interesan los detalles de como se implement\u00f3 el lado del servidor<\/strong> que le est\u00e1 devolviendo esa respuesta en formato JSON<\/strong> o XML<\/strong>, y al servidor<\/strong> no le interesa como el cliente<\/strong> va a utilizar esta informaci\u00f3n para pintarla en los datos, es por ello que se dice que est\u00e1n desacoplados<\/strong>.<\/p>\n\n\n\n

2. Las API REST son sin estado<\/h3>\n\n\n\n

Cada petici\u00f3n<\/strong> recibida por el servidor<\/strong> se va a manejar de manera independiente, lo que evita que se mantengan sesiones<\/strong> conectadas como para hacer varias peticiones al mismo tiempo.<\/p>\n\n\n\n

3. Las API REST son cacheables<\/h3>\n\n\n\n

Significa que tiene que haber un sistema de almacenamiento en cach\u00e9<\/strong> para evitar repetitivas conexiones hacia un mismo recurso<\/strong> del servidor<\/strong>, lo que impactar\u00e1 de manera positiva en el rendimiento de las aplicaciones, acelerando el tiempo de carga de manera sustancial.<\/p>\n\n\n\n

4.Interfaz uniforme<\/h3>\n\n\n\n

Una interfaz gen\u00e9rica<\/strong> que permita la administraci\u00f3n entre la interacci\u00f3n entre el cliente<\/strong> y el servidor<\/strong> de una manera uniforme, lo que significa que para cada petici\u00f3n<\/strong> va a existir una URL<\/strong> \u00fanica<\/strong> y con las caracter\u00edsticas de como nosotros le vamos a enviar la informaci\u00f3n, o lo que es lo mismo, lo que se conoce como los end-points<\/strong> o puntos finales<\/strong> a los cuales vamos a acceder a cierto determinado recurso.<\/p>\n\n\n\n

5. Sistema de capas<\/h3>\n\n\n\n

Del lado del servidor<\/strong> tiene que haber varias capas a la hora de implementarlas para estar previstos por si m\u00e1s adelante ese desarrollo escala porque se necesiten m\u00e1s caracter\u00edsticas, la manera en que ha sido programada permite esa escalabilidad, capas para monitorizar el rendimiento, y la capa de seguridad (muy importante).<\/p>\n\n\n\n

En el mundo del desarrollo web<\/strong>, como hemos dicho, este va a ser el modelo de arquitectura en el que vamos a estar trabajando.<\/p>\n\n\n\n

\u00bfLas API son el nuevo CRUD?<\/h2>\n\n\n\n

El CRUD<\/strong> es un concepto que viene de las bases de datos<\/strong>, que significa CREATE-READ-UPDATE-DELETE<\/strong> (crear – leer – actualizar – eliminar<\/strong>) que son las 4 operaciones b\u00e1sicas que podemos hacerle a una base de datos<\/strong>.<\/p>\n\n\n\n

Las API REST<\/strong> trabajan con el protocolo HTTP<\/strong>, lo que viene a ser una operaci\u00f3n de inserci\u00f3n<\/strong>, en REST<\/strong> va a ser un POST<\/strong> (lo que en bases de datos era un INSERT<\/strong>), una consulta<\/strong> se convierte en GET<\/strong> (lo que en bases de datos<\/strong> es SELECT<\/strong>), la actualizaci\u00f3n<\/strong> en PUT<\/strong> (en bases de datos<\/strong> se utiliza UPDATE<\/strong>), y para eliminar<\/strong> se utiliza DELETE<\/strong> (mismo t\u00e9rmino se utiliza en bases de datos<\/strong>).<\/p>\n\n\n\n

Operaciones CRUD<\/th>Peticiones REST<\/th><\/tr>
INSERT<\/td>POST<\/td><\/tr>
SELECT<\/td>GET<\/td><\/tr>
UPDATE<\/td>PUT<\/td><\/tr>
DELETE<\/td>DELETE<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

La ventaja de las API<\/strong> de tipo REST<\/strong> es que como el cliente<\/strong> y el servidor<\/strong> est\u00e1n desacoplados<\/strong> (separados<\/strong>), a diferencia de la interdependencia que nos ped\u00eda el modelo vista controlador<\/strong>, podemos decidir en que base de datos<\/strong> queremos trabajar, si es SQL<\/strong> o NoSQL<\/strong>, en qu\u00e9 lenguaje de programaci\u00f3n<\/strong> (Java<\/strong>, Node<\/strong>, PHP<\/strong>. Ruby<\/strong>, Phyton<\/strong>). Construimos nuestra API<\/strong> de tipo REST<\/strong> y lo \u00fanico que hacemos es exponer al cliente, y el cliente no nos va a interesar el tipo de cliente que sea, mientras le expongamos la informaci\u00f3n en JSON<\/strong> y en XML<\/strong> que son dos formatos de intercambio de informaci\u00f3n<\/strong> perfectamente validados por los diferentes lenguajes y tecnolog\u00edas de informaci\u00f3n, no nos importa si el front<\/strong> que nos est\u00e1 haciendo la petici\u00f3n es un front<\/strong> de una aplicaci\u00f3n en Android<\/strong>, en Ios<\/strong>, para Windows<\/strong>, o en el navegador web hecha con Javascript<\/strong>. Al desacoplar todo ello, podemos tener diferentes fronts<\/strong> con diferentes necesidades, pero la parte del modelado de la base de datos<\/strong> y de la API<\/strong> sirve para todos estos escenarios.<\/p>\n\n\n\n

Podemos pensar en servicios como Uber<\/strong>, o en las redes sociales<\/strong>, podemos verlo desde navegadores<\/strong>, aplicaciones nativas<\/strong>… lo \u00fanico que cambia es el escenario de front<\/strong> (del cliente) pero los datos que se consumen est\u00e1n centralizados en la misma API<\/strong> de tipo REST<\/strong>.<\/p>\n\n\n\n

Para poder aprender y trabajar con API REST<\/strong> vamos a tener que instalar en nuestro ordenador Node.js<\/strong> y Postman<\/strong> (o en su caso Insomnia<\/strong>).<\/p>\n\n\n\n

En el siguiente cap\u00edtulo vamos a descargar el JSON Server<\/strong>, crear nuestra API<\/strong> falsa<\/strong> y empezar a hacer pruebas de peticiones con esta aplicaci\u00f3n Insomnia<\/strong> (o Postman<\/strong>).<\/p>\n\n\n\n

\n

Nota<\/strong>: tanto Insomnia<\/strong> como Postman<\/strong> soportan aplicaciones de tipo REST<\/strong> y tambi\u00e9n de tipo GraphQL<\/strong>.<\/p>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"

En este cap\u00edtulo vamos a ver una introducci\u00f3n a lo que son las API REST. En cap\u00edtulos anteriores hemos estado […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1577,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1579","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"En este cap\u00edtulo vamos a ver una introducci\u00f3n a lo que son las API REST. En cap\u00edtulos anteriores hemos estado […]","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1579","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=1579"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1579\/revisions"}],"predecessor-version":[{"id":1581,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1579\/revisions\/1581"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1577"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=1579"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}