มา dev Vue.js แบบหรอยๆ ฉบับเตาะแตะ Ep1

โลกแห่ง web dev มันกว้างใหญ่ กว่าจะหากระบี่คู่ใจสักเล่มมันเหนื่อย ถ้าใจมันได้ไม้ไผ่ก็อาวุธได้ อันที่จริงผมเองก็หัดเล่นของพวกนี้อยู่บ้างเลยบันทึกไว้ กันลืม เพราะสร้าง project ทีไรก็ลืมทุกที เนื้อหาจะประกอบด้วย Docker + Yarn + Vue.js + Vuetify.js + FastAPI ลองดูกันสักตั้ง

Docker

ใครไม่รู้จัก Docker ไปหาอ่านนะคนอื่นเขียนไว้เยอะ แต่ถ้าอยากงงก็อ่านของผมก็ได้ บน Windows ผมไม่เคยลองสักทีอาจจะช่วยเหลือได้ไม่มากถ้าใครมีปัญหา

หลายคนสงสัยว่าชวนใช้ docker ทำไม จริงๆ สามารถทำบนเครื่องได้นะแหละแต่หลายคนแค่อยากลอง หรือ ไม่อยากให้ชุดนี้ไปลงในระบบโดยไม่รู้ว่ามันไปอยู่ที่ไหน การใช้ docker เมื่อทำเละ หรือ เบื่อแล้วก็ลบทิ้งได้ง่ายๆ โดยใช้คำสั่ง docker ลบทั้ง container และ image

EP1 Docker ทีเล่น ทีจริง

EP2 Docker ทีเล่น ทีจริง

EP3 Docker ทีเล่น ทีจริง

EP4 Docker ทีเล่น ทีจริง

Docker Compose

ผมเตรียมชุด service ของ docker ที่ใช้สำหรับ dev (ย้ำว่าสำหรับ dev) ไว้เป็น docker-compose file ซึ่งจะประกอบด้วย

vuejs

nodejs สำหรับใช้จัดการ project ผมตั้งชื่อ service ว่า vuejs จะทำการติดตั้ง vue-cli ไว้ ถ้ามีการ down service นี้ก็ต้องติดตั้งใหม่ซึ่งก็ไม่ได้ยุ่งยากอะไร

api

เป็น service ที่ใช้ python ผมยกตัวอย่างเป็น fastAPI รายละเอียดศึกษากันได้ที่

https://fastapi.tiangolo.com

เริ่มกันเลย!!

git clone https://github.com/mrchoke/vuejs_fastapi

เข้าไปใน directory ที่ clone มาแล้วทำการ up service

cd vuejs_fastapi/ep1
docker-compose up -d

ตรวจสอบว่าแต่ละ service run ได้สมบูรณ์หรือไม่ โดยใช้คำสั่ง

docker-compose ps

ดู log

docker-compose logs -f 
ถ้ากรณีใช้ไปนานๆแล้ว log มันเยอะ อาจจะ limit output สัก 50 บรรทัดต่อ service ไม่ต้องรอนาน
docker-compose logs -f --tail 50

docker-compose.yml

เล่นกับ Vue.js

บางท่านอาจจะเคยเล่นกันมาบ้างวันนี้เปลี่ยนรสชาติมาเล่นบน docker กัน ก่อนที่จะใช้คำสั่ง vue ได้เราต้องแน่ใจก่อนว่า docker-compose ได้ run service vuejs เสร็จหรือยังโดยให้สังเกต log ของ service vuejs

ติดตั้ง vue cli 3เสร็จแล้ว

เมื่อติดตั้งเสร็จแล้วลองเช็คโดยใช้คำสั่ง

docker-compose exec vuejs vue --version
ถ้ามี version แสดงก็เป็นอันเรียบร้อย

Vue UI

ครั้งนี้เอาแบบง่ายๆ ดีกว่าเนอะ ผมจะพาใช้ Vue UI กัน ซึ่งใน docker-compose file ผมได้เปิด port ไว้ 2 port คือ

• 8111:8080 → สำหรับ vuejs
• 8112:8000 → สำหรับ vue ui

