Vibe Coding से ऐप कैसे बनाएं: विचार से प्रकाशित ऐप तक

Vibe coding से ऐप बनाने के लिए पहले संस्करण का एक-पेज का विवरण लिखें, उसे अपने पहले prompt के रूप में किसी AI app builder को दें, और फिर ऐप को छोटे-छोटे परखे हुए चरणों में बढ़ाएँ: data, login, मुख्य workflow, polish, सुरक्षा जाँच, और अंत में प्रकाशन। यह गाइड एक उदाहरण प्रोजेक्ट को हर चरण से गुज़ारती है, एक छोटे योगा स्टूडियो के लिए क्लास बुकिंग ऐप, और हर चरण पर इस्तेमाल हुए prompts भी दिखाती है।

अगर आपने इस तरह पहले कभी कुछ नहीं बनाया है, तो हमारा नौसिखियों के लिए vibe coding ट्यूटोरियल छोटे कदम से शुरू होता है। जो व्यापक परिचय vibe coding से बंधा न हो, उसके लिए AI से ऐप कैसे बनाएं देखें।

प्रोजेक्ट

मान लीजिए Sara नाम की एक योगा स्टूडियो मालिक हैं, जो हफ़्ते में आठ क्लास चलाती हैं। बुकिंग WhatsApp से आती है; वे हर क्लास के लिए कागज़ की सूची रखती हैं और अक्सर ज़्यादा बुकिंग हो जाती है। उन्हें चाहिए:

• छात्र हफ़्ते का timetable देखें और अपनी जगह बुक करें।
• हर क्लास की capacity हो।
• हर क्लास की एक सूची हो जिसे वे दरवाज़े पर देख सकें।
• छात्र दो घंटे पहले तक बुकिंग रद्द कर सकें।

बस यही पूरा पहला संस्करण है। कोई payments नहीं, कोई memberships नहीं, कोई app store नहीं। वे बाद में आएँगी, या कभी नहीं।

चरण 1: एक पेज का spec लिखें

कोई भी tool खोलने से पहले पहला संस्करण सादे शब्दों में लिखें। यहाँ दस मिनट लगाने से घंटों की आगे-पीछे बातचीत बचती है। एक उपयोगी ढाँचा:

• कौन उपयोग करता है: छात्र (बुक और रद्द करें), Sara (क्लास प्रबंधित करें, सूचियाँ देखें)।
• स्क्रीन: timetable, क्लास विवरण, मेरी बुकिंग, admin क्लास, admin क्लास सूची।
• Data: classes (नाम, शिक्षक, शुरुआत का समय, लंबाई, capacity), bookings (छात्र, क्लास, status), students (नाम, email, फ़ोन)।
• नियम: भरी हुई क्लास बुक नहीं होगी; हर छात्र एक क्लास में एक बार; दो घंटे पहले तक रद्द; केवल Sara admin पेज देख सकती हैं।
• v1 में नहीं: payments, class packs, waitlists, reminders।

"v1 में नहीं" वाली सूची सबसे ज़्यादा मायने रखती है। यही build को पूरा होने लायक रखती है। यदि आप पूरा दस्तावेज़ चाहते हैं तो AI से product requirements doc कैसे लिखें गहराई से समझाता है।

चरण 2: ऐसा tool चुनें जो पूरा लूप संभाले

डेटाबेस, login और सार्वजनिक URL वाले ऐप के लिए ऐसा AI app builder इस्तेमाल करें जो code चलाए, database जोड़े और प्रकाशित करे, न कि ऐसा chat assistant जो आपको फ़ाइलें थमा दे। विकल्पों के लिए हमारी vibe coding tools की तुलना देखें। यहाँ हम Mythex इस्तेमाल करेंगे, क्योंकि वह हर चरण एक जगह देता है: chat, live preview, एक असली database और file storage, और एक क्लिक में प्रकाशन।

चरण 3: पहला prompt

spec को एक अनुच्छेद में बदलें। पूरा दस्तावेज़ हर विवरण के साथ एक बार में न चिपकाएँ; मुख्य बात दें और बाकी चरण-दर-चरण जोड़ें।

