Python Flask with NGROK(Guideline Series before 101 Official Series)
สวัสดีครับ วันนี้ผมจะมาเขียนบทความตามหัวข้อด้านบนเลยครับ จะเป็นบทความก่อนที่จะเข้าสู่ Flask 101 Series ซึ่งจะเป็นการสอนตั้งแต่เริ่มต้นจนเสร็จโปรเจคท์(ตั้งแต่การสร้าง Environment ไปจนถึง Deployment) โดยก่อนเข้าสู่ซีรี่ย์ Flask 101 อย่างเป็นทางการ ดังนั้นบทความนี้จะเรียกว่าเป็นการเรียกน้ำย่อยกันก่อนครับ
- สร้างโปรเจคท์และ Virtual Environment
เพื่อน ๆ สามารถไปดูขั้นตอนนี้ได้ในบทความก่อน Django 101 กันได้เลยครับ โดยกระบวนการทุกอย่างแทบจะเหมือนกันทั้งหมด เพียงแต่เปลี่ยนจาก Django มาเป็น Flask โดยโปรเจคท์นี้ผมจะตั้งชื่อว่า “flaskcld” ส่วน Virtual Environment มีชื่อว่า “flaskenv”
2. เมื่อสร้างโปรเจคท์และ Virtual Environment เสร็จแล้ว ไปที่ Visual Studio Code ซึ่งเป็น IDE ที่เราจะมาใช้เขียนโปรแกรมในวันนี้กันเลยครับ โดยย้ำอีกครั้งว่า ทุกอย่างคล้ายคลึงกันกับบทความ Django 101 เพียงแค่เปลี่ยนเป็น Flask
3. ตอนแรกผมยังไม่ได้ติดตั้ง Flask ให้กับโปรเจคท์ ตอนนี้ผมจะทำการติดตั้ง Flask โดยทำการพิมพ์ pip install flask ที่เทอร์มินอลของ VS Code จากนั้นผมก็ทำการเขียนโค้ดดังนี้
from flask import Flaskapp = Flask(__name__)
# Create your url routes, and functions here@app.route('/')def hello_world(): return "H E L L O W O R L D"if __name__ == '__main__': app.run(debug=True)
4. ทำการรันโดยพิมพ์ python app.run หรือ จะ py app.py หรือจะ flask run ก็ได้ ในที่นี้ผมใช้ py app.py เพราะว่าคุ้นเคย จากนั้นทำการเปิดหน้าที่อยู่ของเว็บเพจเรา http://127.0.0.1:5000/
จะปรากฎข้อความ “ H E L L O W O R L D”
5. ผมไม่ต้องการให้หน้าเว็บผมโชว์แค่ข้อความธรรมดาแบบนี้ ต้องการให้โชว์หน้าเว็บเพจที่เป็นหน้า HTML ผมจึง import คำสั่ง render_template เข้ามาเพิ่มในส่วนบนสุดของโค้ด
6. จากนั้นสร้างหน้าโฟลเดอร์ขึ้นมา 1 โฟลเดอร์ที่มีชื่อว่า templates จากนั้นสร้างไฟล์ขึ้นมา 1 ไฟล์ที่มีชื่อว่า home.html ไว้ในโฟลเดอร์นี้
7. จากนั้นผมจะทำการเพิ่มหน้าเข้ามาอีก 1 หน้าให้กับเว็บไซต์ของผม ผมจึงทำการเพิ่มหน้าที่มีชื่อว่า about.html
8. ผมจะทำการสืบทอด template (Template Inheritance) โดยจะสร้างไฟล์ที่จะทำหน้าที่เป็นตัว template ที่มีชื่อว่า base.html
9. ขั้นตอนสุดท้ายผมก็จะไปเพิ่มและแก้ที่ไฟล์ app.py เพื่อเพิ่มฟังก์ชันและurls ไปที่หน้าเว็บเพจต่าง ๆ โดย Final Code จะมีดังนี้
from flask import Flask, render_templateapp = Flask(__name__)
# Home page@app.route('/')def home(): return render_template('home.html')
# About page@app.route('/about')def about(): return render_template('about.html')
# Login page@app.route('/login')def login(): return render_template('login.html')if __name__ == '__main__': app.run(debug=True)
10. ตอนนี้ผมอยากโชว์หน้าเว็บที่ผมสร้างไปให้เพื่อนดู โดยผมจะใช้บริการของ ngrok ซึ่งหน้าเว็บที่ผมส่งไปให้เพื่อนจะอยู่ได้ 8 ชั่วโมง และต้องเปิดเซิร์ฟรันไว้ตลอด การติดตั้ง ngrok เพื่อน ๆ สามารถเข้าไปดูบทความส่วนตัวที่ผมเขียนไว้ในบทความ Testing our Django App to be publicly accessible using NGROK
11. เปิดหน้า Command Prompt ขึ้นมาอีกครั้ง จากนั้นทำการรัน ngrok โดยใช้คำสั่ง ngrok.exe http 5000 คลิ๊ก Enter
12. ngrok จะทำการฟอร์เวิร์ดพอร์ตให้เราพร้อมทั้งทำการสุ่มที่อยู่ของโฮสต์มาให้ ทำการคัดลอกที่อยู่นั้นมา
13. แล้วทำการเพิ่มที่อยู่นั้นเข้าไปในไฟล์แอพของเรา เพื่อชี้ไปที่พอร์ตหรือที่อยู่นั้น
14. ทำการรัน ตอนนี้ผมสามารถส่งลิ้งค์ “fed3d344.ngrok.io” ให้เพื่อน และเพื่อนสามรถดูได้จากทุกที่ ที่มีอินเทอร์เน็ตหรือกล่าวเป็นนัย ๆ ว่าตอนนี้เว็บไซต์ของผมออนไลน์ได้แล้ว แต่อยู่ได้ 8 ชั่วโมง และต้องเปิดเซิร์ฟเวอร์ไว้ตลอด
แต่ผมอยากให้เว็บของผมรันออนไลน์ได้ตลอด 24 ชั่วโมง ต้องทำอย่างไร ? แล้วก็มีลิ้งค์ที่อยู่เป็นหลักแหล่ง ชื่อเว็บสามารถอ่านได้ง่าย ไม่ใช่ fed3d344.ngrok.io หรือ bla bla bla..
แน่นอนครับ ผมต้อง Deploy ขึ้นคลาวด์ โดย Cloud Service ก็มีบริการอยู่หลายเจ้าในปัจจุบัน โดยในเว็บไซต์นี้เป็นการทดสอบเฉย ๆ ผมจึงต้องเรียกใช้งานเจ้าที่ฟรี ดังนั้นตอนนี้มี 2 ช้อยส์ เข้ามาในหัวคือ Heroku และ PythonAnywhere และผมก็ขอเรียกใช้บริการของเจ้าหลังในบทความนี้ โดยขั้นตอนการ Deploy ขึ้นคลาวด์ของ PythonAnywhere ทำได้ไม่ยาก และผมยังไม่ขอพูดถึงขั้นตอนนั้นในบทความนี้ แต่เชื่อว่าทุกคนสามารถทำได้ไม่ยากอย่างแน่นอน
สำหรับบทความนี้ถือว่าเป็นการไกด์ไลน์สำหรับ Flask ก่อนที่จะเข้าสู่บทความ Flask 101 อย่างเต็มรูปแบบ ผมหวังว่าบทความนี้คงเป็นประโยชน์แก่ทุกท่านไม่มากก็น้อย
ผมขอฝากคอร์ส Flask for Beginners ซึ่งเป็นคอร์สแรกของปีนี้ของเพจ STACKPYTHON ไว้พิจารณาเป็นทางเลือกอีกทางหนึ่งครับ ผมจะนำมาย่อยให้ทุกท่านอย่างสุดฝีมือแน่นอน โดยไม่ต้องเสียเวลามากมายกับการศึกษาด้วยตัวเอง ทำให้ลดเวลาในการศึกษาลงไปได้มากมาย
ถ้าท่านใดอยากได้ซอร์สโค้ด คอมเมนต์ไว้ที่ด้านล่างบทความได้เลยผมจะส่งไปให้ตามที่อยู่ของอีเมล์ครับ
ทุกท่านสามารถเข้าไปชมเว็บไซต์ของบทความนี้ที่ผมได้ Deploy ขึ้นคลาวด์ของ PythonAnywhere ได้ ที่นี่
สุดท้ายช่วยกด clap เพื่อซัพพอร์ตและเป็นกำลังใจ หรือจะคอมเมนต์เพื่อที่จะแนะนำหรือแชร์ความคิดเห็น ผมก็จะดีใจมาก ๆ เลยครับ
ขอบคุณครับ See ya next article
This article is written by: [Sonny STACKPYTHON]
