So erstellen Sie einen Raspberry Pi Pico W-Webserver


Wenn Sie keine große Website auf einem Hosting-Service einrichten möchten, können Sie ganz einfach einen Webserver bei sich zu Hause betreiben. Wie das geht, haben wir bereits erklärt Richten Sie einen Raspberry Pi-Webserver ein mit einem normalen Pi 3, 4 oder Zero, aber Sie brauchen nicht einmal einen vollen Pi, um die Arbeit zu erledigen. Mit dem Raspberry Pi PIco W, einem Wi-Fi-fähigen Mikrocontroller, der nur 6 US-Dollar kostet, können Sie ein einfaches Webserving durchführen.

Das Raspberry Pi Pico W ist nicht die offensichtlichste Wahl, aber mit ein wenig MicroPython-Code und etwas HTML können wir grundlegende, statische Webseiten von einem Pico W aus bereitstellen. Dieses Projekt besteht aus zwei Teilen. Der HTML- und der MicroPython-Code. Der HTML-Code ist das, was unser Browser sieht, und MicroPython fungiert als Mittel zur Bereitstellung des Codes.

Für dieses Projekt hosten wir eine einfache Webseite von einem Raspberry Pi Pico W. Wir zeigen auch, wie Sie Ihren Seiten mit CSS und JavaScript etwas mehr Glanz verleihen können. Schließlich werden wir den Inhalt der Welt zur Verfügung stellen, indem wir lernen, wie man externe Anfragen an unseren Raspberry Pi Pico W weiterleitet.

Für dieses Projekt benötigen Sie

HTML für Raspberry Pi Pico W Webserver

HyperText Markup Language (HTML) ist der grundlegende Baustein für das Web. Die Sprache ist ein Framework zum Erstellen von Webseiten, ein Framework, das seitdem für modernere Websites aktualisiert und verbessert wurde.

Der HTML-Code für unseren Pico W-Webserver kann so einfach oder kompliziert sein, wie Sie es wünschen, aber es gibt ein paar Einschränkungen zu beachten. Der HTML-Code für die Site wird in eine Python-Variable geladen, was bedeutet, dass wir es mit den Funktionen nicht zu sehr übertreiben können, da der Pico W nur ​​264 KB SRAM hat. Zweitens können wir keine Bilder oder Referenzdateien (CSS/JavaScript) auf dem Pico W bereitstellen, da wir wiederum das HTML in eine Python-Variable laden, die nicht auf das Dateisystem zugreifen kann.

Das bedeutet, dass auf alle Bilder oder CSS/JavaScript von einer Remote-Site aus zugegriffen werden muss. CSS und JavaScript im HTML-Code funktionieren, aber wir ziehen es vor, Bootstrap CSS und JavaScript über sein CDN zu referenzieren.

So erstellen Sie eine einfache HTML-Seite

1. Öffnen Sie einen Texteditor Ihrer Wahl. Notepad ist ausreichend, aber unsere Präferenz ist Notepad++.

2. Legen Sie den Dokumenttyp auf HTML fest und erstellen Sie dann ein HTML-Tag. Dadurch wird dem Browser mitgeteilt, dass die Seite in HTML geschrieben ist, und das Tag bezeichnet den Anfang des HTML-Dokuments.

<!DOCTYPE html>
<html>

3. Erstellen Sie ein neues Tag, , und verwenden Sie innerhalb des Heads , um den Titel des Browserfensters festzulegen, bevor Sie das Im Abschnitt speichern wir Metadaten für die Seite. Dies sind Daten, die ein Webbrowser benötigt, um die Seite zu verstehen. Wir verwenden es, um den Titel der Seite festzulegen, dies ist das absolute Minimum, um eine Seite zum Laufen zu bringen.

<head>
<title>Tom's Hardware Pico W Web Server</title>
</head>

4. Erstellen Sie einen Abschnitt . Dies ist der Abschnitt, in dem der für den Benutzer sichtbare Inhalt angezeigt wird.

<body>

5. Erstellen Sie eine Überschrift mit dem

