अलमारी आयोजक: १३ कदम

2024 लेखक: John Day | [email protected]. अंतिम बार संशोधित: 2024-01-30 09:21

चाहे वह कपड़ों की खरीदारी हो या हमेशा किसी वस्तु को उधार लेने के लिए कहा जा रहा हो, कभी-कभी आप चाहते हैं कि आप कहीं से भी अपनी अलमारी में झाँक कर देखें कि क्या आपके पास कुछ ऐसा ही है। वार्डरोब ऑर्गनाइज़र बस यही करता है और बहुत कुछ!

यह एक बंद दुकान है और कई अन्य उद्देश्यों के लिए विस्तृत है। माई वॉर्डरोब ऑर्गनाइज़र एक SQL डेटाबेस के रूप में Google शीट्स का एक संयोजन है, डेटा को संभालने के लिए Google स्क्रिप्ट्स, और इस डेटा के लिए एक ऑनलाइन पोर्टल के लिए Google WebApp। अंतिम उपयोगकर्ता सभी आइटम देख सकता है, कुछ विशिष्ट के लिए फ़िल्टर कर सकता है, आइटम को ऋण पर चिह्नित कर सकता है, उनके कपड़े धोने का प्रबंधन कर सकता है, और माँ को हर साल क्रिसमस के लिए एक ही शर्ट खरीदने से रोक सकता है *।

(* कोई गारंटी नहीं। माताएं जो चाहें खरीद लेंगी चाहे आपको इसकी आवश्यकता हो या नहीं)

ऊपर की छवि में वेबसाइट डिजाइन पर एक त्वरित नज़र डालने पर, कोई एक परिचित लेआउट को पहचान सकता है। अलमारी आयोजक किसी भी सामान्य परिधान वेबसाइट की तरह स्थापित किया गया है। ऊपर के विभागों द्वारा विभाजित और किनारे पर प्रदान किए गए फ़िल्टर, यह इंटरफ़ेस आकस्मिक उपयोगकर्ता के लिए कार्यक्षमता के साथ परिचितता लाता है। और इसका उपयोग करना आसान है।

चरण 1: अपनी खुद की प्रति सेट करना

आइए इस परियोजना की अपनी प्रति बनाकर शुरू करें।

गूगल ड्राइव

आपको इस एप्लिकेशन के मेरे वर्तमान संस्करण में ले जाने के लिए उपरोक्त लिंक पर क्लिक करें।

आप इस फोल्डर में 3 आइटम देखेंगे: एक गूगल फॉर्म, एक गूगल शीट और एक फोल्डर।

Google शीट पर राइट क्लिक करें और Make A Copy पर क्लिक करें।

इस कॉपी का स्थान अपनी डिस्क पर सेट करें.

इस दस्तावेज़ को कॉपी करने के बाद, Google फ़ॉर्म स्वचालित रूप से उसी फ़ोल्डर में जेनरेट हो जाएगा जिस फ़ोल्डर में आपने Google शीट को स्थानांतरित किया था।

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

अब आपके पास अपने लिए काम करने के लिए इस दस्तावेज़ की एक प्रति है!

चरण 2: Google फ़ॉर्म अवलोकन

अब जब आपके पास इस एप्लिकेशन का अपना संस्करण है, तो आइए एक नज़र डालते हैं।

आपका Google फ़ॉर्म कई अलग-अलग प्रकार के आइटम स्वीकार करने के लिए सेट किया गया है। हालाँकि शर्ट, पैंट, कपड़े और जूते सभी की आकार सीमाएँ अलग-अलग हैं। इसलिए जिस विभाग के तहत आप अपना आइटम फाइल करते हैं, उसके आधार पर इस फॉर्म का एक अलग सेक्शन भरा जाएगा। मेरे (पुरुष लेख) टेम्पलेट में मैंने 5 अलग-अलग आकार की श्रेणियां बनाई हैं। (महिला लेखों के लिए, यहां क्लिक करें, और भी बहुत कुछ हैं)।

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

