Warning: in_array() expects parameter 2 to be array, string given in /home/content/31/10462331/html/babedev/blog/wp-content/plugins/facebook-button-plugin/facebook-button-plugin.php on line 380

Warning: in_array() expects parameter 2 to be array, string given in /home/content/31/10462331/html/babedev/blog/wp-content/plugins/facebook-button-plugin/facebook-button-plugin.php on line 383

เนื่องจากว่าระหว่างที่ทำการ deploy project เกิดปัญหาบางอย่างขึ้น เลยจะรวบรวมวิธีการแก้ปัญหาต่างๆเอาไว้ เผื่อว่าจะมีใครเจอแบบเดียวกัน จะได้ลองเอาไปใช้ดู โดยบทความนี้จะเป็นการ deploy บนระบบ Linux นะครับ

grunt ใช้งานไม่ได้

จริงๆ ปัญหานี้ไม่ควรจะเกิดขึ้น ถ้าหากทำตามขั้นตอนเบื้องต้นหมดแล้ว ซึ่งวิธีการแก้ก็คือใช้คำสั่ง

ก็คือสั่ง install grunt ต่างหากไปเลย และอย่าลืมใช้ -g เพื่อ install แบบ global นะครับ เพราะถ้าไม่ใส่ ถึงจะ install ได้ แต่ก็จะยังใช้งานไม่ได้อยู่ดี


 ขึ้นเตือน module ไม่สามารถใช้งานได้

จะเป็น error ที่ขึ้นตอนเริ่มสั่ง grunt ถ้าเกิดเจอข้อความประมาณว่า “xxx cb() never called” ซึ่งจะหมายถึง module นี้ไม่สามารถใช้งานได้ อาจจะเพราะยัง install ไม่สมบูรณ์ ถึงแม้จะสั่ง install ใหม่ ก็ยังทำงานไม่ได้ ให้ทำงาน clear cache เพื่อลบ cache เก่าทิ้งไป

จากนั้นให้ install อีกรอบ เพื่อดึง module ลงมาใหม่


 ไม่สามารถเรียกใช้ Bootstrap

หลังจากที่สั่ง run node ได้แล้ว พอลองเข้าหน้าเว็บ ตัวเว็บกลับไม่ render พอดูบน console ก็จะขึ้น app crashed และมีข้อความ “bootstrap-components not exist” พอไปดูใน folder ก็ไม่มีจริงๆ แถมไม่ใช่แค่อันเดียว แต่กลุ่ม bootstrap ไม่มาเลย โดยปัญหานี้เกิดจากการที่ลืมลง bower ไว้ วิธีแก้ก็ลงมันซะด้วย

เสร็จแล้ว ถ้ามันยังไม่มา ก็ให้ install ผ่าน bower ด้วย

จากนั้น web components ต่างๆ จะถูก download ลงมาใน project


ปัญหาหลักๆ ที่ผมเจอในการ deploy ครั้งแรกก็มีประมาณนี้ ที่เหลือก็มักจะเป็นเรื่อง environment กำหนดค่าไม่ถูกบลาๆ

ถ้าใครเจออะไรแปลกๆ หรือมีวิธีแก้ไขแบบอื่นๆ อย่าลืมคอมเม้นต์กันนะครับ วันนี้ สวัสดี ราตรีสวัสดิ์ครับ

 


Warning: in_array() expects parameter 2 to be array, string given in /home/content/31/10462331/html/babedev/blog/wp-content/plugins/facebook-button-plugin/facebook-button-plugin.php on line 380

Warning: in_array() expects parameter 2 to be array, string given in /home/content/31/10462331/html/babedev/blog/wp-content/plugins/facebook-button-plugin/facebook-button-plugin.php on line 383

ต่อจาก part ที่แล้ว หลังจากที่เราลงระบบเสร็จเรียบร้อย วันนี้มาดูกันว่า MEAN มีอะไรให้เราใช้บ้าง

เริ่มจากโครงสร้างของ MEAN จะประกอบไปด้วย folder หลักๆคือ config และ packages โดย config นั้นจะเป็น configuration file ของทั้ง application ส่วน package นั้นจะเป็น application หรือ module ย่อยข้างในอีกที ซึ่งอาจจะทำเป็น library ให้ package อื่นเรียกใช้ก็ได้

mean_root_structure

ข้างใน folder config จะประกอบไปด้วย

  1. env คือ folder ที่เก็บค่า environment configuration ของระบบ
  2. express.js จะเป็นตัวเตรียม module ต่างๆที่จำเป็น เช่น ตัวเชื่อมต่อ MongoDB, การเรียกใช้ passport

