अपने रास्पबेरी पाई को वेब से जोड़ना: 9 कदम

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

इस पाठ में, आप सीखेंगे कि वेब पेज कैसे बनाया जाता है, वर्ल्ड वाइड वेब का उपयोग करके डेटा एकत्र किया जाता है, और टम्बलर और ट्विटर पर चित्र पोस्ट करने के लिए एपीआई का उपयोग किया जाता है।

चरण 1: क्लाइंट और सर्वर

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

ग्राहक विशेषताएं:

• यह पहला सक्रिय है
• सर्वर को अनुरोध भेजता है
• यह सर्वर से प्रतिक्रिया की अपेक्षा करता है और प्राप्त करता है
• आमतौर पर किसी भी यूजर इंटरफेस जैसे ग्राफिकल यूजर इंटरफेस का उपयोग करके एंड-यूजर्स के साथ सीधे इंटरैक्ट करता है

सर्वर विशेषताएं:

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

क्लाइंट और सर्वर संबंध का एक सामान्य उदाहरण एक वेब ब्राउज़र (क्लाइंट) है जो वेब सर्वर पर होस्ट की गई वेब पेज फ़ाइलों का अनुरोध और प्राप्त करता है।

चरण 2: एक स्थानीय वेब सर्वर बनाएँ

रास्पबेरी पाई एक सर्वर एप्लिकेशन को स्थापित और चलाकर एक वेब सर्वर बन सकता है। दो लोकप्रिय ओपन सोर्स सर्वर अनुप्रयोग हैं: एनजीआईएनएक्स (उच्चारण इंजन एक्स) और अपाचे। इस पाठ में, आप अपाचे का उपयोग करेंगे, क्योंकि इस लेखन के रूप में, यह अधिक भारी रूप से प्रलेखित है। जैसे-जैसे आप सीखते हैं, इससे ऑनलाइन उत्तर खोजना आसान हो जाता है।

आपका रास्पबेरी पाई एक वेबसाइट की मेजबानी करेगा जिसे उसी नेटवर्क पर कोई भी उपकरण एक्सेस कर सकता है। आएँ शुरू करें!

चरण 3: अपाचे स्थापित करें

Apache2 पैकेज स्थापित करें। -y ध्वज आपके लिए पूर्व-स्थापित सुरक्षा प्रश्न का उत्तर देता है।

sudo apt-apache2 -y. स्थापित करें

अपाचे एक परीक्षण HTML फ़ाइल के साथ आता है जो स्थापना का परीक्षण करने के लिए प्लेसहोल्डर वेब पेज उत्पन्न करता है। यह परीक्षण HTML फ़ाइल Apache की मूल निर्देशिका में आती है। डिफ़ॉल्ट रूप से, वेब ब्राउज़र में सामग्री बनाने के लिए वेब दस्तावेज़ों के लिए अपाचे इस निर्देशिका में देखने के लिए तैयार है। इस परीक्षण पृष्ठ पर एक नज़र डालने के लिए और यह पुष्टि करने के लिए कि अपाचे ने वास्तव में इसे सही ढंग से स्थापित किया है, इस यूआरएल पते में टाइप करके इसे अपने वेब ब्राउज़र में ऊपर खींचें:

लोकलहोस्ट/

यदि अपाचे सही ढंग से स्थापित है, तो आप ब्राउज़र में अपाचे परीक्षण वेब पेज देखेंगे:

अपना रास्पबेरी पाई का आईपी पता खोजें

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

ifconfig

यदि आप वाईफाई रिसेप्शन सिंबल पर कर्सर घुमाते हैं तो आप इसे डेस्कटॉप पर भी पा सकते हैं।

चरण 4: एक स्टेटिक वेब पेज बनाएं

आपका रास्पबेरी पाई अब एक वेब पेज और उस पर प्रकाशित होने वाली सभी सामग्री को होस्ट कर सकता है। वेब पेज दो प्रकार के होते हैं: स्थिर और गतिशील। एक स्थिर पृष्ठ में ऐसी सामग्री होती है जो नहीं बदलती है। एक गतिशील पृष्ठ बदलते डेटा जैसे सेंसर रीडिंग या बदलते समय और तारीख को प्रदर्शित करने में सक्षम है।

