remove unnecessary fiiles
This commit is contained in:
parent
877100633b
commit
0ab1a56a35
@ -1,120 +0,0 @@
|
||||
# Google Maps API - Nastavenie
|
||||
|
||||
Aplikácia používa Google Maps API pre výber lokácie aktivít. Tento návod vám ukáže, ako získať API kľúč.
|
||||
|
||||
## Postup získania API kľúča
|
||||
|
||||
### 1. Vytvorenie projektu v Google Cloud Console
|
||||
|
||||
1. Prejdite na [Google Cloud Console](https://console.cloud.google.com/)
|
||||
2. Prihláste sa pomocou Google účtu
|
||||
3. Kliknite na dropdown v hornej časti stránky a vyberte "New Project"
|
||||
4. Zadajte názov projektu (napr. "SportBuddy") a kliknite "Create"
|
||||
|
||||
### 2. Aktivácia potrebných API
|
||||
|
||||
1. V Google Cloud Console prejdite na **APIs & Services > Library**
|
||||
2. Vyhľadajte a aktivujte nasledujúce API:
|
||||
- **Maps JavaScript API** - pre zobrazenie máp
|
||||
- **Maps Embed API** - pre vložené mapy (iframe)
|
||||
- **Places API** - pre autocomplete adries (legacy)
|
||||
- **Places API (New)** - pre zobrazenie miesta na mape
|
||||
- **Geocoding API** - pre získanie GPS súradníc
|
||||
|
||||
Pre každé API:
|
||||
- Kliknite na názov API
|
||||
- Kliknite na tlačidlo "Enable"
|
||||
|
||||
### 3. Vytvorenie API kľúča
|
||||
|
||||
1. Prejdite na **APIs & Services > Credentials**
|
||||
2. Kliknite na **+ CREATE CREDENTIALS** v hornej časti
|
||||
3. Vyberte **API key**
|
||||
4. API kľúč bude vytvorený - **skopírujte ho**
|
||||
|
||||
### 4. Obmedzenie API kľúča (Dôležité pre bezpečnosť!)
|
||||
|
||||
Po vytvorení kľúča je dôležité ho obmedziť:
|
||||
|
||||
1. V zozname API kľúčov kliknite na ikonu tužky (Edit) vedľa vášho kľúča
|
||||
2. V sekcii **Application restrictions**:
|
||||
- **PRE DEVELOPMENT:** Vyberte "None" (žiadne obmedzenia)
|
||||
- **PRE PRODUCTION:** Vyberte "HTTP referrers" a pridajte vašu doménu
|
||||
- Poznámka: Maps Embed API má problémy s HTTP referrers v development móde
|
||||
3. V sekcii **API restrictions**:
|
||||
- Vyberte "Restrict key"
|
||||
- Zaškrtnite:
|
||||
- Maps JavaScript API
|
||||
- Maps Embed API
|
||||
- Places API
|
||||
- Places API (New)
|
||||
- Geocoding API
|
||||
4. Kliknite na **Save**
|
||||
|
||||
**DÔLEŽITÉ:**
|
||||
- Po uložení zmien môže trvať až 5 minút, kým sa zmeny prejavia
|
||||
- Pre development odporúčame nastaviť "Application restrictions" na "None"
|
||||
- Pre production použite HTTP referrers s vašou doménou
|
||||
|
||||
### 5. Pridanie API kľúča do projektu
|
||||
|
||||
1. V koreňovom priečinku projektu vytvorte súbor `.env` (ak neexistuje)
|
||||
2. Skopírujte obsah zo súboru `.env.example`
|
||||
3. Do premennej `NEXT_PUBLIC_GOOGLE_MAPS_API_KEY` vložte váš API kľúč:
|
||||
|
||||
```env
|
||||
NEXT_PUBLIC_GOOGLE_MAPS_API_KEY="váš-api-kľúč-tu"
|
||||
```
|
||||
|
||||
### 6. Reštart aplikácie
|
||||
|
||||
Po pridaní API kľúča reštartujte Docker kontajnery:
|
||||
|
||||
```bash
|
||||
docker-compose restart frontend
|
||||
```
|
||||
|
||||
## Ceny a limity
|
||||
|
||||
Google Maps API ponúka **$200 mesačného kreditu zadarmo**, což pokrýva:
|
||||
- Cca 28,000 načítaní máp mesačne
|
||||
- Cca 100,000 autocomplete requestov mesačne
|
||||
|
||||
Pre väčšinu aplikácií v development a malých produkčných použití je to dostačujúce.
|
||||
|
||||
## Riešenie problémov
|
||||
|
||||
### "Google Maps Platform rejected your request" alebo HTTP 403
|
||||
**Najčastejší problém s Maps Embed API v development móde!**
|
||||
|
||||
**Rýchle riešenie:**
|
||||
1. Prejdite na **Google Cloud Console > APIs & Services > Credentials**
|
||||
2. Kliknite na Edit vedľa vášho API kľúča
|
||||
3. V sekcii **Application restrictions** zvoľte **"None"**
|
||||
4. Kliknite **Save**
|
||||
5. Počkajte 2-5 minút
|
||||
6. Vyčistite cache prehliadača (Ctrl+Shift+Delete)
|
||||
7. Obnovte stránku (F5)
|
||||
|
||||
**Poznámka:** Pre production nasadenie použite HTTP referrers s vašou doménou (napr. `https://vasadomena.sk/*`)
|
||||
|
||||
### "Google Maps API kľúč nie je nastavený"
|
||||
- Skontrolujte, že ste vytvorili `.env` súbor
|
||||
- Overte, že premenná je správne pomenovaná: `NEXT_PUBLIC_GOOGLE_MAPS_API_KEY`
|
||||
- Reštartujte Docker kontajner
|
||||
|
||||
### "This page can't load Google Maps correctly"
|
||||
- Skontrolujte, že ste aktivovali všetky potrebné API (Maps JavaScript, Maps Embed, Places, Places (New), Geocoding)
|
||||
- Skúste odstrániť Application restrictions (nastaviť na "None")
|
||||
|
||||
### Autocomplete nefunguje
|
||||
- Uistite sa, že je aktivované **Places API**
|
||||
- Skontrolujte obmedzenia API kľúča
|
||||
|
||||
## Alternatívne riešenia (bez Google Maps)
|
||||
|
||||
Ak nechcete používať Google Maps API, aplikácia funguje aj s manuálnym zadávaním adresy:
|
||||
- Používateľ môže zadať adresu textom
|
||||
- GPS súradnice nebudú dostupné, ale aplikácia bude fungovať
|
||||
|
||||
Pre vypnutie Google Maps integrácie jednoducho nenastávajte `NEXT_PUBLIC_GOOGLE_MAPS_API_KEY` premennú.
|
||||
@ -1,88 +0,0 @@
|
||||
# Zmeny v systéme lokácií aktivít
|
||||
|
||||
## Prehľad zmien
|
||||
|
||||
Namiesto výberu športoviska zo zoznamu teraz používatelia zadávajú adresu pomocou Google Maps.
|
||||
|
||||
## Implementované zmeny
|
||||
|
||||
### 1. Databázová schéma (Prisma)
|
||||
- Pridané polia do `Activity` modelu:
|
||||
- `location` (String) - plná adresa z Google Maps
|
||||
- `locationName` (String?) - voliteľný vlastný názov miesta
|
||||
- `latitude` (Float?) - GPS súradnica
|
||||
- `longitude` (Float?) - GPS súradnica
|
||||
- `venueId` je teraz voliteľné (pre spätnú kompatibilitu)
|
||||
|
||||
### 2. Backend API
|
||||
- Aktualizovaná validácia v `/api/activities`:
|
||||
- `location` je povinné pole
|
||||
- `locationName`, `latitude`, `longitude` sú voliteľné
|
||||
- `venueId` je teraz voliteľné
|
||||
|
||||
### 3. Frontend komponenty
|
||||
|
||||
#### LocationPicker komponent (`components/LocationPicker.tsx`)
|
||||
- Google Maps Places Autocomplete pre vyhľadávanie adries
|
||||
- Automatické získanie GPS súradníc
|
||||
- Podpora pre Slovensko (country: "sk")
|
||||
- Fallback na manuálny vstup ak Google Maps API nie je dostupné
|
||||
|
||||
#### Formulár na vytvorenie aktivity (`activities/create/page.tsx`)
|
||||
- Odstránený výber športoviska
|
||||
- Pridaný LocationPicker komponent
|
||||
- Validácia adresy pred odoslaním
|
||||
|
||||
#### Detail aktivity (`activities/[id]/page.tsx`)
|
||||
- Zobrazenie adresy namiesto športoviska
|
||||
- Zobrazenie vlastného názvu miesta (ak je zadaný)
|
||||
- Mapa s GPS súradnicami (ak sú dostupné)
|
||||
|
||||
#### Zoznam aktivít (`activities/page.tsx`)
|
||||
- Zobrazenie adresy alebo názvu miesta v karte aktivity
|
||||
|
||||
## Nastavenie Google Maps API
|
||||
|
||||
Pre plnú funkcionalitu je potrebný Google Maps API kľúč:
|
||||
|
||||
1. Postupujte podľa návodu v súbore `GOOGLE_MAPS_SETUP.md`
|
||||
2. Pridajte kľúč do `.env`:
|
||||
```
|
||||
NEXT_PUBLIC_GOOGLE_MAPS_API_KEY="váš-api-kľúč"
|
||||
```
|
||||
3. Reštartujte aplikáciu
|
||||
|
||||
### Bez Google Maps API
|
||||
Aplikácia funguje aj bez API kľúča:
|
||||
- Používateľ zadá adresu manuálne do textového poľa
|
||||
- GPS súradnice nebudú dostupné
|
||||
- Mapa sa nezobrazí v detaile aktivity
|
||||
|
||||
## Migrácia existujúcich dát
|
||||
|
||||
Existujúce aktivity v databáze majú stále nastavené `venueId`, ktoré zostáva zachované pre spätnú kompatibilitu. Pri zobrazení aktivít sa preferuje `location` pred `venue`.
|
||||
|
||||
Pre migráciu starých dát by bolo potrebné:
|
||||
1. Načítať všetky aktivity s `venueId`
|
||||
2. Skopírovať adresu z `venue` do `location`
|
||||
3. Voliteľne použiť Geocoding API na získanie GPS súradníc
|
||||
|
||||
## Technické detaily
|
||||
|
||||
### TypeScript typy
|
||||
- `google-maps.d.ts` - definície pre Google Maps API
|
||||
- Aktualizované interface pre `Activity` vo všetkých komponentoch
|
||||
|
||||
### Závislosti
|
||||
- Žiadne nové NPM balíčky
|
||||
- Google Maps sa načítava priamo cez script tag
|
||||
- Používa sa natívny Places Autocomplete API
|
||||
|
||||
## Testovanie
|
||||
|
||||
1. Vytvorte novú aktivitu
|
||||
2. Začnite písať adresu (napr. "Bratislava")
|
||||
3. Vyberte adresu zo zoznamu návrhov
|
||||
4. Overte že sa zobrazuje náhľad vybranej lokácie
|
||||
5. Odošlite formulár
|
||||
6. V detaile aktivity skontrolujte zobrazenie adresy a mapy
|
||||
Loading…
Reference in New Issue
Block a user