Gabay sa Lovable: Gumawa ng web app gamit ang isang pangungusap at i-sync sa GitHub

Isang kaibigan ko na ikalawang henerasyon na nagpapatakbo ng tradisyonal na negosyo sa Taichung ang gumastos ng 180,000 NTD noong nakaraang taon para mag-outsource ng panloob na sistema para sa "pag-uulat ng progreso ng mga sales rep." Matapos ang apat na buwang paggawa at nang ito ay ilunsad na, nagreklamo ang mga sales na mahirap itong gamitin at walang gustong mag-fill out.

Noong nakaraang buwan, pinadalhan niya ako ng link ng pamalit na sistema na ginawa raw niya nang mag-isa sa loob lamang ng isang hapon. Nang i-click ko ito, malinis ang interface, may login function, nai-save nang maayos ang mga data, at aktwal talagang ginagamit ng mga sales. Sabi niya: "Ibinigay ko lang sa AI kung ano ang gusto ko, at ginawa na niya."

Ang tool na iyon ay ang Lovable.

Ano ang Lovable

Ang opisyal na depinisyon nila sa kanilang sarili ay "isang full-stack AI development platform para sa pagbuo, pag-iterate, at pag-deploy ng mga web application gamit ang natural language, na lumilikha ng totoong source code na may seguridad at enterprise governance."

Kapag pinaghiwa-hiwalay ito, tatlong bagay lang ang ibig sabihin: Kausapin mo ito, susulat ito ng totoong code, at sa iyo ang code na iyon.

Ang pangatlong punto ang pinakamahalaga. Maraming no-code tools sa merkado ang nagpapakulong ng mga gawa nila sa loob ng sarili nilang platform, kaya kapag gusto mong ilipat ang mga ito, parang nag-uulit ka na naman sa simula. Ang opisyal na proseso ng Lovable ay malinaw na kinabibilangan ng hakbang na "i-sync sa GitHub," na nangangahulugang maaari mong dalhin ang iyong code at umalis anumang oras na gusto mo.

Ano ang Kaya Nitong Gawin

Malawak ang saklaw ng mga uri ng aplikasyon na nakalista sa kanilang opisyal na dokumentasyon:

• Mga SaaS product at business dashboard
• Mga consumer-type platform at social media
• Mga marketplace at e-commerce tool
• Mga internal workflow at operational system
• Mga marketing website at landing page
• Mga platform sa edukasyon at learning tool
• Mga web game at interactive content

Ang sarili kong pagsusuri ay: Ang mga panloob na tool (internal tools) at MVP validation ang pinaka-sweet spot nito. Ang mga uri ng proyekto na "malinaw ang pangangailangan, hindi masyadong marami ang user, pero hindi praktikal i-outsource" ay eksaktong saklaw nito.

Paano Gamitin: Ang Apat na Hakbang ng Opisyal na Proseso

Malinis at maikli ang pagkakalarawan ng dokumentasyon ng Lovable sa proseso, na may apat na hakbang lamang:

Hakbang 1: Describe — Ilarawan sa pamamagitan ng natural language kung ano ang gusto mo

Ang hakbang na ito ang magpapasya kung magiging maayos ang mga susunod na mangyayari. Tulad ng pagbibigay ng prompt sa isang chatbot, mas detalyado ang iyong paglalarawan, mas lalapit ang kalalabasan sa gusto mo.

Isang praktikal na estruktura sa paglalarawan:

Gusto kong gumawa ng panloob na sistema para sa "pag-uulat ng progreso ng mga sales rep."
Mga User: Humigit-kumulang 15 sales rep, kailangan nila ng account login.
Mga pangunahing screen: (1) Pagka-log in ng sales, makikita nila ang listahan ng mga kliyenteng hawak nila. (2) Kapag nag-click sa isang kliyente, maaari silang magdagdag ng record ng pagbisita na may mga field para sa petsa, paraan ng pagbisita, napag-usapan, at susunod na hakbang. (3) Ang account ng manager ay makikita ang mga record ng lahat ng sales at maaaring i-filter ayon sa petsa.
Estilo: Malinis, naka-focus sa mga table, at kailangang magamit din sa mobile phone.

