Pagkonekta ng Iyong Raspberry Pi sa Web: 9 Mga Hakbang

2024 May -akda: John Day | [email protected]. Huling binago: 2024-01-30 13:11

Sa araling ito, malalaman mo kung paano lumikha ng isang web page, mangalap ng data gamit ang web sa buong mundo, at gumamit ng mga API upang mag-post ng mga imahe sa Tumblr at Twitter.

Hakbang 1: Client at Server

Sa computing, ang client-server ay isang modelo ng software na binubuo ng dalawang bahagi: isang client at isang server. Parehong nakikipag-usap sa isang computer network o magkasama sa iisang computer. Ang kliyente ay isang programa o isang computer na may software na umaasa sa paggawa ng mga kahilingan sa serbisyo sa isang server. Ang server ay isang programa sa computer o isang aparato na maaaring tanggapin ang mga kahilingang ito, maproseso ang mga ito, at ibalik ang hiniling na impormasyon sa kliyente. Minsan nakakalito upang malaman kung alin kung saan kapag nagtatrabaho sa mga machine na gumagawa ng maraming mga gawain nang sabay-sabay. Narito ang ilang mga katangian upang matulungan kang sabihin sa isang client at isang server na hiwalay.

Mga katangian ng kliyente:

• Ito ang unang aktibo
• Nagpapadala ng mga kahilingan sa server
• Inaasahan at nakakatanggap ito ng mga tugon mula sa server
• Karaniwan nang direktang nakikipag-ugnay sa mga end-user na gumagamit ng anumang interface ng gumagamit tulad ng interface ng grapiko na gumagamit

Mga katangian ng server:

• Ito ay paunang pasibo
• Nakikinig ito, handa nang tumugon sa mga kahilingan na ipinadala ng mga kliyente
• kapag dumating ang isang kahilingan, tumugon kasama ang hiniling na data sa mga kliyente
• Ang mga end user ay karaniwang hindi direktang nakikipag-ugnay sa isang server, ngunit gumagamit ng isang client.

Ang isang karaniwang halimbawa ng isang ugnayan ng client at server ay isang web browser (client) na humihiling at tumatanggap ng mga file ng web page na naka-host sa isang web server.

Hakbang 2: Lumikha ng isang Local Web Server

Ang Raspberry Pi ay maaaring maging isang web server sa pamamagitan ng pag-install at pagpapatakbo ng isang application ng server. Dalawang tanyag na application ng open source server ay ang: NGINX (binibigkas na engine x) at Apache. Sa araling ito, gagamitin mo ang Apache dahil, sa pagsulat na ito, mas mabigat itong naitala. Ginagawa nitong mas madali ang paghahanap ng mga sagot sa online habang natututo ka.

Ang iyong Raspberry Pi ay magho-host ng isang website na maaaring ma-access ng anumang aparato sa parehong network. Magsimula na tayo!

Hakbang 3: I-install ang Apache

I-install ang apache2 package. Sinasagot ng -y flag ang pre-install na tanong para sa seguridad para sa iyo.

sudo apt-get install apache2 -y

Ang Apache ay may kasamang isang pagsubok na HTML file na bumubuo ng isang web page ng placeholder upang subukan ang pag-install. Ang pagsubok na HTML file na ito ay nagmula sa direktoryo ng root ng Apache. Bilang default, ang Apache ay nakatakda upang tumingin sa direktoryong ito para sa mga dokumento sa web upang lumikha ng nilalaman sa loob ng isang web browser. Upang tingnan ang pahina ng pagsubok na ito at kumpirmahing talagang na-install ito ng Apache nang tama sa iyong web browser sa pamamagitan ng pag-type sa URL address na ito:

localhost /

Kung naka-install nang tama ang Apache, makikita mo ang web page ng pagsubok na Apache sa browser:

Hanapin ang IP Address ng Iyong Raspberry Pi

Maaari mong gamitin ang address ng localhost upang ma-access ang web page habang nasa Raspberry Pi. Upang ma-access ang web page mula sa isa pang computer kailangan mo ng IP address ng iyong Raspberry Pi. Upang mahanap ang uri ng IP address sa LXTerminal:

ifconfig

Mahahanap mo rin ito sa desktop kung hover mo ang cursor sa simbolo ng pagtanggap ng WiFi.

Hakbang 4: Gumawa ng isang Static Web Page

