# Flask 101

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

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

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

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

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

เกริ่นนำกันไปพอสมควร ผมขอกลับมาที่พระเอกของเราในวันนี้ก็คือ Flask ซึ่งผมจะใช้ Flask ในการทำงานด้าน Server Side หรือที่หลาย ๆ คนเรียก Backend นั่นเอง โดยถ้าอยากเข้าใจ Flask เพิ่มเติม ก็สามารถอ่านได้ที่บทความ พั[ฒนาเว็บแอปพลิเคชันด้วยภาษาไพธอน (Flask Framework)](https://medium.com/@komphet289/%E0%B8%9E%E0%B8%B1%E0%B8%92%E0%B8%99%E0%B8%B2%E0%B9%80%E0%B8%A7%E0%B9%87%E0%B8%9A%E0%B9%81%E0%B8%AD%E0%B8%9B%E0%B8%9E%E0%B8%A5%E0%B8%B4%E0%B9%80%E0%B8%84%E0%B8%8A%E0%B8%B1%E0%B8%99%E0%B8%94%E0%B9%89%E0%B8%A7%E0%B8%A2%E0%B8%A0%E0%B8%B2%E0%B8%A9%E0%B8%B2%E0%B9%84%E0%B8%9E%E0%B8%98%E0%B8%AD%E0%B8%99-flask-framework-a49a0c1aee18) ซึ่งผมได้เขียนไว้ก่อนหน้านี้ หรือยิ่งไปกว่านั้นถ้าอยากรู้ประวัติคนที่สร้าง Flask ก็สามารถอ่านได้เพิ่มเติมจากบทความนี้ [Programming Inspiration Ep.1 Armin Ronacher](https://medium.com/@komphet289/programming-inspiration-ep-1-armin-ronacher-70b7f76117ea) ซึ่งถ้าเพื่อน ๆ อ่านเสร็จ ตอนนี้ก็คงจะเข้าใจ 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 ของโปรเจคท์นี้![](https://miro.medium.com/max/60/1*eS5170OSHw28dX8cESsMyw.png?q=20)![](https://miro.medium.com/max/799/1*eS5170OSHw28dX8cESsMyw.png)เสร็จสิ้นขั้นตอน การสร้างโฟลเดอร์โปรเจคท์และ Virtual Environment

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

2.1 เลือก Open Folder เพื่อทำการเปิดโฟลเดอร์โปรเจคท์ เพื่ออิมพอร์ตเข้ามาเขียนใน VS Code โดยคลิ๊กเลือก Path ที่เก็บโปรเจคท์ที่ผมได้สร้างไว้ในตอนนแรก จากนั้นทำการคลิ๊กเลือกโฟลเดอร์![](https://miro.medium.com/max/60/1*l_U5EuJEbSz6xCVC8wsFlw.png?q=20)![](https://miro.medium.com/max/1273/1*l_U5EuJEbSz6xCVC8wsFlw.png)ทำการอิมพอร์ตโปรเจคท์เข้ามา

โฟลเดอร์โปรเจคท์พร้อม Virtual Environment Folder ถูกอิมพอร์ตเข้ามาใน VS Code พร้อมสำหรับเขียนโปรแกรมต่อไป![](https://miro.medium.com/max/60/1*cUuZNg5X8EX3iiemIS1Qnw.png?q=20)![](https://miro.medium.com/max/1275/1*cUuZNg5X8EX3iiemIS1Qnw.png)โฟลเดอร์ของโปรเจคท์ถูกอิมพอร์ตเข้ามาใน VS Code พร้อมสำหรับเขียนโปรแกรม

2.2 คลิ๊ก View → Command Palette…![](https://miro.medium.com/max/60/1*UQDBsdFiuD6nAfne1jx7dw.png?q=20)![](https://miro.medium.com/max/1280/1*UQDBsdFiuD6nAfne1jx7dw.png)

2.3 เลือก Python: Select Interpreter![](https://miro.medium.com/max/60/1*sey6jtRK4gF2a8bU9XY0yw.png?q=20)![](https://miro.medium.com/max/1277/1*sey6jtRK4gF2a8bU9XY0yw.png)

2.4 เลือก Path ที่จะใช้ในการรันโปรเจคท์ ซึ่งก็ได้สร้างไว้ก่อนหน้าสำหรับ Virtual Environment นั่นก็คือ fw คลิ๊กเลือกได้เลย![](https://miro.medium.com/max/60/1*6sLOwnzaBGao__9CNAxkIg.png?q=20)![](https://miro.medium.com/max/1278/1*6sLOwnzaBGao__9CNAxkIg.png)

2.5 จากนั้นทำการคลิ๊ก Debug → Start Debugging อีกครั้ง![](https://miro.medium.com/max/60/1*Ylmr4ALPbAytOEPMEjerjg.png?q=20)![](https://miro.medium.com/max/1275/1*Ylmr4ALPbAytOEPMEjerjg.png)

2.6 เลือก Python![](https://miro.medium.com/max/60/1*lEq9WqMgQsqPb7SYT-hi8w.png?q=20)![](https://miro.medium.com/max/1273/1*lEq9WqMgQsqPb7SYT-hi8w.png)

2.7 เลือก Flask![](https://miro.medium.com/max/60/1*E5SVji_2jTwMhGWQE4MoCA.png?q=20)![](https://miro.medium.com/max/1280/1*E5SVji_2jTwMhGWQE4MoCA.png)

2.8 จะปรากฏชื่อไฟล์ app.py ซึ่งเป็นชื่อ Default ของ Flask กด Enter![](https://miro.medium.com/max/60/1*e1uopG4RV15zxQV_WtC8sw.png?q=20)![](https://miro.medium.com/max/1286/1*e1uopG4RV15zxQV_WtC8sw.png)

2.9 เป็นอันเสร็จสิ้นขั้นตอนนี้![](https://miro.medium.com/max/60/1*D2VF_9blIYTfRPaF9dQvVg.png?q=20)![](https://miro.medium.com/max/1273/1*D2VF_9blIYTfRPaF9dQvVg.png)เราสามารถรันโปรเจคท์ได้ใน PowerShell ของ VS Code ได้แล้ว และ Virtual Environment ถูกเซ็ตเรียบร้อย

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

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

```
pip install flask
```

![](https://miro.medium.com/max/60/1*jzzIsZZsgRiAeFM6OhGvyA.png?q=20)![](https://miro.medium.com/max/1277/1*jzzIsZZsgRiAeFM6OhGvyA.png)ทำการ Install Flask เข้ามาในโปรเจคท์

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

```
pip freeze
```

![](https://miro.medium.com/max/60/1*MWY9izALxiIwi3Bi0uZYyA.png?q=20)![](https://miro.medium.com/max/1274/1*MWY9izALxiIwi3Bi0uZYyA.png)แพ็คเกจต่าง ๆ ที่ถูกติดตั้งเข้ามาในโปรเจคท์

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

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

3.2 สร้างไฟล์ขึ้นมาโดยคลิ๊กที่สัญลักษณ์ไฟล์ตรงแถบด้านซ้ายของ Workspace โดยใช้ชื่อว่า app.py กด Enter![](https://miro.medium.com/max/60/1*7361J_904yYEi8nyvscXvA.png?q=20)![](https://miro.medium.com/max/1274/1*7361J_904yYEi8nyvscXvA.png)

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)
```

## อธิบายโค้ด <a href="#f257" id="f257"></a>

### from flask import Flask <a href="#af53" id="af53"></a>

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

```
from flask import Flask
```

### app = Flask(\_\_name\_\_) <a href="#id-0b26" id="id-0b26"></a>

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

```
app = Flask(__name__)
```

### @app.route(‘\’) <a href="#id-29dd" id="id-29dd"></a>

### def home(): <a href="#id-12af" id="id-12af"></a>

### return “Hello My First Flask Project” <a href="#id-2208" id="id-2208"></a>

ส่วนต่อมาจะเป็นการสร้าง 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\_\_”’: <a href="#id-98f7" id="id-98f7"></a>

### app.run(debug=True) <a href="#id-8f30" id="id-8f30"></a>

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

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

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

![](https://miro.medium.com/max/60/1*_QTTMsS1WrqCvxnoAcdbDQ.png?q=20)![](https://miro.medium.com/max/1280/1*_QTTMsS1WrqCvxnoAcdbDQ.png)รูปร่างหน้าตาของ Final Code จะเป็นดังนี้ แล้วทำการรันทดสอบได้เลย

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

3.5 จากนั้นกดปุ่ม ctrl ค้างที่คีย์บอร์ด แล้วใช้เมาส์ชี้ที่ลิ้งค์พร้อม ทำการคลิ๊ก![](https://miro.medium.com/max/60/1*QmRI40TaU9Bs8qtj48r6CQ.png?q=20)![](https://miro.medium.com/max/1277/1*QmRI40TaU9Bs8qtj48r6CQ.png)

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

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

![](https://miro.medium.com/max/60/1*-Coa6-bSRQLwlZcpo4qe5A.png?q=20)![](https://miro.medium.com/max/1383/1*-Coa6-bSRQLwlZcpo4qe5A.png)และนี่ก็คือหน้าเว็บ

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

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

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

This article is written by: \[Sonny STACKPYTHON]
