શિખનારાઓ માટે વાઇબ કોડિંગ (Vibe Coding): મેં Claude સાથે ફોટો બૂથ કેવી રીતે બનાવ્યું
હું એક લેખક છું, કોડર નથી. મારી ટેકનિકલ કુશળતા 1999 ના મૂળભૂત HTML સુધી જ મર્યાદિત છે.
પરંતુ મેં હમણાં જ એક વાસ્તવિક, કાર્યરત સાધન બનાવ્યું છે.
મેં MLH ઇવેન્ટ્સ માટે બ્રાઉઝર-આધારિત ફોટો બૂથ બનાવ્યું છે. ઉપસ્થિત લોકો સેલ્ફી લઈ શકે છે, બ્રાન્ડેડ ફ્રેમ ઉમેરી શકે છે અને તેને તેમના ફોનમાં સેવ કરી શકે છે. કોઈ એપ સ્ટોર નહીં. કોઈ એકાઉન્ટ નહીં. ફક્ત એક લિંક.
મેં Claude સાથે 'વાઇબ કોડિંગ' (vibe coding) નામની પદ્ધતિનો ઉપયોગ કર્યો. મેં તે કેવી રીતે કર્યું અને મેં શું શીખ્યું તે અહીં છે.
વ્યૂહરચના
મારે લાઈવ ઇવેન્ટ્સ માટે કંઈક વિશ્વસનીય જોઈતું હતું. Claude એ જટિલ ફ્રેમવર્કનો ઉપયોગ ન કરવાની સલાહ આપી. તેના બદલે, અમે એક જ index.html ફાઇલ બનાવી.
- તે એક જ ફાઇલમાં HTML, CSS, અને JavaScript નો ઉપયોગ કરે છે.
- તેમાં કોઈ બિલ્ડ સ્ટેપ્સ અથવા ઇન્સ્ટોલેશનની જરૂર નથી.
- તે GitHub Pages પર મફતમાં હોસ્ટ કરી શકાય છે.
- તેમાં ઓછા ભાગો છે, તેથી તેને બગાડવો મુશ્કેલ છે.
ટેકનિકલ નિર્માણ
આ એપ સેલ્ફીને પારદર્શક PNG ફ્રેમ સાથે જોડવા માટે HTML canvas નો ઉપયોગ કરે છે. આ બધું સંપૂર્ણપણે બ્રાઉઝરમાં થાય છે.
- વપરાશકર્તાનો ફોટો ક્યારેય તેમના ઉપકરણમાંથી બહાર જતો નથી.
- આ આપમેળે ગોપનીયતા (privacy) જાળવે છે.
- મેં ફોટાને સરળતાથી એલાઈન કરવા માટે pinch-to-zoom જેવા જેસ્ચર ઉમેર્યા છે.
જટિલ સર્વર વગર ફ્રેમ્સનું સંચાલન કરવા માટે, મેં Supabase નો ઉપયોગ કર્યો.
- આયોજકો સ્ટોરેજ બકેટમાં ફ્રેમ્સ અપલોડ કરે છે.
- ઉપસ્થિત લોકો તેને પબ્લિક લિંક દ્વારા જોઈ શકે છે.
- સુરક્ષા ડેટાબેઝ પોલિસી દ્વારા સંચાલિત થાય છે, છુપાયેલા પાસવર્ડ દ્વારા નહીં.
શિખનારાઓ માટેની મુશ્કેલીઓ
વાઇબ કોડિંગ આર્કિટેક્ચર માટે મદદ કરે છે, પરંતુ તમારે કામગીરીની વિગતો પર ધ્યાન આપવું પડશે:
- ડેટાબેઝ સ્લીપ (Database Sleep): નિષ્ક્રિયતા પછી મફત Supabase પ્રોજેક્ટ્સ સ્થિર થઈ જાય છે. તમારે ઇવેન્ટ પહેલાં તેને ફરીથી સક્રિય કરવા પડશે.
- કેનવાસ ટેઈન્ટિંગ (Canvas Tainting): અલગ સ્ત્રોતમાંથી ઈમેજ લોડ કરવાથી સેવ ફંક્શન બગડી શકે છે. મેં crossOrigin સેટિંગ્સનો ઉપયોગ કરીને આ સમસ્યા સુધારી છે.
- મોબાઈલ UX: ફોન પર, મેં નેટિવ શેર શીટનો ઉપયોગ કર્યો. આનાથી વપરાશકર્તાઓ એક ટેપમાં સીધા તેમના કેમેરા રોલમાં ફોટા સેવ કરી શકે છે.
તમારા માટે મારી સલાહ
જો તમે આ અજમાવવા માંગતા હોવ, તો આ નિયમોનું પાલન કરો:
- સ્પષ્ટ મર્યાદાઓ ધરાવતો પ્રોજેક્ટ પસંદ કરો. ફોટો બૂથ એ એક સ્પષ્ટ લક્ષ્ય છે. સોશિયલ મીડિયા એપ ખૂબ મોટી છે.
- AI ને "કેમ" સમજાવવા માટે કહો. કોડ કરતાં તેની પાછળનું કારણ વધુ મહત્વનું છે.
- ફેરફારો (diffs) વાંચો. પહેલાં ફેરફારોની સમીક્ષા કર્યા વિના AI ને તમારી સાઇટ બદલવા ન દો.
વાઇબ કોડિંગનો અર્થ એ નથી કે તમે તમારા પ્રોજેક્ટને સમજતા નથી. તેનો અર્થ એ છે કે AI સિન્ટેક્સ (syntax) સંભાળે છે જ્યારે તમે લોજિક અને ટ્રેડ-ઓફ્સ (tradeoffs) સંભાળો છો.
વૈકલ્પિક લર્નિંગ કમ્યુનિટી: https://t.me/GyaanSetuAi