Appmaster.io की स्थापना। वेब अनुप्रयोग संपादक: बटन

बटन वेब ऐप्स संपादक का सबसे सरल तत्व है, लेकिन समाप्त एप्लिकेशन के इंटरफ़ेस में एक मुख्य भूमिका निभाता है। इसके अलावा, आज हम आपको एक ऐसा एप्लिकेशन बनाने की पेशकश करते हैं जिसमें केवल बटन होंगे। कार्य थोड़ा अजीब लग सकता है, लेकिन यदि आप इसे करते हैं, तो आप सीखेंगे कि बटन को कैसे अनुकूलित किया जाए, संपादक के साथ काम करने की मूल बातें और पूरे प्लेटफॉर्म के तर्क को समझें।

आइए ऐलिस एडवेंचर्स इन वंडरलैंड पुस्तक पर आधारित एक लघु प्रश्नोत्तरी बनाएं। आइए जानें कि क्या उपयोगकर्ताओं को याद है कि एलिस पहली बार चेशायर कैट से कहां मिलती है।

हमारे आवेदन में होगा:

1. प्रश्न पाठ: एलिस पहली बार चेशायर कैट से कहाँ मिली थी?
2. चॉइस बटन: मैड-टी पार्टी, डचेस हाउस, वुड, क्रोकेट-ग्राउंड। यदि उपयोगकर्ता ने गलत उत्तर चुना है - इसके साथ वाला बटन गायब हो जाता है, यदि उपयोगकर्ता ने सही उत्तर चुना है - तो गलत उत्तरों वाले सभी बटन तुरंत गायब हो जाते हैं।
3. पॉप-अप संदेश जो आपको बताते हैं कि उत्तर सही था या नहीं।

वैसे, क्या आपको याद है कि कौन सा विकल्प सही है?

बटन कैसे बनाएं

माउस पॉइंटर के साथ "बटन" तत्व को खींचें (बाईं कुंजी को क्लिक करके और दबाकर) उस क्षेत्र में जहां आप बटन रखना चाहते हैं।

आपको चार बटन जोड़ने होंगे - संभावित उत्तरों की संख्या के अनुसार।

अनुकूलित बटन उपस्थिति

एक बार पहले बटन पर क्लिक करें - सेटिंग्स विंडो खुल जाएगी। आप अपने आप को "लुक एंड फील" टैब पर पाएंगे, जो बटनों की उपस्थिति के लिए जिम्मेदार है।

1. निम्नलिखित फ़ील्ड संपादित करें:

• लेबल: बटन टेक्स्ट - पहला उत्तर दर्ज करें: "मैड-टी पार्टी";
• आइकन: बटन आइकन - "आइकन चुनें" पर क्लिक करें और जिसे आप पसंद करते हैं उसे चुनें (अब उनमें से 2500 से अधिक हैं);
• आकार: बटन का आकार - बटन को बड़ा करने के लिए "बड़ा" पर सेट करें;
• नाम: यह वह नाम है जिसके द्वारा आपके एप्लिकेशन में अन्य तत्वों द्वारा बटन "देखा" जाता है; प्रत्येक बटन को एक अद्वितीय नाम की आवश्यकता होती है - बटन को "btn-mad_tea" नाम दें।

जब आप फ़ील्ड संपादित करते हैं, तो विंडो के शीर्ष पर स्थित छवि यह दिखाने के लिए बदल जाएगी कि सेटिंग्स लागू होने के बाद बटन कैसा दिखेगा।

2. जब आप सभी फ़ील्ड भर दें - "सहेजें" पर क्लिक करें।

1. नामों का उपयोग करके शेष बटनों को पहले के साथ सादृश्य द्वारा कॉन्फ़िगर करें: btn-duchess_h, btn-wood, btn-croquet_g।
2. अपने एप्लिकेशन में परिवर्तनों को सहेजने के लिए "परिवर्तन सहेजें" पर क्लिक करें - अन्यथा, आपके द्वारा पृष्ठ को ताज़ा करने या संपादक को बंद करने के बाद बटन गायब हो जाएंगे।

ट्रिगर और ईवेंट सेट करना

अब आपको बटन के कार्यों को सेट करने की आवश्यकता है। आइए सही उत्तर के साथ शुरू करें - "डचेस हाउस" । आपका कार्य वेब ऐप्स संपादक को "समझाना" है:

• बटन का ट्रिगर क्या है - इसका मतलब है, इसे वास्तव में किस पर प्रतिक्रिया देनी चाहिए: दबाने पर;
• इस मामले में क्या घटना होती है: बटन गायब हो जाते हैं;
• जहां यह घटना होती है, वहां कौन से तत्व बदलते हैं: अन्य बटन।

