บทนำ
สวัสดีครับ เชื่อว่าทุกคนที่เข้ามาอ่านบทความนี้ ฝันอยากจะลองเขียนเว็บด้วยตัวเองสักครั้งใช่ไหมครับ แน่นอนครับ บทความนี้ผมจะพาทุกคนไปสร้างเว็บของตัวเองตั้งแต่ 0 ถึง 100 โดย EP แรกนี้ผมจะสอนตั้งแต่วิธีการติดตั้ง Python ติดตั้งเครื่องมือต่างๆที่เราต้องใช้กัน ไปจนถึงสร้างเว็บหน้าตาสวยงามง่ายๆใน 3 นาทีครับ ถ้าพร้อมแล้ว มาเริ่มกันเลยครับ
ติดตั้ง Python
ก่อนอื่น เราต้องติดตั้งเจ้าตัว Python พระเอกของเรากันก่อนเลยครับ วิธีติดตั้งก็ง่ายมาก ทำตามขั้นตอนด้านล่างได้เลยครับ
1. Download โปรแกรม Anaconda กันก่อน
โปรแกรม Anaconda คืออะไร คร่าวๆนะครับ Anaconda คือ โปรแกรมที่สร้างสภาพแวดล้อมจำลอง (Virtual Environment) ให้กับเราในการเขียนโปรแกรม Python ครับ โดย ถ้าเราติดตั้งเจ้า Anaconda ในตอนแรกเนี่ย เราจะได้ Virtual Environment ชื่อว่า base มา บางคนจะเรียกย่อๆว่า base venv (v ตัวแรก virtual env 3 ตัวหลัง คือ environment) โดยเราสามารถสร้างเจ้าตัว environment ตัวอื่นๆ ได้อีกด้วยครับ แต่ในที่นี่เราจะใช้ base venv กันก่อน ตัวโปรแกรมโหลดได้ที่ลิงค์ด้านล่างเลยครับ คลิกปุ่มดาวน์โหลดได้เลย
2. ติดตั้ง Anaconda
ขั้นตอนนี้ง่ายมากครับ หลังจาก Download ตัว Setup Anaconda มาแล้ว ให้เราคลิกที่ตัว SET UP แล้ว กด Next ไปเรื่อยๆครับ ก็จบแล้ว เหมือนลงเกมเลยใช่ไหมล่ะ
3. ติดตั้งเสร็จแล้ว
ติดตั้งเสร็จแล้วในบทความนี้ ผมจะใช้โปรแกรมที่ติดมากับเจ้าตัว Anaconda ในการเขียนโค้ดนะครับ นั่นก็คือเจ้า SPYDER นั่นเอง ให้ทุกคนเปิด Anaconda Navigator แล้วเลือก Spyder ครับ หรือสามารถค้นหาจากช่องค้นหาของ Window ได้เหมือนกัน โดยการค้นหาชื่อว่า Spyder ลงไป ก็จะเจอครับ ตามภาพ
ติดตั้ง Library ที่จำเป็น
ขั้นตอนนี้จะเป็นการติดตั้ง Library Python ที่จำเป็นสำหรับการทำเว็บครับ เพราะเจ้าตัวภาษา Python เพียวๆอย่างเดียว มันทำเว็บไม่ได้ครับ เลยต้องติดตั้ง Library เพิ่ม บางคนอาจจะเรียกเจ้า Library คำนี้ว่า Package นะครับ ก็ได้เหมือนกันแล้วแต่คนถนัด โดยเฉพาะอาจารย์มหาลัยที่ชอบใช้ศัพท์ยากๆนั่นแหละ 555+
1. เปิด Anaconda Prompt (คนละตัวกับ Command Prompt) ขึ้นมา แล้วพิมพ์ว่า
หา anaconda prompt ยังไง
ให้ใช้ search ของ window ตัวรูปแว่นขยายนั่นแหละ แล้วพิมพ์คำว่า Anaconda Prompt ก็จะเจอครับ ส่วนใครใช้ Mac ให้เปิด cmd ขึ้นมาแทน anaconda prompt นะครับ แล้วพิมพ์ตามได้เลย
pip install streamlit
หรือ บางคนติด error Permission ให้ใช้คำสั่งด้านล่าง คือ เติม –user ด้านหลัง
pip install streamlit --user
Note : Anaconda Prompt เป็นคนละตัวกับ Command Prompt ดอกจันทร์ 100 ตัว
เริ่มเขียนโค้ด
ใครขี้เกียจอ่านแล้ว อยากดูคลิปสามารถดูคลิปได้ตามด้านล่างเลยนะ
แต่ถ้าใครยังอยากอ่านต่ออยู่ ในการเขียนโค้ดจะแบ่งเป็น 2 ส่วนนะครับ ประกอบด้วย ส่วนแรกคือการ import library เข้ามา ส่วนที่ 2 คือการเขียนโค้ดตัวเว็บไซต์ นั่นเอง
0. เปิดโปรแกรม Spyder สำหรับใช้เขียนโค้ด ขึ้นมา
เปิดโปรแกรม Anaconda Navigator แล้วเลือก Spyder จากนั้นเริ่มทำเว็บได้เลย โดยพิมพ์โค้ดตามคลิปหรือใครถนัดอ่านมากกว่าก็พิมพ์ตามด้านล่างได้เลยครับ
1. โค้ด import library ที่ต้องใช้ พิมพ์ตามด้านล่างได้เลย
import stramlit as st
โค้ดนี้อธิบายง่ายๆว่า เรานำเข้า streamlit ก็คือ library ที่เราติดตั้งตอนแรกนั่นแหละ เอาเข้ามาใช้ ส่วน keyword คำว่า as หมายถึง เราจะตั้งชื่อเล่นให้เจ้า streamlit ว่า st จะได้สั้นๆ แทนที่จะพิมพ์เรียกชื่อเต็มยาวๆเวลาใช้ function ต่างๆของ streamlit เราจะย่อเหลือแค่ st นะครับ
2. โค้ดในส่วนของตัวเว็บไซต์
เราจะทำเว็บอะไรก่อน เราจะทำเว็บที่มี ช่องให้กรอกข้อมูล 1 ช่อง และ 1 ปุ่ม submit เวลาผู้ใช้กรอกข้อมูลแล้วกด submit มา ให้เว็บแสดงข้อมูลที่ผู้ใช้กด submit มาทางหน้าเว็บ แล้วแสดง effect ลูกโป่งบอลลูน เวลากด submit
ans = st.text_area("กรอกข้อมูลของคุณที่นี่")
if st.button("OK"):
st.balloon()
st.success(ans)
3. โค้ดเต็มๆ
import stramlit as st
ans = st.text_area("กรอกข้อมูลของคุณที่นี่")
if st.button("OK"):
st.balloon()
st.success(ans)
อธิบายโค้ด
ans = st.text_area("กรอกข้อมูลของคุณที่นี่")
st.text_area(“กรอกข้อมูลที่นี่”) หมายถึงเราสร้างกล่องข้อความออกมาในภาษาเว็บจะเรียกกล่องข้อความที่ให้ผู้ใช้กรอกลักษณะนี้ว่า Text Area โดยสร้างจาก Library Streamlit หรือตัวย่อๆว่า st นั่นเองครับ จ่กนั้นข้อความที่ผู้ใช้กรอกจะไปเก็ยที่ตัวแปร ans ครับ
if st.button("OK"):
st.balloon()
st.success(ans)
เสต็ปต่อมาเราจะสร้างปุ่ม OK ที่เป็นปุ่ม Submit ของเราขึ้นมา พร้อมกับเช็คใส่เงื่อนไขไปเลยว่า ถ้ามีคนกดปุ่ม OK ให้ปริ้นข้อความที่ผู้ใช้คนนั้นพิมพ์ออกทางหน้าจอเลย โดยเวลากดให้ effect balloon ลอยโชว์ก่อน แสดงผลข้อความของผู้ใช้คนนั้นก็เป็นอันเสร็จครับ
สรุป
เป็นยังไงกันบ้างครับ คงเห็นแล้วใช่ไหมครับว่าในภาษา Python แค่เราพิมพ์ไม่กี่คำสั่งก็ได้เว็บสวยๆออกมาแล้ว 1 เว็บ ง่ายๆเลยใช่ไหมครับ แต่ใน EP นี้เป็นแค่ Basic เท่านั้นครับ ใน EP ถัดๆไปผมจะพาทุกคนทำเว็บที่ซับซ้อนขึ้นโดยใช้ Streamlit นี่แหละครับ พร้อมกับ Deploy ขึ้นเพื่อใช้งานจริง ให้เพื่อนๆของทุกคนเข้ามาชมเว็บเราได้จากข้างนอกได้ง่ายๆเลย สำหรับ EP นี้ก็คงจบลงเท่านี้ เจอกัน EP หน้า สวัสดีครับ