Ang iyong Raspberry Pi ngayon ay maaaring mag-host ng isang web page at lahat ng nilalaman na mai-publish dito. Mayroong dalawang pangunahing mga uri ng mga web page: static at pabago-bago. Ang isang static na pahina ay may nilalaman na hindi nagbabago. Nagawang ipakita ng isang pabago-bagong pahina ang pagbabago ng data tulad ng mga pagbabasa ng sensor o ang pagbabago ng oras at petsa.

Magsimula tayo sa isang static na pahina. Upang lumikha ng isa kailangan mong gumamit ng wikang tinatawag na HTML. Kapag nagpunta ka sa isang web page ang unang bagay na nakikita mong ipinakita ay marahil isang pahina ng index.html. Ang pahinang ito ang default na pahina na ipinapakita ng isang browser kung ang ibang pahina ay hindi tinukoy. Bilang default, hinahanap ng Apache ang index.html file dito:

/ var / www / html

Tinawag itong ugat ng dokumento, at ito ay isang nakatagong folder. Itinalaga ito para sa paghawak ng mga web page. Pumunta doon at tumingin sa paligid:

cd / var / www / html

ls

Makikita mo ang nakalista na default na index index.html file na nakalista. Kung nais mong i-save ang default na file, palitan ang pangalan nito sa isang bagay tulad ng defaultIndex.html gamit ang utos ng mv.

sudo mv index.html defaultIndex.html

kung hindi mo nais na i-save ito, alisin ang file sa pamamagitan ng paggamit ng rm command:

sudo rm index.html

Ngayon, maaari kang lumikha at magsimulang mag-edit ng iyong sariling index.html file:

sudo nano index.html

Tandaan na gumamit ng sudo, ang mga direktoryo ng www at html ay pagmamay-ari ng ugat kaya kailangan mong kumilos bilang ugat upang lumikha, mag-edit, at manipulahin ang anumang mga file na nakatira sa mga direktoryo na iyon.

Pangunahing Pahina ng HTML

Ang HTML ay isang wika na lumalim. Marami kang magagawa dito. Kung interesado kang maghanap ng karagdagang suriin ang website ng W3Schools kung saan maaari kang makahanap ng maraming mga tutorial sa kung paano gamitin ang HTML upang makabuo ng isang website. Magsisimula kami sa isang simpleng pahina ng HTML.

Una, sabihin sa browser kung anong bersyon ng HTML ang iyong ginagamit. Ang dokumentong ito ay idineklara bilang isang HTML5 doc:

Magsimula sa mga html at body tag:

Ang karamihan ng iyong nilalaman ay susunod, sa pagitan ng mga body tag. Gawin ang unang linya ng isang heading na may tag na h1. Ang numero pagkatapos ng "h" ay tumutukoy sa kahalagahan ng heading na nakakaapekto sa laki ng font. Gamitin ang p tag upang tukuyin ang isang talata:

Ang My Raspberry Pi ay may isang website

Ano ang dapat kong ilagay dito?

Tapusin ang pahina sa pamamagitan ng pagsara ng katawan at html at mga tag:

I-save ang dokumento gamit ang panlapi.html at bisitahin ang localhost sa iyong browser. Makikita mo ang iyong web page!

Ano ang dapat mong ilagay sa web page? Maglagay tayo ng isang imahe, o mas mabuti pa, ang animateMe.gif! Upang maipakita ang anumang asset sa web page na ito dapat itong ilagay sa ugat ng dokumento ng Apache. Dapat mong kopyahin at i-paste ito upang manatili din ito sa iyong direktoryo ng boof / fotos. Upang makopya at mai-paste ang isang file sa command-line gamitin ang utos ng cp. Una, ang cd sa iyong direktoryo sa bahay:

cd ~

Kopyahin at i-paste ang animateMe-g.webp

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

Bumalik sa direktoryo ng html:

cd / var / www / html

Muling buksan ang file ng index.html upang maidagdag mo ang imahe:

sudo nano index.html

Upang tukuyin at i-embed ang isang imahe sa isang pahina ng HTML gamitin ang img tag. Ilagay ang sumusunod na linya sa pagitan ng heading at talata.

Buksan ang pahina sa browser at magmukhang ganito maliban sa iyong sariling naka-istilong selfie GIF.

Hakbang 5: Magdagdag ng Ilang Estilo

