फुल-स्टॅक अॅप म्हणजे काय? सोप्या भाषेत स्पष्टीकरण

फुल-स्टॅक अॅप म्हणजे असे अॅप ज्यात त्याला काम करण्यासाठी लागणारे प्रत्येक थर समाविष्ट असतात: लोक पाहतात आणि क्लिक करतात तो frontend, सर्व्हरवर चालणारा आणि नियम लागू करणारा backend, आणि सर्व काही लक्षात ठेवणारा डेटाबेस. तुमची कामे साठवणारी, तुम्हाला कोणत्याही डिव्हाइसवरून लॉगिन करू देणारी आणि तुमची यादी कोणालाही न दाखवणारी to-do यादी फुल-स्टॅक आहे. फक्त तुमची कार्यालयीन वेळ दाखवणारे एक पेज नाही.

"स्टॅक" म्हणजे फक्त तंत्रज्ञानाचे एकावर एक रचलेले थर. "फुल" म्हणजे ते सर्व थर तिथे आहेत.

AI सह तयार करताना हे का महत्त्वाचे आहे

तुम्ही AI बिल्डरला अॅप वर्णन करता तेव्हा तुम्ही वापरलेले शब्द कोणते थर बांधले जातील हे ठरवतात. "आमचा मेनू दाखवणारे पेज बनवा" तर frontend तयार करते. "ग्राहकांना आमच्या मेनूमधून ऑर्डर करू द्या आणि स्वयंपाकघराला नवीन ऑर्डर्स दिसू द्या" यासाठी तिन्ही थर लागतात, कारण ऑर्डर्स जतन कराव्या लागतात, दोन प्रकारच्या वापरकर्त्यांमध्ये शेअर कराव्या लागतात आणि खाजगी ठेवाव्या लागतात.

थरांमधील फरक समजल्याने तुम्हाला तीन प्रकारे मदत होते:

• योग्य गोष्ट मागता येते. डेटा जतन व्हावा असे असेल तर तसे स्पष्ट सांगा. फक्त frontend बनवणारा बिल्डर पूर्ण दिसेल, पण रिफ्रेशवर सर्व विसरेल.
• खोटी पूर्णता ओळखता येते. नमुना डेटा असलेला डेमो आणि चालणारे अॅप सारखेच दिसू शकतात. थर माहीत असतील तर डेटा खरोखर कुठे जातो ते तपासता येते.
• चालवण्याचा खर्च समजतो. फक्त frontend स्थिर फाइल्स म्हणून दिला जाऊ शकतो. backend आणि डेटाबेस सर्व्हरवर चालणारे प्रोग्राम्स आहेत, आणि तिथूनच बहुतेक होस्टिंग खर्च येतो.

रोजच्या उदाहरणातून: एक रेस्टॉरंट

एका रेस्टॉरंटचा विचार करा.

• जेवणाची खोली म्हणजे frontend. मेनू, टेबल्स आणि वेटरची नोंदवही. पाहुण्यांना जे दिसते ते हेच आहे, आणि ते सुखद आणि वापरायला सोपे असायला हवे.
• स्वयंपाकघर म्हणजे backend. पाहुणे आत जात नाहीत. तिथे ऑर्डर्स घेतल्या जातात, पदार्थ उपलब्ध आहे का ते तपासले जाते, तो शिजवला जातो, आणि विचित्र विनंत्या नाकारल्या जातात. नियम इथेच राहतात.
• पॅन्ट्री आणि ऑर्डर बुक म्हणजे डेटाबेस. त्यात काय आहे आणि काय ऑर्डर झाले आहे ते असते, त्यामुळे शिफ्ट बदलताना काहीही विसरले जात नाही.

फक्त जेवणाची खोली असलेले रेस्टॉरंट छान मेनू दाखवू शकते, पण तुम्हाला जेवण मिळत नाही. हे फक्त frontend असलेले अॅप आहे जे फुल-स्टॅक असल्याचे भासवत आहे.

तिन्ही थर अधिक तपशिलात

