ClubHub – Fáza 1: Inštrukcie

Tento dokument hovorí, ako budete vo Fáze 1 pracovať a kto čo robí ktorý týždeň. Čo má appka vedieť, nájdete v špecifikácii Fázy 1.

Ako pracujeme

V tíme ste 2 vývojári, A a B (v trojici aj C). Všetci programujete a každý týždeň má každý z vás vlastnú úlohu. Každú zmenu skontroluje ten druhý, než sa zlúči.

Ako vzniká jedna úloha

1. Úlohy z plánu po týždňoch si zapíšete na board v Notione a dohodnete sa, kto z vás je A a kto B.
2. Vývojár si úlohu priradí a vytvorí si z hlavnej vetvy projektu novú vetvu s názvom feature/<nazov-ulohy>, napr. feature/karta-podujatia.
3. Pred začatím napíše krátky plán úlohy podľa stránky Ako plánovať úlohu a dá ho prečítať kolegovi.
4. Hotovú úlohu pošle ako merge request.
5. Druhý člen tímu spraví code review podľa stránky Code review; po schválení sa zmena zlúči.
6. Na konci fázy odprezentujete mentorovi, čo ste spravili.

Definition of Done

Úloha je hotová, keď:

• spĺňa všetky akceptačné kritériá svojej user story,
• dodržiava technické zásady,
• prešla code review a je zlúčená do hlavnej vetvy,
• v konzole nie sú chyby.

Plán po týždňoch

Fáza 1 má 6 piatkov (9. 10. – 20. 11. 2026, 30. 10. sú jesenné prázdniny). Čo nestihnete na hodine, dokončite na pracovných hodinách alebo doma do ďalšieho piatku.

Ak ste v tíme traja, vývojár C preberá pri každom týždni časť práce A alebo B – je to uvedené pri danom týždni. Odkazy A1, B1… vedú na obrazovky v dizajne.

1. týždeň · 9. 10. – Kickoff a setup

Cieľ: viete, čo budete robiť, a obaja máte projekt rozbehnutý lokálne. Dostanete odkaz na dizajn (je v špecifikácii) a mock dáta; dátumy v dátach si upravte podľa potreby.

• Vývojár A: podľa stránky Setup projektu založí repozitár v GitLabe, pridá B, vytvorí a uprace projekt, pushne ho a nastaví ochranu hlavnej vetvy.
• Vývojár B: nainštaluje si prostredie podľa Setup projektu, krok 1. Založí board v Notione a zapíše do neho úlohy z plánu po týždňoch, aby ste videli, ako napredujete. Na konci si naklonuje projekt a spustí ho lokálne.
• Vývojár C (ak ste traja): nainštaluje si prostredie, pomáha B s boardom, na konci si naklonuje projekt.

2. týždeň · 16. 10. – Layout a karta

Cieľ: navigácia appky a karta podujatia.

• Vývojár A: US-01 – layout so spodnou lištou a 2 prázdnymi obrazovkami (Podujatia, Uložené). Dizajn: spodná lišta v A1 a C1.
• Vývojár B: US-02 – komponent karty podujatia podľa dizajnu vrátane náhradného obrázka podľa kategórie. Vloží mock dáta do projektu: events.json – vložte ich napr. do src/plugins/app@events/_data/events.json a dátumy si upravte podľa potreby. Dizajn: karta v A1, v design systéme komponenty Event Card a Category Image.
• Vývojár C (ak ste traja): vloží mock dáta a urobí náhradný obrázok kategórie – gradient s ikonou podľa dizajnu. B robí len kartu.

3. týždeň · 23. 10. – Zoznam a detail

Cieľ: zoznam podujatí a detail.

• Vývojár A: US-02 – obrazovka Podujatia: načítanie dát, zoradenie, skrytie minulých podujatí, prázdny stav, karty od B. Dizajn: A1, prázdny stav A1b.
• Vývojár B: US-03 – obrazovka detailu so všetkými údajmi, logikou ceny, hláškou „Podujatie sa nenašlo“ a prechodom z karty. Dizajn: B1, B1b.
• Vývojár C (ak ste traja): prázdny stav zoznamu (A1b) a hláška „Podujatie sa nenašlo“ (B1b). A a B robia len hlavné obrazovky.

