Kinsta é uma plataforma de nuvem projetada para ajudar empresas e equipes de desenvolvimento a lançar e gerenciar seus projetos da web de forma mais rápida e eficiente.
A Kinsta fornece aos desenvolvedores e usuários uma API para gerenciar seus sites, aplicativos e bancos de dados WordPress de forma programática.
A API da Kinsta pode ser usada para automatizar tarefas, recuperar dados e integrar a Kinsta a outros aplicativos sem acessar o MyKinsta. Para acessar a API, você precisa de uma chave API. Este artigo explica o processo de criação e uso de uma chave API da Kinsta.
Como criar uma chave API
Para usar a API da Kinsta, você deve ter uma conta com pelo menos um site, aplicativo ou banco de dados WordPress no MyKinsta. Você também precisará gerar uma chave API para autenticar e acessar sua conta através da API. Para gerar uma chave API:
- Vá para o painel MyKinsta.
- Navegue até a página Chave API (Seu nome > Configurações da empresa > Chaves API).
- Clique em Criar chave API.
- Escolha uma expiração ou defina uma data de início personalizada e o número de horas para a chave expirar.
- Dê à chave um nome exclusivo.
- Clique em Gerar.
Após criar uma chave de API, faça uma cópia e armazene-a em um local seguro, pois essa será a única vez em que você poderá visualizá-la. Você pode gerar várias chaves API, e elas serão listadas na página de Chaves API. Se precisar revogar uma chave de API, clique em “Revogar” ao lado da chave que deseja revogar.
Como usar a API da Kinsta com sua chave API
Após ter a chave API, você pode interagir com todos os serviços da Kinsta (sites WordPress, aplicativos e bancos de dados) por meio da API da Kinsta, como obter uma lista de bancos de dados por ID da empresa, sites da empresa, criar um site WordPress e muito mais.
Por exemplo, para obter uma lista de sites de empresas em seu MyKinsta, o endpoint é /sites. A chave da API servirá como cabeçalho de autorização; você também adicionará o ID da empresa (parâmetro obrigatório). Veja como você pode fazer essa solicitação de API usando cURL:
curl -i -X GET
'https://api.kinsta.com/v2/sites?company='
-H 'Authorization: Bearer <YOUR_API_KEY_HERE>'Substitua YOUR_API_KEY_HERE pela chave API real que você gerou e COMPANY_ID_HERE com o ID exclusivo da sua empresa. Isso retornará uma resposta JSON de todos os sites da empresa em seu painel DevKinsta:
{
"company": {
"sites": [
{
"id": "YOUR_SITE_ID",
"name": "my-test-site",
"display_name": "Test site",
"status": "live",
"site_labels": []
}
]
}
}Outro exemplo, suponha que você queira buscar um site específico por ID (solicitação GET). Você pode usar o endpoint /sites/{site_id}. {site_id} será substituído pelo ID exclusivo do site específico que você deseja buscar. Veja como você pode fazer essa solicitação de API usando o NodeJS:
import fetch from 'node-fetch';
async function fetchSite() {
const siteId = 'YOUR_SITE_ID';
const response = await fetch(
`https://api.kinsta.com/v2/sites/${siteId}`,
{
method: 'GET',
headers: {
Authorization: 'Bearer
}
}
);
const data = await response.json();
console.log(data);
}
fetchSite();Há muito mais que você pode fazer com a API da Kinsta. Para obter detalhes completos sobre os endpoints disponíveis e os parâmetros necessários, fazer o download da nossa especificação OpenAPI e testar os endpoints, consulte à nossa Referência de API.
Permissões
As permissões de acesso à API da Kinsta dependem da função do usuário dentro da empresa, pois os proprietários, administradores e desenvolvedores da empresa podem criar chaves de API.
Por exemplo, uma chave API gerada por um desenvolvedor não terá o mesmo nível de acesso que uma chave gerada por um proprietário ou administrador da empresa. As permissões específicas associadas a cada função de usuário garantem o controle de acesso e a segurança adequados para a API da Kinsta.
Como usar a API da Kinsta para criar um verificador de status
Quando você cria um aplicativo, site ou banco de dados no MyKinsta, ele passa por diferentes estágios. Uma maneira de identificar esses estágios é por meio de seu status. Por exemplo, um aplicativo implantado na Kinsta terá um status para quando estiver sendo implantado, implantado com sucesso ou com falha.
A API da Kinsta fornece endpoints que permitem que você recuperar informações de status sobre seus projetos no MyKinsta. Neste projeto, você interagirá com três endpoints, ou seja, /applications, /sites, e /databases, para buscar uma array de todos os aplicativos, sites e bancos de dados usando a API Fetch do JavaScript.
Após recuperar a lista, você pode usar o método find() em JavaScript para pesquisar um nome de projeto específico inserido na interface do usuário (UI). Isso retorna o nome e o status do projeto, se ele existir.
Pré-requisito
Para acompanhar este projeto, é aconselhável ter um entendimento básico de HTML, CSS e JavaScript, além de alguma familiaridade com React. O foco principal deste projeto é demonstrar a utilização da API da Kinsta, portanto, o artigo não abordará em detalhes a criação de interface do usuário ou estilização.
Você pode criar um repositório Git usando esse modelo no GitHub. Selecione Usar este modelo > Criar um novo repositório para copiar o código inicial em um novo repositório em sua própria conta do GitHub e certifique-se de que você marque a caixa para incluir todas as branches. Quando você mover para o computador local, certifique-se de mudar para o status-checker-ui para usar os arquivos iniciais usando o comando abaixo:
git checkout status-checker-uiInstale as dependências necessárias executando o comando npm install. Quando a instalação estiver concluída, você poderá iniciar o projeto no computador local usando o comando npm run start. Isso abrirá o projeto em http://localhost:3000/.
Este projeto possui duas páginas principais: a página inicial (Home) e a página de serviço (Service). A página inicial exibe uma lista de serviços fornecidos pela Kinsta (hospedagem de WordPress, aplicativos e bancos de dados). Ao clicar em qualquer um dos serviços, você é direcionado para a página de serviço, que é projetada para fornecer informações específicas relacionadas ao serviço selecionado.
Por exemplo, ao clicar na seção “Aplicativos”, você será redirecionado para a página do serviço dedicada aos aplicativos. Você pode pesquisar qualquer aplicativo dentro da sua conta MyKinsta nessa página, para que ele recupere o status do aplicativo usando seu nome exclusivo ou nome de exibição.
Interagindo com a API da Kinsta
Para implementar o recurso de pesquisa para este projeto, você criaria três funções para lidar com solicitações de busca para cada serviço (aplicativos, sites e bancos de dados). Em seguida, você implementará uma funcionalidade de pesquisa que varre toda a array de dados para verificar se um determinado valor de pesquisa existe.
Você precisa do ID da sua empresa e da chave API para interagir com a API da Kinsta, de modo que possa obter uma lista de bancos de dados, aplicativos e sites disponíveis na sua conta MyKinsta. Assim que você os tiver, armazene como variáveis de ambiente em seu aplicativo React, criando um arquivo .env na pasta raiz do seu projeto.
REACT_APP_KINSTA_COMPANY_ID = 'YOUR_COMPANY_ID'
REACT_APP_KINSTA_API_KEY = 'YOUR_API_KEY'Agora você pode acessar esses valores em qualquer lugar do seu projeto usando process.env.THE_VARIABLE. Por exemplo, para acessar REACT_APP_KINSTA_COMPANY_ID, você usa process.env.REACT_APP_KINSTA_COMPANY_ID.
Antes de usar a API, crie três estados na página Service.jsx para armazenar o status e o nome da saída gerada quando você pesquisar um site, aplicativo ou banco de dados. O terceiro estado é para armazenar informações de erro.
let [status, setStatus] = useState('');
let [name, setName] = useState('');
let [error, setError] = useState('');Além disso, crie uma variável para armazenar a URL da API da Kinsta:
const KinstaAPIUrl = 'https://api.kinsta.com/v2';Quando terminar, anexe um evento onClick com uma função CheckQuery() ao botão de envio do formulário na página Service.jsx, para que ele acione uma função com base na slug. Ou seja, se a slug indicar bancos de dados, a função CheckDatabases() será acionada:
const CheckQuery = async (name) => {
if (slug === 'wp-site') {
await CheckSites(name);
} else if (slug === 'application') {
await CheckApplications(name);
} else if (slug === 'database') {
await CheckDatabases(name);
}
}Obter lista de sites com a API Kinsta
Para obter uma lista de sites disponíveis na conta da sua empresa MyKinsta com a API da Kinsta, você criará uma função, passará uma consulta com o ID da empresa como parâmetro e, em seguida, autorizará a solicitação com sua chave API. Essa solicitação usará o endpoint /sites da API da Kinsta:
const CheckSites = async (name) => {
const query = new URLSearchParams({
company: `${process.env.REACT_APP_KINSTA_COMPANY_ID}`,
}).toString();
const resp = await fetch(
`${KinstaAPIUrl}/sites?${query}`,
{
method: 'GET',
headers: {
Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`
}
}
);
}Esse código acima buscará todos os sites disponíveis em sua conta MyKinsta. Agora você pode usar o método find() para pesquisar se a consulta de pesquisa corresponde a algum nome ou nome de exibição:
const data = await resp.json();
let sitesData = data.company.sites;
let site = sitesData.find(site => site.name === name || site.display_name === name);Com isso, você pode criar algumas condições para verificar se ele retorna algum valor e, em seguida, definir os estados, caso contrário, atualizar o estado de erro com uma mensagem para informar ao usuário que esse site não existe:
if (site) {
setName(site.display_name);
if (site.status === 'live') {
setStatus('🟢 Running');
} else if (site.status === 'staging') {
setStatus('🟡 Staging');
} else {
setStatus('🟡 Unknown');
}
setUniqueName('');
} else {
setError('No such site found for your account');
setUniqueName('');
}Quando você junta tudo isso, o código para verificar o status de um site específico fica assim:
const CheckSites = async (name) => {
setName('');
setStatus('');
setError('');
const query = new URLSearchParams({
company: `${process.env.REACT_APP_KINSTA_COMPANY_ID}`,
}).toString();
const resp = await fetch(
`${KinstaAPIUrl}/sites?${query}`,
{
method: 'GET',
headers: {
Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`
}
}
);
const data = await resp.json();
let sitesData = data.company.sites;
let site = sitesData.find(site => site.name === name || site.display_name === name);
if (site) {
setName(site.display_name);
if (site.status === 'live') {
setStatus('🟢 Running');
} else if (site.status === 'staging') {
setStatus('🟡 Staging');
} else {
setStatus('🟡 Unknown');
}
setUniqueName('');
} else {
setError('No such site found for your account');
setUniqueName('');
}
}Observação: Todos os três estados são inicializados como strings de caracteres vazias sempre que a função CheckSites() é acionada. Isso é necessário para garantir que todos os dados de pesquisa anteriores sejam apagados.
Obter lista de aplicativos com a API da Kinsta
Assim como fez com os sites, você usará o endpoint /applications, passará uma consulta que contém o ID da empresa e também usará o método find() para pesquisar a array retornada:
const CheckApplications = async (name) => {
setName('');
setStatus('');
setError('');
const query = new URLSearchParams({
company: `${process.env.REACT_APP_KINSTA_COMPANY_ID}`,
}).toString();
const resp = await fetch(
`${KinstaAPIUrl}/applications?${query}`,
{
method: 'GET',
headers: {
Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`
}
}
);
const data = await resp.json();
let appsData = data.company.apps.items;
let app = appsData.find(app => app.unique_name === name || app.name === name || app.display_name === name);
if (app) {
setName(app.display_name);
if (app.status === 'deploymentSuccess') {
setStatus('🟢 Running');
} else if (app.status === 'deploymentFailed') {
setStatus('🔴 Failed');
} else if (app.status === 'deploymentPending') {
setStatus('🟡 Pending');
} else if (app.status === 'deploymentInProgress') {
setStatus('🟡 In Progress');
} else {
setStatus('🟡 Unknown');
}
setUniqueName('');
} else {
setError('No such app found for your account');
setUniqueName('');
}
}Obter uma lista de bancos de dados com a API da Kinsta
Para buscar uma lista de bancos de dados, você usará o endpoint /databases da API Kinsta:
const CheckDatabases = async (name) => {
setName('');
setStatus('');
setError('');
const query = new URLSearchParams({
company: `${process.env.REACT_APP_KINSTA_COMPANY_ID}`,
}).toString();
const resp = await fetch(
`${KinstaAPIUrl}/databases?${query}`,
{
method: 'GET',
headers: {
Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`
}
}
);
const data = await resp.json();
let databasesData = data.company.databases.items;
let database = databasesData.find(database => database.name === name || database.display_name === name);
if (database) {
setName(database.display_name);
if (database.status === 'ready') {
setStatus('🟢 Running');
} else if (database.status === 'creating') {
setStatus('🟡 Creating');
} else {
setStatus('🟡 Unknown');
}
setUniqueName('');
} else {
setError('No such database found for your account');
setUniqueName('');
}
}Quando isso for feito. Você usou com sucesso a API Kinsta em seu projeto React. Para garantir que seu aplicativo funcione bem, adicione os dados retornados por essas funções, que foram definidos para os estados que criamos anteriormente, ao seu código de marcação:
{status !== '' && (
<div className="services">
<div className="details">
<div className="name-details">
<span> className="tag">Name: </span>
<span> className="value">{name}</span>
</div>
<div className="status-details">
<span> className="tag">Status: </span>
<span> className="value"> {status}</span>
</div>
</div>
</div>
)}Além disso, adicione uma condição que será acionada quando houver um erro. Por exemplo, quando um usuário procura um projeto que não existe no MyKinsta, o erro é acionado.
{error !== '' && (
<div className="services">
<div className="details">
<p>{error}</p>
</div>
</div>
)}Nesse ponto, seu projeto funcionará bem e você poderá verificar o status dos aplicativos, sites ou bancos de dados disponíveis no painel MyKinsta. Você pode fazer uma verificação cruzada do seu código com este repositório do GitHub.
Como implantar seu verificador de status na Kinsta
Para implantar seu projeto React na Kinsta, você precisa enviar o projeto para o seu provedor Git preferido. Quando seu projeto estiver hospedado no GitHub, no GitLab ou no Bitbucket, você poderá prosseguir com a implantação na Kinsta.
Para implantar seu repositório na Kinsta, siga estas etapas:
- Faça login ou crie sua conta Kinsta no painel MyKinsta.
- Na barra lateral esquerda, clique em “Aplicativos” e depois em “Adicionar serviço”.
- Selecione “Aplicativo” no menu suspenso para implantar um aplicativo React na Kinsta.
- No modal que aparece, escolha o repositório que você deseja implantar. Se você tiver várias branches, poderá selecionar a branch desejada e dar um nome ao seu aplicativo.
- Selecione um dos 25 locais de centro de dados disponíveis. A Kinsta detectará automaticamente o comando start para o seu aplicativo.
Por fim, não é seguro enviar chaves API para hospedagens de sites públicos, como seu provedor Git. Ao hospedar, você pode adicioná-las como variáveis de ambiente usando o mesmo nome e valor de variável especificados no arquivo .env.
Quando você iniciar a implantação do seu aplicativo, o processo começará e, normalmente, será concluído em alguns minutos. Você receberá um link para acessar a versão implantada do seu aplicativo quando a implantação for bem-sucedida. Por exemplo, neste caso, o link é https://status-checker-1t256.kinsta.app/.
Resumo
A chave API da Kinsta permite que você automatize facilmente tarefas, recupere dados e integre a Kinsta com outros aplicativos. Lembre-se de manter sua chave de acesso segura.
Agora você pode aproveitar o poder da API da Kinsta para fazer alguns relatórios, agendar tarefas, criar sites WordPress e automatizar várias atividades.
Gostaríamos de saber qual endpoint você adoraria ver adicionado à próxima versão da API da Kinsta. Por favor, compartilhe suas sugestões nos comentários.
Deixe um comentário