Hvordan bygge en treningsspor-app med relasjonsdatabaser

I denne delen av boken skal vi utforske hvordan Bolt kan hjelpe oss med å bygge en mer datadrevet applikasjon, der hovedfokuset er å bruke en database (Supabase) for å lagre og hente strukturert informasjon. I motsetning til den forrige applikasjonen (filmappen), der dataene hovedsakelig kom fra en ekstern API, vil den sentrale funksjonen her være appens egne data i form av treningslogger. Målet er å lage et funksjonelt treningssporingssystem som lar brukerne opprette, administrere og se treningsøktene sine.

Planlegging av dataskjemaet

Før vi begynner å kode, er det viktig å designe hvordan vi skal lagre treningsøktene i Supabase. En godt planlagt datamodell gjør det lettere å hente og administrere data etter hvert som appen vokser. Vi velger å bruke en relasjonell tilnærming med to tabeller: workout_sessions (treningsøktene) og workout_exercises (øvelsene). Dette skaper et en-til-mange forhold, der én treningsøkt kan inneholde flere øvelser. Dette designet gir flere fordeler:

• Ryddig organisering av dataene.

• Lett å aggregere treningsdata.

• Fleksibilitet til å legge til nye funksjoner senere.

• God normalisering som unngår datadublisering.

Sette opp tabellene i Supabase

1. Gå til Tabellredigereren i Supabase.

2. Opprett tabellen workout_sessions med feltene fra tidligere beskrevet skjema.

3. Opprett tabellen workout_exercises med feltene fra skjemaet for øvelsene.

4. Sett opp en fremmednøkkelbegrensning fra workout_exercises.session_id til workout_sessions.id, med CASCADE ved sletting. Dette sikrer at når en treningsøkt slettes, fjernes også de tilknyttede øvelsene.

Implementering av radnivåsikkerhet (RLS)

Radnivåsikkerhet (RLS) er avgjørende for å sikre at brukerne kun har tilgang til sine egne data. For å sette opp RLS i Supabase, må vi opprette en policy for både workout_sessions og workout_exercises.

For workout_sessions tabellen oppretter vi en policy som sikrer at brukeren kun kan se og redigere sine egne treningsøkter. Dette gjøres ved å sjekke at brukerens ID stemmer overens med user_id i tabellen. For workout_exercises tabellen kobler vi øvelsene til treningsøktene, og oppretter en policy som sjekker at øvelsen tilhører en treningsøkt som eies av den aktuelle brukeren.

Bygge treningssporing-appen

Nå som vi har designet datamodellen og satt opp sikkerheten, kan vi begynne å bygge appen ved hjelp av Bolt.

Først må vi sette opp appen ved å bruke en klar prompt til Bolt: "Opprett en ny React web-applikasjon kalt Workout Tracker. Bruk Supabase for autentisering og datalagring. Appen bør bruke to relaterte tabeller: workout_sessions og workout_exercises." Dette gir Bolt den nødvendige informasjonen for å generere kode som passer til den relasjonelle datamodellen vi har laget.

Deretter implementerer vi autentisering med Supabase. Dette innebærer at brukerne må logge inn med e-post og passord før de kan bruke appen. Etter innlogging blir brukeren videresendt til treningsdashbordet hvor de kan opprette og administrere treningsøktene sine.

Opprette treningsøkter

Vise treningshistorikk

For å vise treningshistorikk, må vi hente data fra begge tabellene. Dette gjøres ved hjelp av en SQL-spørring som kobler sammen workout_sessions og workout_exercises tabellene. Øktene vises i rekkefølge etter dato, og for hver økt vises en liste over de tilknyttede øvelsene, med informasjon om sett, repetisjoner og vekt.

I tillegg kan vi tilby noen valgfri funksjoner som:

• Visualisere treningsfremgang med diagrammer.

• Oppdatere i sanntid på tvers av enheter.

• Bruke Edge Functions for server-side beregninger som fremgangsanalyser.

Dette gir brukerne en dynamisk og interaktiv opplevelse som gjør det enkelt å følge med på fremgangen i treningsrutinen.

Det er viktig å forstå at selv om vi har laget en funksjonell applikasjon, er det alltid rom for videreutvikling. For eksempel, når applikasjonen vokser, kan du vurdere å legge til mer avanserte funksjoner som treningsmål, påminnelser, eller integrering med eksterne enheter som fitness-trackere. Sikkerheten bør også kontinuerlig vurderes, spesielt når det gjelder personopplysninger og datatilgang. Den relasjonelle tilnærmingen til datamodellen gjør det lettere å skalere og legge til nye funksjoner uten å måtte endre fundamentalt på datalagringen.

Ved å følge de beste praksisene for databasetilgang, autentisering og sikkerhet, kan du bygge en solid app som tilbyr verdifull funksjonalitet for brukerne.

