Como construir una aplicacion de astrologia con AstroAPI
Construir una aplicacion de astrologia solia requerir un conocimiento profundo de calculos astronomicos, datos de efemerides y matematicas complejas. Con AstroAPI, puedes saltarte todo eso y centrarte en lo que realmente importa: crear una gran experiencia de usuario.
En este tutorial, construiremos una pagina web de astrologia completa desde cero: una pagina donde alguien introduce sus datos de nacimiento y al instante ve su carta natal con posiciones planetarias, una rueda de carta visual y su horoscopo diario. No se necesita experiencia previa con APIs.
Lo que necesitaras
- Una cuenta de AstroAPI (registrate gratis)
- Una API key (disponible desde tu panel de control)
- Un editor de texto (VS Code, Sublime Text o incluso el Bloc de notas)
- Un navegador web
Eso es todo: sin frameworks, sin herramientas de compilacion, sin comandos de terminal. Escribiremos todo en un unico archivo HTML.
Paso 1: Obtener tu API Key
Despues de registrarte, ve a tu panel de control. Tu API key es como una contrasena que identifica tu aplicacion ante AstroAPI: la necesitaras para cada solicitud.
Encontrar la pagina de API Keys
En la esquina superior derecha del panel de control, haz clic en tu icono de perfil. Aparecera un menu desplegable. En la seccion Integration, haz clic en API Keys.
Esto te lleva a la vista general de API Keys. Veras una barra de navegacion mostrando tu ruta actual: Profile > Integration > API Keys. Haz clic en el boton Create en la esquina superior derecha para crear una nueva clave.
Crear tu clave
En la pagina de creacion, veras un formulario con varias secciones:
- Name - Dale a tu clave un nombre reconocible (por ejemplo, “Mi App de Astrologia” o “Produccion”).
- Expires In (days) - Opcionalmente establece una fecha de expiracion. Dejalo vacio si la clave debe durar indefinidamente.
- Permissions - Selecciona a que funciones de la API puede acceder la clave. Para este tutorial, necesitaras al menos los permisos de calculo (
calc). Puedes marcar “Use all permissions from my role” para simplificar. - Modules - Elige que modulos puede usar la clave. Para este tutorial, selecciona los modulos natales (
natal:calc,natal:charts,natal:texts). Tambien puedes marcar “Use all modules from my organization” para permitir todo. - Domain Restrictions - Esto es importante. Como tu API key sera visible en el codigo fuente de la pagina (cualquiera puede verla a traves de las herramientas de desarrollo del navegador), deberias restringirla a tu propio dominio. Introduce el dominio de tu sitio web (por ejemplo,
mywebsite.com) para que solo se acepten solicitudes provenientes de ese dominio. De esta manera, incluso si alguien copia tu clave, no podra usarla en su propio sitio. Para desarrollo local, puedes usar*temporalmente.
Haz clic en Save y tu nueva API key aparecera. Copiala y guardala en un lugar seguro: no podras ver la clave completa de nuevo.
Paso 2: Crear tu pagina HTML
Abre tu editor de texto y crea un nuevo archivo llamado astrology.html. Comenzaremos con una pagina basica que tiene un formulario para los datos de nacimiento:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Astrology App</title>
<style>
body {
font-family: Georgia, serif;
max-width: 800px;
margin: 0 auto;
padding: 2rem;
background: #f5f0e8;
color: #1a1a1a;
}
h1 { text-align: center; }
form {
background: white;
padding: 2rem;
border-radius: 8px;
margin-bottom: 2rem;
}
label { display: block; margin-bottom: 0.5rem; font-weight: bold; }
input, select {
width: 100%;
padding: 0.5rem;
margin-bottom: 1rem;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 1rem;
}
button {
background: #ba9a63;
color: white;
border: none;
padding: 0.75rem 2rem;
font-size: 1rem;
border-radius: 4px;
cursor: pointer;
}
button:hover { background: #a8894f; }
.results { background: white; padding: 2rem; border-radius: 8px; }
.planet-row {
display: flex;
justify-content: space-between;
padding: 0.5rem 0;
border-bottom: 1px solid #eee;
}
.planet-name { font-weight: bold; }
.planet-sign { color: #ba9a63; }
#chart-image { text-align: center; margin: 2rem 0; }
#chart-image svg { max-width: 100%; height: auto; }
.horoscope-box {
background: #f9f3e5;
padding: 1.5rem;
border-left: 4px solid #ba9a63;
border-radius: 0 8px 8px 0;
margin-top: 1.5rem;
line-height: 1.8;
}
.loading { text-align: center; color: #6b6b75; font-style: italic; }
.hidden { display: none; }
</style>
</head>
<body>
<h1>✨ My Astrology App</h1>
<form id="birth-form">
<label for="name">Your Name</label>
<input type="text" id="name" placeholder="e.g. Anna" required>
<label for="date">Date of Birth</label>
<input type="date" id="date" required>
<label for="time">Time of Birth</label>
<input type="time" id="time" required>
<label for="city">City of Birth</label>
<input type="text" id="city" placeholder="e.g. Amsterdam" required>
<button type="submit">Calculate My Chart</button>
</form>
<div id="results" class="results hidden">
<!-- Results will appear here -->
</div>
<script>
// We'll add our code here in the next steps
</script>
</body>
</html>Guarda el archivo y abrelo en tu navegador. Deberias ver un formulario limpio pidiendo datos de nacimiento. Todavia no hace nada: vamos a arreglar eso.
Paso 3: Buscar la ubicacion de nacimiento
Cuando alguien escribe “Amsterdam” necesitamos convertir eso en coordenadas de latitud y longitud. AstroAPI tiene un endpoint de geocodificacion para esto:
const API_KEY = "your-api-key-here";
const BASE_URL = "https://api.astroapi.cloud/api";Proteger tu API key: Como esta es una pagina web del lado del cliente, tu API key es visible para cualquiera que vea el codigo fuente de la pagina. Esto esta bien siempre y cuando hayas configurado las Domain Restrictions en el panel de control (ver Paso 1). La API rechazara solicitudes de cualquier dominio que no este en tu lista de permitidos, por lo que la clave es inutil para cualquiera que la copie.
Ahora escribamos las funciones. Primero, la busqueda de ubicacion:
async function findLocation(cityName) {
const response = await fetch(
`${BASE_URL}/geocoding/search?q=${encodeURIComponent(cityName)}`,
{ headers: { "X-Api-Key": API_KEY } }
);
const data = await response.json();
// The API returns a list of matching places.
// We'll use the first result.
const place = data.data[0];
return {
latitude: place.latitude,
longitude: place.longitude,
timezone: place.timezone,
name: place.name
};
}Esto convierte “Amsterdam” en { latitude: 52.37, longitude: 4.89, timezone: "Europe/Amsterdam", name: "Amsterdam" }, exactamente lo que necesitamos para los calculos de la carta. La zona horaria es importante porque AstroAPI la necesita para convertir correctamente tu hora de nacimiento local a tiempo universal.
Paso 4: Calcular la carta natal
Ahora enviemos los datos de nacimiento a AstroAPI y obtengamos todas las posiciones planetarias:
async function calculateChart(birthDate, birthTime, latitude, longitude, timezone) {
const response = await fetch(`${BASE_URL}/calc/natal`, {
method: "POST",
headers: {
"Content-Type": "application/json",
"X-Api-Key": API_KEY
},
body: JSON.stringify({
dateTime: `${birthDate}T${birthTime}:00`,
location: { latitude, longitude, timezone },
houseSystem: "placidus",
includeReadableEntities: true
})
});
return await response.json();
}El dateTime se envia como una cadena ISO (por ejemplo, "1990-06-15T14:30:00") y la location incluye la zona horaria para que la API pueda interpretar correctamente la hora de nacimiento local. La respuesta contiene todo sobre la carta: donde estaba posicionado cada planeta, en que signo zodiacal se encontraba, que casa ocupaba y todas las relaciones geometricas (aspectos) entre planetas.
Paso 5: Mostrar los resultados
Aqui es donde se pone emocionante. Vamos a convertir los datos crudos de la API en algo visualmente atractivo. Mostraremos una tabla de posiciones planetarias y los signos de Sol, Luna y Ascendente de la persona, los “tres grandes” que mas curiosidad despiertan:
function displayChart(chart, personName) {
const points = chart.data.points;
const houses = chart.data.houses;
// Find the "big three"
const sunSign = points.sun.signTitle;
const moonSign = points.moon.signTitle;
const risingSignId = houses.cusps[0].sign;
const risingSign = risingSignId.charAt(0).toUpperCase() + risingSignId.slice(1);
let html = `
<h2>${personName}'s Birth Chart</h2>
<div style="text-align:center; margin-bottom:2rem;">
<p style="font-size:1.2rem;">
☀️ Sun in <strong>${sunSign}</strong> ·
🌙 Moon in <strong>${moonSign}</strong> ·
⬆️ Rising <strong>${risingSign}</strong>
</p>
</div>
<h3>Planetary Positions</h3>
`;
// Build a row for each planet
const planetKeys = ["sun", "moon", "mercury", "venus", "mars",
"jupiter", "saturn", "uranus", "neptune", "pluto"];
for (const key of planetKeys) {
const planet = points[key];
if (!planet) continue;
html += `
<div class="planet-row">
<span class="planet-name">${key.charAt(0).toUpperCase() + key.slice(1)}</span>
<span class="planet-sign">${planet.signTitle} ${planet.degreesInSign.toFixed(1)}°</span>
<span>House ${planet.houseNumber}</span>
</div>
`;
}
document.getElementById("results").innerHTML = html;
document.getElementById("results").classList.remove("hidden");
}La API devuelve los planetas como un objeto con claves por ID de planeta (por ejemplo, points.sun, points.moon). Cada planeta tiene un sign (como "gemini"), signTitle (nombre para mostrar como "Gemini"), degreesInSign (posicion dentro de ese signo) y houseNumber. El signo Ascendente se obtiene directamente de la propiedad sign en la cuspide de la primera casa.
Paso 6: Agregar una rueda de carta visual
Una carta natal realmente cobra vida con la clasica rueda circular. AstroAPI las genera como imagenes SVG que se ven nitidas en cualquier tamano:
function displayChartImage(chartUrl) {
const chartDiv = document.createElement("div");
chartDiv.id = "chart-image";
chartDiv.innerHTML = `<h3>Your Chart Wheel</h3><img src="${chartUrl}" alt="Natal Chart" style="max-width:100%; height:auto;">`;
document.getElementById("results").appendChild(chartDiv);
}La respuesta de la API de carta natal ya incluye un campo chart.url con la URL de la imagen SVG del grafico, por lo que no se necesita una solicitud separada. Simplemente pasamos esa URL a una etiqueta <img> para mostrar la rueda del grafico con los 12 signos zodiacales, las casas, las posiciones planetarias y las lineas de aspectos.
¿Necesitas una imagen PNG en su lugar, por ejemplo, para compartir en redes sociales? Solo cambia la extension .svg en la URL a .png.
Paso 7: Mostrar el horoscopo diario
Agreguemos un toque personal mostrando el horoscopo de hoy para el signo solar de la persona:
async function displayHoroscope(sunSign, sunSignTitle) {
const today = new Date().toISOString().split("T")[0];
const response = await fetch(
`${BASE_URL}/horoscope/daily/${today}?sign=${sunSign}&language=en`,
{ headers: { "X-Api-Key": API_KEY } }
);
const data = await response.json();
const signName = sunSignTitle;
const horoscopeDiv = document.createElement("div");
horoscopeDiv.innerHTML = `
<h3>Today's Horoscope for ${signName}</h3>
<div class="horoscope-box">${data.data.text}</div>
`;
document.getElementById("results").appendChild(horoscopeDiv);
}El endpoint de horoscopo toma la fecha de hoy en la URL y el signo zodiacal como parametro de consulta. Los horoscopos estan disponibles en multiples idiomas: solo cambia language=en a language=nl para holandes, language=es para espanol, language=fr para frances, y asi sucesivamente.
Paso 8: Conectar todo
Ahora conectemos el formulario con todas nuestras funciones. Agrega el siguiente codigo a tu seccion <script>, despues de todas las funciones de los pasos anteriores:
const API_KEY = "your-api-key-here";
const BASE_URL = "https://api.astroapi.cloud/api";
document.getElementById("birth-form").addEventListener("submit", async (e) => {
e.preventDefault();
const name = document.getElementById("name").value;
const date = document.getElementById("date").value;
const time = document.getElementById("time").value;
const city = document.getElementById("city").value;
// Show a loading message
const results = document.getElementById("results");
results.innerHTML = '<p class="loading">Calculating your chart...</p>';
results.classList.remove("hidden");
try {
// 1. Find the coordinates and timezone for the birth city
const location = await findLocation(city);
// 2. Calculate the natal chart
const chart = await calculateChart(date, time, location.latitude, location.longitude, location.timezone);
// 3. Display the planetary positions
displayChart(chart, name);
// 4. Add the visual chart wheel using the URL from the API response
if (chart.data.chart?.url) {
displayChartImage(chart.data.chart.url);
}
// 5. Show today's horoscope based on the Sun sign
const sunSign = chart.data.points.sun.sign;
await displayHoroscope(sunSign, chart.data.points.sun.signTitle);
} catch (error) {
results.innerHTML = '<p style="color:red;">Something went wrong. Please check your API key and try again.</p>';
}
});Abre el archivo en tu navegador, introduce una fecha de nacimiento y una ciudad, y haz clic en “Calculate My Chart”. En un par de segundos, veras los datos completos de la carta natal, una hermosa rueda de carta y un horoscopo personalizado, todo impulsado por AstroAPI.
Ir mas alla: compatibilidad, fases lunares y mas
Ahora que tienes una aplicacion de astrologia funcionando, aqui tienes algunas funcionalidades que podrias agregar a continuacion:
Compatibilidad amorosa - Usa el endpoint de sinastria para comparar dos cartas natales. Muestra que planetas forman aspectos armoniosos (trigonos, sextiles) y cuales crean tension (cuadraturas, oposiciones). Ideal para una funcion de “compatibilidad de pareja”.
Seguimiento de fases lunares - El endpoint de fases lunares devuelve la fase lunar actual, el porcentaje de iluminacion y las horas de salida y puesta de la luna. Perfecto para un widget en la barra lateral o una actualizacion diaria.
Alertas de transitos - Los transitos muestran donde estan los planetas ahora mismo en comparacion con la carta natal de alguien. Usa esto para construir funciones de “que esta pasando en tu carta hoy”, por ejemplo, “Saturno esta cruzando tu Medio Cielo, un momento para avances profesionales”.
Numerologia - Calcula numeros de camino de vida, numeros de expresion y numeros de personalidad a partir de la fecha de nacimiento y el nombre de una persona. Un buen complemento para los datos astrologicos.
Soporte multilingue - Todos los endpoints basados en texto (horoscopos, interpretaciones) admiten multiples idiomas. Construye para una audiencia global pasando el parametro lang.
Proxy del lado del servidor - Para aplicaciones en produccion, considera mover tus llamadas a la API a un pequeno servidor backend. De esta manera, tu API key permanece en el servidor y nunca se expone a los usuarios. Las Domain Restrictions son una buena primera linea de defensa, pero un proxy te da control total.
Explorar la API completa
Lo que hemos cubierto aqui es solo el comienzo. La documentacion completa de la API cubre cada endpoint en detalle, con ejemplos de solicitudes en cURL, JavaScript y Python.
¿Listo para empezar a construir? Crea tu cuenta gratuita y obtiene tu API key hoy.