เมื่อเข้าไปดูข้าง env ก็จะพบไฟล์ 4 ไฟล์คือ all.js, development.js, production.js, test.js โดย all.js จะเป็น configuration ที่ใช้รวมกันของอีก 3 ไฟล์ ส่วน development, production, test ก็จะตามชื่อมัน มีไว้เพื่อ configure ในแต่ละ environment ซึ่งข้างในจะหน้าตาเหมือนกันหมด ต่างที่ค่าต่างๆเช่น cliend ID, user, password หรือเราจะเพิ่มค่าอื่นๆใส่ลงไปก็ได้ แต่ควรจะใส่ให้ครบทั้ง 3 ไฟล์

 ข้างใน development.js จะมีให้กำหนดค่าต่างๆสำหรับ Social API รวมถึงการใช้งาน mail ด้วย

มาดู folder packages กันต่อ เริ่มต้น MEAN จะมี package มาให้ 4 อันคือ access, articles, system, users

mean_root_structure

สำหรับ package access, system นั้นจะเป็นเหมือน library ที่ใช้ไหนการใช้งาน web app ซึ่งจะไม่เห็นเป็นหน้าเว็บ ส่วน users จะเป็นตัวจัดการข้อมูลสมาชิก ทั้ง register, sign in และ MEAN ได้แถม articles มาให้ เป็นตัวเริ่มต้นการพัฒนา ซึ่งมันสามารถสร้าง article ได้เหมือน blog ประมาณนั้น แต่ถ้าไม่ต้องการ เราสามารถลบ package ทิ้งได้ด้วยคำสั่ง

ภายใน package แต่ละอันก็จะมี folder สำคัญคือ

  1. public เป็น front-end
  2. server เป็น back-end

ภายในก็จะมีรูปแบบโครงสร้างตามแบบ Node.js โดยจะมี app.js เป็น entry point ของแต่ละ package


เริ่มต้นพัฒนา

สำรวจโครงสร้างเสร็จเรียบร้อยแล้ว ก็มาเริ่มพัฒนากันเลยดีกว่า โดยเราจะสร้าง package ใหม่ขึ้นมาก่อน โดยใช้คำสั่งเหมือนการลบ package แต่เอา -d ออก

เสร็จแล้วก็จะได้ package first เพิ่มขึ้นมาอีกหนึ่งอัน

mean_root_structure

พอลองเข้าไปดูบนเว็บ ก็จะมีเมนูเพิ่มมาอีกหนึ่งอัน พร้อมหน้าเว็บตัวอย่างมาให้

mean_root_structure

สำหรับการเริ่มต้นพัฒนา app บน MEAN ก็จบแต่เพียงเท่านี้ ถ้ามีโอกาสผมจะกลับมาอธิบายการใช้งาน MongoDB, Angular.js รวมถึง Twitter Bootstrap นะครับ

วันนี้มึนๆเหมือนเป็นหวัด ถ้าอ่านไม่รู้เรื่องต้องขออภัยอย่างสูงครับ \(_ _)/


Warning: in_array() expects parameter 2 to be array, string given in /home/content/31/10462331/html/babedev/blog/wp-content/plugins/facebook-button-plugin/facebook-button-plugin.php on line 380

Warning: in_array() expects parameter 2 to be array, string given in /home/content/31/10462331/html/babedev/blog/wp-content/plugins/facebook-button-plugin/facebook-button-plugin.php on line 383

Web developer ทุกคนคงรู้จัก LAMP เป็นอย่างดี มันคือสุดยอด bundle tool ทุกช่วยให้การวางระบบ web app สะดวกรวดเร็วทันใจ คือกดคลิกเดียวได้ Apache, MySQL, PHP พร้อมใช้งาน แต่เมื่อเวลาผ่านไป เทคโนโลยีเริ่มก้าวหน้า เริ่มเกิดภาษาใหม่ๆ ระบบฐานข้อมูลใหม่ๆ อย่าง Dynamic language และ NoSQL ทำให้เกิด bundle tool ตัวใหม่ที่ชื่อ MEAN


MEAN คืออะไรหนอ

MEAN ย่อมาจาก MongoDB, Express.js, Angular.js, Node.js สังเกตุว่ามันมี .js ต่อท้ายถึงสามตัว เพราะ MEAN คือ full-stack javascript framework โดยแต่ละตัวทำหน้าที่ดังต่อไปนี้

  1. MongoDB เป็น NoSQL ที่ได้รับความนิยมมาก เพราะใช้งานง่ายกว่าตัวอื่นๆ
  2. Express.js คือ MVC framework สำหรับ Node.js
  3. Angular.js คือ Web front-end framework สำหรับ javascript
  4. Node.js คือภาษาหลักที่จะใช้ในการพัฒนา web app ในคราวนี้

ก่อนใช้งานควรเตรียมอะไรก่อน 

