พัฒนา Web Application ด้วย Flask กับ VSCode

ในการพัฒนา Web Application ด้วย Python คงจะเป็นไปไม่ได้ที่จะไม่พูดถึง Flask ซึ่งเป็น Web Framework ที่ได้รับความนิยมมากตัวนึงซึ่ง VSCode เองก็ได้สับสนุนการพัฒนา Flask อย่างเต็มรูปแบบ ทำให้การพัฒนา Web Application ด้วย Flask บน VSCode ทำได้อย่างรวดเร็ว

ก่อนที่เราจะเริ่มข้าสู่บทความถ้าใครยังไม่เคยใช้งาน Python กับ VSCode แนะนำให้เตรียมสภาพแวดล้อมสำหรับการพัฒนาโปรแกรมด้วยการติดตั้งส่วนขยาย Python ก่อน

ติดตั้ง Flask

เริ่มจากไปที่ Terminal หรือ Command Prompt แล้วสร้างโฟลเดอร์ใหม่

mkdir flask-sample
cd flask-sample

จากนั้นทำการสร้างสภาพแวดล้อมเพื่อพัฒนา Flask โดยใช้คำสั่ง

pipenv shell
pipenv install flask # ติดตั้ง Flask
code . # เปิด VSCode

เตรียม VSCode

ตั้งค่า Python

เนื่องจากเราใช้สภาพแวดล้อมของ pipenv เราต้องบอก VSCode ให้รู้ด้วย โดยการใช้คีย์ลัด Cmd + Shift + P (Mac) หรือ Ctrl + Shift + P (Windows) แล้วเลือกคำสั่ง Python: Select Interpreter

เลือก Interpreter
เลือก Interpreter

จะมีตัวเลือกขึ้นมาให้เลือกตัวที่มีชื่อโฟลเดอร์ที่เราสร้างไว้ในที่นี้คือ web-app-flask: pipenv

เลือกใช้ Python ของ pipenv
เลือกใช้ Python ของ pipenv

VSCode จะสร้างไฟล์ชื่อ settings.json ขึ้นมาเพื่อเก็บค่าที่เราเลือกไว้

settings.json เก็บค่าที่เราเลือก
settings.json เก็บค่าที่เราเลือก

ตั้งค่าสำหรับรันและดีบั๊ก

ใช้คีย์ลัด Cmd + Shift + D (Mac) หรือ Ctrl + Shift + D (Windows) เพื่อเปิดแทบ Debug กด “create a launch.json file” แล้วเลือก “Python”

สร้าง launch.json สำหรับ Python
สร้าง launch.json สำหรับ Python

จะมีตัวเลือกขึ้นมาให้เลือก “Flask”

ให้ตั้งค่าเพื่อใช้กับ Flask
ให้ตั้งค่าเพื่อใช้กับ Flask

VSCode จะให้กรอกชื่อไฟล์หลักที่เราต้องการใช้รันโปรแกรม ให้ใช้ชื่อที่ VSCode เสอนให้แล้วกด Enter

ตั้งชื่อไฟล์เพื่อรันโปรแกรม
ตั้งชื่อไฟล์เพื่อรันโปรแกรม

VScode จะทำการสร้าง launch.json ขึ้นมาซึ่งมีการตั้งค่าตามรูปข้างล่าง

ค่าที่ถูกตั้งใน launch.json
ค่าที่ถูกตั้งใน launch.json

ตอนนี้เราก็พร้อมที่จะพัฒนา Web Application ด้วย Flask แล้ว

Web Application แบบพื้นสุด

สร้างไฟล์ app.py ชึ้นมาแล้วพิมพ์โค้ด

from flask import Flask

app = Flask(__name__)


@app.route('/')
def hello():
    return 'Hello, World!'

แล้วกด F5 เพื่อทำการรันโปรแกรม Terminal ใน VSCode จะถูกเรียกขึ้นมาพร้อมกับบอกว่าโปรแกรมพร้อมแล้ว

รัน Flask ด้วย VSCode
รัน Flask ด้วย VSCode

จากนั้นไปที่บราวเซอร์ (ของผมใช้ Chrome) แล้วพิมพ์ 127.0.0.1:5000 บราวเซอร์จะผลลัพธ์ตามภาพด้านล่าง

ผลลัพธ์ Web Application บนบราวเซอร์
ผลลัพธ์ Web Application บนบราวเซอร์

เมื่อต้องการดีบั๊ก ให้กด F9 หน้าบรรทัดที่ต้องการแล้วกด F5

สร้าง Breakpoint
สร้าง Breakpoint

จากนั้นไปที่บราวเซอร์แล้วรีเฟรช โปรแกรมจะหยุดให้เราดีบั๊กตามภาพ

ดีบั๊กจุดที่สร้าง Breakpoint
ดีบั๊กจุดที่สร้าง Breakpoint

VSCode เองก็ได้สับสนุนการพัฒนา Flask อย่างเต็มรูปแบบ ทำให้การพัฒนา Web Application ด้วย Flask บน VSCode ทำได้อย่างรวดเร็ว

เท่านี้ VSCode ของเราก็พร้อมพัฒนา Flask แล้ว

อ้างอิง

https://flask.palletsprojects.com/en/1.1.x/tutorial/factory/
https://code.visualstudio.com/docs/python/tutorial-flask