Povezivanje vašeg Raspberry Pi na web: 9 koraka

2024 Autor: John Day | [email protected]. Zadnja promjena: 2024-01-30 09:34

U ovoj lekciji naučit ćete kako izraditi web stranicu, prikupiti podatke pomoću svjetskog weba i koristiti API -je za postavljanje slika na Tumblr i Twitter.

Korak 1: Klijent i poslužitelj

U računarstvu, klijent-poslužitelj je softverski model koji se sastoji od dva dijela: klijenta i poslužitelja. Oboje komuniciraju putem računalne mreže ili zajedno na istom računalu. Klijent je program ili računalo sa softverom koji se oslanja na slanje zahtjeva za uslugu poslužitelju. Poslužitelj je računalni program ili uređaj koji može prihvatiti te zahtjeve, obraditi ih i vratiti tražene podatke klijentu. Ponekad je teško shvatiti što je to kada radite sa strojevima koji obavljaju više zadataka odjednom. Evo nekoliko karakteristika koje će vam pomoći razlikovati klijenta i poslužitelj.

Karakteristike klijenta:

• To je prva aktivna
• Šalje zahtjeve poslužitelju
• Očekuje i prima odgovore od poslužitelja
• Obično izravno komunicira s krajnjim korisnicima koristeći bilo koje korisničko sučelje, poput grafičkog korisničkog sučelja

Karakteristike poslužitelja:

• U početku je pasivan
• Sluša, spreman je odgovoriti na zahtjeve klijenata
• kada dođe zahtjev, odgovara klijentima sa traženim podacima
• Krajnji korisnici obično ne komuniciraju izravno s poslužiteljem, već koriste klijenta.

Uobičajeni primjer odnosa klijent i poslužitelj je web preglednik (klijent) koji traži i prima datoteke web stranica hostirane na web poslužitelju.

Korak 2: Stvorite lokalni web poslužitelj

Raspberry Pi može postati web poslužitelj instaliranjem i pokretanjem poslužiteljske aplikacije. Dvije popularne poslužiteljske aplikacije otvorenog koda su: NGINX (izgovara se engine x) i Apache. U ovoj lekciji ćete koristiti Apache jer je od ovog pisanja to više dokumentirano. To olakšava traženje odgovora na internetu dok učite.

Vaš Raspberry Pi će ugostiti web stranicu kojoj može pristupiti bilo koji uređaj na istoj mreži. Započnimo!

Korak 3: Instalirajte Apache

Instalirajte paket apache2. Zastavica -y umjesto vas odgovara na sigurnosno pitanje prije instalacije.

sudo apt -get install apache2 -y

Apache dolazi s testnom HTML datotekom koja generira web stranicu s rezervnim mjestom za testiranje instalacije. Ova testna HTML datoteka dolazi u korijenski direktorij Apache -a. Prema zadanim postavkama, Apache je postavljen da u ovom direktoriju traži web dokumente za stvaranje sadržaja unutar web preglednika. Da biste pogledali ovu testnu stranicu i potvrdili da je Apache doista ispravno instaliran, povucite je u svom web pregledniku upisivanjem ove URL adrese:

localhost/

Ako je Apache ispravno instaliran, u pregledniku ćete vidjeti testnu web stranicu Apache:

Pronađite IP adresu svoje Raspberry Pi

Možete koristiti adresu localhost za pristup web stranici dok ste na Raspberry Pi. Za pristup web stranici s drugog računala potrebna vam je IP adresa Raspberry Pi. Da biste pronašli vrstu IP adrese u LXTerminalu:

ifconfig

Također ga možete pronaći na radnoj površini ako zadržite pokazivač iznad simbola prijema WiFi -ja.

Korak 4: Napravite statičku web stranicu

Vaš Raspberry Pi sada može ugostiti web stranicu i sav sadržaj koji će na njoj biti objavljen. Postoje dvije osnovne vrste web stranica: statičke i dinamičke. Statička stranica ima sadržaj koji se ne mijenja. Dinamička stranica može prikazati podatke koji se mijenjaju, kao što su očitanja senzora ili promjenjivo vrijeme i datum.

Počnimo sa statičnom stranicom. Da biste ga izradili, morate koristiti jezik koji se zove HTML. Kada odete na web stranicu, prvo što vidite prikazano je vjerojatno stranica index.html. Ova je stranica zadana stranica koju preglednik prikazuje ako nije navedena druga stranica. Prema zadanim postavkama, Apache ovdje traži datoteku index.html:

/var/www/html

To se naziva korijenom dokumenta i to je skrivena mapa. Namijenjen je za držanje web stranica. Idite tamo i pogledajte oko sebe:

cd/var/www/html

ls

Vidjet ćete zadanu testnu datoteku index.html na popisu. Ako želite spremiti zadanu datoteku, preimenujte je u nešto poput defaultIndex.html pomoću naredbe mv.

sudo mv index.html defaultIndex.html

