వైబ్ కోడింగ్ ఉదాహరణలు: 10 నిజమైన యాప్ రకాలు, ప్రాంప్ట్‌లు మరియు ఏమి తప్పు జరిగింది

అత్యంత సాధారణ వైబ్ కోడింగ్ ఉదాహరణలు చిన్న, ఉపయోగకరమైన వెబ్ యాప్‌లు: ట్రాకర్లు, బుకింగ్ పేజీలు, అంతర్గత టూల్స్, క్లయింట్ పోర్టల్‌లు, ల్యాండింగ్ పేజీలు, క్విజ్‌లు, డాష్‌బోర్డ్‌లు మరియు సరళమైన AI టూల్స్. దిగువన వాటిలో పది ఉన్నాయి. ప్రతిదానికీ మీరు ఎవరు నిర్మిస్తారు, మొదటి ప్రాంప్ట్, సాధారణంగా ఏమి తప్పవుతుంది, మరియు దాన్ని సరిచేసే ఫాలో-అప్ ప్రాంప్ట్ చూస్తారు.

ఇవి ప్రజలు AI యాప్ బిల్డర్లకు ఎక్కువగా తెచ్చే ప్రాజెక్ట్‌ల మిశ్రమాలు, ఒక వ్యక్తి కేస్ స్టడీలు కాదు. ప్రాంప్ట్‌లు కాపీ చేసుకోదగినవి. వైఫల్యాలు మళ్లీ మళ్లీ వచ్చేవే, అందుకే అవి ఉపయోగకరమైన భాగం. వైబ్ కోడింగ్ మీకు కొత్త అయితే, వైబ్ కోడింగ్ అంటే ఏమిటి తో మొదలుపెట్టండి.

1. వ్యక్తిగత బడ్జెట్ ట్రాకర్

ఎవరు నిర్మిస్తారు: స్ప్రెడ్‌షీట్లు ప్రయత్నించి వదిలేసిన వ్యక్తులు.

మొదటి ప్రాంప్ట్:

నెలవారీ బడ్జెట్ ట్రాకర్ నిర్మించు. నేను ఖర్చులను మొత్తం, వర్గం (ఆహారం, అద్దె, రవాణా, వినోదం, ఇతరం), తేదీ మరియు ఒక నోట్‌తో జోడిస్తాను. ప్రతి వర్గానికి ఈ నెల మొత్తాన్ని బార్ చార్ట్‌గా మరియు ఇటీవలి ఖర్చుల జాబితాను చూపించు. ప్రతి వర్గానికి బడ్జెట్ సెట్ చేయగలను మరియు ఎంత మిగిలిందో చూడగలను.

ఏమి తప్పైంది: చార్ట్ ఇప్పటివరకు నమోదైన ప్రతి ఖర్చును లెక్కించింది, కేవలం ఈ నెలది కాదు, కాబట్టి రెండో నెల నాటికి ప్రతి వర్గం ఎక్కువ ఖర్చయినట్లు కనిపించింది. అలాగే కామాతో ("1,200") టైప్ చేసిన మొత్తాలు 1గా సేవ్ అయ్యాయి.

సరిచేసే ప్రాంప్ట్:

చార్ట్ మరియు మొత్తాలలో ఎంచుకున్న నెల ఖర్చులు మాత్రమే ఉండాలి. పైన ఒక నెల పికర్ జోడించు, డిఫాల్ట్‌గా ప్రస్తుత నెల. కామాలు లేదా ఖాళీలతో టైప్ చేసిన మొత్తాలను కూడా అంగీకరించి వాటిని సంఖ్యలుగా సేవ్ చేయి.

పాఠం: "ఈ నెల" అనేది ఒక నియమం. నియమాలను స్పష్టంగా చెప్పండి.

2. ఒక చిన్న సెలూన్ కోసం బుకింగ్ పేజీ

ఎవరు నిర్మిస్తారు: ఫోన్ మరియు DM ద్వారా బుకింగ్‌తో విసిగిపోయిన చిన్న వ్యాపార యజమానులు.

మొదటి ప్రాంప్ట్:

నా సెలూన్ కోసం బుకింగ్ పేజీ నిర్మించు. కస్టమర్లు ఒక సేవ, తేదీ మరియు ఖాళీ టైమ్ స్లాట్ ఎంచుకుని, పేరు మరియు ఫోన్ నంబర్ నమోదు చేస్తారు. లాగిన్ వెనుక ఉండే ప్రైవేట్ అడ్మిన్ పేజీ ఉండాలి, అది రోజు వారీగా బుకింగ్‌లను చూపాలి.

ఏమి తప్పైంది: ఇద్దరు కస్టమర్లు ఒక నిమిషం తేడాలో ఒకే 10:00 స్లాట్ బుక్ చేశారు, ఎందుకంటే పేజీ మొదట లోడ్ అయినప్పుడు మాత్రమే లభ్యతను తనిఖీ చేసింది. 90 నిమిషాల కలర్ బుకింగ్ తర్వాతి స్లాట్లను కూడా బ్లాక్ చేయలేదు.

సరిచేసే ప్రాంప్ట్:

కస్టమర్ బుకింగ్ సమర్పించినప్పుడు, అది కవర్ చేసే ప్రతి స్లాట్ ఇంకా ఖాళీగా ఉందో సర్వర్‌లో తనిఖీ చేయి, లేకపోతే "ఆ సమయం ఇప్పుడే తీసుకోబడింది" అని తిరస్కరించు. సేవ దాని పూర్తి నిడివిని బ్లాక్ చేస్తుంది, కాబట్టి 10:00 వద్ద 90 నిమిషాల బుకింగ్ 10:00, 10:30 మరియు 11:00ని బ్లాక్ చేస్తుంది.

పాఠం: ఇద్దరు వ్యక్తులు ఒకేసారి చేయగలిగే ఏదైనా దానికి సర్వర్-సైడ్ తనిఖీ కావాలి. పూర్తి వెర్షన్ కోసం బుకింగ్ యాప్ ఎలా నిర్మించాలి చూడండి.

3. QR కోడ్‌తో రెస్టారెంట్ మెనూ

ఎవరు నిర్మిస్తారు: మెనూలను తరచుగా మళ్లీ ప్రింట్ చేయించే కేఫ్ మరియు రెస్టారెంట్ యజమానులు.

మొదటి ప్రాంప్ట్:

నా కేఫ్ కోసం మొబైల్ మెనూ వెబ్‌సైట్ నిర్మించు. అల్పాహారం, భోజనం, పానీయాలు మరియు డెజర్ట్‌ల కోసం విభాగాలు, ప్రతి ఐటమ్‌కు పేరు, ధర, చిన్న వివరణ మరియు ఆహార ట్యాగ్‌లు (వీగన్, గ్లూటెన్-ఫ్రీ). ఐటమ్‌లను ఎడిట్ చేసి అవి అమ్ముడైపోయాయని గుర్తించడానికి అడ్మిన్ పేజీ కావాలి. మెనూకు లింక్ చేసే ప్రింట్ చేయదగిన QR కోడ్ చూపించు.

ఏమి తప్పైంది: ఏమీ విరగలేదు, కానీ ప్రతి ఐటమ్‌కు పూర్తి పరిమాణ ఫోన్ ఫోటోలు లోడ్ అవ్వడం వల్ల కేఫ్ Wi-Fiలో మెనూ నెమ్మదిగా ఉంది.

సరిచేసే ప్రాంప్ట్:

మెనూ ఫోటోలు చాలా బరువుగా ఉన్నాయి. అప్‌లోడ్ చేసిన చిత్రాలను గరిష్ఠంగా 800px వెడల్పుకు తగ్గించు, కంప్రెస్ చేయి, సందర్శకుడు స్క్రోల్ చేస్తుండగా లేజీగా లోడ్ చేయి.

పాఠం: మీ ఆఫీసులో మాత్రమే కాదు, నెమ్మదిగా ఉన్న కనెక్షన్‌లో పరీక్షించండి.

4. ఒక టీమ్ కోసం పరికరాలు లేదా స్టాక్ ట్రాకర్

