{"id":61871,"date":"2023-11-15T13:14:19","date_gmt":"2023-11-15T16:14:19","guid":{"rendered":"https:\/\/kinsta.com\/pt\/?p=61871&#038;preview=true&#038;preview_id=61871"},"modified":"2023-11-17T07:31:25","modified_gmt":"2023-11-17T10:31:25","slug":"clonar-site-api-kinsta","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/clonar-site-api-kinsta\/","title":{"rendered":"Como Clonar um Site WordPress Usando a API da Kinsta e o React"},"content":{"rendered":"<p>N\u00e3o \u00e9 necess\u00e1rio que voc\u00ea j\u00e1 gerencie muitos dentre os 800 milh\u00f5es de <a href=\"https:\/\/kinsta.com\/pt\/wordpress\/\">sites WordPress<\/a> na web para come\u00e7ar a descobrir formas de lan\u00e7ar novos sites com efici\u00eancia.<\/p>\n<p>Clonar uma configura\u00e7\u00e3o existente do WordPress \u00e9 uma maneira de come\u00e7ar a trabalhar rapidamente, e os clientes do servi\u00e7o da Kinsta de <a href=\"https:\/\/kinsta.com\/pt\/hospedagem-wordpress\/\">hospedagem gerenciada de WordPress<\/a>\u00a0sabem que isso pode ser feito facilmente em nosso <a href=\"https:\/\/my.kinsta.com\/login?lang=pt?destination=%2F%3Flang%3Dpt&#038;lang=pt\">painel MyKinsta<\/a>, de f\u00e1cil utiliza\u00e7\u00e3o.<\/p>\n<p>Al\u00e9m disso, voc\u00ea pode clonar sites WordPress em escala usando suas tecnologias favoritas de desenvolvimento de aplicativos e a <a href=\"https:\/\/kinsta.com\/pt\/docs\/api-da-kinsta\/\">API da Kinsta<\/a>. Neste tutorial, usamos essa API e o <a href=\"https:\/\/kinsta.com\/pt\/blog\/o-que-e-react-js\/\">React<\/a>, uma das v\u00e1rias e populares <a href=\"https:\/\/kinsta.com\/pt\/blog\/bibliotecas-javascript\/\">bibliotecas JavaScript<\/a>, para mostrar como isso funciona.<br \/>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc><\/p>\n<h2>O que voc\u00ea est\u00e1 construindo<\/h2>\n<p>O cen\u00e1rio \u00e9 o seguinte: voc\u00ea \u00e9 uma ag\u00eancia de desenvolvimento WordPress com um ou mais sites que podem ser usados como templates iniciais. O aplicativo React de clonagem de sites WordPress que estamos criando \u00e9 parecido com este:<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/08\/clone-wp-site-demo.gif\" alt=\"Aplicativo React para clonagem de site com a API da Kinsta.\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Aplicativo React para clonagem de site com a API da Kinsta.<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Est\u00e1 com pressa? Todo o c\u00f3digo abaixo est\u00e1 dispon\u00edvel <a href=\"https:\/\/github.com\/kinsta\/clone-wp-site\" target=\"_blank\" rel=\"noopener noreferrer\">neste template do GitHub<\/a>. Use-o para criar seu pr\u00f3prio reposit\u00f3rio e implantar via <a href=\"https:\/\/my.kinsta.com\/?lang=pt\">MyKinsta<\/a>, adicionando seu pr\u00f3prio ID de empresa e chave de API como vari\u00e1veis de ambiente. (Verifique o <a href=\"https:\/\/github.com\/kinsta\/clone-wp-site\/blob\/main\/README.md\" target=\"_blank\" rel=\"noopener noreferrer\">arquivo Readme.md<\/a> para obter instru\u00e7\u00f5es).<\/p>\n<\/aside>\n\n<h3>Pr\u00e9-requisitos<\/h3>\n<p>Para seguir este tutorial, voc\u00ea precisar\u00e1 de 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\/pt\/javascript\/\">JavaScript<\/a>, e alguma familiaridade com o React. Al\u00e9m disso, precisar\u00e1 do Node.js e do npm (o <a href=\"https:\/\/kinsta.com\/pt\/blog\/npm-gerenciador-pacotes-node\/\">gerenciador de pacotes do Node<\/a>), ou o yarn, instalados em seu computador. O foco deste projeto \u00e9 criar um aplicativo de clonagem do WordPress usando o React e a API da Kinsta, e n\u00e3o detalhes de cria\u00e7\u00e3o e estilo da interface do usu\u00e1rio (UI).<br \/>\n<\/p>\n<h2>Configurando o ambiente de desenvolvimento<\/h2>\n<p>Voc\u00ea pode criar um aplicativo React do zero e desenvolver sua pr\u00f3pria interface, ou pode pegar o template inicial do <a href=\"https:\/\/kinsta.com\/pt\/topicos\/git\/\">Git<\/a> mencionado acima, seguindo estas etapas:<\/p>\n<ol>\n<li>Visite o <a href=\"https:\/\/github.com\/kinsta\/clone-wp-site\" target=\"_blank\" rel=\"noopener noreferrer\">reposit\u00f3rio do GitHub<\/a> deste projeto.<\/li>\n<li>Selecione <strong>Use this template<\/strong>\u00a0&gt;\u00a0<strong>Create a new repository <\/strong>para copiar o c\u00f3digo inicial em um reposit\u00f3rio dentro de sua conta do GitHub. (Marque a caixa <strong>include all branches<\/strong>.).<\/li>\n<li>Puxe o reposit\u00f3rio para seu computador local e mude para o branch <a href=\"https:\/\/github.com\/kinsta\/clone-wp-site\/tree\/starter-files\" target=\"_blank\" rel=\"noopener noreferrer\">starter-files<\/a> usando o comando: <code>git checkout starter-files<\/code>.<\/li>\n<li>Instale as depend\u00eancias necess\u00e1rias executando o comando <code>npm install<\/code>.<\/li>\n<\/ol>\n<p>Quando a instala\u00e7\u00e3o estiver conclu\u00edda, voc\u00ea poder\u00e1 iniciar o projeto no computador local com <code>npm run start<\/code>. Isso abre o projeto em <a href=\"http:\/\/localhost:3000\/\">http:\/\/localhost:3000\/<\/a>.<\/p>\n<h3>Entendendo os arquivos de projeto<\/h3>\n<p>A pasta <strong>src <\/strong>\u00e9 o cora\u00e7\u00e3o de um aplicativo React, pois cont\u00e9m o JavaScript necess\u00e1rio para o webpack. Nessa pasta est\u00e1 o <strong>App.js,<\/strong> no qual as duas rotas deste projeto est\u00e3o configuradas.<\/p>\n<p>Dentro da pasta <strong>src<\/strong> est\u00e3o as subpastas <strong>components<\/strong> e <strong>pages<\/strong>. A pasta components cont\u00e9m componentes reutiliz\u00e1veis, como <strong>Header.jsx<\/strong> e <strong>Footer.jsx<\/strong>, usados nas p\u00e1ginas <strong>Home.jsx<\/strong> e <strong>Operations.jsx<\/strong>.<\/p>\n<p>Aqui voc\u00ea se concentra na implanta\u00e7\u00e3o da l\u00f3gica em <strong>Home.jsx<\/strong> e <strong>Operations.jsx<\/strong>, j\u00e1 que o estilo e o roteamento podem ser encontrados em nossos arquivos iniciais do GitHub.<\/p>\n<p>O <strong>Home.jsx<\/strong> tem um formul\u00e1rio com dois campos: o nome do site que voc\u00ea est\u00e1 criando e um campo de sele\u00e7\u00e3o que lista os sites do WordPress encontrados em sua conta MyKinsta (essa lista \u00e9 obtida por meio da API da Kinsta).<\/p>\n<p>Quando o bot\u00e3o de envio do formul\u00e1rio <strong>Clonar site<\/strong>\u00a0\u00e9 clicado, \u00e9 retornado um objeto que cont\u00e9m uma propriedade <code>operation_id<\/code>. Essa ID e o nome de exibi\u00e7\u00e3o ser\u00e3o passados como par\u00e2metros de rota para <strong>Operations.jsx<\/strong>, onde o status da opera\u00e7\u00e3o de clonagem \u00e9 relatado. A interface tamb\u00e9m incluir\u00e1 links para acessar o login do administrador do WordPress e a p\u00e1gina inicial do site.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/08\/operations-page.jpg\" alt=\"P\u00e1gina de opera\u00e7\u00f5es mostrando links para o administrador do WP e o site.\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">P\u00e1gina de opera\u00e7\u00f5es mostrando links para o administrador do WP e o site.<\/figcaption><\/figure>\n<h2>Usando a API da Kinsta para clonar um site do WordPress<\/h2>\n<p>Em <strong>Home.jsx<\/strong>, tr\u00eas solicita\u00e7\u00f5es de API ser\u00e3o feitas \u00e0 <a href=\"https:\/\/api-docs.kinsta.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">API da Kinsta<\/a>. A primeira \u00e9 para obter uma lista de sites em sua conta Kinsta. Isso ser\u00e1 armazenado em um estado e, em seguida, iterado para o campo de sele\u00e7\u00e3o. Essa solicita\u00e7\u00e3o ser\u00e1 feita imediatamente ap\u00f3s a renderiza\u00e7\u00e3o da p\u00e1gina usando o <a href=\"https:\/\/kinsta.com\/pt\/blog\/react-useeffect\/\">Hook useEffect<\/a>.<\/p>\n<p>A segunda e a terceira solicita\u00e7\u00f5es s\u00e3o feitas quando o bot\u00e3o <strong>Clonar site<\/strong> \u00e9 clicado. A segunda solicita\u00e7\u00e3o obt\u00e9m o ID do ambiente do site que voc\u00ea deseja clonar. A terceira usa esse ID de ambiente e o nome de exibi\u00e7\u00e3o do site para iniciar a clonagem do site.<\/p>\n<h3>Interagindo com a API da Kinsta no React<\/h3>\n<p>Neste tutorial, voc\u00ea interage com dois endpoints da API da Kinsta:<\/p>\n<ul>\n<li><code><a href=\"https:\/\/api-docs.kinsta.com\/tag\/WordPress-Sites\" target=\"_blank\" rel=\"noopener noreferrer\">\/sites<\/a><\/code>: Voc\u00ea pode retornar uma lista de todos os sites, solicitar um ID de ambiente do site e, finalmente, clonar um site existente.<\/li>\n<li><code><a href=\"https:\/\/api-docs.kinsta.com\/tag\/Operations\" target=\"_blank\" rel=\"noopener noreferrer\">\/operations<\/a><\/code>: \u00c9 usado para obter o status da opera\u00e7\u00e3o. Por exemplo, quando a opera\u00e7\u00e3o de clonagem do site est\u00e1 em andamento, voc\u00ea pode usar esse endpoint para rastrear programaticamente o status da opera\u00e7\u00e3o para determinar quando ela foi conclu\u00edda.<\/li>\n<\/ul>\n<p>Para interagir com a API da Kinsta, voc\u00ea precisa do <strong>ID da <\/strong><strong>empresa<\/strong> (pode ser encontrado no MyKinsta em <strong>Empresa<\/strong> &gt; <strong>Detalhes de faturas<\/strong> &gt; <strong>ID da empresa<\/strong>) e uma <strong>chave API<\/strong>. (Veja aqui como <a href=\"https:\/\/kinsta.com\/pt\/blog\/chave-api-kinsta\/\">criar uma chave de API da Kinsta<\/a>.)<\/p>\n<p>Depois que voc\u00ea tiver essas credenciais, \u00e9 melhor armazen\u00e1-las com seguran\u00e7a como vari\u00e1veis de ambiente em seu aplicativo React. Para configurar as vari\u00e1veis de ambiente, crie um arquivo <strong>.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 arquivo <strong>.env<\/strong> ao seu <a href=\"https:\/\/kinsta.com\/pt\/blog\/nao-funcionamento-do-gitignore\/\">arquivo. gitignore<\/a> para evitar que ele seja enviado ao GitHub. Isso garante que suas informa\u00e7\u00f5es confidenciais, como chaves de API, permane\u00e7am privadas.<\/p>\n<\/aside>\n\n<h3>Clonar um site existente com a API da Kinsta<\/h3>\n<p>Vamos come\u00e7ar buscando a lista de todos os sites quando o <strong>Home.jsx<\/strong> renderizar, usando o Hook useEffect e armazenando-os em um estado. Para isso, importe os hooks useEffect e <a href=\"https:\/\/kinsta.com\/pt\/blog\/usestate-react\/\">useState<\/a>, e crie um estado para armazenar o array dos sites que ser\u00e1 obtido:<\/p>\n<pre><code class=\"language-jsx\">import { useState, useEffect } from 'react';\nconst [sites, setSites] = useState([]);<\/code><\/pre>\n<p>Em seguida, use o hook useEffect para consultar a API da Kinsta usando 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>. Primeiro, crie duas vari\u00e1veis constantes para armazenar os cabe\u00e7alhos e a URL da API da Kinsta. Isso \u00e9 feito para evitar repeti\u00e7\u00e3o, pois voc\u00ea enviar\u00e1 mais de uma solicita\u00e7\u00e3o \u00e0 API da Kinsta nesta p\u00e1gina:<\/p>\n<pre><code class=\"language-jsx\">const KinstaAPIUrl = 'https:\/\/api.kinsta.com\/v2';\nconst headers = useMemo(() =&gt; {\n    return {\n        Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`\n    };\n}, []);<\/code><\/pre>\n<p>No c\u00f3digo acima, o hook <a href=\"https:\/\/kinsta.com\/pt\/blog\/usecallback-react\/#reacts-usecallback-vs-usememo\">useMemo<\/a> memoriza o objeto headers para que ele n\u00e3o precise ser reavaliado em cada renderiza\u00e7\u00e3o, pois seu valor \u00e9 constante. Agora voc\u00ea pode criar a solicita\u00e7\u00e3o de API:<\/p>\n<pre><code class=\"language-jsx\">useEffect(() =&gt; {\n    const fetchAllSites = async () =&gt; {\n        const query = new URLSearchParams({\n            company: process.env.REACT_APP_KINSTA_COMPANY_ID,\n        }).toString();\n        const resp = await fetch(\n            `${KinstaAPIUrl}\/sites?${query}`,\n            {\n                method: 'GET',\n                headers\n            }\n        );\n        const data = await resp.json();\n        setSites(data.company.sites);\n    };\n    fetchAllSites();\n}, [headers]);<\/code><\/pre>\n<p>No c\u00f3digo acima, \u00e9 criada uma fun\u00e7\u00e3o ass\u00edncrona, <code>fetchAllSites<\/code>. Dentro dessa fun\u00e7\u00e3o, voc\u00ea primeiro define o par\u00e2metro <code>query<\/code> (o ID da sua empresa) obtido do seu arquivo <strong>.env<\/strong>. Da\u00ed faz uma solicita\u00e7\u00e3o GET ao endpoint <code>\/sites<\/code> da API da Kinsta, usando o par\u00e2metro <code>query<\/code>. A resposta \u00e9 ent\u00e3o armazenada no estado <code>sites<\/code> que voc\u00ea criou anteriormente. Por fim, voc\u00ea chama <code>fetchAllSites<\/code> para iniciar o processo de busca.<\/p>\n<p>Agora vamos incorporar os valores armazenados no estado <code>sites<\/code>, percorrendo-os para preencher o campo de sele\u00e7\u00e3o. O nome de exibi\u00e7\u00e3o ser\u00e1 mostrado ao usu\u00e1rio, enquanto o ID do site ser\u00e1 usado como o valor da op\u00e7\u00e3o. Dessa forma, quando o formul\u00e1rio for enviado, o ID do site selecionado poder\u00e1 ser usado para consultar os detalhes do ambiente:<\/p>\n<pre><code class=\"language-jsx\">&lt;div className=\"input-div\"&gt;\n    &lt;label&gt;Select a site&lt;\/label&gt;\n    &lt;span&gt;Select the site you want to clone&lt;\/span&gt;\n    &lt;select className=\"form-control\"&gt;\n        &lt;option&gt; value=\"\"&gt;&lt;\/option&gt;\n        {sites && (\n            sites.map((site) =&gt; {\n                return (\n                    &lt;option&gt; key={site.id} value={site.id}&gt;{site.display_name}&lt;\/option&gt;\n                )\n            })\n        )}\n    &lt;\/select&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>Prosseguimos com o envio do formul\u00e1rio e a recupera\u00e7\u00e3o dos dados dele. Para fazer isso, \u00e9 preciso criar vari\u00e1veis de estado para cada campo de entrada:<\/p>\n<pre><code class=\"language-jsx\">const [selectedSiteId, setSelectedSiteId] = useState('');\nconst [displayName, setDisplayName] = useState('');<\/code><\/pre>\n<p>Em seguida, vincule os campos do formul\u00e1rio a seus respectivos valores de estado adicionando os atributos <code>value<\/code> e <code>onChange<\/code> a cada elemento de entrada. O formul\u00e1rio ficar\u00e1 assim:<\/p>\n<pre><code class=\"language-jsx\">&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\" value={displayName} onChange={(e) =&gt; setDisplayName(e.target.value)} \/&gt;\n        &lt;\/div&gt;\n        &lt;div className=\"input-div\"&gt;\n            &lt;label&gt;Select a site&lt;\/label&gt;\n            &lt;span&gt;Select the site you want to clone&lt;\/span&gt;\n            &lt;select className=\"form-control\" value={selectedSiteId} onChange={(e) =&gt; setSelectedSiteId(e.target.value)}&gt;\n                &lt;option value=\"\"&gt;&lt;\/option&gt;\n                {sites && (\n                    sites.map((site) =&gt; {\n                        return (\n                            &lt;option key={site.id} value={site.id}&gt;{site.display_name}&lt;\/option&gt;\n                        )\n                    })\n                )}\n            &lt;\/select&gt;\n        &lt;\/div&gt;\n        &lt;button className='btn'&gt;Clone Site&lt;\/button&gt;\n    &lt;\/div&gt;\n&lt;\/form&gt;<\/code><\/pre>\n<p>No c\u00f3digo acima, cada elemento de entrada tem o atributo value definido como a vari\u00e1vel de estado correspondente. E o atributo <code>onChange<\/code> \u00e9 usado para atualizar o valor do estado quando o usu\u00e1rio interage com os campos de entrada.<\/p>\n<p>Para gerenciar o envio do formul\u00e1rio, anexe um m\u00e9todo <code>onSubmit<\/code> ao elemento formul\u00e1rio. Por exemplo:<\/p>\n<pre><code class=\"language-jsx\">&lt;form&gt; onSubmit={handleSubmission}&gt;\n    {\/* form details *\/}\n&lt;\/form&gt;<\/code><\/pre>\n<p>Defina o m\u00e9todo <code>handleSubmission<\/code>, que envolve fazer duas solicita\u00e7\u00f5es de API para a API da Kinsta. A primeira solicita\u00e7\u00e3o recupera o ID do ambiente do site a ser clonado, e a segunda solicita\u00e7\u00e3o executa a opera\u00e7\u00e3o de clonagem.<\/p>\n<p>Vamos come\u00e7ar recuperando a ID do ambiente. Dentro do m\u00e9todo <code>handleSubmission<\/code>, crie uma fun\u00e7\u00e3o ass\u00edncrona para lidar com essa solicita\u00e7\u00e3o. A fun\u00e7\u00e3o enviar\u00e1 uma solicita\u00e7\u00e3o GET para o endpoint <code>\/sites<\/code>, anexando o ID do site selecionado, seguido do endpoint <code><a href=\"https:\/\/api-docs.kinsta.com\/tag\/WordPress-Sites#operation\/getSiteEnvironments\" target=\"_blank\" rel=\"noopener noreferrer\">\/environments<\/a><\/code>:<\/p>\n<pre><code class=\"language-jsx\">const handleSubmission = async (e) =&gt; {\n    e.preventDefault();\n    const fetchEnvironmentId = async (siteId) =&gt; {\n        const resp = await fetch(\n            `${KinstaAPIUrl}\/sites\/${siteId}\/environments`,\n            {\n                method: 'GET',\n                headers\n            }\n        );\n        const data = await resp.json();\n        let envId = data.site.environments[0].id;\n        return envId;\n    }\n    let environmentId = await fetchEnvironmentId(selectedSiteId);\n}<\/code><\/pre>\n<p>Acima, <code>fetchEnvironmentId<\/code> \u00e9 uma fun\u00e7\u00e3o ass\u00edncrona que envia uma solicita\u00e7\u00e3o GET \u00e0 API da Kinsta. Ela busca os ambientes do site selecionado e extrai o ID do ambiente da resposta. A ID do ambiente \u00e9 armazenada na vari\u00e1vel <code>envId<\/code>, e ent\u00e3o retornada. Ao chamar a fun\u00e7\u00e3o, atribu\u00edmos o valor retornado \u00e0 vari\u00e1vel <code>envId<\/code>.<br \/>\n<br \/>\nNeste ponto voc\u00ea pode clonar um site existente com a API da Kinsta, pois tem as informa\u00e7\u00f5es essenciais sobre o site de origem: ID da empresa, nome de exibi\u00e7\u00e3o e ID do ambiente.<\/p>\n<p>Dentro do m\u00e9todo <code>handleSubmission<\/code>, crie uma fun\u00e7\u00e3o chamada <code>cloneExistingSite<\/code> para lidar com essa solicita\u00e7\u00e3o de API. Essa solicita\u00e7\u00e3o ser\u00e1 para o endpoint <code><a href=\"https:\/\/api-docs.kinsta.com\/tag\/WordPress-Sites#operation\/cloneWordPressSite\" target=\"_blank\" rel=\"noopener noreferrer\">\/sites\/clone<\/a><\/code>. Diversamente das solicita\u00e7\u00f5es anteriores, os cabe\u00e7alhos dessa solicita\u00e7\u00e3o s\u00e3o diferentes, porque voc\u00ea precisa especificar o <code>Content-Type<\/code> como <code>application\/json<\/code>. Al\u00e9m disso, esta \u00e9 uma solicita\u00e7\u00e3o POST. Portanto, voc\u00ea precisa incluir um corpo de solicita\u00e7\u00e3o contendo a carga \u00fatil que deseja enviar \u00e0 API. Veja como a solicita\u00e7\u00e3o ser\u00e1 estruturada:<\/p>\n<pre><code class=\"language-jsx\">const handleSubmission = async (e) =&gt; {\n    e.preventDefault();\n\n    \/\/ fetch environment Id\n\n    const cloneExistingSite = async (env_Id) =&gt; {\n        const resp = await fetch(\n            `${KinstaAPIUrl}\/sites\/clone`,\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                    source_env_id: env_Id,\n                })\n            }\n        );\n        const data = await resp.json();\n        navigate(`\/operations\/${displayName}\/${data.operation_id}`)\n        console.log(data);\n    }\n    cloneExistingSite(environmentId);\n}<\/code><\/pre>\n<p>Neste c\u00f3digo, a solicita\u00e7\u00e3o <code>body<\/code> \u00e9 constru\u00edda usando <code>JSON.stringify()<\/code> para converter o objeto carga \u00fatil em uma string de caracteres JSON. A resposta \u00e9 ent\u00e3o armazenada na vari\u00e1vel de dados. Usando o m\u00e9todo <code>useNavigate<\/code> da biblioteca <code>react-router-dom<\/code>, o <code>displayName<\/code> e o <code>operation_id<\/code> s\u00e3o passados como par\u00e2metros de rota. Certifique-se de importar o m\u00e9todo <code>useNavigate<\/code> e instanci\u00e1-lo:<\/p>\n<pre><code class=\"language-jsx\">\/\/ Import the required method \nimport { useNavigate } from 'react-router-dom'; \n\n\/\/ Instantiate the useNavigate method \nconst navigate = useNavigate();<\/code><\/pre>\n<p>Agora, quando voc\u00ea preencher o formul\u00e1rio e clicar no bot\u00e3o <strong>Clone site<\/strong>, um novo site iniciar\u00e1 o processo de clonagem, vis\u00edvel no painel MyKinsta. No entanto, queremos rastrear a opera\u00e7\u00e3o de clonagem do site de forma program\u00e1tica na interface de usu\u00e1rio personalizada. Voc\u00ea pode gerenciar isso no <strong>Operations.jsx<\/strong>, usando os dados enviados pela rota.<\/p>\n<h3>Implanta\u00e7\u00e3o da verifica\u00e7\u00e3o do status da opera\u00e7\u00e3o com a API da Kinsta<\/h3>\n<p>Em <strong>Operations.jsx<\/strong>, recupere\u00a0 o ID da opera\u00e7\u00e3o da rota, usando o m\u00e9todo <code>useParams<\/code> da <code>react-router-dom<\/code>. Esse ID ser\u00e1 usado para fazer uma solicita\u00e7\u00e3o de API sempre que o bot\u00e3o <strong>Check Site Status<\/strong> for clicado.<\/p>\n<p>Primeiro, importe o m\u00e9todo <code>useParams<\/code> e use-o para instanciar as vari\u00e1veis <code>displayName<\/code> e <code>operationId<\/code>:<\/p>\n<pre><code class=\"language-jsx\">\/\/ Import the useParams library\nimport { useParams } from 'react-router-dom';\n\n\/\/ Instantiate the paramters\nconst { displayName, operationId } = useParams();<\/code><\/pre>\n<p>A seguir crie um estado para armazenar o status da opera\u00e7\u00e3o quando a solicita\u00e7\u00e3o for feita:<\/p>\n<pre><code class=\"language-jsx\">const [operationData, setOperationData] = useState({ message: \"Operation in progress.\" });<\/code><\/pre>\n<p>No c\u00f3digo acima, o estado \u00e9 inicializado com uma mensagem padr\u00e3o, que ser\u00e1 exibida at\u00e9 que o bot\u00e3o <strong>Check Site Status<\/strong> seja clicado. Adicione um evento <code>onClick<\/code> ao bot\u00e3o <strong>Check Site Status<\/strong> e chame o m\u00e9todo <code>checkOperation<\/code> quando o bot\u00e3o for clicado:<\/p>\n<pre><code class=\"language-jsx\">&lt;button&gt; className='sm-btn' onClick={() =&gt; checkOperation()}&gt;Check Site Status&lt;\/button&gt;<\/code><\/pre>\n<p>Agora crie a fun\u00e7\u00e3o <code>checkOperation<\/code> para fazer a solicita\u00e7\u00e3o de opera\u00e7\u00e3o \u00e0 API da Kinsta. Armazene as constantes <code>headers<\/code> e <code>KinstaAPIUrl<\/code> em vari\u00e1veis, e ent\u00e3o as utilize na solicita\u00e7\u00e3o da API:<\/p>\n<pre><code class=\"language-jsx\">const KinstaAPIUrl = 'https:\/\/api.kinsta.com\/v2';\nconst headers = useMemo(() =&gt; {\n    return {\n        Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`\n    };\n}, []);\n\nconst checkOperation = async () =&gt; {\n    const resp = await fetch(\n        `${KinstaAPIUrl}\/operations\/${operationId}`,\n        {\n            method: 'GET',\n            headers\n        }\n    );\n    const data = await resp.json();\n    setOperationData(data);\n};<\/code><\/pre>\n<p>No c\u00f3digo acima, uma solicita\u00e7\u00e3o GET \u00e9 enviada para o endpoint <code>\/operations<\/code> com o ID da opera\u00e7\u00e3o, e a resposta \u00e9 armazenada no estado <code>operationData<\/code>. Agora voc\u00ea pode usar os dados na marca\u00e7\u00e3o:<\/p>\n<pre><code class=\"language-jsx\">&lt;div className=\"services\"&gt;\n    &lt;div className=\"details\"&gt;\n        &lt;p&gt;{operationData.message}..&lt;\/p&gt;\n        &lt;button&gt; className='sm-btn' onClick={() =&gt; checkOperation()}&gt;Check Site Status&lt;\/button&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>Por fim, os dados de <code>displayName<\/code> passados por meio da rota ser\u00e3o usados para construir a URL do novo site e a URL de administra\u00e7\u00e3o do WordPress. Ambos os links ser\u00e3o abertos em uma nova aba.<\/p>\n<pre><code class=\"language-jsx\">&lt;div className=\"details\"&gt;\n    &lt;a href={`http:\/\/${displayName}.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:\/\/${displayName}.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;\n&lt;\/div&gt;<\/code><\/pre>\n<p>Com essas altera\u00e7\u00f5es, o <strong>Operations.jsx<\/strong> vai recuperar o ID da opera\u00e7\u00e3o da rota, fazer uma solicita\u00e7\u00e3o de API quando o bot\u00e3o for clicado, exibir o status da opera\u00e7\u00e3o e fornecer links para o administrador do WordPress e a URL do site com base nos dados do <code>displayName<\/code>.<\/p>\n<h2>Implante seu aplicativo na Kinsta<\/h2>\n<p>Para implante seu aplicativo na plataforma de <a href=\"https:\/\/sevalla.com\/application-hosting\/\">hospedagem de aplicativos<\/a> da Kinsta, voc\u00ea precisa enviar o projeto para o <a href=\"https:\/\/kinsta.com\/pt\/docs\/adicionando-um-aplicativo\/\">provedor Git<\/a> de sua prefer\u00eancia. Quando o projeto estiver hospedado no <a href=\"https:\/\/kinsta.com\/pt\/blog\/que-github\/\">GitHub<\/a>, <a href=\"https:\/\/kinsta.com\/pt\/blog\/gitlab-vs-github\/\">GitLab<\/a> ou <a href=\"https:\/\/kinsta.com\/pt\/blog\/bitbucket-vs-github\/\">Bitbucket<\/a>, voc\u00ea poder\u00e1 prosseguir com a implanta\u00e7\u00e3o na Kinsta.<\/p>\n<p>Para implantar seu reposit\u00f3rio na Kinsta, siga estes passos:<\/p>\n<ol start=\"1\">\n<li>Fa\u00e7a login ou crie sua conta Kinsta no painel MyKinsta.<\/li>\n<li>Na barra lateral esquerda, clique em <strong>Aplicativos<\/strong> e, em seguida, clique em <strong>Adicionar servi\u00e7o<\/strong>.<\/li>\n<li>Selecione <strong>Aplicativo<\/strong> no menu suspenso para implantar um aplicativo React na Kinsta.<\/li>\n<li>No modal que aparece, escolha o reposit\u00f3rio que deseja implantar. Se tiver v\u00e1rios branches, voc\u00ea poder\u00e1 selecionar o branch desejado e dar um nome ao seu aplicativo.<\/li>\n<li>Selecione um dos locais de centros de dados dispon\u00edveis na lista de 24 op\u00e7\u00f5es.<\/li>\n<li>A Kinsta detecta automaticamente o comando start para o seu aplicativo.<\/li>\n<\/ol>\n<p>Por fim, n\u00e3o \u00e9 seguro enviar chaves de API para hosts p\u00fablicos, como seu provedor Git. Ao hospedar, voc\u00ea pode adicion\u00e1-las como <a href=\"https:\/\/kinsta.com\/pt\/docs\/variaveis-de-ambiente\/\">vari\u00e1veis de ambiente<\/a>, usando o mesmo nome de vari\u00e1vel e valor especificados no arquivo <strong>.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\/08\/environment-variables-mykinsta.jpg\" alt=\"Defina as vari\u00e1veis de ambiente no MyKinsta quando voc\u00ea estiver implementando.\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Defina as vari\u00e1veis de ambiente no MyKinsta quando voc\u00ea estiver implementando.<\/figcaption><\/figure>\n<p>Ap\u00f3s iniciar 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:\/\/clone-wp-site-12teh.kinsta.app\/.<\/strong><\/p>\n<p><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 host do Git.<\/p>\n<\/aside>\n<\/p>\n<h2>Resumo<\/h2>\n<p>A API da Kinsta oferece a flexibilidade de criar interfaces de usu\u00e1rio personalizadas para gerenciar sites WordPress, incluindo a capacidade de clonar sites existentes e gerenciar v\u00e1rios aspectos do seu ambiente WordPress.<\/p>\n<p>Neste artigo, voc\u00ea aprendeu a desenvolver um aplicativo que permite a clonagem de sites fora do MyKinsta.<\/p>\n<p><em>Como voc\u00ea est\u00e1 usando a API da Kinsta? Quais recursos e endpoints voc\u00ea gostaria de ver adicionados \u00e0 API? Compartilhe na se\u00e7\u00e3o de coment\u00e1rios!<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>N\u00e3o \u00e9 necess\u00e1rio que voc\u00ea j\u00e1 gerencie muitos dentre os 800 milh\u00f5es de sites WordPress na web para come\u00e7ar a descobrir formas de lan\u00e7ar novos sites &#8230;<\/p>\n","protected":false},"author":287,"featured_media":61872,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[951,1002,983],"class_list":["post-61871","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-api","topic-react","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 Clonar um Site WordPress Usando a API da Kinsta e o React<\/title>\n<meta name=\"description\" content=\"Clone um site WordPress sem esfor\u00e7o usando a poderosa API da Kinsta e o React para criar uma interface de usu\u00e1rio 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\/clonar-site-api-kinsta\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Como Clonar um Site WordPress Usando a API da Kinsta e o React\" \/>\n<meta property=\"og:description\" content=\"Clone um site WordPress sem esfor\u00e7o usando a poderosa API da Kinsta e o React para criar uma interface de usu\u00e1rio personalizada.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/pt\/blog\/clonar-site-api-kinsta\/\" \/>\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-11-15T16:14:19+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-11-17T10:31:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/08\/clone-site-kinsta-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=\"Clone um site WordPress sem esfor\u00e7o usando a poderosa API da Kinsta e o React para criar uma interface de usu\u00e1rio personalizada.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/08\/clone-site-kinsta-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=\"13 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/clonar-site-api-kinsta\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/clonar-site-api-kinsta\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"Como Clonar um Site WordPress Usando a API da Kinsta e o React\",\"datePublished\":\"2023-11-15T16:14:19+00:00\",\"dateModified\":\"2023-11-17T10:31:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/clonar-site-api-kinsta\/\"},\"wordCount\":2453,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/clonar-site-api-kinsta\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/08\/clone-site-kinsta-api.jpg\",\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/clonar-site-api-kinsta\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/clonar-site-api-kinsta\/\",\"url\":\"https:\/\/kinsta.com\/pt\/blog\/clonar-site-api-kinsta\/\",\"name\":\"Como Clonar um Site WordPress Usando a API da Kinsta e o React\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/clonar-site-api-kinsta\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/clonar-site-api-kinsta\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/08\/clone-site-kinsta-api.jpg\",\"datePublished\":\"2023-11-15T16:14:19+00:00\",\"dateModified\":\"2023-11-17T10:31:25+00:00\",\"description\":\"Clone um site WordPress sem esfor\u00e7o usando a poderosa API da Kinsta e o React para criar uma interface de usu\u00e1rio personalizada.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/clonar-site-api-kinsta\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/clonar-site-api-kinsta\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/clonar-site-api-kinsta\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/08\/clone-site-kinsta-api.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/08\/clone-site-kinsta-api.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/clonar-site-api-kinsta\/#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 Clonar um Site WordPress Usando a API da Kinsta e o React\"}]},{\"@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 Clonar um Site WordPress Usando a API da Kinsta e o React","description":"Clone um site WordPress sem esfor\u00e7o usando a poderosa API da Kinsta e o React para criar uma interface de usu\u00e1rio 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\/clonar-site-api-kinsta\/","og_locale":"pt_PT","og_type":"article","og_title":"Como Clonar um Site WordPress Usando a API da Kinsta e o React","og_description":"Clone um site WordPress sem esfor\u00e7o usando a poderosa API da Kinsta e o React para criar uma interface de usu\u00e1rio personalizada.","og_url":"https:\/\/kinsta.com\/pt\/blog\/clonar-site-api-kinsta\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstapt\/","article_published_time":"2023-11-15T16:14:19+00:00","article_modified_time":"2023-11-17T10:31:25+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/08\/clone-site-kinsta-api.jpg","type":"image\/jpeg"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Clone um site WordPress sem esfor\u00e7o usando a poderosa API da Kinsta e o React para criar uma interface de usu\u00e1rio personalizada.","twitter_image":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/08\/clone-site-kinsta-api.jpg","twitter_creator":"@olawanle_joel","twitter_site":"@kinsta_pt","twitter_misc":{"Escrito por":"Joel Olawanle","Tempo estimado de leitura":"13 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/pt\/blog\/clonar-site-api-kinsta\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/blog\/clonar-site-api-kinsta\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"Como Clonar um Site WordPress Usando a API da Kinsta e o React","datePublished":"2023-11-15T16:14:19+00:00","dateModified":"2023-11-17T10:31:25+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/clonar-site-api-kinsta\/"},"wordCount":2453,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/clonar-site-api-kinsta\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/08\/clone-site-kinsta-api.jpg","inLanguage":"pt-PT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/pt\/blog\/clonar-site-api-kinsta\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/pt\/blog\/clonar-site-api-kinsta\/","url":"https:\/\/kinsta.com\/pt\/blog\/clonar-site-api-kinsta\/","name":"Como Clonar um Site WordPress Usando a API da Kinsta e o React","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/clonar-site-api-kinsta\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/clonar-site-api-kinsta\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/08\/clone-site-kinsta-api.jpg","datePublished":"2023-11-15T16:14:19+00:00","dateModified":"2023-11-17T10:31:25+00:00","description":"Clone um site WordPress sem esfor\u00e7o usando a poderosa API da Kinsta e o React para criar uma interface de usu\u00e1rio personalizada.","breadcrumb":{"@id":"https:\/\/kinsta.com\/pt\/blog\/clonar-site-api-kinsta\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/pt\/blog\/clonar-site-api-kinsta\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/blog\/clonar-site-api-kinsta\/#primaryimage","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/08\/clone-site-kinsta-api.jpg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/08\/clone-site-kinsta-api.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/pt\/blog\/clonar-site-api-kinsta\/#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 Clonar um Site WordPress Usando a API da Kinsta e o React"}]},{"@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\/61871","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=61871"}],"version-history":[{"count":15,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/61871\/revisions"}],"predecessor-version":[{"id":64969,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/61871\/revisions\/64969"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/61871\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/61871\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/61871\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/61871\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/61871\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/61871\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/61871\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/61871\/translations\/es"},{"href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/61871\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media\/61872"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media?parent=61871"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/tags?post=61871"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/topic?post=61871"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}