เชื่อมต่อ Raspberry Pi ของคุณกับเว็บ: 9 ขั้นตอน

2024 ผู้เขียน: John Day | [email protected]. แก้ไขล่าสุด: 2024-01-30 13:04

ในบทเรียนนี้ คุณจะได้เรียนรู้วิธีสร้างหน้าเว็บ รวบรวมข้อมูลโดยใช้เวิลด์ไวด์เว็บ และใช้ API เพื่อโพสต์ภาพไปยัง Tumblr และ Twitter

ขั้นตอนที่ 1: ไคลเอนต์และเซิร์ฟเวอร์

ในการคำนวณ ไคลเอนต์-เซิร์ฟเวอร์คือโมเดลซอฟต์แวร์ที่ประกอบด้วยสองส่วน: ไคลเอนต์และเซิร์ฟเวอร์ ทั้งสื่อสารผ่านเครือข่ายคอมพิวเตอร์หรือร่วมกันบนคอมพิวเตอร์เครื่องเดียวกัน ไคลเอ็นต์คือโปรแกรมหรือคอมพิวเตอร์ที่มีซอฟต์แวร์ที่ต้องอาศัยการส่งคำขอบริการไปยังเซิร์ฟเวอร์ เซิร์ฟเวอร์คือโปรแกรมคอมพิวเตอร์หรืออุปกรณ์ที่สามารถรับคำขอเหล่านี้ ประมวลผล และส่งคืนข้อมูลที่ร้องขอไปยังไคลเอนต์ได้ บางครั้งก็ยากที่จะคิดออกว่าอันไหนเมื่อทำงานกับเครื่องจักรที่ทำงานหลายอย่างพร้อมกัน ต่อไปนี้คือลักษณะเฉพาะบางประการที่จะช่วยให้คุณแยกแยะระหว่างลูกค้าและเซิร์ฟเวอร์ได้

ลักษณะลูกค้า:

• เป็นแอคทีฟแรก
• ส่งคำขอไปยังเซิร์ฟเวอร์
• คาดหวังและรับการตอบสนองจากเซิร์ฟเวอร์
• มักจะโต้ตอบกับผู้ใช้ปลายทางโดยตรงโดยใช้อินเทอร์เฟซผู้ใช้ใดๆ เช่น ส่วนต่อประสานกราฟิกกับผู้ใช้

ลักษณะเซิร์ฟเวอร์:

• ตอนแรกมันเป็นแบบพาสซีฟ
• กำลังฟังพร้อมที่จะตอบสนองต่อคำขอที่ส่งโดยลูกค้า
• เมื่อมีคำขอ ตอบกลับพร้อมข้อมูลที่ร้องขอไปยังลูกค้า
• ผู้ใช้ปลายทางมักไม่โต้ตอบกับเซิร์ฟเวอร์โดยตรง แต่ใช้ไคลเอ็นต์

ตัวอย่างทั่วไปของความสัมพันธ์ระหว่างไคลเอนต์และเซิร์ฟเวอร์คือเว็บเบราว์เซอร์ (ไคลเอนต์) ที่ร้องขอและรับไฟล์หน้าเว็บที่โฮสต์บนเว็บเซิร์ฟเวอร์

ขั้นตอนที่ 2: สร้างเว็บเซิร์ฟเวอร์ภายใน

Raspberry Pi สามารถเป็นเว็บเซิร์ฟเวอร์ได้โดยการติดตั้งและเรียกใช้แอปพลิเคชันเซิร์ฟเวอร์ แอปพลิเคชั่นเซิร์ฟเวอร์โอเพ่นซอร์สยอดนิยมสองรายการคือ: NGINX (เอ็นจิ้นที่ออกเสียง x) และ Apache ในบทเรียนนี้ คุณจะใช้ Apache เนื่องจากการเขียนนี้มีเอกสารที่หนักแน่นกว่า สิ่งนี้ทำให้การค้นหาคำตอบทางออนไลน์ง่ายขึ้นเมื่อคุณเรียนรู้

Raspberry Pi ของคุณจะโฮสต์เว็บไซต์ที่อุปกรณ์ใด ๆ ในเครือข่ายเดียวกันสามารถเข้าถึงได้ มาเริ่มกันเลย!

ขั้นตอนที่ 3: ติดตั้ง Apache

ติดตั้งแพ็คเกจ apache2 แฟล็ก -y ตอบคำถามความปลอดภัยก่อนการติดตั้งให้คุณ

