App Viewer

Wat is App Viewer?

Wanneer AI Agents een taak voltooien, verschijnt de App Viewer bovenaan de pagina. Hiermee kun je een voorbeeld van je live app bekijken en direct visuele bewerkingen aanbrengen — geen codering vereist.

Voordat je begint

• De verwerking door de Agent kan even duren — wacht alsjeblieft geduldig.
• Controleer het Terminal-paneel aan de rechterkant voor gedetailleerde voortgang. Het Terminal-paneel toont realtime logs van wat de AI Agent doet, inclusief het aanmaken van bestanden, codegeneratie en eventuele fouten die tijdens het buildproces optreden.
• Klik op elk moment op het pictogram Vernieuwen om het voorbeeld opnieuw te laden.

App Viewer gebruiken

Stap 1: Wacht tot het voorbeeld is geladen

Nadat Agents klaar zijn, laadt de App Viewer je voorbeeld in het hoofdvenster voor voorbeeldweergave.

⏱️ Duurt meestal enkele seconden tot een minuut.

Als het langer dan 2 minuten duurt: klik op het pictogram Vernieuwen in de werkbalk van de App Viewer. Als het nog steeds vastloopt, controleer dan het Terminal-paneel op fouten (zie stap 3 hieronder).

Stap 2: Bekijk een voorbeeld van je app

Zodra deze is geladen, kun je je live app zien in het voorbeeldvenster.

• Desktop / Tablet / Mobiel — Gebruik de apparaatwerkbalk bovenaan het voorbeeldvenster om tussen weergaven te schakelen en de responsiviteit te testen. De werkbalk toont drie pictogrammen voor desktop-, tablet- en mobiele apparaten. Klik op elk pictogram om te zien hoe je app eruitziet op verschillende schermformaten zonder de pagina te verlaten.
• Openen in nieuw tabblad— Klik op het pijlpictogram in de rechterbovenhoek van het voorbeeldvenster om het voorbeeld in een apart browsertabblad te openen. Dit is vooral handig als het ingesloten voorbeeld vastloopt of niet reageert.

Stap 3: Controleer op fouten (als er iets niet klopt)

Als je app niet laadt of er kapot uitziet, controleer dan het Console-paneel op foutmeldingen.

Het Console-paneel bevindt zich aan de rechterkant van het scherm, onder het tabblad Terminal. Het toont systeemlogs en foutmeldingen die tijdens het buildproces worden gegenereerd.

Als je rode foutmeldingen ziet, bevatten deze doorgaans:

• Een beschrijving van wat er misging
• Het bestand en regelnummer waar de fout optrad
• Een stack trace om de hoofdoorzaak te helpen identificeren

Om de fouten op te lossen: (Zie voor meer informatie: Probleemrapport)

• Klik op "Resolve" — de AI analyseert en verhelpt automatisch alle geïdentificeerde bugs.
• Het voorbeeld wordt opnieuw geladen zodra de oplossingen zijn toegepast. Je kunt de voortgang in realtime volgen via het Terminal-paneel.

Geen knop "Resolve"?

Klik op de "..." (meer opties) naast het nieuwste bericht van de Agent en selecteer vervolgens "Feedback" om het probleem aan ons supportteam te melden. Voeg je Chat Link en een screenshot van de fout toe.

Stap 4: Wijzig je app

Methode 1: Klik om te bewerken (aanbevolen voor visuele wijzigingen)

Klik direct op een element in het voorbeeldvenster. Er verschijnt een visuele editor aan de linkerkant van het scherm, waarmee je het volgende kunt aanpassen:

• Kleuren — Wijzig tekstkleur, achtergrondkleur of randkleur met een kleurkiezer
• Afstand — Pas padding, marge en ruimte tussen elementen aan
• Typografie — Wijzig lettergrootte, gewicht en familie
• Lay-out — Wijzig uitlijning, flexbox-instellingen of grilleigenschappen
• Tekstinhoud — Bewerk tekst direct in de editor

Zodra je een wijziging aanbrengt, wordt het voorbeeld direct bijgewerkt zodat je het resultaat realtime kunt zien.

De visuele editor bevat ook een tabblad Library waar je vooraf gebouwde assets zoals pictogrammen, afbeeldingen en UI-componenten voor je project kunt bekijken en toevoegen.

Methode 2: Beschrijf het in de chat

Vertel de AI Agent met natuurlijke taal wat je wilt veranderen. Bijvoorbeeld:

• "Maak de achtergrondkleur donkerder"
• "Verklein de padding rond de koptekst"
• "Verander de knopkleur naar blauw"

De AI begrijpt je verzoek en past de wijzigingen toe op je app.

Snelle referentie

• Voorbeeld vernieuwen – Klik op het pictogram Vernieuwen in de werkbalk van de App Viewer om het voorbeeldvenster opnieuw te laden.
• Apparaatweergave wisselen – Gebruik de pictogrammen Desktop, Tablet of Mobiel in de voorbeeldwerkbalk om te testen hoe je app eruitziet op verschillende schermformaten.
• Openen in nieuw tabblad – Klik op het pijlpictogram in de rechterbovenhoek van het voorbeeldvenster om het voorbeeld in een apart browsertabblad te openen.
• Foutlogs bekijken – Controleer het Console-paneel aan de rechterkant van het scherm op foutmeldingen en systeemlogs.
• Fouten automatisch oplossen – Klik op de knop "Resolve" in de melding van het Probleemrapport om de AI alle geïdentificeerde bugs te laten oplossen.
• Visuele elementen bewerken – Klik op een willekeurig element in het voorbeeldvenster om de visuele editor aan de linkerkant te openen.
• Een probleem melden – Klik op "..." → "Feedback" bij een bericht van een Agent om problemen aan het supportteam te melden.

FAQ

Waarom toont mijn App Viewer een laadscherm?

De laadweergave betekent dat de website aan het laden is. De App Viewer functioneert normaal. Wacht even tot het voorbeeld correct is geladen. Als het langer dan 2 minuten duurt, probeer dan op het pictogram Vernieuwen te klikken of controleer het Console-paneel op fouten.

Waarom toont mijn App Viewer rode foutmeldingen?

Agents kunnen tijdens het buildproces problemen tegenkomen, wat af en toe fouten op de webpagina kan veroorzaken. Klik op "Resolve" en de Agents zullen de fout voor je herstellen. Zodra dit is opgelost, zal App Viewer normaal een voorbeeld tonen, dus je hoeft je geen zorgen te maken als er rode foutmeldingen verschijnen.

Waarom kan ik de Atoms-badge niet van mijn gepubliceerde pagina verwijderen?

Voor het verwijderen van badges is Pro of hoger vereist. Je kunt op elk moment upgraden via Instellingen → Plannen en facturering. Na het upgraden wordt de badge automatisch van je gepubliceerde pagina's verwijderd.

Om te upgraden klik je op je avatar in de rechterbovenhoek, selecteer je Instellingen en ga je vervolgens naar Plannen en facturering. Kies het Pro- of Max-abonnement en voltooi het upgradeproces. Na de upgrade verschijnt de Atoms-badge niet langer op je gepubliceerde pagina's.