บันทึกการพัฒนาระบบงานด้วย Angular 6 และ Golang

พอดีเพิ่งทำระบบ 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 ต่อไปก็รอดูผล และ moniroting ต่อไป รวมทั้งการพัฒนา feature อื่น ๆ ขอให้สนุกกับการ coding ครับ