ท่านสามารถเปลี่ยนเป็น port อื่นได้ตามใจชอบนะครับไม่ต้องอึดอัดทำตัวตามสบาย :P

ให้ start vue ui โดยใช้คำสั่ง

docker-compose exec vuejs vue ui --host 0.0.0.0

กรณีนี้ต้องระบุ host เป็น 0.0.0.0 ด้วยเพราะรันอยู่ใน container เมื่อ run เสร็จแล้วก็ให้เปิด browser แล้วเปิด

http://localhost:8112

จะได้ดังรูป

Vue UI

สร้าง project

ใน docker-compose ผมระบุ work directory ไว้ ที่ /project ซึ่งได้ mount เข้าไปตั้งแต่ต้น

Click ที่ tab สร้าง

click ที่ปุ่มด้านล่างเพื่อสร้าง project

สร้าง project ชื่อ ui

ผมสร้าง project ชื่อว่า ui โดยใช้ yarn เป็นตัวจัดการ ให้ click ปุ่ม ต่อไป

ตรงนี้ถ้าใครอยากจบก็เลือกตัวเลือกแรก แต่ถ้าอยากเปิดหูเปิดตาก็เลือกตัวเลือกที่สอง แล้ว click ต่อไป

เลือก option ต่างๆ เพื่อใช้กับ project ส่วนตัวที่ผมใช้ประจำก็จะมี

• babel → ใช้ JSใหม่ๆ ได้
• Router → สร้าง Router หลายๆ หน้า
• Vuex → เก็บ state ใช้ร่วมกันระหว่าง components
• CSS Pre-Processors → ตั้งค่า fonts หรือ อื่นๆ ได้
• Linter/Formatter → จัดการ format ของ JS ตามที่เราถนัด
• ใช้ไฟล์การตั้งค่า → แยกการตั้งค่าต่างๆ ออกมาจาก package.json

ตั้งค่าเพิ่มเติม

ถ้าเรามีการเลือก option ที่ต้องตั้งค่าเพิ่มก็จะตั้งในหน้านี้

• ถ้าเลือก Router ก็จะถามว่าจะใช้ history mode หรือเปล่า ถ้าเราไม่ใช้ history mode path ด้านหลังก็จะมี /#/ คั่น ถ้าเป็น history mode ก็จะใช้แบบปกติ
• ถ้าเลือก CSS pre-processor ก็จะถามว่าจะใช้ตัวไหน ผมใช้ Sass/SCSS node-sass เดี๋ยวจะใช้ตอนเปลี่ยนค่า font
• linter / formatter ปกติผมใช้ ESlint กับ Prettier ไม่ค่อยชำนาญนักงงทุกที

จะ save ไว้ไหม คราวหน้าไม่ต้องเลือกแบบนี้อีก

กำลังติดตั้งรอสักพักใหญ่ๆ

ซึ่งด้านบนนั้นสามารถสั่งด้วย command line ได้ดังนี้

docker-compose exec vuejs vue create ui

เมื่อ setup project เสร็จแล้วก็จะปรากฎหน้า Dashboard ขึ้นมา

Dashboard

โดยแถบด้านซ้ายจะมี icons หมวดต่างๆสำหรับปรับแต่งและควบคุม project

Plugins ติดตั้งถอดถอนที่นี่

Packages ต่างๆ จัดการที่นี่

Config Vuejs และ ESLint จัดการตรงนี้ได้เลย

ESLint แนะนำให้เลือก แนะนำ (recommended)

หน้าจัดการ task

Start Vue.js มาดูหน่อย

ให้ไปยัง tab สุดท้ายหรือหน้าจัดการ task นะครับแล้วเลือก serve แล้ว click ปุ่ม

เริ่มการทำงาน

run task

นอกจากหน้า dashboard ของ task ลอง click ที่ เอาท์พุต ก็จะเห็นว่าทำงานเสร็จหรือมีอะไรผิดพลาดหรือเปล่า

การ run task สามารถใช้คำสั่ง command line ได้ดังนี้

docker-compose exec -w /project/ui  vuejs yarn serve

ลองเปิดหน้าเว็บดูว่า Vue.js ทำงานจริงหรือไม่

http://localhost:8111

ติดตั้ง Vuetify.js

