Näin rakennat sovelluksen vibe codingilla: ideasta julkaistuun sovellukseen

Jotta voit rakentaa sovelluksen vibe codingilla, kirjoita yhden sivun kuvaus ensimmäisestä versiosta, anna se tekoälysovellusrakentajalle ensimmäisenä kehotteena ja kasvata sovellusta pienin testatuin askelin: data, kirjautuminen, pääasiallinen työnkulku, viimeistely, tietoturvatarkistus ja lopuksi julkaisu. Tämä opas seuraa yhtä esimerkkiprojektia, pienen jooga-studion tuntivaraussovellusta, jokaisen vaiheen läpi ja näyttää kehotteet, joita kussakin vaiheessa käytettiin.

Jos et ole koskaan rakentanut mitään tällä tavalla, vibe coding -opas aloittelijoille alkaa pienemmästä. Laajempaa yleiskatsausta, joka ei ole sidottu vibe codingiin, löydät kohdasta kuinka rakennat sovelluksen tekoälyllä.

Projekti

Kuvittele jooga-studion omistaja Sara, joka pitää viikossa kahdeksan tuntia. Varaukset tulevat WhatsAppilla; hän pitää paperilistaa kullekin tunnille ja varaa usein liikaa paikkoja. Hän haluaa:

• Oppilaiden näkevän viikon aikataulun ja voivan varata paikan.
• Jokaisella tunnilla olevan kapasiteetin.
• Listan kullekin tunnille, jonka hän voi tarkistaa ovella.
• Oppilaiden voivan peruuttaa enintään kaksi tuntia ennen tuntia.

Tämä on koko ensimmäinen versio. Ei maksuja, ei jäsenyyksiä, ei sovelluskauppaa. Ne tulevat myöhemmin tai eivät ollenkaan.

Vaihe 1: Kirjoita yhden sivun speksi

Ennen kuin avaat yhtäkään työkalua, kirjoita ensimmäinen versio selkeillä sanoilla muistiin. Kymmenen minuuttia tässä säästää tunteja edestakaisin viestittelyssä. Hyödyllinen rakenne:

• Kuka käyttää: oppilaat (varaavat ja peruuttavat), Sara (hallinnoi tunteja ja näkee listat).
• Näkymät: aikataulu, tunnin tiedot, omat varaukset, ylläpidon tuntilista, ylläpidon tunnin lista.
• Data: tunnit (nimi, opettaja, alkamisaika, kesto, kapasiteetti), varaukset (oppilas, tunti, tila), oppilaat (nimi, sähköposti, puhelin).
• Säännöt: täyteen tuntiin ei voi varata; yksi varaus oppilasta kohden per tunti; peruutus enintään kaksi tuntia ennen; vain Sara näkee ylläpitosivut.
• Ei v1:ssä: maksut, tuntipaketit, odotuslistat, muistutukset.

”Ei v1:ssä” -lista on tärkein. Se pitää rakentamisen valmiina tehtävänä. Jos haluat laajemman speksin, tuotevaatimusten kirjoittaminen tekoälyllä -opas menee pidemmälle.

Vaihe 2: Valitse työkalu, joka hoitaa koko kierron

Tietokantaa, kirjautumisia ja julkista osoitetta vaativaan sovellukseen käytä tekoälysovellusrakentajaa, joka ajaa koodin, liittää tietokannan ja julkaisee, eikä chat-avustajaa, joka antaa sinulle tiedostoja. Vertailumme vibe coding -työkaluista listaa vaihtoehdot. Tässä käytämme Mythexiä, koska se kattaa jokaisen vaiheen yhdessä paikassa: chatin, live-esikatselun, oikean tietokannan ja tiedostotallennuksen sekä yhden napsautuksen julkaisun.

Vaihe 3: Ensimmäinen kehote

Muuta speksi yhdeksi kappaleeksi. Älä liitä koko asiakirjaa kerralla kaikkine yksityiskohtineen; anna ydin ja lisää loput askelittain.