प्रत्येक अनुभाग के अंत में, उपयोगकर्ता को इस प्रपत्र के अंतिम भाग की ओर निर्देशित किया जाता है: स्थान। मैंने व्यक्तिगत रूप से ड्राई क्लीनर्स में, कपड़े धोने में, उनके स्थान पर या उन वस्तुओं को निर्धारित करने के लिए स्थान जोड़ने का विकल्प चुना, जिनमें मैंने किसी मित्र को उधार लेने दिया था। यह मुझे संगठित होने की अनुमति देता है और कभी ऐसा महसूस नहीं होता कि मुझे कहीं कपड़ों का एक टुकड़ा याद आ रहा है।

जैसा कि मैंने शुरू से ही उल्लेख किया है, इस परियोजना का एक लाख विभिन्न तरीकों से विस्तार किया जा सकता है। आप इसे इन्वेंट्री के लिए, एक अधिक सटीक संगठन उपकरण, या सख्ती से कपड़े उधार लेने के लिए उपयोग कर सकते हैं। आपके द्वारा जोड़े जा सकने वाले फ़ील्ड और अनुभाग अंतहीन हैं इसलिए मेरे रूप में जो कुछ भी है उसे सीमित न करें। (महिला लेखों के लिए यहां क्लिक करें)

इससे पहले कि आप अपने कुछ आइटम अपलोड करें, चलिए अगले चरण पर चलते हैं ताकि उचित सबमिशन सुनिश्चित हो सके।

चरण 3: Google स्क्रिप्ट: (सर्वर कोड.जीएस) सबसे पहले डेटा और कोड देखें

Google पत्रक दस्तावेज़ में क्लिक करने पर, आपको डेटा के कई स्तंभ दिखाई देंगे (और कुछ पंक्तियाँ, प्रदर्शन के लिए छोड़ दी गई हैं)। प्रपत्र जमा करने के दौरान कुछ अनुभागों को छोड़ दिया जाता है, यह कुछ स्तंभों में अनुपलब्ध डेटा से स्पष्ट होता है। लेकिन इन मदों के संपादनों को बेहतर ढंग से ट्रैक करने के लिए आईडी, डिफ़ॉल्ट स्थान, कौन और अपडेट जैसे अतिरिक्त कॉलम जोड़े गए हैं।

जब आप इस डेटाबेस को पार करते समय एक विशिष्ट पहचानकर्ता की अनुमति देने के लिए फॉर्म जमा करते हैं तो एक आईडी फ़ील्ड बनाया गया है। इस फ़ील्ड को बनाने के लिए, हम टूल्स> स्क्रिप्ट एडिटर पर क्लिक करके स्क्रिप्ट एडिटर पर एक नज़र डालेंगे।

स्क्रिप्ट संपादक के खुलने पर, आप इस नई विंडो के साइडबार में 8 दस्तावेज़ देखेंगे। ये दस्तावेज़ बैक-एंड प्रक्रिया, फ्रंट-एंड डिस्प्ले और फ्रंट-एंड कार्यक्षमता को नियंत्रित करने में मदद करते हैं। हम हर एक में कूदेंगे (यदि आप चारों ओर चिपके रहते हैं) लेकिन अभी सर्वर कोड पर क्लिक करें।

सर्वर Code.gs फ़ाइल में कई कार्य हैं:

onSubmit(e), onOpen(), doGet(), include(fileName), openApplication(), openLaundryApp(), changeValueOnSubmit(e), setIDOnSubmit(e)

onSubmit(e) - यह फ़ंक्शन Google फ़ॉर्म के सबमिट होने पर चलने वाले पहले फ़ंक्शन के रूप में कॉन्फ़िगर किया जाएगा। कई अलग-अलग प्रक्रियाओं को होने देने के लिए आप इस फ़ंक्शन के अंदर अन्य फ़ंक्शन रख सकते हैं।

onOpen (e) - इस फंक्शन को तब कहा जाता है जब गूगल शीट्स को खोला जाता है। यह एप्लिकेशन लिंक और विचारों तक त्वरित पहुंच की अनुमति देने के लिए एक नया मेनू विकल्प पॉप्युलेट करता है।

doGet () - इस फ़ंक्शन को वेब ऐप एड्रेस कॉल पर कहा जाता है। जब कोई उपयोगकर्ता प्रकाशित वेब ऐप को ब्राउज़ करता है तो यह कोड उस पृष्ठ को बताएगा कि क्या प्रदर्शित करना है। इस मामले में, यह दस्तावेज़ Application.html है।