อันนี้ความชอบส่วนตัวสำหรับ framework ที่มาเขียน UI ผมใช้ Vuetify.js ซึ่งจะมี components ให้ใช้อย่างครบครันแบบฉบับของ Material Design ใครสนใจศึกษาเพิ่มเติมได้ที่

Vue Material Design Component Framework - Vuetify.js

การติดตั้ง Vuetify.js ให้ท่าน click ที่ icon plugin หรือ icon ที่สองด้านซ้ายมือ แล้ว พิมพ์ vuetify ในช่องค้นหา แล้ว click icon ด้านขวา ของ ชื่อ vue-cli-plugin-vuetifyเพื่อเพิ่มโดย icon ด้านหน้าชื่อจะเปลี่ยนเป็นเครื่องหมายถูกดูรูป

ค้นหาและเลิอก vuetify plugin

หลังจากนั้นก็ Click ปุ่มติดตั้ง ด้านล่างขวา

รอติดตั้งสักครู่

ตั้งค่า plugin

การตั้งค่า plugin ถ้าไม่อยากคิดมากก็เลือกเป็นค่าปกติก็ได้ แต่ในรูปด้านบนผมเลือกแบบ advanced เพื่อให้เห็นว่าเราสามารถเลืือกค่าอะไรได้บ้าง เมื่อปรับแต่งตามต้องการแล้วก็ click ปุ่ม สำเร็จการติดตั้ง

รอสักครู่สำหรับการติดตั้ง

Vue Cli จะถามว่าจะ commit การเปลี่ยนแปลงหรือเปล่า

โดยปกติแล้วการใช้ Vue Cli จะสร้าง git โดยอัตโนมัติ ดังนั้นบางครั้ง Vue UI จะถามว่า Commit เลยไหม ถ้ายังไม่พร้อมก็ค่อยคราวหลังก็ได้

ติดตั้งสำเร็จจะมีรายชื่อ plugin เพิ่ม

ตอนนี้ถ้าสลับไปดูที่หน้าเว็บจะพบว่ามีข้อความ error อยู่ไม่ต้องตกใจให้ทำการ stop แล้ว run task serve ใหม่

run task serve ใหม่

คราวนี้จะมีข้อความ warnings เยอะแยะไปหมดก็ไม่ต้องตกใจลอง reload หรือเว็บใหม่ซึ่งหน้าตาจะเปลี่ยนเป็นของ Vuetify.js แล้ว

Vuetify.js

command line สำหรับติดตั้ง Vuetify.js ด้านบนสามารถสั่งด้วย

docker-compose exec -w /project/ui  vuejs vue add vuetify

ตรงนี้ต้องระบุ workdir เป็น path ของ project vue ที่สร้างขึ้นนั้นคือ /project/ui แล้วสั่ง add vuetify นั่นเอง

lint

สำหรับการจัดการเรื่อง warning ตะกี้เราสามารถใช้ task lint จัดการได้ โดยการ click ไปยังตัวจัดการ task แล้วทำการ run task lint

lint fixed warning

ถ้าไม่เหลือบ่ากว่าแรง lint มักจะจัดการได้ซึ่งจะจัดการให้เป็นไปตามกฎถ้ามีแรงจะแนะนำที่ผมใช้อยู่เบื้องต้นให้ ส่วน command line สำหรับ lint ด้านบนสามารถสั่งได้ดังนี้

docker-compose exec -w /project/ui  vuejs yarn lint

ลองแก้ Code กัน

วิธีนี้จะมีปัญหาเรื่อง permission ของ file ที่ถูกสร้างภายใน container ซึ่งจะเป็นสิทธิ root ดังนั้นเวลาเราจะแก้ไขก็จะไม่ได้ต้องเปลี่ยนสิทธิให้เป็น user ของเราก่อน โดยใช้คำสั่ง

sudo chown -R $UID:$GID project/ui

เมื่อสั่งเสร็จแล้วหลังจากนี้เราก็สามารถใช้ Editor ที่เรารักเข้าไปปู้ยี่ปู้ยำ Code ได้ละ ผมใช้ VSCodium เปิดไปยัง directory project/ui

โครงสร้างของ Vue.js

โครงสร้าง

