Setup projektu

Tento postup robíte v 1. týždni Fázy 1. Vývojár A založí repozitár a projekt, vývojár B si medzitým nainštaluje prostredie a na konci si projekt naklonuje. Výsledkom je čistý projekt so štruktúrou podľa technických zásad, v ktorom nie je nič navyše. Všetky príkazy sú pre bash terminál – na Windowse použite Git Bash, ktorý sa nainštaluje spolu s Gitom.

1. Prostredie (obaja)

Nainštalujte si:

Node.js – verziu LTS,
Git,
VS Code s rozšírením Vue (Official),
Ionic CLI:

bash

npm install -g @ionic/cli

Android Studio zatiaľ netreba. Appku budete spúšťať v prehliadači, Android do projektu pridáte v 5. týždni Fázy 3.

2. Repozitár (vývojár A)

V GitLabe vytvorte nový prázdny repozitár pre tím a pridajte do neho kolegu (rola Developer alebo Maintainer).
Repozitár si naklonujte a otvorte jeho priečinok:

bash

git clone <adresa-repozitára>

3. Vytvorenie projektu (vývojár A)

Projekt vytvoríte podľa oficiálneho Ionic Vue quickstartu so šablónou blank. Spustite príkaz vo vnútri naklonovaného repozitára:

bash

ionic start clubhub blank --type vue --no-git

Ionic vytvorí podpriečinok clubhub. Celý jeho obsah – aj skryté súbory ako .gitignore a .vscode – presuňte o úroveň vyššie, priamo do repozitára, a prázdny priečinok clubhub zmažte.

bash

mv clubhub/* clubhub/.[!.]* . && rmdir clubhub

Skontrolujte, že projekt beží:

bash

npm run dev

4. Upratanie (vývojár A)

Ionic do projektu pridá testy, starú konfiguráciu, ukážkovú obrazovku a pluginy, ktoré nepoužijeme, a všetky súbory dá priamo do src/. V tomto kroku odstránime, čo netreba, a zvyšok presunieme do štruktúry podľa technických zásad. Pri každom kroku je vysvetlené, čo a prečo robíte. Mazanie a presúvanie môžete na konci spraviť naraz jedným príkazom (časť 4.5), úpravy obsahu súborov robíte ručne.

Kým nedokončíte krok 5, projekt sa nespustí – odstránime z neho plugin, ktorý je ešte zapísaný vo vite.config.ts.

4.1 Zmazať testy a nepotrebné nastavenia

Čo zmazať	Čo to je a prečo to netreba
`tests/`	Ukážkové unit testy (Vitest) a end-to-end testy (Cypress). Testy v projekte nepíšeme.
`cypress.config.ts`	Nastavenie Cypressu pre end-to-end testy.
`.eslintrc.cjs`, `.eslintignore`	Nastavenie ESLintu v starom formáte. ESLint v projekte nepoužívame.
`.browserslistrc`	Zoznam starých prehliadačov, pre ktoré sa má appka prekladať. Patrí k pluginu pre staré prehliadače, ktorý odstránime.
`src/theme/`	Je v ňom takmer prázdny súbor `variables.css` pre Ionic farby. Farby budeme mať v `src/plugins/app/_themes/` (krok 5).

4.2 Odinštalovať balíky

Spolu so súbormi odstránime aj balíky, ktoré k nim patria:

Balíky	Prečo
`cypress`, `vitest`, `@vue/test-utils`, `jsdom`	Nástroje na testy, ktoré nepíšeme.
`@vitejs/plugin-legacy`, `terser`	Preklad appky pre staré prehliadače. Appka beží v moderných prehliadačoch a v telefóne, toto netreba.
`eslint`, `eslint-plugin-vue`, `@vue/eslint-config-typescript`	ESLint, ktorý nepoužívame.
`@capacitor/haptics`, `@capacitor/keyboard`, `@capacitor/status-bar`	Natívne pluginy (vibrácie, klávesnica, stavová lišta), ktoré zatiaľ nepotrebujeme. Keď nejaký plugin budete potrebovať, nainštalujete si ho vtedy.

4.3 Presunúť súbory do štruktúry projektu

Celý kód appky bude v src/plugins/: spoločné nastavenia v app/_config/ a obrazovky v moduloch, napríklad app@events/. Ionic tieto súbory už vytvoril, len sú na iných miestach – presuňte ich:

Odkiaľ	Kam	Čo to je
`src/main.ts`	`src/plugins/app/_config/main.ts`	Spúšťa appku: vytvorí ju, pripojí Ionic a router a načíta štýly.
`src/App.vue`	`src/plugins/app/_config/App.vue`	Koreňový komponent, do ktorého sa vykresľujú všetky obrazovky.
`src/router/index.ts`	`src/plugins/app/_config/router.ts`	Zoznam ciest (adries) appky a obrazoviek, ktoré sa na nich zobrazia.
`src/views/HomePage.vue`	`src/plugins/app@events/events-list.vue`	Prvá obrazovka. Z ukážkovej stránky Ionicu bude dočasná obrazovka Podujatia.

Prázdne priečinky src/router/ a src/views/ potom zmažte.

4.4 Upraviť presunuté súbory

main.ts – upravte importy štýlov:

Nechajte 3 základné štýly Ionicu (core, normalize, structure), bez nich Ionic komponenty nefungujú.
typography.css zakomentujte – štýly textu bude určovať dizajn a Tailwind.
Zmažte voliteľné pomocné triedy Ionicu (padding, float-elements, text-alignment, text-transformation, flex-utils, display). Všetko to vie aj Tailwind.
Paletu pre tmavý režim zmeňte z dark.system.css na dark.class.css. Tmavý režim sa potom nezapne sám podľa nastavenia telefónu, ale len vtedy, keď ho zapnete triedou ion-palette-dark.
Import ./theme/variables.css nahraďte importom 3 súborov s farbami, ktoré vytvoríte v kroku 5.
Router je po novom v súbore router.ts vedľa, import ./router preto ostáva rovnaký.

Výsledný obsah:

import { createApp } from 'vue'
import { IonicVue } from '@ionic/vue'

import App from './App.vue'
import router from './router'

/* Core CSS required for Ionic components to work properly */
import '@ionic/vue/css/core.css'
import '@ionic/vue/css/normalize.css'
import '@ionic/vue/css/structure.css'
// import '@ionic/vue/css/typography.css'

