توصيل Raspberry Pi بالويب: 9 خطوات

2024 مؤلف: John Day | [email protected]. آخر تعديل: 2024-01-30 07:37

في هذا الدرس ، ستتعلم كيفية إنشاء صفحة ويب ، وجمع البيانات باستخدام شبكة الويب العالمية ، واستخدام واجهات برمجة التطبيقات لنشر الصور على Tumblr و Twitter.

الخطوة 1: العميل والخادم

في الحوسبة ، خادم العميل هو نموذج برمجي يتكون من جزأين: عميل وخادم. كلاهما يتواصل عبر شبكة كمبيوتر أو معًا على نفس الكمبيوتر. العميل عبارة عن برنامج أو كمبيوتر به برنامج يعتمد على تقديم طلبات الخدمة إلى الخادم. الخادم هو برنامج كمبيوتر أو جهاز يمكنه قبول هذه الطلبات ومعالجتها وإعادة المعلومات المطلوبة إلى العميل. أحيانًا يكون من الصعب معرفة أيهما عند العمل مع آلات تقوم بمهام متعددة في وقت واحد. فيما يلي بعض الخصائص التي تساعدك على تمييز العميل والخادم عن بعضهما البعض.

خصائص العميل:

• هذا هو أول نشاط
• يرسل الطلبات إلى الخادم
• تتوقع وتتلقى ردودًا من الخادم
• عادة ما يتفاعل مباشرة مع المستخدمين النهائيين باستخدام أي واجهة مستخدم مثل واجهة المستخدم الرسومية

خصائص الخادم:

• في البداية هو سلبي
• إنه يستمع ، ومستعد للرد على الطلبات المرسلة من قبل العملاء
• عندما يأتي طلب ، يتم الرد بالبيانات المطلوبة للعملاء
• لا يتفاعل المستخدمون النهائيون عادةً بشكل مباشر مع الخادم ، ولكن يستخدمون عميلاً.

من الأمثلة الشائعة على العلاقة بين العميل والخادم متصفح الويب (العميل) الذي يطلب ويستقبل ملفات صفحات الويب المستضافة على خادم الويب.

الخطوة 2: إنشاء خادم ويب محلي

يمكن أن يصبح Raspberry Pi خادم ويب عن طريق تثبيت تطبيق خادم وتشغيله. تطبيقان شائعان للخوادم مفتوحة المصدر هما: NGINX (المحرك x) و Apache. في هذا الدرس ، سوف تستخدم Apache لأنه حتى كتابة هذه السطور ، تم توثيقه بشكل أكبر. هذا يجعل البحث عن إجابات عبر الإنترنت أسهل أثناء التعلم.

سيستضيف Raspberry Pi موقع ويب يمكن لأي جهاز على نفس الشبكة الوصول إليه. هيا بنا نبدأ!

الخطوة الثالثة: قم بتثبيت Apache

قم بتثبيت حزمة apache2. تجيب العلامة -y على سؤال الأمان المثبت مسبقًا نيابة عنك.

سودو apt-get install apache2 -y

يأتي Apache مع ملف HTML تجريبي يقوم بإنشاء صفحة ويب لعنصر نائب لاختبار التثبيت. يأتي ملف HTML التجريبي هذا في دليل جذر Apache. بشكل افتراضي ، يتم تعيين Apache للبحث في هذا الدليل عن مستندات الويب لإنشاء محتوى داخل مستعرض ويب. لإلقاء نظرة على صفحة الاختبار هذه والتأكد من أن Apache قد قام بالفعل بتثبيته بشكل صحيح ، قم بسحبه في متصفح الويب الخاص بك عن طريق كتابة عنوان URL هذا:

localhost /

إذا تم تثبيت Apache بشكل صحيح ، فسترى صفحة ويب اختبار Apache في المتصفح:

ابحث عن عنوان IP الخاص بـ Raspberry Pi

يمكنك استخدام عنوان المضيف المحلي للوصول إلى صفحة الويب أثناء استخدام Raspberry Pi. للوصول إلى صفحة الويب من جهاز كمبيوتر آخر ، تحتاج إلى عنوان IP الخاص بـ Raspberry Pi. للعثور على عنوان IP ، اكتب في LXTerminal:

ifconfig

يمكنك أيضًا العثور عليه على سطح المكتب إذا قمت بتمرير المؤشر فوق رمز استقبال WiFi.

الخطوة 4: إنشاء صفحة ويب ثابتة

يمكن لـ Raspberry Pi الآن استضافة صفحة ويب وجميع المحتويات التي سيتم نشرها عليها. هناك نوعان أساسيان من صفحات الويب: ثابتة وديناميكية. تحتوي الصفحة الثابتة على محتوى لا يتغير. الصفحة الديناميكية قادرة على عرض البيانات المتغيرة مثل قراءات المستشعر أو تغيير الوقت والتاريخ.

لنبدأ بصفحة ثابتة. لإنشاء واحدة تحتاج إلى استخدام لغة تسمى HTML. عندما تذهب إلى صفحة ويب ، فإن أول شيء تراه معروضًا هو صفحة index.html. هذه الصفحة هي الصفحة الافتراضية التي يعرضها المستعرض إذا لم يتم تحديد صفحة أخرى. بشكل افتراضي ، يبحث Apache عن ملف index.html هنا:

/ var / www / html

هذا يسمى جذر المستند ، وهو مجلد مخفي. إنه مخصص لعقد صفحات الويب. اذهب إلى هناك وألق نظرة حولك:

cd / var / www / html

ls

ستشاهد ملف index.html الافتراضي للاختبار مدرجًا. إذا كنت تريد حفظ الملف الافتراضي ، فأعد تسميته إلى شيء مثل defaultIndex.html باستخدام الأمر mv.

sudo mv index.html defaultIndex.html

إذا كنت لا تريد حفظه ، فقم بإزالة الملف باستخدام الأمر rm:

sudo rm index.html

الآن ، يمكنك إنشاء ملف index.html الخاص بك والبدء في تحريره:

sudo nano index.html

تذكر استخدام sudo ، فإن الدلائل www و html مملوكة للجذر ، لذا فأنت بحاجة إلى العمل كجذر لإنشاء وتحرير ومعالجة أي ملفات موجودة في تلك الدلائل.

صفحة HTML الأساسية

HTML هي لغة عميقة. يمكنك فعل الكثير معها. إذا كنت مهتمًا بمعرفة المزيد ، تحقق من موقع W3Schools حيث يمكنك العثور على العديد من البرامج التعليمية حول كيفية استخدام HTML لإنشاء موقع ويب. سنبدأ بصفحة HTML بسيطة.

أولاً ، أخبر المتصفح بإصدار HTML الذي تستخدمه. تم التصريح عن هذا المستند كمستند HTML5:

ابدأ بعلامات html و body:

ينتقل الجزء الأكبر من المحتوى الخاص بك بعد ذلك ، بين علامات الجسم. اجعل السطر الأول عنوانًا بعلامة h1. الرقم بعد الحرف "h" يحدد أهمية العنوان الذي يؤثر على حجم الخط. استخدم علامة p لتحديد فقرة:

لدى Raspberry Pi موقع ويب

ماذا يجب أن أضع هنا؟

قم بإنهاء الصفحة بإغلاق النص الأساسي و html والعلامات:

احفظ المستند بالملحق.html وقم بزيارة المضيف المحلي في المستعرض الخاص بك. سترى صفحة الويب الخاصة بك!

ماذا يجب أن تضع على صفحة الويب؟ دعونا نضع صورة ، أو الأفضل من ذلك ، animateMe.gif! لكي يتم عرض أي أصل على صفحة الويب هذه ، يجب وضعه في جذر مستند Apache. يجب عليك نسخها ولصقها حتى تظل في دليل boof / fotos أيضًا. لنسخ ملف ولصقه في سطر الأوامر ، استخدم الأمر cp. أولاً ، القرص المضغوط إلى الدليل الرئيسي الخاص بك:

مؤتمر نزع السلاح ~

انسخ والصق ملف animateMe.gif:

sudo cp boof / fotos / animateMe-g.webp