sudo apt-get ติดตั้ง apache2 -y

Apache มาพร้อมกับไฟล์ HTML ทดสอบที่สร้างหน้าเว็บตัวยึดตำแหน่งเพื่อทดสอบการติดตั้ง ไฟล์ HTML ทดสอบนี้มาในไดเร็กทอรีรูทของ Apache โดยค่าเริ่มต้น Apache ถูกตั้งค่าให้ค้นหาในไดเร็กทอรีนี้สำหรับเอกสารเว็บเพื่อสร้างเนื้อหาภายในเว็บเบราว์เซอร์ หากต้องการดูหน้าทดสอบนี้และยืนยันว่า Apache ติดตั้งอย่างถูกต้อง ให้ดึงขึ้นในเว็บเบราว์เซอร์ของคุณโดยพิมพ์ที่อยู่ URL นี้:

localhost/

หากติดตั้ง Apache อย่างถูกต้อง คุณจะเห็นหน้าเว็บทดสอบ Apache ในเบราว์เซอร์:

ค้นหาที่อยู่ IP ของ Raspberry Pi ของคุณ

คุณสามารถใช้ที่อยู่ localhost เพื่อเข้าถึงหน้าเว็บในขณะที่อยู่บน Raspberry Pi ในการเข้าถึงหน้าเว็บจากคอมพิวเตอร์เครื่องอื่น คุณต้องมีที่อยู่ IP ของ Raspberry Pi วิธีค้นหาประเภทที่อยู่ IP ใน LXTerminal:

ifconfig

คุณยังสามารถค้นหาได้บนเดสก์ท็อปหากคุณวางเคอร์เซอร์ไว้เหนือสัญลักษณ์การรับ WiFi

ขั้นตอนที่ 4: สร้างหน้าเว็บแบบคงที่

Raspberry Pi ของคุณสามารถโฮสต์หน้าเว็บและเนื้อหาทั้งหมดที่จะเผยแพร่ได้ หน้าเว็บมีสองประเภทพื้นฐาน: แบบคงที่และแบบไดนามิก หน้าสแตติกมีเนื้อหาที่ไม่เปลี่ยนแปลง เพจไดนามิกสามารถแสดงข้อมูลที่เปลี่ยนแปลงได้ เช่น การอ่านเซ็นเซอร์ หรือเวลาและวันที่ที่เปลี่ยนแปลง

เริ่มต้นด้วยหน้าคงที่ ในการสร้างคุณต้องใช้ภาษาที่เรียกว่า HTML เมื่อคุณไปที่หน้าเว็บ สิ่งแรกที่คุณเห็นคือหน้า index.html หน้านี้เป็นหน้าเริ่มต้นที่เบราว์เซอร์จะแสดงหากไม่มีการระบุหน้าอื่น โดยค่าเริ่มต้น Apache จะค้นหาไฟล์ index.html ที่นี่:

/var/www/html

นี่เรียกว่าเอกสาร root และเป็นโฟลเดอร์ที่ซ่อนอยู่ มันถูกกำหนดให้ถือหน้าเว็บ ไปที่นั่นและดูรอบ ๆ:

cd /var/www/html

ลส

คุณจะเห็นไฟล์ test index.html เริ่มต้นอยู่ในรายการ หากคุณต้องการบันทึกไฟล์เริ่มต้น ให้เปลี่ยนชื่อไฟล์เป็น defaultIndex.html โดยใช้คำสั่ง mv

sudo mv index.html defaultIndex.html

หากคุณไม่ต้องการบันทึก ให้ลบไฟล์โดยใช้คำสั่ง rm:

sudo rm index.html

ตอนนี้คุณสามารถสร้างและเริ่มแก้ไขไฟล์ index.html ของคุณเอง:

sudo nano index.html

อย่าลืมใช้ sudo ไดเร็กทอรี www และ html เป็นของ root ดังนั้นคุณต้องทำหน้าที่เป็น root เพื่อสร้าง แก้ไข และจัดการไฟล์ใดๆ ที่อยู่ในไดเร็กทอรีเหล่านั้น

หน้า HTML พื้นฐาน

HTML เป็นภาษาที่ลึกซึ้ง คุณสามารถทำอะไรได้มากมายกับมัน หากคุณสนใจที่จะค้นหาข้อมูลเพิ่มเติม โปรดดูที่เว็บไซต์ของ W3Schools ซึ่งคุณจะพบกับบทช่วยสอนมากมายเกี่ยวกับวิธีใช้ HTML เพื่อสร้างเว็บไซต์ เราจะเริ่มต้นด้วยหน้า HTML อย่างง่าย

