Զաւէն Ճուհարեան
  1. Զաւէն Ճուհարեան
  2. Բլոգ

Արագ Ստեղծել Կայքային Ծրագրեր Lovable-ով եւ Cursor-ով

3 րոպէ ընթերցում

Քայլ առ քայլ ուղեցոյց՝ Lovable, Supabase, Cursor եւ Vercel գործիքներով ամբողջական կայքային ծրագրեր արագ հրապարակելու համար:

Արագ Ստեղծել Կայքային Ծրագրեր Lovable-ով եւ Cursor-ով

Կայքային լիարժէք ծրագիր մը կեանքի կոչելու համար այլեւս ամիսներու կամ մեծ ծրագրաւորողներու խումբի կարիք չկայ: Օգտագործելով Lovable հարթակը արտաքին տեսքի համար, Supabase-ը տուեալներու բազային, Cursor-ը քոտի յղկման, եւ Vercel-ը հրապարակման համար, կարելի է պատրաստի արտադրանք ստանալ քանի մը օրուան ընթացքին:

Ահա իմ գործնական քայլերը՝ ժամանակակից կայքային ծրագիր մը արագ եւ ապահով կառուցելու համար:

Քայլ 1. Գրել յստակ ծրագրային նկարագիր

Արհեստական բանականութեամբ աշխատելու ամէնէն մեծ սխալը կը կատարուի նախքան որեւէ հրահան գրելը: Առանց յստակ նկարագրի սկսիլը կը յանգեցնէ անկազմակերպ քոտի եւ անկայուն կառոյցի:

Նախքան որեւէ գործիք բանալը, պատրաստեցէք մէկ էջնոց յստակ փաստաթուղթ մը, որ կը բովանդակէ.

  • Ծրագրին լուծելիք գլխաւոր հարցը:
  • Պահանջուած էջերը եւ իւրաքանչիւր էջի տարրերը:
  • Տուեալներու բազայի աղիւսակներն ու անոնց կապերը:
  • Օգտատէրերու իրաւասութիւններն ու դերերը:

Յստակ նկարագիրը թոյլ կու տայ հրահանները ճշգրիտ պահել եւ խուսափիլ յետագայ շփոթներէ:

Քայլ 2. Կառուցել ծրագրի տեսքը Lovable-ի միջոցով

Ինչպէս նշուած է revex.agency կայքին մէջ, Lovable-ը առաջին փորձով կու տայ անհրաժեշտին 70%-էն 80%-ը: Այս գործիքը սովորական նախադասութիւններէն կը ստեղծէ React, TypeScript եւ Tailwind CSS հիմքով ծրագիր:

  1. Մուտք գործեցէք Lovable եւ բացէք նոր ծրագիր:
  2. Տեղադրեցէք ձեր պատրաստած նկարագիրը՝ մանրամասնելով էջերը, ցանկերը եւ կոճակները:
  3. Զրոյցի պատուհանին միջոցով կատարեցէք փոքր յարմարեցումներ:
  4. Կապեցէք ձեր GitHub հաշիւը, որպէսզի ամբողջական քոտը անմիջապէս արտածուի ձեր անձնական պահեստարանը:

Քայլ 3. Կարգաւորել տուեալները Supabase-ով

Lovable-ը ունի ուղղակի կապակցում Supabase-ի հետ, ինչ որ կու տայ PostgreSQL տուեալներու բազայ, նոյնականացում (Auth) եւ ֆայլերու պահեստ առանց բարդ սպասարկուներու:

  1. Lovable-ի կարգաւորումներուն մէջ ընտրեցէք «Connect Supabase» եւ ներմուծեցէք ձեր նախագծի URL-ն ու հանրային բանալին (anon key):
  2. Գործիքին յանձնարարեցէք ստեղծել անհրաժեշտ աղիւսակները:
  3. Աւելցուցէք ել-նամակով եւ գաղտնաբառով մուտքի էջեր եւ ապահովուած բաժիններ:
  4. Անմիջապէս աշխատցուցէք Row Level Security (RLS) դրութիւնը: Ըստ revex.agency աղբիւրին, RLS-ը անտեսելը ամէնէն վտանգաւոր սխալն է, քանի որ տուեալները կը ձգէ բացայայտ:

Քայլ 4. Զարգացնել եւ սրբագրել քոտը Cursor-ի մէջ

Արտաքին տեսքն ու տուեալները կապելէ ետք, պէտք է անցնիլ լիարժէք ծրագրաւորման միջավայր: Բեռնեցէք GitHub-ի պահեստարանը եւ բացէք զայն Cursor-ի մէջ:

  1. Թոյլ տուէք Cursor-ին ամբողջութեամբ ուսումնասիրել ձեր նախագծի բոլոր ֆայլերը:
  2. Գործածեցէք Ctrl+K հրամանը՝ առանձին ֆայլերու մէջ տեղային ճշգրտումներ ընելու համար:
  3. Գործածեցէք Ctrl+L հրամանը՝ ընդհանուր տրամաբանութեան կամ API կապերու մասին հարցումներ ուղղելու համար:
  4. Բազմաթիւ ֆայլեր միաժամանակ փոխելու համար օգտագործեցէք Cursor Composer (Ctrl+Shift+I):

Իմ կարծիքով, Lovable-էն դէպի Cursor անցումը կը լուծէ տեսողական գործիքներու գլխաւոր թերութիւնը. դուք կը ստանաք մաքուր React քոտ, որուն տէրը դուք էք:

Քայլ 5. Ծրագիրը հրապարակել Vercel-ի վրայ

Հրապարակման գործընթացը պէտք է ըլլայ ինքնաշխատ, որպէսզի փորձարկումները կատարուին իրական պայմաններու մէջ:

  1. Մուտք գործեցէք Vercel՝ ձեր GitHub հաշուով, եւ ընտրեցէք նոր պահեստարանը:
  2. Vercel-ը ինքնաբերաբար կը ճանչնայ React եւ Vite կարգաւորումները, ինչպէս կը նշէ startupclub.community:
  3. Աւելցուցէք ձեր միջավայրի գաղտնի տուեալները (Environment Variables), ինչպէս Supabase-ի բանալիները:
  4. Սեղմեցէք Deploy. ծրագիրը պատրաստ կ՚ըլլայ մօտ 2-3 վայրկեանէն:
  5. Կարգաւորումներուն մէջ աւելցուցէք ձեր սեփական համացանցային հասցէն (custom domain):

Աղբիւրներ

Աշխատինք միասին →