Povezivanje vašeg Raspberry Pi na web: 9 koraka

2024 Autor: John Day | [email protected]. Zadnja izmjena: 2024-01-30 08:05

U ovoj lekciji naučit ćete kako stvoriti web stranicu, prikupiti podatke pomoću svjetske mreže i koristiti API -je za postavljanje slika na Tumblr i Twitter.

Korak 1: Klijent i server

U računarstvu, klijent-server je softverski model koji se sastoji od dva dijela: klijenta i servera. Oboje komuniciraju putem računarske mreže ili zajedno na istom računaru. Klijent je program ili računar sa softverom koji se oslanja na slanje servisnih zahtjeva serveru. Poslužitelj je računalni program ili uređaj koji može prihvatiti ove zahtjeve, obraditi ih i vratiti tražene informacije klijentu. Ponekad je teško shvatiti šta je to kada radite sa mašinama koje obavljaju više zadataka odjednom. Evo nekoliko karakteristika koje će vam pomoći da razlikujete klijenta i server.

Karakteristike klijenta:

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

Karakteristike servera:

• 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 stranice hostirane na web serveru.

Korak 2: Kreirajte lokalni web poslužitelj

Raspberry Pi može postati web server instaliranjem i pokretanjem serverske aplikacije. Dvije popularne poslužiteljske aplikacije otvorenog koda su: NGINX (izgovara se motor 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. Hajde da počnemo!

Korak 3: Instalirajte Apache

Instalirajte apache2 paket. 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 probna HTML datoteka dolazi u root direktoriju Apache -a. Prema zadanim postavkama, Apache je postavljen da u ovom direktoriju traži web dokumente za kreiranje sadržaja unutar web preglednika. Da biste pogledali ovu testnu stranicu i potvrdili da je Apache zaista instaliran ispravno, povucite je u svom web pregledniku upisivanjem ove URL adrese:

localhost/

Ako je Apache pravilno instaliran, u pregledniku ćete vidjeti web stranicu Apache testa:

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čunara potrebna vam je IP adresa Raspberry Pi. Da biste pronašli tip IP adrese u LXTerminalu:

ifconfig

Možete ga pronaći i na radnoj površini ako zadržite pokazivač iznad simbola WiFi prijema.

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čkom stranicom. Da biste ga stvorili, morate koristiti jezik koji se zove HTML. Kada odete na web stranicu, prvo što vidite prikazano je vjerojatno index.html stranica. Ova stranica je zadana stranica koju preglednik prikazuje ako nije navedena druga stranica. Prema zadanim postavkama, Apache traži datoteku index.html ovdje:

/var/www/html

To se zove root 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 na popisu zadanu test datoteku index.html. Ako želite spremiti zadanu datoteku, preimenujte je u nešto poput defaultIndex.html pomoću naredbe mv.

sudo mv index.html defaultIndex.html

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

sudo rm index.html

Sada možete stvoriti i započeti uređivanje vlastite datoteke index.html:

sudo nano index.html

Ne zaboravite koristiti sudo, direktoriji www i html vlasništvo su korijena pa morate djelovati kao root za kreiranje, uređivanje i manipulaciju datotekama koje žive u tim direktorijima.

Osnovna HTML stranica

HTML je jezik koji duboko prodire. Sa 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 pretraživaču koju verziju HTML -a koristite. Ovaj dokument je deklariran kao HTML5 dokument:

Počnite s html i body oznakama:

Najveći dio vašeg sadržaja ide dalje, između oznaka body. Neka prvi red bude naslov s oznakom h1. Broj iza "h" definira važnost naslova koji utječe na veličinu fonta. Upotrijebite oznaku p da biste definirali odlomak:

Moja Raspberry Pi ima web stranicu

Šta da stavim ovde?

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

Sačuvajte dokument sa sufiksom.html i posetite localhost u svom pregledaču. Vidjet ćete svoju web stranicu!

Šta biste trebali 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 Apacheov korijen dokumenta. Trebali biste ga kopirati i zalijepiti tako da ostane u vašem direktoriju boof/fotos. Da biste kopirali i zalijepili datoteku u naredbeni redak, koristite naredbu cp. Prvo, cd u vaš kućni direktorij:

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

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

sudo nano index.html

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

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

Korak 5: Dodajte stil

Stranica izgleda pomalo bljutavo. 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 vaše web stranice pomoću CSS -a. Za ovu klasu ćete koristiti oznake stilova za ugradnju CSS -a izravno u svoju HTML datoteku.

Umetnite sljedeće retke između prvih HTML i body oznaka na vrhu vaše 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 otpremanja 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

Kombinujte PHP sa HTMLA -ima sve dok je PHP kôd sadržan u oznakama, možete ga uključiti u HTML strukturu datoteka. 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:

Sačuvajte datoteku pomoću Ctrl + o, ali promijenite ekstenziju iz.html u.php, što će sačuvati 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. Magija u vremenu će se promeniti! To je PHP i ugrađena funkcija date () koja vam pomaže da napravite dinamičku web stranicu.

Korak 8: Kreirajte 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 Tumblr -om, Twitter -om i weather.com -om za tvitovanje, objavljivanje slika i prikaz 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 otpremiti slike na udaljeni server Tumblra, što će rezultirati postavljanjem slika na Tumblr račun. Da bi Raspberry Pi radio s API -jem, najvjerojatnije će već postojati biblioteka koju ćete moći koristiti. Za Tumblr postoji Pytumblr. Klijent se stvara u Python programu pomoću ugrađene funkcije kreirane u Pytumblr-u. Ova funkcija koristi četiri koda za autorizaciju koje generira Tumblr:

• potrošački ključ
• potrošačka tajna
• token key
• tajna simbola

Da biste mogli koristiti Tumblr -ov API, morate nabaviti četiri ova ključa (slično lozinkama). Da biste ih dobili, slijedite ove korake:

1. Otvorite besplatni Tumblr račun i prijavite se.
2. Registrujte aplikaciju. Potrebno je samo dati osnovne podatke, poput naslova (pokušajte "Moja Raspberry Pi"), opis, e -poštu i web stranicu (koristite 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 u izborniku Račun i kliknite Aplikacije.
3. Prijavite se na konzolu za programere pomoću ključa i tajnih kodova za autorizaciju. Kliknite na dozvoli kada se prikaže pitanje želite li da se objavi u vaše ime.
4. Nakon što se prijavite na razvojnu konzolu, vidjet ćete primjer koda na nekoliko različitih jezika. Ili kliknite karticu Python i kopirajte blok OAuth ili u 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 update

sudo pip install pytumblr

Iz vašeg kućnog direktorija, cd u boof folder i stvorite Python datoteku:

cd boof

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

import 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") print ("uploaded")

Program označava postavljenu fotografiju za vas sa "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 greš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 kôd, prepišite Python 3 program, a zatim ga pokrenite. Kada učita GIF, "uploaded" će biti odštampan u prozoru Python ljuske.

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

*Nakon što je ova klasa objavljena, drugi korisnik githuba je rastavio original, 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 Tumblr korisničko ime te je li vaša internetska veza Pi aktivna. Skriptu možete pokrenuti i iz naredbenog retka koristeći Python 2 (cd u boof folder ako već niste tamo):

python testPytumblr.py

Korak 9: Napravite snimak ekrana Tumblr -a i/ili web stranice

Napravite web stranicu za prikaz-g.webp