शामिल करें (फ़ाइल नाम) - इस फ़ंक्शन का उपयोग HTML पृष्ठों के अंदर अन्य दस्तावेज़ों को पढ़ने और उनकी सामग्री को किसी अन्य पृष्ठ के भीतर उचित HTML प्रारूप में सम्मिलित करने के लिए किया जाता है। हम इसे अपनी CSS.html और JS.html फ़ाइलों के लिए उपयोग करते हैं।

openApplication () और openLaundryApp () - जब उपयोगकर्ता Google शीट टूलबार में जोड़े गए मेनू बटन पर क्लिक करता है तो इन कार्यों में चलाने के लिए कोड होता है।

changeValueOnSubmit(e) और setIDOnSubmit(e)- ये वे फंक्शन हैं जिन पर हम अभी गौर करेंगे। जब फॉर्म शुरू में सबमिट किया जाता है तो वे कुछ फ़ील्ड को डिफ़ॉल्ट मानों के साथ अपडेट करने के लिए ज़िम्मेदार होते हैं।

चरण 4: OnFormSubmit को सक्षम करना

इन दो कार्यों, changeValueOnSubmit(e) और setIDOnSubmit(e) को एक फॉर्म जमा करने की उपयोगकर्ता कार्रवाई से जुड़ा होना चाहिए। ऐसा करने के लिए हमें एक ट्रिगर सक्षम करने की आवश्यकता है।

हम संपादित करें > वर्तमान प्रोजेक्ट के ट्रिगर पर क्लिक करके ट्रिगर को सक्षम करते हैं। यह Google डेवलपर हब खोलता है।

ट्रिगर डैशबोर्ड के निचले दाएं कोने में एक बटन है एक ट्रिगर जोड़ें। यहां क्लिक करें।

जब कोई फॉर्म सबमिट किया जाता है तो अब हम चलाने के लिए फ़ंक्शन सेट अप करेंगे। हमारे मामले में मेरे पास कई फ़ंक्शन हैं (changeValueOnSubmit(e) और setIDOnSubmit(e)) जिन्हें मैंने एक onSubmit() फ़ंक्शन के अंदर रखा है, इसलिए मुझे केवल 1 ट्रिगर सेट करना होगा। इसलिए हम ऑनसबमिट () का चयन करेंगे और इस ट्रिगर को ऑन फॉर्म सबमिट चलाने के लिए सेट करेंगे।

अब हमारे पास एक कार्यशील रूप है जो विशिष्ट पहचानकर्ताओं के साथ एक Google शीट को पॉप्युलेट करेगा और डिफ़ॉल्ट मान सेट करेगा।

अब आप Google फ़ॉर्म का उपयोग करके अपने स्वयं के आइटम अपलोड कर सकते हैं। (यह जारी रखने के लिए आवश्यक नहीं है क्योंकि इसमें पहले से ही डेमो मान मौजूद हैं)। अब हम यूजर इंटरफेस में गोता लगाएंगे।

चरण 5: यूजर इंटरफेस की स्थापना

स्वागत हे! हम अंत में उस हिस्से तक पहुंच गए हैं जिसके लिए आप आए थे, यूजर इंटरफेस !!!!

पहली नज़र में, यहाँ कुछ भी नहीं है। हमने अभी तक कोई कॉल नहीं की है। पेज को तेजी से लोड करने के लिए मैंने पहले पेज को आपके सभी आइटम्स से प्रभावित नहीं करने का फैसला किया और आपको वह क्लिक करने की अनुमति दी जिसे आप तेजी से देखना चाहते हैं। चूंकि यह मामला है, इसलिए मुख्य सामग्री क्षेत्र में कोई आइटम नहीं है और साइडबार में कोई फ़िल्टर नहीं है। हमारे डेटाबेस में क्या है, यह देखने के लिए All पर क्लिक करें।

अब हमने अपने डेटाबेस में प्रत्येक आइटम को मुख्य सामग्री क्षेत्र में लोड कर दिया है। आप चित्र, आईडी नंबर, रंग, आकार और स्थान देखेंगे। स्थान फ़ील्ड को यहीं अपडेट किया जा सकता है! यदि आप उस वस्तु को ऋण देने का निर्णय लेते हैं जिसे आप उस विकल्प का चयन कर सकते हैं, तो आप उसे अपने कोठरी, ड्रेसर या कपड़े धोने में रख सकते हैं।

