Łączenie Raspberry Pi z Internetem: 9 kroków

2024 Autor: John Day | [email protected]. Ostatnio zmodyfikowany: 2024-01-30 11:28

W tej lekcji dowiesz się, jak utworzyć stronę internetową, zbierać dane za pomocą sieci WWW i używać interfejsów API do publikowania obrazów na Tumblr i Twitterze.

Krok 1: Klient i serwer

W informatyce klient-serwer to model oprogramowania składający się z dwóch części: klienta i serwera. Obie komunikują się przez sieć komputerową lub razem na tym samym komputerze. Klient to program lub komputer z oprogramowaniem, który polega na wysyłaniu żądań usług do serwera. Serwer to program komputerowy lub urządzenie, które może akceptować te żądania, przetwarzać je i zwracać żądane informacje do klienta. Czasami trudno jest ustalić, który jest który podczas pracy z maszynami, które wykonują wiele zadań jednocześnie. Oto kilka cech, które pomogą Ci odróżnić klienta od serwera.

Charakterystyka klienta:

• Jest to pierwsza aktywna
• Wysyła żądania do serwera
• Oczekuje i otrzymuje odpowiedzi od serwera
• Zwykle współdziała bezpośrednio z użytkownikami końcowymi za pomocą dowolnego interfejsu użytkownika, takiego jak graficzny interfejs użytkownika

Charakterystyka serwera:

• Jest początkowo pasywny
• Nasłuchuje, jest gotowy do odpowiedzi na prośby wysyłane przez klientów
• gdy nadejdzie żądanie, odpowiada z żądanymi danymi do klientów
• Użytkownicy końcowi zazwyczaj nie wchodzą w interakcję bezpośrednio z serwerem, ale korzystają z klienta.

Typowym przykładem relacji klient-serwer jest przeglądarka internetowa (klient) żądająca i odbierająca pliki stron internetowych hostowanych na serwerze sieciowym.

Krok 2: Utwórz lokalny serwer internetowy

Raspberry Pi może stać się serwerem WWW, instalując i uruchamiając aplikację serwerową. Dwie popularne aplikacje serwerowe typu open source to: NGINX (wymawiany silnik x) i Apache. W tej lekcji użyjesz Apache, ponieważ w chwili pisania tego tekstu jest on bardziej szczegółowo udokumentowany. Ułatwia to wyszukiwanie odpowiedzi online podczas nauki.

Twoje Raspberry Pi będzie hostować stronę internetową, do której może uzyskać dostęp dowolne urządzenie w tej samej sieci. Zacznijmy!

Krok 3: Zainstaluj Apache

Zainstaluj pakiet Apache2. Flaga -y odpowiada na pytanie zabezpieczające przed instalacją.

sudo apt-get zainstaluj apache2 -y

Apache jest dostarczany z testowym plikiem HTML, który generuje zastępczą stronę internetową, za pomocą której można przetestować instalację. Ten testowy plik HTML znajduje się w katalogu głównym Apache. Domyślnie Apache szuka w tym katalogu dokumentów internetowych w celu tworzenia treści w przeglądarce internetowej. Aby spojrzeć na tę stronę testową i potwierdzić, że Apache rzeczywiście zainstalował się poprawnie, otwórz go w swojej przeglądarce internetowej, wpisując ten adres URL:

hostlokalny/

Jeśli Apache został poprawnie zainstalowany, zobaczysz stronę testową Apache w przeglądarce:

Znajdź adres IP swojego Raspberry Pi

Możesz użyć adresu lokalnego hosta, aby uzyskać dostęp do strony internetowej na Raspberry Pi. Aby uzyskać dostęp do strony internetowej z innego komputera, potrzebujesz adresu IP swojego Raspberry Pi. Aby znaleźć adres IP, wpisz w LXTerminal:

ifconfig

Możesz go również znaleźć na pulpicie, jeśli najedziesz kursorem na symbol odbioru WiFi.

