🆓 FREE PROJECT

🚖 Урок 5: Geolocation — де я?

📍 Визначаємо місцезнаходження!

Відкриваєш Uber — він вже знає де ти!

Geolocation API визначає координати через GPS або Wi-Fi.

💡

А ТИ ЗНАВ?

🛰️ GPS точний до 3-5 метрів на відкритій місцевості!
📶 Wi-Fi визначає локацію до 50-100 метрів в приміщенні!

🧠

НОВЕ В ЦЬОМУ УРОЦІ!

📍 getCurrentPosition() — отримуємо координати
✅ Success callback — коли користувач дозволив
❌ Error callback — коли відмовив або помилка

🛰️

Geolocation — це як запитати дорогу!

Уяви, що браузер — це ввічливий помічник.

🙋 Ти: "Де я зараз?"
🔐 Браузер: "Спочатку дозвіл!" (спливаюче вікно)
✅ Користувач: "Дозволяю!"
📍 Браузер: "Ось твої координати: 50.4501, 30.5234"

Приватність понад усе! Без дозволу — нічого не отримаєш.

🔐 Чому браузер питає дозвіл?

Геолокація — це чутлива інформація. Уяви:

🏠 Зловмисник може дізнатися де ти живеш

🏢 Де ти працюєш і коли йдеш додому

📍 Відстежувати твої маршрути щодня

Тому: Браузер ЗАВЖДИ питає дозвіл перед доступом до геолокації!

📱 ЖИВИЙ ДОДАТОК

Визначаємо твоє місцезнаходження!

9:41 📍 🔋 100%

🚖 KOODI TAXI

📍

Твоє місцезнаходження

Очікуємо...

⏳ Натисни кнопку

👆 Натисни "Знайти мене" і дозволь геолокацію в браузері!

🔐

Потік дозволів

Що відбувається коли викликаєш getCurrentPosition()?

Твій код викликає API

navigator.geolocation.getCurrentPosition(...)

Браузер показує спливаюче вікно

"Цей сайт хоче знати ваше місцезнаходження"

✅ Дозволити

→ Викликається success callback з координатами

❌ Заблокувати

→ Викликається error callback з помилкою

🗺️

Що є в position.coords?

Всі властивості об'єкта координат

latitude 50.4501

longitude 30.5234

accuracy ~15 метрів

altitude null (не завжди)

speed null (потрібен рух)

latitude (широта)

Від -90° до +90°
+ = північ, - = південь

longitude (довгота)

Від -180° до +180°
+ = схід, - = захід

🎯 accuracy (точність)

Показує радіус в метрах, в якому ти знаходишся.
GPS: ~5-15м | Wi-Fi: ~50-100м | IP: ~1-5км

📍 getCurrentPosition — отримуємо координати

🙋 getCurrentPosition — це як одноразовий запит!
"Де я зараз?" → Отримав відповідь → Все, функція закінчила роботу.

Базовий запит геолокації:

// Перевіряємо чи браузер підтримує геолокацію if ('geolocation' in navigator) { // Запитуємо координати navigator.geolocation.getCurrentPosition( // Success callback — коли користувач дозволив function(position) { const lat = position.coords.latitude; const lng = position.coords.longitude; console.log('Координати:', lat, lng); }, // Error callback — коли відмовив або помилка function(error) { console.log('Помилка:', error.message); } ); } else { alert('Геолокація не підтримується!'); }

🧪 Geolocation API потребує...

💡 navigator.geolocation — об'єкт для роботи з геолокацією

💡 getCurrentPosition(success, error) — запитує координати ОДИН раз

💡 position.coords — об'єкт з координатами та точністю

📝 СТРУКТУРА ВИКЛИКУ:


                        getCurrentPosition(

                          successCallback, // отримав координати

                          errorCallback,   // помилка або відмова

                          options         // налаштування (опціонально)

                        )

✅ ПЕРЕВІРКА ПІДТРИМКИ:

'geolocation' in navigator — перевіряє чи браузер підтримує API.
Старі браузери або деякі вбудовані WebView можуть НЕ підтримувати!

❌ Обробка помилок

🛡️ Користувач може відмовити, GPS може бути вимкнений,
або сигнал недоступний. Завжди обробляй помилки!

Обробка всіх типів помилок:

function handleError(error) { switch(error.code) { case error.PERMISSION_DENIED: // Користувач натиснув "Заблокувати" alert('❌ Ви відмовили в доступі до геолокації'); break; case error.POSITION_UNAVAILABLE: // GPS недоступний (вимкнений, немає сигналу) alert('📡 Місцезнаходження недоступне'); break; case error.TIMEOUT: // Занадто довго чекали відповіді alert('⏱️ Час очікування вичерпано'); break; } } navigator.geolocation.getCurrentPosition( successCallback, handleError // передаємо функцію обробки помилок );

🧪 Якщо користувач відмовив у доступі...

💡 error.code — числовий код помилки

💡 error.message — текстовий опис помилки

🚨 ТРИ ТИПИ ПОМИЛОК:

`PERMISSION_DENIED`	Користувач відмовив
`POSITION_UNAVAILABLE`	GPS/Wi-Fi недоступний
`TIMEOUT`	Занадто довго чекали

💡 ВАЖЛИВО ПРО ДОЗВОЛИ:

Якщо користувач натиснув "Заблокувати", браузер запам'ятає це!
Наступного разу спливаюче вікно НЕ з'явиться — одразу error callback.

Щоб скинути: Налаштування сайту → Дозволи → Геолокація

👁️ watchPosition — відстежуємо рух

🏃 getCurrentPosition — одноразове фото 📸
watchPosition — відеозйомка 🎥 (постійне оновлення)

Відстеження руху в реальному часі:

// Починаємо відстежувати рух const watchId = navigator.geolocation.watchPosition( function(position) { // Викликається КОЖНОГО РАЗУ коли координати змінюються! const lat = position.coords.latitude; const lng = position.coords.longitude; console.log('Нова позиція:', lat, lng); // Оновлюємо маркер на карті, показуємо маршрут, тощо updateMarker(lat, lng); }, function(error) { console.log('Помилка відстеження:', error.message); } ); // ⚠️ ВАЖЛИВО: Зупиняємо відстеження коли більше не потрібно! // Інакше батарея швидко розрядиться 🔋 navigator.geolocation.clearWatch(watchId);

🧪 position.coords.accuracy показує...

💡 watchPosition() — викликає callback кожного разу при зміні позиції

💡 clearWatch(watchId) — зупиняє відстеження (ОБОВ'ЯЗКОВО!)

🆚 getCurrentPosition vs watchPosition:

getCurrentPosition	watchPosition
Один раз	Постійно
Для: "Де я зараз?"	Для: навігація, трекінг
Не потребує зупинки	ОБОВ'ЯЗКОВО clearWatch!

🔋 УВАГА: БАТАРЕЯ!

watchPosition постійно використовує GPS!
Якщо забудеш clearWatch():
• 🔋 Батарея швидко розрядиться
• 📱 Телефон нагріється
• 👤 Користувач буде незадоволений

🚖 В KOODI TAXI:

• getCurrentPosition — визначити стартову точку
• watchPosition — показувати рух таксі на карті
• clearWatch — зупинити коли поїздка завершилась

▶️ Натисни RUN і перевір!

Дозволь геолокацію — побачиш свої координати!

🏆 Що ти вивчив:

✓ getCurrentPosition() — отримувати координати

✓ Success & Error callbacks — обробляти результат

✓ position.coords — latitude, longitude, accuracy

✓ watchPosition / clearWatch — відстежувати рух

✅ Коли все працює:

Натисни "Готово" в редакторі!

⏱️ ~20 хв • Урок 5 з 8

Потрібна допомога?

💡 Підказка

🤖 AI-KOODI

index.html ✏️

style.css

app.js

1 2 3 4 5 6 7 8 9 10

<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>🚖 Koodi Taxi</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- =============================================
         🚖 ЗАВДАННЯ: Визначення локації
         =============================================

         Створи інтерфейс для геолокації:
         ✅ div (location) — контейнер локації
         ✅ h2 — заголовок "📍 Твоє місцезнаходження"
         ✅ p (coords) — для відображення координат
         ✅ p (accuracy) — для точності
         ✅ button (findMe) — "📍 Знайти мене"

         ⬇️ ПИШИ КОД НИЖЧЕ ⬇️
    -->

    <div id="app">
        <h1>🚖 Koodi Taxi</h1>

        <!-- Твій код тут -->

    </div>

    <script src="app.js"></script>
</body>
</html>

/* =============================================
   🎨 СТИЛІ ДЛЯ KOODI TAXI
   =============================================
   Стилі готові! Фокус уроку — Geolocation API.
*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Arial, sans-serif;
    background: linear-gradient(135deg, #1A1A2E, #16213e);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

#app {
    background: rgba(255, 213, 0, 0.1);
    padding: 40px;
    border-radius: 25px;
    border: 3px solid #FFD500;
    text-align: center;
    max-width: 420px;
    width: 100%;
}

h1 {
    color: #FFD500;
    font-size: 1.8em;
    margin-bottom: 25px;
}

#location {
    background: rgba(0,0,0,0.3);
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 20px;
}

#location h2 {
    color: #FFD500;
    font-size: 1.2em;
    margin-bottom: 20px;
}

#coords {
    color: #FFF;
    font-family: 'Courier New', monospace;
    font-size: 1.1em;
    background: rgba(255,213,0,0.1);
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 10px;
}

#accuracy {
    color: #4CAF50;
    font-size: 0.95em;
}

button {
    width: 100%;
    padding: 15px;
    border: 3px solid #000;
    border-radius: 12px;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
    margin-top: 10px;
    background: linear-gradient(135deg, #FFD500, #E5BF00);
    color: #000;
}

button:hover {
    transform: scale(1.03);
    box-shadow: 0 5px 20px rgba(255,213,0,0.3);
}

.error {
    color: #FF4E99;
    background: rgba(255,78,153,0.1);
    padding: 15px;
    border-radius: 10px;
}

.loading {
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

// =============================================
// 🚖 KOODI TAXI — Geolocation (Урок 5)
// =============================================
// Вивчаємо: геолокацію, callbacks, координати

// ─────────────────────────────────────────────
// 📦 КРОК 1: Знайди елементи
// ─────────────────────────────────────────────
// Використай document.getElementById() для:
// - coords (p для координат)
// - accuracy (p для точності)
// - findMe (кнопка)
//
// ⬇️ ПИШИ ТУТ:



// ─────────────────────────────────────────────
// 📍 КРОК 2: Функція успіху (success callback)
// ─────────────────────────────────────────────
// Створи функцію showPosition(position) яка:
// 1. Отримує широту (latitude) з об'єкта позиції
// 2. Отримує довготу (longitude) з об'єкта позиції
// 3. Отримує точність (accuracy) з об'єкта позиції
// 4. Оновлює coords.textContent з координатами
// 5. Оновлює accuracy.textContent з точністю
//
// ПРИКЛАД (псевдокод):
// function showPosition(position) {
//     беремо широту з position
//     беремо довготу з position
//     беремо точність з position
//     показуємо координати в coords
//     показуємо точність в accuracy
// }
//
// ⬇️ ПИШИ ТУТ:



// ─────────────────────────────────────────────
// ❌ КРОК 3: Функція помилки (error callback)
// ─────────────────────────────────────────────
// Створи функцію showError(error) яка:
// 1. Перевіряє код помилки
// 2. Показує відповідне повідомлення
//
// ПРИКЛАД (псевдокод):
// function showError(error) {
//     перевіряємо код помилки через switch
//     якщо PERMISSION_DENIED → показуємо "відмовлено"
//     якщо POSITION_UNAVAILABLE → показуємо "недоступна"
//     якщо TIMEOUT → показуємо "час вичерпано"
//     додаємо клас 'error'
// }
//
// ⬇️ ПИШИ ТУТ:



// ─────────────────────────────────────────────
// 🖱️ КРОК 4: Обробник кнопки "Знайти мене"
// ─────────────────────────────────────────────
// При кліку на findMe:
// 1. Перевірити чи підтримується геолокація
// 2. Показати "Визначаємо..." поки чекаємо
// 3. Викликати метод отримання позиції
//
// ПРИКЛАД (псевдокод):
// findMe.addEventListener('click', function() {
//     якщо геолокація підтримується {
//         показуємо "Визначаємо..."
//         викликаємо метод геолокації з двома функціями
//     } інакше {
//         показуємо помилку
//     }
// });
//
// ⬇️ ПИШИ ТУТ:



console.log('🚖 Koodi Taxi Geolocation!');

16px

localhost/taxi.html

🚖

Напиши код і натисни Run ▶

Koodi Taxi