Flask 101

Flask 101 พัฒนาเว็บด้วยภาษาไพธอน(Flask Framework)

ได้ฤกษ์งามยามดีกันแล้วครับกับบทความของซีรี่ย์ Flask 101 ซึ่งจะเป็นการเน้นเขียนภาษาไพธอน โดยนำมาประยุกต์ใช้งานในด้าน Web Development ซึ่งจะหมายถึงการพัฒนาเว็บไซต์และเว็บแอปพลิเคชัน ซึ่งผมแนะนำว่าเพื่อน ๆ ควรจะมีพื้นฐานภาษาไพธอนมาบ้าง ไม่ต้องแอดว้านซ์หรืออะไรมากมาย เอาแค่ว่า รู้จักการประกาศตัวแปร ชนิดของข้อมูลต่าง ๆ แบบไหนเป็นสตริง(String) เป็นจำนวนเต็ม(Integer) เป็นทศนิยม(Floating Point) การประกาศฟังก์ชัน การเรียกใช้งานฟังก์ชัน การกำหนดเงื่อนไข if-else อะไรประมาณนี้ ก็จะทำให้เราสามารถเข้าใจโค้ดและบทความที่ผมกำลังจะเขียนในตอนนี้ได้ดียิ่งขึ้น

อีกอย่างที่แนะนำคือควรจะมีพื้นฐานภาษา HTML(Hyper Text Markup Language)มาบ้างเช่นกันครับ เพราะ HTMLเป็นภาษาพื้นฐานของการสร้างเว็บเลย เอาไว้แสดงผลคอนเทนต์ เช่น ข้อความ รูปภาพ วิดิโอ ฯลฯ ซึ่งทุกคนที่จะศึกษาหรือทำเว็บนั้น HTML คือภาษาแรกที่ทุกควรควรรู้เลยครับ!! ถ้ายังไม่มีพื้นฐานตรงนี้ เข้าไปศึกษาได้ที่นี่เลยครับ w3school ส่วนภาษาถัดไปหลังจากศึกษา HTML แล้ว ผมก็แนะนำให้ศึกษา CSS (Cascading Style Sheets) แนะนำ w3school ซึ่งเป็นภาษาที่เอาไว้ตกแต่งหน้าเว็บพื้น ๆ ที่เราเขียนขึ้นมาจาก HTML ให้กลายเป็นหน้าเว็บไซต์ที่มีสีสันสวยงาม น่าสนใจ ซึ่งจริง ๆ แล้วเราก็สามารถศึกษา CSS ไปพร้อมกันกับ HTML ได้ครับ เพราะสองตัวนี้ใช้คู่กัน และเมื่อศึกษา HTML และ CSS จนมีพื้นฐานในระดันหนึ่งแล้ว จากนั้นผมก็แนะนำให้ต่อยอดไปศึกษาภาษา JavaScript ครับ เพราะ JavaScritp นั้นนอกจากจะใช้สร้าง UI Components สวยงามต่าง ๆ แล้วยังช่วยให้เว็บไซต์ของเรามีการปฏิสัมพันธ์ที่ดีกับผู้ใช้ด้วยครับ โดยอันดับแรกอย่าพึ่งศึกษาเฟรมเวิร์คหรือไลบรารี่ ให้ศึกษาโครงสร้าง ไวยากรณ์ และทำความเข้าใจกับ JavaScript ก่อน แนะนำ w3school เหมือนเดิม โดยเพื่อน ๆ สามารถดูภาพประกอบด้านล่าง เพื่อความเข้าใจและเห็นภาพชัดเจนยิ่งขึ้นเกี่ยวกับภาษา 3 ทหารเสือฝั่ง FrontendCredit photo: https://me.me/i/html-css-js-mr-website-dev-human-d6d432644b47443c9632d8115cf6dcce

