Python Web Development with Flask

บทนำ

ถ้าทุกท่าน สามารถเขียน Python โดยใช้ Flaskได้ เราจะสามารถสร้างสรรค์ไอเดียต่าง ๆ ที่มีในหัวเราให้เป็นจริงได้ หรือแม้กระทั่งโอกาสในการทำงานด้าน Web Development ในอนาคต หรือแม้กระทั่งต่อยอด IoT หรือไม่ก็ Machine Learning เข้าในโปรเจคท์ของเราในอนาคตได้ ซึ่งทุกอย่างที่กล่าวมา Flask สามารถประยุกต์เข้าด้วยได้ทั้งสิ้น

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

Table of Contents

1. Flask Introduction

• flask คืออะไร ทำไมถึงได้รับความนิยม
• HTTP Request / Response Cycles
• Template คืออะไร โครงสร้างเป็นอย่างไร
• Static คืออะไร โครงสร้างเป็นอย่างไร
• Flask hello world app

2. เริ่มต้นสร้าง Flask App แรก 

• เริ่มต้นสร้าง Flask โปรเจคท์จาก 0
• ติดตั้ง Flask และอิมพอร์ตไลบรารี่ที่เกี่ยวข้องต่าง ๆ มาใช้งาน
• สร้างฟังก์ชันเพื่อใช้งาน
• กำหนด Route (URLs) ให้กับ function
• Response ข้อความไปแสดงผลในหน้าเว็บ
• Render Template (ส่งหน้า HTML) ไปแสดงผลหน้าเว็บ
• Runserver และ Debug Modes

3. HTML & CSS

• HTML (Hyper Text Markup Language) คืออะไร และทำไมถึงมีความสำคัญมากในการทำเว็บ
• ทำความรู้จักกับ Tags ต่าง ๆ ของ HTML 
• เริ่มต้นเขียน HTML กับพื้นฐานต่าง ๆ ที่จำเป็นที่สุด เพื่อให้สามารถต่อยอดศึกษาเองได้
• CSS (Cadcading Style Sheet) คืออะไร และทำไมถึงต้องใช้คู่กันกับ HTML
• ทำความรู้จักกับส่วนประกอบต่าง ๆ ของ CSS ไม่ว่าจะเป็น Selector, Class, Value
• เริ่มต้นเขียนและใช้งาน CSS ต่าง ๆ ที่จำเป็นที่สุด เพื่อให้สามารถต่อยอดไปศึกษาได้ 
• เมื่อเข้าใจพื้นฐานทั้ง HTML และ CSS ดีแล้ว จากนั้นจะเป็นการนำมาประยุกต์ใช้งานกับ Flask App

4. JavaScript

• ทำความรู้จักกับ JavaScript ซึ่งเป็นภาษาครอบจักรวาลอีกภาษาหนึ่ง โครงสร้างภาษาเป็นอย่างไร
• เริ่มต้นเขียน JavaScript และทำความเข้าใจกับ Syntax ต่าง ๆ 
• นำ JavaScript มาประยุกต์ใช้กับ Flask App

5. Flask เชื่อมต่อฐานข้อมูล (Database)

• ฐานข้อมูล (Database) คืออะไร ทำไมถึงมีความสำคัญในการสร้างเว็บหรือแอพต่าง ๆ เรียกแทบจะได้ว่า เป็นอีกหนึ่งสิ่งที่ขาดไม่ได้สำหรับการสร้างแอพเกือบทุกแอพบนโลกนี้
• ทำความรู้จักกับ SQLite ซึ่งเป็นฐานข้อมูลที่เล็ก เบา ติดตั้งสะดวก ใช้งานง่าย เป็นหนึ่งในฐานข้อมูลที่ได้รับความนิยมสูงสุดในการเริ่มต้นศึกษาฐานข้อมูล
• ทำการสร้างฟีลด์ (คอลัมน์ต่าง ๆ) ออกแบบฐานข้อมูล เพื่อใช้เก็บข้อมูลที่ต้องการ
• Database Migration
• ทดสอบสร้างข้อมูลตัวอย่างเข้าไปเก็บในฐานข้อมูล
• DB Browser ตัวจัดการฐานข้อมูลสำหรับ SQLite 

6. ดึงข้อมูลจาก Database มาแสดงผล

• เมื่อสร้างฐานข้อมูลเสร็จแล้ว ก็จะเป็นการดึงข้อมูลมาแสดงผลในหน้าเว็บ
• การดึงข้อมูลมาแสดงผลในรูปแบบต่าง ๆ 

7. Bootstrap