ako je ne želite spremiti, uklonite datoteku pomoću naredbe rm:

sudo rm index.html

Sada možete stvoriti i početi uređivati vlastitu datoteku index.html:

sudo nano indeks.html

Ne zaboravite upotrijebiti sudo, direktoriji www i html vlasništvo su korijena pa morate djelovati kao korijen za stvaranje, uređivanje i upravljanje svim datotekama koje žive u tim direktorijima.

Osnovna HTML stranica

HTML je jezik koji duboko prodire. S njim možete učiniti mnogo. Ako ste zainteresirani za više informacija, posjetite web stranicu W3Schools na kojoj možete pronaći mnoge vodiče o tome kako koristiti HTML za izradu web stranice. Počet ćemo s jednostavnom HTML stranicom.

Prvo, recite pregledniku koju verziju HTML -a koristite. Ovaj dokument je deklariran kao HTML5 dokument:

Počnite s html i body oznakama:

Većina vašeg sadržaja ide dalje, između oznaka body. Neka prvi redak bude naslov s oznakom h1. Broj iza "h" definira važnost naslova koji utječe na veličinu fonta. Upotrijebite oznaku p za definiranje odlomka:

Moja Raspberry Pi ima web stranicu

Što trebam staviti ovdje?

Završite stranicu zatvaranjem tijela i html -a i oznaka:

Spremite dokument s nastavkom.html i posjetite localhost u svom pregledniku. Vidjet ćete svoju web stranicu!

Što trebate staviti na web stranicu? Postavimo sliku ili još bolje animateMe.gif! Da bi bilo koji materijal bio prikazan na ovoj web stranici, mora se staviti u korijen Apache dokumenta. Morate ga kopirati i zalijepiti tako da ostane i u vašem direktoriju boof/fotos. Za kopiranje i lijepljenje datoteke u naredbeni redak upotrijebite naredbu cp. Prvo, cd u vaš kućni imenik:

cd ~

Kopirajte i zalijepite datoteku animateMe.gif:

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

Vratite se u html direktorij:

cd/var/www/html

Ponovno otvorite datoteku index.html kako biste mogli dodati sliku:

sudo nano index.html

Za definiranje i ugradnju slike na HTML stranicu upotrijebite oznaku img. Između naslova i odlomka stavite sljedeći redak.

Otvorite stranicu u pregledniku i izgledat će ovako osim s vlastitim elegantnim-g.webp

Korak 5: Dodajte stil

Stranica izgleda pomalo blijedo. Bez boje i bez stila. Ovdje dolazi CSS. To je jezik koji radi ruku pod ruku s HTML-om kako bi web stranicu učinio privlačnijom i vizualno kreativnijom. Ovdje ćete se samo dotaknuti, ali ako želite naučiti više, pređite preko W3 škola kako biste saznali više.

Kao primjer, promijenimo boju pozadine dodavanjem CSS -a u svoju HTML datoteku. Postoji nekoliko načina za oblikovanje web stranice pomoću CSS -a. Za ovu klasu ćete koristiti oznake stila za ugradnju CSS -a izravno u svoju HTML datoteku.

Umetnite sljedeće retke između prvih HTML i body oznaka na vrhu HTML stranice:

body {background-color: powderblue;} oznake. To će izgledati ovako:

body {background-color: powderblue;}

Korak 6: Instalirajte PHP

Umjesto statičke stranice, možete napraviti dinamičku koju je moguće mijenjati bez ručnog postavljanja datoteka na nju. Popularan način za to je korištenje skriptnog jezika pod nazivom PHP. Da biste koristili PHP na Raspberry Pi, morate ga prvo instalirati s paketom modula za Apache:

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

Korak 7: Napravite dinamičku web stranicu

Kombinirajte PHP s HTMLA -ima sve dok je PHP kôd sadržan unutar oznaka, možete ga uključiti u strukturu HTML datoteke. Na primjer, kombinirajte svoje trenutne HTML i PHP skripte i povećajte tekst pomoću HTML oznaka.

Uključimo jednostavnu PHP skriptu koja prikazuje datum i vrijeme. Zalijepite sljedeće bilo gdje između oznaka:

Spremite datoteku pomoću Ctrl + o, ali promijenite ekstenziju iz.html u.php, što će spremiti novu datoteku. Kako ne biste zbunili preglednik, uklonite staru.html verziju:

sudo rm index.html

Osvježite localhost u svom web pregledniku. Izlaz će izgledati ovako:

U redu, u čemu je razlika? Izgleda kao obična HTML stranica, zar ne? Osvježite stranicu i pogledajte čaroliju. Čarolija u vremenu će se promijeniti! To je PHP i njegova ugrađena funkcija date () radi za izradu dinamičke web stranice.

Korak 8: Izradite Tumblr API klijenta

