Appvisare

Vad är App Viewer?

När AI Agents slutför en uppgift visas App Viewer högst upp på sidan. Den låter dig förhandsgranska din live-app och göra visuella ändringar direkt — ingen kodning krävs.

Innan du börjar

• Agent-bearbetning kan ta en stund — vänta tålmodigt.
• Kontrollera Terminal-panelen till höger för detaljerad status. Terminal-panelen visar loggar i realtid över vad AI Agent gör, inklusive filskapande, kodgenerering och eventuella fel som uppstår under byggprocessen.
• Klicka på ikonen Uppdatera när som helst för att läsa in förhandsgranskningen på nytt.

Så använder du App Viewer

Steg 1: Vänta tills förhandsgranskningen har lästs in

När Agents är klara läser App Viewer in din förhandsgranskning i huvudfönstret för förhandsgranskning.

⏱️ Tar vanligtvis från några sekunder upp till en minut.

Om det tar längre än 2 minuter: Klicka på ikonen Uppdatera i verktygsfältet i App Viewer. Om den fortfarande har fastnat, kontrollera Terminal-panelen för fel (se steg 3 nedan).

Steg 2: Förhandsgranska din app

När den har lästs in kan du se din live-app i förhandsgranskningsfönstret.

• Desktop / Tablet / Mobile — Använd enhetsverktygsfältet högst upp i förhandsgranskningsfönstret för att växla mellan vyer och testa responsivitet. Verktygsfältet visar tre ikoner som representerar stationär dator, surfplatta och mobil. Klicka på varje ikon för att se hur din app ser ut på olika skärmstorlekar utan att lämna sidan.
• Öppna i ny flik— Klicka på pilikonen i det övre högra hörnet av förhandsgranskningsfönstret för att öppna förhandsgranskningen i en separat webbläsarflik. Detta är särskilt användbart om den inbäddade förhandsgranskningen har fastnat eller inte svarar.

Steg 3: Kontrollera fel (om något ser fel ut)

Om din app inte läses in eller ser trasig ut, kontrollera Console-panelen för felmeddelanden.

Console-panelen finns på höger sida av skärmen, under fliken Terminal. Den visar systemloggar och felmeddelanden som genereras under byggprocessen.

Om du ser röda felmeddelanden innehåller de vanligtvis:

• En beskrivning av vad som gick fel
• Filen och radnumret där felet uppstod
• En stackspårning som hjälper till att identifiera grundorsaken

Så här åtgärdar du felen: (För mer information, se: Issue Report)

• Klicka på "Resolve" — AI kommer att analysera och åtgärda alla identifierade buggar automatiskt.
• Förhandsgranskningen läses in igen när korrigeringarna har tillämpats. Du kan övervaka statusen i realtid via Terminal-panelen.

Ingen "Resolve"-knapp?

Klicka på "..." (fler alternativ) bredvid Agentens senaste meddelande och välj sedan "Feedback" för att rapportera problemet till vårt supportteam. Inkludera gärna din Chat Link och en skärmbild av felet.

Steg 4: Ändra din app

Metod 1: Klicka för att redigera (rekommenderas för visuella ändringar)

Klicka direkt på valfritt element i förhandsgranskningsfönstret. En visuell redigerare visas på vänster sida av skärmen, där du kan justera:

• Färger — Ändra textfärg, bakgrundsfärg eller kantfärg med en färgväljare
• Avstånd — Justera padding, marginal och mellanrum mellan element
• Typografi — Ändra teckenstorlek, vikt och teckensnittsfamilj
• Layout — Ändra justering, flexbox-inställningar eller grid-egenskaper
• Textinnehåll — Redigera text direkt i redigeraren

När du gör en ändring uppdateras förhandsgranskningen direkt så att du kan se resultatet i realtid.

Den visuella redigeraren innehåller också en flik för Library där du kan bläddra bland och lägga till färdiga resurser som ikoner, bilder och UI-komponenter i ditt projekt.

Metod 2: Beskriv i chatten

Berätta för AI Agent vad du vill ändra med naturligt språk. Till exempel:

• "Gör bakgrundsfärgen mörkare"
• "Minska padding runt sidhuvudet"
• "Ändra knappfärgen till blå"

AI kommer att förstå din begäran och tillämpa ändringarna på din app.

Snabbreferens

• Uppdatera förhandsgranskning – Klicka på ikonen Uppdatera i verktygsfältet i App Viewer för att läsa in förhandsgranskningsfönstret på nytt.
• Byt enhetsvy – Använd ikonerna Desktop, Tablet eller Mobile i verktygsfältet för förhandsgranskning för att testa hur din app ser ut på olika skärmstorlekar.
• Öppna i ny flik – Klicka på pilikonen i det övre högra hörnet av förhandsgranskningsfönstret för att öppna förhandsgranskningen i en separat webbläsarflik.
• Visa felloggar – Kontrollera Console-panelen på höger sida av skärmen för felmeddelanden och systemloggar.
• Åtgärda fel automatiskt – Klicka på knappen "Resolve" i aviseringen för Issue Report för att låta AI åtgärda alla identifierade buggar.
• Redigera visuella element – Klicka på valfritt element i förhandsgranskningsfönstret för att öppna den visuella redigeraren på vänster sida.
• Rapportera ett problem – Klicka på "..." → "Feedback" i valfritt Agent-meddelande för att rapportera problem till supportteamet.

Vanliga frågor

Varför visar min App Viewer en laddningsskärm?

Laddningsvyn betyder att webbplatsen håller på att läsas in. App Viewer fungerar normalt. Vänta en stund så att förhandsgranskningen hinner läsas in korrekt. Om det tar längre än 2 minuter kan du prova att klicka på ikonen Uppdatera eller kontrollera Console-panelen för fel.

Varför visar min App Viewer röda felmeddelanden?

Agents kan stöta på problem under byggprocessen, vilket ibland kan orsaka fel på webbsidan. Klicka på "Resolve", så kommer Agents att reparera felet åt dig. När det har åtgärdats kommer App Viewer att förhandsgranska normalt, så du behöver inte oroa dig för att röda felmeddelanden visas.

Varför kan jag inte ta bort Atoms-märket från min publicerade sida?

För att ta bort märket krävs Pro eller högre. Du kan uppgradera när som helst från Settings → Plans & Billing. Efter uppgradering tas märket automatiskt bort från dina publicerade sidor.

För att uppgradera klickar du på din avatar i det övre högra hörnet, väljer Settings och går sedan till Plans & Billing. Välj planen Pro eller Max och slutför uppgraderingsprocessen. När uppgraderingen är klar visas inte längre Atoms-märket på dina publicerade sidor.