"डचेस हाउस" बटन सेटिंग्स पर वापस जाएं और ट्रिगर्स टैब पर जाएं। इसके लिए जोड़े गए सभी ट्रिगर प्रदर्शित होंगे:

1. अब केवल एक ही है - "ऑनक्लिक"। यह स्वचालित रूप से जोड़ा जाता है और इसका मतलब है कि जब आप उस पर क्लिक करेंगे तो बटन कार्य करेगा (जो वास्तव में आपको चाहिए)।
2. "ऑनक्लिक" के अतिरिक्त, बटन के लिए अन्य ट्रिगर संभव हैं। विवरण के साथ एक पूरी सूची प्लेटफ़ॉर्म दस्तावेज़ीकरण में है।

अब आपको घटना के बारे में जानकारी निर्दिष्ट करने की आवश्यकता है (आपके पास उनमें से तीन होंगे - प्रत्येक बटन के लिए एक)। "ऑनक्लिक" के आगे "+" पर क्लिक करें। इवेंट सेटिंग विंडो खुलेगी।

"लक्षित घटक" फ़ील्ड में, आपको यह इंगित करने की आवश्यकता है कि ईवेंट कहाँ होगा, "एक्शन" फ़ील्ड में - यह किस प्रकार का ईवेंट होगा।

सभी गलत उत्तर छुपाएं

एक ईवेंट जोड़ें जो मैड-टी पार्टी बटन को छुपाएगा:

1. "लक्ष्य घटक" फ़ील्ड पर क्लिक करें और इसे अद्वितीय नाम btn-mad_tea से खोजें। क्रिया क्षेत्र में, उपयुक्त घटना का चयन करें, इस मामले में - "बटन छिपाएँ"।
2. "सहेजें" पर क्लिक करें।

बाकी बटनों को उसी तरह छुपाने के लिए कॉन्फ़िगर करें।

1. जब आप काम पूरा कर लें तो "डचेस हाउस" बटन के लिए ट्रिगर्स की सूची इस तरह दिखनी चाहिए।
2. अपने परिवर्तन सहेजने के लिए 'सहेजें' पर क्लिक करें।

अब आपको यह सुनिश्चित करने की ज़रूरत है कि सब कुछ काम करता है।

1. अपने परिवर्तन सहेजें।
2. एप्लिकेशन को प्रकाशित करने के लिए बटन दबाएं (इसे इंटरनेट पर रखकर), "विकास" चुनें।
3. गो टू योर ऐप आइकन पर क्लिक करें - यह एक नए टैब में खुल जाएगा।

ऐप में जाएं और सुनिश्चित करें कि जब आप सही विकल्प चुनते हैं, तो बाकी बटन गायब हो जाते हैं।

क्लिक पर गलत जवाब छुपाएं

अब गलत उत्तर वाला बटन "मैड-टी पार्टी" गायब हो जाता है जब उपयोगकर्ता उस पर क्लिक करता है। इस मामले में, ट्रिगर (दबाने) और घटना (गायब) दोनों एक ही बटन से संबंधित हैं - आपको केवल इसके साथ काम करने की आवश्यकता है।

बटन सेटिंग खोलें, "ट्रिगर" टैब पर जाएं, "ऑनक्लिक" ट्रिगर में एक नया ईवेंट जोड़ें। "लक्षित घटक" फ़ील्ड में, यह इंगित करने के लिए "यह घटक (स्वयं)" चुनें कि बटन स्वयं के लिए किसी ईवेंट को सक्रिय करता है। "एक्शन" फ़ील्ड का मान पिछले उदाहरण के समान है - "बटन छुपाएं"।

सभी परिवर्तन सहेजें और ऐप प्रकाशित करें, ऐप टैब पर स्विच करें और इसे रीफ़्रेश करें। जांचें कि सब कुछ इरादा के अनुसार काम करता है:

अब वुड और क्रोकेट-ग्राउंड को एडजस्ट करें। सहेजें, प्रकाशित करें और फिर से परीक्षण करें।

बटन के प्रकार

बढ़िया, जवाब काम करते हैं। एक प्रश्न जोड़ने का समय आ गया है। बेशक, इसके लिए Appmaster.io के पास विशेष तत्व हैं, लेकिन आपको हमारा काम याद है - बटन और कुछ नहीं। तो चलिए एक और जोड़ते हैं। इस बार - मुख्य कैनवास पर नहीं, बल्कि पृष्ठ के शीर्ष पर:

इसे और मज़ेदार बनाने के लिए, इस स्क्रीनशॉट के अनुसार प्रश्न भरें:

अब विभिन्न प्रकार के बटनों के लिए रंग योजनाओं का उपयोग करके "रंगीन" करें: सेटिंग्स पर जाएं और "टाइप" फ़ील्ड में मान को किसी अन्य पर स्विच करें।

हमें यह इस तरह मिला, लेकिन आप अपना विकल्प चुन सकते हैं, बटन की रंग योजना इसके संचालन को प्रभावित नहीं करती है:

अब अंतिम कार्य पर चलते हैं - उपयोगकर्ता के लिए एक संदेश सेट करना।

अधिक कठिन कार्य

आप स्क्रीन पर एक संदेश को विभिन्न तरीकों से प्रदर्शित कर सकते हैं। हमने सबसे असामान्य में से एक को चुना है:

- सबसे पहले, आइए सुनिश्चित करें कि उपयोगकर्ता द्वारा सही उत्तर दिए जाने पर प्रश्न वाले बटन स्वचालित रूप से निष्क्रिय हो जाते हैं। वे धूसर हो जाएंगे और क्लिकों का जवाब देना बंद कर देंगे। ऐसा करने के लिए, हम सक्षम (अक्षम) फ़ंक्शन का उपयोग करते हैं, जिसे हमने अभी तक नहीं माना है, और पहले से ही परिचित "ऑनक्लिक"।

- फिर हम एक नए ट्रिगर पर विचार करेंगे - onStateChange, जो तब चालू होता है जब बटन की स्थिति बदल जाती है। आइए इस ट्रिगर को "?" - और उस पर संदेश प्रदर्शित होगा।

निष्क्रिय करने वाले बटन

आप "सक्षम करें" फ़ील्ड चयनकर्ता को टॉगल करके इसकी सेटिंग में मैन्युअल रूप से बटन को सक्षम या अक्षम कर सकते हैं:

स्वचालित स्विचिंग सेट करने के लिए, "डचेस हाउस" बटन प्राथमिकताएं खोलें और "ऑनक्लिक" ट्रिगर जोड़ें। "लक्षित घटक" फ़ील्ड में "एक्शन" - "अक्षम बटन" फ़ील्ड में, प्रश्न बटनों में से एक का चयन करें। उन सभी बटनों के लिए दोहराएं जिनमें कोई प्रश्न है। इसे ऐसा दिखना चाहिए:

सभी परिवर्तनों को सहेजना, प्रकाशित करना और जांचना याद रखें कि एप्लिकेशन सही तरीके से काम कर रहा है या नहीं।

अब, संदेश की शुरुआत को "?" बटन से बाँधते हैं। (हमने इसे "btn_qqq" नाम दिया है)। आइए इसमें "onStateChange" ट्रिगर जोड़ें। यह तब सक्रिय होता है जब बटन की स्थिति बदल जाती है - उदाहरण के लिए, जब यह बंद हो जाता है।

"लक्षित घटक" फ़ील्ड में, "एप्लिकेशन" चुनें (एप्लिकेशन विंडो में संदेश पॉप अप होगा), "एक्शन" फ़ील्ड में - "यूआई संदेश दिखाएं" (उपयोगकर्ता को एक संदेश दिखाएं)।

1. "संदेश शैली" फ़ील्ड में, वह चुनें जो आपकी स्थिति के लिए सबसे उपयुक्त हो। हमारे मामले में, यह "सफलता" है - सफल समापन के बारे में एक संदेश।
2. "शीर्षक" और "सामग्री" फ़ील्ड भरें - उपयोगकर्ता को सूचित करें कि उत्तर सही है या बस कुछ अच्छा लिखें।

सहेजें, प्रकाशित करें और परीक्षण करें।

नतीजा

सही विकल्प चुनना, गलत उत्तरों वाले बटन छिपाए जाने चाहिए, प्रश्न का पाठ फीका पड़ना चाहिए और एक पुष्टिकरण संदेश पॉप अप होना चाहिए।

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

हमें यकीन है कि इस निर्देश ने आपको Appmaster.io को बेहतर तरीके से जानने में मदद की है। लेकिन अगर यह स्पष्ट नहीं था (या शायद, इसके विपरीत, बहुत सरल), तो आपको आवश्यक निर्देशों के बारे में हमारे तकनीकी समर्थन के टेलीग्राम चैनल को लिखें। हम उन्हें लिखेंगे!

यदि आप Studio.appmaster.io के बारे में अधिक विस्तृत जानकारी की तलाश में हैं, तो कृपया हमारे दस्तावेज़ देखें।