मेरे योगा स्टूडियो के लिए एक क्लास बुकिंग ऐप बनाओ। छात्र नाम, email और फ़ोन से साइन अप करें, इस हफ़्ते का timetable देखें, और किसी क्लास में अपनी जगह बुक करें। हर क्लास का नाम, शिक्षक, शुरुआत का समय, लंबाई और capacity होती है; भरी हुई क्लास पर "Full" दिखे और उसे बुक न किया जा सके। छात्र अपनी बुकिंग देखें और क्लास से दो घंटे पहले तक रद्द कर सकें। मैं admin हूँ: क्लास जोड़ और बदल सकती हूँ, और हर क्लास के लिए बुक किए गए लोगों की सूची देख सकती हूँ। शांत, सरल डिज़ाइन जो फ़ोन पर अच्छा चले।

यदि आपको शक है कि tool ने बात समझी है, तो पहले एक plan माँगें। Mythex में Plan mode code लिखने से पहले स्क्रीन और data का खाका दिखाता है, जिसे आप मंज़ूरी देते हैं।

चरण 4: मुख्य लूप चलाएँ

मुख्य लूप वह एक चीज़ है जिसके लिए ऐप मौजूद है: छात्र क्लास बुक करता है, और Sara उसे देखती हैं। केवल वही जाँचें:

1. छात्र के रूप में साइन अप करें, एक क्लास बुक करें।
2. admin view खोलें। क्या बुकिंग वहाँ है?
3. वही क्लास फिर से बुक करें। उसे मना करना चाहिए।
4. किसी क्लास की capacity 2 करें, दो छात्र खातों से बुक करें, फिर तीसरे को कोशिश करने दें।

इस बिंदु पर आमतौर पर दो समस्याएँ सामने आती हैं। timetable में समय server के time zone में दिखता है, स्टूडियो के नहीं। और "Full" की जाँच केवल पेज में होती है, इसलिए तेज़ double-click से दो बुकिंग बन जाती हैं।

हर क्लास का समय स्टूडियो के time zone में दिखाओ, [Asia/Dubai], चाहे visitor के device की सेटिंग कुछ भी हो।

बुकिंग बनते समय server पर capacity और डुप्लीकेट बुकिंग की जाँच करो, केवल पेज में नहीं। यदि आखिरी जगह के लिए दो अनुरोध एक साथ आएँ, तो केवल एक सफल होना चाहिए।

कुछ और जोड़ने से पहले मुख्य लूप ठीक करें। बाकी सब उस पर निर्भर है।

चरण 5: बाकी नियम, एक-एक संदेश में जोड़ें

अब spec के नियमों को एक-एक करके लें:

छात्र क्लास शुरू होने से दो घंटे पहले तक बुकिंग रद्द कर सकें। उसके बाद रद्द करने का बटन छिपाओ, और server पर रद्द करने से साफ़ संदेश के साथ मना करो।

केवल मेरा खाता admin पेज खोल सके। हर admin कार्रवाई के लिए यह server पर जाँचा जाए, केवल मेन्यू छिपाकर नहीं।

हर एक के बाद उसे जाँचें, और तभी आगे बढ़ें जब वह काम करे। यदि कोई बदलाव कुछ तोड़ दे, तो आखिरी सही checkpoint पर लौटें और साफ़ अनुरोध दोबारा दें, गलत सुधारों को एक के ऊपर एक जोड़ते न जाएँ।

चरण 6: वह polish करें जो असली उपयोगकर्ता नोटिस करेंगे

असली उपयोगकर्ता छोटी चीज़ों पर ध्यान देते हैं। Sara के ऐप की एक छोटी सूची:

• खाली स्थिति: खाली पेज के बजाय "इस हफ़्ते अभी कोई क्लास नहीं"।
• पुष्टि: बुकिंग के बाद "आपकी Vinyasa क्लास बुक हो गई है, मंगलवार 18:00"।
• फ़ोन लेआउट: बड़े बटन, 375px स्क्रीन पर पढ़ने लायक timetable।
• बची हुई जगहें: हर क्लास कार्ड पर "3 spots left", ताकि छात्र जल्दी बुक करें।

हर क्लास कार्ड पर बची हुई जगहें दिखाओ, जैसे "12 में से 3 बची"। बुकिंग के बाद क्लास का नाम, दिन और समय दिखाने वाली पुष्टि दिखाओ, और मेरी बुकिंग का बटन।

