{"id":1583,"date":"2024-12-15T15:31:46","date_gmt":"2024-12-15T18:31:46","guid":{"rendered":"https:\/\/desvendandoocodigo.com.br\/?p=1583"},"modified":"2024-12-16T20:10:34","modified_gmt":"2024-12-16T23:10:34","slug":"tutorial-criando-um-backend-e-um-frontend-com-javascript","status":"publish","type":"post","link":"https:\/\/desvendandoocodigo.com.br\/?p=1583","title":{"rendered":"Tutorial &#8211; Criando um Backend e um FrontEnd com JavaScript"},"content":{"rendered":"\n<p>GitHub BackEnd <a href=\"https:\/\/github.com\/marcoscaldas\/BackEnd.git\">https:\/\/github.com\/marcoscaldas\/BackEnd.git<\/a><\/p>\n\n\n\n<p>GitHub FrontEnd <a href=\"https:\/\/github.com\/marcoscaldas\/FrontEnd.git\">https:\/\/github.com\/marcoscaldas\/FrontEnd.git<\/a><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>Voc\u00ea j\u00e1 pensou em criar uma aplica\u00e7\u00e3o completa do zero? Esse \u00e9 o momento de tirar a ideia do papel e botar a m\u00e3o na massa! Neste tutorial, vamos explorar juntos como construir um backend poderoso e um frontend interativo utilizando apenas JavaScript. Isso mesmo, voc\u00ea vai aprender a desenvolver as duas partes essenciais de uma aplica\u00e7\u00e3o moderna usando a linguagem que domina o mundo web.<\/p>\n\n\n\n<p>Aqui, voc\u00ea n\u00e3o vai s\u00f3 aprender os conceitos te\u00f3ricos. Vamos direto ao ponto com um passo a passo pr\u00e1tico, claro e din\u00e2mico. Desde a cria\u00e7\u00e3o de um servidor com Node.js, at\u00e9 a montagem de uma interface incr\u00edvel com HTML, CSS e JavaScript, voc\u00ea estar\u00e1 no controle total do processo.<\/p>\n\n\n\n<p>Prepare-se para conectar suas ideias a um banco de dados, criar rotas, lidar com requisi\u00e7\u00f5es, e, claro, dar vida ao seu projeto com um design funcional e atraente.<\/p>\n\n\n\n<p>Se voc\u00ea sempre quis entender como front e backend se comunicam, este \u00e9 o tutorial que vai mudar sua forma de ver o desenvolvimento web.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Instalando os Pacotes<\/h2>\n\n\n\n<p>No momento da cria\u00e7\u00e3o desse tutorial vamos instalar os pacotes a seguir, por\u00e9m caso ocorra alguma atualiza\u00e7\u00e3o \u00e9 importante consultar a documenta\u00e7\u00e3o em www.npmjs.com<\/p>\n\n\n\n<ul>\n<li><strong>npm init -y<\/strong><\/li>\n\n\n\n<li><strong>npm i express<\/strong><\/li>\n\n\n\n<li><strong>npm i nodemon -g<\/strong><\/li>\n\n\n\n<li><strong>npm i knex<\/strong><\/li>\n\n\n\n<li><strong>npm i sqlite3<\/strong><\/li>\n\n\n\n<li><strong>npm i cors<\/strong><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Entendendo os Pacotes<\/h2>\n\n\n\n<p>O<strong> npm init -y<\/strong> \u00e9 usado para inicializar um projeto Node.js rapidamente, gerando um arquivo package.json com as configura\u00e7\u00f5es padr\u00e3o.<\/p>\n\n\n\n<p>O <strong>pacote express<\/strong>, instalado com o comando npm i express, \u00e9 uma biblioteca popular para criar e gerenciar servidores web no Node.js. Ele simplifica o desenvolvimento de APIs e aplica\u00e7\u00f5es web, fornecendo ferramentas para lidar com rotas, requisi\u00e7\u00f5es HTTP, middleware e muito mais.<\/p>\n\n\n\n<p>O pacote <strong>nodemon<\/strong>, instalado com o comando <strong>npm i nodemon -g<\/strong>, \u00e9 uma ferramenta que monitora automaticamente as mudan\u00e7as no c\u00f3digo do seu projeto Node.js. Sempre que voc\u00ea salva uma altera\u00e7\u00e3o, ele reinicia o servidor automaticamente, economizando tempo e facilitando o desenvolvimento. A op\u00e7\u00e3o -g instala o nodemon globalmente, permitindo que ele seja usado em qualquer projeto do seu sistema.<\/p>\n\n\n\n<p>O pacote <strong>knex<\/strong>, instalado com<strong> npm i knex<\/strong>, \u00e9 um <strong>query builder<\/strong> para bancos de dados SQL no Node.js. Ele facilita a cria\u00e7\u00e3o, manipula\u00e7\u00e3o e execu\u00e7\u00e3o de consultas SQL de forma program\u00e1tica, usando JavaScript. Compat\u00edvel com bancos como MySQL, PostgreSQL, SQLite e outros, o Knex simplifica tarefas como criar tabelas, inserir dados e realizar consultas complexas.<\/p>\n\n\n\n<p>O pacote <strong>sqlite3<\/strong>, instalado com <strong>npm i sqlite3<\/strong>, \u00e9 usado para trabalhar com o banco de dados SQLite em aplica\u00e7\u00f5es Node.js.<\/p>\n\n\n\n<p><strong>npm i cors <\/strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/p>\n\n\n\n<p><strong>O que \u00e9 uma requisi\u00e7\u00e3o CORS?<\/strong><\/p>\n\n\n\n<p><strong>CORS <\/strong>\u2014 Cross Origin Resource Sharing <em>(Compartilhamento de recursos com origens diferentes)<\/em> \u00e9 um sistema que utiliza headers adicionais ao tradicionais para determinar as permiss\u00f5es de uma aplica\u00e7\u00e3o ao acessar dados de um servidor de origem distinta. Um exemplo de requisi\u00e7\u00e3o cross-site \u00e9 quando seu frontend est\u00e1 hospedado em \u201chttp:\/\/a.com\u201d e a partir dele voc\u00ea precisa pedir alguns dados para sua API que est\u00e1 hospedada em \u201chttp:\/\/b.com\u201d. Por seguran\u00e7a, os navegadores por padr\u00e3o bloqueiam esse tipo de requisi\u00e7\u00e3o iniciado por um script (fetch, axios.get \u2026), isso significa que sua aplica\u00e7\u00e3o s\u00f3 poder\u00e1 fazer solicita\u00e7\u00f5es para a API se incluir os cabe\u00e7alhos CORS corretos e se o servidor estiver configurado corretamente.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Come\u00e7ando o Desenvolvimento<\/h2>\n\n\n\n<p>Vamos criar um arquivo inicial chamado <strong>app.js<\/strong> para testar nosso servidor, e depois com os c\u00f3digos iniciais inseridos vamos rodar o servidor com o comando nodemon app.js <\/p>\n\n\n\n<p>O comando nodemon app.js pode ser somente nodemon app sem o .js<\/p>\n\n\n\n<p>Ap\u00f3s rodar o servidor abrir o navegador com o endere\u00e7o conforme imagem.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"396\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-8-1024x396.png\" alt=\"\" class=\"wp-image-1593\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-8-1024x396.png 1024w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-8-300x116.png 300w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-8-768x297.png 768w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-8.png 1123w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"570\" height=\"122\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-9.png\" alt=\"\" class=\"wp-image-1594\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-9.png 570w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-9-300x64.png 300w\" sizes=\"(max-width: 570px) 100vw, 570px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"461\" height=\"124\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-1.png\" alt=\"\" class=\"wp-image-1585\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-1.png 461w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-1-300x81.png 300w\" sizes=\"(max-width: 461px) 100vw, 461px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p><strong>Obs<\/strong>: O c\u00f3digo fonte encontra-se no meu GitHub e esse passo a passo na cria\u00e7\u00e3o do servidor encontra-se na documenta\u00e7\u00e3o do <a href=\"https:\/\/expressjs.com\/en\/starter\/hello-world.html\">https:\/\/expressjs.com\/en\/starter\/hello-world.html<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Entendendo o app.Js<\/h2>\n\n\n\n<p>No programa app.js \u00e9 poss\u00edvel observar que cada arrow function associada a uma rota recebe dois par\u00e2metros: <strong>req <\/strong>(request) e <strong>res <\/strong>(response).&nbsp;<\/p>\n\n\n\n<p>Eles podem receber qualquer nome, mas <strong>req <\/strong>e <strong>res <\/strong>s\u00e3o os geralmente utilizados.<\/p>\n\n\n\n<p>O par\u00e2metro <strong>req <\/strong>cont\u00e9m as informa\u00e7\u00f5es que s\u00e3o passadas para a rota \u2013 por quem a acionou.<br>J\u00e1 <strong>res <\/strong>refere-se \u00e0 resposta da rota \u2013 como as mensagens exibidas nas duas rotas anteriormente criadas.<\/p>\n\n\n\n<p>Antes do <strong>listen()<\/strong> acrescentar o seguinte c\u00f3digo:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"801\" height=\"331\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-2.png\" alt=\"\" class=\"wp-image-1586\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-2.png 801w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-2-300x124.png 300w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-2-768x317.png 768w\" sizes=\"(max-width: 801px) 100vw, 801px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>A linha <strong>app.use(express.json());<\/strong>&nbsp; adiciona um middleware para reconhecer que o formato &#8216;combinado&#8217; para os dados a serem enviados pelo cliente e recebidos pelo programa no servidor \u00e9 o JSON.Como se fosse um parse.<\/p>\n\n\n\n<p>Na rota utilizamos o m\u00e9todo <strong>POST<\/strong> ou <strong>VERBO POST.<\/strong><\/p>\n\n\n\n<p>Rotas com <strong>GET<\/strong> podem ser acessadas diretamente no navegador.<\/p>\n\n\n\n<p>As demais podem ser testadas a partir de nossos programas, ou atrav\u00e9s de&nbsp; softwares como o INSOMNIA ou POSTMAN ou pelo site <strong>reqbin.com<\/strong> por\u00e9m tem que instalar uma extens\u00e3o no Chrome.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"572\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-3-1024x572.png\" alt=\"\" class=\"wp-image-1587\" style=\"width:677px;height:auto\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-3-1024x572.png 1024w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-3-300x168.png 300w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-3-768x429.png 768w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-3-1140x637.png 1140w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-3.png 1278w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Middlewares<\/strong><\/h2>\n\n\n\n<p>Um middleware \u00e9 uma esp\u00e9cie de mediador entre duas partes, algo que fica no meio (middle).&nbsp;<\/p>\n\n\n\n<p>Vamos construir um exemplo, para ilustrar uma poss\u00edvel funcionalidade para um middleware. Digamos que os administradores de um sistema gostariam de analisar quantas vezes ou em quais hor\u00e1rios determinadas rotas est\u00e3o sendo acionadas.<\/p>\n\n\n\n<p>Algo como um controle de logs, que poderia registrar a\u00e7\u00f5es como transfer\u00eancias financeiras, exclus\u00f5es ou altera\u00e7\u00f5es de dados, por exemplo.&nbsp;<br>Nesse caso, antes de acionar essas rotas, podemos fazer o sistema passar por um middleware que ir\u00e1 registrar essas a\u00e7\u00f5es. Acrescente o seguinte trecho ao <strong>app.js<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"787\" height=\"358\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-5.png\" alt=\"\" class=\"wp-image-1589\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-5.png 787w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-5-300x136.png 300w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-5-768x349.png 768w\" sizes=\"(max-width: 787px) 100vw, 787px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"439\" height=\"118\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-6.png\" alt=\"\" class=\"wp-image-1590\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-6.png 439w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-6-300x81.png 300w\" sizes=\"(max-width: 439px) 100vw, 439px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"837\" height=\"231\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-10.png\" alt=\"\" class=\"wp-image-1595\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-10.png 837w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-10-300x83.png 300w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-10-768x212.png 768w\" sizes=\"(max-width: 837px) 100vw, 837px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">MIGRATIONS<\/h2>\n\n\n\n<p>Para criar a tabela&nbsp; com Migrations instalar o pacote:<\/p>\n\n\n\n<p><strong>npx knex init&nbsp;&nbsp;&nbsp;<\/strong><\/p>\n\n\n\n<p>Vai ter como resposta Created .\/knexfile.js<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"313\" height=\"88\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-11.png\" alt=\"\" class=\"wp-image-1596\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-11.png 313w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-11-300x84.png 300w\" sizes=\"(max-width: 313px) 100vw, 313px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Editar o arquivo <strong>knexfile.js&nbsp; <\/strong>&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"897\" height=\"543\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-12.png\" alt=\"\" class=\"wp-image-1597\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-12.png 897w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-12-300x182.png 300w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-12-768x465.png 768w\" sizes=\"(max-width: 897px) 100vw, 897px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Criando a Tabela no Banco de Dados<\/h2>\n\n\n\n<p>Para criar o arquivo que ir\u00e1 conter a defini\u00e7\u00e3o da estrutura da tabela de livros, rode o comando:<\/p>\n\n\n\n<p><strong>npx knex migrate:make create_livros<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"728\" height=\"154\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-13.png\" alt=\"\" class=\"wp-image-1598\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-13.png 728w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-13-300x63.png 300w\" sizes=\"(max-width: 728px) 100vw, 728px\" \/><\/figure>\n\n\n\n<p>\u00c9 criado um diret\u00f3rio chamado migrations dentro do diret\u00f3rio data.<\/p>\n\n\n\n<p>No arquivo criado deixar conforme imagem.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"438\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-14-1024x438.png\" alt=\"\" class=\"wp-image-1599\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-14-1024x438.png 1024w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-14-300x128.png 300w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-14-768x328.png 768w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-14.png 1139w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Executando<strong>&nbsp;npx knex migrate:latest<\/strong><\/h2>\n\n\n\n<p>O comando <code><strong>npx knex migrate:latest<\/strong><\/code> serve para <strong>executar as migra\u00e7\u00f5es mais recentes<\/strong> em um banco de dados usando o Knex.js, que \u00e9 uma ferramenta de query builder para bancos de dados SQL no Node.js.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">O que ele faz?<\/h3>\n\n\n\n<ul>\n<li><strong>Migra\u00e7\u00f5es<\/strong> s\u00e3o scripts que definem altera\u00e7\u00f5es no banco de dados, como a cria\u00e7\u00e3o ou modifica\u00e7\u00e3o de tabelas, colunas e outros elementos do esquema.<\/li>\n\n\n\n<li>Ao rodar <code>npx knex migrate:latest<\/code>, o Knex ir\u00e1:\n<ul>\n<li>Verificar se existem migra\u00e7\u00f5es pendentes (que ainda n\u00e3o foram aplicadas).<\/li>\n\n\n\n<li>Executar as migra\u00e7\u00f5es n\u00e3o aplicadas na ordem em que foram criadas.<\/li>\n\n\n\n<li>Atualizar o banco de dados com as mudan\u00e7as definidas nas migra\u00e7\u00f5es.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"371\" height=\"106\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-15.png\" alt=\"\" class=\"wp-image-1600\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-15.png 371w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-15-300x86.png 300w\" sizes=\"(max-width: 371px) 100vw, 371px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Seeds: \u201cSemeando \u201d dados iniciais com <strong>npx knex seed:make 001_add_livros<\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"536\" height=\"115\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-16.png\" alt=\"\" class=\"wp-image-1601\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-16.png 536w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-16-300x64.png 300w\" sizes=\"(max-width: 536px) 100vw, 536px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>O comando <code><strong>npx knex seed:make 001_add_livros<\/strong><\/code> \u00e9 usado para criar um novo arquivo de seed no Knex.js. Seeds s\u00e3o scripts que permitem inserir dados iniciais ou de teste no banco de dados.<\/p>\n\n\n\n<p>Neste caso, o comando cria um arquivo de seed chamado <code>001_add_livros<\/code>, que pode ser usado para adicionar registros na tabela <code>livros<\/code> (ou outra tabela definida no script). O n\u00famero <code>001<\/code> geralmente indica a ordem das seeds a serem executadas.<\/p>\n\n\n\n<p>Editar esse arquivo dentro da pasta <strong>.\/data\/seeds<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"927\" height=\"891\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-18.png\" alt=\"\" class=\"wp-image-1603\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-18.png 927w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-18-300x288.png 300w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-18-768x738.png 768w\" sizes=\"(max-width: 927px) 100vw, 927px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Populando o Banco de Dados com npx knex seed:run<\/h2>\n\n\n\n<p>O comando <code>npx knex seed:run<\/code> \u00e9 usado para <strong>executar os arquivos de seed<\/strong> no Knex.js. Ele insere os dados definidos nos scripts de seed no banco de dados. Essencialmente, esse comando popula o banco de dados com dados iniciais ou de teste, facilitando a configura\u00e7\u00e3o do ambiente de desenvolvimento ou testes.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"319\" height=\"82\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-19.png\" alt=\"\" class=\"wp-image-1604\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-19.png 319w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-19-300x77.png 300w\" sizes=\"(max-width: 319px) 100vw, 319px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Criando Conex\u00e3o com Banco de Dados<\/h2>\n\n\n\n<p>O arquivo de configura\u00e7\u00e3o criado anteriormente (knexfile.js) serve para definir o driver do banco de dados e par\u00e2metros da conex\u00e3o utilizados no processo de cria\u00e7\u00e3o das migrations e seeds da aplica\u00e7\u00e3o.&nbsp;<\/p>\n\n\n\n<p>Agora, precisamos criar um arquivo que vai conter esses detalhes de conex\u00e3o com o banco de dados a serem utilizados pelo programa.<\/p>\n\n\n\n<p>Para isso, crie o arquivo <strong>db_config.js<\/strong> dentro da pasta <strong>data<\/strong>, e insira as seguintes linhas:<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"743\" height=\"398\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-21.png\" alt=\"\" class=\"wp-image-1606\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-21.png 743w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-21-300x161.png 300w\" sizes=\"(max-width: 743px) 100vw, 743px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Organizando as Rotas<\/h2>\n\n\n\n<p>Na pasta raiz do projeto criar uma arquivo <strong>livros.js<\/strong> para organizar a rotas.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1017\" height=\"495\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-22.png\" alt=\"\" class=\"wp-image-1607\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-22.png 1017w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-22-300x146.png 300w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-22-768x374.png 768w\" sizes=\"(max-width: 1017px) 100vw, 1017px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Atualizando o app.js<\/h2>\n\n\n\n<p>Inserir antes do <strong>app.listen<\/strong> a rota para livros com seguinte c\u00f3digo:<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1004\" height=\"834\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-23.png\" alt=\"\" class=\"wp-image-1608\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-23.png 1004w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-23-300x249.png 300w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-23-768x638.png 768w\" sizes=\"(max-width: 1004px) 100vw, 1004px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Acessando a API<\/h2>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"580\" height=\"713\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-24.png\" alt=\"\" class=\"wp-image-1609\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-24.png 580w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-24-244x300.png 244w\" sizes=\"(max-width: 580px) 100vw, 580px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>CRUD &#8211; Create, Read, Update, Delete<\/strong><\/h2>\n\n\n\n<p>Acrescentar ao arquivo <strong>livros.js<\/strong> as seguintes linhas:<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"815\" height=\"596\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-25.png\" alt=\"\" class=\"wp-image-1610\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-25.png 815w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-25-300x219.png 300w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-25-768x562.png 768w\" sizes=\"(max-width: 815px) 100vw, 815px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"629\" height=\"417\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-26.png\" alt=\"\" class=\"wp-image-1611\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-26.png 629w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-26-300x199.png 300w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-26-500x330.png 500w\" sizes=\"(max-width: 629px) 100vw, 629px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Adicionando Filtros<\/h2>\n\n\n\n<p>Podemos adicionar filtros no arquivo<strong> livros.js<\/strong> conforme image:<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"647\" height=\"862\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-28.png\" alt=\"\" class=\"wp-image-1613\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-28.png 647w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-28-225x300.png 225w\" sizes=\"(max-width: 647px) 100vw, 647px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"418\" height=\"191\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-29.png\" alt=\"\" class=\"wp-image-1614\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-29.png 418w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-29-300x137.png 300w\" sizes=\"(max-width: 418px) 100vw, 418px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Importando o CORS<\/h2>\n\n\n\n<p>No arquivo<strong> livros.js<\/strong> acrescente os c\u00f3digos das linhas 3 e 4 conforme imagem:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"392\" height=\"153\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-27.png\" alt=\"\" class=\"wp-image-1612\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-27.png 392w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-27-300x117.png 300w\" sizes=\"(max-width: 392px) 100vw, 392px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Consumindo a API <\/h2>\n\n\n\n<p>Para consumir nossa API podemos criar um documento simples conforme imagem:<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"792\" height=\"507\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-30.png\" alt=\"\" class=\"wp-image-1615\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-30.png 792w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-30-300x192.png 300w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-30-768x492.png 768w\" sizes=\"(max-width: 792px) 100vw, 792px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"322\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-31-1024x322.png\" alt=\"\" class=\"wp-image-1616\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-31-1024x322.png 1024w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-31-300x94.png 300w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-31-768x242.png 768w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-31-1140x359.png 1140w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-31.png 1337w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">CRIANDO O FRONTEND<\/h2>\n\n\n\n<p>Instalando os Pacotes<\/p>\n\n\n\n<ul>\n<li><strong>npx create-react-app front<\/strong><\/li>\n\n\n\n<li><strong>npm install web-vitals<\/strong><\/li>\n\n\n\n<li><strong>npm i react-hook-form<\/strong><\/li>\n\n\n\n<li><strong>npm i axios<\/strong><\/li>\n\n\n\n<li><strong>npm i react-router-dom@6<\/strong><\/li>\n\n\n\n<li><strong>npm i react-google-charts<\/strong><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Entendendo os Pacotes<\/h2>\n\n\n\n<p>O pacote <strong>npx create-react-app front<\/strong> \u00e9 usado para criar um novo projeto React chamado &#8220;front&#8221;. Ele configura automaticamente a estrutura b\u00e1sica do projeto, instala as depend\u00eancias necess\u00e1rias e prepara o ambiente de desenvolvimento, permitindo que voc\u00ea comece a construir sua aplica\u00e7\u00e3o React de forma r\u00e1pida e simples.<\/p>\n\n\n\n<p>O pacote <strong>web-vitals<\/strong> \u00e9 usado para medir e monitorar as principais m\u00e9tricas de desempenho de uma p\u00e1gina web, como o tempo de carregamento, a interatividade e a estabilidade visual. Ele ajuda a avaliar a experi\u00eancia do usu\u00e1rio, fornecendo dados importantes para otimizar o desempenho da aplica\u00e7\u00e3o.<\/p>\n\n\n\n<p>O pacote <strong>react-hook-form<\/strong> facilita a gest\u00e3o de formul\u00e1rios em aplica\u00e7\u00f5es React, oferecendo uma maneira simples e eficiente de lidar com valida\u00e7\u00e3o, coleta de dados e controle de estado, sem a necessidade de escrever muito c\u00f3digo. Ele melhora a performance ao minimizar o re-render das componentes.<\/p>\n\n\n\n<p>O pacote <strong>axios <\/strong>\u00e9 uma biblioteca para <strong>fazer requisi\u00e7\u00f5es HTTP<\/strong> em JavaScript, tanto no navegador quanto no Node.js. Ele facilita a comunica\u00e7\u00e3o com APIs, permitindo enviar e receber dados de forma simples e eficiente, com suporte a Promises e async\/await.<\/p>\n\n\n\n<p>O pacote <strong>react-router-dom@6<\/strong> \u00e9 utilizado para gerenciar navega\u00e7\u00e3o e roteamento em aplica\u00e7\u00f5es React. Ele permite definir rotas para diferentes componentes e facilitar a navega\u00e7\u00e3o entre p\u00e1ginas dentro de uma SPA (Single Page Application), mantendo o hist\u00f3rico de navega\u00e7\u00e3o sem recarregar a p\u00e1gina.<\/p>\n\n\n\n<p>O pacote <strong>react-google-charts <\/strong>permite integrar gr\u00e1ficos do Google Charts em aplica\u00e7\u00f5es React. Ele facilita a cria\u00e7\u00e3o de gr\u00e1ficos interativos e personaliz\u00e1veis, como barras, linhas e pizza, utilizando os dados da sua aplica\u00e7\u00e3o.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Come\u00e7ando o Desenvolvimento<\/h2>\n\n\n\n<p>Criar o projeto com o comando  <strong>npx create-react-app front<\/strong><\/p>\n\n\n\n<p>Instalar o pacote <strong>npm install web-vitals<\/strong> dentro da pasta do projeto <strong>front<\/strong>.<\/p>\n\n\n\n<p>Para rodar a aplica\u00e7\u00e3o entrar na pasta do projeto e digitar <strong>npm start<\/strong><\/p>\n\n\n\n<p>A primeira vez que rodar a aplica\u00e7\u00e3o pode ser que demore um pouco.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"736\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-32-1024x736.png\" alt=\"\" class=\"wp-image-1623\" style=\"width:543px;height:auto\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-32-1024x736.png 1024w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-32-300x216.png 300w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-32-768x552.png 768w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-32-1140x819.png 1140w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-32.png 1201w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Alterar o html da Pasta Public&nbsp;<\/h2>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"676\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-34-1024x676.png\" alt=\"\" class=\"wp-image-1627\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-34-1024x676.png 1024w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-34-300x198.png 300w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-34-768x507.png 768w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-34-500x330.png 500w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-34.png 1118w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>No arquivo <strong>index.js<\/strong>&nbsp; deixar o c\u00f3digo conforme imagem.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"542\" height=\"284\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-62.png\" alt=\"\" class=\"wp-image-1662\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-62.png 542w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-62-300x157.png 300w\" sizes=\"(max-width: 542px) 100vw, 542px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>No arquivo <strong>App.js<\/strong> deixar c\u00f3digo conforme imagem.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"416\" height=\"126\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-47.png\" alt=\"\" class=\"wp-image-1643\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-47.png 416w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-47-300x91.png 300w\" sizes=\"(max-width: 416px) 100vw, 416px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Criando Componentes<\/h2>\n\n\n\n<p>Criar uma pasta <strong>components <\/strong>dentro de <strong>src<\/strong> <strong>&nbsp;<\/strong>e criar um arquivo com o nome <strong>MenuSuperior.js<\/strong><\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"585\" height=\"384\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-48.png\" alt=\"\" class=\"wp-image-1645\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-48.png 585w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-48-300x197.png 300w\" sizes=\"(max-width: 585px) 100vw, 585px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>Criar um arquivo &nbsp; <strong>InclusaoLivros.js<\/strong>&nbsp; na mesma pasta components<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-39-1024x768.png\" alt=\"\" class=\"wp-image-1632\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-39-1024x768.png 1024w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-39-300x225.png 300w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-39-768x576.png 768w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-39.png 1134w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Editar o <strong>APP.js<\/strong> e depois testar <strong>npm start<\/strong><\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"605\" height=\"348\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-40.png\" alt=\"\" class=\"wp-image-1633\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-40.png 605w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-40-300x173.png 300w\" sizes=\"(max-width: 605px) 100vw, 605px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"446\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-49-1024x446.png\" alt=\"\" class=\"wp-image-1646\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-49-1024x446.png 1024w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-49-300x131.png 300w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-49-768x334.png 768w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-49-1140x496.png 1140w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-49.png 1263w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Ajustar o arquivo <strong>InclusaoLivros.js<\/strong><\/h2>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"866\" height=\"841\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-42.png\" alt=\"\" class=\"wp-image-1635\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-42.png 866w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-42-300x291.png 300w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-42-768x746.png 768w\" sizes=\"(max-width: 866px) 100vw, 866px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>No <strong>return <\/strong>na tag <strong>form&nbsp; <\/strong>modificar para:<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><img decoding=\"async\" width=\"425px;\" height=\"86px;\" src=\"https:\/\/lh7-rt.googleusercontent.com\/slidesz\/AGV_vUcVXjnZGOb1lbUjXgHq4ujy554-ENqbtD24yV2JdUawM-ayuQ3mJzyvwdtihKnBnefOdfTFeJv2Ev9S-UvjRi5tfvOim7z-rEULywHJ7jh4F1JMy5ZBkV8oVLMkTp-IR9eVmytYdw=s2048?key=jqL0HiMLPrbAeOJSldIi5ISg\"><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>Dessa forma, indicamos que a fun\u00e7\u00e3o salvar ser\u00e1 chamada quando enviar o formul\u00e1rio.<\/p>\n\n\n\n<p>Acrescentar o <strong>register <\/strong>para cada campo do formul\u00e1rio.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"913\" height=\"839\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-44.png\" alt=\"\" class=\"wp-image-1637\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-44.png 913w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-44-300x276.png 300w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-44-768x706.png 768w\" sizes=\"(max-width: 913px) 100vw, 913px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Rodar um teste e dever\u00e1 aparecer o <strong>alert <\/strong>conforme imagem.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"412\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-50-1024x412.png\" alt=\"\" class=\"wp-image-1647\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-50-1024x412.png 1024w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-50-300x121.png 300w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-50-768x309.png 768w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-50-1140x459.png 1140w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-50.png 1233w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Ap\u00f3s o teste comentar as seguintes linhas em <strong>InclusaoLivros.js<\/strong>:<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"424\" height=\"74\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-45.png\" alt=\"\" class=\"wp-image-1638\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-45.png 424w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-45-300x52.png 300w\" sizes=\"(max-width: 424px) 100vw, 424px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Criar na pasta src um arquivo &nbsp; <\/strong>config_axios.js<\/h2>\n\n\n\n<p>Esse arquivo cria uma inst\u00e2ncia Axios com a URL base do Web Service a ser acessado pelo app<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"834\" height=\"541\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-51.png\" alt=\"\" class=\"wp-image-1648\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-51.png 834w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-51-300x195.png 300w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-51-768x498.png 768w\" sizes=\"(max-width: 834px) 100vw, 834px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Editar <\/strong>InclusaoLivros.js<\/h2>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"659\" height=\"829\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-52.png\" alt=\"\" class=\"wp-image-1649\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-52.png 659w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-52-238x300.png 238w\" sizes=\"(max-width: 659px) 100vw, 659px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Foram inseridos os <strong>imports<\/strong><\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"405\" height=\"122\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-53.png\" alt=\"\" class=\"wp-image-1650\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-53.png 405w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-53-300x90.png 300w\" sizes=\"(max-width: 405px) 100vw, 405px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p><br>Inclu\u00eddo os c\u00f3digos da linha 11.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"457\" height=\"37\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-61.png\" alt=\"\" class=\"wp-image-1658\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-61.png 457w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-61-300x24.png 300w\" sizes=\"(max-width: 457px) 100vw, 457px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Inclu\u00eddo o bloco do<strong> try catch<\/strong> <\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"526\" height=\"307\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-54.png\" alt=\"\" class=\"wp-image-1651\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-54.png 526w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-54-300x175.png 300w\" sizes=\"(max-width: 526px) 100vw, 526px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Mudamos o c\u00f3digo&nbsp; <strong>&lt;div className=\u201dalert\u201d&gt;&lt;\/div&gt;<\/strong><\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"620\" height=\"166\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-55.png\" alt=\"\" class=\"wp-image-1652\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-55.png 620w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-55-300x80.png 300w\" sizes=\"(max-width: 620px) 100vw, 620px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>COME\u00c7A AQUI A CRIA\u00c7\u00c3O DE ROTAS<\/strong><\/h2>\n\n\n\n<p>Observamos que a nossa aplica\u00e7\u00e3o de front-end possui um menu superior e um formul\u00e1rio. O menu \u00e9 renderizado a partir do componente MenuSuperior e o formul\u00e1rio, a partir do componente InclusaoLivros.<\/p>\n\n\n\n<p>Queremos agora manter o menu superior e substituir a parte que exibe o formul\u00e1rio por um componente que exiba a listagem de livros ou o resumo do cadastro. Para fazer isso, vamos utilizar o <strong>React Router<\/strong>.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Para testar, precisamos criar dois novos componentes.&nbsp;<\/h2>\n\n\n\n<p>Podemos acrescentar um conte\u00fado inicial b\u00e1sico.<\/p>\n\n\n\n<p>Come\u00e7amos pelo arquivo <strong>ManutencaoLivros.js<\/strong><\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"709\" height=\"571\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-57.png\" alt=\"\" class=\"wp-image-1654\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-57.png 709w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-57-300x242.png 300w\" sizes=\"(max-width: 709px) 100vw, 709px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Em seguida o arquivo <strong>ResumoLivros.js<\/strong> (tamb\u00e9m dentro de components):<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"578\" height=\"587\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-58.png\" alt=\"\" class=\"wp-image-1655\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-58.png 578w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-58-295x300.png 295w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-58-75x75.png 75w\" sizes=\"(max-width: 578px) 100vw, 578px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Abra o arquivo<strong> app.js <\/strong>e deixe igual a imagem:<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"534\" height=\"356\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-63.png\" alt=\"\" class=\"wp-image-1663\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-63.png 534w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-63-300x200.png 300w\" sizes=\"(max-width: 534px) 100vw, 534px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>O \u00faltimo passo \u00e9 ajustar a tag que cria o link para essas rotas. Elas est\u00e3o no componente <strong>MenuSuperior<\/strong>.js A tag <strong>&lt;a href=&#8230;&gt;<\/strong> deve ser substitu\u00edda pela tag <strong>&lt;Link to=&#8230;&gt;<\/strong>.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"902\" height=\"622\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-75.png\" alt=\"\" class=\"wp-image-1677\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-75.png 902w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-75-300x207.png 300w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-75-768x530.png 768w\" sizes=\"(max-width: 902px) 100vw, 902px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Atualizar Manuten\u00e7\u00e3o Livros<\/strong><\/h2>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"724\" height=\"898\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-64.png\" alt=\"\" class=\"wp-image-1664\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-64.png 724w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-64-242x300.png 242w\" sizes=\"(max-width: 724px) 100vw, 724px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Esse componente renderiza um campo de formul\u00e1rio, a ser utilizado para a pesquisa de dados e o cabe\u00e7alho de uma tabela. A exibi\u00e7\u00e3o de cada item na tabela fica a cargo de um novo componente: <strong>ItemLista<\/strong>.&nbsp;<\/p>\n\n\n\n<p>Vamos criar este arquivo <strong>ItemLista.js<\/strong>, tamb\u00e9m na pasta components.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"913\" height=\"607\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-65.png\" alt=\"\" class=\"wp-image-1665\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-65.png 913w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-65-300x199.png 300w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-65-768x511.png 768w\" sizes=\"(max-width: 913px) 100vw, 913px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Criar o arquivo <strong>ItemLista.css<\/strong> dentro das pasta components.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"664\" height=\"646\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-66.png\" alt=\"\" class=\"wp-image-1666\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-66.png 664w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-66-300x292.png 300w\" sizes=\"(max-width: 664px) 100vw, 664px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>EXCLUS\u00c3O DE ITEM E ALTERA\u00c7\u00c3O DE VALOR<\/strong><\/h2>\n\n\n\n<p>Alterar o <strong>ItemLista.js<\/strong> para exclus\u00e3o ou altera\u00e7\u00e3o do item.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"673\" height=\"485\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-67.png\" alt=\"\" class=\"wp-image-1667\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-67.png 673w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-67-300x216.png 300w\" sizes=\"(max-width: 673px) 100vw, 673px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>ManutencaoLivros.js<\/strong><\/h2>\n\n\n\n<p>Acrescentar o import do React Hook Form.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"373\" height=\"124\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-68.png\" alt=\"\" class=\"wp-image-1668\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-68.png 373w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-68-300x100.png 300w\" sizes=\"(max-width: 373px) 100vw, 373px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>O pr\u00f3ximo passo \u00e9 indicar os m\u00e9todos do React Hook Form a serem utilizados. Dentro da arrow function ManutencaoLivros, insira a linha: <strong>const { register, handleSubmit, reset } = useForm();<\/strong><\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"446\" height=\"85\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-69.png\" alt=\"\" class=\"wp-image-1669\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-69.png 446w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-69-300x57.png 300w\" sizes=\"(max-width: 446px) 100vw, 446px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Em seguida, edite a linha do form: <strong>&lt;form onSubmit={handleSubmit(filtrarLista)}&gt;<\/strong> ,  acrescentar o <strong>register <\/strong>no campo de formul\u00e1rio e chamar o evento no button com value Todos.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"670\" height=\"148\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-74.png\" alt=\"\" class=\"wp-image-1676\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-74.png 670w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-74-300x66.png 300w\" sizes=\"(max-width: 670px) 100vw, 670px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Agora criar as fun\u00e7\u00f5es do CRUD<\/h2>\n\n\n\n<p>Altear o ManutencaoLivros.js e inserir antes do return o c\u00f3digo a seguir:<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"617\" height=\"683\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-72.png\" alt=\"\" class=\"wp-image-1672\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-72.png 617w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-72-271x300.png 271w\" sizes=\"(max-width: 617px) 100vw, 617px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>No <strong>tbody <\/strong>fazer a chamada das fun\u00e7\u00f5es:<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"625\" height=\"134\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-73.png\" alt=\"\" class=\"wp-image-1673\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-73.png 625w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-73-300x64.png 300w\" sizes=\"(max-width: 625px) 100vw, 625px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Atualizar o ResumoLivros.js<\/h2>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"698\" height=\"506\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-76.png\" alt=\"\" class=\"wp-image-1678\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-76.png 698w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-76-300x217.png 300w\" sizes=\"(max-width: 698px) 100vw, 698px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"717\" height=\"785\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-77.png\" alt=\"\" class=\"wp-image-1679\" style=\"width:703px;height:auto\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-77.png 717w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-77-274x300.png 274w\" sizes=\"(max-width: 717px) 100vw, 717px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Agora temos um BackEnd e um FrontEnd totalmente funcional claro que em escala reduzida de funcionalidades.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"507\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-78-1024x507.png\" alt=\"\" class=\"wp-image-1682\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-78-1024x507.png 1024w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-78-300x148.png 300w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-78-768x380.png 768w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-78.png 1041w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"567\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-79-1024x567.png\" alt=\"\" class=\"wp-image-1683\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-79-1024x567.png 1024w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-79-300x166.png 300w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-79-768x425.png 768w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-79.png 1059w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"572\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-80-1024x572.png\" alt=\"\" class=\"wp-image-1684\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-80-1024x572.png 1024w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-80-300x167.png 300w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-80-768x429.png 768w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-80-1140x636.png 1140w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/12\/image-80.png 1252w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>GitHub BackEnd https:\/\/github.com\/marcoscaldas\/BackEnd.git GitHub FrontEnd https:\/\/github.com\/marcoscaldas\/FrontEnd.git Voc\u00ea j\u00e1 pensou em criar uma aplica\u00e7\u00e3o completa do zero? Esse \u00e9 o momento de tirar a ideia do papel e botar a m\u00e3o na massa! Neste tutorial, vamos explorar juntos como construir um backend poderoso e um frontend interativo utilizando apenas JavaScript. Isso mesmo, voc\u00ea vai aprender a desenvolver as duas partes essenciais de uma aplica\u00e7\u00e3o moderna usando a linguagem que domina o mundo web. Aqui, voc\u00ea n\u00e3o vai s\u00f3 aprender os conceitos te\u00f3ricos. Vamos direto ao ponto com um passo a passo pr\u00e1tico, claro e din\u00e2mico. Desde a cria\u00e7\u00e3o de um servidor com Node.js, at\u00e9 a montagem de uma interface incr\u00edvel com HTML, CSS e JavaScript, voc\u00ea estar\u00e1 no controle total do processo. Prepare-se para conectar suas ideias a um banco de dados, criar rotas, lidar com requisi\u00e7\u00f5es, e, claro, dar vida ao seu projeto com um design funcional e atraente. Se voc\u00ea sempre quis entender como front e backend se comunicam, este \u00e9 o tutorial que vai mudar sua forma de ver o desenvolvimento web. Instalando os Pacotes No momento da cria\u00e7\u00e3o desse tutorial vamos instalar os pacotes a seguir, por\u00e9m caso ocorra alguma atualiza\u00e7\u00e3o \u00e9 importante consultar a documenta\u00e7\u00e3o em www.npmjs.com Entendendo os Pacotes O npm init -y \u00e9 usado para inicializar um projeto Node.js rapidamente, gerando um arquivo package.json com as configura\u00e7\u00f5es padr\u00e3o. O pacote express, instalado com o comando npm i express, \u00e9 uma biblioteca popular para criar e gerenciar servidores web no Node.js. Ele simplifica o desenvolvimento de APIs e aplica\u00e7\u00f5es web, fornecendo ferramentas para lidar com rotas, requisi\u00e7\u00f5es HTTP, middleware e muito mais. O pacote nodemon, instalado com o comando npm i nodemon -g, \u00e9 uma ferramenta que monitora automaticamente as mudan\u00e7as no c\u00f3digo do seu projeto Node.js. Sempre que voc\u00ea salva uma altera\u00e7\u00e3o, ele reinicia o servidor automaticamente, economizando tempo e facilitando o desenvolvimento. A op\u00e7\u00e3o -g instala o nodemon globalmente, permitindo que ele seja usado em qualquer projeto do seu sistema. O pacote knex, instalado com npm i knex, \u00e9 um query builder para bancos de dados SQL no Node.js. Ele facilita a cria\u00e7\u00e3o, manipula\u00e7\u00e3o e execu\u00e7\u00e3o de consultas SQL de forma program\u00e1tica, usando JavaScript. Compat\u00edvel com bancos como MySQL, PostgreSQL, SQLite e outros, o Knex simplifica tarefas como criar tabelas, inserir dados e realizar consultas complexas. O pacote sqlite3, instalado com npm i sqlite3, \u00e9 usado para trabalhar com o banco de dados SQLite em aplica\u00e7\u00f5es Node.js. npm i cors &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; O que \u00e9 uma requisi\u00e7\u00e3o CORS? CORS \u2014 Cross Origin Resource Sharing (Compartilhamento de recursos com origens diferentes) \u00e9 um sistema que utiliza headers adicionais ao tradicionais para determinar as permiss\u00f5es de uma aplica\u00e7\u00e3o ao acessar dados de um servidor de origem distinta. Um exemplo de requisi\u00e7\u00e3o cross-site \u00e9 quando seu frontend est\u00e1 hospedado em \u201chttp:\/\/a.com\u201d e a partir dele voc\u00ea precisa pedir alguns dados para sua API que est\u00e1 hospedada em \u201chttp:\/\/b.com\u201d. Por seguran\u00e7a, os navegadores por padr\u00e3o bloqueiam esse tipo de requisi\u00e7\u00e3o iniciado por um script (fetch, axios.get \u2026), isso significa que sua aplica\u00e7\u00e3o s\u00f3 poder\u00e1 fazer solicita\u00e7\u00f5es para a API se incluir os cabe\u00e7alhos CORS corretos e se o servidor estiver configurado corretamente. Come\u00e7ando o Desenvolvimento Vamos criar um arquivo inicial chamado app.js para testar nosso servidor, e depois com os c\u00f3digos iniciais inseridos vamos rodar o servidor com o comando nodemon app.js O comando nodemon app.js pode ser somente nodemon app sem o .js Ap\u00f3s rodar o servidor abrir o navegador com o endere\u00e7o conforme imagem. Obs: O c\u00f3digo fonte encontra-se no meu GitHub e esse passo a passo na cria\u00e7\u00e3o do servidor encontra-se na documenta\u00e7\u00e3o do https:\/\/expressjs.com\/en\/starter\/hello-world.html Entendendo o app.Js No programa app.js \u00e9 poss\u00edvel observar que cada arrow function associada a uma rota recebe dois par\u00e2metros: req (request) e res (response).&nbsp; Eles podem receber qualquer nome, mas req e res s\u00e3o os geralmente utilizados. O par\u00e2metro req cont\u00e9m as informa\u00e7\u00f5es que s\u00e3o passadas para a rota \u2013 por quem a acionou.J\u00e1 res refere-se \u00e0 resposta da rota \u2013 como as mensagens exibidas nas duas rotas anteriormente criadas. Antes do listen() acrescentar o seguinte c\u00f3digo: A linha app.use(express.json());&nbsp; adiciona um middleware para reconhecer que o formato &#8216;combinado&#8217; para os dados a serem enviados pelo cliente e recebidos pelo programa no servidor \u00e9 o JSON.Como se fosse um parse. Na rota utilizamos o m\u00e9todo POST ou VERBO POST. Rotas com GET podem ser acessadas diretamente no navegador. As demais podem ser testadas a partir de nossos programas, ou atrav\u00e9s de&nbsp; softwares como o INSOMNIA ou POSTMAN ou pelo site reqbin.com por\u00e9m tem que instalar uma extens\u00e3o no Chrome. Middlewares Um middleware \u00e9 uma esp\u00e9cie de mediador entre duas partes, algo que fica no meio (middle).&nbsp; Vamos construir um exemplo, para ilustrar uma poss\u00edvel funcionalidade para um middleware. Digamos que os administradores de um sistema gostariam de analisar quantas vezes ou em quais hor\u00e1rios determinadas rotas est\u00e3o sendo acionadas. Algo como um controle de logs, que poderia registrar a\u00e7\u00f5es como transfer\u00eancias financeiras, exclus\u00f5es ou altera\u00e7\u00f5es de dados, por exemplo.&nbsp;Nesse caso, antes de acionar essas rotas, podemos fazer o sistema passar por um middleware que ir\u00e1 registrar essas a\u00e7\u00f5es. Acrescente o seguinte trecho ao app.js. MIGRATIONS Para criar a tabela&nbsp; com Migrations instalar o pacote: npx knex init&nbsp;&nbsp;&nbsp; Vai ter como resposta Created .\/knexfile.js Editar o arquivo knexfile.js&nbsp; &nbsp; Criando a Tabela no Banco de Dados Para criar o arquivo que ir\u00e1 conter a defini\u00e7\u00e3o da estrutura da tabela de livros, rode o comando: npx knex migrate:make create_livros \u00c9 criado um diret\u00f3rio chamado migrations dentro do diret\u00f3rio data. No arquivo criado deixar conforme imagem. Executando&nbsp;npx knex migrate:latest O comando npx knex migrate:latest serve para executar as migra\u00e7\u00f5es mais recentes em um banco de dados usando o Knex.js, que \u00e9 uma ferramenta de query builder para bancos de dados SQL no Node.js. O que ele faz? Seeds: \u201cSemeando \u201d dados iniciais com npx knex seed:make 001_add_livros O comando npx knex seed:make 001_add_livros \u00e9 usado para criar um novo arquivo de seed no Knex.js. Seeds s\u00e3o scripts que permitem inserir dados iniciais ou de teste no banco de dados. Neste caso, o comando cria um arquivo de seed chamado 001_add_livros, que pode ser usado para adicionar registros na tabela livros (ou outra tabela definida no script). O n\u00famero 001 geralmente indica a ordem das seeds a serem executadas. Editar esse arquivo dentro da pasta .\/data\/seeds Populando o Banco de Dados com npx knex seed:run O comando npx knex seed:run \u00e9 usado para executar os arquivos de seed no Knex.js. Ele insere os dados definidos nos scripts de seed no banco de dados. Essencialmente, esse comando popula o banco de dados com dados iniciais ou de teste, facilitando a configura\u00e7\u00e3o do ambiente de desenvolvimento ou testes. Criando Conex\u00e3o com Banco de Dados O arquivo de configura\u00e7\u00e3o criado anteriormente (knexfile.js) serve para definir o driver do banco de dados e par\u00e2metros da conex\u00e3o utilizados no processo de cria\u00e7\u00e3o das migrations e seeds da aplica\u00e7\u00e3o.&nbsp; Agora, precisamos criar um arquivo que vai conter esses detalhes de conex\u00e3o com o banco de dados a serem utilizados pelo programa. Para isso, crie o arquivo db_config.js dentro da pasta data, e insira as seguintes linhas: Organizando as Rotas Na pasta raiz do projeto criar uma arquivo livros.js para organizar a rotas. Atualizando o app.js Inserir antes do app.listen a rota para livros com seguinte c\u00f3digo: Acessando a API CRUD &#8211; Create, Read, Update, Delete Acrescentar ao arquivo livros.js as seguintes linhas: Adicionando Filtros Podemos adicionar filtros no arquivo livros.js conforme image: Importando o CORS No arquivo livros.js acrescente os c\u00f3digos das linhas 3 e 4 conforme imagem: Consumindo a API Para consumir nossa API podemos criar um documento simples conforme imagem: CRIANDO O FRONTEND Instalando os Pacotes Entendendo os Pacotes O pacote npx create-react-app front \u00e9 usado para criar um novo projeto React chamado &#8220;front&#8221;. Ele configura automaticamente a estrutura b\u00e1sica do projeto, instala as depend\u00eancias necess\u00e1rias e prepara o ambiente de desenvolvimento, permitindo que voc\u00ea comece a construir sua aplica\u00e7\u00e3o React de forma r\u00e1pida e simples. O pacote web-vitals \u00e9 usado para medir e monitorar as principais m\u00e9tricas de desempenho de uma p\u00e1gina web, como o tempo de carregamento, a interatividade e a estabilidade visual. Ele ajuda a avaliar a experi\u00eancia do usu\u00e1rio, fornecendo dados importantes para otimizar o desempenho da aplica\u00e7\u00e3o. O pacote react-hook-form facilita a gest\u00e3o de formul\u00e1rios em aplica\u00e7\u00f5es React, oferecendo uma maneira simples e eficiente de lidar com valida\u00e7\u00e3o, coleta de dados e controle de estado, sem a necessidade de escrever muito c\u00f3digo. Ele melhora a performance ao minimizar o re-render das componentes. O pacote axios \u00e9 uma biblioteca para fazer requisi\u00e7\u00f5es HTTP em JavaScript, tanto no navegador quanto no Node.js. Ele facilita a comunica\u00e7\u00e3o com APIs, permitindo enviar e receber dados de forma simples e eficiente, com suporte a Promises e async\/await. O pacote react-router-dom@6 \u00e9 utilizado para gerenciar navega\u00e7\u00e3o e roteamento em aplica\u00e7\u00f5es React. Ele permite definir rotas para diferentes componentes e facilitar a navega\u00e7\u00e3o entre p\u00e1ginas dentro de uma SPA (Single Page Application), mantendo o hist\u00f3rico de navega\u00e7\u00e3o sem recarregar a p\u00e1gina. O pacote react-google-charts permite integrar gr\u00e1ficos do Google Charts em aplica\u00e7\u00f5es React. Ele facilita a cria\u00e7\u00e3o de gr\u00e1ficos interativos e personaliz\u00e1veis, como barras, linhas e pizza, utilizando os dados da sua aplica\u00e7\u00e3o. Come\u00e7ando o Desenvolvimento Criar o projeto com o comando npx create-react-app front Instalar o pacote npm install web-vitals dentro da pasta do projeto front. Para rodar a aplica\u00e7\u00e3o entrar na pasta do projeto e digitar npm start A primeira vez que rodar a aplica\u00e7\u00e3o pode ser que demore um pouco. Alterar o html da Pasta Public&nbsp; No arquivo index.js&nbsp; deixar o c\u00f3digo conforme imagem. No arquivo App.js deixar c\u00f3digo conforme imagem. Criando Componentes Criar uma pasta components dentro de src &nbsp;e criar um arquivo com o nome MenuSuperior.js Criar um arquivo &nbsp; InclusaoLivros.js&nbsp; na mesma pasta components Editar o APP.js e depois testar npm start Ajustar o arquivo InclusaoLivros.js No return na tag form&nbsp; modificar para: Dessa forma, indicamos que a fun\u00e7\u00e3o salvar ser\u00e1 chamada quando enviar o formul\u00e1rio. Acrescentar o register para cada campo do formul\u00e1rio. Rodar um teste e dever\u00e1 aparecer o alert conforme imagem. Ap\u00f3s o teste comentar as seguintes linhas em InclusaoLivros.js: Criar na pasta src um arquivo &nbsp; config_axios.js Esse arquivo cria uma inst\u00e2ncia Axios com a URL base do Web Service a ser acessado pelo app Editar InclusaoLivros.js Foram inseridos os imports Inclu\u00eddo os c\u00f3digos da linha 11. Inclu\u00eddo o bloco do try catch Mudamos o c\u00f3digo&nbsp; &lt;div className=\u201dalert\u201d&gt;&lt;\/div&gt; COME\u00c7A AQUI A CRIA\u00c7\u00c3O DE ROTAS Observamos que a nossa aplica\u00e7\u00e3o de front-end possui um menu superior e um formul\u00e1rio. O menu \u00e9 renderizado a partir do componente MenuSuperior e o formul\u00e1rio, a partir do componente InclusaoLivros. Queremos agora manter o menu superior e substituir a parte que exibe o formul\u00e1rio por um componente que exiba a listagem de livros ou o resumo do cadastro. Para fazer isso, vamos utilizar o React Router. Para testar, precisamos criar dois novos componentes.&nbsp; Podemos acrescentar um conte\u00fado inicial b\u00e1sico. Come\u00e7amos pelo arquivo ManutencaoLivros.js Em seguida o arquivo ResumoLivros.js (tamb\u00e9m dentro de components): Abra o arquivo app.js e deixe igual a imagem: O \u00faltimo passo \u00e9 ajustar a tag que cria o link para essas rotas. Elas est\u00e3o no componente MenuSuperior.js A tag &lt;a href=&#8230;&gt; deve ser substitu\u00edda pela tag &lt;Link to=&#8230;&gt;. Atualizar Manuten\u00e7\u00e3o Livros Esse componente renderiza um campo de formul\u00e1rio, a ser utilizado para a pesquisa de dados e o cabe\u00e7alho de uma tabela. A exibi\u00e7\u00e3o de cada item na tabela fica a cargo de um novo componente: ItemLista.&nbsp; Vamos criar este arquivo ItemLista.js, tamb\u00e9m na pasta components. Criar o arquivo ItemLista.css dentro das pasta components. EXCLUS\u00c3O DE ITEM E ALTERA\u00c7\u00c3O DE VALOR Alterar o ItemLista.js para exclus\u00e3o ou altera\u00e7\u00e3o do item. ManutencaoLivros.js Acrescentar o import do React Hook Form. O pr\u00f3ximo passo \u00e9 indicar os m\u00e9todos do React Hook Form a serem utilizados. Dentro da arrow function ManutencaoLivros, insira a linha: const { register, handleSubmit, reset } = useForm(); Em seguida, edite a linha do form: &lt;form onSubmit={handleSubmit(filtrarLista)}&gt; , acrescentar o register&#8230;<\/p>\n","protected":false},"author":1,"featured_media":1617,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/1583"}],"collection":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1583"}],"version-history":[{"count":13,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/1583\/revisions"}],"predecessor-version":[{"id":1687,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/1583\/revisions\/1687"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/media\/1617"}],"wp:attachment":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1583"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1583"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1583"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}