เมื่อเข้าใจโครงสร้างของภาษาแล้ว จากนั้นก็ค่อยไปศึกษาเฟรมเวิร์คหรือไลบรารี่ ที่กำลังเป็นที่นิยมอยู่ในตอนนี้ก็จะมี 3 ตัวหลัก ๆ คือ Angular, React และ Vue โดยตัว Angular.js จะเป็นเฟรมเวิร์คที่มีขนาดใหญ่สุดในบรรดา 3 ตัวนี้ และมี Learnig Curve สูงกว่าใครเพื่อน ส่วนรองลงมาคือ React.js ซึ่งจะเห็นว่าในปัจจุบันมีการพูดถึง React.js กันอย่างกว้างขวางและเป็นที่นิยมแทบจะเรียกได้ว่ามากที่สุดตอนนี้ในเหล่าองค์กรหรือบริษัทชั้นนำ ส่วนตัวสุดท้ายคือ Vue.js ซึ่งตัวนี้จะเรียนรู้ได้ไวและง่ายสุด และเป็นที่นิยมสุด ๆ ไม่แพ้ React.js เช่นกันในตอนนี้ ส่วนเพื่อน ๆ อยากศึกษาตัวไหน ก็ไปค้นหาข้อมูลเพิ่มเติมเพื่อดูว่าตัวไหนเหมาะสมกับเรามากที่สุด แล้วก็เลือกศึกษาตัวนั้นครับ

ปล.ในบทความนี้ยังไม่ได้มีการประยุกต์ JavaScript เข้ามาใช้อย่างจริงจัง จะมีเพียงแค่ HTML และ CSS ซึ่งก็ถือว่าเพียงพอแล้วในเบื้องต้น

เกริ่นนำกันไปพอสมควร ผมขอกลับมาที่พระเอกของเราในวันนี้ก็คือ Flask ซึ่งผมจะใช้ Flask ในการทำงานด้าน Server Side หรือที่หลาย ๆ คนเรียก Backend นั่นเอง โดยถ้าอยากเข้าใจ Flask เพิ่มเติม ก็สามารถอ่านได้ที่บทความ พัฒนาเว็บแอปพลิเคชันด้วยภาษาไพธอน (Flask Framework) ซึ่งผมได้เขียนไว้ก่อนหน้านี้ หรือยิ่งไปกว่านั้นถ้าอยากรู้ประวัติคนที่สร้าง Flask ก็สามารถอ่านได้เพิ่มเติมจากบทความนี้ Programming Inspiration Ep.1 Armin Ronacher ซึ่งถ้าเพื่อน ๆ อ่านเสร็จ ตอนนี้ก็คงจะเข้าใจ Flask ในระดับหนึ่งแล้ว เรามาเริ่มสร้างโปรเจคท์ไปพร้อม ๆ กันเลยครับ

โดยซีรี่ย์ Flask 101 จะเป็นการสอนตั้งแต่กระบวนการแรกจนถึงกระบวนการสุดท้ายนั่นก็คือการ Deploy โปรเจคท์ของเรา กล่าวเป็นนัย ๆ ว่า เมื่อสิ้นสุดซีรี่ย์นี้ เราจะมีเว็บเป็นของตัวเอง 1 เว็บครับ ส่วนคลาวด์ จะใช้ของเจ้าไหนนั้น เช่น Heroku, PythonAnywhere, etc. อันนี้ก็ต้องติดตามต่อไปครับ

1. สร้างโปรเจคท์ โดยการเปิด Command Prompt ขึ้นมา ในบทความนี้ใช้ PowerShell ของ Windows10

1.1 สร้างโฟลเดอร์ของโปรเจคท์ขึ้นมา พิมพ์คำสั่ง (flaskweb คือชื่อของโปรเจคท์นี้)

mkdir flaskweb

1.2 ชี้ไปที่โฟลเดอร์ของโปรเจคท์

cd flaskweb