Kumpara sa pagsasabing "Tulungan mo akong gumawa ng CRM," ang ganitong uri ng paglalarawan ay makakatipid ng napakaraming pabalik-balik na pagbabago sa iyong mga credit.

Hakbang 2: Review and iterate — Tingnan ang resulta, baguhin, at tingnan ulit

Maglalabas ang Lovable ng isang aplikasyon na direktang mapapatakbo, kaya malalaman mo agad kung tama ito sa pamamagitan ng pag-click-click dito. Para sa mga bahaging mali, direktang sabihin ang pagbabago: "Magdagdag ng column na 'Huling Petsa ng Pakikipag-ugnayan' sa listahan ng kliyente," o "I-set ang mga record ngayong buwan bilang default pagkatapos mag-log in."

May sikreto rito para makatipid: Sabihin mo nang sabay-sabay ang isang grupo ng mga pagbabago, huwag mong baguhin nang isa-isa. Ang bawat pagpapadala ng mensahe ay kumakain ng isang build. Ang pagsasama-sama ng tatlong maliliit na pagbabago sa isang mensahe ay magkakaiba ang gastos nang hanggang tatlong beses.

Hakbang 3: Sync to GitHub — Ikabit ang code pabalik sa iyong workflow

Kapag tama na ang prototype, i-sync ito sa GitHub. Ang kahalagahan ng hakbang na ito ay:

• Mayroon ka nang version control at backup
• Maaaring saklolohan ng isang engineer gamit ang kanilang sariling editor (tulad ng Cursor o Zed)
• Maaari itong ikabit sa sarili mong CI/CD at security scanning
• Hindi ka mabibihag o maba-lock-in sa platform

Mariin kong inirerekomenda na hangga't ang proyekto ay kahit kaunti lamang ay pormal, tiyaking gawin ang hakbang na ito.

Hakbang 4: Deploy and govern — Pag-deploy at pamamahala

I-deploy ito ayon sa mga pamantayan ng inyong organisasyon. Nagbibigay ang Lovable ng built-in na Cloud hosting (kabilang ang database, storage, at traffic), o maaari mo ring ikabit ang sa iyo.

Paano Kinakalkula ang mga Credits: Tatlong Uri ng Paggamit, Huwag Paghaluin

Ito ang pinakakaraniwang pinagkakamaliang bahagi ng marami. Pinaghihiwalay ng opisyal na dokumentasyon ang mga credit sa tatlong layunin:

• Build usage: Pagpapadala ng mga mensahe sa Lovable upang magplano, bumuo, mag-edit, o mag-update ng iyong aplikasyon
• Cloud usage: Hosting, database, storage, at mga mapagkukunan sa network
• AI gateway usage: Ang mga tawag ng AI features sa mga modelo sa loob ng iyong na-deploy na aplikasyon

Ang pinagmulan ng mga credit ay nahahati rin sa dalawa: mga nakalaang alokasyon para sa tiyak na layunin (araw-araw na build allowance, buwanang Cloud at AI allowances na awtomatikong nire-refresh) at pangkalahatang credits (buwanang quota ng plan, karagdagang binili, at mga reward na maaaring gamitin nang may kakayahang umangkop). Malilinaw na sinasabi ng opisyal na dokumentasyon na uubusin muna ang mga nakalaang alokasyon para sa tiyak na layunin bago gamitin ang mga pangkalahatang credits, at uunahin ang pag-ubos sa mga pinakamabilis mapanis (mabilis mag-expire).

Ang istruktura ng alokasyon na nakalista sa opisyal na dokumentasyon:

Plan	Araw-araw na Build	Buwanang Cloud	Buwanang AI	Presyo ng Karagdagang Bili
Free	5 beses/araw (Hanggang 30 kada buwan)	20 credits	4 credits	—
Pro	5 beses/araw	20 credits	4 credits	$0.30 USD kada credit
Business	5 beses/araw	20 credits	4 credits	$0.60 USD kada credit

Ang pagkonsumo ng mga build ay nagbabago depende sa kumplikasyon. Ang halimbawang ibinigay ng opisyal ay humigit-kumulang 0.5 credit para sa maliliit na pagbabago, at humigit-kumulang 1.2 credits para sa mas malalaking feature tulad ng pagdaragdag ng login function.

