Bouw en publiceer je eerste Atoms-app, van je eerste prompt tot een live versie die je kunt delen.

Je hoeft niet elke agent, modus of technische term te leren voordat je begint. De basisworkflow is veel eenvoudiger: vertel Atoms wat je wilt, controleer wat het heeft gebouwd, breng wijzigingen aan, test het en publiceer wanneer het klaar is.

Deze gids gebruikt een eenvoudige caféwebsite als voorbeeld, maar dezelfde cyclus werkt voor een landingspagina, dashboard, interne tool of je eigen app-idee.

Deze stappen behandelen een desktop-webproject waarvoor je bent aangemeld. Mobiele projecten gebruiken een aparte mobiele build- en distributiestroom.

Wacht vóór het publiceren tot de huidige build is voltooid, zorg ervoor dat je publicatietoegang hebt, bevestig dat het project inactief is en controleer of vereiste projectbronnen zoals credits of opslag beschikbaar zijn. Als Publish niet beschikbaar is, controleer dan de projectversie, toegang en resourcevoorwaarden voordat je het opnieuw probeert. Projecten die data, secrets, e-mails, AI, betalingen of andere verbonden services gebruiken, hebben ook hun productiecontroles nodig voordat je ze deelt.

Beschrijf wat je wilt

Begin in het promptvak en beschrijf het resultaat dat je wilt in gewone taal. Je hoeft geen technische specificaties te schrijven of Atoms te vertellen hoe het het moet coderen.

Een nuttige eerste prompt vermeldt meestal wat je bouwt, de hoofdsecties of functies, de visuele richting en alles wat belangrijk is op mobiel.

Als je in App World al iets hebt gevonden dat in de buurt komt van wat je wilt, kun je ook beginnen door dat project te remixen in plaats van vanaf nul te starten.

Controleer het eerste resultaat

Atoms maakt het project aan en bouwt een eerste versie. Wanneer die klaar is, open je de App Viewer en bekijk je het resultaat voordat je om meer wijzigingen vraagt.

Doe eerst een snelle controle. Je probeert nog niet elk klein probleem te vinden. Controleer of Atoms het hoofdidee heeft begrepen.

• Zijn de hoofdsecties en functies aanwezig?
• Komt de algemene lay-out overeen met wat je hebt gevraagd?
• Reageren de belangrijke knoppen, links, filters of andere interacties?
• Ontbreekt er iets duidelijk, is er iets kapot of anders dan je bedoelde?

Je kunt een voorbeeld van de app bekijken in zowel pc- als mobiele modus, dus controleer de ervaring op meer dan één schermgrootte voordat je verdergaat.

Breng wijzigingen aan

Behandel de eerste versie als een startpunt. Vertel de agent in gewone taal wat je wilt veranderen en controleer daarna het resultaat opnieuw.

Kleine, specifieke verzoeken zijn meestal gemakkelijker te beoordelen dan alles tegelijk veranderen.

Voor visuele wijzigingen kun je elementen direct in de App Viewer bewerken of de wijziging aan de agent beschrijven. Als je een screenshot, ontwerp, bestand of andere referentie hebt die Atoms moet volgen, upload die dan en wijs de agent erop.

Wanneer er iets kapotgaat: Als iets echt kapot is in plaats van alleen anders dan je voorkeur, gebruik dan Fix Bug of vertel de agent precies wat er mis is en waar het gebeurt.

Als het nog steeds mislukt: Blijf niet hetzelfde verzoek herhalen na één gerichte nieuwe poging. Noteer de betreffende stap, wat je verwachtte, wat er gebeurde, wat je al hebt geprobeerd en een deelbare projectlink of screenshot. Als je een betalende gebruiker bent met een account-, facturerings- of Atoms-platformprobleem, open dan het Atoms Help Center, kies Atoms Support onder Explore resources en selecteer Contact us. Voor gebruikers van het Gratis Plan of voor gewone productinstructies en probleemoplossing begin je met het Help Center, Ask Assistant of de Atoms-community.

Test voordat je publiceert

Voordat je de app naar iemand stuurt, besteed je een paar minuten aan het gebruiken ervan als een echte bezoeker. Een snelle test nu is veel gemakkelijker dan een kapotte link uitleggen nadat je die hebt gedeeld.

• Klik op elke belangrijke knop en link.
• Probeer de interactieve onderdelen, zoals filters, formulieren, menu's of navigatie.
• Controleer zowel de pc- als mobiele weergave.
• Let op tekst die is afgekapt, overlapt, ontbreekt of moeilijk leesbaar is.
• Zorg ervoor dat de belangrijkste gebruikersreis van begin tot eind werkt.

Als je app afhankelijk is van opgeslagen data of backendacties, test die dan ook. Atoms kan Atoms Cloud gebruiken of verbinding maken met Supabase voor mogelijkheden zoals dataopslag, secrets, e-mails, AI-calls en betalingen.

Verwijder vóór het publiceren secrets, wachtwoorden, tokens, persoonlijke informatie en privétestdata uit alles wat bezoekers kunnen zien. Bevestig of het project Public of Private moet zijn en test de live link met het bedoelde account. Als de app echte betalingen, e-mails, opgeslagen data of verbonden services gebruikt, verifieer die productieacties dan afzonderlijk voordat je deelt.

Publiceren

Wanneer de preview er goed uitziet en de belangrijkste interacties werken, klik je op Publish in de rechterbovenhoek van de editor.

Publiceren maakt een live link aan waarvan de toegang afhangt van de zichtbaarheid die je kiest. Public kan via een link worden geopend en kan in Discover verschijnen. Private is alleen zichtbaar voor de eigenaar en kan beperkt zijn door het plan. Selecteer de bedoelde zichtbaarheid voordat je deelt en test de link met het bedoelde account.

Publiceren is het moment waarop je project iets wordt dat andere mensen daadwerkelijk kunnen openen. Blijf ontwikkelen in het project, maar controleer na het publiceren altijd de live versie afzonderlijk.

Verifieer de live app

Open zelf de gepubliceerde link voordat je die deelt. Bevestig dat de geselecteerde zichtbaarheid Public of Private het bedoelde publiek toegang geeft; gebruik een privévenster of het bedoelde account om dit te testen.

• Open de link in een nieuw tabblad of privévenster met het account of de toegangscontext die overeenkomt met het bedoelde publiek.
• Bevestig dat de pagina laadt en de versie toont die je verwachtte.
• Herhaal de belangrijkste klikken of interacties.
• Controleer de pagina op een telefoon als mobiele bezoekers belangrijk zijn voor je app.

Als je een probleem vindt, ga dan terug naar het project, breng de wijziging aan, test de preview opnieuw en werk daarna de live versie bij.

Werk bij nadat je wijzigingen hebt aangebracht

Je app stopt niet met veranderen alleen omdat je die één keer hebt gepubliceerd. Blijf die in het project verfijnen wanneer dat nodig is.

Na de eerste publicatie verandert de knop Publish in Update. Klik op Update wanneer je nieuwe wijzigingen naar de live versie wilt pushen.

Open na een update de gepubliceerde link nog één keer en verifieer die. Dat geeft je een eenvoudige herhaalbare cyclus:

Beschrijven → Controleren → Wijzigen → Testen → Publiceren → Verifiëren → Bijwerken

Dat is de kernworkflow van Atoms. Complexere apps kunnen data, authenticatie, integraties, aangepaste domeinen of meerdere agents toevoegen, maar de build-cyclus blijft hetzelfde.