Hvordan StackBlitz Forbedrer Programmeringsprosessen for Bolt-brukere

I dagens utviklingsverden blir det stadig viktigere å finne verktøy som både er enkle å bruke og som kan gi full kontroll over applikasjonene vi bygger. StackBlitz er et slikt verktøy, spesielt for de som allerede har benyttet seg av Bolt for å generere applikasjoner. Med enkle og intuitive løsninger som ikke krever omfattende state management eller autentisering, gir Bolt et solid grunnlag for rask utvikling. Men når det er på tide å ta kontroll over prosjektet og utvikle det videre på en mer hands-on måte, er StackBlitz et ideelt valg.

StackBlitz er en nettleserbasert utviklingsplattform som lar deg jobbe direkte med koden din i en skybasert editor. Det er som å bruke Google Docs for programmering – du kan skrive, teste og kjøre koden din uten å måtte installere noe på din egen maskin. Alt skjer i sanntid i nettleseren, og du unngår de vanlige frustrasjonene med at applikasjonen "kun virker på min maskin". Dette er mulig på grunn av WebContainers, en teknologi som gjør det mulig å kjøre server-side kode direkte i nettleseren.

Når du tar et Bolt-prosjekt og overfører det til StackBlitz, går du fra en AI-drevet utviklingsprosess til en mer tradisjonell, kodebasert tilnærming. Dette betyr at du må være kjent med programmeringsspråkene som benyttes, som JavaScript eller TypeScript, samt HTML og CSS, eller være villig til å lære. Bolt har allerede laget en solid mal for deg, men for å virkelig forstå og tilpasse applikasjonen, vil du nå måtte dykke inn i koden.

StackBlitz gjør utviklingsprosessen mer tilgjengelig ved å eliminere de vanlige barrierene som kan være overveldende for nybegynnere, som å sette opp en utviklingsserver eller installere Node.js. I stedet kan du åpne en StackBlitz-editor og komme i gang med en gang. Det er også mulig å installere pakker ved hjelp av npm, på samme måte som du ville gjort på din lokale maskin, alt skjer i det sikre miljøet som WebContainer-teknologien gir. Denne løsningen gjør at alle som åpner prosjektet ser det samme, uavhengig av hvilken maskin de bruker.

WebContainers gir utviklere et isolert arbeidsmiljø hvor koden kan kjøres uten å påvirke brukerens lokale system. Dette gir trygghet til å eksperimentere med nye pakker, funksjoner og innstillinger uten frykt for at det vil skade den faktiske maskinen. Når du bruker StackBlitz, er alle operasjoner som kjøring av servere, installasjon av biblioteker og testing helt isolerte fra systemet ditt, noe som betyr at du kan lære og utvikle uten risiko.

Overgangen fra Bolt til StackBlitz markerer en viktig fase i læringsprosessen for utviklere. Der Bolt er designet for å raskt lage prototyper og applikasjoner ved hjelp av AI, gir StackBlitz deg muligheten til å ta kontrollen over hele utviklingsprosessen. Her kan du tilpasse hver detalj av prosjektet ditt, fra å legge til nye ruter i serveren til å justere hvordan data blir håndtert. StackBlitz er ideelt for dem som ønsker å utvikle seg videre, lære mer om programmering og samtidig bygge på et solid grunnlag.

Når du har kommet til et punkt hvor du ønsker å integrere flere funksjoner i applikasjonen din, som eksterne API-er eller autentisering, gir StackBlitz deg de verktøyene du trenger for å implementere disse endringene på en trygg og effektiv måte. Ved å bruke eksterne tjenester som Supabase eller Stripe, kan du integrere deres funksjonalitet direkte i applikasjonen, og alt vil kjøre i et sikkerhetssandkassemiljø i nettleseren.

For de som er nye innen programmering, gir StackBlitz en trygg vei å gå fra en AI-drevet utviklingsprosess til en mer praktisk og direkte tilnærming til kode. Du vil lære hvordan kode fungerer på en grunnleggende nivå, og ved å gjøre endringer direkte i koden kan du raskt se hvordan de påvirker appens funksjonalitet. Selv om du ikke er en ekspert på JavaScript, er StackBlitz et utmerket sted å begynne å forstå de mer komplekse aspektene ved applikasjonsutvikling.

Det er også verdt å merke seg at StackBlitz ikke nødvendigvis er en erstatning for Bolt, men heller et komplement. Bolt er fremdeles et fantastisk verktøy for raskt å bygge applikasjoner, men StackBlitz gir deg dybden og kontrollen som er nødvendig når du ønsker å bygge videre på det du har laget. Når ferdighetene dine utvikles, vil du finne at StackBlitz er en uvurderlig plattform for å ta applikasjonen fra prototype til et fullt utviklet produkt.