Как создать астрологическое приложение с AstroAPI
Раньше для создания астрологического приложения требовались глубокие знания астрономических расчётов, данных эфемерид и сложной математики. С AstroAPI вы можете пропустить всё это и сосредоточиться на самом важном: создании отличного пользовательского опыта.
В этом руководстве мы создадим полноценную астрологическую веб-страницу с нуля - страницу, на которой пользователь вводит данные о рождении и мгновенно видит свою натальную карту с положениями планет, визуальное колесо карты и свой ежедневный гороскоп. Предварительный опыт работы с API не требуется.
Что вам понадобится
- Аккаунт AstroAPI (зарегистрируйтесь бесплатно)
- API key (доступен в вашей панели управления)
- Текстовый редактор (VS Code, Sublime Text или даже Блокнот)
- Веб-браузер
Вот и всё - никаких фреймворков, инструментов сборки или команд в терминале. Мы напишем всё в одном HTML-файле.
Шаг 1: Получите свой API Key
После регистрации перейдите в свою панель управления. Ваш API key - это своего рода пароль, который идентифицирует ваше приложение для AstroAPI - он понадобится вам для каждого запроса.
Поиск страницы API Keys
В правом верхнем углу панели управления нажмите на иконку вашего профиля. Появится выпадающее меню. В разделе Integration нажмите API Keys.
Это перенесёт вас на страницу обзора API Keys. Вы увидите навигационную панель с текущим путём: Profile > Integration > API Keys. Нажмите кнопку Create в правом верхнем углу, чтобы создать новый ключ.
Создание ключа
На странице создания вы увидите форму с несколькими разделами:
- Name - Дайте ключу узнаваемое имя (например, “My Astrology App” или “Production”).
- Expires In (days) - При необходимости установите срок действия. Оставьте пустым, если ключ должен действовать бессрочно.
- Permissions - Выберите, к каким функциям API ключ может получить доступ. Для этого руководства вам понадобятся как минимум разрешения на расчёты (
calc). Вы можете отметить “Use all permissions from my role”, чтобы упростить настройку. - Modules - Выберите, какие модули может использовать ключ. Для этого руководства выберите натальные модули (
natal:calc,natal:charts,natal:texts). Вы также можете отметить “Use all modules from my organization”, чтобы разрешить всё. - Domain Restrictions - Это важный пункт. Поскольку ваш API key будет виден в исходном коде страницы (любой может увидеть его через инструменты разработчика браузера), вам следует ограничить его вашим собственным доменом. Введите домен вашего сайта (например,
mywebsite.com), чтобы принимались только запросы с этого домена. Таким образом, даже если кто-то скопирует ваш ключ, он не сможет использовать его на своём сайте. Для локальной разработки вы можете временно использовать*.
Нажмите Save, и ваш новый API key появится. Скопируйте его и сохраните в надёжном месте - вы не сможете снова увидеть полный ключ.
Шаг 2: Создайте вашу HTML-страницу
Откройте текстовый редактор и создайте новый файл с именем astrology.html. Начнём с базовой страницы с формой для ввода данных о рождении:
<!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>Сохраните файл и откройте его в браузере. Вы должны увидеть аккуратную форму, запрашивающую данные о рождении. Пока она ничего не делает - давайте это исправим.
Шаг 3: Поиск места рождения
Когда кто-то вводит “Amsterdam”, нам нужно преобразовать это в координаты широты и долготы. У AstroAPI есть endpoint для геокодирования:
const API_KEY = "your-api-key-here";
const BASE_URL = "https://api.astroapi.cloud/api";Защита вашего API key: Поскольку это клиентская веб-страница, ваш API key виден любому, кто просматривает исходный код страницы. Это нормально, если вы настроили Domain Restrictions в панели управления (см. Шаг 1). API будет отклонять запросы с любого домена, которого нет в вашем списке разрешённых, поэтому ключ бесполезен для того, кто его скопирует.
Теперь напишем функции. Сначала поиск местоположения:
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
};
}Это превращает “Amsterdam” в { latitude: 52.37, longitude: 4.89, timezone: "Europe/Amsterdam", name: "Amsterdam" } - именно то, что нам нужно для расчётов карты. Часовой пояс важен, потому что AstroAPI нужен для правильного преобразования вашего местного времени рождения во всемирное время.
Шаг 4: Рассчитайте натальную карту
Теперь отправим данные о рождении в AstroAPI и получим все положения планет:
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 (например, "1990-06-15T14:30:00"), а location включает часовой пояс, чтобы API мог правильно интерпретировать местное время рождения. Ответ содержит всю информацию о карте: где была расположена каждая планета, в каком знаке зодиака она находилась, какой дом она занимала, и все геометрические взаимосвязи (аспекты) между планетами.
Шаг 5: Отобразите результаты
Здесь начинается самое интересное. Давайте превратим необработанные данные API в нечто визуально привлекательное. Мы покажем таблицу положений планет и знаки Солнца, Луны и Асцендента - «большую тройку», которая интересует большинство людей:
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 возвращает планеты как объект с ключами по идентификатору планеты (например, points.sun, points.moon). У каждой планеты есть sign (например, "gemini"), signTitle (отображаемое имя, например "Gemini"), degreesInSign (положение внутри этого знака) и houseNumber. Восходящий знак (Асцендент) берётся напрямую из свойства sign на куспиде первого дома.
Шаг 6: Добавьте визуальное колесо карты
Натальная карта по-настоящему оживает с классическим круговым колесом карты. AstroAPI генерирует их в виде SVG-изображений, которые выглядят чётко при любом размере:
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);
}Ответ API натальной карты уже включает поле chart.url с URL SVG-изображения графика, поэтому отдельный запрос не нужен. Мы просто передаём этот URL в тег <img>, чтобы отобразить колесо карты со всеми 12 знаками зодиака, домами, положениями планет и линиями аспектов.
Нужно PNG-изображение вместо этого - например, для публикации в социальных сетях? Просто измените расширение .svg в URL на .png.
Шаг 7: Покажите ежедневный гороскоп
Давайте добавим личный штрих, показав сегодняшний гороскоп для солнечного знака пользователя:
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);
}Endpoint гороскопа принимает сегодняшнюю дату в URL и знак зодиака как параметр запроса. Гороскопы доступны на нескольких языках - просто измените language=en на language=nl для нидерландского, language=es для испанского, language=fr для французского и так далее.
Шаг 8: Соедините всё вместе
Теперь давайте подключим форму ко всем нашим функциям. Добавьте следующий код в ваш раздел <script>, после всех функций из предыдущих шагов:
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>';
}
});Откройте файл в браузере, введите дату рождения и город, и нажмите “Calculate My Chart”. В течение нескольких секунд вы увидите полные данные натальной карты, красивое колесо карты и персонализированный гороскоп - всё работает на AstroAPI.
Двигаемся дальше: совместимость, фазы Луны и многое другое
Теперь, когда у вас есть работающее астрологическое приложение, вот некоторые функции, которые вы можете добавить далее:
Любовная совместимость - Используйте endpoint синастрии для сравнения двух натальных карт. Покажите, какие планеты образуют гармоничные аспекты (тригоны, секстили) и какие создают напряжение (квадратуры, оппозиции). Отлично подходит для функции «совместимость в отношениях».
Трекер фаз Луны - Endpoint лунных фаз возвращает текущую фазу Луны, процент освещённости и время восхода/захода Луны. Идеально подходит для виджета в боковой панели или ежедневного обновления.
Оповещения о транзитах - Транзиты показывают, где планеты находятся прямо сейчас по сравнению с натальной картой человека. Используйте это для создания функций «что происходит в вашей карте сегодня» - например, «Сатурн пересекает ваш Середину Неба, время для карьерных прорывов».
Нумерология - Рассчитывайте числа жизненного пути, числа выражения и числа личности по дате рождения и имени человека. Хорошее дополнение к астрологическим данным.
Мультиязычная поддержка - Все текстовые endpoint-ы (гороскопы, интерпретации) поддерживают несколько языков. Создавайте приложения для глобальной аудитории, передавая параметр lang.
Серверный прокси - Для продакшн-приложений рассмотрите возможность переноса ваших API-вызовов на небольшой бэкенд-сервер. Таким образом ваш API key остаётся на сервере и никогда не раскрывается пользователям. Domain Restrictions - хорошая первая линия защиты, но прокси даёт вам полный контроль.
Изучите полный API
То, что мы рассмотрели здесь, - это только начало. Полная документация API охватывает каждый endpoint в деталях, с примерами запросов на cURL, JavaScript и Python.
Готовы начать? Создайте бесплатный аккаунт и получите свой API key уже сегодня.