Introduktion

Vad du bygger

En direkt länk mellan ditt Lovable-projekt i webbläsaren och din egen dator med kodverktyget Cursor. Du skapar en flexibel arbetsmiljö där du kan läsa, ändra och felsöka din applikations råkod med hjälp av en kraftfull AI-assistent, samtidigt som dina ändringar sparas och körs sömlöst på webben.

Innan du börjar

• Ett aktivt projekt i Lovable som du vill arbeta vidare med.
• Ett gratis konto på GitHub för att hantera din kod på ett säkert sätt.
• Programmet Cursor installerat på din Mac eller Windows-dator.
• Grundläggande vana av att navigera i din app i webbläsaren.

Steg för steg

1. Koppla till GitHub – Klicka på GitHub-integrationen i Lovables övre meny och följ stegen för att skapa ett nytt kodarkiv för ditt projekt.
2. Starta Cursor – Öppna programmet Cursor på din dator och logga in för att aktivera de intelligenta funktionerna.
3. Klona koden – Välj alternativet att klona ett befintligt projekt, välj ditt nyskapade GitHub-arkiv i listan och spara filerna i en mapp på din hårddisk.
4. Öppna AI-chatten – Tryck på tangenterna Cmd + L på Mac eller Ctrl + L på Windows för att öppna den inbyggda AI-panelen till höger på skärmen.
5. Fråga din kodbas – Skriv en fråga i fältet och använd sökfunktionen @Codebase för att låta AI:n läsa igenom hela ditt projekt innan den svarar.

Förklara hur kodfilerna hänger ihop i det här projektet och var jag hittar koden för startsidan.

6. Spara dina ändringar – Klicka på "Save" eller tryck på genvägen Cmd + S / Ctrl + S så fort du har låtit AI:n göra en justering i en fil.
7. Skicka tillbaka koden – Klicka på källkontrolls-ikonen i Cursors vänstra meny (den ser ut som tre sammankopplade punkter), skriv en kort kommentar i textfältet, klicka på bocken för att spara lokalt (Commit) och klicka sedan på knappen för att skicka upp ändringarna (Push) till GitHub.

Byggloftets tips

• Använd rätt verktyg till rätt sak. Lovable är utmärkt när du vill bygga upp de stora dragen i din app snabbt. Växla över till Cursor när du stöter på begränsningar i webbläsaren eller vill finjustera en krånglig detalj.
• Fråga alltid varför. När du låter AI:n skriva eller ändra på din kod, be den alltid att förklara sina ändringar. Vår maskot Bygge brukar påminna oss om att man lär sig bäst när man är lite nyfiken.
• Låt autosync sköta synkroniseringen. När du skickar tillbaka din uppdaterade kod till GitHub kommer Lovable automatiskt att bygga om din app, så att du kan se dina ändringar live nästan direkt.

Vanliga fel

• Redigering på två ställen samtidigt: Om du gör ändringar i Lovables webbgränssnitt samtidigt som du skriver kod i Cursor kan det uppstå krockar (så kallade merge conflicts). Gör som regel att bara ändra på ett ställe i taget och hämta alltid hem de senaste ändringarna till datorn innan du börjar.
• "Ändringarna syns inte på min live-sida": Du har troligen sparat filen på datorn men glömt att skicka upp ändringarna till GitHub. Dubbelkolla att du har gjort både en "Commit" och en "Push" i Cursors källkontroll.
• "Cursor förstår inte mina filer": Det beror oftast på att du glömt att inkludera hela din kod i frågan. Kom ihåg att skriva @Codebase i chatten så att AI:n inte bara gissar, utan faktiskt läser koden i ditt projekt.

Du är klar när…

Du har öppnat ditt projekt i Cursor på din dator, ställt en fråga till AI-chatten och skickat en ändring tillbaka till GitHub så att din live-app uppdateras automatiskt.