-Tag und geben Sie Ihrer Seite eine Überschrift / einen Titel. Dies ist das größte Schlagzeilen-Tag.
<h1>Tom's Hardware Pico W Web Server</title>

6. Fügen Sie mit

eine weitere Überschrift hinzu und geben Sie dem Abschnitt einen Namen. In unserem Beispiel ist es „The Latest News“. Das

-Tag ist kleiner als

, betont aber dennoch, dass es sich um einen neuen Abschnitt handelt.
<h2>The Latest News</h2>

7. Fügen Sie ein Bild ein, das von einem entfernten CDN verlinkt ist, indem Sie das -Tag verwenden. Wir benötigen die vollständige URL für das Bild, das wir verwenden möchten, um sicherzustellen, dass wir auch die Erlaubnis haben, das Bild zu verwenden. In unserem Beispiel verwenden wir ein Bild von Pexels.com, ein Bilddienst mit kostenloser Lizenz. Bilder können mit dem -Tag in der Größe verändert werden. Wir können die Größe als Prozentsatz der Originalgröße angeben oder die Größe in Pixel fest codieren.

<img src="https://images.pexels.com/photos/1779487/pexels-photo-1779487.jpeg?cs=srgb&dl=pexels-designecologist-1779487.jpg", width=640px height=427px>

8. Verwenden Sie das Tag

, um einen Textabsatz zu erstellen. Für unsere Demo haben wir zwei Absätze von Lorem Ipsum verwendet, die mit a generiert wurden Lorem-Ipsum-Generator.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit…..</p>

(Bildnachweis: Toms Hardware)

9. Schließen Sie abschließend den Body und dann das HTML-Dokument.

</body>
</html>

10. Speichern Sie die Datei als index.html.

Behalten Sie den Code vorerst in dieser Datei, wir werden ihn später verwenden.

Python-Code für den Raspberry Pi Pico W-Webserver

Wir haben eine Seite für unsere eifrigen Leser erstellt, und jetzt müssen wir ein Mittel schaffen, um sie ihnen anzubieten. Dazu erstellen wir eine kurze MicroPython-Anwendung, die den Inhalt unserer index.html-Datei liest und als Webseite bereitstellt.

1. Befolgen Sie diese Anleitung, um Ihren Raspberry Pi Pico W einzurichten. Befolgen Sie die Schritte bis „Wie man eine LED blinkt“.

2. Erstellen Sie eine neue leere Datei.

3. Importieren Sie zwei Module. Der erste ist Socket, eine Low-Level-Netzwerkschnittstelle. Das zweite ist das Netzwerk, das wir verwenden werden, um eine Verbindung zu unserem Wi-Fi-Zugangspunkt herzustellen.

import socket
import network

4. Erstellen Sie ein Objekt, eine Seite und verwenden Sie es, um auf die HTML-Datei auf unserem Pico W zu verweisen. Dadurch wird die Datei im schreibgeschützten Modus geöffnet.

page = open("index.html", "r")

5. Lesen Sie den Inhalt der Datei in ein neues Objekt, html, und schließen Sie dann die Datei. Dadurch wird der gesamte HTML-Code in das HTML-Objekt eingelesen.

html = page.read()
page.close()

6. Erstellen Sie ein Objekt, wlan, und verwenden Sie es, um eine Verbindung von unserem Code zum Wi-Fi-Chip auf dem Pico W herzustellen.

wlan = network.WLAN(network.STA_IF)

7. Schalten Sie das WLAN ein und verbinden Sie sich dann mit Ihrem Passwort mit Ihrem Zugangspunkt.

wlan.active(True)
wlan.connect("ACCESS POINT","PASSWORD")

8. Erstellen Sie ein Objekt, sta_if, das als unsere Schnittstelle zwischen dem Pico W und dem Wi-Fi-Zugangspunkt dient.

sta_if = network.WLAN(network.STA_IF)

