अपनी पहली टू-डू सूची आवेदन परिनियोजित करें: 8 कदम

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

यदि आप कोडिंग के लिए बिल्कुल नए हैं या आपके पास कुछ पृष्ठभूमि कोडिंग है, तो आप सोच रहे होंगे कि सीखना कहाँ से शुरू करें। आपको यह सीखने की जरूरत है कि कैसे, क्या, कहां कोड करना है और फिर, एक बार कोड तैयार हो जाने के बाद, इसे पूरे देखने के लिए कैसे तैनात किया जाए।

खैर, अच्छी खबर यह है कि कोडिंग मुश्किल नहीं है।

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

निर्माण समय: 90 मिनट।

कठिनाई: आसान।

चरण 1: हम क्या बनाएंगे?

इस ट्यूटोरियल के अंत तक हम करेंगे:

• HTML5 का उपयोग करके एक सरल टू-डू सूची वेब एप्लिकेशन बनाएं।
• अच्छी दिखने वाली और तेज़ स्टाइल जोड़ने के लिए बूटस्ट्रैप को हमारे ऐप के साथ एकीकृत करें।
• हमारे एप्लिकेशन में कुछ गतिशील व्यवहार जोड़ने के लिए जावास्क्रिप्ट और JQuery लाइब्रेरी का उपयोग करें।
• हमारे एप्लिकेशन को Ziet/now का उपयोग करके क्लाउड में परिनियोजित करें।

कार्रवाई में:

चरण 2: HTML, बूटस्ट्रैप, जावास्क्रिप्ट और JQuery का परिचय

एचटीएमएल क्या है?

हाइपर टेक्स्ट मार्कअप लैंग्वेज (एचटीएमएल) को "इंटरनेट की भाषा" के रूप में माना जा सकता है। HTML मानक मार्कअप भाषा है जिसका उपयोग वेब पेज बनाने के लिए किया जाता है। यह मूल रूप से वैज्ञानिक दस्तावेजों को साझा करने के लिए डिज़ाइन किया गया था। पिछले कुछ वर्षों में एचटीएमएल के अनुकूलन ने कई अन्य प्रकार के दस्तावेज़ों का वर्णन करना उपयुक्त बना दिया है जिन्हें इंटरनेट पर वेब पेजों के रूप में प्रदर्शित किया जा सकता है।

एक HTML पृष्ठ प्रदर्शित करने के लिए केवल एक वेब ब्राउज़र की आवश्यकता होती है, जैसे कि Microsoft Internet Explorer (IE), Mozilla Firefox, Google Chrome, या Apple Safari।

बूटस्ट्रैप क्या है?

उत्तरदायी, मोबाइल प्रथम वेब साइटों के निर्माण के लिए बूटस्ट्रैप सबसे लोकप्रिय HTML, CSS और जावास्क्रिप्ट ढांचा है। बूटस्ट्रैप ट्विटर द्वारा विकसित एक ओपन सोर्स प्रोजेक्ट है। इसमें सीएसएस वर्ग शामिल हैं जिन्हें तत्वों पर लगातार स्टाइल करने के लिए लागू किया जा सकता है और जावास्क्रिप्ट कोड जो अतिरिक्त वृद्धि करता है।

जावास्क्रिप्ट क्या है?

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

JQuery क्या है?

JQuery तेज, छोटी और सुविधा संपन्न जावास्क्रिप्ट लाइब्रेरी है, यह HTML दस्तावेज़ ट्रैवर्सल, और हेरफेर, इवेंट हैंडलिंग, एनीमेशन जैसी चीजों को बहुत सरल बनाती है।

JQuery की सारी शक्ति जावास्क्रिप्ट के माध्यम से एक्सेस की जाती है, इसलिए जावास्क्रिप्ट की मजबूत समझ होना आपके कोड को समझने, संरचित करने और डीबग करने के लिए आवश्यक है।

अधिक जानकारी के लिए:

एचटीएमएल

जावास्क्रिप्ट

jQuery

बूटस्ट्रैप

चरण 3: HTML के साथ आपका पहला पेज

STEP1: एक नया फोल्डर बनाएं:

mkdir सरल-टूडोलिस्ट

STEP2: simple-todolist फोल्डर के अंदर नई फाइल बनाएं और उसे index.html नाम दें।

सीडी सरल-टूडोलिस्ट

स्पर्श करें index.html

STEP3: निम्न कोड को index.html में जोड़ें।

करने के लिए सूची

मेरी टू-डू-लिस्ट

STEP4: अपने ब्राउज़र पर index.html खोलें।

आप देखेंगे कि मेरी टू-डू-लिस्ट प्रदर्शित है (ऊपर फोटो देखें)।

चरण 4: बूटस्ट्रैप जोड़ना

टू-डू लिस्ट ऐप में तेज और अच्छी स्टाइलिंग जोड़ने के लिए इस सेक्शन में हम अपने index.html पेज पर बूटस्ट्रैप सपोर्ट जोड़ेंगे।

सूचना: इस ऐप में हम बूटस्ट्रैप 3 का उपयोग करेंगे, आप किसी अन्य सीएसएस ढांचे का उपयोग करते हैं, जैसे सिमेंटिक यूआई।

STEP1: बूटस्ट्रैप CSS फ़ाइल को हेड टैग में जोड़ें:

STEP2: बॉडी टैग के अंत में बूटस्ट्रैप और JQuery CDN स्क्रिप्ट फ़ाइलें जोड़ें:

STEP3: अपने ब्राउज़र पर index.html खोलें।

बधाई हो, हम कुछ ही चरणों में अपने पेज पर बूटस्ट्रैप समर्थन को सफलतापूर्वक जोड़ लेते हैं।

चरण 5: UI को पूरा करें

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

STEP1: निम्नलिखित कोड को index.html में जोड़ें।

नया कार्य जोड़ें सभी को साफ़ करें!

मेरी कार्य सूची

STEP2: अपने ब्राउज़र पर index.html फ़ाइल खोलें।

चरण 6: तर्क को ऐप में जोड़ना

जब आप कोई कार्य नाम दर्ज करते हैं और जोड़ें बटन पर क्लिक करते हैं, तो इस समय कुछ भी नहीं होता है। चलिए इसे ठीक करते हैं।

इस चरण के अंत तक हम अपने index.html को एक गतिशील पृष्ठ में बदल देंगे, इसलिए यह उपयोगकर्ता के इंटरैक्शन के साथ व्यवहार करेगा।

STEP1: simple-todolist के अंदर एक नया फोल्डर बनाएं, इसे js नाम दें और उस फोल्डर के अंदर एक नई फाइल को script.js नाम दें:

एमकेडीआईआर जेएस

सीडी जेएस टच script.js

STEP2: हेड टैग के अंत में निम्नलिखित कोड जोड़कर script.js को index.html से लिंक करें:

STEP3: निम्न कोड को script.js फ़ाइल में जोड़ें

$ (दस्तावेज़)। तैयार (() => {

वर कार्य = 0 $ ("# सभी हटाएं")। छुपाएं (); /* नया टास्क हैंडलर जोड़ें */ $("#add").on("click", (event) => {event.preventDefault(); event.stopPropagation(); var val = $("input"). वैल (); अगर (वैल! == "") {कार्य +1; वर एल्म = $ ("

• "); $("#mylist").append(elem); $("input").val(""); /* अद्वितीय कार्य हैंडलर हटाएं */ $(.text-right").on(" क्लिक", फ़ंक्शन (ईवेंट) {event.preventDefault (); event.stopPropagation (); कार्य - = 1; $(यह).parent.remove (); }); /* जब हमारे पास 3 से अधिक हों तो सभी बटन हटाएं कार्य */ अगर (कार्य> 2) { $("#remveAll").show(); } /* सभी हैंडलर को हटा दें */ $("#removeAll").on("click", event => {event.preventDefault (); event.stopPropagation(); $(.disabled").siblings().remove(); task = 0; $("#removeAll").hide(); }); }}); });

  नोट: आप मेरे GitHub रिपॉजिटरी से या तो क्लोन प्राप्त कर सकते हैं या कोड का ज़िप डाउनलोड कर सकते हैं, यह आपको टैपिंग से बचाता है।

  गिट क्लोन github.com/ahmnouira/simple-todolist

  STEP4: कोड का परीक्षण करें

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

  चरण 7: (वैकल्पिक) ऐप को तैनात करें

  

  अब तक हमने एक सरल टूडू लिस्ट ऐप बनाया है, अब इसे क्लाउड में तैनात करने और दुनिया भर के अन्य लोगों के साथ अपने काम को साझा करने का समय है।

  इसे प्राप्त करने के लिए हम ZEIT Now नामक क्लाउड प्लेटफॉर्म का उपयोग करेंगे।

  अब ZEIT क्या है?

  ZEIt Now स्थिर साइटों और सर्वर रहित कार्यों के लिए एक क्लाउड प्लेटफॉर्म है, यह डेवलपर्स को वेबसाइटों और वेब सेवाओं को होस्ट करने में सक्षम बनाता है जो तुरंत तैनात होते हैं, यह सब शून्य कॉन्फ़िगरेशन के साथ।

  1. अभी स्थापित करें सीएलआई

  ZEIT Now के साथ परिनियोजित करने के लिए, आपको Now CLI इंस्टॉल करना होगा।

  महत्वपूर्ण: सुनिश्चित करें कि आपके पास npm स्थापित है।

  npm -v # जांचें कि क्या npm स्थापित है

  npm install -g now@latest # Now CLI के अंतिम संस्करण को विश्व स्तर पर अभी स्थापित करें -v # chech यदि Now CLI स्थापित है और इसे संस्करण प्रिंट करें

  2. तैनाती

  आपको बस इतना करना है कि निर्देशिका में जाना है और फिर अपने ऐप को एक ही आदेश के साथ तैनात करना है:

  अब --प्रोड # ऐप को तैनात करें

  एक बार परिनियोजित करने के बाद, आपको एक पूर्वावलोकन URL मिलेगा जो पते के अंतर्गत नवीनतम परिवर्तनों को साझा करने के लिए प्रत्येक परिनियोजन पर असाइन किया गया है।

  मेरा ऐप:

  चरण 8: निष्कर्ष

  यही सब है इसके लिए !

  नई सुविधाओं को सेट करके और ऐप का विस्तार करके कोड का पता लगाने के लिए स्वतंत्र महसूस करें, और टिप्पणी क्षेत्र में अपना अनुभव और प्रश्न साझा करें।

  मेरे और काम देखने के लिए कृपया GitHub पर मेरे ओपन सोर्स पर जाएँ।

  माययूट्यूब।

  Linkedin

  मेरे निर्देशयोग्य ^^ को पढ़ने का समय देने के लिए धन्यवाद।

  आपका दिन शुभ हो।

  अहमद नूइरा