vibe coding ने अ‍ॅप कसे बनवायचे: कल्पनेपासून प्रकाशित अ‍ॅपपर्यंत

vibe coding ने अ‍ॅप बनवण्यासाठी पहिल्या आवृत्तीचे एक-पानी वर्णन लिहा, ते तुमचा पहिला प्रॉम्प्ट म्हणून AI अ‍ॅप बिल्डरला द्या, आणि मग अ‍ॅपला छोट्या, चाचणी केलेल्या टप्प्यांत वाढवा: डेटा, लॉगिन, मुख्य कार्यप्रवाह, पॉलिश, सुरक्षा पुनरावलोकन, आणि शेवटी प्रकाशन. हे मार्गदर्शक एका उदाहरण प्रोजेक्टचा पाठपुरावा करते, एका छोट्या योगा स्टुडिओसाठी वर्ग बुकिंग अ‍ॅप, प्रत्येक टप्प्यावर वापरलेल्या प्रॉम्प्ट्ससह.

तुम्ही याआधी असे काही बनवले नसेल, तर आमचे नवशिक्यांसाठी vibe coding ट्यूटोरियल लहानापासून सुरू होते. vibe coding शी बांधलेले नसलेले व्यापक विहंगावलोकन हवे असेल तर AI ने अ‍ॅप कसे बनवायचे पाहा.

प्रोजेक्ट

सारा नावाची एक योगा स्टुडिओ मालक कल्पना करा, जी आठवड्यात आठ वर्ग चालवते. बुकिंग WhatsApp वरून येतात; ती प्रत्येक वर्गासाठी कागदी यादी ठेवते आणि अनेकदा जास्त बुकिंग होते. तिला हे हवे आहे:

• विद्यार्थ्यांनी आठवड्याचे वेळापत्रक पाहून जागा बुक करावी.
• प्रत्येक वर्गाला क्षमता असावी.
• प्रत्येक वर्गासाठी यादी असावी, जी ती दारावर तपासू शकेल.
• विद्यार्थ्यांनी दोन तास आधीपर्यंत रद्द करता यावे.

हीच संपूर्ण पहिली आवृत्ती आहे. पेमेंट्स नाहीत, मेंबरशिप नाही, अ‍ॅप स्टोअर नाही. ते नंतर येतील, किंवा कधीच नाही.

स्टेप 1: एक-पानी स्पेक लिहा

कोणतेही टूल उघडण्यापूर्वी पहिली आवृत्ती साध्या शब्दांत लिहून ठेवा. इथे दहा मिनिटे घालवल्याने तासन्तास वाचतात. उपयुक्त रचना:

• कोण वापरतो: विद्यार्थी (बुक आणि रद्द करतात), सारा (वर्ग व्यवस्थापित करते, यादी पाहते).
• स्क्रीन्स: वेळापत्रक, वर्गाचा तपशील, माझी बुकिंग्ज, प्रशासक वर्ग, प्रशासक वर्ग यादी.
• डेटा: वर्ग (नाव, शिक्षक, सुरुवातीची वेळ, लांबी, क्षमता), बुकिंग्ज (विद्यार्थी, वर्ग, स्थिती), विद्यार्थी (नाव, ईमेल, फोन).
• नियम: पूर्ण वर्गात बुकिंग नाही; प्रति विद्यार्थी प्रति वर्ग एकच बुकिंग; दोन तास आधीपर्यंत रद्द; फक्त सारा प्रशासक पाने पाहू शकते.
• v1 मध्ये नाही: पेमेंट्स, वर्ग पॅक्स, वेटलिस्ट, स्मरणपत्रे.

"v1 मध्ये नाही" यादी सर्वात महत्त्वाची आहे. तीच बांधणी पूर्ण करता येईल याची खात्री करते. अधिक सविस्तर स्पेक हवा असेल तर AI सह प्रॉडक्ट रिक्वायरमेंट्स डॉक लिहिणे यावरील मार्गदर्शक पुढे जाते.

