തുടക്കക്കാർക്കായുള്ള വൈബ് കോഡിംഗ് (Vibe Coding): ക്ലോഡ് (Claude) ഉപയോഗിച്ച് ഞാൻ എങ്ങനെ ഒരു ഫോട്ടോ ബൂത്ത് നിർമ്മിച്ചു

ഞാൻ ഒരു എഴുത്തുകാരനാണ്, കോഡർ അല്ല. എന്റെ സാങ്കേതിക പരിജ്ഞാനം 1999-ലെ അടിസ്ഥാന HTML-ൽ അവസാനിക്കുന്നതാണ്.

എന്നാൽ ഞാൻ ഇപ്പോൾ യഥാർത്ഥത്തിൽ പ്രവർത്തിക്കുന്ന ഒരു ടൂൾ നിർമ്മിച്ചിരിക്കുന്നു.

MLH ഇവന്റുകൾക്കായി ഞാൻ ഒരു ബ്രൗസർ അധിഷ്ഠിത ഫോട്ടോ ബൂത്ത് നിർമ്മിച്ചു. പങ്കെടുക്കുന്നവർക്ക് ഒരു സെൽഫി എടുക്കാം, ഒരു ബ്രാൻഡഡ് ഫ്രെയിം ചേർക്കാം, അത് അവരുടെ ഫോണിലേക്ക് സേവ് ചെയ്യാം. ആപ്പ് സ്റ്റോർ ആവശ്യമില്ല. അക്കൗണ്ടുകൾ വേണ്ട. ഒരു ലിങ്ക് മാത്രം മതി.

ക്ലോഡ് (Claude) ഉപയോഗിച്ച് 'വൈബ് കോഡിംഗ്' (vibe coding) എന്ന രീതിയാണ് ഞാൻ ഉപയോഗിച്ചത്. ഞാൻ ഇത് എങ്ങനെ ചെയ്തുവെന്നും ഇതിൽ നിന്ന് എന്തൊക്കെ പഠിച്ചു എന്നും താഴെ നൽകുന്നു.

തന്ത്രം (The Strategy)

ലൈവ് ഇവന്റുകൾക്കായി വിശ്വസനീയമായ ഒന്ന് വേണമെന്ന് ഞാൻ ആഗ്രഹിച്ചു. സങ്കീർണ്ണമായ ഫ്രെയിംവർക്കുകൾ ഒഴിവാക്കാനാണ് ക്ലോഡ് ഉപദേശിച്ചത്. പകരം, ഞങ്ങൾ ഒരു സിംഗിൾ index.html ഫയൽ നിർമ്മിച്ചു.

  • ഇത് ഒരു ഫയലിൽ തന്നെ HTML, CSS, JavaScript എന്നിവ ഉപയോഗിക്കുന്നു.
  • ഇതിൽ ബിൽഡ് സ്റ്റെപ്പുകളോ ഇൻസ്റ്റാളേഷനുകളോ ആവശ്യമില്ല.
  • ഇത് GitHub Pages-ൽ സൗജന്യമായി ഹോസ്റ്റ് ചെയ്യാം.
  • ഇതിൽ പ്രവർത്തനങ്ങൾ കുറവായതിനാൽ തകരാറുകൾ സംഭവിക്കാനുള്ള സാധ്യത കുറവാണ്.

സാങ്കേതിക നിർമ്മാണം (The Technical Build)

ഒരു സെൽഫിയും സുതാര്യമായ (transparent) ഒരു PNG ഫ്രെയിമും തമ്മിൽ യോജിപ്പിക്കാൻ ആപ്പ് ഒരു HTML canvas ഉപയോഗിക്കുന്നു. ഇത് പൂർണ്ണമായും ബ്രൗസറിൽ തന്നെ നടക്കുന്നു.

  • ഉപയോക്താവിന്റെ ഫോട്ടോ അവരുടെ ഉപകരണത്തിൽ നിന്ന് പുറത്തേക്ക് പോകുന്നില്ല.
  • ഇത് സ്വയമേവ സ്വകാര്യത സംരക്ഷിക്കുന്നു.
  • ഫോട്ടോ എളുപ്പത്തിൽ ക്രമീകരിക്കുന്നതിനായി 'pinch-to-zoom' പോലുള്ള ജെസ്റ്ററുകൾ ഞാൻ ചേർത്തു.