1.3 สร้าง Virtual Environment (fw คือชื่อของ Virtual Environment ของโปรเจคท์นี้)

python -m venv fw

note: สำหรับ mac/linux ให้ใช้คำสั่งpython3 -m venv env

1.4 ทำการ Activate ตัว Virtual Environment

fw\scripts\activate

หรือเพื่อรันบน PowerShell ของ VS Code ก็ใช้คำสั่งด้านล่างนี้เพิ่มเข้ามาคือ .ps1

fw\scripts\activate.ps1

note2: สำหรับ mac/linux ให้ใช้คำสั่ง env/bin/activate

1.5 เป็นอันเสร็จสิ้นขั้นตอนการสร้างโฟลเดอร์โปรเจคท์และ Virtual Environment และจะสังเกตเห็นว่ามี (fw) ซึ่งเป็นชื่อของ Virtual Environment ของโปรเจคท์นี้เสร็จสิ้นขั้นตอน การสร้างโฟลเดอร์โปรเจคท์และ Virtual Environment

2. เปิด Visual Studio Code ขึ้นมา (โปรเจคท์นี้ใช้ Visual Studio Code เป็นตัว IDE)

2.1 เลือก Open Folder เพื่อทำการเปิดโฟลเดอร์โปรเจคท์ เพื่ออิมพอร์ตเข้ามาเขียนใน VS Code โดยคลิ๊กเลือก Path ที่เก็บโปรเจคท์ที่ผมได้สร้างไว้ในตอนนแรก จากนั้นทำการคลิ๊กเลือกโฟลเดอร์ทำการอิมพอร์ตโปรเจคท์เข้ามา

โฟลเดอร์โปรเจคท์พร้อม Virtual Environment Folder ถูกอิมพอร์ตเข้ามาใน VS Code พร้อมสำหรับเขียนโปรแกรมต่อไปโฟลเดอร์ของโปรเจคท์ถูกอิมพอร์ตเข้ามาใน VS Code พร้อมสำหรับเขียนโปรแกรม

2.2 คลิ๊ก View → Command Palette…

2.3 เลือก Python: Select Interpreter

2.4 เลือก Path ที่จะใช้ในการรันโปรเจคท์ ซึ่งก็ได้สร้างไว้ก่อนหน้าสำหรับ Virtual Environment นั่นก็คือ fw คลิ๊กเลือกได้เลย

2.5 จากนั้นทำการคลิ๊ก Debug → Start Debugging อีกครั้ง

2.6 เลือก Python

2.7 เลือก Flask

2.8 จะปรากฏชื่อไฟล์ app.py ซึ่งเป็นชื่อ Default ของ Flask กด Enter

2.9 เป็นอันเสร็จสิ้นขั้นตอนนี้เราสามารถรันโปรเจคท์ได้ใน PowerShell ของ VS Code ได้แล้ว และ Virtual Environment ถูกเซ็ตเรียบร้อย

ตอนนี้ผมก็สามารถรันโปรเจคท์ได้ใน PowerShell ของ VS Code ได้แล้ว ไม่ต้องไปรันที่ Command Prompt ข้างนอก ตอนนี้โปรเจคท์ยังขาดอะไรครับ ? ใช่แล้วครับ ผมยังไม่ได้ติดตั้ง Flask ไปที่ขั้นตอนต่อไปได้เลย

3. ทำการติดตั้ง Flask โดยการพิมพ์คำสั่ง

pip install flask

ทำการ Install Flask เข้ามาในโปรเจคท์

3.1 ตอนนี้การติดตั้ง Flask เสร็จสิ้นเรียบร้อยแล้ว เช็คดูว่าตอนนี้ในโปรเจคท์มีการติดตั้งแพ็คเกจอะไรบ้าง

pip freeze

แพ็คเกจต่าง ๆ ที่ถูกติดตั้งเข้ามาในโปรเจคท์

