Připojení vašeho Raspberry Pi k webu: 9 kroků

2024 Autor: John Day | [email protected]. Naposledy změněno: 2024-01-30 08:20

V této lekci se naučíte, jak vytvořit webovou stránku, shromažďovat data pomocí celosvětového webu a používat API k odesílání obrázků na Tumblr a Twitter.

Krok 1: Klient a server

V oblasti výpočetní techniky je klient-server softwarový model skládající se ze dvou částí: klienta a serveru. Oba komunikují prostřednictvím počítačové sítě nebo společně na stejném počítači. Klient je program nebo počítač se softwarem, který závisí na zadávání požadavků na služby na server. Server je počítačový program nebo zařízení, které tyto požadavky dokáže přijmout, zpracovat a vrátit požadované informace klientovi. Někdy je složité zjistit, který je který, když pracujete se stroji, které provádějí více úkolů najednou. Zde jsou některé charakteristiky, které vám pomohou odlišit klienta a server.

Charakteristika klienta:

• Je to první aktivní
• Odesílá požadavky na server
• Očekává a přijímá odpovědi ze serveru
• Obvykle komunikuje přímo s koncovými uživateli pomocí jakéhokoli uživatelského rozhraní, jako je grafické uživatelské rozhraní

Charakteristika serveru:

• Zpočátku je pasivní
• Naslouchá, je připraven reagovat na požadavky zaslané klienty
• když přijde požadavek, odpoví klientům požadovanými údaji
• Koncoví uživatelé obvykle neinteragují přímo se serverem, ale používají klienta.

Běžným příkladem vztahu klient a server je webový prohlížeč (klient), který požaduje a přijímá soubory webových stránek hostované na webovém serveru.

Krok 2: Vytvořte místní webový server

Raspberry Pi se může stát webovým serverem instalací a spuštěním serverové aplikace. Dvě populární open source serverové aplikace jsou: NGINX (vyslovuje se motor x) a Apache. V této lekci použijete Apache, protože v době psaní tohoto článku je dokumentovanější. Díky tomu je hledání odpovědí online při učení jednodušší.

Váš Raspberry Pi bude hostit web, ke kterému má přístup jakékoli zařízení ve stejné síti. Začněme!

Krok 3: Nainstalujte si Apache

Nainstalujte balíček apache2. Příznak -y za vás zodpoví bezpečnostní otázku před instalací.

sudo apt -get install apache2 -y

Apache je dodáván s testovacím souborem HTML, který generuje zástupnou webovou stránku pro testování instalace. Tento testovací soubor HTML se nachází v kořenovém adresáři Apache. Ve výchozím nastavení je Apache nastaven tak, aby v tomto adresáři vyhledával webové dokumenty k vytváření obsahu ve webovém prohlížeči. Chcete -li se podívat na tuto testovací stránku a potvrdit, že se Apache skutečně nainstaloval správně, vytáhněte ji ve webovém prohlížeči zadáním této adresy URL:

localhost/

Pokud je Apache nainstalován správně, zobrazí se v prohlížeči webová stránka s testem Apache:

Zjistěte IP adresu svého Raspberry Pi

Adresu localhost můžete použít k přístupu na webovou stránku na Raspberry Pi. Pro přístup na webovou stránku z jiného počítače potřebujete IP adresu vašeho Raspberry Pi. Chcete -li najít typ IP adresy v LXTerminal:

ifconfig

Najdete ho také na ploše, pokud umístíte kurzor na symbol příjmu WiFi.

Krok 4: Vytvořte statickou webovou stránku

Váš Raspberry Pi nyní může hostovat webovou stránku a veškerý obsah, který na ní bude publikován. Existují dva základní druhy webových stránek: statické a dynamické. Statická stránka má obsah, který se nemění. Dynamická stránka je schopna zobrazit měnící se data, jako jsou údaje ze senzorů nebo měnící se čas a datum.

Začněme statickou stránkou. Chcete -li jej vytvořit, musíte použít jazyk HTML. Když přejdete na webovou stránku, první věc, kterou uvidíte, je pravděpodobně stránka index.html. Tato stránka je výchozí stránkou, kterou prohlížeč zobrazí, pokud není zadána jiná stránka. Apache ve výchozím nastavení hledá soubor index.html zde:

/var/www/html

Toto se nazývá kořen dokumentu a je to skrytá složka. Je určen pro uchovávání webových stránek. Jděte tam a podívejte se kolem:

cd/var/www/html

ls

Zobrazí se výchozí testovací soubor index.html. Pokud chcete uložit výchozí soubor, přejmenujte jej na něco jako defaultIndex.html pomocí příkazu mv.

sudo mv index.html defaultIndex.html

pokud jej nechcete uložit, odeberte soubor pomocí příkazu rm:

sudo rm index.html