• ทำความรู้จักกับ Bootstrap ว่าทำไมถึงเป็น Frontend (CSS) Library ที่ได้รับความนิยมสูงสุดในโลก
• การติดตั้ง Bootstap เพื่อใช้งาน มีวิธีการติดตั้งแบบไหนบ้าง 
• รู้จักกับ Bootstrap CDN ทำไมถึงต้องใช้ และในกรณีไหนที่ไม่ใช้
• รู้จักกับ classes และ components ต่าง ๆ ของ Bootstrap 

8. Custom Bootstrap Navigation Bar

• ทำการตั้งค่า เพื่อปรับสไตล์ สีต่าง ๆ ของ Bootstrap เพื่อให้ไม่ต้องซ้ำกับของที่มีอยู่ ให้เป็นตีมสีหรือสไตล์ของตัวเองได้ตามต้องการ

9. ดึงข้อมูล Covid-19 มาแสดงในตารางผ่าน API

• ดึงข้อมูลโควิด 19 มาแสดงผล โดยผ่าน API ของกรมควบคุมโรค กระทรวงสาธารณสุข ที่เก็บข้อมูลแบบ JSON ฟอร์แมตไว้ โดยทำได้โดยการใช้ Python Script ในการรันสคริปต์เพื่อดึงข้อมูล JSON มาเก็บโดยใช้ไลบรารี requests และ json ของไพธอน จากนั้นทำการแปลงเป็น Python Dictionary (Python Data Type) และดึงไปแสดงผลหน้าเว็บในภายหลังได้
• ดึงข้อมูลเสร็จนำมาเก็บไว้ในรูปแบบของ CSV ไฟล์
• import ข้อมูลที่จาก Python โมดูลที่สร้างแยกที่ชื่อว่า covid19.py เข้ามาใน app.py (Main File) 
• ส่งข้อมูลออกไปแสดงผลที่หน้า HTML 
• รับข้อมูลที่ส่งจากฝั่ง Backend (Flask) และจัดฟอร์แมตแสดงผลในตารางได้อย่างถูกต้อง

10. ดึงข้อมูล Covid-19 มาแสดงแบบ Dashboard ผ่าน API

• เมื่อแสดงผลในตารางเรียบร้อยและรู้คอนเซ็ปต์ในการดึงข้อมูลมาแสดงผลแล้ว จากนั้นจะเป็นการดึงมาแสดงผลในรูปแบบ Dashboard แบบง่าย ๆ  แต่สวยงามและดูง่าย สามารถทำเป็น Data Visualization ได้ โดยใช้เพียงแค่ HTML เพียว ๆ
• เรียนรู้การวาง Components ต่าง ๆ รวมถึงการใช้ jinja2 template ซึ่งเป็น template language ของ Flask ที่ช่วยให้สามารถเขียน Python ลอจิกในฝั่ง HTML ได้

11. ทำ App สุ่มเมนูอาหาร

• ทำเวิร์คช็อปแอพสุ่มเมนูอาหาร โดยเกิดจากไอเดียที่ว่า ในวันนี้ไม่รู้จะกินอะไร เลยเป็นที่มาของการทำแอพสุ่มเมนู

12. CRUD App - Create

• เรียนรู้การทำ CRUD App ซึ่งเป็นแนวคิดพื้นฐานของแทบจะทุกแอพบนโลกนี้ ทำความเข้าใจว่า CRUD (Create, Read, Update, Delete) คืออะไร และสำคัญอย่างไร Use Case จริงเป็นอย่างไรบ้าง (ยกตัวอย่างการใช้งานของ Facebook)
• ทำการ Create (สร้าง) ข้อมูล

13. CRUD App - Read

• ทำการ  Read (อ่าน) ข้อมูล/ดึงข้อมูล

14. CRUD App - Update

• ทำการ Update (แก้ไข) ข้อมูลเดิมที่ได้สร้างไว้ก่อนหน้า

15. CRUD App - Delete

• ทำการ Delete (ลบ) ข้อมูล

16. Flask Authentication Systems - Hash Password & Sign up (บทความ)

• ทำความเข้าใจกับระบบ Authentication Systems ซึ่งรวมไปถึง Log in, Log out 
• สอนทำระบบ Registration/Sign up (ลงทะเบียน) 
• ทำความรู้จักกับ Hash Password และความสำคัญของการทำ Hash เพื่อให้ระบบและ Password ของเรามีความปลอดภัยมากยิ่งขึ้น
• ใช้งาน Flask Wergzug ซึ่งเป็น Package สำหรับระบบความปลอดภัยของ Flask ซึ่งจะมี Hash Function สำหรับ Hash รหัสผ่านที่เราได้สร้างจากการลงทะเบียน แทนที่จะเก็บในรูปแบบของ Plain Text
• ทำความเข้าใจและใช้งาน LoginManager, login_required, user_loader 

17. Flask Authentication Systems - Log in (บทความ)

