Verbinden Ihres Raspberry Pi mit dem Web - Gunook

2024 Autor: John Day | [email protected]. Zuletzt bearbeitet: 2024-01-30 07:17

In dieser Lektion erfahren Sie, wie Sie eine Webseite erstellen, Daten über das World Wide Web sammeln und APIs verwenden, um Bilder auf Tumblr und Twitter zu posten.

Schritt 1: Client und Server

In der Informatik ist Client-Server ein Softwaremodell, das aus zwei Teilen besteht: einem Client und einem Server. Beide kommunizieren über ein Computernetzwerk oder gemeinsam auf demselben Computer. Der Client ist ein Programm oder ein Computer mit Software, die auf Dienstanfragen an einen Server angewiesen ist. Der Server ist ein Computerprogramm oder ein Gerät, das diese Anfragen annehmen, verarbeiten und die angeforderten Informationen an den Client zurücksenden kann. Manchmal ist es schwierig herauszufinden, welche welche ist, wenn Sie mit Maschinen arbeiten, die mehrere Aufgaben gleichzeitig erledigen. Hier sind einige Merkmale, die Ihnen helfen, einen Client und einen Server zu unterscheiden.

Kundenmerkmale:

• Es ist das erste aktive
• Sendet Anfragen an den Server
• Es erwartet und empfängt Antworten vom Server
• Interagiert normalerweise direkt mit Endbenutzern über eine beliebige Benutzeroberfläche, z. B. eine grafische Benutzeroberfläche

Servereigenschaften:

• Es ist zunächst passiv
• Es hört zu und ist bereit, auf Anfragen von Clients zu antworten
• wenn eine Anfrage kommt, antwortet mit den angeforderten Daten an die Clients
• Endbenutzer interagieren normalerweise nicht direkt mit einem Server, sondern verwenden einen Client.

Ein gängiges Beispiel für eine Client-Server-Beziehung ist ein Webbrowser (Client), der auf einem Webserver gehostete Webseitendateien anfordert und empfängt.

Schritt 2: Erstellen Sie einen lokalen Webserver

Der Raspberry Pi kann zu einem Webserver werden, indem eine Serveranwendung installiert und ausgeführt wird. Zwei beliebte Open-Source-Serveranwendungen sind: NGINX (ausgesprochen Engine x) und Apache. In dieser Lektion werden Sie Apache verwenden, da es zum jetzigen Zeitpunkt stärker dokumentiert ist. Dies macht die Suche nach Antworten online einfacher, während Sie lernen.

Ihr Raspberry Pi hostet eine Website, auf die jedes Gerät im selben Netzwerk zugreifen kann. Lass uns anfangen!

Schritt 3: Apache installieren

Installieren Sie das Apache2-Paket. Das Flag -y beantwortet die Sicherheitsfrage vor der Installation für Sie.

sudo apt-get install apache2 -y

Apache wird mit einer HTML-Testdatei geliefert, die eine Platzhalter-Webseite zum Testen der Installation generiert. Diese HTML-Testdatei befindet sich im Stammverzeichnis von Apache. Standardmäßig sucht Apache in diesem Verzeichnis nach Webdokumenten, um Inhalte in einem Webbrowser zu erstellen. Um einen Blick auf diese Testseite zu werfen und zu bestätigen, dass Apache tatsächlich richtig installiert wurde, rufen Sie sie in Ihrem Webbrowser auf, indem Sie diese URL-Adresse eingeben:

localhost/

Wenn Apache korrekt installiert ist, sehen Sie die Apache-Testwebseite im Browser:

Finden Sie die IP-Adresse Ihres Raspberry Pi

Sie können die localhost-Adresse verwenden, um auf die Webseite zuzugreifen, während Sie sich auf dem Raspberry Pi befinden. Um von einem anderen Computer auf die Webseite zuzugreifen, benötigen Sie die IP-Adresse Ihres Raspberry Pi. So finden Sie den IP-Adresstyp in LXTerminal:

ifconfig

Sie finden es auch auf dem Desktop, wenn Sie mit der Maus über das WLAN-Empfangssymbol fahren.

Schritt 4: Erstellen Sie eine statische Webseite