स्टेप 2: संपूर्ण लूप हाताळणारे टूल निवडा

डेटाबेस, लॉगिन आणि सार्वजनिक URL असलेल्या अ‍ॅपसाठी, फाईल्स देणाऱ्या चॅट असिस्टंटऐवजी कोड चालवणारे, डेटाबेस जोडणारे आणि प्रकाशित करणारे AI अ‍ॅप बिल्डर वापरा. आमची vibe coding टूल्सची तुलना पर्याय सांगते. इथे आम्ही Mythex वापरू, कारण ते प्रत्येक टप्पा एकाच ठिकाणी कव्हर करते: चॅट, लाइव्ह प्रिव्ह्यू, खरा डेटाबेस आणि फाईल स्टोरेज, आणि एका क्लिकमध्ये प्रकाशन.

स्टेप 3: पहिला प्रॉम्प्ट

स्पेकचे एका परिच्छेदात रूपांतर करा. सर्व तपशिलांसह संपूर्ण दस्तऐवज एकदम पेस्ट करू नका; मुख्य गोष्ट द्या आणि बाकीचे टप्प्याटप्प्याने जोडा.

माझ्या योगा स्टुडिओसाठी वर्ग बुकिंग अ‍ॅप बनवा. विद्यार्थी नाव, ईमेल आणि फोन देऊन साइन अप करतात, या आठवड्याचे वेळापत्रक पाहतात आणि एका वर्गात जागा बुक करतात. प्रत्येक वर्गाला नाव, शिक्षक, सुरुवातीची वेळ, लांबी आणि क्षमता असते; पूर्ण वर्ग "Full" दाखवतो आणि बुक होऊ शकत नाही. विद्यार्थी त्यांच्या बुकिंग्ज पाहतात आणि वर्गाच्या दोन तास आधीपर्यंत रद्द करू शकतात. मी प्रशासक आहे: मी वर्ग जोडू आणि संपादित करू शकतो आणि प्रत्येक वर्गासाठी कोण बुक आहे त्याची यादी पाहू शकतो. शांत, साधे डिझाइन जे फोनवर चांगले चालेल.

टूलने तुम्हाला नीट समजले आहे याची खात्री नसेल तर आधी योजना मागा. Mythex मध्ये Plan मोड कोड लिहिण्यापूर्वी स्क्रीन्स आणि डेटा मांडतो, आणि तुम्ही त्याला मंजुरी देता.

स्टेप 4: मुख्य लूप चालू करा

मुख्य लूप म्हणजे अ‍ॅप ज्यासाठी आहे ती एकच गोष्ट: विद्यार्थी वर्ग बुक करतो, आणि सारा ते पाहते. फक्त तेवढेच तपासा:

1. विद्यार्थी म्हणून साइन अप करा, एक वर्ग बुक करा.
2. प्रशासक दृश्य उघडा. बुकिंग तिथे आहे का?
3. तोच वर्ग पुन्हा बुक करा. ते नाकारले गेले पाहिजे.
4. एका वर्गाची क्षमता 2 ठेवा, दोन विद्यार्थी खात्यांवरून बुक करा, तिसऱ्याचा प्रयत्न करा.

या टप्प्यावर सामान्यतः दोन समस्या दिसतात. वेळापत्रक सर्व्हरच्या टाइम झोनमधील वेळा दाखवते, स्टुडिओच्या नाही. आणि "Full" तपासणी फक्त पेजवर होते, त्यामुळे वेगाने डबल-क्लिक केल्यास दोन बुकिंग्ज तयार होतात.

सर्व वर्गांच्या वेळा स्टुडिओच्या टाइम झोनमध्ये दाखवा, [Asia/Dubai], अभ्यागताच्या डिव्हाइसची सेटिंग काहीही असली तरी.

बुकिंग तयार होताना क्षमता आणि डुप्लिकेट बुकिंग्ज फक्त पेजवर नाही तर सर्व्हरवर तपासा. शेवटच्या जागेसाठी दोन विनंत्या एकाच वेळी आल्यास फक्त एकच यशस्वी झाली पाहिजे.