आइए एक स्थिर पृष्ठ से शुरू करें। एक बनाने के लिए आपको HTML नामक भाषा का उपयोग करना होगा। जब आप किसी वेब पेज पर जाते हैं तो पहली चीज जो आपको दिखाई देती है वह शायद एक index.html पेज है। यह पृष्ठ डिफ़ॉल्ट पृष्ठ है जो एक ब्राउज़र दिखाता है यदि कोई अन्य पृष्ठ निर्दिष्ट नहीं है। डिफ़ॉल्ट रूप से, अपाचे यहां index.html फ़ाइल की तलाश करता है:

/var/www/html

इसे दस्तावेज़ रूट कहा जाता है, और यह एक छिपा हुआ फ़ोल्डर है। यह वेब पेज रखने के लिए नामित है। वहाँ जाओ और चारों ओर देखो:

सीडी /var/www/html

रास

आपको डिफ़ॉल्ट परीक्षण index.html फ़ाइल सूचीबद्ध दिखाई देगी। यदि आप डिफ़ॉल्ट फ़ाइल को सहेजना चाहते हैं, तो इसे mv कमांड का उपयोग करके defaultIndex.html जैसी किसी चीज़ का नाम दें।

sudo mv index.html defaultIndex.html

यदि आप इसे सहेजना नहीं चाहते हैं, तो rm कमांड का उपयोग करके फ़ाइल को हटा दें:

sudo rm index.html

अब, आप अपनी खुद की index.html फ़ाइल बना और संपादित करना शुरू कर सकते हैं:

sudo nano index.html

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

मूल HTML पृष्ठ

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

सबसे पहले, ब्राउज़र को बताएं कि आप HTML के किस संस्करण का उपयोग कर रहे हैं। इस दस्तावेज़ को HTML5 दस्तावेज़ के रूप में घोषित किया गया है:

एचटीएमएल और बॉडी टैग से शुरू करें:

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

माई रास्पबेरी पाई की एक वेबसाइट है

मुझे यहाँ क्या रखना चाहिए?

मुख्य भाग और html और टैग बंद करके पृष्ठ को समाप्त करें:

दस्तावेज़ को प्रत्यय.html के साथ सहेजें और अपने ब्राउज़र में लोकलहोस्ट पर जाएँ। आप अपना वेब पेज देखेंगे!

आपको वेब पेज पर क्या डालना चाहिए? चलिए एक छवि बनाते हैं, या बेहतर अभी तक, animateMe.gif! इस वेब पेज पर किसी भी संपत्ति को प्रदर्शित करने के लिए इसे अपाचे के दस्तावेज़ रूट में रखा जाना चाहिए। आपको इसे कॉपी और पेस्ट करना चाहिए ताकि यह आपकी boof/fotos निर्देशिका में भी रहे। किसी फ़ाइल को कमांड-लाइन में कॉपी और पेस्ट करने के लिए cp कमांड का उपयोग करें। सबसे पहले, अपने होम डायरेक्टरी में सीडी:

सीडी ~

animateMe-g.webp

sudo cp boof/fotos/animateMe-g.webp

एचटीएमएल निर्देशिका पर वापस जाएं:

सीडी /var/www/html

index.html फ़ाइल को फिर से खोलें ताकि आप चित्र जोड़ सकें:

sudo nano index.html

HTML पेज पर इमेज को परिभाषित और एम्बेड करने के लिए img टैग का उपयोग करें। निम्नलिखित पंक्ति को शीर्षक और अनुच्छेद के बीच में रखें।

ब्राउजर में पेज खोलें और यह आपकी खुद की स्टाइलिश सेल्फी जीआईएफ को छोड़कर ऐसा दिखेगा।

चरण 5: कुछ शैली जोड़ें

पृष्ठ थोड़ा धुंधला दिख रहा है। कोई रंग नहीं और कोई शैली नहीं। यह वह जगह है जहां सीएसएस आता है। यह एक ऐसी भाषा है जो वेब पेज को अधिक आकर्षक और नेत्रहीन रचनात्मक बनाने के लिए एचटीएमएल के साथ हाथ से काम करती है। आप केवल यहाँ पर स्पर्श करेंगे लेकिन यदि आप अधिक जानने के लिए W3schools के बारे में अधिक जानना चाहते हैं।

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