Nyní můžete vytvořit a začít upravovat svůj vlastní soubor index.html:

sudo nano index.html

Nezapomeňte použít sudo, adresáře www a html jsou ve vlastnictví root, takže při vytváření, úpravách a manipulaci s libovolnými soubory žijícími v těchto adresářích musíte fungovat jako root.

Základní stránka HTML

HTML je jazyk, který jde do hloubky. Dá se s tím hodně dělat. Pokud vás zajímá více, podívejte se na web W3Schools, kde najdete mnoho návodů, jak pomocí HTML vytvořit web. Začneme jednoduchou HTML stránkou.

Nejprve sdělte prohlížeči, jakou verzi HTML používáte. Tento dokument je deklarován jako dokument HTML5:

Začněte tagy html a body:

Převážná část vašeho obsahu jde dále, mezi značky těla. Z prvního řádku vytvořte nadpis se značkou h1. Číslo za „h“definuje důležitost nadpisu, který ovlivňuje velikost písma. Pomocí značky p definujte odstavec:

Můj Raspberry Pi má web

Co sem mám dát?

Dokončete stránku zavřením těla a HTML a tagů:

Uložte dokument s příponou.html a navštivte localhost ve svém prohlížeči. Uvidíte svou webovou stránku!

Co byste měli dát na webovou stránku? Pojďme dát obrázek, nebo ještě lépe, animateMe.gif! Aby mohl být jakýkoli majetek zobrazen na této webové stránce, musí být vložen do kořenového adresáře dokumentu Apache. Měli byste jej zkopírovat a vložit, aby zůstal také ve vašem adresáři boof/fotos. Chcete-li zkopírovat a vložit soubor do příkazového řádku, použijte příkaz cp. Nejprve CD do domovského adresáře:

cd ~

Zkopírujte a vložte soubor animateMe.gif:

sudo cp boof/fotos/animateMe.gif/var/www/html

Vraťte se do adresáře html:

cd/var/www/html

Znovu otevřete soubor index.html, abyste mohli přidat obrázek:

sudo nano index.html

Chcete -li definovat a vložit obrázek na stránku HTML, použijte značku img. Vložte následující řádek mezi nadpis a odstavec.

Otevřete stránku v prohlížeči a bude vypadat takto, kromě vašeho vlastního stylového selfie GIF.

Krok 5: Přidejte nějaký styl

Stránka vypadá trochu nevýrazně. Žádná barva a žádný styl. Zde přichází CSS. Je to jazyk, který pracuje ruku v ruce s HTML, aby byla webová stránka atraktivnější a vizuálně kreativnější. Dotknete se pouze zde, ale pokud se chcete dozvědět více, přejděte na W3schools, abyste se dozvěděli více.

Pojďme například změnit barvu pozadí přidáním CSS do vašeho souboru HTML. Existuje několik způsobů, jak upravit styl webové stránky pomocí CSS. Pro tuto třídu použijete značky stylu k vložení CSS přímo do souboru HTML.

Vložte následující řádky mezi první značky HTML a body v horní části stránky HTML:

body {color-background: powderblue;} tagy. Bude to vypadat takto:

body {background-color: powderblue;}

Krok 6: Nainstalujte PHP

Místo statické stránky můžete vytvořit dynamickou stránku, která se bude moci měnit, aniž byste na ni museli ručně nahrávat soubory. Oblíbeným způsobem, jak toho dosáhnout, je použití skriptovacího jazyka s názvem PHP. Chcete -li používat PHP na Raspberry Pi, musíte jej nejprve nainstalovat s balíčkem modulů pro Apache:

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

Krok 7: Vytvořte dynamickou webovou stránku

Kombinujte PHP s HTMLA, pokud je kód PHP obsažen ve značkách, můžete jej zahrnout do struktury souboru HTML. Jako příklad můžete zkombinovat své aktuální skripty HTML a PHP a zvětšit text pomocí značek HTML.

Pojďme zahrnout jednoduchý skript PHP, který zobrazuje datum a čas. Vložte kamkoli mezi značky následující:

Uložte soubor pomocí Ctrl + o, ale změňte příponu z.html na.php, čímž se uloží nový soubor. Aby nedošlo k záměně prohlížeče, odeberte starou verzi.html:

sudo rm index.html

Obnovte localhost ve webovém prohlížeči. Výstup bude vypadat takto:

Dobře, tak jaký je rozdíl? Vypadá to jako běžná stránka HTML, že? Obnovte stránku a sledujte kouzlo. Kouzelné bytí času se změní! To je PHP a jeho vestavěná funkce date (), která vám pomůže vytvořit dynamickou webovou stránku.

Krok 8: Vytvořte klienta Tumblr API

