{"id":1654,"date":"2024-08-02T10:56:52","date_gmt":"2024-08-02T08:56:52","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=1654"},"modified":"2024-08-02T10:56:53","modified_gmt":"2024-08-02T08:56:53","slug":"003-helper-de-conexion-a-api-rest","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/javascript\/javascript-practico\/18-single-page-application-spa\/003-helper-de-conexion-a-api-rest\/","title":{"rendered":"003. Helper de conexi\u00f3n a API REST"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">En este cap\u00edtulo vamos a continuar con la estructura del proyecto que comenzamos a crear en el cap\u00edtulo anterior. Vamos a desarrollar algunos <strong>componentes<\/strong> y <strong>auxiliares <\/strong>que nos servir\u00e1n a lo largo del curso, y tambi\u00e9n agregar <strong>estilos<\/strong>. Recordemos que el esquema que hab\u00edamos creado era el siguiente:<\/p>\n\n\n\n<!--more-->\n\n\n\n<h2 class=\"wp-block-heading\">Esquema<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>spa\n<ul class=\"wp-block-list\">\n<li>index.html<\/li>\n\n\n\n<li>app\n<ul class=\"wp-block-list\">\n<li>App.js<\/li>\n\n\n\n<li>index.js<\/li>\n\n\n\n<li>assets\n<ul class=\"wp-block-list\">\n<li>favicon.png<\/li>\n\n\n\n<li>loader.svg<\/li>\n\n\n\n<li>style.css<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>components<\/li>\n\n\n\n<li>helpers<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Vamos a trabajar en el archivo style.css, que va a tener la siguiente sintaxis.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\/* Reseteo de estilos *\/\nhtml {\n&nbsp; box-sizing: border-box;\n&nbsp; font-family: sans-serif;\n&nbsp; font-size: 16px;\n}\n\n*,\n*::after,\n*::before {\n&nbsp; box-sizing: inherit;\n}\n\nbody {\n&nbsp; margin: 0;\n&nbsp; overflow-x: hidden;\n}\n\na {\n&nbsp; color: #01579b;\n&nbsp; transition: color 0.3s ease;\n}\n\na:hover {\n&nbsp; color: #00b00f;\n}\n\nh1 {\n&nbsp; text-align: center;\n}\n\nimg {\n&nbsp; max-width: 100%;\n&nbsp; height: auto;\n}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">En este cap\u00edtulo trabajaremos dentro de la carpeta <em>helpers<\/em>. Para este proyecto tendremos dos <strong>helpers<\/strong>, vamos a crear un archivo llamado <em>wp-api.js<\/em>, el cual guardar\u00e1 todas las <strong>variables<\/strong> que nos permiten consultar hacia un dominio de <strong>WordPress<\/strong>. En este archivo vamos a crear un <strong>objeto<\/strong> con todas las <strong>variables<\/strong> que nos van a ayudar a solicitar la informaci\u00f3n. Va a haber archivos de configuraci\u00f3n donde esos datos duros van a estar en este archivo, digamos que es como el archivo de conexi\u00f3n a la <strong>API<\/strong> de <strong>WordPress<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Veamos la sintaxis del archivo <em>wp-api.js<\/em>.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">const NAME = \"sutilweb\",\n&nbsp; DOMAIN = `https:\/\/${NAME}.eu`,\n&nbsp; SITE = `${DOMAIN}\/wp-json\/`,\n&nbsp; API_WP = `${SITE}\/wp\/v2`,\n&nbsp; POSTS = `${API_WP}\/posts?_embed`,\n&nbsp; POST = `${API_WP}\/posts`,\n&nbsp; SEARCH = `${API_WP}\/search?_embed&amp;search=`;\n\nexport default {\n&nbsp; NAME\n  DOMAIN,\n&nbsp; SITE,\n&nbsp; API_WP,\n&nbsp; POSTS,\n&nbsp; POST,\n&nbsp; SEARCH,\n};<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Y nos vamos a nuestro archivo <em>App.js<\/em>, e importamos las constantes que hemos creado, con lo cual la sintaxis quedar\u00e1 de la siguiente manera.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">import api from \".\/helpers\/wp-api.js\";\n\nexport function App() {\n&nbsp; document.getElementById(\n&nbsp; &nbsp; \"root\"\n&nbsp; ).innerHTML = `&lt;h1&gt;Bienvenidos a mi primer SPA con Vanilla JS&lt;\/h1&gt;`;\n&nbsp; console.log(api);\n}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Archivos<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Los archivos los puedes descargar desde el siguiente enlace:<\/p>\n\n\n\n<div class=\"wp-block-file alignleft\"><a id=\"wp-block-file--media-461030de-253b-405b-b71a-1396531cd35d\" href=\"https:\/\/blog.sutilweb.eu\/wp-content\/uploads\/2024\/08\/spa.zip\">spa<\/a><a href=\"https:\/\/blog.sutilweb.eu\/wp-content\/uploads\/2024\/08\/spa.zip\" class=\"wp-block-file__button wp-element-button\" download aria-describedby=\"wp-block-file--media-461030de-253b-405b-b71a-1396531cd35d\">Descarga<\/a><\/div>\n","protected":false},"excerpt":{"rendered":"<p>En este cap\u00edtulo vamos a continuar con la estructura del proyecto que comenzamos a crear en el cap\u00edtulo anterior. Vamos a desarrollar&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1646,"menu_order":2,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-1654","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 continuar con la estructura del proyecto que comenzamos a crear en el cap\u00edtulo anterior. Vamos a desarrollar...","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1654","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=1654"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1654\/revisions"}],"predecessor-version":[{"id":1657,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1654\/revisions\/1657"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1646"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=1654"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}