और हमारे साइडबार में हमारे पास हमारी नई क्वेरी में हर कपड़ों की वस्तु के लिए हर संभव क्षेत्र है। कल्पना कीजिए कि इस साइडबार पर 20 अलग-अलग आकार के विकल्प हैं, यह बहुत प्रभावी नहीं होगा, तो चलिए सहायक उपकरण पर क्लिक करके अपनी खोज को सीमित करते हैं।

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

मैंने पहले उल्लेख किया था कि यह डेटाबेस मुझे ऋण पर और मेरे कपड़े धोने में मेरी वस्तुओं का प्रबंधन करने में मदद करता है। इसे थोड़ा आसान बनाने के लिए, इस मुख्य पृष्ठ में प्रत्येक ड्रॉपडाउन स्थान को मैन्युअल रूप से क्लिक करने के बजाय मैंने लॉन्ड्री मोड बनाया। Google शीट पृष्ठ पर वापस लौटें और ऐप व्यू के अंतर्गत आपको लॉन्ड्री मोड दिखाई देगा। यह विकल्प एक छोटा मोडल तैयार करेगा जो केवल लॉन्ड्री के स्थान वाले आइटम दिखाता है। अब मैं इन सभी वस्तुओं को डिफ़ॉल्ट के रूप में चिह्नित कर सकता हूं जो उन्हें उनके स्थानों पर वापस रख देगा जहां वे सामान्य रूप से संग्रहीत होते हैं।

चरण 7: परियोजना पूर्ण

बधाई

आप में से उन लोगों के लिए जो अपने आइटम को प्रबंधित करने के लिए एक कार्यशील डेटाबेस चाहते हैं, आपके ऑनलाइन आयोजक में आपका स्वागत है। उन जिज्ञासु दिमागों के लिए जो इस एप्लिकेशन के पीछे के कोड में रुचि रखते हैं। जैसे ही मैं इसे तोड़ता हूं, चारों ओर रहो।

* डेटाबेस में अपना कम से कम एक आइटम दर्ज करने के बाद आप परीक्षण आइटम को हटाने के लिए स्वतंत्र हैं। (मैं बाद में समझाऊंगा यदि आप चारों ओर चिपके रहते हैं)।

चरण 8: चरण 1: बैक-एंड कोड (सर्वर कोड.जीएस)

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

1) टेबल ट्रैवर्सिंग:

var ss = स्प्रेडशीटऐप.getActiveSpreadsheet (); वर शीट = ss.getSheetByName ("फ़ॉर्म प्रतिक्रियाएँ 1"); वर श्रेणी = पत्रक.getRange(1, 1, पत्रक.getMaxRows ()); var rowNum = range.getLastRow ();

• यह कोड Google शीट को ट्रेस करने का एक आधार है। मैं शीट को नंबर के बजाय नाम से बुलाता हूं ताकि यदि शीट हटा दी जाती हैं या फ़ंक्शन द्वारा पुनर्व्यवस्थित की जाती हैं तो भी ठीक से काम कर सकती हैं।
• इस कोड में मैं तालिका में सभी डेटा के लिए केवल रेंज एकत्र कर रहा हूं।

2) एक आईडी असाइन करना:

var LastID =range.getCell(rowNum-1, 1);var CellValue = Number(LastID.getValue());var ColA = 1; वर अधिकतम = 15; वर मिनट = 5; CellValue = CellValue+ Math.round((Math.random()* (max - min) + min)); e.source.getActiveSheet().getRange(range.getLastRow(), ColA).setValue(CellValue); चेंजवैल्यूऑनसबमिट (ई);

