เราจะใช้ Raspberry Pi เป็นเว็บเซิร์ฟเวอร์ สั่งควบคุมผ่านทางเว็บเพจ ไปสั่งงาน GPIO ของ ราสเบอร์รี่เพื่อสั่งควบคุมหุ่นยนต์ โดยจะใช้ได้กับระบบอินทราเน็ต ที่ใช้ WiFi หรือ วง แลน หรือใช้ เร้าเตอร์ เดียวกัน เท่านั้น
ในตัวอย่างด้านล่างจะแสดงการทำงาน ที่ประสานงานกัน ระหว่าง html กับ การเขียนโปรแกรมด้วยภาษา Python โดย html มีหน้าที่แสดงผล ส่วนการทำงานมาจาก Python
1. ติดตั้ง Flask และ โปรแกรมแรก Hello, World!
เปิดโปรแกรม เทอมินอล (Root Terminal)
แล้วใช้คำสั่ง sudo apt-get install python3-flask
ถ้า Flask ถูกติดตั้งอยู่แล้วจะแสดงดังภาพด้านล่าง
สร้างโฟลเดอร์ เช่น WebApp ด้วยคำสั่ง mkdir WebApp
เข้าไปในโฟลเดอร์ WebApp ด้วยคำสั่ง cd WebApp
สร้างโฟลเดอร์ static ด้วยคำสั่ง mkdir static
สร้างโฟลเดอร์ templates ด้วยคำสั่ง mkdir templates (แล้วปิดหน้าต่างลงไป)
และ เมื่อเข้าไปตรวจสอบที่ File Manager จะพบ โฟลเดอร์ ที่เราสร้างขึ้นมาใหม่ดังรูป (แล้วปิดหน้าต่างลงไป)
1.2. เขียนโปรแกรมด้วย Geany Programmer's Editor
ไปที่ Menu -> Programming -> Geany Programmer's Editor
Geany เป็นโปรแกรมแก้ไขข้อความ หรือที่เรียกว่า โปรแกรม Text Editor ที่ใช้เทคโนโลยีของ GTK2 ที่มีคุณสมบัติและความสามารถมากมาย โดยโปรแกรมนี้สามารถใช้เขียนโปรกรมภาษา C, Java, PHP, HTML, Python, Perl, Pascal เป็นต้น
1.2.1 สร้างไฟล์ pi/WebApp/templates/index.html
*.html คือ ภาษาหลักที่ใช้ในการเขียนเว็บเพจ โดยใช้ Tag ในการกำหนดการแสดงผล HTML ย่อมาจากคำว่า Hypertext Markup Language
เขียนโค้ดดังนี้
<!DOCTYPE html>
<head>
<title>{{ title }}</title>
</head>
<body>
<h1>Hello, World!</h1>
<h2>The date and time on the server is: {{ time }}</h2>
</body>
</html>
ไปที่ File -> Save As
เลือกไปที่ pi/WebApp
เลือกไปที่ pi/WebApp/templates
ตั้งชื่อไฟล์เป็น index.html
เมื่อ Save เสร็จ Tag ของ html จะเปลี่ยนเป็นสีน้ำเงิน
1.2.2 สร้างไฟล์ pi/WebApp/helloworld.py
*.py คือ การเขียนโปรแกรมด้วยภาษา Python
ไปที่ File -> New
เขียนโค้ดดังนี้
'''
Code created by Matt Richardson
for details, visit: <a href="http://mattrichardson.com/Raspberry-Pi-Flask/index.html"> http://mattrichardson.com/Raspberry-Pi-Flask/inde...</a>
'''
from flask import Flask, render_template
import datetime
app = Flask(__name__)
@app.route("/")
def hello():
now = datetime.datetime.now()
timeString = now.strftime("%Y-%m-%d %H:%M")
templateData = {
'title' : 'HELLO!',
'time': timeString
}
return render_template('index.html', **templateData)
if __name__ == "__main__":
app.run(host='0.0.0.0', port=80, debug=True)
ไปที่ File -> Save As
Save ไปที่ pi/WebApp/ ตั้งชื่อไฟล์เป็น helloworld.py
*.py คือ การเขียนโปรแกรมด้วยภาษา Python
ไปที่ File -> New
เขียนโค้ดดังนี้
'''
Code created by Matt Richardson
for details, visit: <a href="http://mattrichardson.com/Raspberry-Pi-Flask/index.html"> http://mattrichardson.com/Raspberry-Pi-Flask/inde...</a>
'''
from flask import Flask, render_template
import datetime
app = Flask(__name__)
@app.route("/")
def hello():
now = datetime.datetime.now()
timeString = now.strftime("%Y-%m-%d %H:%M")
templateData = {
'title' : 'HELLO!',
'time': timeString
}
return render_template('index.html', **templateData)
if __name__ == "__main__":
app.run(host='0.0.0.0', port=80, debug=True)
ไปที่ File -> Save As
Save ไปที่ pi/WebApp/ ตั้งชื่อไฟล์เป็น helloworld.py
เมื่อ Save เสร็จ สีของโค้ด จะเปลี่ยนเป็นสีในรูปแบบของภาษา Python
และ เมื่อเข้าไปตรวจสอบที่ File Manager ในโฟลเดอร์ WebApp จะพบไฟล์ helloworld.py ที่เราสร้างขึ้นมาใหม่ดังรูป
และ เมื่อเข้าไปตรวจสอบที่ File Manager ในโฟลเดอร์ templates จะพบไฟล์ index.html ที่เราสร้างขึ้นมาใหม่ดังรูป
2. การเซ็ต เวลาประเทศไทย ให้กับ Raspberry Pi
เวลา บอร์ด Raspberry Pi โดยพื้นฐานถ้าไม่มีการตั้งค่าใหม่จะแสดงเป็นเวลาของต่างประเทศ ถ้าต้องการให้ บอร์ด Raspberry Pi แสดงเวลา เป็นเวลาของประเทศไทย ต้องทำการตั้งค่าให้ใหม่ โดยทำตามขั้นตอนนี้
เปิดโปรแกรม เทอมินอล (Root Terminal) แล้วใช้คำสั่ง sudo raspi-config
ที่ Keyboard ใช้ปุ่มลูกศรขึ้นลงเพื่อเลื่อนไปยังตัวเลือกที่ต้องการ และเลือกด้วยปุ่ม Enter
เลือกไปที่ Localisation Opyions
เลือกไปที่ Change Timezone
เลือกไปที่ Asia
เลือกไปที่ Bangkok
เลือกไปที่ Ok
กดปุ่มลูกศรทางขวา เลื่อนไปที่ Finish -> กด Enter
ค่าพื้นฐานการแสดงเวลา จะเปลี่ยนเป็นเวลาของประเทศไทยแล้ว ปิดหน้าต่างลงไป
3. ตรวจสอบ IP ของ Raspberry Pi
เปิดโปรแกรม เทอมินอล (Root Terminal) แล้วใช้คำสั่ง ifconfig
ในตัวอย่างจะได้ หมายเลข IP ของ Raspberry Pi คือ 192.168.1.39 (IP ที่ได้แต่ละครั้งอาจไม่เหมือนกัน ให้ตรวจสอบทุกครั้งที่มีการเชื่อมต่อใหม่)
4. ทดสอบการทำงาน
เปิดโปรแกรม เทอมินอล (Root Terminal) แล้วใช้คำสั่ง cd WebApp
ใช้คำสั่ง sudo python3 helloworld.py
จะแสดงดังรูป
เปิดบราวเซอร์ คอมพิวเตอร์ ที่ใช้ WiFi หรือ วง แลน หรือใช้ เร้าเตอร์ เดียวกัน
ที่ URL คีย์ http://และตามด้วย IP ที่ได้จากขั้นตอนที่ 3 ในตัวอย่างคือ http://192.168.1.39/
บราวเซอร์ จะแสดง ข้อความที่เราเขียนจาก index.html ส่วนวันเวลาจะนำของมูลจาก helloworld.py คือ การเขียนโปรแกรมด้วยภาษา Python มาแสดง นั่นเอง
ถ้าต้องการออกจากโปรแกรม หรือ ยกเลิกการทำงาน ให้กด Ctrl พร้อมกับ c
