బిగినర్స్ కోసం వైబ్ కోడింగ్: నేను ఫోటో బూత్ వెబ్ యాప్ను ఎలా నిర్మించాను
నేను ఒక రచయితను, కోడర్ను కాదు. నా సాంకేతిక నైపుణ్యాలు 1999లో బేసిక్ HTML వద్దే ఆగిపోయాయి.
గత వారం, నేను నా మొదటి నిజమైన సాధనాన్ని నిర్మించాను. MLH కోసం పనిచేసే ఫోటో బూత్ వెబ్ యాప్ను "vibe code" చేయడానికి నేను Claudeని ఉపయోగించాను.
కోడింగ్ తెలియని వ్యక్తి లైవ్ ఈవెంట్ల కోసం ఒక ఫంక్షనల్ యాప్ను ఎలా నిర్మించారో ఇక్కడ చూడండి.
సమస్య MLH అనేక ఈవెంట్లను నిర్వహిస్తుంది. మాకు బ్రౌజర్ ఆధారిత ఫోటో బూత్ అవసరమైంది.
- పాల్గొనేవారు తమ ఫోన్లలో ఒక లింక్ను ఓపెన్ చేస్తారు.
- వారు సెల్ఫీని దిగుతారు లేదా ఫోటోను అప్లోడ్ చేస్తారు.
- వారు బ్రాండెడ్ ఫ్రేమ్ను జోడిస్తారు.
- వారు ఫోటోను తమ కెమెరా రోల్లో సేవ్ చేసుకుంటారు.
- అకౌంట్లు అవసరం లేదు. యాప్ స్టోర్లు అవసరం లేదు. కేవలం ఒక లింక్ మాత్రమే.
సాంకేతిక వ్యూహం నేను ఒక సంక్లిష్టమైన ఫ్రేమ్వర్క్ను ఉపయోగించాలనుకున్నాను. కానీ Claude నన్ను దాని నుండి వెనక్కి మళ్లించింది.
లైవ్ ఈవెంట్ల కోసం, తక్కువ అంశాలు ఉన్నవే ఉత్తమం. నేను మొత్తం సాధనాన్ని ఒకే ఒక index.html ఫైల్లో నిర్మించాను. ఇది HTML, CSS మరియు JavaScriptని ఉపయోగిస్తుంది. ఇందులో ఎలాంటి సంక్లిష్టమైన బిల్డ్ స్టెప్ లేదు. ఇది GitHub Pagesలో ఉచితంగా ఉంటుంది.
ప్రైవసీ బోనస్ ఫోటో మరియు ఫ్రేమ్ను కలపడానికి నేను HTML canvasని ఉపయోగించాను. మొత్తం ప్రాసెసింగ్ యూజర్ బ్రౌజర్లోనే జరుగుతుంది. ఫోటో ఎప్పుడూ సర్వర్కు అప్లోడ్ కాదు. ఇది పాల్గొనేవారికి ప్రైవేట్గా మరియు సురక్షితంగా ఉంటుంది.
బ్యాకెండ్ మ్యాజిక్ ఒక స్టాటిక్ సైట్కు కూడా బ్యాకెండ్ ఉండవచ్చు. స్టోరేజ్ కోసం నేను Supabaseని ఉపయోగించాను.
- నిర్వాహకులు Supabase బకెట్కు ఫ్రేమ్లను అప్లోడ్ చేస్తారు.
- పాల్గొనేవారు సైట్ ద్వారా ఆ ఫ్రేమ్లను చూస్తారు.
- భద్రత అనేది డేటాబేస్ పాలసీలలో ఉంటుంది, దాగి ఉన్న పాస్వర్డ్లలో కాదు.
బిగినర్స్ ఎదుర్కొనే ఇబ్బందులు వైబ్ కోడింగ్ ఆర్కిటెక్చర్కు సహాయపడుతుంది, కానీ మీరు ఆపరేషనల్ వివరాల పట్ల జాగ్రత్తగా ఉండాలి:
- డేటాబేస్లు నిద్రపోతాయి (sleep). ఈవెంట్కు ఒక రోజు ముందు నా Supabase ప్రాజెక్ట్ను ఎలా మేల్కొల్పాలి (wake up) అనేది నేను నేర్చుకున్నాను.
- ఇమేజ్ సెక్యూరిటీ. కాన్వాస్ రిమోట్ ఇమేజ్లను ఉపయోగించడానికి అనుమతించేలా నేను ఒక నిర్దిష్ట కోడ్ లైన్ను జోడించాల్సి వచ్చింది.
- యూజర్ ఎక్స్పీరియన్స్. ఫోన్లలో, "డౌన్లోడ్" ఆప్షన్ కనుగొనడం కష్టం. నేను నేటివ్ మొబైల్ షేర్ షీట్ను ఉపయోగించేలా కోడ్ను మార్చాను. ఇది ఫోటోను నేరుగా కెమెరా రోల్కు పంపిస్తుంది.
మీ కోసం నా పాఠాలు
- స్పష్టమైన పరిధులు ఉన్న ప్రాజెక్ట్ను ఎంచుకోండి. ఫోటో బూత్ అనేది ఒక ఫినిషింగ్ లైన్ లాంటిది. సోషల్ యాప్ అలా కాదు.
- AIని "ఎందుకు" అని అడగండి. కోడ్ కంటే దాని వెనుక ఉన్న కారణం (reasoning) ముఖ్యం.
- డిఫ్స్ (diffs) చదవండి. మీ రివ్యూ లేకుండా AI మీ సైట్ను మార్చనివ్వకండి.
- నిర్ణయాలను మీరే తీసుకోండి. AI సింటాక్స్ను హ్యాండిల్ చేస్తుంది, కానీ మీరు పరిమితులను (constraints) హ్యాండిల్ చేయాలి.
వైబ్ కోడింగ్ అంటే పనిని తప్పించుకోవడం కాదు. సరైన సమస్యలపై దృష్టి పెట్టడం.
ప్రారంభకులకు వైబ్ కోడింగ్: క్లాడ్ (Claude) సహాయంతో నేను ఒక పనిచేసే ఫోటో బూత్ వెబ్ యాప్ను ఎలా నిర్మించాను
ఇటీవల సాంకేతిక ప్రపంచంలో "వైబ్ కోడింగ్" (Vibe Coding) అనే పదం బాగా వినిపిస్తోంది. ఇది వినడానికి కొంచెం వింతగా ఉన్నప్పటికీ, ఇది సాఫ్ట్వేర్ డెవలప్మెంట్ యొక్క భవిష్యత్తును సూచిస్తోంది. నేను ఈ విధానాన్ని ఉపయోగించి ఒక పనిచేసే ఫోటో బూత్ వెబ్ యాప్ను ఎలా నిర్మించానో ఇక్కడ వివరిస్తున్నాను.
వైబ్ కోడింగ్ అంటే ఏమిటి?
సాధారణంగా కోడింగ్ అంటే సింటాక్స్ (syntax), లాజిక్ మరియు ప్రతి లైన్ కోడ్ను జాగ్రత్తగా వ్రాయడం. కానీ వైబ్ కోడింగ్లో, మీరు కోడ్ను వ్రాయడం కంటే, మీరు ఏమి సాధించాలనుకుంటున్నారో దాని "వైబ్" లేదా ఉద్దేశ్యాన్ని (intent) AI కి వివరించడంపై దృష్టి పెడతారు. మీరు క్లాడ్ (Claude) వంటి శక్తివంతమైన AI మోడల్కు మీ ఆలోచనలను చెబితే, అది మీ కోసం కోడ్ను రూపొందిస్తుంది. ఇది ప్రోగ్రామింగ్ కంటే ఎక్కువగా ఒక సృజనాత్మక ప్రక్రియలా అనిపిస్తుంది.
నా ప్రాజెక్ట్: ఫోటో బూత్ వెబ్ యాప్
నేను ఒక సరళమైన వెబ్ యాప్ను నిర్మించాలని నిర్ణయించుకున్నాను. ఇది వినియోగదారులు తమ కెమెరాను ఉపయోగించి ఫోటోలు తీయడానికి, వాటిని ఎడిట్ చేయడానికి మరియు డౌన్లోడ్ చేసుకోవడానికి వీలుగా ఉండాలి.
ప్రక్రియ (The Process)
1. ప్రాంప్ట్ ఇవ్వడం (The Initial Prompt): నేను క్లాడ్కు చాలా సాధారణ ప్రాంప్ట్ ఇచ్చాను: "ఒక ఫోటో బూత్ వెబ్ యాప్ను తయారు చేయి. ఇందులో కెమెరా ఫీడ్ ఉండాలి, ఫోటో తీసే బటన్ ఉండాలి మరియు తీసిన ఫోటోలను సేవ్ చేసుకునే సదుపాయం ఉండాలి."
2. ఫలితాన్ని చూడటం (Seeing the Result): క్లాడ్ వెంటనే HTML, CSS మరియు JavaScript కోడ్ను అందించింది. నేను దానిని ఒక ఫైల్లో సేవ్ చేసి రన్ చేయగానే, అది అద్భుతంగా పనిచేస్తోంది! నేను కోడ్ యొక్క ప్రతి లైన్ను అర్థం చేసుకోవాల్సిన అవసరం లేకుండానే, ఒక పనిచేసే అప్లికేషన్ నా ముందు ఉంది.
3. మెరుగుపరచడం (Iterating): అయితే, అది ఇంకా పర్ఫెక్ట్గా లేదు. నేను క్లాడ్తో ఇలా మాట్లాడాను: "ఇది బాగుంది, కానీ బటన్ కొంచెం పెద్దగా ఉండాలి మరియు బ్యాక్గ్రౌండ్ రంగు నీలం రంగులో ఉంటే బాగుంటుంది." క్లాడ్ వెంటనే ఆ మార్పులను చేసింది. ఇదే వైబ్ కోడింగ్ యొక్క అసలైన మజా—మీరు కోడ్ను సరిచేయడం కంటే, మీ ఆలోచనలను వివరించడంపైనే ఎక్కువ సమయం గడుపుతారు.
నేను నేర్చుకున్న పాఠాలు
- కమ్యూనికేషన్ ముఖ్యం: మీరు AI కి ఎంత స్పష్టంగా వివరిస్తే, ఫలితం అంత బాగుంటుంది.
- కోడింగ్ నైపుణ్యం కంటే ఉద్దేశ్యం ముఖ్యం: మీరు ప్రతి లైన్ కోడ్ తెలియకపోయినా, మీరు ఏమి చేయాలనుకుంటున్నారో తెలిస్తే సరిపోతుంది.
- వేగం: నేను రోజులు పట్టే పనిని కొన్ని నిమిషాల్లోనే పూర్తి చేయగలిగాను.
ముగింపు
వైబ్ కోడింగ్ అనేది కేవలం కోడ్ రాయడం గురించి మాత్రమే కాదు, ఇది సృజనాత్మకత మరియు సాంకేతికత మధ్య ఉన్న దూరాన్ని తగ్గించడం గురించి. మీరు కూడా క్లాడ్ వంటి సాధనాలను ఉపయోగించి మీ స్వంత ఆలోచనలను నిజం చేసుకోవచ్చు!