• मैंने पहले पूछा था कि जब तक उपयोगकर्ता ने अपने लिए कम से कम एक मान सबमिट नहीं किया है, तब तक डेमो मानों को तालिका में छोड़ दिया जाए। ऐसा इसलिए है क्योंकि ऑटो आईडी जनरेटर डेटाबेस में अंतिम मान पर निर्भर करता है जिसे पॉप्युलेट करना है।
• मैं अंतिम दूसरी से अंतिम पंक्ति लाता हूं क्योंकि अंतिम पंक्ति हमारा नया मान है और आईडी मान के लिए पहला कॉलम है।
• मैं फिर यादृच्छिक रूप से 5 और 15 के बीच एक संख्या उत्पन्न करता हूं और इसे अंतिम मान में जोड़ता हूं। *
• अंत में मैं इस मान को अंतिम पंक्ति के आईडी कॉलम में रखता हूं।
• इसके बाद हम changeValueOnSubmit(e) फंक्शन को कॉल करते हैं।

* मैंने भविष्य में लेबलिंग और Google होम एकीकरण की अनुमति देने के लिए 5-15 को चुना ताकि नंबर इतने करीब न हों कि हैंगर या कपड़ों के टैग या बारकोड पर भ्रम पैदा हो।

3) URL मान बदलना:

var DataChange = e.namedValues["Item Picture"];var DefaultLocation = e.namedValues["आप कपड़ों के इस लेख को कहां रख रहे हैं?"]; var ColD = ColumnID_("आइटम चित्र") +1; var ColLoc = ColumnID_("Default Location")+1;DataChange = DataChange.toString().replace("open?", "uc?export=view&"); e.source.getActiveSheet().getRange(e.range.rowStart, ColD).setValue(DataChange); e.source.getActiveSheet().getRange(e.range.rowStart, ColLoc).setValue(DefaultLocation);

• Google फ़ॉर्म के माध्यम से फ़ोटो सबमिट करते समय Google पत्रक में डाला गया URL वास्तविक दस्तावेज़ का लिंक होता है। हमारे मामले में, जैसा कि हम एक HTML पृष्ठ बना रहे हैं, हम चाहते हैं कि लिंक सिर्फ छवि हो।
• "खुला?" बदलकर "uc?export=view&" यूआरएल का हिस्सा हमने इसके बजाय छवि के लिए एक लिंक बनाया है।
• हम इस नए मान को वर्तमान आइटम पिक्चर लिंक के स्थान पर फिर से रखेंगे।
• मैं डेटाबेस में एक ही चीज़ के लिए आइटम का "डिफ़ॉल्ट स्थान" और "वर्तमान स्थान" भी सेट कर रहा हूं। मेरे लॉन्ड्री मोड का उपयोग करने का प्रयास करते समय यह मदद करेगा।

• हम इसे अगले पृष्ठ पर देखेंगे लेकिन यह हमारे द्वारा बनाए गए ColumnID_() फ़ंक्शन पर हमारी पहली नज़र है।

  यह फ़ंक्शन कॉलम नामों का उपयोग कॉलम पूर्णांक में अनुवाद करने के लिए करता है जो रेंज कॉलिंग के लिए सहायक होता है जिसके लिए नाम के बजाय कॉलम नंबर की आवश्यकता होती है।

4) स्प्रैडशीटएप.गेटयूआई ()

• दूसरी छवि में आप स्प्रेडशीटऐप.getUI() का उपयोग देख सकते हैं क्योंकि यह Google शीट के अलावा टूलबार मेनू बनाने के लिए उपयोग किया जाता है।
• .getUI() फ़ंक्शन एक मोडल पॉपअप बनाने में भी मदद करता है जिसका उपयोग लॉन्ड्री मोड के लिए और वेबसाइट इंटरफ़ेस के त्वरित लिंक के रूप में किया जाता है।

5) एचटीएमएल सर्विस

• इस कोड में दो प्रकार की HTML सेवाएँ उपयोग की जाती हैं: Template और HTMLOutput
• टेम्प्लेट HTML कोड के अंदर कोड डालने की अनुमति देता है ताकि सर्वर से आने वाली जानकारी को पेज पर कॉल करने पर पॉप्युलेट किया जा सके।
• HTML आउटपुट सरल HTML पृष्ठ प्रदर्शित करता है।
• हमारे पास शामिल () विधि भी है जो हमें कई HTML फ़ाइलें बनाने और उन्हें एक टेम्पलेट HTML फ़ाइल में संयोजित करने की अनुमति देती है, फ़ाइल की सामग्री को एक स्ट्रिंग के बजाय HTML प्रारूप में लौटाती है।