Raspberry Pi může požadovat a získávat informace z jiných softwarových aplikací online prostřednictvím API (Application Programming Interface). Rozhraní API usnadňuje něčemu podobnému, jako je Raspberry Pi, prořezat všechna data na webu a získat jen užitečné věci. Nechte svůj Raspberry Pi promluvit s Tumblr, Twitter a weather.com, abyste tweetovali, zveřejňovali obrázky a zobrazovali předpovědi počasí.

Raspberry Pi a Tumblr

Následující cvičení vytvoří konverzaci mezi vaším Raspberry Pi a Tumblr. Jako klient bude váš Raspberry Pi žádat Tumblr o úryvky dat, aby mohl nahrávat obrázky na vzdálený server Tumblr, což povede k odeslání obrázků na účet Tumblr. Chcete -li, aby Raspberry Pi fungovalo s API, pravděpodobně již existuje knihovna, kterou můžete použít. Pro Tumblr existuje Pytumblr. Klient je vytvořen v programu Python pomocí vestavěné funkce vytvořené v Pytumblr. Tato funkce používá čtyři autorizační kódy generované Tumblr:

• spotřebitelský klíč
• spotřebitelské tajemství
• tokenový klíč
• tokenové tajemství

Než budete moci používat API Tumblr, musíte získat čtyři tyto klíče (podobně jako hesla). Chcete -li je získat, postupujte takto:

1. Vytvořte si zdarma účet Tumblr a přihlaste se.
2. Zaregistrujte aplikaci. Stačí zadat základní informace, jako je název (zkuste „My Raspberry Pi“), popis, e -mail a web (použijte tento, pokud jej nemáte). Po registraci získáte spotřebitelský klíč a spotřebitelské tajemství. Zkopírujte je a vložte na bezpečné místo, například do textového souboru nebo e -mailu. Chcete -li se k nim znovu dostat, přejděte na stránku svého účtu Tumblr, v nabídce Účet zvolte Nastavení a klikněte na Aplikace.
3. Přihlaste se do konzoly pro vývojáře pomocí svého klíče a tajných autorizačních kódů. Až budete dotázáni, zda chcete, aby to bylo zveřejněno vaším jménem, klikněte na Povolit.
4. Po přihlášení do konzoly pro vývojáře uvidíte ukázkový kód v několika různých jazycích. Buď klikněte na kartu Python a zkopírujte blok OAuth, nebo v horní nabídce kliknutím na Zobrazit klíče zobrazte klíč tokenu a tajné kódy tokenů společně se dvěma kódy, které již máte.

Pojďme tyto kódy zprovoznit a vytvořit program Python, který zaúčtuje animateMe-g.webp

Nejprve nainstalujte Pytumblr:

sudo apt-get update

sudo pip install pytumblr

Z domovského adresáře cd do složky boof a vytvořte soubor Pythonu:

cd boof

Vytvořte soubor pomocí editoru IDLE, abyste usnadnili vyjmutí a vložení velmi dlouhých autorizačních kódů. Vložte to do souboru testPytumblr.py a aktualizujte čtyři klíče a své uživatelské jméno:

import pytumblr

# Authenticates via OAuth, copy from 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")

Program pro vás označí nahranou fotografii „raspberrypi“a „picamera“. Pokud si přejete, můžete tyto značky odstranit, nahradit nebo přidat. Ty jsou uloženy v proměnné zvané tagy používané v client.create_photo ().

Program spustíte stisknutím klávesy F5. Došlo k chybě … ale Pytumblr jste již nainstalovali, tak proč Python říká, že modul nemůže najít? Důvodem je, že Pytumblr nepodporuje Python 3, funguje pouze v Pythonu 2*. Otevřete editor IDLE Pythonu 2 a vyjměte a vložte kód, přepište program Python 3 a poté jej spusťte. Po nahrání souboru-g.webp

Toto je vzrušující část! Přejděte na svou stránku Tumblr a podívejte se na GIF! Pokud chcete místo toho vytvořit koncept příspěvků, prohoďte ve svém programu „publikované“za „koncept“.

*Poté, co byla tato třída publikována, jiný uživatel github rozbil původní verzi a přidal podporu pro Python 3 pro určité příkazy.

Pokud se příspěvek nezobrazí, znovu zkontrolujte, zda jste správně zadali čtyři klíče a uživatelské jméno Tumblr a zda je aktivní internetové připojení vašeho Pi. Skript můžete také spustit z příkazového řádku pomocí Pythonu 2 (cd do boof vaší složky, pokud tam ještě nejste):

python testPytumblr.py

Krok 9: Pořiďte snímek obrazovky Tumblr A/nebo webových stránek

Vytvořte web, na kterém chcete zobrazit GIF, nebo si vytvořte účet na Tumblr a nahrajte GIF. Udělejte snímek obrazovky toho, který si vyberete, a sdílejte jej!