4. týždeň · 6. 11. – Uloženie a hľadanie

Cieľ: uloženie podujatí a vyhľadávanie.

• Vývojár A: US-06 – ukladanie „Zaujíma ma“, ktoré prežije reštart appky, tlačidlo na karte aj v detaile, obrazovka Uložené s prázdnym stavom. Dizajn: srdiečko v A1 a B1, obrazovka C1, prázdny stav C1b.
• Vývojár B: US-04 – vyhľadávanie bez ohľadu na diakritiku a veľkosť písmen, hláška pri prázdnom výsledku. Dizajn: A1, prázdny výsledok A1c.
• Vývojár C (ak ste traja): obrazovka Uložené s prázdnym stavom (C1, C1b). A robí len ukladanie a tlačidlá.

5. týždeň · 13. 11. – Filtre

Cieľ: filtre spolu s vyhľadávaním.

• Vývojár A: US-05 – filter kategórií (viac naraz) a filter obdobia. Dizajn: A1.
• Vývojár B: US-05 – zobrazenie aktívnych filtrov, zrušenie všetkých, prepojenie filtrov s vyhľadávaním. Zachovanie filtrov po návrate z detailu. Dizajn: aktívne filtre a „Zrušiť filtre“ v A1c.
• Vývojár C (ak ste traja): filter obdobia. A robí len filter kategórií.

6. týždeň · 20. 11. – Prezentácia

Cieľ: hotová fáza odprezentovaná mentorovi.

• Vývojár A: otestuje US-01 až US-03 podľa akceptačných kritérií v prehliadači v mobilnom zobrazení a opraví chyby.
• Vývojár B: otestuje US-04 až US-06 rovnako a opraví chyby. Spolu s A pripraví 10-minútovú prezentáciu.
• Vývojár C (ak ste traja): testovanie v prehliadači v mobilnom zobrazení, príprava prezentácie.

Technické pokyny

Pokyny nižšie hovoria, ako na to – kód napíšte sami. Vzhľad a texty robte podľa dizajnu a akceptačných kritérií. Cesty k súborom zodpovedajú štruktúre z technických zásad.

Navigácia s tabmi (US-01)

Spodná lišta je layout app/_layout/tabs-layout.vue s komponentmi ion-tabs, ion-tab-bar a ion-tab-button. Ostatné obrazovky sú v routeri ako jeho deti (children), takže sa zobrazujú vo vnútri layoutu a lišta zostáva dole. Ako na to, nájdete v Ionic docs – Tabs a v príklade ion-tabs.

• Každá route má name a v appke na ňu odkazujete cez meno, nikdy nie cez text adresy: { name: 'Events' }, nie '/tabs/events'. Platí to aj pre redirect a pre tlačidlá v lište. Viac v Vue Router – Named Routes.
• Adresa / aj samotný layout presmerujú na obrazovku Podujatia.
• Ikony v lište sú z dizajnu: calendarOutline (Podujatia) a heartOutline (Uložené).
• Každá obrazovka (events-list.vue, saved.vue…) má v šablóne ako koreň ion-page a v ňom ion-content.

Načítanie mock dát (US-02)

Súbor events.json vložte do app@events/_data/ a naimportujte ho ako obyčajný modul. Dostanete priamo pole podujatí:

import events from './_data/events.json'

Detail podľa ID v adrese (US-03)

• Detail je route s parametrom v adrese, napr. events/:id, a s vlastným name.
• Z karty naň prejdete cez meno a parameter: router.push({ name: 'Event detail', params: { id: event.id } }), nie skladaním textu adresy.
• V detaile si ID prečítate z aktuálnej route (useRoute, route.params.id). Parameter je vždy text, preto ho pred porovnaním s id v dátach zmeňte na číslo.
• Podujatie nájdite v mock dátach podľa ID. Keď sa nenájde, zobrazte hlášku „Podujatie sa nenašlo“ (obrazovka B1b v dizajne).