ถึงแม้ว่า MEAN จะเตรียม framework ต่างๆไว้ให้แล้ว แต่ MEAN ต่างจาก LAMP ตรงที่ไม่ได้ทำการลงระบบไว้ให้ นั้นหมายถึงเราจะต้องเตรียม MongoDB, Node.js ไว้เอง ให้เดาก็น่าจะเพราะว่าทั้งสองตัวนี้มีขนาดที่ค่อนข้างใหญ่ ถ้ารวมไว้ใน MEAN เลยคงจะมีขนาดมหาศาลเลยทีเดียว ฉะนั้นให้เตรียม tools ต่างๆดังนี้

  1. Node.js เมื่อลงเสร็จแล้วให้กำหนด PATH เพื่อเปิดใช้คำสั่ง npm
  2. MongoDB จากคำแนะนำของเว็บ MEAN IO ให้ตั้ง default port เดิม

เมื่อทำการติดตั้งสองตัวนี้เสร็จเรียบร้อย ใช้ npm ติดตั้ง bower เพื่อใช้จัดการ web package ในอนาคต

หลังจากเตรียมความพร้อมเรียบร้อย ทำการ start MongoDB เตรียมไว้ โดยใช้คำสั่ง


 พร้อมแล้วลุย

เริ่มแรกให้ลง MEAN โดยใช้คำสั่ง

ระบบจะทำการ install package MEAN ต่างๆมากมาย เมื่อเสร็จแล้วผมสร้าง app ชื่อ first-app ขึ้นมาด้วยคำสั่ง

ระบบก็จะทำการเริ่มสร้าง project ตามโครงสร้างของ MEAN สิ่งที่สะดุดตาผมมาก หลังจากสร้างเสร็จคือโลโก้อันใหญ่ ซึ่งดูอลังการมาก

mean_init

เป็น pixel art ที่ดูดีเลยทีเดียว

เมื่อเสร็จแล้วก็เข้าไปใน folder และทำการ install dependencies ต่างๆของ MEAN ด้วย

ถ้าเช็คดูใน package.json ที่เป็น file dependencies คล้าย pom.xml ของ maven จะเห็น package ที่สำคัญๆหลายตัวคือ forever, grunt ที่ไว้ใช้ในการรัน Node.js และมีกลุ่ม passport ที่ใช้ในการทำ authentication กับ service ต่างๆอย่าง Facebook, Google เท่าที่ดูคือเพียบพร้อมแทบไม่ต้องหา package อื่นเพิ่มเลย

ปลาบปลื้มปิติเสร็จแล้ว ก็มาลองรันกันเลยดีกว่า โดยเราจะรันบน local ก่อนโดยใช้

ระบบก็จะวิ่งๆๆๆๆๆๆ จนขึ้นสถานะพร้อมใช้งาน โดยจะแสดง port สองอันคือ 5858 ไว้ใช้ debug และ 3000 เป็นของ development

mean_run

เมื่อลองเข้า localhost:3000 ก็จะปรากฎเว็บสวยงามแบบนี้ อ้อ ลืมบอก MEAN แถม Twitter Bootstrap มาให้ด้วย

mean_web

หน้าที่ MEAN เตรียมไว้ให้แล้วก็จะมี Register กับ Sign in ซึ่งสามารถทำแบบ account ของเราหรือผ่าน Social ก็ได้ แต่ตอนนี้ยังทำอะไรไม่ได้ เพราะต้องทำการแก้ไข configuration ก่อน

mean_register

การติดตั้ง MEAN นั้นจะใช้เวลากว่า LAMP ค่อนข้างมาก เพราะต้องเตรียม Node.js และ MongoDB เอง ไม่ได้เป็นแบบคลิกเดียวมาทุกอย่าง แต่ก็ถือว่าช่วยเรื่องการเริ่ม development ได้ค่อนข้างดี เพราะไม่ต้องมา set up ค่าต่างๆเอง ตอนนี้มีหลายบริการที่เริ่มติดตั้ง MEAN ได้แล้ว โดยเฉพาะ Google ที่เพิ่งเปิดบริการไม่นานนี้ แต่น่าเสียดายที่การลงจะต้องมีค่าใช้จ่าย เลยไม่สามารถทดลองใช้ได้ (งกเกิน ไม่ฟรี ไม่ใช้)

จริงๆแล้ว MEAN เองไม่ได้มาแทนที LAMP เพราะจุดประสงค์การใช้งานโดยเฉพาะ MySQL กับ MongoDB นั้นค่อนข้างแตกต่างกัน ทั้งนี้ทั้งนั้นขึ้นอยู่กับว่าเรากำลังทำ app ประเภทไหน มีความจำเป็นต้องใช้ NoSQL มากแค่ไหน และการใช้งาน Node.js สำหรับผมแล้ว มันไม่ง่ายเหมือน PHP นัก

ก็ขอจบการติดตั้ง MEAN แต่เพียงเท่านี้ พรุ่งนี้จะมาต่อเรื่องการเขียน app บน MEAN กัน

また明日ね