พอดีเพิ่งทำระบบ web application แบบเร็ว ๆ ซึ่งมี feature ไม่เยอะ
จึงเลือกใช้เทคโนโลยีที่ไม่ค่อยใช้งานหรือถนัดมากนัก
เพื่อลองฝึกฝน แต่ฝึกบนงานจริง ๆ
น่าจะทำให้เราศึกษาได้รวดเร็วขึ้น หรือไม่ก็ล่มไม่เป็นท่า !!
โดยเทคโนโลยีที่เลือกใช้งานเป็นดังนี้
- Frontend พัฒนาด้วย Angular 6
- Backend พัฒนาด้วยภาษา Go
- จัดการ source code ด้วย Git
- ทำการ build และ deploy ด้วย Docker (ใช้งาน docker-compose)
- ทำการ deploy ระบบงานบน Google Cloud แบบฟรี 300 USD เป็นเวลา 1 ปี
มาดูว่าการพัฒนาเป็นอย่างไรบ้าง ?
เริ่มจากส่วนที่ง่ายที่สุดสำหรับผม แต่ทำสุดท้ายเลยนั่นก็คือ Backend
โดยเลือกใช้งานภาษา Go เนื่องจากเล็กดี ใช้ resource น้อย
เนื่องจากต้องไป deploy บนระบบ Google Cloud
เพื่อลดค่าใช้จ่ายก็ใช้แบบเล็กสุด ๆ ไปเลย
ทำการพัฒนาฝั่ง Backend เป็น RESTful API ประมาณ 5 APIs
ดังนั้นใช้งาน net/http package ก็พอ
ส่วนการจัดการข้อมูลในรูปแบบ JSON ก็ใช้งาน encoding/json package ก็พอ
การเก็บข้อมูลนั้นในตอนแรกว่าจะเก็บลงใน RDBMS หรือ พวก NoSQL
แต่พอดูแนวโน้มของจำนวนข้อมูลกับ feature ต่าง ๆ แล้ว
ถ้าใช้สิ่งที่คิดไว้ คงจะขี่ช้างจับตั๊กแตนมากไป
ดังนั้นจึงเริ่มง่าย ๆ ด้วยการเก็บข้อมูลลงไฟล์ก็พอ
คำถามต่อมา คือ จะเก็บข้อมูลในรูปแบบไหนดี
ยกตัวอย่างเช่น CSV และ JSON เป็นต้น
แต่เมื่อคุยไปคุยมาแล้ว พบว่าต้องมีการจำข้อมูลเหล่านี้ไปใช้งานต่อ
ดังนั้นในมุมมองของคนเท่าไป CSV น่าจะตอบโจทย์มากกว่า
แต่ตอนแรกทำเป็น JSON นะ
เพราะว่ามันง่ายมาก ๆ สำหรับนักพัฒนา แต่ไม่ค่อยสะดวกฝั่งคนใช้งานทั่วไปมากนัก
จึงทำการเปลี่ยนซะเลย ลดงานที่ต้องทำไปเยอะ
การจัดการข้อมูล CSV ทั้งอ่านและเขียนข้อมูลผ่าน encoding/csv package
ส่วนการ monitoring พวก RESTfule API
ก็ไปเพิ่ม Health check ไว้ใน Google Cloud ไป สบายใจ
ในส่วนการ build และ deploy ก็ใช้งาน Docker compose ไป
เนื่องจากง่ายสุด ๆ แล้วไม่ต้องทำอะไรมาก
โดยในการ build image จะทำแบบ Multi-stage build ไป
สุดท้ายได้ image เล็ก ๆ พร้อมต่อการ deploy แล้ว
ลืมไปเลยเรื่องของการทดสอบก็ทำผ่าน net/http/httptest package กับ unit test เล็กน้อย
รวมไปถึงทดสอบด้วย Robotframework นิดหน่อย
ส่วนที่สองคือส่วนที่ยากมาก ๆ สำหรับผม คือ Frontend พัฒนาด้วย Angular 6
เห็นว่าหลาย ๆ คนเลือกใช้งาน Angular 6 กัน
ดังนั้นอยากศึกษาให้มากขึ้นก็เลยเลือกซะเลย
เนื่องจากก่อนหน้านี้ใช้งานแต่ React !!
ดังนั้นจึงเริ่มศึกษาสิ่งต่าง ๆ ที่จำเป็นต่อการพัฒนา
ประกอบไปด้วย
- การสร้าง Angular application ด้วย Angular CLI
- เรียนรู้เรื่องเกี่ยวกับ Module, Routing, Component, Service และ Class ต่าง ๆ
- การติดต่อไปยัง RESTful API ด้วย http package ซึ่งเป็น common library ของ Angular
- เรื่องของการทดสอบ ซึ่งจากการสร้างส่วนต่าง ๆ ด้วย Angular CLI มันจะสร้างชุดการทดสอบมาให้ด้วยเสมอ ดังนั้นเขียนซะ
เมื่อศึกษาทุกอย่างเรียบร้อยผ่านไปเร็วมาก ๆ ประมาณ 1 วัน
ถามว่าเขียนได้เลยไหม ตอบเลยว่าไม่ !!
แต่ก็พอทำให้เข้าใจภาพรวม
และน่าจะพอเริ่มทำงานได้
แต่ …
ส่วนงานที่ต้องทำก่อนเลยก็คือ User Interface ที่ดูดี ใช้งานง่าย
สิ่งที่ทำคือ ไปหา theme ที่ดูเข้าท่า
เมื่อไปค้นหาพบว่า
พวก HTML Template ส่วนใหญ่จะมี Stylesheet เป็น SASS/SCSS/LESS ทั้งหมดเลย
ชีวิตเริ่มเศร้าแล้ว เพราะว่า แค่ CSS ยังไม่รู็เรื่องเลย ยิ่ง JavaScript ไม่ต้องพูดถึง
ส่วนไอ้ 3 ตัวข้างต้น ไม่ต้องคิด คืออะไรยังไม่รู้
แต่ก็กัดฟันใช้ก็แล้วกัน
ในส่วนนี้ใช้เวลาไป 3 วันเต็ม ๆ ปวดหัวสุด ๆ !!
เมื่อเลือก HTML Template ได้ ก็มาถึงสิ่งที่ยากรองลงมาคือ เอามายัดใส่ Angular Project สิ
ตอนแรกก็คิดว่าง่าย ๆ
พอทำจริงเท่านั้นแหละ งงกันไปเลย
ดังนั้นจึงนั่งทำความเข้าใจพวก Module และ Routing ใหม่อยู่ครึ่งวัน
จึงทำการออกแบบได้ดังรูป
ดูเหมือนจะวุ่นวายมากหน่อย แต่ความจริงมันวุ่นวายมาก ๆ สำหรับการเริ่มต้น !!
แต่สิ่งที่ทำไปนั้น เปลี่ยนไปมาอยู่สัก 5-6 รอบ
เพื่อให้ได้สิ่งที่ต้องการ และทำให้ง่ายต่อการเพิ่มหน้าใหม่ ๆ
ซึ่งการทำงานจะต้องผ่านการ authentication ในหน้า login ก่อนเสมอ
หน้าการทำงานของแต่ละ feature จะอยู่ภายใต้ module Main
โดยในแต่ละ module จะมี routing เป็นของตัวเอง
ทำให้ชีวิตการพัฒนาง่ายขึ้นมาก
ในส่วนนี้ใช้เวลาไป 1 วัน
ทั้งสองส่วนนี้ใช้เวลาและพลังงานไปสูงมาก ๆ
สำหรับมือใหม่แบบผม ก็ทุลักทุเลสุด ๆ
แต่ผลที่ออกมาก็น่าพอใจ
ในส่วนของการเขียน code ของ component ก็ไม่มีอะไรมาก
การจัดการ Form ง่าย ๆ ผ่าน FormBuilder และ Validator ไป
ส่วนการติดต่อไปยัง RESTful API ก็ไปเขียนใน service
จากนั้นทำการ injection เข้ามายัง component
ซึ่งตรงนี้ Angular สนับสนุนอยู่แล้ว ไม่ต้องทำอะไร
มีการนำ Pipes มาใช้งาน
สำหรับทำการกรองข้อมูลที่ได้รับมาจากฝั่ง Backend
พอใช้งานแล้วพบว่า มันสะดวกดีนะ
ทำให้ระบบงานมันเร็วมาก ๆ ในมุมมองของผู้ใช้งาน
แต่งานด้านหลังไม่ง่ายเลย
ในส่วนนี้ใช้เวลาไปสักครึ่งวัน
เนื่องจากเอกสารของ Angular มันดีมาก ๆ
อธิบายชัดเจน พร้อม code ตัวอย่าง
ดังนั้นคนเริ่มต้นที่พออ่านภาษาอังกฤษได้ น่าจะพอทำได้เลย
การจัดการ state แทบไม่ต้องจัดการเลย
เพราะว่าในแต่ละหน้าก็ทำงานแยกกัน
ไม่ต้องมี state ใด ๆ ที่ต้อง share หรือใช้ร่วมกัน
ตามจริงมักจะตัดเรื่องนี้ออกไป เพราะว่า เหนื่อยในการจัดการที่ฝั่ง Frontend นั่นเอง
แต่ต่อไปถ้า feature เริ่มเยอะ อาจจะต้องกลับมามอง และ ศึกษาต่อไป
ข้อมูลบางอย่างเช่นพวก Token ของการ login
ก็ทำการเก็บง่าย ๆ ไปก่อนที่ Local Storage
ส่วนการ validate และตรวจสอบหรือ Authorization ยังไม่ทำเลย !!
เมื่อพัฒนาทุกอย่างพร้อมแล้ว บนเครื่องทำงานได้ตามที่ต้องการ ชิวมาก ๆ
แต่พอต้อง build ใน production mode ก็เจอปัญหาสิ
ทำไม build แล้วไฟล์ CSS มันเล็ก ๆ แปลก ๆ ?
ทั้งที่ไฟล์ SCSS นั้นเยอะแยะมากมาย เช่น Bootstrap เป็นต้น ?
ยิ่งพอไปลองทดสอบสิ่งที่ Angular มัน build ให้ยิ่งชัดเลยคือ
CSS ของผมหายไปไหน ?
พอไปดูเอกสารของ ng build พบว่า
ต้องเพิ่ม parameter –extract-css=false เข้าไปด้วย
จากนั้นทำการ build ใหม่ก็จบพิธีการ build
ก็ดูง่ายดีนะ !!
มาถึงการ deploy กันบ้าง
ก็ใช้ Docker compose เช่นเดิม
ใช้ Multi-stage build เช่นเดิม
ในขั้นตอนแรกทำการ build จาก image ของ NodeJS ตรงนี้ช้าสุด ๆ
ในขั้นตอนที่สองก็ใช้ nginx ไปเลย มันเล็กมาก ๆ
แต่สิ่งที่ต้องทำเพิ่มอีกหน่อยคือ
ทำการ config nginx ให้เป็น reverse proxy นิดหน่อย
เพื่อให้สามารถเรียกใช้งาน Backend ได้ โดยที่ไม่เปิด Backend เป็น public
ก็ได้ใช้ความรู้อันน้อยนิดที่มีจัดการเขียนไฟล์ nginx.conf ไปประมาณ 5 บรรทัด
เป็นอันจบขั้นตอนการพัฒนา
การทดสอบก็เขียนด้วย Robotframework จัดไป 2 test case พอให้มั่นใจว่าทำงานได้นะ
เมื่อทุกอย่างพร้อมทั้ง Frontend และ Backend ก็ deploy ขึ้น production สิครับ
ด้วยคำสั่งเดียวคือ docker-compose up -d
เพียงเท่านี้ก็จบการพัฒนาและ deploy
ต่อไปก็รอดูผล และ monitoring ต่อไป รวมทั้งการพัฒนา feature อื่น ๆ
ขอให้สนุกกับการ coding ครับ