हे थर ठरलेल्या क्रमाने एकमेकांशी बोलतात. frontend backend ला API द्वारे काहीतरी विचारतो — म्हणजे backend स्वीकारत असलेल्या विनंत्यांचा ठरावीक संच. backend विनंती तपासतो, डेटाबेस वाचतो किंवा लिहितो आणि उत्तर परत पाठवतो. frontend थेट डेटाबेसशी बोलत नाही.

हा क्रम हा संपूर्ण स्टॅकमधील सर्वात महत्त्वाचा सुरक्षा विचार आहे. भेट देणारा frontend मधील कोणतीही गोष्ट वाचू आणि बदलू शकतो, कारण ती त्याच्या डिव्हाइसवर चालते. त्यामुळे "फक्त मालक हा इनव्हॉइस पाहू शकतो", "कूपन एकदाच वापरता येईल" असे नियम backend मध्ये लागू झाले पाहिजेत. या विभागणीबद्दल अधिक माहितीसाठी frontend विरुद्ध backend पहा.

एक उदाहरण: वर्ग बुकिंग अॅप

समजा तुम्ही योगा स्टुडिओ चालवता आणि लोकांना ऑनलाइन वर्ग बुक करू द्यायचे आहेत.

भेट देणारा काय करतो: साइट उघडतो, या आठवड्याचे वर्ग पाहतो, एकावर टॅप करतो, साइन इन करतो आणि जागा बुक करतो.

आतमध्ये काय होते:

1. frontend वेळापत्रक दाखवते. ते भरण्यासाठी backend ला विचारते, "या आठवड्यात कोणते वर्ग आहेत, आणि प्रत्येकात किती जागा शिल्लक आहेत?"
2. backend डेटाबेसला वर्ग विचारते, प्रत्येक वर्गाच्या बुकिंग्स मोजते आणि उत्तर देते.
3. भेट देणारा Book वर टॅप करतो. frontend पाठवते "या साइन इन केलेल्या व्यक्तीसाठी वर्ग 42 बुक करा".
4. backend तपासते: ही व्यक्ती खरोखर साइन इन आहे का? वर्ग भरलेला आहे का? त्यांनी आधीच हा वर्ग बुक केलेला आहे का? सर्व ठीक असेल तरच ते डेटाबेसमध्ये नवीन बुकिंगची रांग लिहिते.
5. backend "booked" असे उत्तर देते, आणि frontend पुष्टीकरण दाखवते.
6. नंतर स्टुडिओची मालक लॉगिन करते आणि वर्गांची यादी पाहते. backend तपासते की ती admin आहे, मगच सर्वांची नावे दाखवली जातात.

आता कल्पना करा की हे फक्त frontend म्हणून बांधले गेले. वेळापत्रक दिसेल, आणि Book बटण छान टिक दाखवेल, पण रिफ्रेशवर बुकिंग गायब होईल, "किती जागा शिल्लक" हा आकडा इतरांसाठी चुकीचा असेल, आणि मालकाला ते कधीच दिसणार नाही. चौथी पायरी — तपासण्या — पूर्णपणे गायब असेल. हाच प्रत्यक्ष फरक आहे.

महत्त्वाच्या संज्ञा

• Frontend (client side): ब्राउझरमध्ये चालणारा भाग.
• Backend (server side): सर्व्हरवर चालणारा भाग. त्याला API server देखील म्हणतात.
• Database: जिथे डेटा व्यवस्थित ठेवला जातो. पाहा डेटाबेस म्हणजे काय.
• API: backend स्वीकारत असलेल्या विनंत्यांची यादी, frontend किंवा इतर प्रोग्राम्सकडून.
• Authentication: कोण आहे ते तपासणे (लॉगिन). Authorisation: त्याला काय करण्याची परवानगी आहे ते तपासणे.
• Deployment: सार्वजनिक वापरासाठी सर्व थर सर्व्हरवर ठेवणे.
• Monolith विरुद्ध services: सर्व काही करणारा एकच प्रोग्राम, विरुद्ध अनेक लहान प्रोग्राम्स (उदाहरणार्थ वेबसाइट आणि वेगळा API). दोन्ही फुल-स्टॅक आहेत.