Ang pinakamadaling sumabog ay ang Cloud. Ang hosting ay sinisingil batay sa paggamit at hindi kasama sa buwanang bayad ng plan. Kung ang iyong aplikasyon ay ginagamit nang husto o ang database ay nag-iimbak ng malalaking bilang ng mga file, patuloy na iipunin ang gastusing ito. Bago mag-live, siguraduhing tingnan ang dashboard ng paggamit; huwag nang hintayin ang dating ng bill bago mo pa malaman.

Mga Advanced na Tip: Apat na Paraan para Kalahati ang Ibaba ng Gastusin

1. Mag-sketch muna bago gumawa. Bago ka magsimula, iguhit ang screen na gusto mo gamit ang papel at panulat o sa Excalidraw. Alamin nang mabuti ang dami ng mga screen at ang mga field ng bawat screen bago ka magsimula sa paglalarawan, upang mabawasan ang napakaraming pabalik-balik na pagbabago.

2. Pagsama-samahin ang mga utos sa pagbabago. Nabanggit na ito kanina pero sulit ulitin. Ang pagsasabing "Palakihin ang pamagat, gawing bughaw ang pindutan, at magdagdag ng export button" sa isang mensahe lamang ay mas mabuti kaysa hatiin ito sa tatlong beses.

3. Hatiin ang mga kumplikadong feature sa mga hiwalay na yugto. Gumawa muna ng pangunahing bersyon na tumatakbo (listahan + pagdaragdag), tiyaking tama ang estruktura ng data, bago idagdag ang pag-log in, at pagkatapos ay ang mga pahintulot. Kung ipipilit mong gawin ang lahat nang sabay-sabay at may nasira, hindi mo malalaman kung saan nagkaproblema, at ang gastos sa pagsisimula ulit ang pinakamataas.

4. Gamitin ang Libreng Bersyon sa yugto ng prototype, magbayad lang kapag desidido na. Ang 5 build kada araw ay maaaring mukhang kaunti, ngunit kung sapat na tumpak ang iyong paglalarawan, malaki ang maiuusad ng limang beses na iyon. Gamitin muna ang libreng bersyon para patunayan kung ang ideyang ito ay nagkakahalagang gawin, bago magpasya kung mamumuhunan ka ng pera.

Mga Paalala: Mga Developer sa Taiwan, Mangyaring Bigyang-Pansin Ito

Ang cybersecurity ay hindi lamang nakasalalay sa AI. Pinaninindigan ng opisyal ng Lovable na ang mga nilikha ay may pagsasaalang-alang sa cybersecurity, ngunit ang code na binuo ng AI ay maaari pa ring magkaroon ng mga isyu tulad ng labis na maluwag na mga setting ng pahintulot o hindi na-verify na mga input. Hangga't ang iyong aplikasyon ay humahawak ng personal na data (mga listahan ng kliyente, impormasyon ng empleyado, mga numero ng ID), ikaw ay may obligasyong protektahan ito ayon sa mga batas sa privacy. Tiyaking ibalik ang code sa GitHub, hayaan ang isang engineer na magsagawa ng pagsusuri sa cybersecurity, o kahit man lang ay patakbuhin ang isang awtomatikong pag-scan. Hindi ito isang opsyonal na hakbang.

Huwag itong ituring na isang mahiwagang lunas na hindi na nangangailangan ng pag-unawa sa teknolohiya. Pinapayagan nito ang mga taong hindi marunong mag-code na gumawa ng mga bagay, ngunit kapag nasira ito, bumagal ang performance, o hindi tama ang disenyo ng database, kakailanganin mo pa rin ng taong nakakaalam nito. Ang makatwirang inaasahan ay: ibinababa nito ang hadlang mula "wala hanggang sa simula" ng 90%, ngunit ang paglipat mula "mayroon hanggang sa maging matatag" ay nangangailangan pa rin ng propesyonalismo.

Ang mga gastos ay dapat na dinamikong sinusubaybayan. Ang buwanang bayad para sa subscription ay nakapirmi, ngunit ang bahagi ng pagpepresyo batay sa paggamit ay hindi. Magtakda ng paalala at tingnan ang paggamit minsan sa isang linggo; huwag hayaang ang isang walang-silbing test application ay sumusunog ng pera sa background.