अपने HTML पृष्ठ के शीर्ष पर पहले html और बॉडी टैग के बीच निम्न पंक्तियाँ रखें:

शरीर {पृष्ठभूमि-रंग: पाउडरब्लू;} टैग। यह इस तरह दिखेगा:

शरीर {पृष्ठभूमि-रंग: पाउडरब्लू;}

चरण 6: PHP स्थापित करें

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

sudo apt-libapache2-mod-php5 php5 -y. स्थापित करें

चरण 7: एक गतिशील वेब पेज बनाएं

PHP को HTML के साथ संयोजित करें जब तक PHP कोड टैग के भीतर समाहित है, आप इसे HTML फ़ाइल संरचना में शामिल कर सकते हैं। उदाहरण के तौर पर, अपनी वर्तमान HTML और PHP स्क्रिप्ट को मिलाएं और HTML टैग्स का उपयोग करके टेक्स्ट को बड़ा बनाएं।

आइए एक साधारण PHP स्क्रिप्ट शामिल करें जो दिनांक और समय प्रदर्शित करती है। निम्नलिखित को टैग के बीच कहीं भी चिपकाएँ:

फाइल को Ctrl + o से सेव करें लेकिन एक्सटेंशन को.html से.php में बदलें, जिससे एक नई फाइल सेव हो जाएगी। ब्राउज़र को भ्रमित न करने के लिए, पुराने.html संस्करण को हटा दें:

sudo rm index.html

अपने वेब ब्राउजर में लोकलहोस्ट को रिफ्रेश करें। आउटपुट इस तरह दिखेगा:

ठीक है, तो क्या अंतर है? ऐसा लगता है कि एक नियमित HTML पृष्ठ है ना? पेज को रिफ्रेश करें और जादू देखें। समय होने का जादू बदल जाएगा! यह PHP और इसका बिल्ट-इन date() फंक्शन है जो आपके लिए एक डायनामिक वेब पेज बनाने के लिए काम कर रहा है।

चरण 8: एक Tumblr API क्लाइंट बनाएँ

रास्पबेरी पाई एक एपीआई (एप्लिकेशन प्रोग्रामिंग इंटरफेस) के माध्यम से अन्य सॉफ्टवेयर अनुप्रयोगों से ऑनलाइन अनुरोध और जानकारी प्राप्त कर सकता है। एक एपीआई रास्पबेरी पाई जैसी किसी चीज़ के लिए वेबसाइट के सभी डेटा को काटने के लिए केवल उपयोगी सामान को हथियाने के लिए आसान बनाता है। अपने रास्पबेरी पाई को ट्वीट करने, चित्र पोस्ट करने और मौसम के पूर्वानुमान प्रदर्शित करने के लिए Tumblr, Twitter, और weather.com से बात करें।

रास्पबेरी पाई और टम्बलर

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

• उपभोक्ता कुंजी
• उपभोक्ता रहस्य
• टोकन कुंजी
• सांकेतिक रहस्य

इससे पहले कि आप Tumblr के API का उपयोग कर सकें, आपको ये चार कुंजियाँ (पासवर्ड के समान) प्राप्त करनी होंगी। उन्हें प्राप्त करने के लिए इन चरणों का पालन करें:

1. एक मुफ़्त टम्बलर खाता बनाएँ और लॉग इन करें।
2. एक आवेदन पंजीकृत करें। आपको केवल एक शीर्षक ("माई रास्पबेरी पाई" आज़माएं), विवरण, ईमेल और वेबसाइट जैसी बुनियादी जानकारी देने की आवश्यकता है (यदि आपके पास एक नहीं है तो इसका उपयोग करें)। पंजीकरण के बाद, आपको एक उपभोक्ता कुंजी और उपभोक्ता रहस्य मिलेगा। उन्हें कॉपी करके किसी सुरक्षित जगह पर चिपकाएं, जैसे टेक्स्ट फ़ाइल या ईमेल. उन्हें फिर से एक्सेस करने के लिए अपने Tumblr अकाउंट पेज पर जाएं, अकाउंट मेनू में सेटिंग्स चुनें, और ऐप्स पर क्लिक करें।
3. अपनी कुंजी और गुप्त प्राधिकरण कोड का उपयोग करके डेवलपर कंसोल में लॉग इन करें। जब आपसे पूछा जाए कि क्या आप इसे अपनी ओर से पोस्ट करना चाहते हैं तो अनुमति दें पर क्लिक करें।
4. डेवलपर कंसोल में लॉग इन करने के बाद, आपको कई अलग-अलग भाषाओं में उदाहरण कोड दिखाई देगा। या तो पायथन टैब पर क्लिक करें और OAuth ब्लॉक को कॉपी करें, या शीर्ष मेनू में शो कीज़ पर क्लिक करके टोकन कुंजी और टोकन गुप्त कोड और आपके पास पहले से मौजूद दो कोड देखें।

आइए इन कोडों को काम में लाते हैं और एक पायथन प्रोग्राम बनाते हैं जो आपके नए Tumblr खाते में animateMe-g.webp

पहले पाइटम्बलर स्थापित करें:

सुडो एपीटी-अपडेट प्राप्त करें

sudo pip pytumblr स्थापित करें

अपने होम डायरेक्टरी से, सीडी को बूफ फोल्डर में डालें और एक पायथन फाइल बनाएं:

सीडी बूफ

अपने बहुत लंबे प्राधिकरण कोड को काटना और चिपकाना आसान बनाने के लिए IDLE के संपादक का उपयोग करके अपनी फ़ाइल बनाएं। इसे अपनी testPytumblr.py फ़ाइल में डालें, चार कुंजियों और अपने उपयोगकर्ता नाम को अपडेट करते हुए:

आयात pytumblr

# OAuth के माध्यम से प्रमाणित करता है, https://api.tumblr.com/console/calls/user/info क्लाइंट से कॉपी करें। 'your_account_username', राज्य = "प्रकाशित", टैग = ["रास्पबेरीपी", "पिकमेरा"], डेटा = "फोटो / एनिमेटमे। जीआईएफ") प्रिंट ("अपलोड किया गया")

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

प्रोग्राम चलाने के लिए F5 दबाएं। एक त्रुटि होगी… लेकिन आपने पहले ही Pytumblr स्थापित कर लिया है, तो Python यह क्यों कह रहा है कि उसे मॉड्यूल नहीं मिल रहा है? ऐसा इसलिए है क्योंकि Pytumblr Python 3 का समर्थन नहीं करता है, यह केवल Python 2* में काम करता है। पायथन 2 आईडीएलई संपादक खोलें और अपना कोड कट और पेस्ट करें, पायथन 3 प्रोग्राम को अधिलेखित करें और फिर इसे चलाएं। जब इसने-g.webp

यह रोमांचक हिस्सा है! अपने Tumblr पेज पर जाएँ और-g.webp

* इस वर्ग के प्रकाशित होने के बाद, एक अन्य जीथब उपयोगकर्ता ने कुछ आदेशों के लिए पायथन 3 के लिए समर्थन जोड़ते हुए मूल को फोर्क किया है।

यदि पोस्ट दिखाई नहीं देती है, तो दोबारा जांचें कि आपने अपनी चार कुंजियां और Tumblr उपयोगकर्ता नाम सही ढंग से दर्ज किया है, और यह कि आपके Pi का इंटरनेट कनेक्शन सक्रिय है। आप अपनी स्क्रिप्ट को पायथन 2 का उपयोग करके कमांड लाइन से भी चला सकते हैं (यदि आप पहले से नहीं हैं तो अपने फ़ोल्डर बूफ में सीडी):

अजगर परीक्षणPytumblr.py

चरण 9: Tumblr और/या वेबसाइट का स्क्रीनशॉट लें

जीआईएफ प्रदर्शित करने के लिए एक वेबसाइट बनाएं या एक टम्बलर खाता बनाएं और जीआईएफ अपलोड करें। अपने चुने हुए का स्क्रीनशॉट लें और उसे साझा करें!