So erstellst du eine Astrologie-App mit AstroAPI
Eine Astrologie-Anwendung zu erstellen erforderte früher tiefgreifendes Wissen über astronomische Berechnungen, Ephemeridendaten und komplexe Mathematik. Mit AstroAPI kannst du all das überspringen und dich auf das konzentrieren, was am wichtigsten ist: ein großartiges Benutzererlebnis zu schaffen.
In diesem Tutorial bauen wir eine vollständige Astrologie-Webseite von Grund auf - eine Seite, auf der jemand seine Geburtsdaten eingibt und sofort sein Geburtshoroskop mit Planetenpositionen, ein visuelles Radix-Diagramm und sein Tageshoroskop sieht. Keine Vorerfahrung mit APIs ist erforderlich.
Was du brauchst
- Ein AstroAPI-Konto (kostenlos registrieren)
- Einen API Key (verfügbar über dein Dashboard)
- Einen Texteditor (VS Code, Sublime Text oder sogar Notepad)
- Einen Webbrowser
Das war’s - keine Frameworks, keine Build-Tools, keine Terminal-Befehle. Wir schreiben alles in einer einzigen HTML-Datei.
Schritt 1: Hole dir deinen API Key
Nach der Registrierung gehst du zu deinem Dashboard. Dein API Key ist wie ein Passwort, das deine App gegenüber AstroAPI identifiziert - du brauchst ihn für jede Anfrage.
Die Seite für API Keys finden
Klicke in der oberen rechten Ecke des Dashboards auf dein Profilsymbol. Ein Dropdown-Menü erscheint. Unter dem Abschnitt Integration klickst du auf API Keys.
Du gelangst zur API Keys-Übersicht. Du siehst eine Navigationsleiste, die deinen aktuellen Pfad anzeigt: Profile > Integration > API Keys. Klicke auf die Schaltfläche Create in der oberen rechten Ecke, um einen neuen Key zu erstellen.
Deinen Key erstellen
Auf der Erstellungsseite siehst du ein Formular mit mehreren Abschnitten:
- Name - Gib deinem Key einen wiedererkennbaren Namen (z. B. “Meine Astrologie-App” oder “Production”).
- Expires In (days) - Lege optional ein Ablaufdatum fest. Lass das Feld leer, wenn der Key unbegrenzt gültig sein soll.
- Permissions - Wähle aus, auf welche API-Funktionen der Key zugreifen kann. Für dieses Tutorial brauchst du mindestens die Berechnungsberechtigungen (
calc). Du kannst “Use all permissions from my role” aktivieren, um es einfach zu halten. - Modules - Wähle aus, welche Module der Key nutzen darf. Für dieses Tutorial wähle die Natal-Module (
natal:calc,natal:charts,natal:texts). Du kannst auch “Use all modules from my organization” aktivieren, um alles freizugeben. - Domain Restrictions - Dieser Punkt ist wichtig. Da dein API Key im Quellcode der Seite sichtbar ist (jeder kann ihn über die Entwicklertools des Browsers sehen), solltest du ihn auf deine eigene Domain beschränken. Gib die Domain deiner Website ein (z. B.
mywebsite.com), damit nur Anfragen von dieser Domain akzeptiert werden. So kann selbst jemand, der deinen Key kopiert, ihn nicht auf seiner eigenen Seite verwenden. Für die lokale Entwicklung kannst du vorübergehend*verwenden.
Klicke auf Save und dein neuer API Key wird angezeigt. Kopiere ihn und bewahre ihn sicher auf - du wirst den vollständigen Key nicht erneut sehen können.
Schritt 2: Erstelle deine HTML-Seite
Öffne deinen Texteditor und erstelle eine neue Datei namens astrology.html. Wir beginnen mit einer einfachen Seite, die ein Formular für Geburtsdaten enthält:
<!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>Speichere die Datei und öffne sie in deinem Browser. Du solltest ein sauberes Formular sehen, das nach Geburtsdaten fragt. Es tut noch nichts - das ändern wir jetzt.
Schritt 3: Den Geburtsort nachschlagen
Wenn jemand “Amsterdam” eingibt, müssen wir das in Breiten- und Längengradkoordinaten umwandeln. AstroAPI hat dafür einen Geocoding-Endpunkt:
const API_KEY = "your-api-key-here";
const BASE_URL = "https://api.astroapi.cloud/api";Deinen API Key schützen: Da dies eine clientseitige Webseite ist, ist dein API Key für jeden sichtbar, der den Quellcode der Seite aufruft. Das ist in Ordnung, solange du Domain Restrictions im Dashboard eingerichtet hast (siehe Schritt 1). Die API lehnt Anfragen von jeder Domain ab, die nicht auf deiner Erlaubnisliste steht, sodass der Key für jeden nutzlos ist, der ihn kopiert.
Jetzt schreiben wir die Funktionen. Zuerst die Ortssuche:
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
};
}Das wandelt “Amsterdam” in { latitude: 52.37, longitude: 4.89, timezone: "Europe/Amsterdam", name: "Amsterdam" } um - genau das, was wir für die Horoskopberechnung brauchen. Die Zeitzone ist wichtig, weil AstroAPI sie benötigt, um deine lokale Geburtszeit korrekt in Weltzeit umzurechnen.
Schritt 4: Das Geburtshoroskop berechnen
Jetzt senden wir die Geburtsdaten an AstroAPI und erhalten alle Planetenpositionen zurück:
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();
}Die dateTime wird als ISO-String gesendet (z. B. "1990-06-15T14:30:00") und der location-Parameter enthält die Zeitzone, damit die API die lokale Geburtszeit korrekt interpretieren kann. Die Antwort enthält alles über das Horoskop: wo sich jeder Planet befand, in welchem Tierkreiszeichen er stand, welches Haus er besetzte und alle geometrischen Beziehungen (Aspekte) zwischen den Planeten.
Schritt 5: Die Ergebnisse anzeigen
Hier wird es spannend. Verwandeln wir die Rohdaten der API in etwas visuell Ansprechendes. Wir zeigen eine Tabelle mit Planetenpositionen und die Sonne-, Mond- und Aszendent-Zeichen der Person - die “großen Drei”, die die meisten Menschen am meisten interessieren:
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");
}Die API gibt Planeten als Objekt zurück, das nach Planeten-ID geordnet ist (z. B. points.sun, points.moon). Jeder Planet hat ein sign (wie "gemini"), signTitle (Anzeigename wie "Gemini"), degreesInSign (Position innerhalb dieses Zeichens) und houseNumber. Das Aszendent-Zeichen kommt direkt aus der sign-Eigenschaft der ersten Hausspitze.
Schritt 6: Ein visuelles Radix-Diagramm hinzufügen
Ein Geburtshoroskop wird erst durch das klassische kreisförmige Radix-Diagramm wirklich lebendig. AstroAPI generiert diese als SVG-Bilder, die in jeder Größe gestochen scharf aussehen:
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);
}Die API-Antwort des Geburtshoroskops enthält bereits ein chart.url Feld mit der URL zum SVG-Chartbild, sodass keine separate Anfrage nötig ist. Wir übergeben diese URL einfach an ein <img> Tag, um das Chartrad mit allen 12 Tierkreiszeichen, Häusern, Planetenpositionen und Aspektlinien anzuzeigen.
Brauchst du stattdessen ein PNG-Bild - zum Beispiel zum Teilen in sozialen Medien? Ändere einfach die .svg Erweiterung in der URL auf .png.
Schritt 7: Das Tageshoroskop anzeigen
Fügen wir eine persönliche Note hinzu, indem wir das heutige Horoskop für das Sonnenzeichen der Person anzeigen:
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);
}Der Horoskop-Endpunkt nimmt das heutige Datum in der URL und das Tierkreiszeichen als Query-Parameter entgegen. Horoskope sind in mehreren Sprachen verfügbar - ändere einfach language=en in language=nl für Niederländisch, language=es für Spanisch, language=fr für Französisch und so weiter.
Schritt 8: Alles zusammenfügen
Verbinden wir jetzt das Formular mit all unseren Funktionen. Füge den folgenden Code zu deinem <script>-Abschnitt hinzu, nach allen Funktionen aus den vorherigen Schritten:
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>';
}
});Öffne die Datei in deinem Browser, gib ein Geburtsdatum und eine Stadt ein und klicke auf “Calculate My Chart.” Innerhalb weniger Sekunden siehst du die vollständigen Geburtshoroskop-Daten, ein schönes Radix-Diagramm und ein personalisiertes Horoskop - alles powered by AstroAPI.
Weiter geht’s: Kompatibilität, Mondphasen und mehr
Jetzt, da du eine funktionierende Astrologie-App hast, sind hier einige Funktionen, die du als Nächstes hinzufügen könntest:
Liebeskompatibilität - Verwende den Synastrie-Endpunkt, um zwei Geburtshoroskope zu vergleichen. Zeige, welche Planeten harmonische Aspekte (Trigone, Sextile) bilden und welche Spannungen erzeugen (Quadrate, Oppositionen). Perfekt für eine “Beziehungskompatibilität”-Funktion.
Mondphasen-Tracker - Der Mondphasen-Endpunkt gibt die aktuelle Mondphase, den Beleuchtungsgrad und die Mondaufgangs-/Monduntergangszeiten zurück. Ideal für ein Sidebar-Widget oder tägliches Update.
Transit-Benachrichtigungen - Transite zeigen, wo die Planeten gerade jetzt im Vergleich zum Geburtshoroskop einer Person stehen. Nutze dies, um “Was passiert heute in deinem Horoskop”-Funktionen zu bauen - zum Beispiel: “Saturn überquert deinen Meridian, eine Zeit für berufliche Durchbrüche.”
Numerologie - Berechne Lebenszahlen, Ausdruckszahlen und Persönlichkeitszahlen aus dem Geburtsdatum und Namen einer Person. Eine schöne Ergänzung zu den astrologischen Daten.
Mehrsprachige Unterstützung - Alle textbasierten Endpunkte (Horoskope, Interpretationen) unterstützen mehrere Sprachen. Baue für ein globales Publikum, indem du den lang-Parameter übergibst.
Serverseitiger Proxy - Für Produktions-Apps solltest du in Betracht ziehen, deine API-Aufrufe auf einen kleinen Backend-Server zu verlagern. So bleibt dein API Key auf dem Server und wird den Benutzern nie offengelegt. Domain Restrictions sind eine gute erste Verteidigungslinie, aber ein Proxy gibt dir die volle Kontrolle.
Die vollständige API erkunden
Was wir hier behandelt haben, ist nur der Anfang. Die vollständige API-Dokumentation behandelt jeden Endpunkt im Detail, mit Anfrage-Beispielen in cURL, JavaScript und Python.
Bereit loszulegen? Erstelle dein kostenloses Konto und hole dir noch heute deinen API Key.