Ihr Raspberry Pi kann jetzt eine Webseite und alle Inhalte, die darauf veröffentlicht werden, hosten. Es gibt zwei grundlegende Arten von Webseiten: statische und dynamische. Eine statische Seite hat Inhalte, die sich nicht ändern. Eine dynamische Seite kann sich ändernde Daten wie Sensormesswerte oder die Änderung von Uhrzeit und Datum anzeigen.

Beginnen wir mit einer statischen Seite. Um eine zu erstellen, müssen Sie eine Sprache namens HTML verwenden. Wenn Sie eine Webseite aufrufen, sehen Sie wahrscheinlich als erstes eine index.html-Seite. Diese Seite ist die Standardseite, die ein Browser anzeigt, wenn keine andere Seite angegeben ist. Standardmäßig sucht Apache hier nach der Datei index.html:

/var/www/html

Dies wird als Dokumentenstamm bezeichnet und ist ein versteckter Ordner. Es ist für das Halten von Webseiten bestimmt. Gehen Sie dorthin und sehen Sie sich um:

cd /var/www/html

ls

Sie sehen die Liste der standardmäßigen test index.html-Datei. Wenn Sie die Standarddatei speichern möchten, benennen Sie sie mit dem Befehl mv in etwa defaultIndex.html um.

sudo mv index.html defaultIndex.html

Wenn Sie sie nicht speichern möchten, entfernen Sie die Datei mit dem Befehl rm:

sudo rm index.html

Jetzt können Sie Ihre eigene index.html-Datei erstellen und mit der Bearbeitung beginnen:

sudo nano index.html

Denken Sie daran, sudo zu verwenden. Die Verzeichnisse www und html gehören root, sodass Sie als root fungieren müssen, um alle Dateien in diesen Verzeichnissen zu erstellen, zu bearbeiten und zu bearbeiten.

Einfache HTML-Seite

HTML ist eine Sprache, die tief geht. Sie können viel damit machen. Wenn Sie mehr darüber erfahren möchten, besuchen Sie die Website von W3Schools, auf der Sie viele Tutorials zur Verwendung von HTML zum Erstellen einer Website finden. Wir beginnen mit einer einfachen HTML-Seite.

Teilen Sie dem Browser zunächst mit, welche HTML-Version Sie verwenden. Dieses Dokument ist als HTML5-Dokument deklariert:

Beginnen Sie mit den HTML- und Body-Tags:

Der Großteil Ihres Inhalts wird als nächstes zwischen den Body-Tags platziert. Machen Sie die erste Zeile zu einer Überschrift mit dem Tag h1. Die Zahl nach dem "h" definiert die Bedeutung der Überschrift, die sich auf die Schriftgröße auswirkt. Verwenden Sie das p-Tag, um einen Absatz zu definieren:

Mein Raspberry Pi hat eine Website

Was soll ich hier einfügen?

Beenden Sie die Seite, indem Sie den Textkörper, HTML und Tags schließen:

Speichern Sie das Dokument mit der Endung.html und besuchen Sie localhost in Ihrem Browser. Sie werden Ihre Webseite sehen!

Was sollten Sie auf die Webseite stellen? Lassen Sie uns ein Bild oder besser noch das animateMe-g.webp

cd ~

Kopieren Sie die Datei animateMe-g.webp

sudo cp boof/fotos/animateMe-g.webp

Gehen Sie zurück zum HTML-Verzeichnis:

cd /var/www/html

Öffnen Sie die Datei index.html erneut, damit Sie das Bild hinzufügen können:

sudo nano index.html

Um ein Bild auf einer HTML-Seite zu definieren und einzubetten, verwenden Sie das img-Tag. Fügen Sie die folgende Zeile zwischen Überschrift und Absatz ein.

Öffnen Sie die Seite im Browser und sie sieht so aus, außer mit Ihrem eigenen stilvollen Selfie-GIF.

Schritt 5: Fügen Sie einen Stil hinzu

Die Seite sieht etwas langweilig aus. Keine Farbe und kein Stil. Hier kommt CSS ins Spiel. Es ist eine Sprache, die Hand in Hand mit HTML arbeitet, um eine Webseite attraktiver und visuell kreativer zu machen. Sie werden hier nur ansprechen, aber wenn Sie mehr erfahren möchten, besuchen Sie die W3schools, um mehr zu erfahren.