Viac v Vue Router – Dynamic Route Matching.

Náhradný obrázok kategórie (US-02)

Keď podujatie nemá obrázok, karta aj detail ukážu fialový gradient s ikonou kategórie (v dizajne komponent Category Image). Nie je to obrázok, ale div s pozadím --gradient-primary z palety, pomerom strán 16 : 9 a s ion-icon v strede vo farbe primary-contrast.

Kategória	Ikona
Šport	footballOutline
Kultúra	musicalNotesOutline
Veda a technika	flaskOutline
Výlety	mapOutline
Krúžky	colorPaletteOutline
Ostatné	ellipsisHorizontalOutline

Priradenie kategórie k ikone majte na jednom mieste, napr. v _utils/category-icons.js, aby ho karta aj detail používali rovnako.

Formát dátumu (US-02, US-03)

Dátumy sú v dátach ako text, napr. "2026-12-18T17:00:00". Do tvaru „18. 12. 2026 17:00“ ich prevedie funkcia v app/_utils/format-date.js:

export function formatDate(isoString) {
	return new Date(isoString).toLocaleString('sk-SK', {
		day: 'numeric',
		month: 'numeric',
		year: 'numeric',
		hour: '2-digit',
		minute: '2-digit',
	})
}

Vyhľadávanie bez diakritiky (US-04)

Text vyhľadávania aj názov podujatia najprv upravte rovnakou funkciou – bez diakritiky, malými písmenami a bez medzier na okrajoch – a až potom ich porovnajte. Funkcia v app/_utils/normalize-text.js:

export function normalizeText(text) {
	return text
		.normalize('NFD')
		.replace(/[\u0300-\u036f]/g, '')
		.toLowerCase()
		.trim()
}

Použitie: normalizeText(event.title).includes(normalizeText(query)).

Uloženie „Zaujíma ma“ (US-06)

• Uložené podujatia si pamätajte ako pole ich ID v localStorage, aby prežili zatvorenie appky.
• Do localStorage sa dá uložiť len text: pole pri ukladaní preveďte cez JSON.stringify a pri načítaní späť cez JSON.parse. Keď ešte nič uložené nie je, začnite s prázdnym poľom.
• Načítanie a uloženie dajte do funkcií na jednom mieste, napr. app/_utils/saved-events.js, aby karta, detail aj obrazovka Uložené pracovali s rovnakými dátami.
• Pri kliknutí na srdiečko ID do poľa pridajte alebo ho z neho odoberte a pole znova uložte.

Viac v MDN – localStorage.

Na čo si dať pozor

• Týždeň 1: kým A zakladá projekt, B nemá čo kódovať. Preto robí board a prostredie a projekt si naklonuje až na konci hodiny.
• Týždeň 3: A potrebuje kartu od B z 2. týždňa. Ak ešte nie je zlúčená, A začne s dočasnou kartou a neskôr ju vymení.
• Týždeň 5: obaja meníte tú istú obrazovku, takže pri zlúčení vzniknú konflikty. Dohodnite sa na začiatku, kto zlúči ako prvý; druhý si potom stiahne zmeny a konflikty vyrieši.

Odovzdanie fázy

Fáza končí 20. 11. prezentáciou, na ktorej každý tím za 10 minút ukáže mentorovi, čo spravil.

• Appka beží v prehliadači a dá sa ovládať v mobilnom zobrazení.
• Všetky user stories US-01 až US-06 sú hotové podľa Definition of Done.
• Na prezentácii ukážete každú story priamo v appke, nie na snímkach.
• Poviete, čo sa podarilo, čo nie a čo by ste nabudúce spravili inak.
• Posledná verzia je v hlavnej vetve repozitára.

Po prezentácii dostanete zadanie Fázy 2.