• ทำความเข้าใจเกี่ยวกับระบบ Log in ทำไมถึงต้องมีการสร้างล็อกอิน (การยืนยันตัวตนเข้าใช้งาน)
• ทำความเข้าใจกับ Hash function ที่จะช่วยตรวจสอบ Hash password ที่เราได้สร้างจากการ Sign up ก่อนหน้า เพื่อให้สามารถระบุตัวตนของผู้ใช้งานได้
• ทำความเข้าใจและใช้งาน UserMixin ซึ่งเป็นคลาสที่สะดวกและรวดเร็วในการสืบทอดเมธอดต่าง ๆ เกี่ยวกับระบบ User Authentication Systems มาใช้งานในคลาส User ที่ได้สร้างไว้ก่อนหน้า
• ทำความรู้จักและใช้งาน flask_wtf ซึ่งเป็นไลบรารี่ยอดนิยมของ Flask ที่ใช้สำหรับจัดการฟอร์มได้สะดวกและรวดเร็ว
• ทำความเข้าใจและใช้งาน check_password_hash, SECRET_KEY

18. Flask Authentication Systems - Log out (บทความ)

• ทำความเข้าใจเกี่ยวกับการ Log out ทำไมถึงต้องมีการทำล็อกเอาท์
• ทำความเข้าใจและใช้งานฟังก์ชันที่ใช้สำหรับทำการ Log out
• ทำความรู้จักและใช้งาน Message Flashing ว่าคืออะไร ทำไมถึงมีความสำคัญ เช่น เป็นการแจ้งเตือนผู้ใช้ ซึ่งส่งผลดีต่อประสบการณ์ผู้ใช้งานของผู้ใช้ หรือ UX (User Experience) อีกด้วย

19. Deploy Flask App to PythonAnywhere (เอกสาร PDF)

• เสร็จสิ้นการทำเว็บและได้ความรู้แบบจัดเต็มมาเรียบร้อย แต่ตอนนี้เว็บยังดูได้เพียงแค่ใน Localhost หรือเครื่องคอมพิวเตอร์ของเรา ดังนั้นจึงเป็นขั้นตอนสุดท้ายคือการนำเว็บอัพขึ้นเซิร์ฟเวอร์ โดยตัวแพลตฟอร์มที่จะใช้บริการในคอร์ส Python Web Development with Flask นี้ก็คือ PythonAnywhere ซึ่งฟรี และใช้งานง่ายมาก ๆ 

Congratulations, you're complete this course. Keep doing good job.

คอร์สนี้เหมาะสำหรับใคร ?

• ท่านที่เริ่มศึกษาและเขียนภาษาไพธอน หรือเคยเขียนไพธอนมาบ้างแล้ว
• ท่านที่ได้ศึกษาภาษาไพธอนมาบ้างแล้ว แต่ก็ยังไม่รู้ว่าจะนำไปประยุกต์ใช้งานด้านไหนดี ซึ่งสายเว็บเป็นอีกด้านหนึ่งที่น่าสนใจและยังคงจะได้รับความนิยมไปอีกยาวนาน
• ท่านที่สนใจเริ่มต้นศึกษาด้าน Web Development ของภาษาไพธอน และนำไปต่อยอดพัฒนาเว็บไซต์และเว็บแอปพลิเคชันต่อไป ซึ่งไม่เพียงแต่ด้านเว็บเท่านั้น เมื่อมีพื้นฐานที่ดีแล้ว สามารถต่อยอดและนำด้านเว็บไปประยุกต์ได้อีกหลายสายงาน

ตัวอย่างหน้าเว็บไซต์

• Flask Demo Website by STACKPYTHON
  

(แจ้งรายละเอียดการชำระเงินและลงทะเบียน)

• ยอดเงินที่ต้องชำระ: 2,500 บาทถ้วน
• ปล.สมาชิกคอร์สรวม Python Programming and Web Development Full Courses 2021 ซึ่งจ่ายครั้งเดียว เรียนได้ทุกคอร์สตลอดปี 2021 อัปเดตเรียนได้ฟรี 

ขั้นตอนการสมัครเรียนคอร์สนี้ 

• เพิ่มเพื่อนใน Line Official เพื่อสอบถามข้อมูลเพิ่มเติมลงที่เบียน ลิ้งค์ เพื่อเพิ่มเพื่อนและสมัครสุดง่าย
• ชำระตังค์และข้อมูลเพื่อเป็นหลักฐานการสมัครเช่น ชื่อผู้สมัคร, อีเมล์, เบอร์โทรศัพท์ เป็นต้น เป็นอันเสร็จสิ้นการสมัคร
  
  

ขอให้มีความสุขและสนุกในการเรียนครับ