AI के साथ बुकिंग ऐप कैसे बनाएं
यहाँ Moremade को उदाहरण के रूप में लेकर AI के साथ बुकिंग ऐप बनाना सीखने का एक व्यावहारिक तरीका है। अंत तक, आपके पास मुख्य बुकिंग फ्लो, लाइव प्रीव्यू, और पब्लिश करने का स्पष्ट रास्ता वाला एक काम करने वाला वेब ऐप या मोबाइल ऐप प्रोटोटाइप होना चाहिए। अगर आपको अपनी बुकिंग नियमावली और कंटेंट पहले से पता है, तो एक बेसिक वर्ज़न आमतौर पर कुछ घंटों में बन जाता है।
सबसे पहले योजना बनाएं कि बुकिंग ऐप को वास्तव में क्या चाहिए
AI बिल्डर खोलने से पहले, ऐप के सबसे छोटे उपयोगी संस्करण को लिख लें।
बुकिंग या अपॉइंटमेंट ऐप के लिए, आम तौर पर इसका मतलब होता है:
- कौन बुक करता है: ग्राहक, स्टाफ, या दोनों
- क्या बुक किया जाता है: सेवाएँ, क्लासेस, रूम, कॉल्स, विज़िट्स
- समय कैसे काम करता है: फिक्स्ड स्लॉट, कस्टम अवधि, बफर टाइम, खुलने के घंटे
- उपयोगकर्ताओं को क्या करना है: उपलब्धता देखना, स्लॉट चुनना, कन्फर्म करना, रीशेड्यूल करना, कैंसिल करना
- एडमिन को क्या चाहिए: सेवाएँ, कीमतें, उपलब्धता, बुकिंग्स मैनेज करना
पहली स्क्रीनें लिखें जिनकी आपको ज़रूरत है। एक सरल संस्करण में अक्सर शामिल होते हैं:
- होम या लैंडिंग पेज
- सर्विस लिस्ट
- कैलेंडर या स्लॉट पिकर
- बुकिंग फ़ॉर्म
- कन्फर्मेशन स्क्रीन
- एडमिन बुकिंग व्यू
फिर मुख्य डेटा ऑब्जेक्ट्स को आसान भाषा में परिभाषित करें:
- Service: नाम, अवधि, कीमत, विवरण
- Staff or resource: नाम, कार्य समय, सेवा उपलब्धता
- Booking: ग्राहक का नाम, तारीख, समय, सेवा, स्थिति
- User: अगर साइन-इन चाहिए तो ग्राहक या एडमिन अकाउंट
यह प्लानिंग स्टेप महत्वपूर्ण है क्योंकि पहला प्रॉम्प्ट तब बेहतर काम करता है जब वह ऐप की संरचना साफ़ बताता है, बजाय इसके कि सिर्फ़ “मेरे लिए एक बुकिंग ऐप बनाओ” कहा जाए।
AI के साथ बुकिंग ऐप कैसे बनाएं के लिए पहला प्रॉम्प्ट लिखें
Moremade में आप साइट या ऐप को सामान्य भाषा में बताते हैं, और AI एजेंट सोर्स कोड लिख देता है। आप React + Tailwind में एक वेब ऐप या Expo के साथ React Native में एक मोबाइल ऐप से शुरुआत कर सकते हैं।
पहले प्रॉम्प्ट में AI को इतना विवरण दें कि वह फ्लो बना सके, लेकिन इतना नहीं कि आप एक साथ हर edge case हल करने लगें।
एक अच्छा पहला प्रॉम्प्ट इनमें शामिल होना चाहिए:
- ऐप का प्रकार: वेबसाइट या मोबाइल ऐप
- उपयोगकर्ता कौन है
- मुख्य स्क्रीनें
- बुकिंग नियम
- डिज़ाइन दिशा
- बाद में क्या edit किया जा सके
पहले प्रॉम्प्ट का उदाहरण:
एक छोटे अपॉइंटमेंट व्यवसाय के लिए एक साफ़-सुथरा वेब ऐप बनाएं जो ग्राहकों को सेवाएँ ऑनलाइन बुक करने दे। React और Tailwind का उपयोग करें। एक homepage, service list, booking flow, उपलब्ध time slots वाला calendar, customer details form, और confirmation page शामिल करें। upcoming bookings देखने के लिए एक admin view जोड़ें। सेवाओं में नाम, अवधि, कीमत, और description शामिल होनी चाहिए। एक simple neutral design, साफ़ buttons, और mobile-friendly layout का उपयोग करें। शुरुआत placeholder data से करें और layout को बाद में आसानी से edit करने योग्य रखें।
यह इतना है कि एक उपयोगी पहला वर्ज़न बन जाए, बिना AI को बहुत ज़्यादा अनुमान लगाने के लिए मजबूर किए।
Live preview देखें और specific follow-up prompts से सुधार करें
पहले build के बाद, live preview को एक असली उपयोगकर्ता की तरह देखें।
इन बुनियादी बातों की जाँच करें:
- क्या उपयोगकर्ता समझ सकता है कि क्या बुक किया जा रहा है?
- क्या service details साफ़ हैं?
- क्या date और time selection आसान है?
- क्या booking form सही जानकारी मांगता है?
- क्या confirmation screen booking summary दिखाती है?
- क्या mobile layout सही काम करता है?
Moremade में एक visual inspector शामिल है, इसलिए आप किसी element पर point करके उसे बदल सकते हैं। अगर generated code देखना हो, तो code view भी है।
Refine करते समय, छोटे और सटीक follow-up prompts लिखें। आम तौर पर broad prompts की तुलना में specific prompts बेहतर काम करते हैं।
उदाहरण:
- “Desktop पर service summary को right side पर ले जाएँ और date/time चुनते समय उसे fixed रखें।”
- “Appointments के बीच 15-minute buffer time जोड़ें और unavailable time slots छिपाएँ।”
- “बुकिंग फ़ॉर्म बदलें ताकि phone number optional हो, email required हो, और जब तक slot select न हो confirm button disabled रहे।”
इसी चरण में ऐप की ज़्यादातर quality बनती है। Generate करें, review करें, adjust करें, repeat करें।
Moremade paid plans पर version history भी रखता है, जो तब मदद करती है जब आप बदलावों की तुलना करना या पुराने state पर लौटना चाहते हैं।
अगर बुकिंग फ्लो को ज़रूरत हो तभी data और sign-in जोड़ें
पहले placeholder data से शुरू करें। जब screens और flow समझ में आने लगें, तब तय करें कि आपको real storage, user accounts, या payments चाहिए या नहीं।
अगर आपको चाहिए:
- real bookings database
- customer या admin sign-in
- file storage
तो Supabase उपयोग करें।
आम उदाहरण:
- एक salon app जो appointments store करती है और staff को bookings manage करने देती है
- एक coaching app जहाँ customer upcoming sessions देखने या reschedule करने के लिए login करते हैं
- समय के साथ bookings track करने के लिए एक admin dashboard
अगर booking का हिस्सा payment है, तो Stripe उपयोग करें।
आम उदाहरण:
- paid consultations जो पहले ही book की जाती हैं
- classes या events जिनकी fixed price है
- appointment confirm करने से पहले deposit की ज़रूरत
Moremade में Supabase और Stripe के लिए built-in connectors हैं। integration prompt को उसी workflow पर focused रखें जिसकी आपको ज़रूरत है।
उदाहरण:
- “इस app को Supabase से connect करें और bookings को service, date, time, customer name, email, और status के साथ store करें।”
- “Supabase के साथ admin sign-in जोड़ें और upcoming bookings की private dashboard list दिखाएँ।”
- “Stripe checkout जोड़ें ताकि users booking confirm होने से पहले service के लिए payment करें। flow में चुनी गई service price का उपयोग करें।”
सिर्फ़ इसलिए sign-in या payments न जोड़ें क्योंकि आप जोड़ सकते हैं। कई शुरुआती versions के लिए, simple booking request flow users के साथ test करना आसान होता है।
Publish करने से पहले mobile पर booking flow test करें
एक booking app का ज़्यादातर उपयोग अक्सर phones पर होता है, भले ही वह website के रूप में बनाया गया हो। छोटे screen का behaviour जल्दी test करें।
इन आम समस्याओं पर ध्यान दें:
- date picker या slot list पर tap करना मुश्किल है
- sticky buttons content को ढक रहे हैं
- forms बहुत लंबे हैं
- time slot cards ठीक से wrap नहीं हो रहे
- summary text पढ़ने योग्य नहीं रहता
अगर आप mobile app बना रहे हैं, तो Moremade React Native with Expo generate करता है। अगर आप website बना रहे हैं, तो output React + Tailwind होता है, इसलिए आपको responsive layouts की फिर भी सावधानी से test करनी चाहिए।
Testing के दौरान उपयोगी prompts:
- “बुकिंग steps के लिए mobile layout बेहतर करें ताकि हर section साफ़ stack हो और buttons thumb-friendly हों।”
- “छोटे screens पर time slots बड़े करें और columns की संख्या कम करें।”
- “बुकिंग flow को step-by-step mobile wizard में बदलें, ऊपर progress के साथ।”
पूरा path खुद कई बार चलाकर देखें। फिर एक या दो लोगों से बिना guidance के slot book करने को कहें। देखें वे कहाँ रुकते हैं।
App publish करें और अपना domain connect करें
जब flow काम करने लगे, तो हर detail perfect होने का इंतज़ार करने के बजाय एक working version publish करें।
Moremade के साथ, आप एक free yourname.moremade.ai subdomain पर one click में publish कर सकते हैं। Paid plans custom domain connect कर सकते हैं। Domains Moremade के अंदर भी खरीदे जा सकते हैं।
एक सरल launch process कुछ ऐसा दिखता है:
- पहले subdomain पर publish करें
- live app को end to end test करें
- आख़िरी layout या copy की समस्याएँ ठीक करें
- ज़रूरत हो तो custom domain connect करें
आप किसी भी समय full source code को ZIP के रूप में export कर सकते हैं या GitHub पर push कर सकते हैं। यह तब महत्वपूर्ण है जब आप copy रखना चाहते हों, platform के बाहर code review करना चाहते हों, या बाद में कहीं और development जारी रखना चाहते हों।
शुरुआती user testing के लिए free subdomain आमतौर पर पर्याप्त होता है। जब app ग्राहकों के सामने हो या किसी मौजूदा business site का हिस्सा हो, तब custom domain उपयोग करें।
आम गलतियाँ जिनसे बचना चाहिए
सबसे बड़ी गलतियाँ आमतौर पर scope और workflow की होती हैं, code की नहीं।
इन बातों से सावधान रहें:
- बहुत vague prompt से शुरू करना। “एक booking app बनाओ” बहुत कुछ अनुमान पर छोड़ देता है।
- एक साथ हर feature जोड़ देना। accounts, payments, reminders, या multiple staff roles जोड़ने से पहले एक booking path को काम करने दें।
- बुकिंग नियम छोड़ देना। अगर durations, availability, या booking status rules साफ़ नहीं हैं, तो generated UI भी साफ़ नहीं होगा।
- बहुत जल्दी real integrations का उपयोग करना। Placeholder data product को shape देने के लिए तेज़ होता है।
- cancellation या rescheduling test न करना। ये appointment products के core हिस्से हैं।
- mobile behaviour को नज़रअंदाज़ करना। जो booking forms desktop पर ठीक लगते हैं, वे phones पर अक्सर टूट जाते हैं।
- अपना code export न करना। ZIP export रखें या GitHub पर push करें ताकि source हमेशा आपके पास रहे।
एक अच्छा नियम है कि पहले वर्ज़न को working draft मानें। सबसे छोटा उपयोगी path बनाएं, उसे test करें, फिर logic और design को और मजबूत करें।
यह प्रॉम्प्ट आज़माएँ
एक छोटे अपॉइंटमेंट व्यवसाय के लिए एक साफ़-सुथरा वेब ऐप बनाएं जो ग्राहकों को सेवाएँ ऑनलाइन बुक करने दे। React और Tailwind का उपयोग करें। एक homepage, service list, booking flow, उपलब्ध time slots वाला calendar, customer details form, और confirmation page शामिल करें। upcoming bookings देखने के लिए एक admin view जोड़ें। सेवाओं में नाम, अवधि, कीमत, और description शामिल होनी चाहिए। एक simple neutral design, साफ़ buttons, और mobile-friendly layout का उपयोग करें। शुरुआत placeholder data से करें और layout को बाद में आसानी से edit करने योग्य रखें।
प्रश्न
Moremade में बुकिंग ऐप बनाने का कितना खर्च आता है?
Moremade usage को Build Units में मापता है। एक first site build लगभग 8 units का होता है, और एक छोटा edit लगभग 1 unit का। Free plan $0 का है और इसमें हर 30 दिनों में 10 Build Units, moremade.ai subdomain पर publishing, और ZIP export शामिल है। Standard $17/month billed yearly या $20 monthly है, जिसमें हर 30 दिनों में 100 units, custom domain support, private project hosting, और version history मिलती है। Pro $167/month billed yearly या $200 monthly है, जिसमें हर 30 दिनों में 750 units, priority generation, unlimited projects, और priority support शामिल है। Paid plans में extra Build Unit packs भी खरीदे जा सकते हैं।
क्या मुझे code आना ज़रूरी है?
नहीं। आप ऐप को सामान्य भाषा में describe कर सकते हैं, live preview review कर सकते हैं, और chat से बदलाव कर सकते हैं। फिर भी screens, data, और booking rules के बारे में साफ़ सोचना मदद करता है। अगर आपको code आता है, तो code view और source export परियोजना को manually inspect या continue करना आसान बनाते हैं।
क्या मुझे booking app का code ownership मिलता है?
आप किसी भी समय full source code को ZIP के रूप में export कर सकते हैं या GitHub पर push कर सकते हैं। Websites React + Tailwind code के रूप में generate होती हैं, और mobile apps React Native with Expo में होती हैं। इसका मतलब है कि आप platform के अंदर फँसे नहीं हैं।
क्या मुझे sign-in और payments तुरंत जोड़ने चाहिए?
सिर्फ़ तभी जब पहले version को उनकी ज़रूरत हो। जब stored bookings, user accounts, या admin access चाहिए, तब Supabase उपयोग करें। जब customers को booking के दौरान pay करना हो, तब Stripe उपयोग करें। अगर आप अभी भी flow test कर रहे हैं, तो placeholder data से शुरू करना आमतौर पर तेज़ होता है।
क्या मैं बाद में app को scale या customize कर सकता हूँ?
हाँ। व्यावहारिक तरीका यह है कि पहले एक छोटा working version बनाएं, फिर app स्पष्ट होने पर और booking rules, admin tools, data storage, या payments जोड़ें। क्योंकि आप source code export कर सकते हैं या GitHub पर push कर सकते हैं, आपकी ज़रूरतें बढ़ने पर आप Moremade के बाहर भी development जारी रख सकते हैं।