Krok 4: Utwórz statyczną stronę internetową

Twoje Raspberry Pi może teraz hostować stronę internetową i całą zawartość, która zostanie na niej opublikowana. Istnieją dwa podstawowe rodzaje stron internetowych: statyczne i dynamiczne. Strona statyczna zawiera treść, która się nie zmienia. Dynamiczna strona może wyświetlać zmieniające się dane, takie jak odczyty czujników lub zmieniający się czas i data.

Zacznijmy od statycznej strony. Aby go stworzyć, musisz użyć języka zwanego HTML. Kiedy wchodzisz na stronę internetową, pierwszą wyświetlaną rzeczą jest prawdopodobnie strona index.html. Ta strona jest domyślną stroną wyświetlaną przez przeglądarkę, jeśli nie określono innej strony. Domyślnie Apache szuka pliku index.html tutaj:

/var/www/html

Nazywa się to katalogiem głównym dokumentu i jest to ukryty folder. Jest przeznaczony do przechowywania stron internetowych. Idź tam i rozejrzyj się:

cd /var/www/html

ls

Zobaczysz na liście domyślny testowy plik index.html. Jeśli chcesz zapisać domyślny plik, zmień jego nazwę na coś w rodzaju defaultIndex.html za pomocą polecenia mv.

sudo mv index.html defaultIndex.html

jeśli nie chcesz go zapisywać, usuń plik za pomocą polecenia rm:

sudo rm index.html

Teraz możesz stworzyć i rozpocząć edycję własnego pliku index.html:

sudo nano index.html

Pamiętaj, aby używać sudo, katalogi www i html są własnością roota, więc musisz działać jako root, aby tworzyć, edytować i manipulować plikami znajdującymi się w tych katalogach.

Podstawowa strona HTML

HTML to język, który sięga głęboko. Możesz z tym wiele zrobić. Jeśli chcesz dowiedzieć się więcej, zajrzyj na stronę W3Schools, na której znajdziesz wiele samouczków, jak używać HTML do budowania strony internetowej. Zaczniemy od prostej strony HTML.

Najpierw poinformuj przeglądarkę, jakiej wersji HTML używasz. Ten dokument jest zadeklarowany jako dokument HTML5:

Zacznij od tagów html i body:

Większość treści trafia dalej, między tagi body. Ustaw pierwszy wiersz jako nagłówek ze znacznikiem h1. Liczba po „h” określa znaczenie nagłówka, który wpływa na wielkość czcionki. Użyj znacznika p, aby zdefiniować akapit:

Moje Raspberry Pi ma stronę internetową

Co powinienem tutaj umieścić?

Zakończ stronę zamykając treść i html oraz tagi:

Zapisz dokument z rozszerzeniem.html i odwiedź localhost w swojej przeglądarce. Zobaczysz swoją stronę internetową!

Co powinieneś umieścić na stronie internetowej? Umieśćmy obraz, lub jeszcze lepiej, animateMe.gif! Aby jakikolwiek zasób był wyświetlany na tej stronie internetowej, musi być umieszczony w katalogu głównym dokumentów Apache. Powinieneś go skopiować i wkleić, aby pozostał również w twoim katalogu boof/fotos. Aby skopiować i wkleić plik w wierszu poleceń, użyj polecenia cp. Najpierw przejdź do katalogu domowego:

cd ~

Skopiuj i wklej plik animateMe.gif:

sudo cp boof/fotos/animateMe-g.webp

Wróć do katalogu html:

cd /var/www/html

Otwórz ponownie plik index.html, aby dodać obraz:

sudo nano index.html

Aby zdefiniować i osadzić obraz na stronie HTML, użyj tagu img. Umieść następującą linię między nagłówkiem a akapitem.

Otwórz stronę w przeglądarce i będzie wyglądać tak, z wyjątkiem własnego stylowego GIF-a z selfie.

Krok 5: Dodaj trochę stylu

