การสร้าง web GUI ด้วย Flask

เราเรียนเรื่อง Tkinter ซึ่งเป็น library ที่สร้าง desktop application อย่างง่ายๆไปแล้ว แต่ปัจจุบันมี application จำนวนมากที่อยู่บนเว็บ ถ้านักศึกษาสนใจจะ develop application สมัยใหม่ ควรจะเรียนรู้ web application library อย่างเช่น Flask ไว้บ้าง

Flask ไม่ใช่ library เดียวที่ช่วยให้เราสามารถเขียน python web application ได้ ยังมี library อื่นเช่น Django และ Pyramid แต่จุดเด่นของ Flask คือความเรียบง่ายและความยืดหยุ่น คือสามารถใช้คู่กับเทคโนโลยีอื่นๆได้โดยไม่ตีกัน เหมาะอย่างมากกับการทำ prototype ซึ่งต้องอาศัยความง่ายและเร็ว

ในบทนี้เราจะไม่เรียนอะไรมากมายเพราะการเรียนรู้ที่จะใช้ Flask อย่างเต็มรูปแบบควรจะใช้เวลามากกว่านี้ เราต้องเรียนรู้เรื่อง Model-View-Controller, การใช้ Database, Templating engine และอื่นๆอีกมากมายถึงจะเข้าใจ Flask อย่างลึกซึ้ง แทนที่จะสอนทุกๆเรื่อง ในบทเรียนนี้เราจะฝึกทำ form ง่ายๆด้วย Flask เพื่อให้สามารถนำไปประยุกต์ใช้ทำ web app พื้นฐานได้ นักศึกษาที่สนใจเพิ่มเติมควรอ่าน Flask Documentation(http://flask.pocoo.org/)

Web Application ทำงานอย่างไร

ก่อนจะเข้าใจ web application ต้องเข้าใจ web server จริงๆแล้ว web server มันก็คือคอมพิวเตอร์นี่แหละที่ต่อโดยตรงเข้ากับ internet แล้วแต่ละ server ก็จะมีไอพี address เป็นของตัวเอง เช่น web server ของกูเกิล จะมี IP = 72.14.205.100 แต่เนื่องจากเลขนี้มันจำยากไป เขาเลยสร้าง domain name ที่ชื่อ google.com มาครอบแล้วชี้เข้าไปที่ IP address อีกที

web server ชื่อก็บอกอยู่แล้วว่าหน้าที่ของมันก็คือการเสิร์ฟเว็บไซท์เข้าไปที่เครื่องของเรา เมื่อเราเข้า web browser เช่น Chrome, Firefox, Internet Explorer เราใส่ https://www.google.com เข้าไป web server ก็จะส่งข้อมูลกลับมาให้ โดยข้อมูลนี้เมื่อก่อนก็จะเป็นแค่ไฟล์ html ธรรมดาที่เขียนเนื้อหาของเว็บนั้นๆ แต่เดี๋ยวนี้สิ่งที่ส่งมาอาจจะเป็นข้อมูลในรูปแบบอื่นๆ

นอกจากตัว IP address เป็นเสมือนบ้านเลขที่ของ server ก็ยังมี port ที่เปรียบเสมือนประตูบ้าน server อาจจะรับส่งข้อมูลผ่านประตูบ้านหลายๆประตูโดยแต่ละประตูอาจจะมีวิธีการรับส่งที่ไม่เหมือนกัน เช่น web host อาจจะได้รับคำขอให้ส่งเว็บเพจไปหาผู้ใช้ที่เป็น visitor (http protocol port 80) แต่ถ้าผู้ใช้เป็นเจ้าของเว็บไซท์อาจจะขอเชื่อมต่อเพื่อรับส่งไฟล์ (ftp protocol port 22) คำว่า protocol นี่ก็ไม่ได้มีอะไร เป็นแค่คำที่บอกว่าการติดต่อผ่านพอร์ทจะใช้ภาษาอะไรดี เช่น http protocol คือ hypertext transfer protocol ซึ่งมีคำศัพท์เกี่ยวกับการรับส่งหน้าเว็บ ถ้าเป็น ftp protocol คือ file transfer protocol จะมีคำสั่งเกี่ยวกับการรับส่งไฟล์

คราวนี้ web application ก็คือโปรแกรมที่มีอยู่สองส่วน โค้ดของโปรแกรมส่วนหนึ่งจะถูกเก็บไว้ที่เครื่องคอมของเราเรียกว่า client-side application อีกส่วนจะไปเก็บที่ server เรียกว่า server-side application ยกตัวอย่างเช่น google doc จะเห็นว่าเดี๋ยวนี้เราสามารถใช้ google doc แบบไม่ต้องต่ออินเตอร์เน็ตก็ได้เพราะว่าโค้ดเกี่ยวกับการเขียนข้อความ การเปลี่ยนสีตัวอักษร การใส่ตาราง ทั้งหมดนั้นอยู่ในเครื่องของเรา ส่วนนี้คือ client-side application แต่พอเราต่ออินเตอร์เน็ตเมื่อไหร่ กูเกิลก็จะดึงเอาข้อมูลที่เราพิมพ์ไป เก็บไว้ในฐานข้อมูล โปรแกรมส่วนที่คอยจัดการฐานข้อมูลใน server ของกูเกิลนั่นคือ server-side application

Request-Response Cycle

เวลาที่เราใช้ web application เช่น Gmail เมื่อเรากดลิงค์บนหน้าเว็บเราจะเห็นว่า url ของหน้านั้นจะโชว์สิ่งต่างๆ

ยกตัวอย่างเช่นถ้าเรากดที่ inbox ของ Gmail เราจะเจอ url ต่อไปนี้

https://mail.google.com/mail/u/0/#inbox

ถ้าเรากดที่อีเมลใดอีเมลหนึ่งจะได้ url ประมาณนี้

https://mail.google.com/mail/u/0/#inbox/1544661b102a7a2a

เราอาจจะไม่รู้ตัวว่าสิ่งที่เรากำลังทำอยู่คือการส่ง "request" ไปให้กับ web server ของ Gmail กล่าวคือเราส่งรหัสลับ เช่น "/mail/u/0/#inbox/1544661b102a7a2a" ไปให้ web server เพื่อให้มันทราบว่าจะไปหยิบเอาข้อมูลอะไรมาเสิร์ฟให้เรา

การที่ผู้ใช้ส่ง request แล้วเราเขียนโค้ดให้ตอบ request เหล่านั้นด้วยข้อมูล เราเรียกว่า request-response cycle

Flask เป็น library ที่ทำให้การสร้าง request-response web application เป็นเรื่องง่าย

Local web application server

เมื่อเรา install Flask มันจะทำให้เครื่องของเรากลายเป็น web application server แบบจำลอง ซึ่ง server ปลอมๆตัวนี้จะต่อกับ web browser (ที่ทำหน้าที่เป็น client) แล้วก็สื่อสารกันด้วย request-response cycle เหมือนว่าเป็น web application จริงๆ เราสามารถกำหนดได้ว่า local server นี่จะมีไอพี (บ้านเลขที่) เท่าไหร่ และ browser กับ server จะคุยกันทาง port (ประตู) ไหน

เราจะเขียนโค้ด python ที่ทำตัวเป็น server-side application คอยฟังคำส่ังจาก client แล้วเสิร์ฟด้วยข้อมูลที่ถูกขอมา ถ้านักศึกษาต้องการเรียนรู้การเขียน client-side application เพิ่มเติม ควรลองศึกษาภาษาพวก html, css, javascript

Deployment

เรื่องของการ deploy เป็นส่วนที่นักศึกษาอาจจะยังไม่ต้องสนใจในตอนนี้ แต่ถ้าใครอยากเอา app ที่เราเขียนไปโหลดขึ้น public server แล้วรันให้คนอื่นสามารถเข้ามาใช้ได้จริงๆ ซึ่งทำได้ไม่ยากเลย ต้องลองศึกษาการ deploy application โดยอาจจะเริ่มที่ service สำเร็จรูปอย่างเช่น heroku