ఎవరు నిర్మిస్తారు: ఒక షేర్డ్ స్ప్రెడ్‌షీట్‌ను మార్చుతున్న ఆపరేషన్స్ వ్యక్తులు.

మొదటి ప్రాంప్ట్:

మా వేర్‌హౌస్ టీమ్ కోసం ఇన్వెంటరీ టూల్ నిర్మించు. ఐటమ్‌లకు పేరు, SKU, పరిమాణం, స్థానం మరియు కనిష్ఠ స్థాయి ఉంటాయి. సిబ్బంది లాగిన్ అయి స్టాక్ జోడించగలరు, కారణంతో స్టాక్ తీసివేయగలరు, మరియు కనిష్ఠ స్థాయి కంటే తక్కువ ఉన్న ఐటమ్‌ల జాబితాను ఎరుపు రంగులో చూడగలరు. ప్రతి మార్పు మరియు చేసిన వ్యక్తి చరిత్రను ఉంచు.

ఏమి తప్పైంది: చరిత్రలో పేర్ల బదులు "user 3" కనిపించింది, మరియు అందుబాటులో ఉన్నదానికంటే ఎక్కువ స్టాక్ తీసివేయడం వల్ల పరిమాణం ఋణాత్మకంగా మారింది.

సరిచేసే ప్రాంప్ట్:

చరిత్రలో వ్యక్తి ID కాకుండా వారి పేరు చూపించు. పరిమాణాన్ని సున్నా కంటే తగ్గించే తీసివేతను అనుమతించకు; బదులుగా "స్టాక్‌లో 4 మాత్రమే ఉన్నాయి" అని చూపించు.

పాఠం: ఏమి సాధ్యం కావాలో మాత్రమే కాదు, ఏమి అసాధ్యం కావాలో వివరించండి. మిగతావి ఇన్వెంటరీ యాప్ నిర్మించడం మా గైడ్ కవర్ చేస్తుంది.

5. ఫ్రీలాన్సర్ లేదా స్టూడియో కోసం క్లయింట్ పోర్టల్

ఎవరు నిర్మిస్తారు: డిజైనర్లు, అకౌంటెంట్లు, కన్సల్టెంట్లు మరియు ఏజెన్సీలు.

మొదటి ప్రాంప్ట్:

క్లయింట్ పోర్టల్ నిర్మించు. నేను క్లయింట్లను ఈమెయిల్ ద్వారా ఆహ్వానిస్తాను. ప్రతి క్లయింట్ లాగిన్ అయి తమ సొంత ప్రాజెక్ట్‌లు, ఫైల్‌లు మరియు ఇన్వాయిస్‌లను మాత్రమే చూస్తారు, మరియు కామెంట్లు రాయగలరు. నేను అడ్మిన్‌గా లాగిన్ అయి అన్నీ చూస్తాను.

ఏమి తప్పైంది: ఇది జాబితాలో అత్యంత ముఖ్యమైన వైఫల్యం. పేజీలు ప్రతి క్లయింట్‌కు కేవలం వారి సొంత ప్రాజెక్ట్‌లనే చూపించాయి, కానీ అడ్రస్ బార్‌లో సంఖ్యను మార్చితే సర్వర్ ఏ ప్రాజెక్ట్‌నైనా తిరిగి ఇచ్చింది. ఒక క్లయింట్‌గా చుట్టూ తిరిగినప్పుడు అది ఎప్పుడూ బయటపడలేదు.

సరిచేసే ప్రాంప్ట్:

ప్రాజెక్ట్‌లు, ఫైల్‌లు, కామెంట్లు లేదా ఇన్వాయిస్‌లు తిరిగి ఇచ్చే ప్రతి సర్వర్ రూట్‌ను తనిఖీ చేయి. ప్రతిదీ లాగిన్ అయిన క్లయింట్‌కే చెందిందని నిర్ధారించాలి, లేకపోతే "కనుగొనబడలేదు" అని తిరిగి ఇవ్వాలి. తర్వాత పరీక్షించు: క్లయింట్ A గా లాగిన్ అయి, క్లయింట్ B ప్రాజెక్ట్‌ను దాని ID ద్వారా తెరవడానికి ప్రయత్నించు.