ارجع إلى دليل html:

cd / var / www / html

أعد فتح ملف index.html حتى تتمكن من إضافة الصورة:

sudo nano index.html

لتعريف وتضمين صورة في صفحة HTML ، استخدم علامة img. ضع السطر التالي بين العنوان والفقرة.

افتح الصفحة في المتصفح وستبدو هكذا باستثناء صورة-g.webp

الخطوة 5: أضف بعض الأناقة

الصفحة تبدو لطيفة بعض الشيء. لا لون ولا أسلوب. هذا هو المكان الذي يأتي فيه CSS. إنها لغة تعمل جنبًا إلى جنب مع HTML لجعل صفحة الويب أكثر جاذبية وإبداعًا بصريًا. سوف تتطرق هنا فقط ولكن إذا كنت ترغب في معرفة المزيد ، قم بزيارة W3schools لمعرفة المزيد.

كمثال ، دعنا نغير لون الخلفية عن طريق إضافة CSS إلى ملف HTML الخاص بك. هناك عدة طرق لتصميم صفحة الويب الخاصة بك باستخدام CSS. بالنسبة لهذه الفئة ، ستستخدم علامات الأنماط لتضمين CSS مباشرةً في ملف HTML الخاص بك.

ضع الأسطر التالية بين أول html وعلامات النص في الجزء العلوي من صفحة HTML الخاصة بك:

الجسم {background-color: powderblue؛}. سيبدو مثل هذا:

الجسم {لون الخلفية: مسحوق أزرق ؛}

الخطوة السادسة: تثبيت PHP

بدلاً من الصفحة الثابتة ، يمكنك إنشاء صفحة ديناميكية قادرة على التغيير دون تحميل الملفات يدويًا إليها. طريقة شائعة للقيام بذلك هي استخدام لغة برمجة تسمى PHP. لاستخدام PHP على Raspberry Pi ، تحتاج إلى تثبيته أولاً مع حزمة الوحدة النمطية لـ Apache:

sudo apt-get install 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

يمكن لـ Raspberry Pi طلب المعلومات والحصول عليها من تطبيقات البرامج الأخرى عبر الإنترنت من خلال API (واجهة برمجة التطبيقات). تسهل واجهة برمجة التطبيقات (API) على شيء مثل Raspberry Pi قطع جميع بيانات موقع الويب للحصول على الأشياء المفيدة فقط. اطلب من Raspberry Pi التحدث إلى Tumblr و Twitter و weather.com للتغريد ونشر الصور وعرض تنبؤات الطقس.

Raspberry Pi و Tumblr

يُنشئ التمرين التالي محادثة بين Raspberry Pi و Tumblr. كعميل ، سيطلب Raspberry Pi الخاص بك من Tumblr الحصول على مقتطفات من البيانات حتى يتمكن من تحميل الصور إلى خادم Tumblr البعيد ، مما يؤدي إلى نشر الصور في حساب Tumblr. للحصول على Raspberry Pi يعمل مع واجهة برمجة التطبيقات ، من المرجح أن تكون هناك بالفعل مكتبة لتستخدمها. بالنسبة إلى Tumblr ، يوجد Pytumblr. يتم إنشاء العميل في برنامج Python باستخدام وظيفة مضمنة تم إنشاؤها في Pytumblr. تستخدم هذه الوظيفة أربعة أكواد تفويض تم إنشاؤها بواسطة Tumblr:

• مفتاح المستهلك
• سر المستهلك
• مفتاح رمزي
• سر رمزي

قبل أن تتمكن من استخدام واجهة برمجة تطبيقات Tumblr ، يجب أن تحصل على أربعة هذه المفاتيح (على غرار كلمات المرور). للحصول عليهم اتبع الخطوات التالية:

1. قم بإنشاء حساب مجاني في Tumblr وقم بتسجيل الدخول.
2. قم بتسجيل طلب. ما عليك سوى تقديم معلومات أساسية مثل العنوان (جرب "My Raspberry Pi") والوصف والبريد الإلكتروني وموقع الويب (استخدم هذا إذا لم يكن لديك واحد). بعد التسجيل ، ستحصل على مفتاح العميل وسر العميل. انسخها والصقها في مكان آمن ، مثل ملف نصي أو بريد إلكتروني. للوصول إليها مرة أخرى ، انتقل إلى صفحة حسابك في Tumblr ، واختر الإعدادات في قائمة الحساب ، وانقر فوق التطبيقات.
3. قم بتسجيل الدخول إلى وحدة تحكم المطور باستخدام مفتاحك ورموز التفويض السرية. انقر فوق "السماح" عندما يُطلب منك ذلك إذا كنت تريد النشر نيابة عنك.
4. بمجرد تسجيل الدخول إلى وحدة تحكم المطور ، سترى مثالًا على التعليمات البرمجية بعدة لغات مختلفة. إما أن تنقر فوق علامة التبويب Python وانسخ كتلة OAuth ، أو في القائمة العلوية ، انقر فوق إظهار المفاتيح لرؤية مفتاح الرمز المميز والأكواد السرية المميزة إلى جانب الرمزين اللذين لديك بالفعل.

دعنا نضع هذه الأكواد في العمل ونصنع برنامج Python الذي ينشر animateMe-g.webp

قم أولاً بتثبيت Pytumblr:

sudo apt-get update

sudo pip تثبيت pytumblr

من دليلك الرئيسي ، أدخل القرص المضغوط في مجلد boof وأنشئ ملف Python:

cd boof

قم بإنشاء ملفك باستخدام محرر IDLE لتسهيل قص ولصق أكواد التفويض الطويلة جدًا. ضع هذا في ملف testPytumblr.py الخاص بك ، وقم بتحديث المفاتيح الأربعة واسم المستخدم الخاص بك:

استيراد pytumblr

# المصادقة عبر OAuth ، انسخ من https://api.tumblr.com/console/calls/user/info client = pytumblr. TumblrRestClient ('your_consumer_key'، 'your_consumer_secret'، 'your_token'، 'your_token_secret') client.create_photo ('your_account_username'، state = "publish"، tags = ["raspberrypi"، "picamera"]، data = "fotos / animateMe.gif") طباعة ("تم الرفع")

يقوم البرنامج بوضع علامات على الصورة التي تم تحميلها بواسطة "raspberrypi" و "picamera". إذا كنت ترغب في ذلك ، يمكنك إزالة هذه العلامات أو استبدالها أو الإضافة إليها. يتم تخزينها في متغير يسمى العلامات المستخدمة في client.create_photo ().

اضغط F5 لتشغيل البرنامج. سيكون هناك خطأ … لكنك قمت بالفعل بتثبيت Pytumblr فلماذا تقول Python أنها لا تستطيع العثور على الوحدة؟ هذا لأن Pytumblr لا يدعم Python 3 ، فهو يعمل فقط في Python 2 *. افتح محرر Python 2 IDLE وقم بقص الكود الخاص بك ولصقه ، والكتابة فوق برنامج Python 3 ثم تشغيله. عندما يتم تحميل-g.webp

هذا هو الجزء المثير! انتقل إلى صفحة Tumblr الخاصة بك وتحقق من GIF! بدل "منشور" في برنامجك إلى "مسودة" إذا كنت ترغب في إنشاء مسودات منشورات بدلاً من ذلك.

* بعد نشر هذه الفئة ، قام مستخدم جيثب آخر بتشكيل النسخة الأصلية ، مضيفًا دعم Python 3 لأوامر معينة.

إذا لم يظهر المنشور ، فتحقق جيدًا من أنك أدخلت مفاتيحك الأربعة واسم مستخدم Tumblr بشكل صحيح وأن اتصال الإنترنت الخاص بـ Pi نشط. يمكنك أيضًا تشغيل البرنامج النصي الخاص بك من سطر الأوامر باستخدام Python 2 (cd إلى boof للمجلد إذا لم تكن موجودًا بالفعل):

اختبار الثعبان

الخطوة 9: التقط لقطة شاشة لـ Tumblr و / أو موقع الويب

قم بإنشاء موقع ويب لعرض-g.webp