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