Google Apps के भीतर स्रोत कोड और कार्यक्षमता की व्याख्या कैसे की जाती है, इस बारे में एक परिचितता लाने के लिए मैंने Google App Scripts Documentation जैसा एक दस्तावेज़ संलग्न किया है।

चरण 9: चरण 2: बैक-एंड कोड भाग 2 (सर्वर Calls.gs)

अब हमने सर्वर Calls.gs दर्ज किया है। ये फ़ंक्शन मुख्य रूप से HTML जावास्क्रिप्ट में उपयोग किए जाते हैं, इसलिए उन्हें उस कोड से अलग किया गया है जो मुख्य रूप से सर्वर Code.gs में स्थित बैक एंड में उपयोग किया जाता है।

चित्र 1) वैश्विक चर:

चित्र 2) आइटम लाना:

चित्र 3) fetchItemsQry

चित्र 4) फ़िल्टर आइटम

चित्र 5) fetchFiltersWithQry

चित्र ६) ColumnID, और CacheCalls

इनमें से प्रत्येक के साथ बात करने के लिए बहुत कुछ है। और कोड को तोड़ने और यह समझाने के लिए कि क्या हो रहा है, मुझे थोड़ा और टाइपिंग स्पेस चाहिए। ServerCalls.gs के कोड ब्रेकडाउन के लिए एक दस्तावेज़ संलग्न है

यह दस्तावेज़ Google ऐप स्क्रिप्ट दस्तावेज़ीकरण की तरह स्थापित किया गया है और यहां तक कि समान वस्तुओं के लिंक भी बनाता है।

चरण 10: चरण 3: HTML कोड (Application.html)

एक इंस्ट्रक्शनल के डायलॉग बॉक्स में HTML कोड बहुत दुखी हो जाता है। तो कृपया उपरोक्त चित्रों के साथ अनुसरण करें।

1) Application.html पेज के हेडर में हम एक टाइटल स्थापित करते हैं और लोड होने के लिए अपने CSS.html पेज को कॉल करते हैं।

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

मुख्य हैडर बॉक्स भी इस चित्र में पाया जाता है। आप यहां शीर्षलेख बदल सकते हैं और "[आपका नाम] की अलमारी" या जो कुछ भी आप इस पृष्ठ को पहचानना चाहते हैं उसे दर्ज कर सकते हैं।

2) हेडर के ठीक नीचे हमारा टॉप नेविगेशन बार है।

इस नेविगेशन बार में हमारे Google पत्रक के अंदर आलेख पत्रक पर सूचीबद्ध सभी प्रकार के लेख शामिल हैं।

इन वस्तुओं की एक सरणी लाने के लिए एक इनलाइन फ़ंक्शन को कॉल किया जाता है। फिर इन विकल्पों में से प्रत्येक को मेनू बटन के रूप में शामिल करने के लिए एक लूप चलाया जाता है, एक एक्शन कोड के साथ पूरा होता है ताकि जब कोई उपयोगकर्ता मेनू बटन पर क्लिक करे, तो संबंधित आइटम बॉडी एरिया में दिखाई देंगे।

3) मुख्य शरीर।

इस भाग में 4 भाग होते हैं। एक टेक्स्ट आउटपुट, साइडबार फ़िल्टर, मुख्य बॉडी इमेज और JS में शामिल हैं।

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

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

मुख्य निकाय वर्तमान में खाली है, लेकिन फ़िल्टर की तरह ही यह आइटम के आईडी, रंग, आकार और स्थान का विवरण देने वाले आइटम बॉक्स से भर जाएगा, जिसमें एक छवि शामिल होगी जब उपयोगकर्ता एक श्रेणी का चयन करता है और जावास्क्रिप्ट कोड इस क्षेत्र को पॉप्युलेट करता है।

अंत में शामिल हैं (जेएस), आइए इसे अगले चरण पर देखें।

चरण 11: चरण 4: जावास्क्रिप्ट कोड (JS.html)

अगर आपको लगता है कि सर्वर कोड एक भारी खंड था, तो इसे लोड करें।