काहीही जोडण्यापूर्वी मुख्य लूप दुरुस्त करा. बाकी सर्व त्यावर अवलंबून आहे.

स्टेप 5: उरलेले नियम, एका संदेशात एक

आता स्पेकचे नियम एका वेळी एक करून पाहा:

विद्यार्थी वर्ग सुरू होण्याच्या दोन तास आधीपर्यंत बुकिंग रद्द करू शकतात. त्यानंतर रद्द करण्याचे बटण लपवा आणि सर्व्हरवर स्पष्ट संदेशासह रद्द करण्यास नकार द्या.

फक्त माझे खाते प्रशासक पाने उघडू शकेल. हे प्रत्येक प्रशासक क्रियेसाठी सर्व्हरवर तपासले जाईल याची खात्री करा, फक्त मेनू लपवून नाही.

प्रत्येक नियमानंतर त्याची चाचणी घ्या, आणि ते काम करेपर्यंत पुढे जाऊ नका. एखादा बदल काही मोडत असेल तर शेवटच्या चांगल्या चेकपॉइंटवर परत जा आणि दुरुस्त्यांचा ढीग न लावता अधिक स्पष्ट विनंती करून पाहा.

स्टेप 6: खऱ्या वापरकर्त्यांच्या लक्षात येणाऱ्या गोष्टी पॉलिश करा

खरे वापरकर्ते छोट्या गोष्टी लक्षात घेतात. साराच्या अ‍ॅपसाठी एक छोटी यादी:

• रिक्त स्थिती: कोरे पेज दाखवण्याऐवजी "या आठवड्यात अजून वर्ग नाहीत".
• पुष्टी: बुक केल्यानंतर "तुमची Vinyasa साठी बुकिंग झाली आहे, मंगळवार 18:00".
• फोन लेआउट: मोठी बटणे, 375px स्क्रीनवर वाचता येणारे वेळापत्रक.
• उरलेल्या जागा: प्रत्येक वर्गावर "3 जागा शिल्लक", जेणेकरून विद्यार्थी लवकर बुक करतील.

प्रत्येक वर्ग कार्डवर उरलेल्या जागा दाखवा, उदा. "12 पैकी 3 शिल्लक". बुकिंगनंतर वर्गाचे नाव, दिवस आणि वेळ असलेली पुष्टी आणि माझ्या बुकिंग्जसाठी बटण दाखवा.

स्टेप 7: अनोळखी व्यक्तीसारखी चाचणी घ्या

इतर कोणी वापरण्यापूर्वी, अर्धा तास ते तोडण्याचा प्रयत्न करण्यात घालवा:

किनारी प्रकरणे तपासण्यासाठी तुम्ही AI लाही सांगू शकता:

खऱ्या विद्यार्थ्याने बुकिंग किंवा रद्द करण्यात अडथळा आणू शकतील अशा दहा गोष्टींची यादी करा, प्रत्येकाची चाचणी घ्या आणि जे अपयशी ठरेल ते दुरुस्त करा. तुम्ही काय बदलले ते सांगा.

स्टेप 8: सुरक्षा पुनरावलोकन

हे अ‍ॅप नावे, ईमेल आणि फोन नंबर साठवते, त्यामुळे छोटे सुरक्षा पुनरावलोकन फायद्याचे आहे. मुख्य प्रश्न:

• एक विद्यार्थी दुसऱ्याची बुकिंग्ज किंवा संपर्क तपशील पाहू शकतो का?
• ब्राउझरमध्ये चालणाऱ्या कोडमध्ये कोणतीही की किंवा पासवर्ड आहेत का?
• साइन-अप फॉर्म बॉट्सपासून संरक्षित आहे का?
• डेटाचा बॅकअप आहे का?