9. Drucken Sie die IP-Adresse des Pico W aus, notieren Sie sich die IP-Adresse, da wir diese später benötigen. Die zurückgegebenen Daten sind ein Listenobjekt, das unsere IP-Adresse, Netzmaske und DHCP-Serveradresse enthält. Die IP-Adresse ist das erste Element in der Liste, die so verwendet wird [0] wir können es ohne weitere Informationen aus der Liste zurückgeben.

print(sta_if.ifconfig()[0])

10. Stellen Sie den Pico W so ein, dass er von jeder IP-Adresse auf Verbindungen an Port 80 lauscht. Wir verwenden socket.SO_REUSEADDR, um die Verwendung derselben IP-Adresse nach einem Reset zu ermöglichen. Dies behebt ein Problem, bei dem der Pico W vollständig heruntergefahren werden müsste, um die IP-Adresse wiederzuverwenden.

addr = socket.getaddrinfo('0.0.0.0', 80)[0][-1]
s = socket.socket()
s.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, 1)
s.bind(addr)
s.listen(1)

11. Erstellen Sie eine Schleife, um den nächsten Codeabschnitt kontinuierlich auszuführen.

while True:

12. Stellen Sie den Pico W so ein, dass er eine Verbindung akzeptiert und um eine Datei zu erstellen, die zu unserer Webseite wird.

   cl, addr = s.accept()
   cl_file = cl.makefile('rwb', 0)

13. Erstellen Sie eine weitere Schleife, und erstellen Sie innerhalb der Schleife ein Objekt, Zeile, um den Inhalt unserer Webseite Zeile für Zeile zu lesen.

   while True:
       line = cl_file.readline()

14. Verwenden Sie eine bedingte Anweisung, um das Lesen des Inhalts zu stoppen, wenn Wagenrückläufe vorhanden sind oder Zeilenumbrüche.

       if not line or line == b'rn':
           break

fünfzehn. Erstellen Sie ein Objekt namens response, in dem wir den HTML-Code speichern für die Webseite.

   response = html 

16. Richten Sie eine Client-Antwort ein, die den HTTP-Statuscode und den Inhaltstyp an den Browser sendet. dann antwortet mit dem HTML in ihrem Browser gerendert werden. Die Verbindung wird dann getrennt.

   cl.send('HTTP/1.0 200 OKrnContent-type: text/htmlrnrn')
   cl.send(response)
   cl.close()

17. Speichern Sie die Datei als main.py auf dem Raspberry Pi Pico W. Dadurch wird der Code automatisch ausgeführt, wenn der Pico W startet.

(Bildnachweis: Toms Hardware)

Vollständige Auflistung des MicroPython-Codes

import socket
import network

page = open("index.html", "r")
html = page.read()
page.close()

wlan = network.WLAN(network.STA_IF)
wlan.active(True)
wlan.connect("ACCESS POINT","PASSWORD")
sta_if = network.WLAN(network.STA_IF)
print(sta_if.ifconfig()[0])
addr = socket.getaddrinfo('0.0.0.0', 80)[0][-1]
s = socket.socket()
s.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, 1)
s.bind(addr)
s.listen(1)
while True:
    cl, addr = s.accept()
    cl_file = cl.makefile('rwb', 0)
    while True:
        line = cl_file.readline()
        if not line or line == b'rn':
            break
    response = html 
    
    cl.send('HTTP/1.0 200 OKrnContent-type: text/htmlrnrn')
    cl.send(response)
    cl.close()

Index.html auf den Raspberry Pi Pico W kopieren

1. Klicken Sie in Thonny auf Ansicht >> Dateien. Dies öffnet einen Dateimanager. Das obere Fenster ist die Quelle, in diesem Fall das Hauptlaufwerk unseres PCs. Das untere Fenster ist das Ziel, der Raspberry Pi Pico W.

(Bildnachweis: Toms Hardware)

2. Navigieren Sie im oberen Fenster zum Speicherort Ihrer index.html-Datei.

(Bildnachweis: Toms Hardware)

3. Klicken Sie mit der rechten Maustaste auf index.html und wählen Sie „Upload to /“, um die Datei auf Ihren Pico W zu kopieren.