పాఠం: స్క్రీన్‌పై ఏదో దాచడం అంటే దాన్ని రక్షించడం కాదు. దీని గురించి మరింత వైబ్ కోడింగ్ సురక్షితమా? లో ఉంది.

6. వెయిట్‌లిస్ట్‌తో లాంచ్ పేజీ

ఎవరు నిర్మిస్తారు: ఒక ఆలోచనను నిర్మించడానికి ముందు పరీక్షించే వ్యవస్థాపకులు.

మొదటి ప్రాంప్ట్:

ట్యూటర్లు పాఠాలను షెడ్యూల్ చేయడానికి మరియు చెల్లింపులు వసూలు చేయడానికి సహాయపడే యాప్ కోసం ల్యాండింగ్ పేజీ నిర్మించు. హీరో హెడ్‌లైన్, సబ్‌హెడ్డింగ్, ఈమెయిల్ సైన్-అప్, మూడు ప్రయోజనాలు, ఎలా పనిచేస్తుందో విభాగం మరియు FAQ. సైన్-అప్‌లను తేదీతో డేటాబేస్‌లో సేవ్ చేయి, మరియు ప్రైవేట్ పేజీ నుంచి CSV గా డౌన్‌లోడ్ చేయగలిగేలా చేయి.

ఏమి తప్పైంది: కొన్ని రోజుల్లోనే జాబితా బాట్‌ల నుంచి వచ్చిన చెత్త సైన్-అప్‌లతో నిండిపోయింది, మరియు పేజీకి టైటిల్ లేదా వివరణ లేకపోవడంతో షేర్ చేసిన లింక్‌లు ఖాళీ ప్రివ్యూ చూపించాయి.

సరిచేసే ప్రాంప్ట్:

సైన్-అప్ ఫారమ్‌కు ప్రాథమిక బాట్ రక్షణ జోడించు (దాచిన హనీపాట్ ఫీల్డ్ మరియు IP కి గంటకు 5 సైన్-అప్‌ల పరిమితి). పేజీ టైటిల్, మెటా వివరణ మరియు సోషల్ షేరింగ్ చిత్రం జోడించు.

పాఠం: పబ్లిక్ ఫారమ్ కనుగొనబడుతుంది. వెయిట్‌లిస్ట్ పేజీ ఎలా నిర్మించాలి చూడండి.

7. టీచర్ కోసం క్విజ్ యాప్

ఎవరు నిర్మిస్తారు: LMS కంటే తేలికైనదాన్ని కోరుకునే ఉపాధ్యాయులు మరియు ట్రైనర్లు.

మొదటి ప్రాంప్ట్:

నా తరగతి కోసం క్విజ్ యాప్ నిర్మించు. నేను బహుళ-ఎంపిక ప్రశ్నలతో క్విజ్‌లు సృష్టిస్తాను, ప్రతిదానికి ఒకే సరైన సమాధానం. విద్యార్థులు ఒక కోడ్ మరియు వారి మొదటి పేరుతో చేరి, ప్రశ్నలకు సమాధానం ఇచ్చి, చివరలో వారి స్కోర్ చూస్తారు. నేను ప్రతి క్విజ్‌కు ఫలితాల పట్టిక చూస్తాను.

ఏమి తప్పైంది: ప్రశ్నలతో పాటు సరైన సమాధానాలు బ్రౌజర్‌కు పంపబడ్డాయి, కాబట్టి ఆసక్తి ఉన్న విద్యార్థి పేజీ సోర్స్‌లో వాటిని చదవగలిగాడు. విద్యార్థులు 100% వచ్చే వరకు మళ్లీ సమర్పించగలిగారు.

సరిచేసే ప్రాంప్ట్:

సరైన సమాధానాలను బ్రౌజర్‌కు పంపవద్దు. సమర్పణ తర్వాత సమాధానాలను సర్వర్‌లో తనిఖీ చేయి. ప్రతి క్విజ్‌కు విద్యార్థి పేరుకు ఒక్క సమర్పణ మాత్రమే అనుమతించు, ఎవరైనా మళ్లీ ప్రయత్నిస్తే ఉపాధ్యాయుడికి చూపించు.