/* Ionic dark palette – enabled only by the .ion-palette-dark class, https://ionicframework.com/docs/theming/dark-mode */
import '@ionic/vue/css/palettes/dark.class.css'

/* App colors and styles */
import '../_themes/colors.css'
import '../_themes/tailwind.css'
import '../_themes/ionic.css'

const app = createApp(App).use(IonicVue).use(router)

router.isReady().then(() => {
	app.mount('#app')
})

App.vue – obsah netreba meniť. Je v ňom ion-app a ion-router-outlet, do ktorého router vykresľuje aktuálnu obrazovku:

vue

<template>
	<ion-app>
		<ion-router-outlet />
	</ion-app>
</template>

<script setup lang="ts">
import { IonApp, IonRouterOutlet } from '@ionic/vue'
</script>

router.ts – nahraďte ukážkovú cestu /home cestou na obrazovku Podujatia:

Zmažte import HomePage a typu RouteRecordRaw, už ich nepotrebujete.
Adresa / presmeruje na /events.
Obrazovka sa načíta cez () => import(...) až vtedy, keď na ňu prejdete. Appka sa tak spúšťa rýchlejšie.

import { createRouter, createWebHistory } from '@ionic/vue-router'

const router = createRouter({
	history: createWebHistory(import.meta.env.BASE_URL),
	routes: [
		{
			path: '/',
			redirect: '/events',
		},
		{
			path: '/events',
			component: () => import('../../app@events/events-list.vue'),
		},
	],
})

export default router

events-list.vue – ukážkový obsah Ionicu (nadpis „Blank“, odkaz na dokumentáciu a jeho štýly) nahraďte jednoduchou stránkou. Slúži len na kontrolu, že projekt beží, v ďalších týždňoch ju nahradíte skutočnou obrazovkou:

vue

<template>
	<ion-page>
		<ion-content>
			<div class="p-4">
				<h1 class="text-primary">ClubHub</h1>
				<p class="text-text-muted">Projekt beží.</p>
			</div>
		</ion-content>
	</ion-page>
</template>

<script setup lang="ts">
import { IonContent, IonPage } from '@ionic/vue'
</script>

package.json – v časti scripts nechajte len spustenie, build a náhľad. Skripty na testy a ESLint už nemajú čo spúšťať:

json

"scripts": {
	"dev": "vite",
	"build": "vue-tsc && vite build",
	"preview": "vite preview"
}

tsconfig.json – do compilerOptions pridajte "allowJs": true a do include pridajte "src/**/*.js". Projekt je v TypeScripte, takto v ňom môžete písať aj v JavaScripte.

index.html – upravte údaje o appke a cestu k main.ts, ktorý ste presunuli:

lang="en" zmeňte na lang="sk",
<title> a apple-mobile-web-app-title zmeňte na ClubHub,
content="light dark" pri color-scheme zmeňte na content="light",
cestu skriptu /src/main.ts zmeňte na /src/plugins/app/_config/main.ts.

capacitor.config.ts – appName zmeňte na ClubHub a appId na sk.clubhub.app. Tieto údaje sa použijú, keď budete appku inštalovať na telefón.