Raspberry Pi može zatražiti i dobiti informacije od drugih softverskih aplikacija na mreži putem API -ja (Application Programming Interface). API olakšava nešto poput Raspberry Pi -a da probije sve podatke web stranice kako bi zgrabio samo korisne stvari. Neka vaš Raspberry Pi razgovara s Tumblrom, Twitterom i weather.com radi tvita, objavljivanja slika i prikaza vremenske prognoze.

Raspberry Pi i Tumblr

Sljedeća vježba stvara razgovor između vašeg Raspberry Pi i Tumblra. Kao klijent, vaš Raspberry Pi od Tumblra će tražiti isječke podataka kako bi mogao prenijeti slike na udaljeni poslužitelj Tumblra, što će rezultirati postavljanjem slika na Tumblr račun. Da bi Raspberry Pi radio s API -jem, najvjerojatnije će već postojati knjižnica koju ćete moći koristiti. Za Tumblr postoji Pytumblr. Klijent se stvara u Python programu pomoću ugrađene funkcije izrađene u Pytumblr-u. Ova funkcija koristi četiri koda za autorizaciju koje generira Tumblr:

• potrošački ključ
• potrošačka tajna
• žetonski ključ
• oznaka tajna

Prije nego što možete koristiti Tumblr -ov API, morate nabaviti četiri ova ključa (slično lozinkama). Da biste ih dobili, slijedite ove korake:

1. Napravite besplatni Tumblr račun i prijavite se.
2. Registrirajte aplikaciju. Morate dati samo osnovne podatke, poput naslova (pokušajte "Moja Raspberry Pi"), opis, e -poštu i web stranicu (upotrijebite ovu ako je nemate). Nakon registracije dobit ćete potrošački ključ i potrošačku tajnu. Kopirajte ih i zalijepite na sigurno mjesto, poput tekstualne datoteke ili e -pošte. Da biste im ponovo pristupili, idite na stranicu računa Tumblr, odaberite Postavke na izborniku Račun i kliknite Aplikacije.
3. Prijavite se na konzolu za razvojne programere koristeći svoj ključ i tajne kodove za autorizaciju. Kliknite Dopusti na pitanje želite li da se objavi u vaše ime.
4. Nakon što ste prijavljeni na razvojnu konzolu, vidjet ćete primjer koda na nekoliko različitih jezika. Ili kliknite karticu Python i kopirajte blok OAuth ili na gornjem izborniku kliknite Prikaži ključeve da biste vidjeli ključ tokena i tajne kodove žetona zajedno s dva koda koja već imate.

Neka ovi kodovi funkcioniraju i napravimo Python program koji objavljuje animateMe-g.webp

Prvo instalirajte Pytumblr:

sudo apt-get ažuriranje

sudo pip install pytumblr

Iz svog kućnog imenika, cd u boof mapu i stvorite Python datoteku:

cd boof

Izradite datoteku pomoću uređivača IDLE -a kako biste lakše izrezali i zalijepili vrlo duge autorizacijske kodove. Stavite ovo u svoju datoteku testPytumblr.py, ažurirajući četiri ključa i svoje korisničko ime:

uvoz pytumblr

# Autentificira se putem OAuth -a, kopirajte s https://api.tumblr.com/console/calls/user/info client = pytumblr. TumblrRestClient ('your_consumer_key', 'your_consumer_secret', 'your_token', 'your_token_secret') client.create 'your_account_username', state = "published", tags = [“raspberrypi”, “picamera”], data = “fotos/animateMe.gif") ispis ("preneseno")

Program za vas označenu fotografiju označava s "raspberrypi" i "picamera". Ako želite, možete ukloniti, zamijeniti ili dodati ove oznake. Oni su pohranjeni u varijabli pod nazivom tags koja se koristi u client.create_photo ().

Pritisnite F5 za pokretanje programa. Doći će do pogreške … ali već ste instalirali Pytumblr pa zašto Python kaže da ne može pronaći modul? To je zato što Pytumblr ne podržava Python 3, radi samo u Pythonu 2*. Otvorite uređivač Python 2 IDLE i izrežite i zalijepite svoj kôd, prebrišite program Python 3, a zatim ga pokrenite. Kad učita GIF, "upload" će se ispisati u prozoru ljuske Python.

Ovo je uzbudljiv dio! Idite na svoju Tumblr stranicu i provjerite GIF! Zamijenite "objavljeno" u svom programu sa "skica" ako umjesto toga želite stvoriti nacrte postova.

*Nakon što je ova klasa objavljena, drugi je korisnik githuba rastavio izvornik, dodajući podršku za Python 3 za određene naredbe.

Ako se post ne pojavi, provjerite jeste li ispravno unijeli svoja četiri ključa i korisničko ime Tumblr te je li internetska veza vašeg Pi aktivna. Skriptu možete pokrenuti i iz naredbenog retka pomoću Pythona 2 (cd u boof mape ako već niste tamo):

python testPytumblr.py

Korak 9: Napravite snimak zaslona Tumblra i/ili web stranice

Izradite web stranicu za prikaz-g.webp