vibe coding सुरक्षित आहे का यावरील पान प्रत्येक तपासणी समजावते आणि त्यांसाठी प्रॉम्प्ट्स देते, आणि AI ने बनवलेल्या अ‍ॅप्ससाठी सुरक्षा चेकलिस्ट ही मोठी आवृत्ती आहे.

स्टेप 9: प्रकाशित करा

मुख्य लूप, नियम आणि तपासण्या पास झाल्यावर प्रकाशित करा. Mythex वर ते एका क्लिकमध्ये होते, आणि अ‍ॅपला डेटाबेस व होस्टिंगसह सार्वजनिक URL मिळते. Pro वर तुम्ही book.sarasyoga.com सारखे स्वतःचे डोमेन जोडू शकता; कस्टम डोमेन कसे जोडायचे पाहा.

लिंक पाठवण्यापूर्वी प्रकाशित आवृत्ती पुन्हा एकदा तपासा. तुमच्या फोनवरून एक वर्ग बुक करा. प्रॉडक्शन आणि प्रिव्ह्यू एकसारखे वागायला हवेत, पण खात्री करा.

स्टेप 10: पहिले वापरकर्ते आणि पुढची आवृत्ती

सर्वांना नव्हे, तर आधी पाच नियमित विद्यार्थ्यांना लिंक द्या. त्यांना त्यातून त्यांचा पुढचा वर्ग बुक करायला सांगा आणि काय गोंधळात टाकणारे होते ते सांगायला सांगा. मग ते नमूद करतील त्या पहिल्या तीन गोष्टी दुरुस्त करा.

खऱ्या वापराचे काही आठवडे झाल्यावर अशा अ‍ॅपसाठी v2 यादी सहसा आपोआप तयार होते: पूर्ण वर्गांसाठी वेटलिस्ट, आदल्या संध्याकाळी ईमेल स्मरणपत्रे, आणि ऑनलाइन दिलेले वर्ग पॅक्स. प्रत्येकाला तोच उपचार मिळतो: काही ओळींत स्पेक, प्रॉम्प्ट, चाचणी, प्रकाशन. पेमेंट्स जोडण्यासाठी तुमच्या अ‍ॅपमध्ये पेमेंट कसे जोडायचे पाहा. शब्द पसरवण्यासाठी, अ‍ॅप लाँच करून पहिले वापरकर्ते कसे मिळवायचे पाहा.

फोन अ‍ॅपमध्ये रूपांतर

अनेक स्टुडिओंना विद्यार्थ्यांच्या फोनवर आयकॉन हवा असतो. Mythex Pro वर प्रकाशित अ‍ॅप Android अ‍ॅप (Google Play वर अपलोड करता येणारी फाईल) आणि तुमच्या स्वतःच्या App Store Connect कीने TestFlight वर पाठवलेले iPhone अ‍ॅप बनू शकते, Mac शिवाय. फोन अ‍ॅप प्रकाशित वेब अ‍ॅप उघडते, त्यामुळे तुम्ही प्रत्येक अपडेट प्रकाशित करता तेव्हा फोन अ‍ॅपमध्येही तेच असते.

यातून काय घ्यायचे

बांधणी स्वतः लहान भाग होता. अ‍ॅप वापरण्यायोग्य बनवले ते स्पेकची "v1 मध्ये नाही" यादी, इतर काहीही आधी मुख्य लूपची चाचणी, क्षमता आणि प्रवेशासाठी सर्व्हर बाजूचे नियम, आणि पन्नास आधी पाच खरे वापरकर्ते. अ‍ॅपने इतरांसाठी काम करायला हवे असते तेव्हा vibe coding असे दिसते.

तुमचे स्वतःचे करून पाहायला तयार आहात? तुमचे एक-पानी स्पेक लिहा, मग पहिला परिच्छेद AI अ‍ॅप बिल्डर मध्ये पेस्ट करा. इतर अ‍ॅप प्रकार आणि त्यामागचे प्रॉम्प्ट पाहायचे असतील तर आमची vibe coding उदाहरणे वाचा.

प्रश्न