(Bildnachweis: Toms Hardware)

4. Trennen Sie den Pico W von Ihrem Computer, dann wieder einstecken, um den Pico W neu zu starten und den Webserver zu starten.

5. Auf Ihrem PC Öffnen Sie ein neues Browserfenster / Tab und gehen Sie zur IP-Adresse Ihres Pico W. Nach wenigen Augenblicken erscheint die Seite im Fenster.

(Bildnachweis: Toms Hardware)

Verbesserung unseres HTML

(Bildnachweis: Toms Hardware)

Mit Bootstrap und seinem CDN haben wir eine viel professioneller aussehende Seite erstellt. Im Wesentlichen werden die gleichen grundlegenden

-,

– und -Elemente verwendet, jedoch mit zusätzlichen Funktionen wie Trennlinien und benutzerdefiniertem CSS.

Bootstrap ist ein Framework für HTML, CSS und JavaScript, das schnell professionell aussehende Websites erstellt. Wenn Sie eine schnelle Demo-Site für Kunden oder Ihre eigenen Projekte erstellen möchten, ist Bootstrap ein guter Ausgangspunkt.

Wir haben die angepasst Helden-Vorlage für unsere Demo, Ersetzen der CSS- und JavaScript-Links für BootstrapCDN-Links.

Wenn Sie unseren Code verwenden möchten, können Sie dies tun von hier heruntergeladen.

Weiterleitung von Anfragen an unseren Raspberry Pi Pico W Webserver

Im Moment ist unser Server nur für Geräte im selben Netzwerk zugänglich. Um unseren Raspberry Pi Pico W-Webserver mit der Welt zu teilen, müssen wir unsere externe IP-Adresse ermitteln und eine Portweiterleitung einrichten, um externe Anfragen an unseren Pico W zu senden.

Jeder Router hat ein subtil anderes Mittel, um diese Aufgaben zu erledigen. Unsere Schritte veranschaulichen, wie unser vom ISP bereitgestellter Router damit umgeht.

1. Holen Sie sich Ihre externe IP-Adresse. Verwenden Sie die Suchmaschine von Google und suchen Sie nach „Wie lautet meine IP-Adresse?“ und notieren Sie sich die IP-Adresse.

(Bildnachweis: Toms Hardware)

2. Melden Sie sich bei den erweiterten Einstellungen Ihres Routers an und Wählen Sie DHCP-Reservierung. Wir müssen sicherstellen, dass unser Pico W eine statische IP-Adresse im LAN hat, und die DHCP-Reservierung ist ein Mittel, um dies zu tun.

(Bildnachweis: Toms Hardware)

3. Wählen Sie Ihren Pico W aus der Liste der angeschlossenen Geräte aus.

(Bildnachweis: Toms Hardware)

4. Fügen Sie die Reservierung zur IP-Lease-Tabelle hinzu und klicken Sie dann auf Anwenden. Dadurch wird garantiert, dass Ihr Pico W in Ihrem Zuhause dieselbe IP-Adresse erhält.

(Bildnachweis: Toms Hardware)

5. Navigieren Sie zum Portweiterleitungsmenü auf Ihrem Router. In unserem Fall war es unter Erweiterte Einstellungen >> Portweiterleitung.

(Bildnachweis: Toms Hardware)

6. Setzen Sie den Dienst auf HTTP (Port 80) und Erstellen Sie eine Regel für den HTTP-Datenverkehr. Stellen Sie den Start- und Endport auf 80, das Protokoll auf TCP und die IP-Adresse ein zu dem deines Pico W. Speichern dann wende die Regel an.

(Bildnachweis: Toms Hardware)

7. Öffnen Sie auf einem anderen Gerät, das über ein anderes Netzwerk (Mobilfunk) verbunden ist, den Browser und Gehen Sie zu Ihrer externen IP-Adresse. Sie sehen nun die Webseite, die über Ihren Pico W bereitgestellt wird.

(Bildnachweis: Toms Hardware)

Kommentar verfassen

%d Bloggern gefällt das:
Türkçe altyazılı porno izle