ขั้นแรก บอกเบราว์เซอร์ว่าคุณกำลังใช้ HTML เวอร์ชันใด เอกสารนี้ถูกประกาศเป็นเอกสาร HTML5:

เริ่มต้นด้วยแท็ก html และ body:

เนื้อหาส่วนใหญ่ของคุณไปต่อระหว่างแท็กเนื้อหา ทำให้บรรทัดแรกเป็นส่วนหัวด้วยแท็ก h1 ตัวเลขหลัง "h" กำหนดความสำคัญของหัวเรื่องซึ่งส่งผลต่อขนาดของฟอนต์ ใช้แท็ก p เพื่อกำหนดย่อหน้า:

Raspberry Pi ของฉันมีเว็บไซต์แล้ว

ฉันควรใส่อะไรที่นี่

จบหน้าโดยปิดเนื้อหาและ html และแท็ก:

บันทึกเอกสารด้วยคำต่อท้าย.html และไปที่ localhost ในเบราว์เซอร์ของคุณ คุณจะเห็นหน้าเว็บของคุณ!

คุณควรใส่อะไรลงในหน้าเว็บ? มาใส่รูปภาพหรือดีกว่านั้น animateMe.gif! เพื่อให้เนื้อหาใด ๆ ปรากฏบนหน้าเว็บนี้ จะต้องวางไว้ในรูทเอกสารของ Apache คุณควรคัดลอกและวางเพื่อให้อยู่ในไดเร็กทอรี boof/fotos ของคุณด้วย ในการคัดลอกและวางไฟล์ในบรรทัดคำสั่งให้ใช้คำสั่ง cp ขั้นแรก cd ไปที่โฮมไดเร็กตอรี่ของคุณ:

ซีดี ~

คัดลอกและวางไฟล์ animateMe.gif:

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

กลับไปที่ไดเร็กทอรี html:

cd /var/www/html

เปิดไฟล์ index.html อีกครั้งเพื่อให้คุณสามารถเพิ่มรูปภาพได้:

sudo nano index.html

ในการกำหนดและฝังรูปภาพบนหน้า HTML ให้ใช้แท็ก img ใส่บรรทัดต่อไปนี้ระหว่างหัวเรื่องและย่อหน้า

เปิดหน้าในเบราว์เซอร์และจะมีลักษณะเช่นนี้ ยกเว้นกับ selfie-g.webp

ขั้นตอนที่ 5: เพิ่มสไตล์บางอย่าง

หน้าจะดูจืดชืดไปหน่อย ไม่มีสีและไม่มีสไตล์ นี่คือที่มาของ CSS เป็นภาษาที่ทำงานควบคู่ไปกับ HTML เพื่อทำให้หน้าเว็บดูน่าสนใจและสร้างสรรค์ยิ่งขึ้น คุณจะสัมผัสได้ที่นี่เท่านั้น แต่ถ้าคุณต้องการเรียนรู้เพิ่มเติม ให้ไปที่ W3schools เพื่อเรียนรู้เพิ่มเติม

ตัวอย่างเช่น เปลี่ยนสีพื้นหลังโดยเพิ่ม CSS ลงในไฟล์ HTML ของคุณ มีหลายวิธีในการจัดรูปแบบหน้าเว็บของคุณโดยใช้ CSS สำหรับคลาสนี้ คุณจะใช้แท็กสไตล์เพื่อฝัง CSS ลงในไฟล์ HTML ของคุณ

วางบรรทัดต่อไปนี้ไว้ระหว่าง html แรกและแท็ก body ที่ด้านบนสุดของหน้า HTML ของคุณ:

ร่างกาย {สีพื้นหลัง: powderblue;} แท็ก มันจะมีลักษณะดังนี้:

ร่างกาย {สีพื้นหลัง: powderblue;}

ขั้นตอนที่ 6: ติดตั้ง PHP

แทนที่จะสร้างเพจแบบสแตติก คุณสามารถสร้างเพจไดนามิกที่สามารถเปลี่ยนแปลงได้โดยไม่ต้องอัปโหลดไฟล์ด้วยตนเอง วิธีที่นิยมในการทำเช่นนี้คือการใช้ภาษาสคริปต์ที่เรียกว่า PHP ในการใช้ PHP บน Raspberry Pi คุณต้องติดตั้งด้วยโมดูลแพ็คเกจสำหรับ Apache ก่อน:

sudo apt-get ติดตั้ง libapache2-mod-php5 php5 -y

ขั้นตอนที่ 7: สร้างเว็บเพจแบบไดนามิก

รวม PHP กับ HTMLA ตราบใดที่โค้ด PHP อยู่ภายในแท็ก คุณสามารถรวมไว้ในโครงสร้างไฟล์ HTML ได้ ตัวอย่างเช่น รวมสคริปต์ HTML และ PHP ปัจจุบันของคุณและทำให้ข้อความใหญ่ขึ้นโดยใช้แท็ก HTML

มารวมสคริปต์ PHP ง่ายๆ ที่แสดงวันที่และเวลากัน วางสิ่งต่อไปนี้ที่ใดก็ได้ระหว่างแท็ก:

บันทึกไฟล์ด้วย Ctrl + o แต่เปลี่ยนนามสกุลจาก.html เป็น.php ซึ่งจะบันทึกไฟล์ใหม่ เพื่อไม่ให้เบราว์เซอร์สับสน ให้ลบ.html เวอร์ชันเก่า:

sudo rm index.html

รีเฟรช localhost ในเว็บเบราว์เซอร์ของคุณ ผลลัพธ์จะมีลักษณะดังนี้:

ตกลงดังนั้นความแตกต่างคืออะไร? ดูเหมือนหน้า HTML ปกติใช่ไหม รีเฟรชหน้าและดูมายากล ความมหัศจรรย์คือเวลาจะเปลี่ยน! นั่นคือ PHP และฟังก์ชัน date() ในตัวที่ทำงานให้คุณสร้างหน้าเว็บแบบไดนามิก

ขั้นตอนที่ 8: สร้างไคลเอ็นต์ Tumblr API

Raspberry Pi สามารถขอและรับข้อมูลจากแอปพลิเคชันซอฟต์แวร์อื่นๆ ทางออนไลน์ผ่าน API (Application Programming Interface) API ช่วยให้บางสิ่งบางอย่างเช่น Raspberry Pi ตัดผ่านข้อมูลทั้งหมดของเว็บไซต์เพื่อคว้าเฉพาะสิ่งที่มีประโยชน์ได้อย่างง่ายดาย ให้ Raspberry Pi คุยกับ Tumblr, Twitter และ weather.com เพื่อทวีต โพสต์ภาพ และแสดงพยากรณ์อากาศ

Raspberry Pi และ Tumblr

แบบฝึกหัดต่อไปนี้จะสร้างการสนทนาระหว่าง Raspberry Pi และ Tumblr ในฐานะลูกค้า Raspberry Pi ของคุณจะขอข้อมูลโค้ดจาก Tumblr เพื่อให้สามารถอัปโหลดรูปภาพไปยังเซิร์ฟเวอร์ระยะไกลของ Tumblr ส่งผลให้รูปภาพถูกโพสต์ไปยังบัญชี Tumblr เพื่อให้ Raspberry Pi ทำงานร่วมกับ API ได้ เป็นไปได้มากว่าจะมีไลบรารี่ให้คุณใช้อยู่แล้ว สำหรับ Tumblr มี Pytumblr ไคลเอนต์ถูกสร้างขึ้นในโปรแกรม Python โดยใช้ฟังก์ชันในตัวที่สร้างใน Pytumblr ฟังก์ชันนี้ใช้รหัสอนุญาตสี่รหัสที่สร้างโดย Tumblr:

• รหัสผู้บริโภค
• ความลับผู้บริโภค
• โทเค็นคีย์
• โทเค็นความลับ

ก่อนที่คุณจะสามารถใช้ API ของ Tumblr คุณต้องได้รับคีย์เหล่านี้สี่คีย์ (คล้ายกับรหัสผ่าน) ทำตามขั้นตอนเหล่านี้:

1. สร้างบัญชี Tumblr ฟรีและเข้าสู่ระบบ
2. ลงทะเบียนใบสมัคร คุณต้องให้ข้อมูลพื้นฐานเท่านั้น เช่น ชื่อ (ลองใช้ "My Raspberry Pi") คำอธิบาย อีเมล และเว็บไซต์ (ใช้ข้อมูลนี้หากคุณไม่มี) หลังจากลงทะเบียนแล้ว คุณจะได้รับรหัสผู้บริโภคและข้อมูลลับของผู้บริโภค คัดลอกและวางในที่ที่ปลอดภัย เช่น ไฟล์ข้อความหรืออีเมล หากต้องการเข้าถึงอีกครั้ง ให้ไปที่หน้าบัญชี Tumblr เลือกการตั้งค่าในเมนูบัญชี แล้วคลิกแอป
3. ลงชื่อเข้าใช้คอนโซลนักพัฒนาซอฟต์แวร์โดยใช้รหัสการอนุญาตหลักและรหัสลับของคุณ คลิกอนุญาตเมื่อถูกถามว่าคุณต้องการโพสต์ในนามของคุณหรือไม่
4. เมื่อลงชื่อเข้าใช้คอนโซลนักพัฒนาซอฟต์แวร์แล้ว คุณจะเห็นโค้ดตัวอย่างในภาษาต่างๆ คลิกแท็บ Python และคัดลอกบล็อก OAuth หรือในเมนูด้านบน ให้คลิก Show Keys เพื่อดูรหัสโทเค็นและรหัสลับของโทเค็นพร้อมกับรหัสทั้งสองที่คุณมีอยู่แล้ว

มาใส่รหัสเหล่านี้เพื่อทำงานและสร้างโปรแกรม Python ที่โพสต์ animateMe-g.webp

ติดตั้ง Pytumblr ก่อน:

sudo apt-get update

sudo pip ติดตั้ง pytumblr

จากโฮมไดเร็กทอรีของคุณ cd ลงในโฟลเดอร์ boof และสร้างไฟล์ Python:

cd boof

สร้างไฟล์ของคุณโดยใช้ตัวแก้ไขของ IDLE เพื่อให้ง่ายต่อการตัดและวางรหัสการให้สิทธิ์ที่ยาวมากของคุณ ใส่สิ่งนี้ในไฟล์ testPytumblr.py ของคุณ อัปเดตสี่ปุ่มและชื่อผู้ใช้ของคุณ:

นำเข้า pytumblr

# ตรวจสอบสิทธิ์ผ่าน OAuth คัดลอกจาก 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")

โปรแกรมแท็กรูปภาพที่อัปโหลดให้คุณด้วย "raspberrypi" และ "picamera" หากคุณต้องการ คุณสามารถลบ แทนที่ หรือเพิ่มแท็กเหล่านี้ได้ สิ่งเหล่านี้ถูกเก็บไว้ในตัวแปรที่เรียกว่าแท็กที่ใช้ใน client.create_photo()

กด F5 เพื่อเรียกใช้โปรแกรม จะมีข้อผิดพลาด… แต่คุณได้ติดตั้ง Pytumblr แล้ว เหตุใด Python จึงบอกว่าไม่พบโมดูล นี่เป็นเพราะ Pytumblr ไม่รองรับ Python 3 ใช้งานได้ใน Python 2* เท่านั้น เปิดตัวแก้ไข Python 2 IDLE แล้วตัดและวางโค้ดของคุณ เขียนทับโปรแกรม Python 3 แล้วเรียกใช้ เมื่ออัปโหลด-g.webp

นี่เป็นส่วนที่น่าตื่นเต้น! ไปที่หน้า Tumblr ของคุณแล้วดู GIF! สลับ "เผยแพร่" ในโปรแกรมของคุณเป็น "ฉบับร่าง" หากคุณต้องการสร้างโพสต์ฉบับร่างแทน

*หลังจากเผยแพร่คลาสนี้แล้ว ผู้ใช้ github คนอื่นได้แยกต้นฉบับโดยเพิ่มการรองรับ Python 3 สำหรับคำสั่งบางอย่าง

หากโพสต์ไม่ปรากฏขึ้น ให้ตรวจสอบอีกครั้งว่าคุณป้อนคีย์ทั้งสี่คีย์และชื่อผู้ใช้ Tumblr ถูกต้อง และการเชื่อมต่ออินเทอร์เน็ตของ Pi เปิดใช้งานอยู่ คุณยังสามารถเรียกใช้สคริปต์จากบรรทัดคำสั่งโดยใช้ Python 2 (cd ไปยังโฟลเดอร์ boof หากคุณยังไม่มี):

python testPytumblr.py

ขั้นตอนที่ 9: ถ่ายภาพหน้าจอของ Tumblr และ/หรือเว็บไซต์

สร้างเว็บไซต์เพื่อแสดง-g.webp