จะเห็นว่ามีแพ็คเกจตัวอื่น ๆ อย่างเช่น Click, Jinja2, Werkzeug, etc ซึ่งแพ็คเกจเหล่านี้จะอยู่ใน Flask จึงถูกติดตั้งเข้ามาอัตโนมัติพร้อมกันกับ Flask

ตอนนี้ผมยังไม่มีไฟล์ที่จะไพธอนที่จะใช้สำหรับเขียน Flask ซึ่งไฟล์นี้เราจะเรียกว่า Main File ซึ่งจะใช้สำหรับเขียนและรัน Flask App ของเรานั่นเอง ทำการสร้างไฟล์นี้ขึ้นมาได้เลย

3.2 สร้างไฟล์ขึ้นมาโดยคลิ๊กที่สัญลักษณ์ไฟล์ตรงแถบด้านซ้ายของ Workspace โดยใช้ชื่อว่า app.py กด Enter

3.3 ทำการเขียนโค้ดดังนี้

from flask import Flaskapp = Flask(__name__)@app.route('/')def home():    return "Hello My First Flask Project"if __name__ == '__main__':    app.run(debug=True)

อธิบายโค้ด

from flask import Flask

บรรทัดแรกจะเป็นการอิมพอร์ต Flask จากโมดูล flask เพื่อสร้าง Flask เว็บเซิร์ฟเวอร์ของ Flask App จากโมดูล Flask

from flask import Flask

app = Flask(__name__)

คำสั่งนี้จะใช้บ่งบอกว่า ไฟล์นี้คือไฟล์ Main ที่จะเอาไว้รัน Flask App ของเรานั่นเอง

app = Flask(__name__)

@app.route(‘\’)

def home():

return “Hello My First Flask Project”

ส่วนต่อมาจะเป็นการสร้าง URL เพื่อทำการชี้หรือ Map ไปที่ URLs ที่ต้องการ โดยในที่นี้ จะเป็นหน้า URL เริ่มต้น ซึ่งส่วนใหญ่หรือแทบจะทุกเว็บจะใช้ URL นี้เป็นหน้าโฮมเพจหรือที่อยู่ของเว็บไซต์

โดยตัว Default ที่ผมกำลังรันอยู่ในตอนนี้คือ localhost หรือไอพีแอดเดรส 127.0.0.1 พอร์ต Default ของ Flask คือ 5000 สุดท้ายเมื่อรันแล้วทำการเปิดหน้าเว็บบราวเซอร์จะพบ 127.0.0.1:5000

ส่วนต่อมาก็คือการประกาศฟังก์ชัน โดยเป็นการประกาศเหมือนกันกับไพธอนโดยทั่วไปเลย ดังนั้นผมจึงย้ำว่า ทำไมก่อนเรียน Flask หรือไม่ว่าจะเป็นเฟรมเวิร์คใด ๆ เราควรเข้าใจโครงสร้างและไวยากรณ์ของภาษานั้นเสียก่อน โดยในฟังก์ชันนี้ผมใช้ชื่อว่า home จะหมายถึงฟังก์ชันนี้ผมจะเอาไว้ใช้สำหรับ Map ไปที่หน้า Home page ในบทความถัด ๆ ไปนั่นเอง

หลังจากประกาศฟังก์ชันเรียบร้อย ผมก็จะทำการรีเทิร์นสตริงหรือข้อความธรรมดาปกติ ไปที่หน้า URL ที่ผมได้ออกแบบไว้ในนั้นคือ 127.0.0.1:5000 แต่ในข้างบนในฟังก์ชัน @app.route(‘\’) ใช้แค่เครื่องหมาย \ นั่นก็คือชี้ไปที่หน้าแรกหรือหน้า Default

@app.route('/') # URL Routedef home(): # Build a function called "home"    return "Hello My First Flask Project" # Return strings to a desired url

if __name__ == “__main__”’:

app.run(debug=True)

