Arkkitehtuurin ja teknologiapinon suunnittelu
Määrittäkää sovelluksen idea, valitkaa backend-ratkaisu (Supabase tai Firebase), valitkaa navigointirakenne, päättäkää tilanhallintatavasta ja alustakaa projekti sopivalla kansiorakenteella.
Arkkitehtuurin ja teknologiapinon suunnittelu on ilmainen React Native Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu React Native Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. React Native Academy-kurssilla on yhteensä 4 oppituntia.
Päättöprojektin esittely
Päättöprojektissa sovellat kaikkea React Native -opintokokonaisuudessa oppimaasi ja rakennat täydellisen, tuotantovalmiin sovelluksen alusta alkaen. Tässä oppitunnissa käsitellään kriittistä ensimmäistä vaihetta: arkkitehtuurin ja teknologiapinon suunnittelua ennen ensimmäisenkään ominaisuuden koodirivin kirjoittamista. Tässä tehdyt päätökset — taustajärjestelmä, navigointimalli, tilanhallinta ja kansiorakenne — ovat myöhemmin työläitä muuttaa, joten käytä suunnitteluun riittävästi aikaa heti alussa.
Sovellusidean määrittäminen
Aloita selkeästä ongelman kuvauksesta: minkä ongelman sovellus ratkaisee ja kenelle? Hyvin määritelty laajuus ehkäisee ominaisuuksien hallitsematonta lisääntymistä ja pitää projektin toimitettavana. Kirjoita muistiin ydinlupaus yhdellä lauseella, v1-version kolme–viisi pakollista ominaisuutta sekä luettelo ominaisuuksista, jotka siirretään nimenomaisesti v2-versioon. Kolme asiaa erinomaisesti tekevä sovellus julkaistaan; kaikkeen yrittävä sovellus ei valmistu koskaan.
// Example app: 'HabitTracker'
// Problem:
// People struggle to build daily habits because they
// have no lightweight way to track streaks on mobile.
// Core value: Visual streak tracking with daily check-ins
// V1 features:
// 1. Create/delete habits with name and icon
// 2. Mark habit as done each day
// 3. View streak count and calendar history
// 4. Push reminder notification at chosen time
// 5. Basic stats: longest streak, completion rate
// Deferred to V2:
// - Social sharing, friend challenges, premium themesTaustajärjestelmän valitseminen
Yksittäiselle kehittäjälle tai pienelle tiimille Supabase ja Firebase ovat parhaat BaaS (Backend as a Service) -vaihtoehdot. Supabase tarjoaa aidon PostgreSQL-tietokannan SQL-kyselyillä, rivitason suojauksella ja erinomaisilla TypeScript-tyypeillä. Firebase (Firestore) perustuu dokumentteihin, joten reaaliaikaisuuden käyttöönotto on yksinkertaisempaa, mutta tyypitys on heikompaa. Jos tietosi ovat monimutkaisia ja relaatiopohjaisia (ja tarvitsevat liitoksia), valitse Supabase. Hierarkkisille ja joustaville dokumenttipohjaisille tiedoille, kuten chat-viesteille, Firebase on luonteva valinta. Molemmat tarjoavat autentikoinnin, tallennustilan ja funktiot.
// Decision matrix:
// Supabase:
// + Postgres SQL — complex queries and relationships
// + TypeScript generated types from schema
// + Open source — can self-host
// + Row Level Security (granular per-user access)
// - Slightly more setup for real-time subscriptions
// Firebase:
// + Simpler real-time listeners (onSnapshot)
// + Generous free tier
// + Google's CDN/auth infrastructure
// - NoSQL: no joins, schema migrations harder
// - Vendor lock-in
// For HabitTracker: Supabase (relational habits/completions)Navigointirakenne
Suunnittele navigointipuu ennen näyttöjen rakentamista. Useimmissa sovelluksissa on kaksi päätason tilaa: autentikointinäytöt (kirjautuminen, rekisteröityminen ja käyttöönotto — näytetään, kun istuntoa ei ole) sekä sovelluksen näytöt (pääsisältö, joka näytetään käyttäjän ollessa autentikoitu). Auth/app-vaihto muodostaa juurinavigaattorin. Sovellustilassa valitse välilehtinavigaattori (pääosiot) ja/tai pinonavigaattori (yksityiskohtaiset näkymäpolut). Piirrä tämä puuna ennen koodaamista.
// HabitTracker navigation tree:
// Root Navigator (stack)
// ├── Auth Stack (shown when no session)
// │ ├── Onboarding Screen
// │ ├── Sign In Screen
// │ └── Sign Up Screen
// └── App Tab Navigator (shown when authenticated)
// ├── Home Tab (Stack)
// │ ├── Habit List Screen
// │ └── Habit Detail Screen
// ├── Stats Tab (Stack)
// │ └── Statistics Screen
// └── Settings Tab (Stack)
// └── Settings ScreenTilanhallinnan valinta
Valitse sovelluksesi monimutkaisuuteen sopiva tilanhallintaratkaisu. Pieni tai keskikokoinen sovellus toimii hyvin, kun globaalissa tilassa (autentikointi-istunto, teema) käytetään React Context + useState -ratkaisua ja palvelimen tietojen hallintaan React Query -kirjastoa. Suuremmat sovellukset, joissa on monimutkaista eri osien välillä jaettua tilaa, hyötyvät joko Zustand-kirjastosta (yksinkertainen ja vähän ylimääräistä koodia vaativa) tai Redux Toolkit -kirjastosta (tehokas ja kehittäjätyökaluilla varustettu). Välttäkää Reduxin valitsemista pieneen sovellukseen — sen aiheuttama lisätyö ei ole perusteltua ennen kuin toisiinsa liittyviä tilan osia on paljon.
// HabitTracker state management plan:
// Authentication state:
// → Context API (AuthContext with session/user)
// Server data (habits, completions):
// → React Query (useQuery, useMutation)
// - Caches habits list
// - Invalidates cache on mutation
// - Works offline with persistence
// UI state (selected date, modal open):
// → Local useState in each component
// Theme preference (light/dark):
// → Context + AsyncStorage for persistence
// No Redux needed — RQ handles server state wellKansiorakenne
Hyvin järjestetty kansiorakenne helpottaa koodikannassa navigointia sen kasvaessa. Yleinen React Native -käytäntö on, että src/ sisältää kaiken ja sen alikansioissa ovat esimerkiksi screens/ (näkymät), components/ (jaettu käyttöliittymä), hooks/ (omat hookit), services/ (API- ja backend-kutsut), store/ tai context/ (tila), navigation/ (navigaattorit) sekä utils/ (puhtaat funktiot). Suuremmissa sovelluksissa ryhmittele tiedostot ominaisuuden ja pienemmissä tyypin mukaan.
// Recommended folder structure:
src/
screens/
auth/
SignInScreen.tsx
SignUpScreen.tsx
habits/
HabitListScreen.tsx
HabitDetailScreen.tsx
stats/
StatsScreen.tsx
components/
HabitCard.tsx
StreakBadge.tsx
CheckInButton.tsx
hooks/
useHabits.ts
useCompletions.ts
useAuth.ts
services/
supabase.ts
habitsApi.ts
navigation/
RootNavigator.tsx
AppTabNavigator.tsx
context/
AuthContext.tsx
ThemeContext.tsxTietokantaskeeman suunnittelu
Suunnittele tietokantaskeema ennen kyselyiden kirjoittamista. Supabasen (PostgreSQL:n) kanssa ajattele tauluja ja niiden suhteita. HabitTracker-sovellus tarvitsee habits-taulun (käyttäjän omistamat tavat) sekä completions-taulun (yksi rivi jokaista päivää ja tapaa kohti, jolloin tapa merkittiin tehdyksi). Käyttäjiin voit käyttää Supabase Authin valmista auth.users-taulua. Rivikohtaisen suojauksen (RLS) käytännöt varmistavat, että käyttäjät näkevät vain omat tietonsa.
-- HabitTracker schema (PostgreSQL / Supabase)
CREATE TABLE habits (
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE,
name TEXT NOT NULL,
icon TEXT DEFAULT 'star',
color TEXT DEFAULT '#007AFF',
reminder_time TIME,
created_at TIMESTAMPTZ DEFAULT NOW()
);
CREATE TABLE completions (
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
habit_id UUID REFERENCES habits(id) ON DELETE CASCADE,
completed_date DATE NOT NULL,
created_at TIMESTAMPTZ DEFAULT NOW(),
UNIQUE(habit_id, completed_date)
);
-- RLS policies: users see only their own habits
ALTER TABLE habits ENABLE ROW LEVEL SECURITY;
CREATE POLICY 'Users can CRUD own habits' ON habits
FOR ALL USING (auth.uid() = user_id);Projektin pohjustaminen
Kun suunnitelma on valmis, pohjusta Expo-projekti ja määritä heti tärkeimmät perusasiat: TypeScript, ESLint, Prettier, kansiorakenne ja git. Asenna valitsemasi kirjastot ennen ominaisuuskoodin kirjoittamista. Muotoilun ja linttauksen käyttöönotto varhain estää koodikannan sotkeutumisen — niitä on paljon vaikeampi soveltaa valmiiseen 1 000 koodirivin kokonaisuuteen kuin ottaa käyttöön ensimmäiseltä riviltä alkaen.
# Create project with TypeScript template
npx create-expo-app HabitTracker --template expo-template-blank-typescript
cd HabitTracker
# Install core dependencies
npx expo install @react-navigation/native @react-navigation/bottom-tabs \
@react-navigation/stack react-native-screens react-native-safe-area-context
npx expo install @supabase/supabase-js @react-native-async-storage/async-storage
npm install @tanstack/react-query axios
# Linting and formatting
npm install -D eslint eslint-config-expo prettier
# Initialize git
git init && git add -A && git commit -m 'Initial scaffold'Ympäristömuuttujat ja määritykset
Määritä ympäristömuuttujat ennen sellaisen koodin kirjoittamista, joka käsittelee salaisuuksia. Luo paikallista kehitystä varten .env-tiedosto ja lisää se heti tiedostoon .gitignore. Käytä EXPO_PUBLIC_-etuliitettä arvoille, jotka voidaan turvallisesti sisällyttää asiakasohjelman pakettiin (julkiset API-avaimet), ja säilytä aidosti salaiset arvot (palvelurooliavaimet) ainoastaan EAS Secretsissa. Älä koskaan vie API-avainta tai muuta salaisuutta git-repositorioon.
// .env (create this, add to .gitignore)
EXPO_PUBLIC_SUPABASE_URL=https://xyzcompany.supabase.co
EXPO_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5...
// src/services/supabase.ts
import { createClient } from '@supabase/supabase-js';
import AsyncStorage from '@react-native-async-storage/async-storage';
const supabaseUrl = process.env.EXPO_PUBLIC_SUPABASE_URL!;
const supabaseAnonKey = process.env.EXPO_PUBLIC_SUPABASE_ANON_KEY!;
export const supabase = createClient(supabaseUrl, supabaseAnonKey, {
auth: {
storage: AsyncStorage,
autoRefreshToken: true,
persistSession: true,
},
});TypeScript-tyyppien määrittäminen
Määritä keskeiset TypeScript-tyypit src/types/-kansiossa ennen komponenttien tai palveluiden kirjoittamista. Tietokantataulujen tyypit (Habit, Completion), navigointiproppien tyypit (näyttöjen parametriluettelot) ja API-vastausten tyypit muodostavat yhteisen sopimuksen koodikannan kaikkien osien välille. Supabase CLI voi luoda tyypit automaattisesti skeemasi perusteella komennolla supabase gen types typescript, mikä säästää huomattavasti manuaalista työtä.
// src/types/index.ts
export interface Habit {
id: string;
user_id: string;
name: string;
icon: string;
color: string;
reminder_time: string | null;
created_at: string;
}
export interface Completion {
id: string;
habit_id: string;
completed_date: string; // YYYY-MM-DD
created_at: string;
}
// Navigation param list
export type AppStackParamList = {
HabitList: undefined;
HabitDetail: { habitId: string };
CreateHabit: undefined;
};
// Generate from Supabase schema:
// npx supabase gen types typescript --project-id <id> > src/types/supabase.tsOminaisuuksien kehitysjärjestyksen suunnittelu
Rakenna ominaisuudet niiden riippuvuuksien mukaisessa järjestyksessä: autentikointi ennen tietonäyttöjä (tietonäytöt tarvitsevat käyttäjätunnuksen), navigointirunko ennen yksittäisiä näyttöjä, API-kerros ennen käyttöliittymää (jotta voit testata tiedonkulun ennen tyylittelyä) ja ydintoiminto ennen viimeistelyä (suoratoisto ja ulkoasu). Hyvä ensimmäisen viikon suunnitelma: päivä 1 — autentikointikulku; päivä 2 — navigoinnin runko; päivät 3–4 — tapojen CRUD-toiminnot; päivä 5 — suoritukset ja putkilogiikka; päivät 6–7 — ilmoitukset ja viimeistely.
// HabitTracker development order:
// Sprint 1 (Foundation):
// 1. Auth screens + Supabase auth
// 2. Root navigator (auth/app switch)
// 3. Tab navigator + placeholder screens
// 4. Supabase client + React Query setup
// Sprint 2 (Core Feature):
// 5. Habits API (create, read, delete)
// 6. HabitList screen + HabitCard component
// 7. Completions API (toggle check-in)
// 8. Streak calculation logic
// Sprint 3 (Polish):
// 9. Calendar view for habit history
// 10. Stats screen
// 11. Push notifications setup
// 12. Animations on check-inPikakertaus
Testaa ymmärryksesi tämän oppitunnin React Native -mobiilikehityksen käsitteistä.
Oppitunnin yhteenveto
Tässä oppitunnissa opit määrittämään sovellukselle selkeän laajuuden ja siirtämään epäolennaiset ominaisuudet versioon 2, valitsemaan backendin, navigointimallin ja tilanhallintatavan sovelluksen vaatimusten perusteella sekä suunnittelemaan tietokantaskeeman ja kansiorakenteen ennen ominaisuuskoodin kirjoittamista. Näit myös, miten projekti pohjustetaan sopivilla riippuvuuksilla ja tyypeillä heti alusta alkaen. Seuraavaksi toteutamme autentikointikulun ja suojatut reitit.
Opi JavaScript tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 30
- Oppitunnit
- 120
Usein kysytyt kysymykset
Onko oppitunti ”Arkkitehtuurin ja teknologiapinon suunnittelu” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa React Native Academy-oppimispolun 3 oppituntia, myös oppitunnin “Arkkitehtuurin ja teknologiapinon suunnittelu”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. React Native Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Arkkitehtuurin ja teknologiapinon suunnittelu”?
Määrittäkää sovelluksen idea, valitkaa backend-ratkaisu (Supabase tai Firebase), valitkaa navigointirakenne, päättäkää tilanhallintatavasta ja alustakaa projekti sopivalla kansiorakenteella. Harjoittelet React Native Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni React Native Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin React Native Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.
Kuinka kauan ”Arkkitehtuurin ja teknologiapinon suunnittelu”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä React Native Academy-oppitunnilla?
Kyllä. Jokainen React Native Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Arkkitehtuurin ja teknologiapinon suunnittelu
- Todennusprosessi ja suojatut reitit
- Ydintoiminto: tietosyöte offline-tuella
- Viimeistely, testaus ja julkaisu molemmissa kaupoissa