Strona wygląda trochę nijako. Bez koloru i bez stylu. W tym miejscu pojawia się CSS. Jest to język, który współpracuje z HTML, aby uczynić stronę internetową bardziej atrakcyjną i kreatywną wizualnie. Tutaj tylko dotkniesz, ale jeśli chcesz dowiedzieć się więcej, przejdź do szkół W3, aby dowiedzieć się więcej.

Jako przykład zmieńmy kolor tła, dodając CSS do pliku HTML. Istnieje kilka sposobów stylizowania strony internetowej za pomocą CSS. W przypadku tej klasy użyjesz znaczników stylu, aby osadzić CSS bezpośrednio w pliku HTML.

Umieść następujące wiersze między pierwszymi tagami HTML i body u góry strony HTML:

body {background-color: powderblue;} tagi. Będzie to wyglądać tak:

body {background-color: powderblue;}

Krok 6: Zainstaluj PHP

Zamiast statycznej strony możesz utworzyć dynamiczną stronę, która będzie mogła się zmieniać bez ręcznego przesyłania na nią plików. Popularnym sposobem na to jest użycie języka skryptowego o nazwie PHP. Aby używać PHP na Raspberry Pi, musisz najpierw zainstalować go z pakietem modułów dla Apache:

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

Krok 7: Stwórz dynamiczną stronę internetową

Połącz PHP z HTMLA Tak długo, jak kod PHP jest zawarty w znacznikach, możesz umieścić go w strukturze pliku HTML. Na przykład połącz swoje obecne skrypty HTML i PHP i powiększ tekst za pomocą znaczników HTML.

Dołączmy prosty skrypt PHP, który wyświetla datę i godzinę. Wklej następujące elementy w dowolnym miejscu między tagami:

Zapisz plik za pomocą Ctrl + o, ale zmień rozszerzenie z.html na.php, co spowoduje zapisanie nowego pliku. Aby nie pomylić przeglądarki, usuń starą wersję.html:

sudo rm index.html

Odśwież localhost w przeglądarce internetowej. Wynik będzie wyglądał tak:

Ok, więc jaka jest różnica? Wygląda jak zwykła strona HTML, prawda? Odśwież stronę i obserwuj magię. Magia czasu zmieni się! To PHP i jego wbudowana funkcja date() pracująca nad stworzeniem dynamicznej strony internetowej.

Krok 8: Utwórz klienta Tumblr API

Raspberry Pi może żądać i pobierać informacje z innych aplikacji online za pośrednictwem interfejsu API (interfejs programowania aplikacji). API ułatwia coś takiego jak Raspberry Pi przebijanie się przez wszystkie dane strony internetowej, aby pobrać tylko przydatne rzeczy. Niech Twoje Raspberry Pi porozmawia z Tumblr, Twitterem i weather.com, aby tweetować, publikować obrazy i wyświetlać prognozy pogody.

Raspberry Pi i Tumblr

Poniższe ćwiczenie tworzy rozmowę między Twoim Raspberry Pi a Tumblrem. Jako klient, Twoje Raspberry Pi będzie prosić Tumblr o fragmenty danych, aby móc przesyłać obrazy na zdalny serwer Tumblr, w wyniku czego obrazy zostaną opublikowane na koncie Tumblr. Aby Raspberry Pi pracowało z API, najprawdopodobniej będzie już dostępna biblioteka do użycia. Dla Tumblra jest Pytumblr. Klient jest tworzony w programie Pythona za pomocą wbudowanej funkcji utworzonej w Pytumblr. Ta funkcja wykorzystuje cztery kody autoryzacji generowane przez Tumblr:

• Klucz klienta
• tajemnica konsumenta
• klucz tokena
• token tajny

Zanim będziesz mógł korzystać z API Tumblra, musisz zdobyć cztery te klucze (podobne do haseł). Aby je zdobyć, wykonaj następujące kroki:

1. Utwórz darmowe konto Tumblr i zaloguj się.
2. Zarejestruj aplikację. Wystarczy podać podstawowe informacje, takie jak tytuł (spróbuj „My Raspberry Pi”), opis, adres e-mail i strona internetowa (użyj tego, jeśli go nie masz). Po rejestracji otrzymasz klucz klienta i tajemnicę klienta. Skopiuj je i wklej w bezpieczne miejsce, np. plik tekstowy lub e-mail. Aby ponownie uzyskać do nich dostęp, przejdź do strony swojego konta Tumblr, wybierz Ustawienia w menu Konto i kliknij Aplikacje.
3. Zaloguj się do konsoli programisty, używając klucza i tajnych kodów autoryzacyjnych. Kliknij zezwól, gdy pojawi się pytanie, czy chcesz publikować w Twoim imieniu.
4. Po zalogowaniu się do konsoli programisty zobaczysz przykładowy kod w kilku różnych językach. Kliknij kartę Python i skopiuj blok OAuth lub w górnym menu kliknij Pokaż klucze, aby zobaczyć klucz tokena i tajne kody tokena wraz z dwoma kodami, które już masz.

Wykorzystajmy te kody i stwórzmy program w Pythonie, który opublikuje animateMe-g.webp

Najpierw zainstaluj Pytumblr:

aktualizacja sudo apt-get

sudo pip zainstaluj pytumblr

Z katalogu domowego przenieś cd do folderu boof i utwórz plik Pythona:

cd boof

Utwórz plik za pomocą edytora IDLE, aby ułatwić wycinanie i wklejanie bardzo długich kodów autoryzacyjnych. Umieść to w pliku testPytumblr.py, aktualizując cztery klucze i nazwę użytkownika:

importuj pytumblr

# Uwierzytelnianie przez OAuth, skopiuj z https://api.tumblr.com/console/calls/user/info client = pytumblr. TumblrRestClient('your_consumer_key', 'your_consumer_secret', 'your_token', 'your_token_secret') client. 'your_account_username', state="opublikowane", tags=["raspberrypi", "picamera"], data="fotos/animateMe.gif") print("przesłane")

Program oznacza dla Ciebie przesłane zdjęcie słowami „raspberrypi” i „picamera”. Jeśli chcesz, możesz usunąć, zastąpić lub dodać do tych tagów. Są one przechowywane w zmiennej zwanej tagami używanej w client.create_photo().

Naciśnij klawisz F5, aby uruchomić program. Wystąpi błąd… ale masz już zainstalowany Pytumblr, więc dlaczego Python mówi, że nie może znaleźć modułu? Dzieje się tak, ponieważ Pytumblr nie obsługuje Pythona 3, działa tylko w Pythonie 2*. Otwórz edytor IDLE Python 2 i wytnij i wklej swój kod, nadpisz program Python 3, a następnie uruchom go. Po przesłaniu GIF-a w oknie powłoki Pythona zostanie wydrukowane „uploaded”.

To ekscytująca część! Wejdź na swoją stronę Tumblr i sprawdź GIF! Zamień „opublikowane” w swoim programie na „wersje robocze”, jeśli chcesz zamiast tego tworzyć wersje robocze postów.

*Po opublikowaniu tej klasy inny użytkownik github rozwinął oryginał, dodając obsługę Pythona 3 dla niektórych poleceń.

Jeśli post się nie pojawi, sprawdź, czy poprawnie wpisałeś cztery klucze i nazwę użytkownika Tumblr oraz czy połączenie internetowe Twojego Pi jest aktywne. Możesz także uruchomić swój skrypt z wiersza poleceń za pomocą Pythona 2 (cd do folderu boof, jeśli jeszcze tam nie jesteś):

python testPytumblr.py

Krok 9: Zrób zrzut ekranu Tumblra i/lub strony internetowej

Utwórz stronę internetową, aby wyświetlić na niej-g.webp