𝗩𝗶𝗯𝗲 𝗖𝗼𝗱𝗶𝗻𝗴 𝗳𝗼𝗿 𝗕𝗲𝗴𝗶𝗻𝗻𝗲𝗿𝘀: 𝗛𝗼𝘄 𝗜 𝗕𝘂𝗶𝗹𝘁 𝗮 𝗣𝗵𝗼𝘁𝗼 𝗕𝗼𝗼𝘁𝗵 𝘄𝗶𝘁𝗵 𝗖𝗹𝗮𝘂𝗱𝗲
நான் ஒரு எழுத்தாளர், கோடர் (coder) அல்ல. எனது தொழில்நுட்பத் திறன் 1999-ஆம் ஆண்டின் அடிப்படை HTML வரை மட்டுமே உள்ளது.
ஆனால் நான் இப்போது ஒரு உண்மையான, செயல்படும் கருவியை உருவாக்கியுள்ளேன்.
MLH நிகழ்வுகளுக்காக நான் ஒரு பிரவுசர் சார்ந்த (browser-based) photo booth-ஐ உருவாக்கினேன். பங்கேற்பாளர்கள் ஒரு செல்ஃபி எடுத்து, பிராண்டட் பிரேமை (branded frame) சேர்த்து, அதைத் தங்கள் போன்களில் சேமித்துக் கொள்ளலாம். ஆப் ஸ்டோர் தேவையில்லை. கணக்குகள் (accounts) தேவையில்லை. ஒரு லிங்க் மட்டுமே போதும்.
நான் Claude உடன் 'vibe coding' எனப்படும் முறையைப் பயன்படுத்தினேன். நான் அதை எப்படிச் செய்தேன் மற்றும் அதிலிருந்து என்ன கற்றுக்கொண்டேன் என்பது இதோ.
𝗧𝗵𝗲 𝗦𝘁𝗿𝗮𝘁𝗲𝗴𝘆
நேரடி நிகழ்வுகளுக்கு (live events) நம்பகமான ஒன்றை நான் விரும்பினேன். சிக்கலான frameworks-களைப் பயன்படுத்த வேண்டாம் என்று Claude அறிவுறுத்தியது. அதற்குப் பதிலாக, நாங்கள் ஒரு ஒற்றை index.html கோப்பை உருவாக்கினோம்.
- இது ஒரே கோப்பில் HTML, CSS மற்றும் JavaScript ஆகியவற்றைப் பயன்படுத்துகிறது.
- இதில் build steps அல்லது installations எதுவும் இல்லை.
- இது GitHub Pages-இல் இலவசமாக ஹோஸ்ட் செய்யப்படுகிறது.
- இதில் மாற்றப்பட வேண்டிய பாகங்கள் குறைவு, எனவே இது பழுதாகுவது கடினம்.
𝗧𝗵𝗲 𝗧𝗲𝗰𝗵𝗻𝗶𝗰𝗮𝗹 𝗕𝗶𝗹𝗱
இந்த ஆப், ஒரு செல்ஃபியை வெளிப்படையான (transparent) PNG பிரேமுடன் இணைக்க HTML canvas-ஐப் பயன்படுத்துகிறது. இது முழுமையாக பிரவுசரிலேயே நடக்கிறது.
- பயனரின் புகைப்படம் அவர்களின் சாதனத்தை விட்டு வெளியேறுவதில்லை.
- இது தானாகவே தனியுரிமையைப் (privacy) பாதுகாக்கிறது.
- புகைப்படத்தை எளிதாகச் சீரமைக்க (alignment), pinch-to-zoom போன்ற சைகைகளை (gestures) நான் சேர்த்துள்ளேன்.
சிக்கலான சர்வர் இல்லாமல் பிரேம்களை நிர்வகிக்க, நான் Supabase-ஐப் பயன்படுத்தினேன்.
- ஒருங்கிணைப்பாளர்கள் (Organizers) பிரேம்களை ஒரு storage bucket-இல் பதிவேற்றுகிறார்கள்.
- பங்கேற்பாளர்கள் ஒரு பொதுவான லிங்க் (public link) மூலம் அவற்றைப் பார்க்கிறார்கள்.
- பாதுகாப்பு என்பது தரவுத்தளக் கொள்கைகள் (database policies) மூலம் கையாளப்படுகிறது, மறைக்கப்பட்ட கடவுச்சொற்கள் (passwords) மூலம் அல்ல.
𝗕𝗲𝗴𝗶𝗻𝗻𝗲𝗿 𝗚𝗼𝘁𝗰𝗵𝗮𝘀
Vibe coding கட்டமைப்பிற்கு (architecture) உதவுகிறது, ஆனால் செயல்பாட்டு விவரங்களில் (operational details) நீங்கள் கவனமாக இருக்க வேண்டும்:
- Database Sleep: இலவச Supabase திட்டங்கள் பயன்பாட்டில் இல்லாதபோது நிறுத்தப்படும் (pause). ஒரு நிகழ்விற்கு முன்னதாகவே அவற்றை நீங்கள் மீண்டும் இயக்க வேண்டும்.
- Canvas Tainting: வேறு ஒரு மூலத்திலிருந்து (source) படங்களை ஏற்றுவது சேமிக்கும் செயல்பாட்டை (save function) பாதிக்கலாம். இதை நான் crossOrigin அமைப்புகளைப் பயன்படுத்தி சரி செய்தேன்.
- Mobile UX: போன்களில், நான் native share sheet-ஐப் பயன்படுத்தினேன். இது பயனர்கள் ஒரே ஒரு தட்டலில் (tap) புகைப்படங்களை நேரடியாகத் தங்கள் கேமரா ரோலில் (camera roll) சேமிக்க அனுமதிக்கிறது.
𝗠𝘆 𝗔𝗱𝘃𝗶𝗰𝗲 𝗳𝗼𝗿 𝗬𝗼𝘂
நீங்கள் இதை முயற்சிக்க விரும்பினால், இந்த விதிகளைப் பின்பற்றுங்கள்:
- தெளிவான எல்லைகளைக் கொண்ட ஒரு திட்டத்தைத் தேர்ந்தெடுக்கவும். ஒரு photo booth என்பது தெளிவான இலக்கு. ஒரு சமூக ஊடக ஆப் (social media app) என்பது மிகவும் பெரியது.
- AI-யிடம் "ஏன்" என்று விளக்கக் கேளுங்கள். குறியீட்டை (code) விட அதன் பின்னணியில் உள்ள காரணமே (reasoning) முக்கியமானது.
- மாற்றங்களை (diffs) கவனியுங்கள். மாற்றங்களை நீங்கள் முதலில் ஆய்வு செய்யாமல், AI உங்கள் தளத்தை மாற்ற அனுமதிக்காதீர்கள்.
Vibe coding என்பது உங்கள் திட்டத்தைப் பற்றி உங்களுக்குப் புரியாது என்று அர்த்தமல்ல. மாறாக, நீங்கள் தர்க்கத்தையும் (logic) மற்றும் சமரசங்களையும் (tradeoffs) கையாளும் போது, AI தொடரியலை (syntax) கையாள்கிறது என்று அர்த்தம்.
தொடக்கநிலையாளர்களுக்கான Vibe Coding: Claude மூலம் நான் எவ்வாறு ஒரு இயங்கக்கூடிய Photo Booth Web App-ஐ உருவாக்கினேன்
ஒரு செயலியை (app) உருவாக்குவதற்கு நீங்கள் வெறும் 'vibe'-ஐ மட்டும் பயன்படுத்தினால் போதுமா என்று எப்போதாவது நினைத்ததுண்டா?
சமீபகாலமாக, டெவலப்பர் சமூகத்தில் ஒரு புதிய சொல் பிரபலமடைந்து வருகிறது: Vibe Coding.
இது ஒரு புதிய நிரலாக்க முறையாகும் (programming paradigm). இதில் நீங்கள் ஒவ்வொரு வரியையும் கைமுறையாக எழுதுவதற்குப் பதிலாக, நீங்கள் எதைச் செய்ய விரும்புகிறீர்கள் என்பதை ஒரு AI-இடம் (LLM) விவரிக்கிறீர்கள். நீங்கள் குறியீட்டை (code) எழுதுவதில்லை; மாறாக, நீங்கள் எதை விரும்புகிறீர்கள் என்ற "உணர்வை" (vibe) மட்டுமே விவரிக்கிறீர்கள்.
இந்தக் கட்டுரையில், நான் Claude-ஐப் பயன்படுத்தி எவ்வாறு ஒரு முழுமையான, இயங்கக்கூடிய Photo Booth Web App-ஐ உருவாக்கினேன் என்பதைப் பகிர்ந்து கொள்ள விரும்புகிறேன்.
Vibe Coding என்றால் என்ன?
பாரம்பரியமான கோடிங்கில், நீங்கள் HTML, CSS மற்றும் JavaScript போன்ற மொழிகளின் தொடரியல்களை (syntax) துல்லியமாகத் தெரிந்திருக்க வேண்டும். ஒரு சிறிய பிழை இருந்தாலும் உங்கள் செயலி இயங்காது.
ஆனால், Vibe Coding என்பது முற்றிலும் மாறுபட்டது. இங்கே, உங்கள் முக்கியப் பணி என்னவென்றால்:
- தெளிவான பார்வையை வைத்திருத்தல்: நீங்கள் எதை உருவாக்க விரும்புகிறீர்கள் என்பதைத் தெளிவாகத் தெரிந்திருக்க வேண்டும்.
- சிறந்த ப்ராம்ப்ட்களை (Prompts) வழங்குதல்: AI-இடம் நீங்கள் எதைச் செய்ய வேண்டும் என்பதைத் தெளிவாக விவரிக்க வேண்டும்.
- தொடர்ச்சியான உரையாடல்: AI கொடுக்கும் முடிவுகளைப் பார்த்து, அதில் என்ன மாற்றங்கள் வேண்டும் என்பதை மீண்டும் மீண்டும் கூற வேண்டும்.
சுருக்கமாகச் சொன்னால், நீங்கள் ஒரு மென்பொருள் பொறியாளராக (Software Engineer) செயல்படுவதை விட, ஒரு தயாரிப்பு மேலாளராக (Product Manager) செயல்படுகிறீர்கள்.
எனது திட்டம்: ஒரு Photo Booth Web App
நான் ஒரு எளிய, ஆனால் அழகான Photo Booth செயலியை உருவாக்க விரும்பினேன். பயனர்கள் தங்கள் கேமராவைப் பயன்படுத்திப் புகைப்படம் எடுக்கலாம், சில ஃபில்டர்களைப் (filters) பயன்படுத்தலாம் மற்றும் அந்தப் புகைப்படங்களைச் சேமிக்கலாம்.
இதற்கு நான் Claude 3.5 Sonnet மாதிரியைப் பயன்படுத்தினேன்.
படி 1: ஆரம்பக்கட்ட ப்ராம்ப்ட் (The Initial Prompt)
நான் முதலில் மிகவும் எளிமையான ஒரு ப்ராம்ப்ட்டைத் தொடங்கினேன்:
"Create a single-file web application that acts as a photo booth. It should access the user's webcam, allow them to take a photo, and apply a simple grayscale filter. Use HTML, CSS, and vanilla JavaScript."
Claude சில நொடிகளில் முழுமையான குறியீட்டை வழங்கியது. நான் அதை ஒரு .html கோப்பாகச் சேமித்துத் திறந்தபோது, அது எதிர்பார்த்தபடியே வேலை செய்தது!
படி 2: 'Vibe'-ஐ மேம்படுத்துதல் (Refining the Vibe)
ஆரம்பக்கட்டச் செயலி நன்றாக இருந்தாலும், அது பார்ப்பதற்கு மிகவும் சாதாரணமாக இருந்தது. இப்போதுதான் உண்மையான "Vibe Coding" தொடங்கியது. நான் அதன் தோற்றத்தை மாற்றத் தொடங்கினேன்.
எனது அடுத்த ப்ராம்ப்ட்:
"This works, but it looks too basic. Make it look like a retro 90s aesthetic. Use neon colors, some funky fonts, and add a glowing border around the video feed."
Claude உடனடியாக CSS-ஐ மாற்றி, அந்தச் செயலியை ஒரு 'Retro' தோற்றத்திற்கு மாற்றியது. இப்போது அது பார்ப்பதற்கு மிகவும் ஸ்டைலாக இருந்தது.
படி 3: புதிய அம்சங்களைச் சேர்த்தல் (Adding Features)
அடுத்து, நான் சில கூடுதல் அம்சங்களைக் கேட்டேன்:
- "புகைப்படங்களைச் சேமிக்க ஒரு 'Download' பட்டனைச் சேர்."
- "பயனர்கள் புகைப்படத்திற்குப் பின்னால் ஒரு வண்ணமயமான பின்னணியைச் சேர்க்கும் வசதியை உருவாக்கு."
ஒவ்வொரு முறையும் நான் ஒரு மாற்றத்தைக் கேட்டபோது, Claude அந்த மாற்றத்தைச் செய்து, முழு குறியீட்டையும் எனக்கு வழங்கியது. நான் எந்த ஒரு வரியையும் நேரடியாகத் திருத்தவில்லை; நான் கேட்டது மட்டுமே நடந்தது.
நான் கற்றுக்கொண்ட பாடங்கள்
Vibe Coding மூலம் இந்தச் செயலியை உருவாக்கியபோது, நான் சில முக்கியமான விஷயங்களைக் கற்றுக்கொண்டேன்:
- தொடர்ச்சியான முன்னேற்றம் (Iteration is key): ஒரே ஒரு ப்ராம்ப்ட்டில் முழுமையான செயலியைப் பெற முடியாது. சிறிய படிகளாகச் சென்று, ஒவ்வொரு மாற்றத்தையும் சரிபார்த்து முன்னேற வேண்டும்.
- தெளிவான விளக்கம் அவசியம்: "அதை இன்னும் அழகாக மாற்று" என்று சொல்வதை விட, "அதை நியான் வண்ணங்கள் மற்றும் வளைவான விளிம்புகளுடன் (rounded borders) மாற்று" என்று சொல்வது சிறந்த முடிவைத் தரும்.
- அடிப்படை அறிவு உதவும்: நான் குறியீட்டை எழுதவில்லை என்றாலும், HTML மற்றும் CSS எப்படிச் செயல்படுகிறது என்ற அடிப்படை அறிவு எனக்கு இருந்ததால், Claude கொடுத்த முடிவுகளில் ஏதேனும் தவறு இருந்தால் அதை என்னால் எளிதாகக் கண்டறிய முடிந்தது.
முடிவுரை
Vibe Coding என்பது நிரலாக்கத்தின் எதிர்காலத்தைப் பற்றிய ஒரு முன்னோட்டம். இது குறியீடு எழுதுவதைத் தடையாக்காமல், படைப்பாற்றலை (creativity) முன்னிறுத்துகிறது. நீங்கள் ஒரு தொழில்முறை டெவலப்பராக இல்லாவிட்டாலும் கூட, உங்கள் கற்பனையில் உள்ள எந்தவொரு கருத்தையும் இப்போது நிஜமாக்க முடியும்.
நீங்கள் முயற்சி செய்து பாருங்கள், உங்கள் 'Vibe'-ஐக் கொண்டு ஒரு செயலியை உருவாக்குங்கள்!
Optional learning community: https://t.me/GyaanSetuAi