Hoe bouw je een astrologie-app met AstroAPI
Het bouwen van een astrologietoepassing vereiste vroeger diepgaande kennis van astronomische berekeningen, efemeride-data en complexe wiskunde. Met AstroAPI kun je dat allemaal overslaan en je richten op wat het belangrijkst is: het creëren van een geweldige gebruikerservaring.
In deze tutorial bouwen we een complete astrologische webpagina vanaf nul - een pagina waar iemand zijn geboortegegevens invoert en direct zijn geboortehoroscoop ziet met planetaire posities, een visueel horoscoopwiel en zijn dagelijkse horoscoop. Geen eerdere API-ervaring nodig.
Wat heb je nodig
- Een AstroAPI-account (meld je gratis aan)
- Een API key (beschikbaar via je dashboard)
- Een teksteditor (VS Code, Sublime Text, of zelfs Kladblok)
- Een webbrowser
Dat is alles - geen frameworks, geen build-tools, geen terminalcommando’s. We schrijven alles in één enkel HTML-bestand.
Stap 1: Haal je API key op
Na het aanmelden ga je naar je dashboard. Je API key is als een wachtwoord dat je app identificeert bij AstroAPI - je hebt het nodig bij elk verzoek.
De API Keys-pagina vinden
In de rechterbovenhoek van het dashboard klik je op je profielicoon. Er verschijnt een dropdownmenu. Onder het gedeelte Integration klik je op API Keys.
Dit brengt je naar het API Keys-overzicht. Je ziet een navigatiebalk met je huidige pad: Profile > Integration > API Keys. Klik op de Create-knop in de rechterbovenhoek om een nieuwe key aan te maken.
Je key aanmaken
Op de aanmaakpagina zie je een formulier met verschillende secties:
- Name - Geef je key een herkenbare naam (bijv. “Mijn Astrologie App” of “Productie”).
- Expires In (days) - Stel optioneel een vervaldatum in. Laat het leeg als de key onbeperkt geldig moet zijn.
- Permissions - Selecteer welke API-functies de key mag gebruiken. Voor deze tutorial heb je minimaal de berekeningsrechten (
calc) nodig. Je kunt “Use all permissions from my role” aanvinken om het simpel te houden. - Modules - Kies welke modules de key mag gebruiken. Selecteer voor deze tutorial de natale modules (
natal:calc,natal:charts,natal:texts). Je kunt ook “Use all modules from my organization” aanvinken om alles toe te staan. - Domain Restrictions - Dit is een belangrijk onderdeel. Omdat je API key zichtbaar is in de broncode van de pagina (iedereen kan het zien via de ontwikkelaarstools van de browser), moet je deze beperken tot je eigen domein. Voer het domein van je website in (bijv.
mywebsite.com) zodat alleen verzoeken vanaf dat domein worden geaccepteerd. Op die manier kan niemand je key gebruiken op een andere site, zelfs als ze hem kopiëren. Voor lokale ontwikkeling kun je tijdelijk*gebruiken.
Klik op Save en je nieuwe API key verschijnt. Kopieer hem en bewaar hem op een veilige plek - je kunt de volledige key daarna niet meer zien.
Stap 2: Maak je HTML-pagina aan
Open je teksteditor en maak een nieuw bestand aan genaamd astrology.html. We beginnen met een basispagina met een formulier voor geboortegegevens:
<!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>Sla het bestand op en open het in je browser. Je zou een overzichtelijk formulier moeten zien dat om geboortegegevens vraagt. Het doet nog niets - laten we dat veranderen.
Stap 3: Zoek de geboortelocatie op
Wanneer iemand “Amsterdam” typt, moeten we dat omzetten naar breedte- en lengtegraadcoördinaten. AstroAPI heeft een geocoding-endpoint hiervoor:
const API_KEY = "your-api-key-here";
const BASE_URL = "https://api.astroapi.cloud/api";Je API key beschermen: Omdat dit een client-side webpagina is, is je API key zichtbaar voor iedereen die de broncode bekijkt. Dit is geen probleem zolang je Domain Restrictions hebt ingesteld in het dashboard (zie Stap 1). De API weigert verzoeken van elk domein dat niet op je allowlist staat, dus de key is nutteloos voor iemand die hem kopieert.
Laten we nu de functies schrijven. Eerst de locatieopzoeking:
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
};
}Dit zet “Amsterdam” om in { latitude: 52.37, longitude: 4.89, timezone: "Europe/Amsterdam", name: "Amsterdam" } - precies wat we nodig hebben voor horoscoopberekeningen. De tijdzone is belangrijk omdat AstroAPI deze nodig heeft om je lokale geboorteTijd correct om te zetten naar universele tijd.
Stap 4: Bereken de geboortehoroscoop
Laten we nu de geboortegegevens naar AstroAPI sturen en alle planetaire posities terugkrijgen:
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();
}De dateTime wordt verzonden als een ISO-tekenreeks (bijv. "1990-06-15T14:30:00") en de location bevat de tijdzone zodat de API de lokale geboorteTijd correct kan interpreteren. Het antwoord bevat alles over de horoscoop: waar elke planeet stond, in welk sterrenbeeld deze stond, welk huis deze bezette, en alle geometrische relaties (aspecten) tussen planeten.
Stap 5: Toon de resultaten
Hier wordt het spannend. Laten we de ruwe API-data omzetten in iets visueel aantrekkelijks. We tonen een tabel met planetaire posities en het Zon-, Maan- en Ascendant-teken van de persoon - de “grote drie” waar de meeste mensen nieuwsgierig naar zijn:
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");
}De API retourneert planeten als een object met als sleutel het planeet-ID (bijv. points.sun, points.moon). Elke planeet heeft een sign (zoals "gemini"), signTitle (weergavenaam zoals "Gemini"), degreesInSign (positie binnen dat sterrenbeeld) en houseNumber. Het Ascendant-teken (Rising sign) komt rechtstreeks uit de sign-eigenschap op de eerste huiscusp.
Stap 6: Voeg een visueel horoscoopwiel toe
Een geboortehoroscoop komt echt tot leven met het klassieke ronde horoscoopwiel. AstroAPI genereert deze als SVG-afbeeldingen die er op elk formaat scherp uitzien:
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);
}Het API-antwoord van de geboortehoroscoop bevat al een chart.url veld met de URL naar de SVG-chartafbeelding, dus een apart verzoek is niet nodig. We geven die URL simpelweg door aan een <img> tag om het chartwiel te tonen met alle 12 sterrenbeelden, huizen, planeetposities en aspectlijnen.
Heb je een PNG-afbeelding nodig - bijvoorbeeld om te delen op social media? Verander dan simpelweg de .svg extensie in de URL naar .png.
Stap 7: Toon de dagelijkse horoscoop
Laten we een persoonlijk tintje toevoegen door de horoscoop van vandaag te tonen voor het Zonteken van de persoon:
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);
}Het horoscoop-endpoint neemt de datum van vandaag in de URL en het sterrenbeeld als queryparameter. Horoscopen zijn beschikbaar in meerdere talen - verander gewoon language=en naar language=nl voor Nederlands, language=es voor Spaans, language=fr voor Frans, enzovoort.
Stap 8: Koppel alles aan elkaar
Laten we nu het formulier verbinden met al onze functies. Voeg de volgende code toe aan je <script> sectie, na alle functies uit de vorige stappen:
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>';
}
});Open het bestand in je browser, vul een geboortedatum en stad in, en klik op “Calculate My Chart.” Binnen een paar seconden zie je de volledige geboortehoroscoopdata, een prachtig horoscoopwiel en een gepersonaliseerde horoscoop - allemaal aangedreven door AstroAPI.
Verder bouwen: compatibiliteit, maanfasen en meer
Nu je een werkende astrologie-app hebt, zijn hier enkele functies die je als volgende zou kunnen toevoegen:
Liefdescompatibiliteit - Gebruik het synastrie-endpoint om twee geboortehoroscopen te vergelijken. Laat zien welke planeten harmonieuze aspecten vormen (driehoeken, sextielen) en welke spanning creëren (vierkanten, opposities). Ideaal voor een “relatiecompatibiliteit”-functie.
Maanfasetracker - Het maanfase-endpoint retourneert de huidige maanfase, het verlichtingspercentage en de tijden van maansopkomst en -ondergang. Perfect voor een zijbalkwidget of dagelijkse update.
Transitwaarschuwingen - Transits tonen waar de planeten op dit moment staan in vergelijking met iemands geboortehoroscoop. Gebruik dit om “wat er vandaag in je horoscoop gebeurt”-functies te bouwen - bijvoorbeeld: “Saturnus kruist je Midhemel, een tijd voor carrièredoorbraken.”
Numerologie - Bereken levenspadnummers, expressienummers en persoonlijkheidsnummers op basis van iemands geboortedatum en naam. Een mooie aanvulling op de astrologische gegevens.
Meertalige ondersteuning - Alle tekstgebaseerde endpoints (horoscopen, interpretaties) ondersteunen meerdere talen. Bouw voor een wereldwijd publiek door de lang-parameter mee te geven.
Server-side proxy - Voor productie-apps kun je overwegen je API-aanroepen naar een kleine backendserver te verplaatsen. Op die manier blijft je API key op de server en wordt deze nooit blootgesteld aan gebruikers. Domain Restrictions zijn een goede eerste verdedigingslinie, maar een proxy geeft je volledige controle.
Ontdek de volledige API
Wat we hier hebben behandeld is nog maar het begin. De volledige API-documentatie behandelt elk endpoint in detail, met voorbeeldverzoeken in cURL, JavaScript en Python.
Klaar om te beginnen met bouwen? Maak je gratis account aan en haal vandaag nog je API key op.