Vad du bygger
Du bygger en levande och interaktiv att-göra-lista där dina användare kan spara, bocka av och ta bort uppgifter. Eftersom sidan kopplas ihop med din databas sparas allt på riktigt, vilket gör att uppgifterna ligger kvar även om du laddar om webbläsaren eller loggar ut.
Innan du börjar
- Ett aktivt konto på Lovable med ditt pågående projekt öppet.
- En fungerande databas via Supabase som är kopplad till ditt Lovable-projekt.
- Grundläggande inloggning (autentisering) installerad på din sajt så att vi vet vem som sparar vad.
Steg för steg
- Skriv instruktionen i chatten – Öppna chattverktyget i Lovable och berätta för AI-verktyget att du vill bygga en ny sida kopplad till databasen.
Skapa en ny sida på adressen /todos. Här ska inloggade användare kunna se sina egna todos i en lista. De ska kunna lägga till nya, bocka av dem och radera dem. Lägg nya todos längst upp och gör designen snygg och mobilvänlig.
-
Godkänn filförändringarna – När Lovable har skrivit koden ser du en lista över skapade eller ändrade filer. Klicka på den gröna godkänn-knappen i chatten för att spara ändringarna i ditt projekt.
-
Tillåt databasmigreringar – Om Lovable behöver skapa en ny tabell i din Supabase-databas för dina todos kommer verktyget att be om lov. Godkänn att ändringarna skrivs till databasen genom att klicka på knappen för att köra migrationen.
-
Publicera din nya version – Klicka på "Publish"-knappen längst upp till höger i gränssnittet för att skicka ut de nya funktionerna till din skarpa hemsida.
-
Logga in på sajten – Klicka på länken till din publicerade app, navigera till din nya /todos-sida och logga in med ditt testkonto.
-
Testa funktionen ordentligt – Skriv in en uppgift och spara den. Testa att bocka av den så att den blir gråmarkerad, och prova att radera en annan. Ladda sedan om sidan i webbläsaren för att kontrollera att din data ligger kvar precis som du lämnade den.
Byggloftets tips
- Optimistiska uppdateringar: Be Lovable att uppdatera gränssnittet direkt när användaren klickar, och spara till databasen i bakgrunden. Det gör att appen känns mycket snabbare eftersom användaren slipper vänta på databassvaret.
- Tänk på tomma lägen: Det är tråkigt med en helt vit skärm första gången man loggar in. Vår maskot Bygge påminner om att be Lovable bygga en trevlig välkomstsida med en text som "Här var det tomt, dags att planera dagen" istället för en tom yta.
- Dra ihop fönstret: Testa alltid din app i mobilformat direkt i webbläsaren genom att göra fönstret smalt. Det är på mobilen dina användare kommer att vilja bocka av sina uppgifter på språng.
Vanliga fel
- "Row not found" eller tom lista trots att du sparar: Detta beror på att databasens säkerhetsregler (RLS) blockerar läsning. Be Lovable att kontrollera att det finns en RLS-policy på din todo-tabell som tillåter inloggade användare att läsa sina egna rader.
- Uppgfter försvinner vid omladdning: Appen sparar troligen bara uppgifterna i webbläsarens tillfälliga minne. Be Lovable skriva om koden så att varje ny uppgift skickas via Supabase-klienten med en INSERT-fråga.
- Sidan reagerar långsamt när du sparar: Appen väntar på ett långsamt svar från servern innan den visar den nya uppgiften. Se tipset om optimistiska uppdateringar för att lösa detta.
Du är klar när…
Du ser din nya att-göra-lista på skärmen, kan lägga till en uppgift, ladda om webbsidan och se att din uppgift fortfarande ligger kvar precis som du skrev den.