పాఠం: బ్రౌజర్ వినియోగదారుకు చెందుతుంది. అక్కడ ఉన్నదంతా చదవగలిగేది.

8. ఒక చిన్న AI టూల్

ఎవరు నిర్మిస్తారు: ఒక కేంద్రీకృత AI సహాయకుడు కోరుకునే మార్కెటర్లు, రచయితలు మరియు వ్యవస్థాపకులు.

మొదటి ప్రాంప్ట్:

ఒక ఉత్పత్తి వివరణను వేర్వేరు టోన్లలో (స్నేహపూర్వక, నిపుణుడు, ఉల్లాసమైన, చిన్న, పొడవైన) ఐదు సోషల్ మీడియా పోస్ట్‌లుగా మార్చే టూల్ నిర్మించు. AI API ఉపయోగించు. నేను వివరణను అతికిస్తాను, ప్లాట్‌ఫామ్ ఎంచుకుంటాను, మరియు కాపీ బటన్లతో పోస్ట్‌లు పొందుతాను.

ఏమి తప్పైంది: మొదటి వెర్షన్ AI సర్వీస్‌ను నేరుగా బ్రౌజర్ నుంచి పిలిచింది, API కీ పేజీ లోపల ఉండటంతో ఎవరైనా దాన్ని కాపీ చేసి బిల్లును పెంచగలిగారు.

సరిచేసే ప్రాంప్ట్:

AI కాల్‌ను సర్వర్‌కు తరలించు. API కీని రహస్యంగా నిల్వ చేయి, ఎప్పుడూ ఫ్రంట్‌ఎండ్ కోడ్‌లో కాదు. ప్రతి సందర్శకుడికి రోజుకు 20 జనరేషన్లకు పరిమితం చేయి.

పాఠం: కీలు సర్వర్‌లో రహస్యాలుగా ఉండాలి. API కీలను సురక్షితంగా ఎలా ఉంచాలి మరియు మీ యాప్‌కు AI ఫీచర్లు ఎలా జోడించాలి చూడండి.

9. అరబిక్ మరియు ఇంగ్లీష్ వ్యాపార వెబ్‌సైట్

ఎవరు నిర్మిస్తారు: రెండు భాషల్లో సేవలందించే గల్ఫ్ మరియు విస్తృత అరబ్ ప్రపంచంలోని వ్యాపారాలు.

మొదటి ప్రాంప్ట్:

నా ఇంటీరియర్ డిజైన్ కంపెనీ కోసం అరబిక్ మరియు ఇంగ్లీష్‌లో భాష మార్పిడితో వెబ్‌సైట్ నిర్మించు. పేజీలు: హోమ్, సేవలు, పోర్ట్‌ఫోలియో, గురించి మరియు సంప్రదించండి. అరబిక్ పూర్తిగా కుడి-నుంచి-ఎడమ ఉండాలి.

ఏమి తప్పైంది: అరబిక్ టెక్స్ట్ కుడి వైపు అమర్చబడింది, కానీ లేఅవుట్ ప్రతిబింబించలేదు: బాణాలు ఇంకా తప్పు దిశలో ఉన్నాయి మరియు మెనూ తప్పు వైపు ఉంది. కొన్ని చోట్ల ఫోన్ నంబర్లు వెనుకకు కనిపించాయి.

సరిచేసే ప్రాంప్ట్:

అరబిక్‌లో మొత్తం లేఅవుట్‌ను ప్రతిబింబించు: పేజీ దిశను కుడి-నుంచి-ఎడమకు సెట్ చేయి, మెనూను కుడి వైపు ఉంచు, దిశ చిహ్నాలను తిప్పు, మరియు అరబిక్ టెక్స్ట్ లోపల ఫోన్ నంబర్లు మరియు ఈమెయిల్‌లను ఎడమ-నుంచి-కుడి ఉంచు.

పాఠం: కుడి-నుంచి-ఎడమ అనేది అమరిక మాత్రమే కాదు, ఒక లేఅవుట్. Mythex అరబిక్ మరియు ఇతర కుడి-నుంచి-ఎడమ లేఅవుట్‌లను నిర్వహిస్తుంది, మరియు మీరు నేరుగా అరబిక్‌లో ప్రాంప్ట్ చేయవచ్చు.