സങ്കീർണ്ണമായ ഒരു സെർവർ ഇല്ലാതെ ഫ്രെയിമുകൾ നിയന്ത്രിക്കുന്നതിനായി ഞാൻ Supabase ഉപയോഗിച്ചു.

  • സംഘാടകർ ഫ്രെയിമുകൾ ഒരു സ്റ്റോറേജ് ബക്കറ്റിലേക്ക് അപ്‌ലോഡ് ചെയ്യുന്നു.
  • പങ്കെടുക്കുന്നവർക്ക് ഒരു പബ്ലിക് ലിങ്ക് വഴി അവ കാണാം.
  • സുരക്ഷാ ക്രമീകരണങ്ങൾ ഡാറ്റാബേസ് പോളിസികൾ വഴിയാണ് കൈകാര്യം ചെയ്യുന്നത്, രഹസ്യ പാസ്‌വേഡുകൾ വഴിയല്ല.

തുടക്കക്കാർ നേരിടുന്ന വെല്ലുവിളികൾ (Beginner Gotchas)

വൈബ് കോഡിംഗ് ആർക്കിടെക്ചറിന് സഹായിക്കുമെങ്കിലും, പ്രവർത്തനപരമായ കാര്യങ്ങളിൽ നിങ്ങൾ ശ്രദ്ധിക്കണം:

  • ഡാറ്റാബേസ് സ്ലീപ്പ് (Database Sleep): ഉപയോഗിക്കാതെ ഇരുന്നാൽ സൗജന്യ Supabase പ്രോജക്റ്റുകൾ നിർത്തിപ്പോകും. ഇവന്റ് തുടങ്ങുന്നതിന് മുമ്പ് അവ വീണ്ടും പ്രവർത്തിപ്പിക്കേണ്ടതുണ്ട്.
  • ക്യാൻവാസ് ടെയിന്റിംഗ് (Canvas Tainting): മറ്റൊരു സ്രോതസ്സിൽ നിന്നുള്ള ചിത്രങ്ങൾ ലോഡ് ചെയ്യുന്നത് സേവ് ഫംഗ്ഷനെ തടസ്സപ്പെടുത്തിയേക്കാം. crossOrigin സെറ്റിംഗുകൾ ഉപയോഗിച്ച് ഞാൻ ഇത് പരിഹരിച്ചു.
  • മൊബൈൽ UX: ഫോണുകളിൽ, ഞാൻ നേറ്റീവ് ഷെയർ ഷീറ്റ് (native share sheet) ആണ് ഉപയോഗിച്ചത്. ഇത് ഒറ്റ ടാപ്പിലൂടെ ഫോട്ടോകൾ നേരിട്ട് ക്യാമറ റോളിലേക്ക് സേവ് ചെയ്യാൻ ഉപയോക്താക്കളെ അനുവദിക്കുന്നു.

നിങ്ങൾക്കുള്ള എന്റെ ഉപദേശം (My Advice for You)

നിങ്ങൾക്ക് ഇത് പരീക്ഷിക്കണമെന്നുണ്ടെങ്കിൽ, ഈ നിയമങ്ങൾ പാലിക്കുക:

  • കൃത്യമായ പരിധികളുള്ള ഒരു പ്രോജക്റ്റ് തിരഞ്ഞെടുക്കുക. ഒരു ഫോട്ടോ ബൂത്ത് എന്നത് വ്യക്തമായ ലക്ഷ്യമാണ്. എന്നാൽ ഒരു സോഷ്യൽ മീഡിയ ആപ്പ് എന്നത് വളരെ വലുതാണ്.
  • "എന്തുകൊണ്ട്" എന്ന് വിശദീകരിക്കാൻ AI-യോട് ആവശ്യപ്പെടുക. കോഡിനേക്കാൾ പ്രധാനം അതിന്റെ പിന്നിലെ യുക്തിയാണ്.
  • മാറ്റങ്ങൾ (diffs) പരിശോധിക്കുക. മാറ്റങ്ങൾ ആദ്യം പരിശോധിക്കാതെ നിങ്ങളുടെ സൈറ്റിൽ മാറ്റം വരുത്താൻ AI-യെ അനുവദിക്കരുത്.

വൈബ് കോഡിംഗ് എന്നാൽ നിങ്ങൾക്ക് നിങ്ങളുടെ പ്രോജക്റ്റിനെക്കുറിച്ച് അറിവില്ല എന്നല്ല അർത്ഥമാക്കുന്നത്. പകരം, സിന്റാക്സ് (syntax) കൈകാര്യം ചെയ്യുന്നത് AI ആണെന്നും ലോജിക്കും (logic) അതിന്റെ ഗുണദോഷങ്ങളും (tradeoffs) കൈകാര്യം ചെയ്യുന്നത് നിങ്ങളാണെന്നുമാണ് ഇതിനർത്ഥം.

ഉറവിടം: https://dev.to/mlh/vibe-coding-for-beginners-how-i-built-a-working-photo-booth-web-app-with-claude-8ib

ഓപ്ഷണൽ ലേണിംഗ് കമ്മ്യൂണിറ്റി: https://t.me/GyaanSetuAi