Rakenna tuntivaraussovellus jooga-studiolleni. Oppilaat rekisteröityvät nimellä, sähköpostilla ja puhelinnumerolla, näkevät tämän viikon aikataulun ja varaavat paikan tunnilta. Jokaisella tunnilla on nimi, opettaja, alkamisaika, kesto ja kapasiteetti; täysi tunti näyttää ”Täynnä” eikä sille voi varata. Oppilaat näkevät varauksensa ja voivat peruuttaa enintään kaksi tuntia ennen tuntia. Olen ylläpitäjä: voin lisätä ja muokata tunteja ja nähdä, kuka on varannut kullekin tunnille. Rauhallinen, yksinkertainen ulkoasu, joka toimii hyvin puhelimilla.

Jos et ole varma, että työkalu ymmärsi, pyydä ensin suunnitelma. Mythexissä Suunnitelma-tila hahmottelee näkymät ja datan ennen koodin kirjoittamista, ja hyväksyt sen.

Vaihe 4: Saa ydinsilmukka toimimaan

Ydinsilmukka on se yksi asia, jota varten sovellus on olemassa: oppilas varaa tunnin ja Sara näkee sen. Testaa vain tuo:

1. Rekisteröidy oppilaana ja varaa tunti.
2. Avaa ylläpitonäkymä. Onko varaus siellä?
3. Varaa sama tunti uudelleen. Sen pitäisi estää se.
4. Aseta tunnin kapasiteetti 2, varaa se kahdelta oppilastililtä ja yritä kolmatta.

Tässä vaiheessa ilmenee yleensä kaksi ongelmaa. Aikataulu näyttää ajat palvelimen aikavyöhykkeellä, ei studion. Ja ”Täynnä”-tarkistus tehdään vain sivulla, joten nopea kaksoisnapsautus luo kaksi varausta.

Näytä kaikki tuntiajat studion aikavyöhykkeellä, [Asia/Dubai], riippumatta siitä, miten kävijän laite on asetettu.

Tarkista kapasiteetti ja kaksoisvaraukset palvelimella varauksen luomisen yhteydessä, ei vain sivulla. Jos kaksi pyyntöä tulee yhtä aikaa viimeiseen paikkaan, vain yhden pitäisi onnistua.

Korjaa ydinsilmukka ennen kuin lisäät mitään muuta. Kaikki muu riippuu siitä.

Vaihe 5: Lisää loput säännöt, yksi viestillä

Käy nyt speksin säännöt läpi yksi kerrallaan:

Oppilaat voivat peruuttaa varauksen enintään kaksi tuntia ennen tunnin alkua. Sen jälkeen piilota peruutuspainike ja hylkää peruutus palvelimella selkeällä viestillä.

Vain tilini voi avata ylläpitosivut. Varmista, että tämä tarkistetaan palvelimella jokaisessa ylläpitotoiminnossa, ei vain piilottamalla valikkoa.

Testaa jokainen muutos, ja siirry eteenpäin vasta, kun se toimii. Jos muutos rikkoo jotain, palauta viimeisimpään toimivaan tarkistuspisteeseen ja yritä selkeämmin muotoiltua pyyntöä sen sijaan, että kasaisit korjauksia päällekkäin.

Vaihe 6: Viimeistele se, minkä oikeat käyttäjät huomaavat

Oikeat käyttäjät huomaavat pieniä asioita. Lyhyt lista Saran sovellukseen:

• Tyhjät tilat: ”Tämän viikon tunteja ei ole vielä” sen sijaan, että sivu olisi tyhjä.
• Vahvistus: ”Olet varattu Vinyasa-tunnille, tiistaina klo 18.00” varauksen jälkeen.
• Puhelinasettelu: isot painikkeet, aikataulu luettavissa 375 px:n näytöllä.
• Jäljellä olevat paikat: ”3 paikkaa jäljellä” jokaisessa tuntikortissa, jotta oppilaat varaavat aiemmin.

Näytä jokaisessa tuntikortissa jäljellä olevat paikat, esim. ”3 / 12 jäljellä”. Varauksen jälkeen näytä vahvistus tunnin nimellä, päivällä ja ajalla sekä painike omiin varauksiin.

Vaihe 7: Testaa kuin tuntematon