Kailan Dapat Gumamit ng Ibang Tool

• Mga purong static na opisyal na website o landing page: Mas mabilis gamitin ang Framer o Webflow, at mas mataas din ang kalayaan sa disenyo
• Mga form at simpleng pagkolekta ng data: Sapat na ang Google Forms at Sheets, huwag nang mag-over-engineer
• Pag-develop ng mga feature para sa umiiral nang code repository: Direktang gumamit ng mga AI assistant sa loob ng mga editor tulad ng Cursor o Cline
• Mga pormal na produkto na nangangailangan ng kumplikadong lohika sa negosyo: Gamitin ang Lovable para sa prototype, pagkatapos ay tapat na humanap ng mga engineer

Karagdagang pagbabasa: Upang maunawaan ang buong larawan ng pag-code gamit ang AI, maaari mong tingnan ang Gabay sa AI Coding Assistant; para sa paggawa ng mga panloob na tool sa negosyo, mas komprehensibong tinatalakay ito ng Paggawa ng mga Internal Tool sa pamamagitan ng AI; at upang makatipid sa gastos sa pamamagitan ng paglipat sa pagitan ng iba't ibang mga modelo, sulit na sangguniin ang Tutorial sa OpenRouter. Marami pang katulad na mga tool ang makikita sa Kategorya ng AI Developer Tools, o maaari mo ring bisitahin ang Prompt Template Library upang humanap ng mga handa nang gamiting template ng paglalarawan.

Puna ng TheAI Academy

Ang pananaw ko sa Lovable ay: Ang tunay na binago nito ay hindi ang "bilis ng pag-develop," kundi ang "kung sino ang may karapatang magsimulang gumawa."

Noong nakaraan, ang isang tagapamahala ng departamento na gustong gumawa ng maliit na tool ay kailangang magsulat muna ng mga kinakailangan, humanap ng badyet, pumila sa IT, at pagkaraan ng tatlong buwan ay makakakuha ng isang bagay na medyo sablay. Ngayon, maaari siyang gumawa ng isang magaspang ngunit magagamit na bersyon nang mag-isa, at kapag natukoy niyang tama ang direksyon, saka siya hahanap ng engineer para gumawa ng pormal na bersyon. Ang pagbabagong ito sa pagkakasunud-sunod ay mas mahalaga kaysa sa perang natipid.

Ngunit sasabihin ko rin nang tapat: Ang mga patalastas tungkol sa "paglikha ng isang produkto na handa nang ilabas sa merkado sa loob ng isang hapon" ay dapat paniwalaan nang may pag-iingat. Ang lahat ng matagumpay na kaso na nakita ko ay mga panloob na tool na malinaw ang mga pangangailangan, hindi masyadong malaki ang saklaw, at nakokontrol ang mga user. Hindi ito isang kapintasan; ito mismo ang lugar kung saan ito nararapat manatili.

Puna: Ang pinakamalaking halaga ng Lovable ay ibinababa nito ang gastos ng "gumawa muna tayo ng isa at tingnan natin" sa halos malapit sa zero. Ang pinakakulang sa mga maliliit at katamtamang negosyo ay kailanman hindi ang mga ideya, kundi ang katotohanang napakataas ng gastos sa pagpapatunay ng mga ideya—at ang bagay na ito ay nalutas na ngayon nang malaki.

Isang tiyak na mungkahi para sa mga mambabasa: Maghanap ng isang bagay sa inyong kumpanya na "reklamo ng lahat dahil nakakainis, pero patuloy pa ring pinagkakasya gamit ang Excel" (maaari itong maging pagrerehistro ng leave, pagpapahiram ng kagamitan, o pag-uulat ng mga sales), at gumamit ng libreng bersyon para gumawa ng prototype para subukan ng mga kasamahan sa loob ng isang linggo. Kung talagang may gumagamit nito, pag-usapan kung mamumuhunan para gawin itong pormal; kung walang gumagamit, nag-aksaya ka lamang ng isang hapon.

Pinagmulan ng Datos

• Opisyal na Dokumentasyon ng Lovable: Panimula sa Platform