इस ट्यूटोरियल में, हम इस पर करीब से नज़र डालेंगे कि आप Bubble और AppMaster को कैसे एकीकृत कर सकते हैं। मान लीजिए कि विकसित किए जा रहे एप्लिकेशन का फ्रंट-एंड Bubble में बनाया गया है, लेकिन बैक-एंड के साथ काम करने की इसकी क्षमताएं अपर्याप्त हैं, और आप AppMaster कार्यक्षमता का उपयोग करना चाहते हैं।
आइए जानें कैसे:
- Bubble के लिए एक डेटाबेस के रूप में AppMaster का उपयोग करें
- Appmaster को एपीआई अनुरोध भेजें
- उपयोगकर्ता प्रमाणीकरण करें
- अनुरोध हेडर में प्राधिकरण टोकन का प्रयोग करें
API Connector कॉन्फ़िगर करना
सबसे पहले, आपको Bubble से बाहरी एपीआई अनुरोध भेजने की बहुत संभावना बनाने की जरूरत है। ऐसा करने के लिए, आपको API Connector प्लगइन जोड़ना होगा।
आइए AppMaster को प्रमाणीकरण अनुरोध भेजने के लिए इसे तुरंत कॉन्फ़िगर करें। हमारा कार्य प्रतिक्रिया में एक प्राधिकरण टोकन प्राप्त करने के लिए एक लॉगिन और पासवर्ड भेजना है। हम प्रत्येक प्रोजेक्ट में डिफ़ॉल्ट रूप से बनाए गए मानक समापन बिंदु का उपयोग करेंगे - POST /auth/ (Auth: Authentication) । इसके बारे में पूरी जानकारी, आपके प्रोजेक्ट में अनुरोध करने के लिए सटीक पते के साथ, स्वैगर से प्राप्त की जा सकती है।
API Connector को कॉन्फ़िगर करने के लिए, Add Another API बटन पर क्लिक करें और उपयोग किए जाने वाले अनुरोध पैरामीटर सेट करें। प्रमुख पैरामीटर हैं:
- अनुरोध विधि। POST
- यूआरएल. Swagger से Request URL के समान
- Use as. Data । जवाब में, आपको प्राधिकरण टोकन डेटा प्राप्त करने की आवश्यकता है।
- Data type. JSON
- Body । इसमें सबसे महत्वपूर्ण सेटिंग यह है कि आपको उस डेटा को निर्दिष्ट करने की आवश्यकता है जो AppMaster सर्वर को भेजा जाएगा। उसी समय, <> में गतिशील मान होते हैं जिन्हें संबंधित इनपुट फ़ील्ड से प्राप्त करने की आवश्यकता होगी।
{
"login": "<login>",
"password": "<password>"
}
भरने पर, आपको परीक्षण अनुरोध के लिए डेटा निर्दिष्ट करना होगा ( Body parameters में लॉगिन और पासवर्ड मान भरें), अनुरोध प्रारंभ करें, और सुनिश्चित करें कि यह सही तरीके से काम करता है और उत्तर वास्तव में आता है।
इनपुट फ़ील्ड सेटअप
अगला कदम एप्लिकेशन के लिए एक इंटरफ़ेस बनाना है। हम खुद को आवश्यक न्यूनतम तक सीमित रखते हैं। हमें 3 इनपुट फ़ील्ड बनाने की आवश्यकता होगी:
- लॉग इन करें
- पासवर्ड
- प्राधिकरण टोकन
पहले दो बहुत स्पष्ट हैं। वे प्रमाणीकरण के लिए उपयोगकर्ता के उपयोगकर्ता नाम और पासवर्ड का संकेत देंगे। सबसे बड़ी रुचि तीसरा क्षेत्र है - टोकन का क्षेत्र। टोकन का मूल्य मैन्युअल रूप से भी दर्ज किया जा सकता है, लेकिन हमारा काम AppMaster बैकएंड से डेटा प्राप्त करना और इसे वहां प्रदर्शित करना संभव बनाना है।
ऐसा करने के लिए प्रारंभिक सामग्री मान को कॉन्फ़िगर करने की आवश्यकता है:
- API Connector में पहले बनाए गए अनुरोध के चयन के साथ Get data from an External API (इस उदाहरण में, इसका नाम AppMaster Auth Call है)
- फ़ील्ड (body) login और (body) password में आपको संबंधित इनपुट फ़ील्ड से मान निर्दिष्ट करने की आवश्यकता होती है
- token मूल्य का चयन करें (अनुरोध के जवाब में बहुत सारे अलग-अलग डेटा आते हैं, लेकिन इस उदाहरण में केवल token रुचि का है)
परिणाम का परीक्षण किया जा सकता है। लॉगिन और पासवर्ड फ़ील्ड में डेटा दर्ज करते समय, AppMaster बैकएंड के लिए स्वचालित रूप से एक अनुरोध किया जाएगा। जब डेटा सही ढंग से दर्ज किया जाता है, और अनुरोध एक सफल परिणाम देता है, तो प्राप्त प्राधिकरण टोकन तीसरे क्षेत्र में दिखाई देगा।
डेटाबेस के लिए अनुरोध GET करें
अगला कदम एक नया एपीआई अनुरोध बनाना है। इस बार कार्य डेटाबेस से डेटा प्राप्त करना होगा। साथ ही, स्थिति इस तथ्य से जटिल है कि ये डेटा स्वतंत्र रूप से उपलब्ध नहीं हैं बल्कि केवल अधिकृत उपयोगकर्ताओं के लिए उपलब्ध हैं।
ऐसा करने के लिए, आपको अनुरोध में एक विशेष शीर्षलेख जोड़ना होगा। इसे Authorization कहा जाना चाहिए और इसका मूल्य " Bearer " होना चाहिए और प्राधिकरण कुंजी जो पहले प्राप्त की गई थी।
आइए इसे व्यवहार में करें। आपको API Connector प्लगइन पर वापस जाना होगा और एक नया एपीआई अनुरोध बनाना होगा। स्क्रीनशॉट पर उदाहरण में, यह व्यंजन की सूची प्राप्त करने और मेनू बनाने के लिए रेस्तरां डेटाबेस के लिए एक कॉल है।
पिछले अनुरोध से एक महत्वपूर्ण अंतर यह है कि मापदंडों के बजाय (हालांकि उन्हें भी जोड़ा जा सकता है), एक हेडर का उपयोग किया जाता है:
- Key = Authorization
- Value = Bearer {authorization token} (अनुरोध शुरू करने के लिए, आपको तुरंत वास्तविक टोकन निर्दिष्ट करना होगा जो आपको पहले प्राप्त हुआ था)
कृपया ध्यान दें कि हेडर सेटिंग्स में, आपको Private चेकबॉक्स को अनचेक करना होगा; अन्यथा, इसे गतिशील रूप से उत्पन्न करना संभव नहीं होगा। अंत में, अनुरोध को प्रारंभ करना न भूलें और सुनिश्चित करें कि यह काम करता है।
Repeating Group
अब हमें डिज़ाइनर के पास वापस जाना चाहिए, एक नया दोहराव समूह तत्व जोड़ना चाहिए, और इसे सेट करना चाहिए:
- Type of content - अनुरोध का डेटा AppMaster Get Data ।
- Data source - Authorization शीर्षलेख को सही ढंग से निर्दिष्ट करना महत्वपूर्ण है। यह दो हिस्सों से मिलकर बना है। पहला स्थिरांक " Bearer " है। दूसरे चर में एक प्राधिकरण टोकन होना चाहिए और इसे संबंधित इनपुट फ़ील्ड से लिया जाना चाहिए।
यदि सब कुछ सही ढंग से किया जाता है, तो डेटा प्राप्त होगा, और केवल अंतिम चरण शेष है - आपको उन्हें प्रदर्शित करने की आवश्यकता है। ऐसा करने के लिए, आप Repeating Group में दो टेक्स्ट फ़ील्ड जोड़ सकते हैं और उन्हें कस्टमाइज़ कर सकते हैं। एक डिश का नाम दिखाएगा, और दूसरा इसकी कीमत दिखाएगा।
आप परिणामी ऐप खोल सकते हैं और सत्यापित कर सकते हैं कि Bubble और AppMaster एकीकरण सफल रहा। फ़्रंटएंड को Bubble.io में बनाया गया है, और बैकएंड से संबंधित हर चीज़ AppMaster.io द्वारा संचालित है:
- उपयोगकर्ता प्रमाणीकरण किया जा रहा है
- प्राप्त प्राधिकरण टोकन प्रदर्शित होता है
- डेटाबेस के साथ काम किया जाता है
- केवल अधिकृत उपयोगकर्ताओं के लिए उपलब्ध डेटा प्रदर्शित होता है