Ennen kuin kukaan muu käyttää sovellusta, käytä puoli tuntia sen rikkomiseen:

Voit myös pyytää tekoälyä käymään läpi reunatapaukset:

Listaa kymmenen asiaa, joita oikea oppilas voisi tehdä ja jotka voisivat rikkoa varaamisen tai peruuttamisen, testaa jokainen ja korjaa ne, jotka epäonnistuvat. Kerro, mitä muutit.

Vaihe 8: Tietoturvatarkistus

Tämä sovellus tallentaa nimiä, sähköposteja ja puhelinnumeroita, joten lyhyt tietoturvatarkistus kannattaa. Pääkysymykset:

• Voiko yksi oppilas nähdä toisen varauksia tai yhteystietoja?
• Onko avaimia tai salasanoja selaimessa ajettavassa koodissa?
• Onko rekisteröintilomake suojattu botteja vastaan?
• Onko datasta varmuuskopio?

Sivumme onko vibe coding turvallista selittää jokaisen tarkistuksen ja antaa niihin kehotteita, ja tekoälyllä rakennettujen sovellusten tietoturvatarkistuslista on pidempi versio.

Vaihe 9: Julkaise

Kun ydinsilmukka, säännöt ja tarkistukset menevät läpi, julkaise. Mythexissä se on yksi napsautus, ja sovellus saa julkisen osoitteen, jonka tietokanta ja hosting ovat jo paikoillaan. Pro-paketissa voit yhdistää oman verkkotunnuksen, kuten book.sarasyoga.com; katso kuinka yhdistät oman verkkotunnuksen.

Ennen kuin lähetät linkin eteenpäin, tarkista julkaistu versio vielä kerran. Varaa tunti puhelimellasi. Tuotannon ja esikatselun pitäisi toimia samalla tavalla, mutta varmista se.

Vaihe 10: Ensimmäiset käyttäjät ja seuraava versio

Anna linkki ensin viidelle säännölliselle oppilaalle, ei kaikille. Pyydä heitä varaamaan seuraava tuntinsa sen kautta ja kertomaan, mikä oli epäselvää. Korjaa sitten kolme tärkeintä asiaa, jotka he mainitsevat.

Muutaman viikon oikean käytön jälkeen tällaisen sovelluksen v2-lista kirjoittaa yleensä itsensä: odotuslista täysille tunneille, sähköpostimuistutukset edellisiltana ja tuntipaketit, jotka maksetaan verkossa. Jokainen saa saman käsittelyn: kuvaa se muutamalla rivillä, kirjoita kehote, testaa ja julkaise. Maksujen lisäämisestä katso kuinka lisäät maksut sovellukseesi. Sanan levittämiseen katso kuinka lanseeraat sovelluksen ja saat ensimmäiset käyttäjät.

Muuttaminen puhelinsovellukseksi

Monet studiot haluavat kuvakkeen oppilaiden puhelimiin. Mythex Pro -paketissa julkaistusta sovelluksesta voi tulla Android-sovellus (tiedosto, jonka voit ladata Google Playhin) ja iPhone-sovellus, joka lähetetään TestFlightiin omalla App Store Connect -avaimellasi ilman Mac-konetta. Puhelinsovellus avaa julkaistun verkkosovelluksen, joten jokainen julkaisemasi päivitys on myös puhelinsovelluksessa.

Mitä tästä kannattaa ottaa mukaan

Rakentaminen itsessään oli lyhyt osa. Sovelluksen käyttökelpoiseksi teki speksin ”ei v1:ssä” -lista, ydinsilmukan testaaminen ennen kaikkea muuta, palvelimelle sijoitetut säännöt kapasiteetille ja käyttöoikeuksille sekä viisi oikeaa käyttäjää ennen viittäkymmentä. Juuri näin vibe coding näyttää, kun sovelluksen pitää toimia muille ihmisille.

Valmis kokeilemaan omaa? Kirjoita yhden sivun speksi ja liitä ensimmäinen kappale tekoälysovellusrakentajaan. Jos haluat nähdä lisää sovellustyyppejä ja niiden takana olevia kehotteita, lue vibe coding -esimerkkimme.

Kysymykset