เวลาเห็นคำถามว่า Vue หรือ React จะต่อ database ได้ยังไง ? ในกลุ่มต่างๆผมเชื่อว่า 90% ของคนที่ได้รับคำตอบคือ “งง” ไม่ใช่ว่าคำตอบในกลุ่มต่างๆนั้นไม่ดี แต่น่าจะเป็นคนที่ตั้งคำถามมากกว่าที่อาจจะยังไม่เข้าใจ concept ของการเขียน Vue, React (SPA) ว่ามันเป็นแค่ View เท่านั้น เอาละวันนี้ผมจะไม่ได้มาสอนเขียนหรอก แต่จะพามาทัวร์ concept ให้เข้าใจกันก่อนจะหยิบ Javascript Framework มาใช้กัน
Vue, React เป็นแค่ View
เป็นแค่ View คืออะไร ? ความหมายของมันก็คือมันเกิดมาเพื่อทำ UI (User interfaces) หรือ interactive (การโต้ตอบ) กับผู้ใช้ เช่นเมื่อผู้ใช้คลิกปุ่มแล้วจะเกิดอะไรขึ้นหรือแม้กระทั่ง User แก้ไขข้อมูลของตัวเองแล้วบันทึกจะแสดง Popup เป็นต้น จากข้างต้นที่กล่าวมาถ้าสมมุติเรามี Layouts เว็บไซต์แบบนี้
ให้ลองคิดตามว่าในส่วนของ Header มีชื่อและนามสกุลของผู้ใช้อยู่ พอผู้ใช้ทำการกดแก้ไขชื่อและบันทึก ชื่อบน Header จะต้องเปลี่ยนตาม ถ้าเราเขียนเว็บแบบ MPA (Multi Page Application) เช่น PHP, ASP, Ruby เราก็แค่สั่ง Refresh หน้าเว็บหรือกดบันทึกฟอร์มพอหน้าเว็บ Refresh เสร็จข้อมูลก็เปลี่ยนซึ่งเป็นวิธีปกติที่ใช้กันมาเนินนานจนถึงยุคของ SPA (Single Page Application) ทุกอย่างก็เปลี่ยนไป..
SPA ต่อกับ Database ยังไง ?
สรุปง่ายๆ คือ เราไม่เอา SPA ไปต่อ Database ตรงๆแต่ถ้าถามว่าทำได้ไหม “ทำได้แน่นอน” แต่ไม่ควรทำเพราะอะไร? เนื่องจากชื่อมันก็บอกแล้วว่าเป็น View, UI (ฝั่ง Client) งั้นแสดงว่า Code ที่เราจะเชื่อมต่อ Database จะไปอยู่ที่ฝั่งผู้ใช้ ซึ่งกดคลิกขวาที่หน้าเว็บแล้ว View source page ก็เห็น code ที่เราแอบเขียนต่อ Database เรียกว่าแทบจะรู้ช่องโหว่ของ Application ของเราเลยทีเดียว และถ้าเรายังใช้วิธีนี้เราจะเสียความสามารถในการ Scale ของ SPA ไปเลยเรียกได้ว่าเขียน SPA แต่ดันไม่ใช้ความสามารถของ SPA เลยแล้วจะเขียนทำไมเนี่ย >:
แล้วเค้าใช้วิธีไหนกัน คำตอบที่ฮิตที่สุดคือคุยกันผ่าน API (Application Programming Interface) แล้วเจ้าตัว API หน้าตายังไง ลองกดเข้าลิงก์นี้
https://ziptasticapi.com/95201
เป็นข้อมูล Country, State, City ของ United States of America โดยเลข 95201 ก็คือรหัสไปรษณีย์ โดยตัว URL นี้จะ Return data กลับมาให้ฝั่งผู้ใช้แบบ JSON ซึ่งเจ้าตัว API เนี่ยเราต้องไปเขียนแยกอีก Project หรือแยกอีกภาษาเลยซึ่งเรียกว่า Back-end แล้วเจ้า Back-end นี้เราสามารถเลือกใช้ภาษาอะไรก็ได้เช่น Golang, Nodejs, PHP, Ruby, ASP แต่ตอนคืนข้อมูลก็คืนเป็น JSON เพื่อให้ View ของเรานำข้อมูลไปใช้งาน
ดึงข้อมูล API ใน Vue, React ยังไง
เราสามารถใช้วิธีการที่เรียกว่า AJAX (Asynchronous JavaScript And XML) เพื่อเรียกข้อมูลจาก API ได้โดยการ Ajax เราสามารถใช้ Web API ที่ชื่อว่า fetch หรือจะใช้ library สุดฮิตอย่าง Axios ก็ได้ในการเรียกข้อมูลจาก API เรามาดูตัวอย่างคร่าวๆของการเขียน AJAX เพื่อเรียก API กัน
การใช้งาน Fetch
// https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
const response = await fetch('http://example.com/movies.json');
const myJson = await response.json();
console.log(JSON.stringify(myJson));การใช้งาน Axios
// https://github.com/axios/axios
const axios = require('axios');
// Make a request for a user with a given ID
axios.get('/user?ID=12345')
.then(function (response) {
// handle success
console.log(response);
})
.catch(function (error) {
// handle error
console.log(error);
})การ Authentication
แน่นอนว่าการดึงข้อมูล API แบบขวานผ่าซากก็ดูจะไม่มี Security เลยเพราะถ้ามีคนรู้ API URL ของเรา(รู้แน่ๆ :>) เค้าก็ได้ข้อมูลเหมือนกับเราเพราะฉะนั้นเราก็ต้องป้องกันด้วยการทำ Authentication ซึ่งมีหลายแบบด้วยกันไม่ว่าจะเป็น JWT (JSON Web Token), Token-based, OAuth และอื่นๆอีกมากมาย ตามความเหมาะสมของงานซึ่งตัวฮิตๆก็ JWT ใช้กันทั่วบ้านทั่วเมืองเลยละ
สุดท้ายนี้ หวังว่าเพื่อนๆจะเห็นภาพรวมของการทำ SPA มากขึ้นนะครับ เพราะแค่ SPA ตัวเดียวเราต้องเรียนรู้ทั้งหมดที่ได้กล่าวไปเพื่อให้ได้ Application 1 ตัวแค่คิดก็ปวดหัวแล้ว เพราะฉะนั้นเลือกเครื่องมือให้ถูกกับลักษณะงานที่จะทำกันนะครับ ^^