เบื้องต้นผมคงยังไม่ลงลึกนะครับ แนะนำโครงสร้างคร่าวๆ พอเป็นแนวทางไปศึกษากันต่อ

• public → จะเก็บพวก file static ที่ไม่ค่อยมีการเปลี่ยนแปลงเช่นพวก favicon ที่สำคัญ file index.html จะเก็บในนี้จะแก้ไข title หรือ จะใส่ค่า metadata อะไรเพิ่มก็แก้ที่นี่
• node_modules → เป็นที่เก็บพวก module ต่างๆ ที่สั่งด้วย yarn หรือ npm จะมีขนาดใหญ่หน่อยซึ่งจะใช้ระหว่างการ dev เท่านั้น production ไม่ได้เอาไปด้วย
• package.json → เป็น metadata file ของ project เก็บรายการ package ต่างๆ และ task ไว้
• .eslintrc.js → เป็น config ของ
• vue.config.js → เป็น config ของ Vue.js รวมไปถึง webpack ด้วย
• dist → จะเก็บ static file ของ production
• src → เราจะเขียน code กันที่นี่โดยข้างในจะแบ่งย่อยไปอีกตามหน้าที่เช่น

1. assets → เก็บพวก static file ที่มีการเปลี่ยนแปลงได้เช่น รูปภาพ
2. components → เก็บ vue components ที่เขียนขึ้นอาจจะมีนามสกุล vue หรือ js แต่ส่วนใหญ่ใช้ vue เข่น components ที่เรียกใช้บ่อยๆ พวกปุ่ม กราฟ เป็นต้น
3. plugins → เก็บ plugins ที่ติดตั้งด้วยคำสั่ง vue add เช่น vuetify และ axios
4. views → เก็บหน้าต่างๆ ที่เขียนขึ้นมีนามสกุล vue หรือ js เช่น Home.vue Abount.vue เป็นต้น
5. App.vue → เป็น template หลักของ Project ก็ว่าได้โครงหน้าจะวางไว้ที่นี่
6. main.js → เป็น file เริ่มต้นหลักของ Vue.js ค่าต่างๆ จะเริ่มต้นที่นี่
7. router.js → เราจะประกาศ router กันที่นี่
8. store.js → เป็น Vuex นั่นเองซึ่งเราจะประกาศ state ที่นี่ถ้าจะเขียนแบบแยกย่อยก็แนะนำสร้างเป็น directory แยกก็ได้ อาจจะเป็น store/index.js เป็นต้น

เริ่มยำกันดู

การเรียนรู้ที่ดีที่สุดก็คือการทดลองทำครับ เรามาลองกันเลยง่ายสุดก็เริ่มจากการแก้ไข view เป้าหมายคือเปลี่ยนหน้าแรกให้เป็นข้อความของเขาเสีย

src/views/Home.vue

ของเดิม

เดิมที่ file ตัวอย่างนั้นจะเรียก component HelloWorld มาแสดงผลอีกทีเดียวเราจะเริ่มกันใหม่เลย แสดงผล “สวัสดีครับ” ตัวใหญ่ๆ เลย

แก้ Home.vue

ผลลัพธ์

ลองเปลี่ยนตรง toolbar ด้านบนดูครับ ซึ่งจะอยู่ใน App.vue คือ template หลักนั่นเอง

App.vue หลังแก้ไข

ผลลัพธ์

ผมลองแก้ toolbar โดยเปลี่ยนชื่อ Title และ ใส่ link และ เปลี่ยนปุ่มด้านขวาให้ click ไปยัง /about จากผลลัพธ์จะเห็นว่าตรง Title จะมีขีดเส้นใต้และ ตัวหนังสือสีฟ้า แต่จริงๆ มันควรเป็นตามที่เราตั้งไว้ใน Class งั้นเรามาเพิ่ม CSS ให้สักหน่อยโดยการเพิ่ม block style ด้านล่างดังรูป

กำหนด class

เพิ่ม class ให้ router-link

ผลลัพธ์

จากตัวอย่างการแก้ด้านบนนั้น จะสังเกตโครงสร้างพื้นฐานของ component vue ได้ว่ามีหลักๆ 3 block คือ

