การสร้างตารางแสดงข้อมูลจาก API ด้วย Svelte 3

แนะนำเนื้อหาในบทความ

จากบทความ ทดลองใช้งาน Angular, React, Vue และ Svelte ในการสร้างตารางแสดงข้อมูลที่ได้รับจาก API บทความนี้จะลงรายละเอียดในส่วนของ Svelte 3 ครับ

ริ่มติดตั้งและสร้างโปรเจ็ค

ทำการสร้าง app ชื่อว่า my-table โดยใช้คำสั่งด้านล่างนี้

npx degit sveltejs/template my-table

เมื่อสร้างเรียบร้อยแล้ว เข้าไปยัง Folder ของ app และจากนั้นใช้คำสั่งเพื่อติดตั้ง node_modules

cd my-table
npm install

เมื่อติดตั้งเรียบร้อยให้ใช้คำสั่ง

npm run dev

จากนั้น ให้เปิด Browser โดยใช้ URL: http://localhost:5000/ เพื่อแสดงหน้าจอเริ่มต้น

สร้างหน้าจอที่จะแสดงผลตาราง

ภายใต้ Folder: src ให้ทำการสร้างไฟล์ Table.svelte ซึ่ง Folder Structure ของ Svelte ในตัวอย่างนี้ จะเป็นดังภาพด้านล่างนี้

เพิ่มโค้ดพื้นฐานของหน้าจอ Table ในไฟล์ Table.svelte ตามโค้ดด้านล่างนี้

การแสดงผลหน้าจอ Table ให้แก้ไขไฟล์ main.js ดังโค้ดด้านล่างนี้

โดยจุดที่เปลี่ยนแปลงจากโค้ดเดิม คือ บรรทัดที่ 1 ซึ่งทำการอ้างถึงหน้าจอ Table ส่วนในบรรทัดที่ 3 เป็นการสร้างหน้าจอ Table ให้กับ app

ถึงจุดนี้เมื่อเราทำการแก้ไขไฟล์และ Save หน้าจอที่ปรากฏบน Browser จะเกิดการ Refresh อัตโนมัติ หรือเรียกว่า Live Reload และแสดงผลลัพธ์หน้าจอ Component Table ซึ่งตอนนี้จะไม่มีอะไรนอกจากข้อความ Table

เรียกใช้ข้อมูลจาก API

ให้เพิ่มโค้ดที่ไฟล์ Table.svelte ตามโค้ดด้านล่างนี้

บรรทัดที่ 2–12 จะเป็นการ fetch ข้อมูลจาก API ส่วนบรรทัดที่ 13 เป็นการเรียกใช้ function getPeople()

ซึ่งเมื่อถึงขั้นตอนนี้หากตรวจสอบที่ Browser ในส่วนของ console ซึ่งเป็นผลมาจากโค้ดในบรรทัดที่ 7 จะพบว่ามีข้อมูลมาพร้อมให้แสดงแล้ว

จากนั้นให้แก้ไขไฟล์ Table.svelte เพิ่มเติม เพื่อนำข้อมูลใส่ไปในตารางเพื่อแสดงผล โดยใช้โค้ดด้านล่างนี้

ซึ่งเมื่อถึงจุดนี้จะได้ตารางหน้าตาปกติ ดังภาพ

การใช้งานร่วมกับ Bootstrap Framework

เพิ่มโค้ดเพื่ออ้างถึงไฟล์ css ของ bootstrap ที่ไฟล์ index.html ซึ่งอยู่ภายใต้ Folder:public ได้เลย ดังโค้ดในบรรทัดที่ 12–17 ด้านล่างนี้

ถึงจุดนี้ตารางจะแสดงผลตามรูปแบบของ Bootstrap Framework แล้ว ดังภาพ

การ Build สำหรับ Production

ในไฟล์ index.html จากโค้ดด้านบน ต้องทำการแก้ไข path เพื่อให้สามารถเรียกใช้งานไฟล์ที่เกี่ยวข้องได้อย่างถูกต้อง โดยต้องลบ / ในบรรทัดที่ 9-11 และ 19 ออก ดังโค้ดด้านล่างนี้

จากนั้นใช้คำสั่งด้านล่างนี้ เพื่อทำการ Build

npm run build

ระบบจะทำการสร้าง Folder: build พร้อมไฟล์ต่างๆ ให้ แต่เราต้อง Upload Files จาก Folder: public ซึ่งจะมี Folder: build อยู่ด้วย ไปยัง Hosting

โค้ดทั้งหมดของบทความนี้อยู่ที่ https://github.com/wutthiponghub/table-svelte