{"id":61069,"date":"2023-07-13T08:04:02","date_gmt":"2023-07-13T11:04:02","guid":{"rendered":"https:\/\/kinsta.com\/pt\/?p=61069&#038;preview=true&#038;preview_id=61069"},"modified":"2025-01-31T11:13:30","modified_gmt":"2025-01-31T14:13:30","slug":"wordpress-api","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/wordpress-api\/","title":{"rendered":"Como Criar um Site WordPress com a API da Kinsta"},"content":{"rendered":"<p>O <a href=\"https:\/\/kinsta.com\/wordpress\/\">WordPress<\/a> \u00e9 um sistema popular de gerenciamento de conte\u00fado que alimenta milh\u00f5es de sites na Internet. Ele oferece uma interface f\u00e1cil de usar e uma ampla gama de op\u00e7\u00f5es de personaliza\u00e7\u00e3o.<\/p>\n<p>A cria\u00e7\u00e3o de sites WordPress pode ser demorada, especialmente quando voc\u00ea executa manualmente tarefas repetitivas. A Kinsta simplificou e <a href=\"https:\/\/kinsta.com\/pt\/docs\/hospedagem-de-wordpress\/como-comecar-wordpress\/novo-site\/\">agilizou esse processo<\/a> com o painel <a href=\"https:\/\/my.kinsta.com\/?lang=pt\">MyKinsta<\/a>, que tamb\u00e9m fornece um <a href=\"https:\/\/kinsta.com\/pt\/docs\/hospedagem-de-wordpress\/dominios-wordpress\/url-temporaria-wordpress\/\">dom\u00ednio tempor\u00e1rio<\/a> para testes imediatos. No entanto, com a introdu\u00e7\u00e3o da <a href=\"https:\/\/kinsta.com\/pt\/docs\/kinsta-api\/\">API da Kinsta<\/a>, <a href=\"https:\/\/kinsta.com\/pt\/blog\/tipos-de-desenvolvedores\/\">os desenvolvedores<\/a> podem aprimorar o fluxo de trabalho de cria\u00e7\u00e3o de sites e desenvolver interfaces personalizadas para atender a necessidades espec\u00edficas.<\/p>\n<p>Neste tutorial, voc\u00ea aprender\u00e1 como utilizar todo o potencial da API da Kinsta para criar facilmente sites WordPress. Tamb\u00e9m demonstraremos como voc\u00ea pode integrar essa API para um aplicativo <a href=\"https:\/\/kinsta.com\/pt\/blog\/o-que-e-react-js\/\">React<\/a> em JavaScript, permitindo a cria\u00e7\u00e3o de sites WordPress sem depender do MyKinsta.<\/p>\n<p>Aqui est\u00e1 uma demonstra\u00e7\u00e3o em tempo real do <a href=\"https:\/\/site-builder-ndg9i.kinsta.app\/\">aplicativo construtor de sites<\/a>.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/site-builder-application.gif\" alt=\"Aplicativo do construtor de sites\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Aplicativo do construtor de sites.<\/figcaption><\/figure>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Entendendo a API da Kinsta<\/h2>\n<p>A <a href=\"https:\/\/kinsta.com\/pt\/changelog\/kinsta-api\/\">API da Kinsta<\/a> \u00e9 uma ferramenta poderosa que permite que voc\u00ea interaja com a plataforma de <a href=\"https:\/\/kinsta.com\/pt\/hospedagem-wordpress\/\">Hospedagem Gerenciada de WordPress<\/a> da Kinsta de forma program\u00e1tica. Ela pode ajudar voc\u00ea a automatizar v\u00e1rias tarefas relacionadas aos servi\u00e7os fornecidos pela Kinsta, incluindo a cria\u00e7\u00e3o de sites, a recupera\u00e7\u00e3o de informa\u00e7\u00f5es do site, a <a href=\"https:\/\/kinsta.com\/pt\/blog\/chave-api-kinsta\/#how-to-use-kinsta-api-to-build-a-status-checker\">obten\u00e7\u00e3o do status de um site<\/a> e muito mais.<\/p>\n<p>Essa API simplifica a configura\u00e7\u00e3o de sites WordPress, tornando uma ferramenta inestim\u00e1vel para os desenvolvedores. Para usar a API da Kinsta, voc\u00ea deve ter uma conta com pelo menos um site, <a href=\"https:\/\/sevalla.com\/application-hosting\/\">aplicativo<\/a> ou <a href=\"https:\/\/sevalla.com\/database-hosting\/\">banco de dados<\/a> do WordPress no MyKinsta. Voc\u00ea tamb\u00e9m precisa gerar uma chave de API para autenticar e acessar sua conta por meio da API.<\/p>\n<p>Para gerar uma chave de API:<\/p>\n<ol start=\"1\">\n<li>V\u00e1 para o painel MyKinsta.<\/li>\n<li>Navegue at\u00e9 a p\u00e1gina <strong>Chaves API <\/strong>(<strong>Seu nome<\/strong> &gt; <strong>Configura\u00e7\u00f5es da empresa<\/strong> &gt; <strong>Chaves API<\/strong>).<\/li>\n<li>Clique em <strong>Criar chave<\/strong> <strong>API<\/strong>.<\/li>\n<li>Escolha uma expira\u00e7\u00e3o ou defina uma data de in\u00edcio personalizada e o n\u00famero de horas para a chave expirar.<\/li>\n<li>D\u00ea \u00e0 chave um nome exclusivo.<\/li>\n<li>Clique em <strong>Gerar<\/strong>.<\/li>\n<\/ol>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/create-api-key-on-mykinsta.jpg\" alt=\"Criar chave API no MyKinsta\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Criar chave API no MyKinsta.<\/figcaption><\/figure>\n<p>Ap\u00f3s criar uma chave API, copie e armazene em um local seguro (recomendamos o uso de um <a href=\"https:\/\/kinsta.com\/pt\/blog\/gerenciadores-de-senhas\/\">gerenciador de senhas<\/a>), pois esta \u00e9 a <strong>\u00fanica vez<\/strong> em que ela \u00e9 revelada no MyKinsta. Voc\u00ea pode gerar v\u00e1rias chaves de API &#8211; elas s\u00e3o listadas na p\u00e1gina de <strong>Chaves API<\/strong>. Se precisar revogar uma chave de API, clique em <strong>Revogar<\/strong> ao lado daquela que deseja revogar.<\/p>\n<h2>Criando um site WordPress com a API da Kinsta<\/h2>\n<p>Agora que sua chave de API est\u00e1 pronta, vamos criar um site do WordPress usando a API da Kinsta. Para fazer isso, utilize o endpoint <code><a href=\"https:\/\/api-docs.kinsta.com\/tag\/WordPress-Sites#operation\/addWordPressSite\" target=\"_blank\" rel=\"noopener noreferrer\">\/sites<\/a><\/code>, que espera um payload contendo os seguintes dados:<\/p>\n<ul>\n<li><strong>company:<\/strong> Esse par\u00e2metro espera um ID exclusivo da empresa que pode ser encontrado nas configura\u00e7\u00f5es do MyKinsta. Ele ajuda a identificar a empresa associada ao site do WordPress.<\/li>\n<li><strong>display_name:<\/strong> O nome de exibi\u00e7\u00e3o, que \u00e9 o mesmo que o nome do site no MyKinsta, ajuda voc\u00ea a identificar seu site. Usado somente no MyKinsta. \u00c9 usado para o dom\u00ednio tempor\u00e1rio do seu site WordPress e do <a href=\"https:\/\/kinsta.com\/pt\/blog\/painel-administrativo-wordpress\/\">administrador do WordPress<\/a> (para a API Kinsta, \u00e9 <em>display_name.kinsta.cloud<\/em> e <em>display_name.kinsta.cloud\/wp-admin<\/em>).<\/li>\n<li><strong>region:<\/strong> Esse par\u00e2metro permite que voc\u00ea escolha entre 27 localiza\u00e7\u00f5es de centros de dados para o seu site. Selecionar uma regi\u00e3o mais pr\u00f3xima do seu p\u00fablico-alvo pode ajudar a melhorar o desempenho e a velocidade do site (consulte a <a href=\"https:\/\/kinsta.com\/pt\/docs\/informacoes-de-servico\/localizacoes-de-centro-de-dados\/\">lista de regi\u00f5es dispon\u00edveis<\/a>).<\/li>\n<li><strong>install_mode:<\/strong> Esse par\u00e2metro determina o tipo de instala\u00e7\u00e3o do WordPress. O valor padr\u00e3o \u00e9 &#8220;plain&#8221;, que configura um site normal do WordPress. Outras op\u00e7\u00f5es incluem &#8220;new&#8221; para uma nova instala\u00e7\u00e3o e modos adicionais, dependendo de requisitos espec\u00edficos.<\/li>\n<li><strong>is_subdomain_multisite: <\/strong>Esse par\u00e2metro booleano (true\/false) especifica se o site do WordPress deve ser configurado como um site m\u00faltiplo usando subdom\u00ednios.<\/li>\n<li><strong>admin_email:<\/strong> Esse par\u00e2metro espera o endere\u00e7o de e-mail do administrador do WordPress. Ele \u00e9 usado para fins administrativos e para receber notifica\u00e7\u00f5es importantes.<\/li>\n<li><strong>admin_password:<\/strong> Esse par\u00e2metro \u00e9 usado para definir a senha da conta de usu\u00e1rio admin do WordPress. Escolha uma senha segura para proteger o seu site.<\/li>\n<li><strong>admin_user:<\/strong> Esse par\u00e2metro define o nome de usu\u00e1rio para a conta de usu\u00e1rio administrador do WordPress. Ele \u00e9 usado para fazer login no painel do WordPress e gerenciar o site.<\/li>\n<li><strong>is_multisite:<\/strong> Semelhante a <code>is_subdomain_multisite<\/code>, esse par\u00e2metro booleano determina se o site do WordPress deve ser configurado como um multisite.<\/li>\n<li><strong>site_title:<\/strong> Esse par\u00e2metro representa o t\u00edtulo do seu site do WordPress. Ele aparece na parte superior de todas as p\u00e1ginas do site. Voc\u00ea sempre pode alter\u00e1-lo posteriormente.<\/li>\n<li><strong>woocommerce:<\/strong> Esse par\u00e2metro booleano indica se voc\u00ea deseja instalar o plugin WooCommerce durante a cria\u00e7\u00e3o do site do WordPress.<\/li>\n<li><strong>wordpressseo:<\/strong> Esse par\u00e2metro controla a instala\u00e7\u00e3o do <a href=\"https:\/\/kinsta.com\/pt\/blog\/yoast-seo\/\">plugin Yoast SEO<\/a> durante a cria\u00e7\u00e3o do site.<\/li>\n<li><strong>wp_language:<\/strong> Esse par\u00e2metro espera um valor de string de caracteres que represente o idioma\/localiza\u00e7\u00e3o\u00a0 do seu site WordPress (descubra a\u00a0<a href=\"https:\/\/translate.wordpress.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">localiza\u00e7\u00e3o do seu site WordPress aqui<\/a>).<\/li>\n<\/ul>\n<p>Agora que voc\u00ea entende cada par\u00e2metro, este \u00e9 um exemplo de como o payload que voc\u00ea envia para a API da Kinsta deve ser estruturado:<\/p>\n<pre><code class=\"language-json\">{\n  \"company\": \"54fb80af-576c-4fdc-ba4f-b596c83f15a1\",\n  \"display_name\": \"First site\",\n  \"region\": \"us-central1\",\n  \"install_mode\": \"new\",\n  \"is_subdomain_multisite\": false,\n  \"admin_email\": \"admin@example.com\",\n  \"admin_password\": \"vJnFnN-~v)PxF[6k\",\n  \"admin_user\": \"admin\",\n  \"is_multisite\": false,\n  \"site_title\": \"My First Site\",\n  \"woocommerce\": false,\n  \"wordpressseo\": false,\n  \"wp_language\": \"en_US\"\n}<\/code><\/pre>\n<p>Usando seu modo preferido, voc\u00ea pode enviar uma solicita\u00e7\u00e3o POST para a API da Kinsta; voc\u00ea s\u00f3 precisa definir sua chave de API para criar um site WordPress. Para este exemplo, vamos usar a <a href=\"https:\/\/kinsta.com\/pt\/blog\/solicitacoes-http-javascript\/#4-how-to-make-an-http-request-in-javascript-using-the-fetch-api\">API JavaScript Fetch<\/a>:<\/p>\n<pre><code class=\"language-jsx\">const createWPSite = async () =&gt; {\n    const resp = await fetch(\n        `https:\/\/api.kinsta.com\/v2\/sites`,\n        {\n          method: 'POST',\n          headers: {\n            'Content-Type': 'application\/json',\n            Authorization: 'Bearer &lt;YOUR_KEY_HERE&gt;'\n          },\n          body: JSON.stringify({\n            company: '54fb80af-576c-4fdc-ba4f-b596c83f15a1',\n            display_name: 'First site',\n            region: 'us-central1',\n            install_mode: 'new',\n            is_subdomain_multisite: false,\n            admin_email: 'admin@example.com',\n            admin_password: 'vJnFnN-~v)PxF[6k',\n            admin_user: 'admin',\n            is_multisite: false,\n            site_title: 'My First Site',\n            woocommerce: false,\n            wordpressseo: false,\n            wp_language: 'en_US'\n          })\n        }\n      );\n      \n      const data = await resp.json();\n      console.log(data);\n}<\/code><\/pre>\n<p>O c\u00f3digo acima usa a API JavaScript Fetch para enviar uma solicita\u00e7\u00e3o POST \u00e0 API Kinsta para voc\u00ea criar um site WordPress. A fun\u00e7\u00e3o <code>createWPSite<\/code> lida com o processo. Dentro da fun\u00e7\u00e3o, uma solicita\u00e7\u00e3o Fetch \u00e9 feita para a API Kinsta <code>\/sites<code> endpoint with the necessary data.<\/code><\/code><\/p>\n<p>A resposta \u00e9 analisada como JSON usando <code>resp.json()<\/code>, e o resultado \u00e9 registrado no console. Certifique-se de que voc\u00ea substitua <code>&lt;YOUR_KEY_HERE&gt;<\/code> por sua chave de API, ajuste os valores de payload \u00fatil e chame <code>createWPSite()<\/code> para criar um site WordPress usando a API Kinsta.<\/p>\n<p>Esta \u00e9 a apar\u00eancia da resposta:<\/p>\n<pre><code class=\"language-json\">{\n    \"operation_id\": \"sites:add-54fb80af-576c-4fdc-ba4f-b596c83f15a1\",\n    \"message\": \"Adding site in progress\",\n    \"status\": 202\n}<\/code><\/pre>\n<h3>Monitoramento de opera\u00e7\u00f5es com a API da Kinsta<\/h3>\n<p>Depois que voc\u00ea iniciar a cria\u00e7\u00e3o de um site com a API da Kinsta, \u00e9 importante acompanhar o progresso da opera\u00e7\u00e3o. Isso pode ser feito de forma program\u00e1tica sem que voc\u00ea precise verificar o MyKinsta com o ponto de extremidade da API Kinsta <code><a href=\"https:\/\/api-docs.kinsta.com\/tag\/Operations#operation\/getOperationStatus\" target=\"_blank\" rel=\"noopener noreferrer\">\/operations<\/a><\/code> da API Kinsta.<\/p>\n<p>Para monitorar as opera\u00e7\u00f5es, use o <code>operation_id<\/code> obtido ao iniciar uma opera\u00e7\u00e3o, como a cria\u00e7\u00e3o de um site WordPress. Passe o <code>operation_id<\/code> como um par\u00e2metro para o ponto de extremidade <code>\/operations<\/code>.<\/p>\n<pre><code class=\"language-jsx\">const operationId = 'YOUR_operation_id_PARAMETER';\nconst resp = await fetch(\n  `https:\/\/api.kinsta.com\/v2\/operations\/${operationId}`,\n  {\n    method: 'GET',\n    headers: {\n      Authorization: 'Bearer &lt;YOUR_TOKEN_HERE&gt;'\n    }\n  }\n);\nconst data = await resp.json();\nconsole.log(data);<\/code><\/pre>\n<p>O c\u00f3digo acima recupera informa\u00e7\u00f5es sobre uma opera\u00e7\u00e3o enviando uma solicita\u00e7\u00e3o GET para o ponto de extremidade <code>\/operations<\/code> com o <code>operation_id<\/code> apropriado. A solicita\u00e7\u00e3o inclui a <a href=\"https:\/\/kinsta.com\/pt\/blog\/chave-api-kinsta\/\">chave API<\/a> para autentica\u00e7\u00e3o.<\/p>\n<p>Quando os dados de resposta s\u00e3o recebidos da API, eles s\u00e3o registrados no console. A resposta fornece informa\u00e7\u00f5es valiosas sobre o status e o progresso da opera\u00e7\u00e3o. Por exemplo, se a cria\u00e7\u00e3o do site WordPress ainda estiver em andamento, a resposta ser\u00e1 semelhante a esta:<\/p>\n<pre><code class=\"language-json\">{\n    \"status\": 202,\n    \"message\": \"Operation in progress\",\n    \"data\": null\n}<\/code><\/pre>\n<p>Da mesma forma, quando a opera\u00e7\u00e3o for conclu\u00edda com \u00eaxito, esta ser\u00e1 a resposta:<\/p>\n<pre><code class=\"language-json\">{\n    \"message\": \"Successfully finished request\",\n    \"status\": 200,\n    \"data\": null\n}<\/code><\/pre>\n<p>Neste ponto, voc\u00ea pode criar programaticamente um site WordPress e verificar sua opera\u00e7\u00e3o usando a API da Kinsta. Para aprimorar essa funcionalidade, vamos dar um passo adiante e desenvolver uma interface de usu\u00e1rio (UI) personalizada que possa lidar com essas opera\u00e7\u00f5es. Dessa forma, at\u00e9 mesmo pessoas sem conhecimento t\u00e9cnico podem aproveitar os recursos da API.<\/p>\n<h2>Criando um aplicativo React para criar um site WordPress com a API da Kinsta<\/h2>\n<p>Para come\u00e7ar, configure uma estrutura de projeto React e instale as depend\u00eancias necess\u00e1rias. Integre a API da Kinsta em seu aplicativo React com a API Fetch ou outras bibliotecas de <a href=\"https:\/\/kinsta.com\/pt\/blog\/solicitacoes-http-javascript\/\">solicita\u00e7\u00e3o HTTP<\/a>, como a Axios.<\/p>\n<h3>Pr\u00e9-requisito<\/h3>\n<p>Para acompanhar este projeto, \u00e9 aconselh\u00e1vel que voc\u00ea tenha um conhecimento b\u00e1sico de <a href=\"https:\/\/kinsta.com\/pt\/blog\/o-que-e-html\/\">HTML<\/a>, <a href=\"https:\/\/kinsta.com\/pt\/blog\/melhores-praticas-css\/\">CSS<\/a> e <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript<\/a> e alguma familiaridade com o React. O foco principal deste projeto \u00e9 demonstrar a utiliza\u00e7\u00e3o da API Kinsta, portanto, este artigo n\u00e3o se aprofunda nos detalhes da cria\u00e7\u00e3o ou do estilo da interface do usu\u00e1rio.<\/p>\n<h3>Primeiros passos<\/h3>\n<p>Para simplificar o processo de configura\u00e7\u00e3o do projeto, um projeto inicial foi preparado para voc\u00ea. Siga estas etapas para voc\u00ea come\u00e7ar:<\/p>\n<p>1. Crie um reposit\u00f3rio <a href=\"https:\/\/kinsta.com\/pt\/topicos\/git\/\">Git<\/a> usando <a href=\"https:\/\/github.com\/kinsta\/site-builder\" target=\"_blank\" rel=\"noopener noreferrer\">este template no GitHub<\/a>. Selecione <strong>Usar este template<\/strong> &gt; <strong>Criar um novo reposit\u00f3rio<\/strong> para copiar o c\u00f3digo inicial em um novo reposit\u00f3rio na sua conta do GitHub e verifique se voc\u00ea marcou a caixa para <strong>incluir todas as branches<\/strong>.<\/p>\n<p>2. Fa\u00e7a o clone do reposit\u00f3rio para seu computador local e mude para o diret\u00f3rio <strong><a href=\"https:\/\/github.com\/kinsta\/site-builder\/tree\/starter-files\" target=\"_blank\" rel=\"noopener noreferrer\">starter-files<\/a><\/strong> usando o comando abaixo:<\/p>\n<pre><code class=\"language-bash\">git checkout starter-files<\/code><\/pre>\n<p>3. Instale as depend\u00eancias necess\u00e1rias executando o comando <code>npm install<\/code>. Ap\u00f3s a conclus\u00e3o da instala\u00e7\u00e3o, voc\u00ea pode iniciar o projeto em seu computador local com <code>npm run start<\/code>. Isso abrir\u00e1 o projeto em <strong><a href=\"http:\/\/localhost:3000\/\" target=\"_blank\" rel=\"noopener noreferrer\">http:\/\/localhost:3000\/<\/a><\/strong>.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/site-builder-form.jpg\" alt=\"Formul\u00e1rio do construtor de sites\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Formul\u00e1rio do construtor de sites.<\/figcaption><\/figure>\n<h3>Entendendo os arquivos do projeto<\/h3>\n<p>Na <strong>pasta src<\/strong> deste projeto, h\u00e1 duas subpastas principais: <strong>components<\/strong>\u00a0e <strong>pages<\/strong>. A pasta de componentes cont\u00e9m componentes reutiliz\u00e1veis, como o <strong>header<\/strong>\u00a0e o <strong>footer<\/strong>, utilizados nas <strong>p\u00e1ginas<\/strong> <strong>Home<\/strong> e <strong>Details<\/strong>.<\/p>\n<p>Neste projeto, voc\u00ea deve se concentrar principalmente na implementa\u00e7\u00e3o da l\u00f3gica nas <strong>p\u00e1ginas<\/strong> <strong>Home<\/strong> e <strong>Details<\/strong>, pois o estilo e o roteamento j\u00e1 est\u00e3o prontos.<\/p>\n<p>A <strong>p\u00e1gina<\/strong> <strong>Home<\/strong> tem um formul\u00e1rio que coleta v\u00e1rios campos de dados que s\u00e3o passados para a API da Kinsta. A resposta dessa p\u00e1gina \u00e9 armazenada no localStorage (voc\u00ea pode explorar m\u00e9todos alternativos para armazenar o ID da opera\u00e7\u00e3o, que \u00e9 crucial para verificar o status da opera\u00e7\u00e3o).<\/p>\n<p>Na <strong>p\u00e1gina<\/strong> <strong>Details<\/strong>, o ID da opera\u00e7\u00e3o \u00e9 recuperado do loaclStoage e passado para o ponto de extremidade <code>\/operation<\/code> da API da Kinsta como um par\u00e2metro para verificar o status da opera\u00e7\u00e3o. Neste projeto, inclu\u00edmos um bot\u00e3o que permite que os usu\u00e1rios verifiquem o status de forma intermitente (voc\u00ea pode utilizar o m\u00e9todo <code>setInterval<\/code> para automatizar esse processo).<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/site-builder-operation-information.jpg\" alt=\"Informa\u00e7\u00f5es sobre a opera\u00e7\u00e3o do construtor de sites\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Informa\u00e7\u00f5es sobre a opera\u00e7\u00e3o do construtor de sites.<\/figcaption><\/figure>\n<h2>Interagindo com a API Kinsta no React<\/h2>\n<p>Com a interface do usu\u00e1rio (UI) pronta, sua pr\u00f3xima etapa \u00e9 lidar com o envio do formul\u00e1rio na <strong>p\u00e1gina Home <\/strong>e enviar uma solicita\u00e7\u00e3o POST para o ponto de extremidade <code>\/sites<\/code> da API da Kinsta. Essa solicita\u00e7\u00e3o inclui os dados coletados do formul\u00e1rio como payload \u00fatil, o que nos permite criar um site WordPress.<\/p>\n<p>Para interagir com a API da Kinsta, voc\u00ea precisa do <strong>ID da sua empresa<\/strong> e da <strong>chave API<\/strong>. Depois que voc\u00ea tiver essas credenciais, \u00e9 melhor armazen\u00e1-las com seguran\u00e7a como vari\u00e1veis de ambiente em seu aplicativo React.<\/p>\n<p>Para configurar as vari\u00e1veis de ambiente, crie um <strong> arquivo .env<\/strong> na pasta raiz do seu projeto. Dentro desse arquivo, adicione as seguintes linhas:<\/p>\n<pre><code class=\"language-bash\">REACT_APP_KINSTA_COMPANY_ID = 'YOUR_COMPANY_ID' \nREACT_APP_KINSTA_API_KEY = 'YOUR_API_KEY'<\/code><\/pre>\n<p>Para acessar essas vari\u00e1veis de ambiente em seu projeto, voc\u00ea pode usar a sintaxe <code>process.env.THE_VARIABLE<\/code>. Por exemplo, para acessar <code>REACT_APP_KINSTA_COMPANY_ID<\/code>, voc\u00ea usaria <code>process.env.REACT_APP_KINSTA_COMPANY_ID<\/code>.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>\u00c9 importante que voc\u00ea adicione o <strong> arquivo .env<\/strong> ao seu <a href=\"https:\/\/kinsta.com\/pt\/blog\/nao-funcionamento-do-gitignore\/\">arquivo <strong>.gitignore<\/strong><\/a> para evitar que ele seja enviado para o GitHub. Isso garante que suas informa\u00e7\u00f5es confidenciais, como chaves de API, permane\u00e7am privadas e seguras.<\/p>\n<\/aside>\n\n<h3>Recupera\u00e7\u00e3o de dados de formul\u00e1rio no React<\/h3>\n<p>No arquivo <strong>Home.jsx<\/strong>, h\u00e1 um formul\u00e1rio. Voc\u00ea precisa adicionar l\u00f3gica ao formul\u00e1rio para obter dados e valid\u00e1-los quando forem enviados. Para recuperar os dados do formul\u00e1rio em seu aplicativo React, utilize a abordagem de componentes controlados do React juntamente com o hook <code><a href=\"https:\/\/kinsta.com\/pt\/blog\/usestate-react\/\">useState<\/a><\/code>. Essa abordagem permite criar um estado para cada campo do formul\u00e1rio e atualiz\u00e1-lo \u00e0 medida que o usu\u00e1rio insere dados.<\/p>\n<p>Primeiro, importe o hook <code>useState<\/code> na parte superior do seu arquivo:<\/p>\n<pre><code class=\"language-jsx\">import React, { useState } from 'react';<\/code><\/pre>\n<p>Em seguida, configure uma vari\u00e1vel de estado para cada campo do formul\u00e1rio dentro do seu componente funcional. Por exemplo, se voc\u00ea tiver um campo de entrada para o &#8220;Site title&#8221;, voc\u00ea pode criar uma vari\u00e1vel de estado chamada <code>siteTitle<\/code>:<\/p>\n<pre><code class=\"language-jsx\">const [siteTitle, setSiteTitle] = useState('');<\/code><\/pre>\n<p>Aqui, <code>siteTitle<\/code> \u00e9 a vari\u00e1vel de estado que cont\u00e9m o valor do campo de entrada &#8220;Site title&#8221; e <code>setSiteTitle<\/code> \u00e9 a fun\u00e7\u00e3o atualizadora de estado correspondente.<\/p>\n<p>Para vincular os campos de formul\u00e1rio a seus respectivos valores de estado, adicione os atributos <code>value<\/code> e <code>onChange<\/code> a cada elemento de entrada. Por exemplo, o campo de entrada &#8220;Site title&#8221;:<\/p>\n<pre><code class=\"language-jsx\">&lt;input\n  type=\"text\"\n  className=\"form-control\"\n  value={siteTitle}\n  onChange={(event) =&gt; setSiteTitle(event.target.value)}\n\/&gt;<\/code><\/pre>\n<p>Neste exemplo, o atributo <code>value<\/code> \u00e9 definido como a vari\u00e1vel de estado <code>siteTitle<\/code>, garantindo que o campo de entrada exiba o valor atual de <code>siteTitle<\/code>. O manipulador de eventos <code>onChange<\/code> \u00e9 definido como a fun\u00e7\u00e3o <code>setSiteTitle<\/code>, que atualiza o estado <code>siteTitle<\/code> com o novo valor sempre que o usu\u00e1rio digitar o campo de entrada.<\/p>\n<p>Seguindo essa abordagem para cada campo do formul\u00e1rio, voc\u00ea pode criar as vari\u00e1veis de estado necess\u00e1rias e atualiz\u00e1-las \u00e0 medida que o usu\u00e1rio interage com o formul\u00e1rio. Isso permite que voc\u00ea acesse facilmente os valores inseridos quando o formul\u00e1rio for enviado e execute outras a\u00e7\u00f5es ou valida\u00e7\u00f5es com os dados do formul\u00e1rio.<\/p>\n<p>Quando voc\u00ea fizer isso para todos os campos do formul\u00e1rio, o arquivo <strong>Home.jsx<\/strong> ter\u00e1 a seguinte apar\u00eancia:<\/p>\n<pre><code class=\"language-jsx\">import Header from '..\/components\/Header';\nimport Footer from '..\/components\/Footer';\n\nconst Home = () =&gt; {\n\n    return (\n        &lt;div className=\"app-container\"&gt;\n            &lt;Header \/&gt;\n            &lt;div className=\"container\"&gt;\n                &lt;div className=\"container-title\"&gt;\n                    &lt;h1&gt; className=\"title\"&gt;Site Builder with Kinsta API&lt;\/h1&gt;\n                    &lt;p&gt; className=\"description\"&gt;\n                        This is a React app that uses the Kinsta API to create WordPress sites, without needing to access MyKinsta dashboard.\n                    &lt;\/p&gt;\n                &lt;\/div&gt;\n                &lt;form&gt;\n                    &lt;div className=\"form-container\"&gt;\n                        &lt;div className=\"input-div\"&gt;\n                            &lt;label&gt;Display name&lt;\/label&gt;\n                            &lt;span&gt;Helps you identify your site. Only used in MyKinsta and temporary domain&lt;\/span&gt;\n                            &lt;input type=\"text\" className=\"form-control\" \/&gt;\n                            &lt;span&gt; className='error-message'&gt;Ensure this has more than 4 characters&lt;\/span&gt;\n                        &lt;\/div&gt;\n                        &lt;div className=\"input-div\"&gt;\n                            &lt;label&gt; WordPress site title&lt;\/label&gt;\n                            &lt;span&gt;Appears across the top of every page of the site. You can always change it later.&lt;\/span&gt;\n                            &lt;input type=\"text\" className=\"form-control\" \/&gt;\n                            &lt;span&gt; className='error-message'&gt;Ensure this has more than 4 characters&lt;\/span&gt;\n                        &lt;\/div&gt;\n                        &lt;div className=\"input-flex\"&gt;\n                            &lt;div className=\"input-div\"&gt;\n                                &lt;label&gt;WordPress admin username&lt;\/label&gt;\n                                &lt;input type=\"text\" className=\"form-control\" \/&gt;\n                            &lt;\/div&gt;\n                            &lt;div className=\"input-div\"&gt;\n                                &lt;label&gt;WordPress admin email&lt;\/label&gt;\n                                &lt;input type=\"email\" className=\"form-control\" \/&gt;\n                                &lt;span&gt; className='error-message'&gt;Ensure this is a valid email&lt;\/span&gt;\n                            &lt;\/div&gt;\n                        &lt;\/div&gt;\n                        &lt;div className=\"input-div\"&gt;\n                            &lt;label&gt;WordPress admin password&lt;\/label&gt;\n                            &lt;span&gt;Ensure you remember this password as it is what you'll use to log into WP-admin&lt;\/span&gt;\n                            &lt;input type=\"text\" className=\"form-control\" \/&gt;\n                        &lt;\/div&gt;\n                        &lt;div className=\"input-div\"&gt;\n                            &lt;label&gt;Data center location&lt;\/label&gt;\n                            &lt;span&gt;Allows you to place your website in a geographical location closest to your visitors.&lt;\/span&gt;\n                            &lt;select className=\"form-control\"&gt;\n                                &lt;option&gt; value=\"\"&gt;&lt;\/option&gt;\n                                {\/* add options *\/}\n                            &lt;\/select&gt;\n                        &lt;\/div&gt;\n                        &lt;div className=\"checkbox-flex\"&gt;\n                            &lt;div className=\"checkbox-input\"&gt;\n                                &lt;input type=\"checkbox\" \/&gt;\n                                &lt;label&gt;Install WooCommerce&lt;\/label&gt;\n                            &lt;\/div&gt;\n                            &lt;div className=\"checkbox-input\"&gt;\n                                &lt;input type=\"checkbox\" \/&gt;\n                                &lt;label&gt;Install Yoast SEO&lt;\/label&gt;\n                            &lt;\/div&gt;\n                        &lt;\/div&gt;\n                        &lt;button&gt; className='btn'&gt;Create Site&lt;\/button&gt;\n                    &lt;\/div&gt;\n                &lt;\/form&gt;\n            &lt;\/div&gt;\n            &lt;Footer \/&gt;\n        &lt;\/div &gt;\n    )\n}\n\nexport default Home;<\/code><\/pre>\n<h4>Implementa\u00e7\u00e3o da valida\u00e7\u00e3o de campo de formul\u00e1rio com o Hook useRef<\/h4>\n<p>Para implementar a valida\u00e7\u00e3o de campo de formul\u00e1rio no React, voc\u00ea pode seguir estas etapas. Vamos nos concentrar na implementa\u00e7\u00e3o da valida\u00e7\u00e3o dos campos &#8220;Display name&#8221; e &#8220;WordPress admin email&#8221;.<\/p>\n<p>Primeiro, precisamos criar refer\u00eancias usando o hook <code><a href=\"https:\/\/kinsta.com\/pt\/blog\/hook-useref-no-react\/\">useRef<\/a><\/code> para controlar a exibi\u00e7\u00e3o das mensagens de erro. Importe o hook <code>useRef<\/code> e crie as refer\u00eancias necess\u00e1rias para cada campo:<\/p>\n<pre><code class=\"language-jsx\">import { useRef } from 'react';\n\nconst displayNameRef = useRef(null);\nconst wpEmailRef = useRef(null);<\/code><\/pre>\n<p>Em seguida, anexamos as refs aos elementos correspondentes da mensagem de erro nos campos do formul\u00e1rio. Por exemplo, para o campo &#8220;Display name&#8221;, voc\u00ea adiciona o <code>ref<\/code> \u00e0 tag <code>span<\/code>, que cont\u00e9m a mensagem de erro:<\/p>\n<pre><code class=\"language-jsx\">&lt;div className=\"input-div\"&gt;\n    &lt;label&gt;Display name&lt;\/label&gt;\n    &lt;span&gt;Helps you identify your site. Only used in MyKinsta and temporary domain&lt;\/span&gt;\n    &lt;input type=\"text\" className=\"form-control\" value={displayName} onChange={(e) =&gt; setDisplayName(e.target.value)} \/&gt;\n    &lt;span className='error-message' ref={displayNameRef}&gt;Ensure this has more than 4 characters&lt;\/span&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>Da mesma forma, para o campo &#8220;WordPress admin email&#8221;:<\/p>\n<pre><code class=\"language-jsx\">&lt;div className=\"input-div\"&gt;\n  &lt;label&gt;WordPress admin email&lt;\/label&gt;\n  &lt;input\n    type=\"email\"\n    className=\"form-control\"\n    value={wpAdminEmail}\n    onChange={(e) =&gt; setWpAdminEmail(e.target.value)}\n  \/&gt;\n  &lt;span&gt; className='error-message' ref={wpEmailRef}&gt;Ensure this is a valid email&lt;\/span&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>Agora, podemos criar as fun\u00e7\u00f5es de valida\u00e7\u00e3o que verificam os valores de entrada e decidem se voc\u00ea deve exibir as mensagens de erro. Aqui est\u00e3o as fun\u00e7\u00f5es para &#8220;Display name&#8221; e &#8220;WordPress admin email&#8221;:<\/p>\n<pre><code class=\"language-jsx\">const checkDisplayName = () =&gt; {\n  if (displayName.length &lt; 4) {\n    displayNameRef.current.style.display = 'block';\n  } else {\n    displayNameRef.current.style.display = 'none';\n  }\n}\n\nconst checkWpAdminEmail = () =&gt; {\n  let regex = \/^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$\/;\n  if (!wpAdminEmail.match(regex)) {\n    wpEmailRef.current.style.display = 'block';\n  } else {\n    wpEmailRef.current.style.display = 'none';\n  }\n}<\/code><\/pre>\n<p>Essas fun\u00e7\u00f5es s\u00e3o chamadas sempre que os campos de entrada correspondentes s\u00e3o alterados. Elas comparam os valores de entrada com os crit\u00e9rios de valida\u00e7\u00e3o e atualizam a exibi\u00e7\u00e3o das mensagens de erro manipulando a propriedade <code>style.display<\/code> dos elementos da mensagem de erro.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/site-builder-form-with-validation.jpg\" alt=\"Formul\u00e1rio do construtor de sites com valida\u00e7\u00e3o\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Formul\u00e1rio do construtor de sites com valida\u00e7\u00e3o.<\/figcaption><\/figure>\n<p>Fique \u00e0 vontade para implementar valida\u00e7\u00f5es adicionais ou personalizar a l\u00f3gica de valida\u00e7\u00e3o de acordo com seus requisitos.<\/p>\n<h3>Como lidar com o envio de formul\u00e1rios no React<\/h3>\n<p>Ao manipular o evento de envio de formul\u00e1rio para criar um site, precisamos executar v\u00e1rias tarefas. Primeiro, anexamos um manipulador de eventos <code>onSubmit<\/code> ao elemento <code>&lt;form&gt;<\/code>. Dentro da fun\u00e7\u00e3o <code>createSite<\/code>, evitamos o comportamento padr\u00e3o de envio de formul\u00e1rio chamando <code>event.preventDefault()<\/code>. Isso nos permite tratar o envio de forma program\u00e1tica.<\/p>\n<p>Para garantir que os dados do formul\u00e1rio sejam v\u00e1lidos antes de prosseguir com o envio, chamamos os m\u00e9todos de valida\u00e7\u00e3o <code>checkDisplayName<\/code> e <code>checkWpAdminEmail<\/code>. Esses m\u00e9todos verificam se os campos obrigat\u00f3rios atendem aos crit\u00e9rios especificados.<\/p>\n<pre><code class=\"language-jsx\">const createSite = (e) =&gt; {\n  e.preventDefault();\n\n  checkDisplayName();\n  checkWpAdminEmail();\n\n  \/\/ Additional logic\n};<\/code><\/pre>\n<p>Supondo que todas as valida\u00e7\u00f5es sejam aprovadas e que os campos obrigat\u00f3rios contenham dados v\u00e1lidos, prossiga com a limpeza do localStorage para garantir um estado limpo para armazenar a resposta da API e o nome de exibi\u00e7\u00e3o.<\/p>\n<p>Em seguida, fa\u00e7a uma solicita\u00e7\u00e3o de API para a API da Kinsta usando a fun\u00e7\u00e3o fetch. A solicita\u00e7\u00e3o \u00e9 um m\u00e9todo POST para o ponto de extremidade <strong>https:\/\/api.kinsta.com\/v2\/sites<\/strong>. Certifique-se de incluir os cabe\u00e7alhos necess\u00e1rios e o payload como JSON.<\/p>\n<pre><code class=\"language-jsx\">const createSiteWithKinstaAPI = async () =&gt; {\n    const resp = await fetch(\n        `${KinstaAPIUrl}\/sites`,\n        {\n            method: 'POST',\n            headers: {\n                'Content-Type': 'application\/json',\n                Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`\n            },\n            body: JSON.stringify({\n                company: `${process.env.REACT_APP_KINSTA_COMPANY_ID}`,\n                display_name: displayName,\n                region: centerLocation,\n                install_mode: 'new',\n                is_subdomain_multisite: false,\n                admin_email: wpAdminEmail,\n                admin_password: wpAdminPassword,\n                admin_user: wpAdminUsername,\n                is_multisite: false,\n                site_title: siteTitle,\n                woocommerce: false,\n                wordpressseo: false,\n                wp_language: 'en_US'\n            })\n        }\n    );\n\n    \/\/ Handle the response data\n};<\/code><\/pre>\n<p>O payload cont\u00e9m v\u00e1rios campos de dados que a API da Kinsta exige, como o ID da empresa, o nome de exibi\u00e7\u00e3o, a regi\u00e3o, o modo de instala\u00e7\u00e3o, o e-mail do administrador, a senha do administrador, etc. Esses valores s\u00e3o obtidos das vari\u00e1veis de estado correspondentes.<\/p>\n<p>Ap\u00f3s fazer a solicita\u00e7\u00e3o de API, aguardamos a resposta usando <code>await resp.json()<\/code> e extra\u00edmos os dados relevantes. Criamos um novo objeto <code>newData<\/code>, com o ID da opera\u00e7\u00e3o e o nome de exibi\u00e7\u00e3o, que \u00e9 armazenado no localStorage usando <code>localStorage.setItem<\/code>.<\/p>\n<pre><code class=\"language-jsx\">const createSiteWithKinstaAPI = async () =&gt; {\n    const resp = await fetch(\n        \/\/ Fetch request here\n    );\n\n    const data = await resp.json();\n    let newData = { operationId: data.operation_id, display_name: displayName };\n    localStorage.setItem('state', JSON.stringify(newData));\n    navigate('\/details');\n}<\/code><\/pre>\n<p>Por fim, invocamos a fun\u00e7\u00e3o <code>createSiteWithKinstaAPI<\/code> para que, quando um usu\u00e1rio preenche o formul\u00e1rio e clica no bot\u00e3o, um site do WordPress seja criado usando a API da Kinsta. Al\u00e9m disso, no c\u00f3digo, \u00e9 mencionado que o usu\u00e1rio \u00e9 redirecionado para a p\u00e1gina <strong>details.jsx<\/strong> para acompanhar a opera\u00e7\u00e3o com a API da Kinsta. Para habilitar a funcionalidade de navega\u00e7\u00e3o, importe o <code>useNavigate<\/code> do <code>react-router-dom<\/code> e inicialize-o.<\/p>\n<p>Lembrete: Voc\u00ea pode encontrar o c\u00f3digo completo <a href=\"https:\/\/github.com\/kinsta\/site-builder\/blob\/starter-files\/src\/pages\/Home.jsx\">dessa p\u00e1gina no reposit\u00f3rio do GitHub<\/a>.<\/p>\n<h3>Implementa\u00e7\u00e3o da verifica\u00e7\u00e3o do status da opera\u00e7\u00e3o com a API da Kinsta<\/h3>\n<p>Para verificar o status da opera\u00e7\u00e3o com a API da Kinsta, usamos o ID da opera\u00e7\u00e3o que foi armazenado no localStorage. Esse ID de opera\u00e7\u00e3o \u00e9 recuperado do localStorage usando <code>JSON.parse(localStorage.getItem('state'))<\/code> e atribu\u00eddo a uma vari\u00e1vel.<\/p>\n<p>Para verificar o status da opera\u00e7\u00e3o, fa\u00e7a outra solicita\u00e7\u00e3o de API para a API da Kinsta enviando uma solicita\u00e7\u00e3o GET para o ponto de extremidade <code>\/operations\/{operationId}<\/code>. Essa solicita\u00e7\u00e3o inclui os cabe\u00e7alhos necess\u00e1rios, como o cabe\u00e7alho Authorization que cont\u00e9m a chave API.<\/p>\n<pre><code class=\"language-jsx\">const [operationData, setOperationData] = useState({ message: \"Operation in progress\" });\nconst KinstaAPIUrl = 'https:\/\/api.kinsta.com\/v2';\nconst stateData = JSON.parse(localStorage.getItem('state'));\n\nconst checkOperation = async () =&gt; {\n    const operationId = stateData.operationId;\n    const resp = await fetch(\n        `${KinstaAPIUrl}\/operations\/${operationId}`,\n        {\n            method: 'GET',\n            headers: {\n                Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`\n            }\n        }\n    );\n    const data = await resp.json();\n    setOperationData(data);\n}<\/code><\/pre>\n<p>Assim que recebermos a resposta, extrairemos os dados relevantes da resposta usando <code>await resp.json()<\/code>. Os dados da opera\u00e7\u00e3o s\u00e3o ent\u00e3o atualizados no estado usando <code>setOperationData(data)<\/code>.<\/p>\n<p>Na instru\u00e7\u00e3o de retorno do componente, exibimos a mensagem da opera\u00e7\u00e3o usando <code>operationData.message<\/code>. Tamb\u00e9m fornecemos um bot\u00e3o que permite que o usu\u00e1rio acione manualmente a verifica\u00e7\u00e3o do status da opera\u00e7\u00e3o chamando o <code>checkOperation<\/code>.<\/p>\n<p>Al\u00e9m disso, se o status da opera\u00e7\u00e3o indicar que ela foi conclu\u00edda com \u00eaxito, o usu\u00e1rio poder\u00e1 usar os links adicionados para acessar o administrador do WordPress e o pr\u00f3prio site. Os links s\u00e3o constru\u00eddos usando o <code>stateData.display_name<\/code> obtido do localStorage.<\/p>\n<pre><code class=\"language-jsx\">&lt;a href={`http:\/\/${stateData.display_name}.kinsta.cloud\/wp-admin\/`} target=\"_blank\" rel=\"noreferrer\" className='detail-link'&gt;\n    &lt;p&gt;Open WordPress admin&lt;\/p&gt;\n    &lt;FiExternalLink \/&gt;\n&lt;\/a&gt;\n&lt;a href={`http:\/\/${stateData.display_name}.kinsta.cloud\/`} target=\"_blank\" rel=\"noreferrer\" className='detail-link'&gt;\n    &lt;p&gt;Open URL&lt;\/p&gt;\n    &lt;FiExternalLink \/&gt;\n&lt;\/a&gt;<\/code><\/pre>\n<p>Ao clicar nesses links, voc\u00ea abre o administrador do WordPress e a URL do site, respectivamente, em uma nova aba, permitindo que o usu\u00e1rio os acesse sem precisar navegar at\u00e9 o MyKinsta.<\/p>\n<p>Agora voc\u00ea pode criar um site WordPress facilmente por meio do seu aplicativo personalizado.<\/p>\n<h2>Como implantar seu aplicativo React com a Kinsta<\/h2>\n<p>Para implantar seu projeto React na <a href=\"https:\/\/sevalla.com\/application-hosting\/\">hospedagem de aplicativos<\/a> da Kinsta, voc\u00ea precisa enviar o projeto para o seu <a href=\"https:\/\/docs.sevalla.com\/applications\/get-started\/add-an-application#adding-an-application\">provedor Git preferido<\/a>. Quando seu projeto estiver hospedado no <a href=\"https:\/\/kinsta.com\/pt\/blog\/que-github\/\">GitHub<\/a>, no <a href=\"https:\/\/kinsta.com\/pt\/blog\/gitlab-vs-github\/\">GitLab<\/a> ou no <a href=\"https:\/\/kinsta.com\/pt\/blog\/bitbucket-vs-github\/\">Bitbucket<\/a>, voc\u00ea poder\u00e1 fazer a implanta\u00e7\u00e3o na Kinsta.<\/p>\n<p>Para implantar seu reposit\u00f3rio na Kinsta, siga estas etapas:<\/p>\n<ol>\n<li>Fa\u00e7a login ou crie sua conta Kinsta no painel MyKinsta.<\/li>\n<li>Na barra lateral esquerda, clique em &#8220;Aplicativos&#8221; e depois em &#8220;Adicionar servi\u00e7o&#8221;.<\/li>\n<li>Selecione &#8220;Aplicativo&#8221; no menu suspenso para implantar um aplicativo React na Kinsta.<\/li>\n<li>No modal que aparece, escolha o reposit\u00f3rio que voc\u00ea deseja implantar. Se voc\u00ea tiver v\u00e1rias branches, poder\u00e1 selecionar a branch desejada e dar um nome ao seu aplicativo.<\/li>\n<li>Selecione um dos 25 locais de centro de dados dispon\u00edveis. A Kinsta detectar\u00e1 automaticamente o comando start para o seu aplicativo.<\/li>\n<\/ol>\n<p>Por fim, n\u00e3o \u00e9 seguro enviar chaves API para hospedagens de sites p\u00fablicos, como seu provedor Git. Ao hospedar, voc\u00ea pode adicion\u00e1-las como <a href=\"https:\/\/docs.sevalla.com\/applications\/environment-variables\">vari\u00e1veis de ambiente<\/a> usando o mesmo nome e valor de vari\u00e1vel especificados no <strong>arquivo .env<\/strong>.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/set-environment-variables-on-mykinsta.jpg\" alt=\"Defina as vari\u00e1veis de ambiente no DevKinsta quando voc\u00ea estiver implementando\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Defina as vari\u00e1veis de ambiente no DevKinsta quando voc\u00ea estiver implementando.<\/figcaption><\/figure>\n<p>Quando voc\u00ea inicia a implanta\u00e7\u00e3o do seu aplicativo, o processo come\u00e7a e \u00e9 normalmente conclu\u00eddo em alguns minutos. Uma implanta\u00e7\u00e3o bem-sucedida gera um link para o seu aplicativo, como <strong>https:\/\/site-builder-ndg9i.kinsta.app\/<\/strong>.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Voc\u00ea pode ativar a implanta\u00e7\u00e3o autom\u00e1tica, para que a Kinsta reimplante seu aplicativo sempre que voc\u00ea alterar sua base de c\u00f3digo e envi\u00e1-la para o GitHub.<\/p>\n<\/aside>\n\n<h2>Resumo<\/h2>\n<p>Neste artigo, voc\u00ea aprendeu como usar programaticamente a API da Kinsta para criar um site do WordPress e integrar a API em um aplicativo React. Lembre-se sempre de manter sua chave de API segura e, caso acredite que a tenha compartilhado publicamente, revogue e crie uma nova.<\/p>\n<p>A API da Kinsta pode ser usada n\u00e3o apenas para criar um site WordPress, mas tamb\u00e9m para recuperar informa\u00e7\u00f5es sobre seus sites WordPress, dom\u00ednios e muito mais. Voc\u00ea tamb\u00e9m pode acessar os servi\u00e7os da <a href=\"https:\/\/kinsta.com\/pt\/\">Kinsta<\/a>, como bancos de dados e aplicativos.<\/p>\n<p><em>Gostar\u00edamos de saber qual endpoint voc\u00ea adoraria ver adicionado \u00e0 pr\u00f3xima vers\u00e3o da API da Kinsta. Por favor, compartilhe suas sugest\u00f5es nos coment\u00e1rios.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>O WordPress \u00e9 um sistema popular de gerenciamento de conte\u00fado que alimenta milh\u00f5es de sites na Internet. Ele oferece uma interface f\u00e1cil de usar e uma &#8230;<\/p>\n","protected":false},"author":287,"featured_media":61070,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[951,1026,1018,983],"class_list":["post-61069","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-api","topic-desenvolvimento-wordpress","topic-ferramentas-desenvolvimento-web","topic-servicos-kinsta"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Como Criar um Site WordPress com a API da Kinsta - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Desbloqueie todo o potencial da API da Kinsta e crie um site WordPress facilmente. Aprenda tamb\u00e9m como conectar a API da Kinsta e construir uma interface personalizada.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/pt\/blog\/wordpress-api\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Como Criar um Site WordPress com a API da Kinsta\" \/>\n<meta property=\"og:description\" content=\"Desbloqueie todo o potencial da API da Kinsta e crie um site WordPress facilmente. Aprenda tamb\u00e9m como conectar a API da Kinsta e construir uma interface personalizada.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/pt\/blog\/wordpress-api\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstapt\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-07-13T11:04:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-31T14:13:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/07\/wordpress-api.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Joel Olawanle\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Desbloqueie todo o potencial da API da Kinsta e crie um site WordPress facilmente. Aprenda tamb\u00e9m como conectar a API da Kinsta e construir uma interface personalizada.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/07\/wordpress-api.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@olawanle_joel\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joel Olawanle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo estimado de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"19 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/wordpress-api\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/wordpress-api\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"Como Criar um Site WordPress com a API da Kinsta\",\"datePublished\":\"2023-07-13T11:04:02+00:00\",\"dateModified\":\"2025-01-31T14:13:30+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/wordpress-api\/\"},\"wordCount\":3549,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/wordpress-api\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/07\/wordpress-api.jpg\",\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/wordpress-api\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/wordpress-api\/\",\"url\":\"https:\/\/kinsta.com\/pt\/blog\/wordpress-api\/\",\"name\":\"Como Criar um Site WordPress com a API da Kinsta - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/wordpress-api\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/wordpress-api\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/07\/wordpress-api.jpg\",\"datePublished\":\"2023-07-13T11:04:02+00:00\",\"dateModified\":\"2025-01-31T14:13:30+00:00\",\"description\":\"Desbloqueie todo o potencial da API da Kinsta e crie um site WordPress facilmente. Aprenda tamb\u00e9m como conectar a API da Kinsta e construir uma interface personalizada.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/wordpress-api\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/wordpress-api\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/wordpress-api\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/07\/wordpress-api.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/07\/wordpress-api.jpg\",\"width\":1460,\"height\":730,\"caption\":\"Como Criar um Site WordPress com a API da Kinsta\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/wordpress-api\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/pt\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"API\",\"item\":\"https:\/\/kinsta.com\/pt\/topicos\/api\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Como Criar um Site WordPress com a API da Kinsta\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/pt\/#website\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/pt\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstapt\/\",\"https:\/\/x.com\/kinsta_pt\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"caption\":\"Joel Olawanle\"},\"description\":\"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.\",\"sameAs\":[\"https:\/\/joelolawanle.com\/\",\"https:\/\/www.linkedin.com\/in\/olawanlejoel\/\",\"https:\/\/x.com\/olawanle_joel\",\"https:\/\/www.youtube.com\/@joelolawanle\"],\"gender\":\"male\",\"knowsAbout\":[\"JavaScript\",\"React\",\"Next.js\"],\"knowsLanguage\":[\"English\"],\"jobTitle\":\"Technical Editor\",\"worksFor\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/pt\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Como Criar um Site WordPress com a API da Kinsta - Kinsta\u00ae","description":"Desbloqueie todo o potencial da API da Kinsta e crie um site WordPress facilmente. Aprenda tamb\u00e9m como conectar a API da Kinsta e construir uma interface personalizada.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/pt\/blog\/wordpress-api\/","og_locale":"pt_PT","og_type":"article","og_title":"Como Criar um Site WordPress com a API da Kinsta","og_description":"Desbloqueie todo o potencial da API da Kinsta e crie um site WordPress facilmente. Aprenda tamb\u00e9m como conectar a API da Kinsta e construir uma interface personalizada.","og_url":"https:\/\/kinsta.com\/pt\/blog\/wordpress-api\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstapt\/","article_published_time":"2023-07-13T11:04:02+00:00","article_modified_time":"2025-01-31T14:13:30+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/07\/wordpress-api.jpg","type":"image\/jpeg"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Desbloqueie todo o potencial da API da Kinsta e crie um site WordPress facilmente. Aprenda tamb\u00e9m como conectar a API da Kinsta e construir uma interface personalizada.","twitter_image":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/07\/wordpress-api.jpg","twitter_creator":"@olawanle_joel","twitter_site":"@kinsta_pt","twitter_misc":{"Escrito por":"Joel Olawanle","Tempo estimado de leitura":"19 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/pt\/blog\/wordpress-api\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/blog\/wordpress-api\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"Como Criar um Site WordPress com a API da Kinsta","datePublished":"2023-07-13T11:04:02+00:00","dateModified":"2025-01-31T14:13:30+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/wordpress-api\/"},"wordCount":3549,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/wordpress-api\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/07\/wordpress-api.jpg","inLanguage":"pt-PT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/pt\/blog\/wordpress-api\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/pt\/blog\/wordpress-api\/","url":"https:\/\/kinsta.com\/pt\/blog\/wordpress-api\/","name":"Como Criar um Site WordPress com a API da Kinsta - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/wordpress-api\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/wordpress-api\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/07\/wordpress-api.jpg","datePublished":"2023-07-13T11:04:02+00:00","dateModified":"2025-01-31T14:13:30+00:00","description":"Desbloqueie todo o potencial da API da Kinsta e crie um site WordPress facilmente. Aprenda tamb\u00e9m como conectar a API da Kinsta e construir uma interface personalizada.","breadcrumb":{"@id":"https:\/\/kinsta.com\/pt\/blog\/wordpress-api\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/pt\/blog\/wordpress-api\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/blog\/wordpress-api\/#primaryimage","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/07\/wordpress-api.jpg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/07\/wordpress-api.jpg","width":1460,"height":730,"caption":"Como Criar um Site WordPress com a API da Kinsta"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/pt\/blog\/wordpress-api\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/pt\/"},{"@type":"ListItem","position":2,"name":"API","item":"https:\/\/kinsta.com\/pt\/topicos\/api\/"},{"@type":"ListItem","position":3,"name":"Como Criar um Site WordPress com a API da Kinsta"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/pt\/#website","url":"https:\/\/kinsta.com\/pt\/","name":"Kinsta\u00ae","description":"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura","publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/pt\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/pt\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/pt\/","logo":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstapt\/","https:\/\/x.com\/kinsta_pt","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","caption":"Joel Olawanle"},"description":"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.","sameAs":["https:\/\/joelolawanle.com\/","https:\/\/www.linkedin.com\/in\/olawanlejoel\/","https:\/\/x.com\/olawanle_joel","https:\/\/www.youtube.com\/@joelolawanle"],"gender":"male","knowsAbout":["JavaScript","React","Next.js"],"knowsLanguage":["English"],"jobTitle":"Technical Editor","worksFor":"Kinsta","url":"https:\/\/kinsta.com\/pt\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/61069","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/users\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/comments?post=61069"}],"version-history":[{"count":9,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/61069\/revisions"}],"predecessor-version":[{"id":61210,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/61069\/revisions\/61210"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/61069\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/61069\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/61069\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/61069\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/61069\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/61069\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/61069\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/61069\/translations\/es"},{"href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/61069\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media\/61070"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media?parent=61069"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/tags?post=61069"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/topic?post=61069"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}