Selles ülevaates viin teid läbi kogu testimise sessiooni – alates esialgsest pettumusest prompt-väljal olevate tähemärgi piirangute üle kuni toreda üllatuseni, kui mobiilivaade end laitmatult kohandas.
Ma jagan ära hinnastamistasemed, tsiteerin täpselt vigu, mis mind pahviks lõid, ja aitan teil otsustada, kas UI Bakery on õige tööriist teie järgmise sisemise projekti jaoks või olete paremini kinni Exceli arvutustabelis.
Mis on UI Bakery?
UI Bakery on madala koodi platvorm, millega saate sisemisi ärivahendeid luua ilma nullist koodi kirjutamata.
Mõelge sellele kui keskteele lihtsate veebilehitsejate ja keeruka tarkvaraarenduse vahel. Selle asemel et kulutada päevi põhilisele ülesehitusele, kirjeldage oma äppi prompt-väljas ja platvormi tehisintellekt “küpsetab” umbes minutiga funktsionaalse Reacti-põhise rakenduse.
Siin on lühike ülevaade, kuidas see töötab:
- AI ehitusplokid: sisestage prompt, mis genereerib algse paigutuse, komponendid ja loogika.
- Võrgu süsteem: nihutage elemente fikseeritud võrgustikus, et disain ei muutuks korrast ära ega laguneks.
- Läbipaistev kood: iga komponent kasutab Reacti ja TypeScripti, mida saate vajadusel visuaalses redaktoris piiride lõppemisel otse muuta.
- Paindlik tagasüsteem: te ei pea kasutama nende andmebaasi; saate ühendada peaaegu iga SQL-andmebaasi või API-ga.
Kellele see on mõeldud?
UI Bakery ei sobi Facebooki või avaliku blogi jaoks; see on mõeldud inimestele, kes haldavad äriandmeid ja töövooge.
Mul on jäänud mulje, et platvorm töötab eriti hästi järgmiste gruppide jaoks:
- Agentuurid, kes loovad klientidele: võite kiiresti prototüüpida kohandatud armatuurlaua või portaal, näidata seda kliendile tagasiside saamiseks ja seejärel koodi täpsete nõudmiste järgi lihvida.
- Arendajad ja tehnilised juhid: AI abil genereerite tabelid ja vormid automaatselt, et saaksite keskenduda keerukale äriloogikale.
- Väikeettevõtete omanikud: kui vajate professionaalset viisi, kuidas kliendid saavad esitada aruandeid, jälgida tellimusi või üles laadida dokumente, on see turvaline lahendus ilma lihtsate vormiehitajate “näritud” ilmeta.
UI Bakery plussid ja miinused
- AI genereerib funktsionaalsed paigutused sekunditega
- Automaatne responsiivne disain mobiilvaadete jaoks
- Otsene ligipääs Reactile ja TypeScriptile
- Lihtne ühendus iga SQL-andmebaasiga
- Üksikasjalik reaalajas logi rakenduse genereerimisel
- Testimiseks pole vaja krediitkaarti
- Puhas ja professionaalne vaikedisainisüsteem
- Suur Lucide ikoonide teek
- Versioonihaldus etappide (staging) ja tootmise jaoks
- Kiire juurutus kohandatud alamdomeenile
- Ettelaaditud autentimis- ja sisselogimise ekraanid
- Paindlik võrgu süsteem hoiab paigutuse korras
- Range tähemärgipiir AI-promptides
- Võrgu paigutus võib tunduda liiga jäik
- Andmeallika seadistamise õppimiskõver
Kui olete väsinud dev-aegade ootamisest lihtsate admin-paneelide ehitamiseks, proovige UI Bakery’t. Võite kirjeldada oma äppi ja näha toimivat prototüüpi enne hommikukohvi joomise lõpetamist.
UI Bakery funktsioonid
- AI-toega rakenduse genereerimine tekstipõhistest promptidest
- Ühenda PostgreSQL ja MySQL andmebaasidega
- Otsene ligipääs Reactile ja TypeScriptile
- Ettelaaditud etappide ja tootmise keskkonnad
- Responsiivsed paigutused mobiilile ja töölauale
- Valmis mallid levinud ärivahendite jaoks
- Integratsioon Google Analyticsi ja Datadogiga
- Rollipõhine autentimine ja õigused
Minu praktiline kogemus UI Bakery’ga
Olen skeptiline, kui jutt käib “võluvõimega” AI-rakenduse ehitajatest. Enamasti annavad nad kas uhke tabelarvutuse või koodisiruse, mis laguneb kohe, kui seda puudutada.
Et veenduda hypes, veetsin hommiku teenustellimuste portaal ehitades väljamõeldud koduteenuste firmale. Ausalt öeldes oli see nagu rollerrõng: “vau, nii lahe” ja “oot-oot, miks ma ei saa rohkem kirjutada?”
Siin on täpselt, mis juhtus, kui asusin ehitama.
1. Esimene samm: registreerimine ja esmamuljed
Kui jõudsin UI Bakery avalehele, jäi mulle silma nende slogan: “Build internal tools that are baked to scale.”
See on nutikas sõnamäng, kuid mis mind kohe tabas, oli suur, tume prompt-väli kangeljasesioonis koos tekstiga: “Describe the app you want to build.” Tundus nagu ChatGPT liides, mis mulle meeldis.
Ma ei läinud kohe prompti täitma. Kerisin pisut alla, et näha, mida veel pakutakse. Leidsin jaotise “Explore all app recipes,” kus oli malligaleriis näiteks:
- Laohaldustööriistad
- Arve kinnituse töövood
- Digitaalse turunduse armatuurlauad
- Logistikajälgijad
- IT-seadmete haldus
See nägi professionaalne välja. Kui olin valmis, naasin peaprompti juurde. Märkasin kohe, et konto loomine pole vajalik, et hakata äppi kirjeldama.
Lõpuks klõpsasin paremas ülanurgas “Sign up,” et konto korrast ära ajada. Protsess oli standard:
- Email ja parool: sisestasin töömeili ja parooli.
- Pant ei ole vaja: tõdesin kergendatult, et prooviks ei nõuta krediitkaarti.
- Tutvustus: pärast kinnitamist küsiti minu nime ja mõned taustaküsimused:
- Programmeerimiskogemus (valisin “Familiar”)
- Kuidas neist kuulsin (valisin “Google Search”)
Pärast neid samme pidin veel tööruumi seadistama. Nimetasin selle “Demeter Victory” ja süsteem kontrollis, kas URL demeter-victory-war-machine.uibakery.io on saadaval.
See oli. Klõpsasin “Access Workspace” ja olin sees. Kõik koos võttis aega mõne minuti ja tundus tõeliselt “lase mul ehitada” stiilis.
2. Minu esimene äpp: samm-sammuline õpetus
Siin algas tõeline show. Olin juba valmis kirjeldanud teenustellimuste portaal-i promptis:
“Klientide portaal, kus koduomanikud saavad taotleda teenuseid (torutööd, elekter, koristus, haljastus) ja jälgida oma tellimuste staatust. Lisada kasutaja autentimine, teenustellimuse vorm koos tüübi, kirjelduse, kuupäeva ja tähtsuse väljadega ning armatuurlaud kõigi tellimuste staatust (ootab, töös, lõpetatud) näitamiseks.”
Kleepisin selle prompt-välja ja vajutasin “Generate.” (Märkus: soovi korral saate äppi kirjeldada veelgi detailsemalt; UI Bakery kannatab pikemaid, spetsiifilisemaid promte.)
Siin algas “võlu.” Spinneri asemel nägin reaalajas logi, mis näitas AI tegevust:
- Nõuete struktureerimine: mu mu prompti struktuurseks plaaniks.
- Nõutavate komponentide paigaldamine: nägin, kuidas lisati Button, Table, Input ja Select.
- Teenustellimuste armatuurlaua ja vormi ehitamine: AI nimetas faile nagu service-requests-table.tsx ja new-service-request-modal.tsx.
- Koodi viimistlemine: tegi kiire veaskannete skaneeringu.
Kui ekraan värskendus, nägin täielikult funktsionaalset “HomeService Portal” äppi.
See polnud tühja lehega; seal oli külgriba, päis ja põhitablee dummy-andmetega nagu “Köögivalamu lekib” ja “Paigalda lagiventilaator”.
Veetsin järgmised kümme minutit lihtsalt klikkides:
- Uus teenustellimus: klõpsasin nuppu, ilmus modal vormiga ja rippmenüüs olid kõik teenused.
- Detailvaade: tabelirea klikk, ilmus “Service Request Details” modal koos kirjelduse ja staatuse märgiga.
- Vahekaardid: “Kõik staatused” ja “Kõik teenused” filtrina.
Ehitusliides meenutas moodsamat Retooli: keskel on äpp, vasakul failipuu. Kolm peariba: Preview, Code, Connect Data. Mulle meeldis, et kood oli nähtav – võisin klõpsata komponendil ja näha tagapõhja React/TypeScripti.
3. Disaini ja paigutuse kohandamine
Kui AI äpi lõpetas, nägi see välja professionaalne, aga geniaalne “startupi sinine” esteetika valitses.
Tahtsin vaadata, kui lihtne on personaliseerida. Leidsin chat-välja vasakus alanurgas, kus algselt prompti sisestasin. Seal oli nupp “Pick an element from the page.”
Kohandamise töövoog:
- Klõps “Pick an element”: kursor muutus ja eelvaade interaktiivseks.
- Valisin tabeli veeru “Service Type”: see sai sinise äärise ja chat-välja kinnitati komponent service-requests-table.tsx päises.
- Kirjutasin: “Tee see päiserida paksumaks ja suurenda fonti veidi.”
- AI logis: “Made ‘Service Type’ table header bold” ja “Edited file: service-requests-table.tsx.”
- Päiserida muutus kohe tavertugevaks ja veidi suuremaks.
Sarnane protsess töötas ka nupu “New Service Request” puhul: valisin, kirjeldasin “tee nupp roheliseks ja suuremaks,” ja AI muutis selle paari sekundi jooksul.
See ei ole drag-and-drop ehitaja. Te ei nihuta käsitsi elemente ega redigeeri CSS-i. Te käite AI-ga vestlust: valite elemendi, kirjeld