ส่วนสุดท้ายจะเป็นการรัน Flask และทำการเปิด Debug Mode เพื่อใช้สำหรับติดตาม Error ต่าง ๆ ได้

ปล. เวลา Deploy ให้ปิด Debug Mode โดยใช้ debug=False

if __name__ == '__main__':    app.run(debug=True)

รูปร่างหน้าตาของ Final Code จะเป็นดังนี้ แล้วทำการรันทดสอบได้เลย

3.4 ทำการรันโดยใช้คำสั่ง flask run หรือไม่ก็เป็นการรันไฟล์ไพธอนแบบปกตินั่นก็คือ python app.py หรือ py app.py ซึ่งผมใช้อันหลังสุดเพราะสั้นและคุ้นเคยกับอันนี้มากกว่า

3.5 จากนั้นกดปุ่ม ctrl ค้างที่คีย์บอร์ด แล้วใช้เมาส์ชี้ที่ลิ้งค์พร้อม ทำการคลิ๊ก

Great!! ตอนนี้ผมก็ได้หน้าเว็บมาแล้วเรียบร้อย และนี่ก็คือหน้าเว็บจริง ๆ ครับ โดยในหน้าเว็บนี้แสดงผลคำว่า “Hello My First Flask Project” ที่ผมได้เขียนฟังก์ชันจากนั้นทำการรีเทิร์น ข้อความนี้ออกมาที่ URL ที่เป็นหน้า Default คือหน้าเริ่มต้นของเว็บ ซึ่งปกติเราจะใช้หน้านี้เป็นหน้าโฮมเพจ ซึ่งรายละเอียดจะพูดถึงในบทความถัด ๆ ไป

และแน่นอนครับว่า ผมคงไม่ได้เขียนเพื่อแสดงผลคำสั่งนี้ในหน้าเว็บแล้วทำการ Deploy ขึ้นคลาวด์ เพราะยังไงก็ต้องมีการปรับแต่งหน้าเว็บ และยังมีหลายกระบวนการที่ยังไม่ได้ถูกอธิบาย เอาเป็นว่าตอนนี้ผมได้หน้าเว็บมาแล้ว 1 หน้า

และนี่ก็คือหน้าเว็บ

ครับก็จบลงไปแล้วสำหรับ Ep.1 ซึ่งจะเป็นการสร้างโปรเจคท์ผ่านคอมมานด์ไลน์และการสร้าง Virtual Environment ให้กับโปรเจคท์ของเรา ซึ่งผมก็หวังว่าคงเป็นประโยชน์ให้กับเพื่อน ๆ ที่กำลังจะเริ่มต้นเขียน Flask แต่ไม่รู้จะเริ่มต้นยังไง หรือปวดหัวกับการสร้าง Environment ให้กับโปรเจคท์ของเรา ผมก็หวังว่าบทความนี้คงเป็นประโยชน์ไม่มากก็น้อย

และสำหรับ Ep ถัดไป ซึ่งจะเป็นการสอนและอธิบายโครงสร้างของ Flask ว่าประกอบไปด้วยอะไรบ้าง ดีไซน์แพทเทิร์นเป็นยังไง ซึ่งเราจำเป็นต้องรู้พื้นฐานเหล่านี้ เมื่อมีพื้นฐานที่ดีแล้ว เราก็จะต่อยอดไปได้อีกมากมาย ตามที่ใจต้องการ

ถ้าชื่นชอบบทความนี้ ก็อย่าลืมกด Clap คนละ Clap เพื่อเป็นกำลังใจในการสร้างสรรค์ผลงานด้วยนะครับ หรือจะแชร์ไปให้เพื่อน ๆ ก็จะขอบคุณมาก หรือมีข้อแนะนำ ติชมตรงไหน ก็คอมเมนต์ได้ที่ด้านล่างโพสต์ไว้ได้เลยครับ See ya next article.

This article is written by: [Sonny STACKPYTHON]