यहां हम अपने HTML और SeverCode को उपयोगकर्ता इंटरैक्शन के साथ जोड़ते हैं। उचित डेटा प्राप्त करने और इसे एक पठनीय प्रारूप में वापस करने के लिए क्लिक की गई किसी भी वस्तु को यहां संसाधित किया जाना चाहिए। तो आइए एक नजर डालते हैं हमारी पहली कॉल पर:

स्क्रिप्ट कॉल: मैं इस परियोजना के लिए 3 अलग-अलग पुस्तकालयों का उपयोग कर रहा हूं; jQuery, बूटस्ट्रैप, और एक विशेष बूटस्ट्रैप-चयन ऐड-ऑन। ये पुस्तकालय वस्तुओं के स्वरूपण और HTML कोड के भीतर तत्वों को आसान कॉल करने की अनुमति देते हैं।

जावास्क्रिप्ट की मेरी अगली महत्वपूर्ण पंक्ति नीचे है:

$(दस्तावेज़)।कीप्रेस(समारोह (घटना) { अगर (घटना। जो == '13') {event.preventDefault (); } });

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

फ़ंक्शन निकालेंफ़िल्टर () { google.script.run.withSuccessHandler (अपडेट इटम्स)। विफलता हैंडलर (onFailure) के साथ। ServerRemoveFilters (); }

फंक्शन अपडेटडीबीलोकेशन(आईडी, वैल्यू){ google.script.run.withSuccessHandler(allGood).withFailureHandler(FailDBUpdate).updateLocation(id, value); }

यहाँ दो कार्य हैं जो सर्वर Code.gs फ़ाइल पर कॉल कर रहे हैं। रेखा:

google.script.run.withSuccessHandler(updateItems).withFailureHandler(onFailure). ServerRemoveFilters();

इसमें कई कार्यशील भाग हैं लेकिन कंकाल "google.script.run" से निहित है जो HTML पृष्ठ को बताता है कि सर्वर पर निम्न कार्य है।

• इस कोड का अंतिम बिट चलाने का कार्य है। इस उदाहरण में ServerRemoveFilter()
• एक withSuccessHandler() जोड़कर HTML पृष्ठ अब जानता है कि लौटाए गए डेटा के साथ क्या करना है, और यह कोष्ठक के साथ फ़ंक्शन को चलाने के लिए है।
• वही withFailureHandler() पर लागू होता है

अब जब हमने सर्वर कोड कॉल को तोड़ दिया है, तो आइए एक नज़र डालते हैं कि क्या होता है जब ये सर्वर कॉल सफल और विफल हो जाते हैं।

फ़ंक्शन ऑलगुड (ई) {कंसोल.लॉग ("सर्वर पर सफलता"); } विफलता (त्रुटि) पर कार्य {$("#message-box").html("

इस समय वस्त्र आइटम लाने में असमर्थ. त्रुटि: "+ error.message +"

"); } समारोह FailDBUpdate(त्रुटि){ $("#message-box").html("

आपके पास स्थान को संशोधित करने की पहुंच नहीं है। त्रुटि: "+ error.message +"

"); $(.location-select").prop('disabled', 'disabled'); }

जब स्थान फ़ंक्शन चलाया जाता है तो सफलता को इंगित करने के लिए मैंने एक बहुत ही सरल कंसोल लॉग बनाया है जिसे आप allGood() के रूप में देख सकते हैं।

त्रुटियों को संभालते समय, ये दो फ़ंक्शन त्रुटि संदेश को आउटपुट करते हैं जहां उपयोगकर्ता "संदेश-बॉक्स" की आईडी के साथ HTML ऑब्जेक्ट पर jQuery कॉल का उपयोग करके देख सकता है।

अब चलो किरकिरा काम के लिए नीचे उतरें

चरण 12: चरण 5: जावास्क्रिप्ट कोड-क्लिक क्रियाएँ (JS.html)

शीर्ष मेनू बार में प्रत्येक लेख प्रकार के लिए विकल्प होते हैं। वे क्लिक पर चलने वाले फ़ंक्शन हैं:

फ़ंक्शन फ़िल्टर टाइप (लेख, आईडी) {$("ul.navbar-nav li.active").removeClass("active"); $("#currentArticle").html("//HTML CODE यहाँ");

अपडेटसाइडबार = सच;

google.script.run.withSuccessHandler(updateItems).withFailureHandler(onFailure).fetchItems("Articles", article); var newSelect = "#type-"+id; $(newSelect).addClass("active"); $("#myNavbar").removeClass("in"); }

हम इस कोड में देख सकते हैं कि हमारे पास एक google.script.run है जो सर्वर को जानकारी प्राप्त करने के लिए कॉल करता है। इस कॉल के लिए सफलता का कार्य है updateItems() ।

चित्र 1 (इस फ़ंक्शन के भीतर भारी HTML कोड के साथ, इस बॉक्स में कोई गड़बड़ी दिखाई दिए बिना कोड को सख्ती से कॉपी करना मुश्किल है)

UpdateItems() कोड में, हमारे पास बहुत सी चीजें हो रही हैं। एक बार फिर हमें उस ऑब्जेक्ट के माध्यम से जाना चाहिए जो हमें वापस कर दिया गया था और प्रत्येक आइटम को हमारे मुख्य बॉडी पेज में जोड़ दिया गया था।

HTML कोड को कोड को तोड़ने और इसे पढ़ने और देखने में आसान बनाने के लिए Arrays के रूप में जोड़ा जाता है कि आइटमडेटा कहाँ डाला जा रहा है।

प्रत्येक आइटम के लूप में, मैं उन फ़ील्ड्स को हटा रहा हूँ जिन्हें मैं विवरण में नहीं देखना चाहता, जैसे कि डिफ़ॉल्ट, टाइमस्टैम्प, और चित्र URL। मैं विवरण से चित्र URL हटाता हूं क्योंकि इसे इसके बजाय एक टैग में href के रूप में जोड़ा जा रहा है। एक बार इस जानकारी को इकट्ठा करने के बाद इसे jQuery.append() फ़ंक्शन का उपयोग करके मुख्य निकाय को भेजा जाता है।

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

चित्र 2 (साइडबार को अद्यतन करना)

UpdateItems() फ़ंक्शन के समान ही, हमारे पास एक बार फिर HTML कोड की सरणियाँ हैं और सभी फ़िल्टर विकल्पों के लिए एक लूप है। केवल ध्यान देने योग्य परिवर्तन jQuery.selectpicker('refresh') है। यह फ़ंक्शन स्क्रिप्ट लाइब्रेरी से आता है जिसे हमने अंतिम चरण में शामिल किया था। यह प्रोग्रामर को एक साधारण चुनिंदा HTML लिखने की अनुमति देता है और लाइब्रेरी को खोजने योग्य फ़ंक्शन के साथ-साथ CSS कोड को शामिल करने के लिए इसे अपडेट करने देता है।

चित्र 3 (साइडबार से छानना)

अंत में हमारे पास updateFilter(formData) फंक्शन है। इसका उपयोग तब किया जाता है जब साइडबार से फॉर्म सबमिट किया जाता है। हम एक jQuery फ़ंक्शन का उपयोग करके शुरू करते हैं.serializeArray() यह हमारे मामले में परिभाषित तत्व के HTML कोड को पढ़ता है, और सर्वर पर भेजे जाने वाले स्ट्रिंग में मान देता है। और हम चित्र 1 से प्रक्रिया फिर से शुरू करते हैं।

चरण १३: अंत…।आखिरकार

खैर, यह लो; अपनी खुद की ऑनलाइन अलमारी स्थापित करने में मदद करने के लिए एक पूर्ण और विस्तृत व्याख्या, या अपने स्वयं के प्रोजेक्ट का विस्तार करने के लिए मेरी Google स्क्रिप्ट में बनाई गई कार्यक्षमता का उपयोग करें।

यह इस परियोजना को कोडिंग करने वाली एक यात्रा रही है (और इस निर्देश के माध्यम से दस्तावेजीकरण) लेकिन मैंने इस प्रक्रिया का आनंद लिया है और आशा है कि आप उत्पाद का आनंद लेंगे। मैं किसी भी व्यक्ति से वापस सुनना पसंद करूंगा जो समायोजन करता है क्योंकि माइकल जॉर्डन कहते हैं, "छत ही छत है" और मैं मानता हूं कि इस आवेदन की कोई सीमा नहीं है।