โลกของ Application: แอปที่เราเล่นกันทุกวัน ข้างในมันมีอะไรบ้าง
เอาจริง ๆ นะโบร วันนึงเราแตะมือถือกี่ครั้ง? สั่งข้าว โอนเงิน ดูคลิป แชท ทำงาน วนไปแบบนี้ทั้งวัน
แต่เคยสงสัยกันไหมว่า "แอป" ตัวนึงเนี่ย ข้างในมันมีอะไรอยู่ ใครทำอะไรตรงไหน
บทความนี้ไม่ต้องเขียนโค้ดเป็นก็อ่านได้ ขอแค่จบแล้วเวลามีคนพูดคำว่า Frontend, Backend, API, Database เพื่อน ๆ ต้องร้อง "อ๋อ อันนั้นเอง" ให้ได้ แค่นั้นพอ
แอปพลิเคชันคืออะไรกันแน่
เอาแบบไม่ต้องอ้อมค้อม แอปก็คือโปรแกรมที่ถูกสร้างมาทำงานอย่างใดอย่างหนึ่งให้เรา แค่นั้นจริง ๆ
- แอปธนาคาร มีไว้ดูเงินในบัญชี (แล้วก็ช็อกทุกครั้งที่เปิด)
- แอปสั่งข้าว มีไว้รับออเดอร์แล้วส่งให้ร้าน
- Excel มีไว้คำนวณตัวเลขจนตาลาย
ส่วนคำว่า "แอป" กับ "โปรแกรม" ในภาษาบ้าน ๆ ใช้แทนกันได้เกือบหมดนะ ต่างกันแค่ยุคที่คนเรียกเท่านั้นเอง
แอปมีกี่แบบ
1. Web Application
แอปที่วิ่งอยู่ใน เบราว์เซอร์ (Chrome, Safari, Edge) ไม่ต้องโหลด ไม่ต้องติดตั้ง พิมพ์ชื่อเว็บปุ๊บใช้ได้ปั๊บ
ตัวอย่างที่โบรใช้อยู่: Gmail, Facebook บนเว็บ, Google Docs, ระบบหลังบ้านบริษัท
ข้อดี: อัปเดตทีเดียวทุกคนได้ของใหม่พร้อมกัน ใช้ได้ทุกเครื่องที่มีเบราว์เซอร์ ข้อเสีย: ต้องมีเน็ต และเข้าถึงของในเครื่องได้จำกัดกว่าแอปที่ติดตั้ง
2. Mobile Application
พวกที่ต้องโหลดลงมือถือ แตกย่อยได้อีกนะ
- Native App: เขียนด้วยภาษาเฉพาะของแต่ละค่าย (iOS ใช้ Swift, Android ใช้ Kotlin) ลื่นที่สุด ใช้กล้อง GPS เซ็นเซอร์ได้เต็มพิกัด แต่เหนื่อยตรงต้องเขียน 2 รอบสำหรับ 2 ระบบ
- Cross-platform App: เขียนทีเดียวลงได้ทั้ง iOS และ Android เครื่องมือที่ฮิตคือ Flutter กับ React Native ประหยัดแรงไปเยอะ แต่งานที่ต้องรีดความเร็วสุด ๆ อาจสู้ Native ไม่ได้
- PWA: เว็บแอปที่แต่งตัวมาเหมือนแอปมือถือ กดเพิ่มลงหน้าจอโฮมได้ ทำงานออฟไลน์ได้บางส่วน
3. Desktop Application
พวกที่ลงในคอม เช่น Photoshop, Line เวอร์ชัน PC, โปรแกรมบัญชีในออฟฟิศ
4. CLI (Command Line Interface)
โปรแกรมหน้าจอดำ ๆ ที่ต้องพิมพ์คำสั่งเอา คนทั่วไปเห็นแล้วจะรู้สึกเหมือนอยู่ในหนังแฮกเกอร์ แต่สายไอทีใช้ทุกวันนะ เพราะมันเร็วและสั่งให้ทำงานอัตโนมัติได้
5. Embedded Application
โปรแกรมที่ฝังอยู่ในของใช้ เช่น สมองกลในเครื่องซักผ้า แอร์ รถยนต์ กล้องวงจรปิด
ข้างในแอปมีอะไรบ้าง (ตรงนี้แหละของจริง)
ลองนึกภาพ ร้านข้าวแกงข้างออฟฟิศ แล้วเทียบกับแอปดูนะโบร
| ร้านข้าวแกง | แอปพลิเคชัน | ทำหน้าที่อะไร |
|---|---|---|
| โต๊ะลูกค้า + เมนู | Frontend | ส่วนที่เราเห็นและกด |
| พนักงานเสิร์ฟ | API | ตัวกลางรับออเดอร์ไปส่งครัว แล้วยกของกลับมา |
| ครัว | Backend | สมองของระบบ คิด คำนวณ ตรวจสิทธิ์ |
| ห้องเก็บของแห้ง | Database | ที่เก็บของถาวร |
Frontend: หน้าร้าน
ทุกอย่างที่ตาเราเห็น ปุ่ม สี ฟอนต์ ช่องกรอกข้อมูล แอนิเมชันสวย ๆ งานหลักคือทำให้ใช้ง่ายและไม่ขี้เหร่
ของที่ใช้กัน: HTML, CSS, JavaScript และเฟรมเวิร์กอย่าง React, Vue, Next.js
Backend: หลังร้าน
สมองที่เรามองไม่เห็น หน้าที่คือ เช็กว่าเราเป็นใคร มีสิทธิ์ทำอะไร คิดราคา ตัดสต็อก ส่งอีเมล คุยกับระบบอื่น
อันนี้สำคัญมากโบร: เรื่องเงินกับความปลอดภัย ต้องอยู่ Backend เท่านั้น เพราะโค้ดฝั่ง Frontend คนแอบแก้ได้ ถ้าเอาการคิดราคาไปไว้หน้าร้าน เดี๋ยวมีคนแก้ราคาไอโฟนเป็น 1 บาทแน่นอน
ของที่ใช้กัน: Python (Django, FastAPI), JavaScript (Node.js), Java, PHP (Laravel), Go
Database: คลังของ
ที่เก็บข้อมูลที่ต้องอยู่ถาวร เช่น รายชื่อสมาชิก ประวัติการสั่งซื้อ ยอดเงิน
ปิดแอปแล้วเปิดใหม่ข้อมูลยังอยู่ ก็เพราะเจ้าตัวนี้แหละ (เดี๋ยวบทหน้าเจาะลึกให้)
API: เด็กเสิร์ฟ
API ย่อมาจาก Application Programming Interface ฟังดูหรู แต่จริง ๆ คือ ข้อตกลงว่าจะคุยกันยังไง เหมือนเมนูที่บอกว่าสั่งอะไรได้บ้าง สั่งแล้วได้อะไร
เวลาแอปสั่งข้าวโชว์แผนที่ Google ได้ นั่นก็เพราะมันเรียก API ของ Google ไม่ต้องนั่งวาดแผนที่โลกเองตั้งแต่ต้น (ซึ่งถ้าทำเองคงตายก่อน)
แล้วอะไรทำงานตรงไหน
สมมติเรากดปุ่ม "สั่งซื้อ" ในแอปช้อปปิ้ง สิ่งที่เกิดขึ้นคือ
- Frontend เก็บข้อมูลที่เรากรอก แล้วยิงคำขอ (Request) ออกไป
- คำขอวิ่งผ่านเน็ตไปหา Server
- Backend เช็กว่าล็อกอินอยู่จริงไหม ของยังมีสต็อกไหม ราคาเท่าไร
- Backend สั่ง Database ให้บันทึกออเดอร์กับตัดสต็อก
- Backend ยิงคำตอบ (Response) กลับมา
- Frontend เอามาโชว์เป็นข้อความ "สั่งซื้อสำเร็จ" ให้เราเห็น
ทั้งหมดนี้จบในไม่ถึงวินาที เร็วกว่าที่เราจะเปลี่ยนใจอีก
ศัพท์ที่ควรพกติดตัวไว้
- Client: ฝั่งเรา (มือถือ เบราว์เซอร์)
- Server: ฝั่งเครื่องที่ให้บริการ
- Request / Response: คำขอ กับ คำตอบ
- Full-stack: คนที่ทำได้ทั้งหน้าบ้านหลังบ้าน (แปลไทยว่า "ทำคนเดียวทั้งร้าน")
- Deploy: เอาโค้ดที่เขียนเสร็จขึ้นไปวางบนเซิร์ฟเวอร์จริงให้คนใช้ได้
สรุปให้โบร
แอปตัวนึงไม่ใช่ก้อนเดียวจบ แต่เป็นทีมงานหลายส่วนช่วยกัน - Frontend เป็นหน้าร้าน Backend เป็นครัว Database เป็นคลังของ API เป็นเด็กเสิร์ฟที่วิ่งไปวิ่งมา
พอเห็นโครงนี้แล้ว ต่อไปใครคุยเรื่องแอปแบบไหน เราจะวางภาพในหัวได้ทันทีว่าเขาพูดถึงส่วนไหนอยู่ ไม่ต้องพยักหน้าไปงง ๆ ไปแล้ว
👉 บทต่อไป: Web Server กับ Database Server มันทำงานยังไง - เดินเข้าไปส่องในครัวกันของจริง