4.5 Všetko mazanie a presúvanie naraz

Kroky 4.1 až 4.3 spraví tento príkaz. Úpravy obsahu súborov z časti 4.4 urobte potom ručne.

bash

rm -rf tests cypress.config.ts .eslintrc.cjs .eslintignore .browserslistrc src/theme
npm uninstall cypress vitest @vue/test-utils jsdom @vitejs/plugin-legacy terser eslint eslint-plugin-vue @vue/eslint-config-typescript @capacitor/haptics @capacitor/keyboard @capacitor/status-bar
mkdir -p src/plugins/app/_config src/plugins/app/_themes src/plugins/app@events
mv src/main.ts src/plugins/app/_config/main.ts
mv src/App.vue src/plugins/app/_config/App.vue
mv src/router/index.ts src/plugins/app/_config/router.ts
mv src/views/HomePage.vue src/plugins/app@events/events-list.vue
rmdir src/router src/views

5. Tailwind a farby (vývojár A)

Nainštalujte Tailwind a jeho plugin pre Vite:

bash

npm install tailwindcss @tailwindcss/vite

vite.config.ts – zmažte plugin legacy() pre staré prehliadače a nastavenie testov (test a riadok /// <reference types="vitest" />) a pridajte plugin tailwindcss():

import vue from '@vitejs/plugin-vue'
import tailwindcss from '@tailwindcss/vite'
import path from 'path'
import { defineConfig } from 'vite'

export default defineConfig({
	plugins: [vue(), tailwindcss()],
	resolve: {
		alias: {
			'@': path.resolve(__dirname, './src'),
		},
	},
})

V src/plugins/app/_themes/ vytvorte 3 súbory s farbami. Čo je v ktorom a prečo, je popísané v časti Farebná paleta v technických zásadách:

colors.css – hlavné premenné farieb,
tailwind.css – import Tailwindu a farby pre Tailwind triedy,
ionic.css – farby pre Ionic komponenty.

Hodnoty farieb skopírujte z technických zásad, sú to farby ClubHubu z dizajnu. Potom podľa časti Písmo pripojte v index.html font Alexandria a do tailwind.css pridajte štýly textu.

6. Kontrola a prvý push (vývojár A)

bash

npm run dev
npm run build

Obe musia prejsť bez chýb a v prehliadači sa musí zobraziť fialový nadpis ClubHub vo fonte Alexandria. Potom zmeny commitnite a pushnite priamo do hlavnej vetvy – je to jediný raz, keď sa pushuje bez merge requestu:

bash

git add .
git commit -m "Project setup"
git push

Až teraz v GitLabe nastavte ochranu hlavnej vetvy: zlučovať sa do nej dá len cez merge request.

7. Naklonovanie (vývojár B)

bash

git clone <adresa-repozitára>
cd <názov-repozitára>
npm install
npm run dev

Výsledná štruktúra

text

├── .vscode/
├── public/
│   └── favicon.png
├── src/
│   ├── plugins/
│   │   ├── app/
│   │   │   ├── _config/
│   │   │   │   ├── App.vue
│   │   │   │   ├── main.ts
│   │   │   │   └── router.ts
│   │   │   └── _themes/
│   │   │       ├── colors.css
│   │   │       ├── ionic.css
│   │   │       └── tailwind.css
│   │   └── app@events/
│   │       └── events-list.vue
│   └── vite-env.d.ts
├── .gitignore
├── capacitor.config.ts
├── index.html
├── ionic.config.json
├── package.json
├── package-lock.json
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts

Setup projektu ​

1. Prostredie (obaja) ​

2. Repozitár (vývojár A) ​

3. Vytvorenie projektu (vývojár A) ​

4. Upratanie (vývojár A) ​

4.1 Zmazať testy a nepotrebné nastavenia ​

4.2 Odinštalovať balíky ​

4.3 Presunúť súbory do štruktúry projektu ​

4.4 Upraviť presunuté súbory ​

4.5 Všetko mazanie a presúvanie naraz ​

5. Tailwind a farby (vývojár A) ​

6. Kontrola a prvý push (vývojár A) ​

7. Naklonovanie (vývojár B) ​

Výsledná štruktúra ​

Setup projektu

1. Prostredie (obaja)

2. Repozitár (vývojár A)

3. Vytvorenie projektu (vývojár A)

4. Upratanie (vývojár A)

4.1 Zmazať testy a nepotrebné nastavenia

4.2 Odinštalovať balíky

4.3 Presunúť súbory do štruktúry projektu

4.4 Upraviť presunuté súbory

4.5 Všetko mazanie a presúvanie naraz

5. Tailwind a farby (vývojár A)

6. Kontrola a prvý push (vývojár A)

7. Naklonovanie (vývojár B)

Výsledná štruktúra