10. ఫోన్ యాప్‌గా మారే ట్రాకర్

ఎవరు నిర్మిస్తారు: వినియోగదారులు తమ ఫోన్‌లలో ఉండే కోచ్‌లు, జిమ్‌లు మరియు కమ్యూనిటీ గ్రూపులు.

మొదటి ప్రాంప్ట్:

నా వ్యక్తిగత శిక్షణ క్లయింట్ల కోసం వర్కౌట్ లాగ్ నిర్మించు. ప్రతి క్లయింట్ లాగిన్ అయి, నేను కేటాయించిన వారపు ప్లాన్‌ను చూస్తారు, వ్యాయామాలను టిక్ చేస్తారు మరియు బరువులు నమోదు చేస్తారు. ప్రతి క్లయింట్ పురోగతిని నేను చార్ట్‌లో చూస్తాను.

ఏమి తప్పైంది: వెబ్ యాప్ పనిచేసింది, కానీ ఫోన్‌లలో వర్కౌట్ మధ్యలో ట్యాప్ చేయడానికి బటన్లు చాలా చిన్నవిగా ఉన్నాయి మరియు చార్ట్ చదవలేనిదిగా ఉంది.

సరిచేసే ప్రాంప్ట్:

ఫోన్‌లో ఒక చేతితో ఉపయోగించేలా డిజైన్ చేయి: స్క్రీన్ దిగువన పెద్ద ట్యాప్ టార్గెట్లు, ప్రతి స్క్రీన్‌లో ఒక వ్యాయామం, పెద్ద Next మరియు Done బటన్లు, మరియు ఒక సరళమైన వారపు పురోగతి చార్ట్.

పాఠం: ప్రజలు దీన్ని ఫోన్‌లో ఉపయోగిస్తే, ముందుగా ఫోన్ కోసం డిజైన్ చేయండి. Mythex Pro లో ప్రచురించిన యాప్ Google Play కోసం Android యాప్‌గా మరియు TestFlight కు పంపే iPhone యాప్‌గా మారగలదు; ఫోన్ యాప్ మీ ప్రచురించిన యాప్‌ను తెరుస్తుంది, కాబట్టి ప్రతి Publish దాన్ని అప్‌డేట్ చేస్తుంది. మొబైల్ యాప్ బిల్డర్ పేజీ చూడండి.

ఈ ఉదాహరణల వెనుక ఉన్న నమూనాలు

ఈ పది ఉదాహరణలలో, వైఫల్యాలు కొన్ని సమూహాల్లోకి వస్తాయి:

వీటిలో ఏదీ మీరు కోడ్ చదవాలని అడగదు. ఉత్సుకతతో ఉన్న, కొద్దిగా విరోధంగా ఉన్న వినియోగదారుడిలా పరీక్షించాలి, మరియు మీరు చూసేదాన్ని ఖచ్చితంగా వివరించాలి.

మీరే ఒకటి ప్రయత్నించండి

మీ ఆలోచనకు దగ్గరగా ఉన్న ఉదాహరణను ఎంచుకోండి, దాని మొదటి ప్రాంప్ట్‌ను కాపీ చేసి వివరాలు మార్చండి. ఆ తర్వాత షేర్ చేసే ముందు సరిచేసే ప్రాంప్ట్‌ను ఒక చెక్‌లిస్ట్‌గా ఉపయోగించండి. మా వైబ్ కోడింగ్ ప్రాంప్ట్‌ల చీట్ షీట్ లో మరో 30 ఉన్నాయి, మరియు వైబ్ కోడింగ్‌తో యాప్ ఎలా నిర్మించాలి ఒక ప్రాజెక్ట్‌ను ఆలోచన నుంచి ప్రచురించిన యాప్ వరకు నడిపిస్తుంది. సిద్ధమైనప్పుడు, AI యాప్ బిల్డర్లో ప్రారంభించండి లేదా ఒక ప్రారంభ స్థానం కోసం టెంప్లేట్లు చూడండి.

ప్రశ్నలు