Ang pahina ay naghahanap ng isang maliit na mura. Walang kulay at walang istilo. Dito pumapasok ang CSS. Ito ay isang wika na gumagana nang manu-mano kasama ang HTML upang gawing mas kaakit-akit at malikhaing biswal ang isang web page. Makikipag-ugnay ka lamang dito ngunit kung nais mong matuto nang higit pa sa W3schools upang matuto nang higit pa.

Bilang isang halimbawa, baguhin natin ang kulay ng background sa pamamagitan ng pagdaragdag ng CSS sa iyong HTML file. Mayroong maraming mga paraan upang istilo ang iyong web page gamit ang CSS. Para sa klase na ito, gagamitin mo ang mga style tag upang mai-embed ang CSS sa iyong HTML file.

Ilagay ang mga sumusunod na linya sa pagitan ng unang mga html at body tag sa tuktok ng iyong pahina ng HTML:

body {background-color: powderblue;} na mga tag. Ganito ang magiging hitsura nito:

katawan {background-color: powderblue;}

Hakbang 6: Mag-install ng PHP

Sa halip na isang static na pahina, maaari kang gumawa ng isang pabago-bago na may kakayahang magbago nang hindi mo manu-manong na-upload ang mga file dito. Ang isang tanyag na paraan ng paggawa nito ay ang paggamit ng isang wikang scripting na tinatawag na PHP. Upang magamit ang PHP sa Raspberry Pi kailangan mo munang i-install ito sa module package para sa Apache:

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

Hakbang 7: Gumawa ng isang Dynamic na Pahina ng Web

Pagsamahin ang PHP sa mga HTML Hangga't ang PHP code ay nilalaman sa loob ng mga tag maaari mo itong isama sa isang istraktura ng HTML file. Bilang isang halimbawa, pagsamahin ang iyong kasalukuyang mga script ng HTML at PHP at gawing mas malaki ang teksto sa pamamagitan ng paggamit ng mga HTML tag.

Magsama tayo ng isang simpleng script sa PHP na nagpapakita ng petsa at oras. I-paste ang sumusunod sa kahit saan sa pagitan ng mga tag:

I-save ang file gamit ang Ctrl + o ngunit baguhin ang extension mula sa.html sa.php, na makakapag-save ng isang bagong file. Upang hindi malito ang browser, alisin ang lumang bersyon na.html:

sudo rm index.html

I-refresh ang localhost sa iyong web browser. Magiging ganito ang output:

Ok, kaya ano ang pagkakaiba? Mukhang isang regular na pahina ng HTML hindi ba? I-refresh ang pahina at panoorin ang mahika. Ang mahika sa oras ay magbabago! PHP iyon at ang pagpapaandar na built-in na petsa () na gumagana para sa iyo upang makagawa ng isang dynamic na web page.

Hakbang 8: Lumikha ng isang Tumblr API Client

Maaaring humiling ang Raspberry Pi at makakuha ng impormasyon mula sa iba pang mga application ng software online sa pamamagitan ng isang API (Application Programming Interface). Ginagawang madali ng isang API para sa isang bagay tulad ng Raspberry Pi na i-cut ang lahat ng data ng isang website upang makuha lamang ang mga kapaki-pakinabang na bagay. Pag-usapan ang iyong Raspberry Pi sa Tumblr, Twitter, at weather.com upang mag-tweet, mag-post ng mga imahe, at ipakita ang mga pagtataya ng panahon.

Raspberry Pi at Tumblr

Ang sumusunod na ehersisyo ay lumilikha ng isang pag-uusap sa pagitan ng iyong Raspberry Pi at Tumblr. Bilang kliyente, hihilingin ng iyong Raspberry Pi si Tumblr para sa mga snippet ng data upang makapag-upload ito ng mga imahe sa remote server ng Tumblr, na magreresulta sa mga imahe na nai-post sa isang Tumblr account. Upang makakuha ng isang Raspberry Pi na gumagana sa isang API doon ay malamang na maging isang library out doon para magamit mo. Para sa Tumblr mayroong Pytumblr. Ang isang kliyente ay nilikha sa isang programa ng Python gamit ang isang built-in na function na nilikha sa Pytumblr. Gumagamit ang pagpapaandar na ito ng apat na mga code ng pahintulot na nabuo ng Tumblr:

• susi ng consumer
• lihim ng mamimili
• token key
• sikreto ng token

Bago mo magamit ang Tumblr's API dapat kang makakuha ng apat na mga key na ito (katulad ng mga password). Upang sundin ang mga ito sa mga hakbang na ito:

1. Lumikha ng isang libreng Tumblr account at mag-log in.
2. Magrehistro ng isang application. Kailangan mo lamang magbigay ng pangunahing impormasyon tulad ng isang pamagat (subukan ang "Aking Raspberry Pi"), paglalarawan, email, at website (gamitin ang isang ito kung wala kang isa). Pagkatapos ng pagpaparehistro, makakakuha ka ng isang susi ng consumer at lihim ng consumer. Kopyahin at i-paste ang mga ito sa isang lugar na ligtas, tulad ng isang text file o email. Upang ma-access muli ang mga ito, pumunta sa pahina ng iyong Tumblr account, piliin ang Mga setting sa menu ng Account, at mag-click sa Apps.
3. Mag-log in sa developer console gamit ang iyong key at lihim na mga pahintulot na code. I-click ang payagan kapag tinanong kung nais mong mag-post ito sa iyong ngalan.
4. Kapag naka-log in sa console ng developer, makikita mo ang halimbawa ng code sa maraming iba't ibang mga wika. Alinman sa pag-click sa tab na Python at kopyahin ang OAuth block, o sa tuktok na menu i-click ang Ipakita ang Mga Susi upang makita ang token key at token lihim na mga code kasama ang dalawang mga code na mayroon ka na.

Ilagay natin ang mga code na ito upang gumana at gumawa ng isang programa ng Python na nag-post ng animateMe-g.webp

Unang i-install ang Pytumblr:

sudo apt-get update

sudo pip install pytumblr

Mula sa iyong direktoryo sa bahay, mag-cd sa folder ng boof at lumikha ng isang Python file:

cd boof

Lumikha ng iyong file gamit ang editor ng IDLE upang mas madali itong i-cut at i-paste ang iyong napakahabang mga code sa pagpapahintulot. Ilagay ito sa iyong testPytumblr.py file, ina-update ang apat na mga key at ang iyong username:

i-import ang pytumblr

# Pinatutunayan sa pamamagitan ng OAuth, kopyahin mula sa 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 = "nai-publish", mga tag = [“raspberrypi”, “picamera”], data = “fotos / animateMe.gif") print ("na-upload")

Nai-tag ng programa ang na-upload na larawan para sa iyo gamit ang "raspberrypi" at "picamera". Kung nais mo, maaari mong alisin, palitan, o idagdag sa mga tag na ito. Ang mga ito ay nakaimbak sa isang variable na tinatawag na mga tag na ginamit sa client.create_photo ().

Pindutin ang F5 upang patakbuhin ang programa. Magkakaroon ng isang error … ngunit na-install mo na ang Pytumblr kaya bakit sinasabi ng Python na hindi nito mahanap ang module? Ito ay dahil hindi sinusuportahan ng Pytumblr ang Python 3, gumagana lamang ito sa Python 2 *. Buksan ang Python 2 IDLE editor at i-cut at i-paste ang iyong code, patungan ang programa ng Python 3 at pagkatapos ay patakbuhin ito. Kapag na-upload na nito ang GIF, "nai-upload" ay mai-print sa window ng shell ng Python.

Ito ang kapanapanabik na bahagi! Pumunta sa iyong pahina ng Tumblr at suriin ang GIF! Ipagpalit ang "nai-publish" sa iyong programa upang "draft" kung nais mong lumikha sa halip ng mga draft na post.

* Matapos ma-publish ang klase na ito, ang isa pang gumagamit ng github ay tinidor ang orihinal, nagdaragdag ng suporta para sa Python 3 para sa ilang mga utos.

Kung hindi lilitaw ang post, i-double check kung tama mong naipasok ang iyong apat na mga key at Tumblr username, at na ang koneksyon sa internet ng iyong Pi ay aktibo. Maaari mo ring patakbuhin ang iyong script mula sa linya ng utos gamit ang Python 2 (cd sa iyong folder boof kung wala ka pa doon):

pagsubok sa sawaPytumblr.py

Hakbang 9: Kumuha ng isang Screenshot ng Tumblr At / o Website

Lumikha ng isang website upang maipakita ang isang-g.webp