Lassen Sie uns als Beispiel die Farbe des Hintergrunds ändern, indem Sie CSS zu Ihrer HTML-Datei hinzufügen. Es gibt verschiedene Möglichkeiten, Ihre Webseite mit CSS zu gestalten. Für diese Klasse verwenden Sie die style-Tags, um CSS direkt in Ihre HTML-Datei einzubetten.

Fügen Sie die folgenden Zeilen zwischen den ersten HTML- und Body-Tags oben auf Ihrer HTML-Seite ein:

body {Hintergrundfarbe: puderblau;} Tags. Es wird so aussehen:

Körper {Hintergrundfarbe: puderblau;}

Schritt 6: PHP installieren

Anstelle einer statischen Seite können Sie eine dynamische Seite erstellen, die sich ändern kann, ohne dass Sie Dateien manuell hochladen müssen. Eine beliebte Methode hierfür ist die Verwendung einer Skriptsprache namens PHP. Um PHP auf dem Raspberry Pi zu verwenden, müssen Sie es zuerst mit Modulpaket für Apache installieren:

sudo apt-get install libapache2-mod-php5 php5 -y

Schritt 7: Erstellen Sie eine dynamische Webseite

PHP mit HTML kombinieren Solange PHP-Code in Tags enthalten ist, können Sie ihn in eine HTML-Dateistruktur einbinden. Kombinieren Sie beispielsweise Ihre aktuellen HTML- und PHP-Skripte und vergrößern Sie den Text mithilfe von HTML-Tags.

Lassen Sie uns ein einfaches PHP-Skript einbinden, das Datum und Uhrzeit anzeigt. Fügen Sie Folgendes an einer beliebigen Stelle zwischen den Tags ein:

Speichern Sie die Datei mit Strg + o, ändern Sie jedoch die Erweiterung von.html in.php, wodurch eine neue Datei gespeichert wird. Um den Browser nicht zu verwirren, entfernen Sie die alte.html-Version:

sudo rm index.html

Aktualisieren Sie localhost in Ihrem Webbrowser. Die Ausgabe sieht so aus:

Okay, was ist der Unterschied? Es sieht aus wie eine normale HTML-Seite, nicht wahr? Aktualisieren Sie die Seite und beobachten Sie die Magie. Die Magie der Zeit wird sich ändern! Das ist PHP und seine eingebaute date()-Funktion, die für Sie arbeitet, um eine dynamische Webseite zu erstellen.

Schritt 8: Erstellen Sie einen Tumblr-API-Client

Der Raspberry Pi kann über eine API (Application Programming Interface) Informationen von anderen Softwareanwendungen online anfordern und abrufen. Eine API macht es für so etwas wie den Raspberry Pi einfach, alle Daten einer Website zu durchschneiden, um nur die nützlichen Dinge zu erfassen. Lassen Sie Ihren Raspberry Pi mit Tumblr, Twitter und weather.com kommunizieren, um zu twittern, Bilder zu posten und Wettervorhersagen anzuzeigen.

Raspberry Pi und Tumblr

Die folgende Übung erstellt eine Konversation zwischen Ihrem Raspberry Pi und Tumblr. Als Client fragt Ihr Raspberry Pi Tumblr nach Datenschnipseln, damit er Bilder auf den Remote-Server von Tumblr hochladen kann, was dazu führt, dass die Bilder auf einem Tumblr-Konto veröffentlicht werden. Damit ein Raspberry Pi mit einer API funktioniert, wird es höchstwahrscheinlich bereits eine Bibliothek geben, die Sie verwenden können. Für Tumblr gibt es Pytumblr. Ein Client wird in einem Python-Programm mit einer integrierten Funktion erstellt, die in Pytumblr erstellt wurde. Diese Funktion verwendet vier von Tumblr generierte Autorisierungscodes:

• Verbraucherschlüssel
• Verbrauchergeheimnis
• Token-Schlüssel
• Token-Geheimnis

Bevor Sie die API von Tumblr verwenden können, müssen Sie vier dieser Schlüssel erhalten (ähnlich wie bei Passwörtern). Um sie zu erhalten, gehen Sie wie folgt vor:

1. Erstellen Sie ein kostenloses Tumblr-Konto und melden Sie sich an.
2. Registrieren Sie eine Anwendung. Sie müssen nur grundlegende Informationen wie einen Titel (versuchen Sie "My Raspberry Pi"), eine Beschreibung, eine E-Mail und eine Website (verwenden Sie diese, wenn Sie keine haben) angeben. Nach der Registrierung erhalten Sie einen Consumer Key und ein Consumer Secret. Kopieren Sie sie und fügen Sie sie an einem sicheren Ort ein, z. B. in einer Textdatei oder E-Mail. Um wieder darauf zuzugreifen, gehen Sie zu Ihrer Tumblr-Kontoseite, wählen Sie Einstellungen im Kontomenü und klicken Sie auf Apps.
3. Melden Sie sich mit Ihrem Schlüssel und Ihrem geheimen Autorisierungscode bei der Entwicklerkonsole an. Klicken Sie auf Zulassen, wenn Sie gefragt werden, ob die Veröffentlichung in Ihrem Namen erfolgen soll.
4. Sobald Sie sich bei der Entwicklerkonsole angemeldet haben, sehen Sie Beispielcode in mehreren verschiedenen Sprachen. Klicken Sie entweder auf die Registerkarte Python und kopieren Sie den OAuth-Block, oder klicken Sie im oberen Menü auf Schlüssel anzeigen, um den Token-Schlüssel und die Token-Geheimcodes zusammen mit den beiden bereits vorhandenen Codes anzuzeigen.

Lassen Sie uns diese Codes anwenden und ein Python-Programm erstellen, das die animateMe-g.webp

Installieren Sie zuerst Pytumblr:

sudo apt-get update

sudo pip installieren pytumblr

Von Ihrem Home-Verzeichnis, cd in den boof-Ordner und erstellen Sie eine Python-Datei:

CD-Boof

Erstellen Sie Ihre Datei mit dem IDLE-Editor, um das Ausschneiden und Einfügen Ihrer sehr langen Autorisierungscodes zu vereinfachen. Fügen Sie dies in Ihre Datei testPytumblr.py ein und aktualisieren Sie die vier Schlüssel und Ihren Benutzernamen:

pytumblr importieren

# Authentifizierung über OAuth, Kopie von 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="published", tags=["raspberrypi", "picamera"], data="fotos/animateMe.gif") print("uploaded")

Das Programm markiert das hochgeladene Foto für Sie mit "raspberrypi" und "picamera". Wenn Sie möchten, können Sie diese Tags entfernen, ersetzen oder ergänzen. Diese werden in einer Variablen namens Tags gespeichert, die in client.create_photo() verwendet wird.

Drücken Sie F5, um das Programm auszuführen. Es wird ein Fehler auftreten … aber Sie haben Pytumblr bereits installiert, warum sagt Python also, dass es das Modul nicht finden kann? Dies liegt daran, dass Pytumblr Python 3 nicht unterstützt, es funktioniert nur in Python 2 *. Öffnen Sie den Python 2-IDLE-Editor und schneiden Sie Ihren Code aus und fügen Sie ihn ein, überschreiben Sie das Python 3-Programm und führen Sie es dann aus. Wenn das-g.webp

Das ist der spannende Teil! Gehen Sie zu Ihrer Tumblr-Seite und sehen Sie sich das-g.webp

*Nachdem diese Klasse veröffentlicht wurde, hat ein anderer Github-Benutzer das Original geforkt und Unterstützung für Python 3 für bestimmte Befehle hinzugefügt.

Wenn der Beitrag nicht angezeigt wird, überprüfen Sie, ob Sie Ihre vier Schlüssel und Ihren Tumblr-Benutzernamen richtig eingegeben haben und ob die Internetverbindung Ihres Pi aktiv ist. Sie können Ihr Skript auch über die Befehlszeile mit Python 2 ausführen (cd in Ihren Ordner boof, wenn Sie noch nicht dort sind):

Python-TestPytumblr.py

Schritt 9: Machen Sie einen Screenshot von Tumblr und/oder Website

Erstellen Sie eine Website, um ein-g.webp