Kinsta es una plataforma en la nube diseñada para ayudar a las empresas y a los equipos de desarrollo a enviar y gestionar sus proyectos web de forma más rápida y eficiente.
Kinsta proporciona a los desarrolladores y usuarios una API para gestionar sus sitios, aplicaciones y bases de datos de WordPress mediante programación.
La API de Kinsta puede utilizarse para automatizar tareas, recuperar datos e integrar Kinsta con otras aplicaciones sin acceder a MyKinsta. Para acceder a la API, necesitas una clave API. Este artículo explica el proceso de creación y uso de una clave API de Kinsta.
Cómo Crear una Clave API
Para utilizar la API de Kinsta, debes tener una cuenta con al menos un sitio, aplicación o base de datos de WordPress en MyKinsta. También necesitarás generar una clave API para autenticarte y acceder a tu cuenta a través de la API. Para generar una clave API:
- Ve a tu panel de MyKinsta.
- Ve a la página Claves API (Tu nombre > Configuración de la empresa > Claves API).
- Haz clic en Crear Clave API.
- Elige una fecha de caducidad o establece una fecha de inicio personalizada y un número de horas para que caduque la clave.
- Dale a la clave un nombre único.
- Haz clic en Generar.
Cuando crees una clave API, cópiala y guárdala en un lugar seguro, ya que es la única vez que podrás verla. Puedes generar varias claves API — aparecerán en la página Claves API. Si necesitas revocar una clave API, haz clic en Revocar junto a la que quieras revocar.
Cómo Utilizar la API de Kinsta con Tu Clave API
Una vez que tengas la clave API, podrás interactuar con todos los servicios de Kinsta (sitios WordPress, aplicaciones y bases de datos) a través de la API de Kinsta, como obtener una lista de bases de datos por ID de empresa, sitios de empresa, crear un sitio WordPress, etc.
Por ejemplo, para obtener una lista de sitios de empresa en tu MyKinsta, el endpoint es /sites. La clave API servirá como cabecera de autorización; también añadirás el ID de la empresa (parámetro obligatorio). A continuación te explicamos cómo realizar esta solicitud API utilizando cURL:
curl -i -X GET
'https://api.kinsta.com/v2/sites?company='
-H 'Authorization: Bearer <YOUR_API_KEY_HERE>'Sustituye YOUR_API_KEY_HERE por la clave API real que generaste y
COMPANY_ID_HERE por el ID único de tu empresa. Esto devolverá una respuesta JSON de todos los sitios de empresa en tu panel de DevKinsta:
{
"company": {
"sites": [
{
"id": "YOUR_SITE_ID",
"name": "my-test-site",
"display_name": "Test site",
"status": "live",
"site_labels": []
}
]
}
}Otro ejemplo, supongamos que quieres obtener un sitio específico por ID (solicitud GET). Puedes utilizar el endpoint /sites/{site_id}. {site_id} será sustituido por el ID único del sitio específico que deseas obtener. A continuación te mostramos cómo realizar esta solicitud API utilizando 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();Hay más cosas que puedes hacer con la API de Kinsta. Para obtener todos los detalles sobre los endpoints de la API disponibles y los parámetros necesarios, descargar nuestra especificación OpenAPI y probar los endpoints, consulta nuestra Referencia de la API.
Permisos
Los permisos de acceso a la API de Kinsta dependen del papel del usuario dentro de la empresa, ya que los propietarios de la empresa, los administradores y los desarrolladores pueden crear claves API.
Por ejemplo, una clave API generada por un desarrollador no tendrá el mismo nivel de acceso que una clave generada por el propietario o administrador de una empresa. Los permisos específicos asociados a cada rol de usuario garantizan un control de acceso y una seguridad adecuados para la API de Kinsta.
Cómo Utilizar la API de Kinsta para Crear un Comprobador de Estado
Cuando creas una aplicación, sitio o base de datos en MyKinsta, ésta pasa por diferentes etapas. Una forma de identificar estas etapas es a través de su estado. Por ejemplo, una aplicación desplegada en Kinsta tendrá un estado que indica si se está desplegando, si se ha desplegado correctamente o si ha fallado.
La API de Kinsta proporciona endpoints que te permiten recuperar información sobre el estado de tus proyectos en MyKinsta. Para este proyecto, interactuarás con tres endpoints, a saber /applications, /sitesy /databases para obtener un array de todas las aplicaciones, sitios y bases de datos utilizando la JavaScript Fetch API.
Una vez recuperada la lista, puedes utilizar el método find() en JavaScript para buscar un nombre de proyecto concreto introducido en la interfaz de usuario (UI). Esto devuelve el nombre y el estado del proyecto si existe.
Requisitos Previos
Para seguir este proyecto, es aconsejable tener conocimientos básicos de HTML, CSS y JavaScript y cierta familiaridad con React. El objetivo principal de este proyecto es demostrar la utilización de la API Kinsta, por lo que el artículo no ahondará en los detalles de la creación de la interfaz de usuario o el estilo.
Puedes crear un repositorio Git utilizando esta plantilla en GitHub. Selecciona Utilizar esta plantilla > Crear un nuevo repositorio para copiar el código de inicio en un nuevo repositorio dentro de tu propia cuenta de GitHub, y asegúrate de marcar la casilla para incluir todas las ramas. Cuando hagas pull a tu ordenador local, asegúrate de que cambias a la opción status-checker-ui para utilizar los archivos de inicio utilizando el siguiente comando:
git checkout status-checker-uiInstala las dependencias necesarias ejecutando el comando npm install. Una vez completada la instalación, puedes iniciar el proyecto en tu ordenador local utilizando el comando npm run start. Esto abrirá el proyecto en http://localhost:3000/.
Este proyecto tiene dos páginas principales: la página de Inicio y la de Servicios. La Página de Inicio muestra una lista de los servicios prestados por Kinsta (alojamiento de WordPress, aplicaciones y bases de datos). Cuando haces clic en cualquiera de los servicios, se te lleva a la página de Servicio, que está diseñada para proporcionar información específica relacionada con el servicio seleccionado.
Por ejemplo, si haces clic en la sección «Aplicaciones», se te redirigirá a la página de Servicio dedicada a las aplicaciones. Puedes buscar cualquier aplicación dentro de tu cuenta MyKinsta en esta página, de modo que recupere el estado de la aplicación utilizando su nombre único o su nombre para mostrar.
Interactuar con la API de Kinsta
Para implementar la función de buscar en este proyecto, crearás tres funciones para gestionar las solicitudes de obtención de cada servicio (aplicaciones, sitios y bases de datos). A continuación, implementarás una función de búsqueda que escanee todo el conjunto de datos para comprobar si existe un valor de búsqueda determinado.
Necesitas el ID de tu empresa y la clave API para interactuar con la API de Kinsta, de modo que puedas obtener una lista de bases de datos, aplicaciones y sitios disponibles en tu cuenta MyKinsta. Una vez que los tengas, guárdalos como variables de entorno en tu aplicación React creando un archivo .env en la carpeta root de tu proyecto.
REACT_APP_KINSTA_COMPANY_ID = 'YOUR_COMPANY_ID'
REACT_APP_KINSTA_API_KEY = 'YOUR_API_KEY'Ahora puedes acceder a estos valores en cualquier parte de tu proyecto utilizando process.env.THE_VARIABLE. Por ejemplo, para acceder a REACT_APP_KINSTA_COMPANY_ID, utiliza process.env.REACT_APP_KINSTA_COMPANY_ID.
Antes de utilizar la API, crea tres estados en la página Service.jsx para almacenar el estado y el nombre de la salida generada al buscar un sitio, una aplicación o una base de datos. El tercer estado es para almacenar información sobre errores.
let [status, setStatus] = useState('');
let [name, setName] = useState('');
let [error, setError] = useState('');Además, crea una variable para almacenar la URL de la API Kinsta:
const KinstaAPIUrl = 'https://api.kinsta.com/v2';Una vez hecho esto, adjunta un evento onClick con una función CheckQuery() al botón de envío del formulario en la página Service.jsx, para que active una función basada en el slug. Es decir, si el slug indica bases de datos, se activará la función CheckDatabases():
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);
}
}Obtener una Lista de Sitios con la API de Kinsta
Para obtener una lista de sitios disponibles en tu cuenta de empresa MyKinsta con la API Kinsta, crearás una función, pasarás una consulta con el ID de la empresa como parámetro y, a continuación, autorizarás la solicitud con tu clave API. Esta solicitud utilizará el endpoint /sites de la API 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}`
}
}
);
}Este código de arriba recuperará todos los sitios disponibles en tu cuenta MyKinsta, ahora puedes utilizar el método find() para buscar si la consulta coincide con algún nombre o nombre para mostrar:
const data = await resp.json();
let sitesData = data.company.sites;
let site = sitesData.find(site => site.name === name || site.display_name === name);Con esto, puedes crear algunas condiciones para comprobar si devuelve algún valor, a continuación, establece los estados de lo contrario la actualización del estado de error para informar al usuario de que tal sitio no 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('');
}Cuando pongas todo esto junto, este es el aspecto que tendrá tu código para comprobar el estado de un sitio concreto:
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('');
}
}Nota: Los tres estados se inicializan como cadenas vacías cada vez que se activa la función CheckSites(). Esto es necesario para garantizar que se borran todos los datos de búsqueda anteriores.
Obtener la Lista de Aplicaciones con la API de Kinsta
Al igual que hiciste para los sitios, utilizarás el endpoint /applications, pasarás una consulta que contenga el ID de la empresa y también utilizarás el método find() para buscar en el array devuelto:
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('');
}
}Obtener una Lista de Bases de Datos con la API Kinsta
Para obtener una lista de bases de datos, utilizarás el endpoint /databases de la 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('');
}
}Una vez hecho esto. Has utilizado con éxito la API Kinsta en tu proyecto React. Para asegurarte de que tu aplicación funciona bien, añade a tu código de marcado los datos devueltos por estas funciones, que se han ajustado a los estados que hemos creado antes:
{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>
)}Además, añade una condición que se active cuando se produzca un error. Por ejemplo, cuando un usuario busca un proyecto que no existe en MyKinsta, se desencadena el error.
{error !== '' && (
<div className="services">
<div className="details">
<p>{error}</p>
</div>
</div>
)}Llegados a este punto, tu proyecto funcionará correctamente, y podrás comprobar el estado de las aplicaciones, sitios o bases de datos disponibles en tu panel de MyKinsta. Puedes cotejar tu código con este repositorio de GitHub.
Cómo Desplegar tu Comprobador de Estado en Kinsta
Para desplegar tu proyecto React en Kinsta, necesitas enviar el proyecto a tu proveedor Git preferido. Cuando tu proyecto esté alojado en GitHub, GitLab o Bitbucket, puedes proceder a desplegarlo en Kinsta.
Para desplegar tu repositorio en Kinsta, sigue estos pasos:
- Inicia sesión o crea tu cuenta Kinsta en el panel MyKinsta.
- En la barra lateral izquierda, haz clic en «Aplicaciones» y luego en «Añadir servicio».
- Selecciona «Aplicación» en el menú desplegable para desplegar una aplicación React en Kinsta.
- En el modal que aparece, elige el repositorio que quieres desplegar. Si tienes varias ramas, puedes seleccionar la rama deseada y dar un nombre a tu aplicación.
- Selecciona una de las ubicaciones de centros de datos disponibles de la lista de 25 opciones. Kinsta detectará automáticamente el comando de inicio para tu aplicación.
Por último, no es seguro enviar claves API a alojamientos públicos como tu proveedor de Git. Cuando alojes, puedes añadirlas como variables de entorno utilizando el mismo nombre de variable y valor especificados en el archivo .env.
Una vez que inicies el despliegue de tu aplicación, comenzará el proceso y normalmente se completará en unos minutos. Recibirás un enlace para acceder a la versión desplegada de tu aplicación cuando el despliegue se haya realizado con éxito. Por ejemplo, en este caso, el enlace es https://status-checker-1t256.kinsta.app/.
Resumen
La clave API de Kinsta te permite automatizar fácilmente tareas, recuperar datos e integrar Kinsta con otras aplicaciones. Recuerda mantener segura tu clave de acceso.
Ahora puedes aprovechar la potencia de la API de Kinsta para realizar algunos informes, programar tareas, crear sitios de WordPress y automatizar diversas actividades.
¿Qué endpoint te gustaría que se añadiera a la API de Kinsta? Háznoslo saber en los comentarios.
Deja una respuesta