सामान्य चुका आणि गैरसमज

• "दिसते पूर्ण, म्हणजे पूर्ण झाले." नमुना डेटा आणि चालणाऱ्या दिसणाऱ्या बटणापेक्षा जतन केलेला डेटा वेगळा असतो. पेज रिफ्रेश करा, खाजगी विंडोमध्ये उघडा, आणि डेटा अजूनही आहे का ते तपासा.
• नियम frontend मध्ये ठेवणे. बटण लपवणे ही सुरक्षा नाही. backend ने तपासले नाही, तर विनंती माहीत असलेला कोणीही ती पाठवू शकतो.
• गुप्त keys frontend मध्ये ठेवणे. ब्राउझर कोडमधील पेमेंट किंवा AI provider key प्रत्येक भेट देणाऱ्याला वाचता येते. keys backend वर, एन्व्हायर्नमेंट व्हेरिएबल्स आणि सिक्रेट्स मध्ये असाव्यात.
• फुल-स्टॅक म्हणजे गुंतागुंतीचे असा समज. एक लहान फुल-स्टॅक अॅप काही स्क्रीन, मूठभर backend routes आणि तीन डेटाबेस tables असलेले असू शकते. तो थरांचे वर्णन आहे, आकाराचे नव्हे.
• प्रत्येक तंत्रज्ञान स्वतः निवडावे लागेल असा समज. पहिल्या आवृत्तीसाठी कोणताही व्यवस्थित, व्यापकपणे वापरला जाणारा स्टॅक चालतो. डेटा आणि नियमांचे स्पष्ट वर्णन अधिक महत्त्वाचे आहे.

तुमच्या AI बिल्डरकडे काय मागावे

तुम्ही थरांची नावे घेतली नसली तरी अॅपचे वर्णन तीन थरांच्या संदर्भात करा:

• डेटा: "वर्ग (नाव, वेळ, क्षमता) आणि बुकिंग्स (वर्ग, व्यक्ती, बुक केलेली वेळ) डेटाबेसमध्ये साठवा."
• नियम: "क्षमतेपेक्षा जास्त बुकिंग होऊ शकत नाही. एक व्यक्ती एका वर्गाला एकदाच बुक करू शकते. फक्त admins कोण बुक झाले ते पाहू शकतील."
• स्क्रीन्स: "साप्ताहिक वेळापत्रक, बुकिंग पुष्टीकरण, प्रत्येक वर्गाच्या बुकिंग्सची यादी दाखवणारे admin पेज."
• तपासण्या: "हे नियम फक्त पेजमध्ये नव्हे तर सर्व्हरवर लागू करा. सर्व API keys सर्व्हरवर ठेवा."

मग संशयी व्यक्तीप्रमाणे चाचणी करा: रिफ्रेश करा, दोन वेगवेगळ्या व्यक्तींनी साइन इन करा, आणि जो डेटा तुम्ही पाहू नये तो पाहण्याचा प्रयत्न करा. AI सह अॅप कसे बनवावे हे मार्गदर्शक ही प्रक्रिया सुरुवातीपासून शेवटपर्यंत दाखवते.

Mythex वरील फुल-स्टॅक अॅप्स

Mythex चॅट वर्णनावरून फुल-स्टॅक वेब अॅप्स बनवते. डीफॉल्टने नवीन अॅपला React आणि TypeScript frontend मिळतो; अॅपला डेटा साठवायचा असेल तेव्हा Mythex प्रोजेक्टमध्ये एक समर्पित Postgres डेटाबेस जोडते, आणि तुम्ही वेबसाइटसोबत (उदाहरणार्थ Python, Node, C# किंवा Java मध्ये) वेगळा API server मागू शकता. सर्व काही एकत्र live preview मध्ये चालते आणि सार्वजनिक URL वर publish होते. मल्टी-सर्व्हिस अॅप्स वरील docs पेज दाखवते की वेबसाइट आणि API एकत्र कसे preview आणि publish होतात, आणि फुल-स्टॅक अॅप बिल्डर पेजवर सुरुवातीचे पर्याय आहेत.

प्रश्न