โลกแห่ง web dev มันกว้างใหญ่ กว่าจะหากระบี่คู่ใจสักเล่มมันเหนื่อย ถ้าใจมันได้ไม้ไผ่ก็อาวุธได้ อันที่จริงผมเองก็หัดเล่นของพวกนี้อยู่บ้างเลยบันทึกไว้ กันลืม เพราะสร้าง project ทีไรก็ลืมทุกที เนื้อหาจะประกอบด้วย Docker + Yarn + Vue.js + Vuetify.js + FastAPI ลองดูกันสักตั้ง
Docker
ใครไม่รู้จัก Docker ไปหาอ่านนะคนอื่นเขียนไว้เยอะ แต่ถ้าอยากงงก็อ่านของผมก็ได้ บน Windows ผมไม่เคยลองสักทีอาจจะช่วยเหลือได้ไม่มากถ้าใครมีปัญหา
หลายคนสงสัยว่าชวนใช้ docker ทำไม จริงๆ สามารถทำบนเครื่องได้นะแหละแต่หลายคนแค่อยากลอง หรือ ไม่อยากให้ชุดนี้ไปลงในระบบโดยไม่รู้ว่ามันไปอยู่ที่ไหน การใช้ docker เมื่อทำเละ หรือ เบื่อแล้วก็ลบทิ้งได้ง่ายๆ โดยใช้คำสั่ง docker ลบทั้ง container และ image
Docker Compose
ผมเตรียมชุด service ของ docker ที่ใช้สำหรับ dev (ย้ำว่าสำหรับ dev) ไว้เป็น docker-compose file ซึ่งจะประกอบด้วย
vuejs
nodejs สำหรับใช้จัดการ project ผมตั้งชื่อ service ว่า vuejs จะทำการติดตั้ง vue-cli ไว้ ถ้ามีการ down service นี้ก็ต้องติดตั้งใหม่ซึ่งก็ไม่ได้ยุ่งยากอะไร
api
เป็น service ที่ใช้ python ผมยกตัวอย่างเป็น fastAPI รายละเอียดศึกษากันได้ที่
เริ่มกันเลย!!
git clone [https://github.com/mrchoke/vuejs\_fastapi](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
เล่นกับ Vue.js
บางท่านอาจจะเคยเล่นกันมาบ้างวันนี้เปลี่ยนรสชาติมาเล่นบน docker กัน ก่อนที่จะใช้คำสั่ง vue ได้เราต้องแน่ใจก่อนว่า docker-compose ได้ run service vuejs เสร็จหรือยังโดยให้สังเกต log ของ service vuejs
เมื่อติดตั้งเสร็จแล้วลองเช็คโดยใช้คำสั่ง
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
จะได้ดังรูป
สร้าง project
ใน docker-compose ผมระบุ work directory ไว้ ที่ /project ซึ่งได้ mount เข้าไปตั้งแต่ต้น
click ที่ปุ่มด้านล่างเพื่อสร้าง project
ผมสร้าง 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 ไม่ค่อยชำนาญนักงงทุกที
ซึ่งด้านบนนั้นสามารถสั่งด้วย command line ได้ดังนี้
docker-compose exec vuejs vue create ui
เมื่อ setup project เสร็จแล้วก็จะปรากฎหน้า Dashboard ขึ้นมา
โดยแถบด้านซ้ายจะมี icons หมวดต่างๆสำหรับปรับแต่งและควบคุม project
Start Vue.js มาดูหน่อย
ให้ไปยัง tab สุดท้ายหรือหน้าจัดการ task นะครับแล้วเลือก serve แล้ว click ปุ่ม
เริ่มการทำงาน
นอกจากหน้า dashboard ของ task ลอง click ที่ เอาท์พุต ก็จะเห็นว่าทำงานเสร็จหรือมีอะไรผิดพลาดหรือเปล่า
การ run task สามารถใช้คำสั่ง command line ได้ดังนี้
docker-compose exec -w /project/ui vuejs yarn serve
ลองเปิดหน้าเว็บดูว่า Vue.js ทำงานจริงหรือไม่
ติดตั้ง 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 ด้านหน้าชื่อจะเปลี่ยนเป็นเครื่องหมายถูกดูรูป
หลังจากนั้นก็ Click ปุ่มติดตั้ง ด้านล่างขวา
การตั้งค่า plugin ถ้าไม่อยากคิดมากก็เลือกเป็นค่าปกติก็ได้ แต่ในรูปด้านบนผมเลือกแบบ advanced เพื่อให้เห็นว่าเราสามารถเลืือกค่าอะไรได้บ้าง เมื่อปรับแต่งตามต้องการแล้วก็ click ปุ่ม สำเร็จการติดตั้ง
โดยปกติแล้วการใช้ Vue Cli จะสร้าง git โดยอัตโนมัติ ดังนั้นบางครั้ง Vue UI จะถามว่า Commit เลยไหม ถ้ายังไม่พร้อมก็ค่อยคราวหลังก็ได้
ตอนนี้ถ้าสลับไปดูที่หน้าเว็บจะพบว่ามีข้อความ error อยู่ไม่ต้องตกใจให้ทำการ stop แล้ว run task serve ใหม่
คราวนี้จะมีข้อความ warnings เยอะแยะไปหมดก็ไม่ต้องตกใจลอง reload หรือเว็บใหม่ซึ่งหน้าตาจะเปลี่ยนเป็นของ 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 มักจะจัดการได้ซึ่งจะจัดการให้เป็นไปตามกฎถ้ามีแรงจะแนะนำที่ผมใช้อยู่เบื้องต้นให้ ส่วน 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
โครงสร้าง
เบื้องต้นผมคงยังไม่ลงลึกนะครับ แนะนำโครงสร้างคร่าวๆ พอเป็นแนวทางไปศึกษากันต่อ
- 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 กันที่นี่โดยข้างในจะแบ่งย่อยไปอีกตามหน้าที่เช่น
- assets → เก็บพวก static file ที่มีการเปลี่ยนแปลงได้เช่น รูปภาพ
- components → เก็บ vue components ที่เขียนขึ้นอาจจะมีนามสกุล vue หรือ js แต่ส่วนใหญ่ใช้ vue เข่น components ที่เรียกใช้บ่อยๆ พวกปุ่ม กราฟ เป็นต้น
- plugins → เก็บ plugins ที่ติดตั้งด้วยคำสั่ง vue add เช่น vuetify และ axios
- views → เก็บหน้าต่างๆ ที่เขียนขึ้นมีนามสกุล vue หรือ js เช่น Home.vue Abount.vue เป็นต้น
- App.vue → เป็น template หลักของ Project ก็ว่าได้โครงหน้าจะวางไว้ที่นี่
- main.js → เป็น file เริ่มต้นหลักของ Vue.js ค่าต่างๆ จะเริ่มต้นที่นี่
- router.js → เราจะประกาศ router กันที่นี่
- store.js → เป็น Vuex นั่นเองซึ่งเราจะประกาศ state ที่นี่ถ้าจะเขียนแบบแยกย่อยก็แนะนำสร้างเป็น directory แยกก็ได้ อาจจะเป็น store/index.js เป็นต้น
เริ่มยำกันดู
การเรียนรู้ที่ดีที่สุดก็คือการทดลองทำครับ เรามาลองกันเลยง่ายสุดก็เริ่มจากการแก้ไข view เป้าหมายคือเปลี่ยนหน้าแรกให้เป็นข้อความของเขาเสีย
src/views/Home.vue
เดิมที่ file ตัวอย่างนั้นจะเรียก component HelloWorld มาแสดงผลอีกทีเดียวเราจะเริ่มกันใหม่เลย แสดงผล “สวัสดีครับ” ตัวใหญ่ๆ เลย
ลองเปลี่ยนตรง toolbar ด้านบนดูครับ ซึ่งจะอยู่ใน App.vue คือ template หลักนั่นเอง
ผมลองแก้ toolbar โดยเปลี่ยนชื่อ Title และ ใส่ link และ เปลี่ยนปุ่มด้านขวาให้ click ไปยัง /about จากผลลัพธ์จะเห็นว่าตรง Title จะมีขีดเส้นใต้และ ตัวหนังสือสีฟ้า แต่จริงๆ มันควรเป็นตามที่เราตั้งไว้ใน Class งั้นเรามาเพิ่ม CSS ให้สักหน่อยโดยการเพิ่ม block style ด้านล่างดังรูป
จากตัวอย่างการแก้ด้านบนนั้น จะสังเกตโครงสร้างพื้นฐานของ component vue ได้ว่ามีหลักๆ 3 block คือ
- template → จะบรรจุ HTML หรือ component ย่อย และ คำสั่งควบคุมต่างๆ ของ Vue Template
- script → เป็นชุดคำสั่ง Java Script นั่นเองซึ่งจะประกอบไปด้วยส่วนต่างๆ เช่น Life Cycle Hook ซึ่งมีส่วนต่างๆ ที่ต้องเจอบ่อยๆ เช่น created, mounted , destroyed เป็นต้น และ อีกอย่างที่ขาดไม่ได้คือ Options เช่น data, methods, computed, watch เป็นต้น
- style → เป็นส่วนควบคุม CSS อาจจะเขียนด้วย SASS/LESS หรืออื่นๆ ที่ support ก็ได้
หน้าตัวอย่าง
มาสร้างหน้าตัวอย่างอีกสักหน้าเพื่อความเข้าใจ
- สร้าง view Sample.vue
- Add router /sameple
- เพิ่ม link บน toolbar
จากภาพด้านบนผมยกตัวอย่างโครงสร้างพื้นฐานที่ใข้บ่อยๆ ใน vue component เพื่อให้จิตนการออกและนำไปใช้ได้
เมื่อสร้าง vue component เสร็จก็ต้อง regist ใน router จากตัวอย่างที่ vue สร้างไว้ให้จะเห็นการเรียก router สองแบบคือแบบปกติ คือ home และแบบที่ 2 คือ /about ที่ต่างกันเห็นได้ชัดคือแบบแรกจะถูกดึงไปรวมกับก้อนหลักคือ app.js ตอน production ส่วนแบบหลังจะแยกออกมาจะเรียกตอน click เท่านั้น ดังนั้นตอนออกแบบก็ดูให้ดี ว่าหน้าไหนใช้บ่อย หน้าไหนไม่ค่อยได้ใช้ หรือมีขนาดใหญ่ก็แยกออกมาก็ได้
ปกติถ้าใส่ใน 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
มาเริ่ม API แรกกัน
ลองมาแก้ไขโดยเพิ่ม enpoint ใหม่เข้าไปชื่อว่า /info โดยจะส่งค่า title1 และ title2
หรือจะลองทดสอบด้วย swagger ของ fastAPI โดยเรียกไปยัง
http://localhost:8113/docs
Swagger UI สามารถทดสอบ API ที่เราเขียนขึ้นมาว่าเป็นไปตามที่เราออกแบบไว้หรือไม่
เชื่อมต่อ UI กับ API
medium เตือนว่าความยาวเกินดังนั้นต้องยกไปเขียนอีกตอนนะครับ….
มา dev Vue.js แบบหรอยๆ ฉบับเตาะแตะ Ep2
Top comments (0)