1. template → จะบรรจุ HTML หรือ component ย่อย และ คำสั่งควบคุมต่างๆ ของ Vue Template
2. script → เป็นชุดคำสั่ง Java Script นั่นเองซึ่งจะประกอบไปด้วยส่วนต่างๆ เช่น Life Cycle Hook ซึ่งมีส่วนต่างๆ ที่ต้องเจอบ่อยๆ เช่น created, mounted , destroyed เป็นต้น และ อีกอย่างที่ขาดไม่ได้คือ Options เช่น data, methods, computed, watch เป็นต้น
3. style → เป็นส่วนควบคุม CSS อาจจะเขียนด้วย SASS/LESS หรืออื่นๆ ที่ support ก็ได้

หน้าตัวอย่าง

มาสร้างหน้าตัวอย่างอีกสักหน้าเพื่อความเข้าใจ

1. สร้าง view Sample.vue
2. Add router /sameple
3. เพิ่ม link บน toolbar

src/views/Sample.vue

จากภาพด้านบนผมยกตัวอย่างโครงสร้างพื้นฐานที่ใข้บ่อยๆ ใน vue component เพื่อให้จิตนการออกและนำไปใช้ได้

เพิ่ม router /sample

เมื่อสร้าง vue component เสร็จก็ต้อง regist ใน router จากตัวอย่างที่ vue สร้างไว้ให้จะเห็นการเรียก router สองแบบคือแบบปกติ คือ home และแบบที่ 2 คือ /about ที่ต่างกันเห็นได้ชัดคือแบบแรกจะถูกดึงไปรวมกับก้อนหลักคือ app.js ตอน production ส่วนแบบหลังจะแยกออกมาจะเรียกตอน click เท่านั้น ดังนั้นตอนออกแบบก็ดูให้ดี ว่าหน้าไหนใช้บ่อย หน้าไหนไม่ค่อยได้ใช้ หรือมีขนาดใหญ่ก็แยกออกมาก็ได้

เพิ่มปุ่ม link บน toolbar

ปกติถ้าใส่ใน router เรียบร้อยแล้วเราสามารถเรียกใช้งานได้เลย แต่ถ้าทำให้ผู้ใช้ click ก็ต้องหาที่วาง link

ผลลัพธ์

ผลลัพธ์ที่ได้เป็นหน้าที่เราออกแบบไว้คือมี การแสดงผลจากสองตัวแปร และ มีการแสดงออกทาง console.log ด้วย ซึ่งจะทำตอน component ถูก mount เรียบร้อยแล้ว โดยการเรียก method ชื่อ ว่า debug ให้สังเกตว่าในส่วนของ script เวลาเรียก data หรือ method จะใช้ this ได้เลย แต่ใน template ไม่ต้องใช้ this

API

มาแนะนำหลังบ้านสักนิดซึ่งไม่ได้ยากมาก (ถ้าไม่ลงลึก ฮา) เพื่อปูพื้นไปสู่อนาคตเผื่อได้เป็น full stack กับเข้าบ้าง ในที่นี่ผมจะแนะนำ fastAPI ซึ่งใช้ python 3.6 ขึ้นไป

ใน docker-compose file จะมี service นี้มาให้แล้วโดย bind port 8113 ลองเรียกจาก browser

 http://localhost:8113

ตัวอย่าง enpoint / ของ api

มาเริ่ม API แรกกัน

ลองมาแก้ไขโดยเพิ่ม enpoint ใหม่เข้าไปชื่อว่า /info โดยจะส่งค่า title1 และ title2

/info

ผลลัพธ์

หรือจะลองทดสอบด้วย swagger ของ fastAPI โดยเรียกไปยัง

http://localhost:8113/docs

Swagger UI

Swagger UI สามารถทดสอบ API ที่เราเขียนขึ้นมาว่าเป็นไปตามที่เราออกแบบไว้หรือไม่

ตัวอย่างการทดสอบ API

เชื่อมต่อ UI กับ API

medium เตือนว่าความยาวเกินดังนั้นต้องยกไปเขียนอีกตอนนะครับ….

มา dev Vue.js แบบหรอยๆ ฉบับเตาะแตะ Ep2