AstroAPI ile Bir Astroloji Uygulaması Nasıl Oluşturulur
Bir astroloji uygulaması geliştirmek eskiden astronomik hesaplamalar, efemeris verileri ve karmaşık matematik konusunda derin bilgi gerektirirdi. AstroAPI ile tüm bunları atlayabilir ve en önemli şeye odaklanabilirsiniz: harika bir kullanıcı deneyimi oluşturmak.
Bu rehberde, sıfırdan eksiksiz bir astroloji web sayfası oluşturacağız - birinin doğum bilgilerini girip anında gezegen konumlarıyla natal haritasını, görsel bir harita çarkını ve günlük burç yorumunu görebildiği bir sayfa. Önceden API deneyimi gerekmez.
Neler Gerekecek
- Bir AstroAPI hesabı (ücretsiz kaydolun)
- Bir API key (kontrol panelinizden alabilirsiniz)
- Bir metin düzenleyici (VS Code, Sublime Text veya Notepad bile olur)
- Bir web tarayıcısı
Hepsi bu - framework yok, derleme aracı yok, terminal komutu yok. Her şeyi tek bir HTML dosyasında yazacağız.
Adım 1: API Key’inizi Alın
Kaydolduktan sonra kontrol panelinize gidin. API key’iniz, uygulamanızı AstroAPI’ye tanımlayan bir şifre gibidir - her istekte buna ihtiyacınız olacak.
API Keys sayfasını bulma
Kontrol panelinin sağ üst köşesinde profil simgenize tıklayın. Bir açılır menü görünecektir. Integration bölümünün altında API Keys’e tıklayın.
Bu sizi API Keys genel görünümüne getirir. Mevcut konumunuzu gösteren bir gezinme çubuğu göreceksiniz: Profile > Integration > API Keys. Yeni bir anahtar oluşturmak için sağ üst köşedeki Create düğmesine tıklayın.
Anahtarınızı oluşturma
Oluşturma sayfasında birkaç bölümden oluşan bir form göreceksiniz:
- Name - Anahtarınıza tanınabilir bir isim verin (örn. “Astroloji Uygulamam” veya “Production”).
- Expires In (days) - İsteğe bağlı olarak bir son kullanma tarihi belirleyin. Anahtarın süresiz olması gerekiyorsa boş bırakın.
- Permissions - Anahtarın hangi API özelliklerine erişebileceğini seçin. Bu rehber için en azından hesaplama izinlerine (
calc) ihtiyacınız olacak. İşleri basit tutmak için “Use all permissions from my role” seçeneğini işaretleyebilirsiniz. - Modules - Anahtarın hangi modülleri kullanabileceğini seçin. Bu rehber için natal modüllerini (
natal:calc,natal:charts,natal:texts) seçin. Her şeye izin vermek için “Use all modules from my organization” seçeneğini de işaretleyebilirsiniz. - Domain Restrictions - Bu önemlidir. API key’iniz sayfanın kaynak kodunda görüneceğinden (herkes tarayıcının geliştirici araçlarıyla görebilir), onu kendi alan adınızla sınırlandırmalısınız. Web sitenizin alan adını girin (örn.
mywebsite.com) böylece yalnızca o alan adından gelen istekler kabul edilir. Bu sayede birisi anahtarınızı kopyalasa bile kendi sitesinde kullanamaz. Yerel geliştirme için geçici olarak*kullanabilirsiniz.
Save’e tıklayın ve yeni API key’iniz görünecektir. Kopyalayın ve güvenli bir yerde saklayın - tam anahtarı tekrar göremeyeceksiniz.
Adım 2: HTML Sayfanızı Oluşturun
Metin düzenleyicinizi açın ve astrology.html adında yeni bir dosya oluşturun. Doğum bilgileri için bir form içeren basit bir sayfayla başlayacağız:
<!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>Dosyayı kaydedin ve tarayıcınızda açın. Doğum bilgilerini soran temiz bir form görmelisiniz. Henüz bir şey yapmıyor - bunu düzeltelim.
Adım 3: Doğum Yerini Bulun
Birisi “Amsterdam” yazdığında bunu enlem ve boylam koordinatlarına dönüştürmemiz gerekir. AstroAPI’nin bunun için bir geocoding uç noktası vardır:
const API_KEY = "your-api-key-here";
const BASE_URL = "https://api.astroapi.cloud/api";API key’inizi koruma: Bu istemci taraflı bir web sayfası olduğundan, API key’iniz sayfa kaynağını görüntüleyen herkes tarafından görülebilir. Kontrol panelinde Domain Restrictions ayarladığınız sürece bu sorun değildir (bkz. Adım 1). API, izin listenizde olmayan herhangi bir alan adından gelen istekleri reddedecektir, bu nedenle anahtarı kopyalayan biri için işe yaramaz.
Şimdi fonksiyonları yazalım. İlk olarak, konum araması:
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
};
}Bu, “Amsterdam”ı { latitude: 52.37, longitude: 4.89, timezone: "Europe/Amsterdam", name: "Amsterdam" } biçimine dönüştürür - tam da harita hesaplamaları için ihtiyacımız olan şey. Saat dilimi önemlidir çünkü AstroAPI’nin yerel doğum saatinizi evrensel zamana doğru şekilde dönüştürmesi gerekir.
Adım 4: Natal Haritayı Hesaplayın
Şimdi doğum verilerini AstroAPI’ye gönderelim ve tüm gezegen konumlarını geri alalım:
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();
}dateTime ISO dizesi olarak gönderilir (örn. "1990-06-15T14:30:00") ve location saat dilimini içerir, böylece API yerel doğum saatini doğru şekilde yorumlayabilir. Yanıt, harita hakkında her şeyi içerir: her gezegenin nerede konumlandığı, hangi burçta olduğu, hangi evi işgal ettiği ve gezegenler arasındaki tüm geometrik ilişkiler (açılar).
Adım 5: Sonuçları Gösterin
İşte heyecanlı kısım burada. Ham API verilerini görsel olarak çekici bir şeye dönüştürelim. Gezegen konumlarının bir tablosunu ve kişinin Güneş, Ay ve Yükselen burcunu - çoğu kişinin merak ettiği “büyük üçlüyü” - göstereceğiz:
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");
}API, gezegenleri gezegen kimliğine göre anahtarlanmış bir nesne olarak döndürür (örn. points.sun, points.moon). Her gezegenin bir sign (örn. "gemini"), signTitle (görüntüleme adı, örn. "Gemini"), degreesInSign (o burç içindeki konumu) ve houseNumber değeri vardır. Yükselen burç (Ascendant), doğrudan birinci ev tepe noktasındaki sign özelliğinden gelir.
Adım 6: Görsel Harita Çarkı Ekleyin
Bir natal harita, klasik dairesel harita çarkıyla gerçekten canlanır. AstroAPI bunları her boyutta net görünen SVG görselleri olarak oluşturur:
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);
}Doğum haritası API yanıtı zaten SVG grafik görselinin URL’sini içeren bir chart.url alanı içerir, bu yüzden ayrı bir istek gerekli değildir. Bu URL’yi basitçe bir <img> etiketine geçirerek 12 burç işareti, evler, gezegen konumları ve açı çizgilerini içeren harita çarkını gösteriyoruz.
Bunun yerine bir PNG görsele mi ihtiyacınız var - örneğin sosyal medyada paylaşmak için? URL’deki .svg uzantısını .png olarak değiştirmeniz yeterlidir.
Adım 7: Günlük Burç Yorumunu Gösterin
Kişinin Güneş burcuna göre bugünün burç yorumunu göstererek kişisel bir dokunuş ekleyelim:
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);
}Burç yorumu uç noktası, URL’de bugünün tarihini ve sorgu parametresi olarak burç işaretini alır. Burç yorumları birden fazla dilde mevcuttur - Hollandaca için language=nl, İspanyolca için language=es, Fransızca için language=fr gibi language=en kısmını değiştirmeniz yeterlidir.
Adım 8: Her Şeyi Bir Araya Getirin
Şimdi formu tüm fonksiyonlarımıza bağlayalım. Aşağıdaki kodu <script> bölümünüze, önceki adımlardaki tüm fonksiyonlardan sonra ekleyin:
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>';
}
});Dosyayı tarayıcınızda açın, bir doğum tarihi ve şehir girin ve “Calculate My Chart”a tıklayın. Birkaç saniye içinde tam natal harita verilerini, güzel bir harita çarkını ve kişiselleştirilmiş bir burç yorumunu göreceksiniz - hepsi AstroAPI tarafından destekleniyor.
Daha İleri Gitmek: Uyumluluk, Ay Evreleri ve Daha Fazlası
Artık çalışan bir astroloji uygulamanız olduğuna göre, ekleyebileceğiniz bazı özellikler şunlardır:
Aşk uyumluluğu - İki doğum haritasını karşılaştırmak için synastry uç noktasını kullanın. Hangi gezegenlerin uyumlu açılar (trigon, sekstil) oluşturduğunu ve hangilerinin gerilim yarattığını (kare, karşıt) gösterin. “İlişki uyumluluğu” özelliği için harika.
Ay evresi takipçisi - Moonphase uç noktası mevcut ay evresini, aydınlanma yüzdesini ve ayın doğuş/batış saatlerini döndürür. Kenar çubuğu bileşeni veya günlük güncelleme için mükemmel.
Transit uyarıları - Transitler, gezegenlerin birinin doğum haritasıyla karşılaştırıldığında şu anda nerede olduğunu gösterir. Bunu “bugün haritanızda neler oluyor” özellikleri oluşturmak için kullanın - örneğin, “Satürn Gökyüzü Ortası noktanızı geçiyor, kariyer atılımları için bir dönem.”
Numeroloji - Bir kişinin doğum tarihi ve isminden yaşam yolu sayılarını, ifade sayılarını ve kişilik sayılarını hesaplayın. Astrolojik verilere güzel bir tamamlayıcı.
Çok dilli destek - Tüm metin tabanlı uç noktalar (burç yorumları, yorumlamalar) birden fazla dili destekler. lang parametresini ileterek küresel bir kitle için geliştirin.
Sunucu taraflı proxy - Üretim uygulamaları için API çağrılarınızı küçük bir arka uç sunucuya taşımayı düşünün. Bu sayede API key’iniz sunucuda kalır ve kullanıcılara hiçbir zaman açık olmaz. Domain Restrictions iyi bir ilk savunma hattıdır, ancak bir proxy size tam kontrol sağlar.
Tam API’yi Keşfedin
Burada ele aldığımız şey sadece başlangıç. Tam API dokümantasyonu her uç noktayı cURL, JavaScript ve Python’daki istek örnekleriyle ayrıntılı olarak kapsar.
Geliştirmeye başlamaya hazır mısınız? Ücretsiz hesabınızı oluşturun ve bugün API key’inizi alın.