Comment construire une application d’astrologie avec AstroAPI
Construire une application d’astrologie necessitait autrefois une connaissance approfondie des calculs astronomiques, des donnees d’ephemerides et de mathematiques complexes. Avec AstroAPI, vous pouvez passer outre tout cela et vous concentrer sur ce qui compte le plus : creer une excellente experience utilisateur.
Dans ce tutoriel, nous allons construire une page web d’astrologie complete a partir de zero - une page ou quelqu’un entre ses details de naissance et voit instantanement son theme natal avec les positions planetaires, une roue graphique du theme et son horoscope du jour. Aucune experience prealable avec les API n’est necessaire.
Ce dont vous aurez besoin
- Un compte AstroAPI (inscription gratuite)
- Une API key (disponible depuis votre tableau de bord)
- Un editeur de texte (VS Code, Sublime Text, ou meme le Bloc-notes)
- Un navigateur web
C’est tout - pas de frameworks, pas d’outils de build, pas de commandes terminal. Nous ecrirons tout dans un seul fichier HTML.
Etape 1 : Obtenir votre API key
Apres votre inscription, rendez-vous sur votre tableau de bord. Votre API key est comme un mot de passe qui identifie votre application aupres d’AstroAPI - vous en aurez besoin pour chaque requete.
Trouver la page des API Keys
Dans le coin superieur droit du tableau de bord, cliquez sur l’icone de votre profil. Un menu deroulant apparaitra. Dans la section Integration, cliquez sur API Keys.
Cela vous amene a la vue d’ensemble des API Keys. Vous verrez une barre de navigation indiquant votre chemin actuel : Profile > Integration > API Keys. Cliquez sur le bouton Create dans le coin superieur droit pour creer une nouvelle cle.
Creer votre cle
Sur la page de creation, vous verrez un formulaire avec plusieurs sections :
- Name - Donnez a votre cle un nom reconnaissable (par ex. “Mon App Astrologie” ou “Production”).
- Expires In (days) - Definissez optionnellement une date d’expiration. Laissez vide si la cle doit durer indefiniment.
- Permissions - Selectionnez les fonctionnalites de l’API auxquelles la cle peut acceder. Pour ce tutoriel, vous aurez besoin au minimum des permissions de calcul (
calc). Vous pouvez cocher “Use all permissions from my role” pour simplifier les choses. - Modules - Choisissez quels modules la cle peut utiliser. Pour ce tutoriel, selectionnez les modules natals (
natal:calc,natal:charts,natal:texts). Vous pouvez egalement cocher “Use all modules from my organization” pour tout autoriser. - Domain Restrictions - Celui-ci est important. Comme votre API key sera visible dans le code source de la page (n’importe qui peut la voir via les outils de developpement du navigateur), vous devriez la restreindre a votre propre domaine. Entrez le domaine de votre site web (par ex.
mywebsite.com) pour que seules les requetes provenant de ce domaine soient acceptees. Ainsi, meme si quelqu’un copie votre cle, il ne pourra pas l’utiliser sur son propre site. Pour le developpement local, vous pouvez utiliser*temporairement.
Cliquez sur Save et votre nouvelle API key apparaitra. Copiez-la et conservez-la en lieu sur - vous ne pourrez plus voir la cle complete par la suite.
Etape 2 : Creer votre page HTML
Ouvrez votre editeur de texte et creez un nouveau fichier appele astrology.html. Nous commencerons par une page simple avec un formulaire pour les details de naissance :
<!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>Enregistrez le fichier et ouvrez-le dans votre navigateur. Vous devriez voir un formulaire propre demandant les details de naissance. Il ne fait encore rien - corrigeons cela.
Etape 3 : Rechercher le lieu de naissance
Quand quelqu’un tape “Amsterdam”, nous devons convertir cela en coordonnees de latitude et longitude. AstroAPI dispose d’un endpoint de geocodage pour cela :
const API_KEY = "your-api-key-here";
const BASE_URL = "https://api.astroapi.cloud/api";Proteger votre API key : Comme il s’agit d’une page web cote client, votre API key est visible par quiconque consulte le code source de la page. C’est acceptable tant que vous avez configure les Domain Restrictions dans le tableau de bord (voir Etape 1). L’API rejettera les requetes provenant de tout domaine qui ne figure pas dans votre liste autorisee, rendant la cle inutilisable pour quiconque la copie.
Ecrivons maintenant les fonctions. D’abord, la recherche de lieu :
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
};
}Cela transforme “Amsterdam” en { latitude: 52.37, longitude: 4.89, timezone: "Europe/Amsterdam", name: "Amsterdam" } - exactement ce dont nous avons besoin pour les calculs de theme. Le fuseau horaire est important car AstroAPI en a besoin pour convertir correctement votre heure de naissance locale en temps universel.
Etape 4 : Calculer le theme natal
Envoyons maintenant les donnees de naissance a AstroAPI et recuperons toutes les positions planetaires :
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();
}Le dateTime est envoye sous forme de chaine ISO (par ex. "1990-06-15T14:30:00") et le location inclut le fuseau horaire pour que l’API puisse interpreter correctement l’heure de naissance locale. La reponse contient tout sur le theme : ou chaque planete etait positionnee, dans quel signe du zodiaque elle se trouvait, dans quelle maison elle se situait, et toutes les relations geometriques (aspects) entre les planetes.
Etape 5 : Afficher les resultats
C’est ici que cela devient passionnant. Transformons les donnees brutes de l’API en quelque chose de visuellement attrayant. Nous afficherons un tableau des positions planetaires ainsi que les signes Soleil, Lune et Ascendant de la personne - les “trois grands” qui interessent la plupart des gens :
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");
}L’API renvoie les planetes sous forme d’objet indexe par identifiant de planete (par ex. points.sun, points.moon). Chaque planete a un sign (comme "gemini"), un signTitle (nom d’affichage comme "Gemini"), un degreesInSign (position dans ce signe) et un houseNumber. Le signe Ascendant provient directement de la propriete sign sur la cuspide de la premiere maison.
Etape 6 : Ajouter une roue graphique du theme
Un theme natal prend vraiment vie avec la roue circulaire classique. AstroAPI les genere sous forme d’images SVG qui sont nettes a toute taille :
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 reponse de l’API du theme natal inclut deja un champ chart.url avec l’URL vers l’image SVG du graphique, donc aucune requete separee n’est necessaire. Il suffit de passer cette URL a une balise <img> pour afficher la roue du theme avec les 12 signes du zodiaque, les maisons, les positions planetaires et les lignes d’aspects.
Besoin d’une image PNG a la place - par exemple, pour partager sur les reseaux sociaux ? Changez simplement l’extension .svg dans l’URL en .png.
Etape 7 : Afficher l’horoscope du jour
Ajoutons une touche personnelle en affichant l’horoscope du jour pour le signe solaire de la personne :
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);
}L’endpoint de l’horoscope prend la date du jour dans l’URL et le signe du zodiaque comme parametre de requete. Les horoscopes sont disponibles en plusieurs langues - changez simplement language=en en language=nl pour le neerlandais, language=es pour l’espagnol, language=fr pour le francais, et ainsi de suite.
Etape 8 : Tout assembler
Connectons maintenant le formulaire a toutes nos fonctions. Ajoutez le code suivant a votre section <script>, apres toutes les fonctions des etapes precedentes :
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>';
}
});Ouvrez le fichier dans votre navigateur, remplissez une date de naissance et une ville, puis cliquez sur “Calculate My Chart.” En quelques secondes, vous verrez les donnees completes du theme natal, une belle roue graphique et un horoscope personnalise - le tout propulse par AstroAPI.
Aller plus loin : compatibilite, phases lunaires et plus encore
Maintenant que vous avez une application d’astrologie fonctionnelle, voici quelques fonctionnalites que vous pourriez ajouter ensuite :
Compatibilite amoureuse - Utilisez l’endpoint de synastrie pour comparer deux themes natals. Montrez quelles planetes forment des aspects harmonieux (trigones, sextiles) et lesquelles creent des tensions (carres, oppositions). Ideal pour une fonctionnalite de “compatibilite relationnelle”.
Suivi des phases lunaires - L’endpoint moonphase renvoie la phase lunaire actuelle, le pourcentage d’illumination et les heures de lever/coucher de lune. Parfait pour un widget en barre laterale ou une mise a jour quotidienne.
Alertes de transits - Les transits montrent ou se trouvent les planetes en ce moment par rapport au theme natal de quelqu’un. Utilisez cela pour construire des fonctionnalites “que se passe-t-il dans votre theme aujourd’hui” - par exemple, “Saturne traverse votre Milieu du Ciel, une periode de percees professionnelles.”
Numerologie - Calculez les nombres de chemin de vie, les nombres d’expression et les nombres de personnalite a partir de la date de naissance et du nom d’une personne. Un beau complement aux donnees astrologiques.
Support multilingue - Tous les endpoints bases sur le texte (horoscopes, interpretations) supportent plusieurs langues. Construisez pour un public mondial en passant le parametre lang.
Proxy cote serveur - Pour les applications en production, envisagez de deplacer vos appels API vers un petit serveur backend. De cette facon, votre API key reste sur le serveur et n’est jamais exposee aux utilisateurs. Les Domain Restrictions sont une bonne premiere ligne de defense, mais un proxy vous donne un controle total.
Explorer l’API complete
Ce que nous avons couvert ici n’est que le debut. La documentation complete de l’API couvre chaque endpoint en detail, avec des exemples de requetes en cURL, JavaScript et Python.
Pret a commencer a construire ? Creez votre compte gratuit et obtenez votre API key des aujourd’hui.