चरण 7: किसी अजनबी की तरह परखें

किसी और के इस्तेमाल से पहले आधा घंटा इसे तोड़ने की कोशिश में लगाएँ:

आप AI से edge cases चलाने को भी कह सकते हैं:

दस ऐसी बातें सूचीबद्ध करो जो एक असली छात्र कर सकता है और जो बुकिंग या रद्द करने को तोड़ सकती हैं, हर एक को परखो और जो विफल हो उसे ठीक करो। बताओ तुमने क्या बदला।

चरण 8: एक सुरक्षा जाँच

यह ऐप नाम, emails और फ़ोन नंबर सहेजता है, इसलिए एक छोटी सुरक्षा जाँच ज़रूरी है। मुख्य सवाल:

• क्या एक छात्र दूसरे की बुकिंग या संपर्क विवरण देख सकता है?
• क्या browser में चलने वाले code में कोई key या password है?
• क्या sign-up form bots से सुरक्षित है?
• क्या डेटा का backup है?

क्या vibe coding सुरक्षित है पेज हर जाँच समझाता है और उनके prompts देता है, और AI से बने ऐप्स के लिए security checklist लंबा संस्करण है।

चरण 9: प्रकाशित करें

जब मुख्य लूप, नियम और जाँचें पास हो जाएँ, तब प्रकाशित करें। Mythex पर यह एक क्लिक है, और ऐप को उसका database और hosting पहले से तैयार मिलता है, सार्वजनिक URL के साथ। Pro पर आप अपना domain जोड़ सकते हैं, जैसे book.sarasyoga.com; देखें custom domain कैसे जोड़ें।

लिंक भेजने से पहले प्रकाशित संस्करण को एक बार फिर जाँचें। अपने फ़ोन से एक क्लास बुक करें। Production और preview एक जैसे व्यवहार करने चाहिए, फिर भी पक्का करें।

चरण 10: पहले उपयोगकर्ता और अगला संस्करण

लिंक पाँच नियमित छात्रों को पहले दें, सभी को नहीं। उनसे कहें कि अपनी अगली क्लास इसी से बुक करें और बताएँ कि क्या उलझन वाला था। फिर उनके बताए पहले तीन मुद्दे ठीक करें।

कुछ हफ़्तों के असली उपयोग के बाद ऐसे ऐप की v2 सूची लगभग अपने-आप बन जाती है: भरी क्लासों के लिए waitlist, एक शाम पहले email reminders, और ऑनलाइन भुगतान वाले class packs। हर एक को वही प्रक्रिया मिलती है: कुछ पंक्तियों में spec, prompt, टेस्ट, प्रकाशन। payments जोड़ने के लिए ऐप में payments कैसे जोड़ें देखें। लोगों तक पहुँचने के लिए ऐप कैसे लॉन्च करें और पहले उपयोगकर्ता कैसे पाएँ।

इसे phone ऐप बनाना

कई स्टूडियो चाहते हैं कि छात्रों के फ़ोन पर उनका आइकन हो। Mythex Pro पर प्रकाशित ऐप Android ऐप (एक फ़ाइल जिसे आप Google Play पर अपलोड कर सकते हैं) और iPhone ऐप (आपकी अपनी App Store Connect key के साथ TestFlight पर), बिना Mac के, बन सकता है। Phone ऐप प्रकाशित web ऐप खोलता है, इसलिए हर अपडेट के प्रकाशन के साथ phone ऐप को भी वह मिल जाता है।

इससे क्या सीखें

Build खुद छोटा हिस्सा था। ऐप को उपयोगी बनाने वाली चीज़ें थीं spec की "v1 में नहीं" सूची, पहले मुख्य लूप की टेस्टिंग, capacity और पहुँच के लिए server-side नियम, और ज़्यादा लोगों से पहले पाँच असली उपयोगकर्ता। जब ऐप दूसरों के लिए काम करना चाहिए, तो vibe coding ऐसा ही दिखता है।

अपना ऐप आज़माने के लिए तैयार हैं? अपना एक-पेज का spec लिखें, फिर उसका पहला अनुच्छेद AI app builder में चिपकाएँ। और अधिक ऐप प्रकार और उनके पीछे के prompts देखने के लिए vibe coding उदाहरण पढ़ें।

सवाल