Gatsby Starter Blog

Web App ด้วย Yoman Workflow !

November 08, 2013

โดยจะใช้ Yeoman มาจัดการการเขียน Webapplication ด้วย AngularJS โดยให้ Yoman เตรียม Workflow ให้เรา จริงๆแล้วถ้าจะมองว่า มันไม่ได้ช่วยอะไรมากมายมันก็จริงนะครัชช มองง่ายๆ มันก็คือการเอาส่วนประกอบที่สำคัญอย่าง bower และ grunt มาวางไว้เพื่อทำงานโดยที่เราไม่ต้องเสียเวลาตั้งค่าใดๆ ทั้งสิ้น พร้อมกับ ตัว Generate ที่ทำงานรวมๆ กันด้วย Template ไฟล์ ที่เกี่ยวข้องทำเป็นคล้ายๆ พวก Template ของ Web Application Development นะครับ โดยส่วนประกอบที่จะสอนจะประกอบไปด้วย

  • HTML5
  • AngularJS
  • Karma
  • Sass
  • Bootstrap
  • Grunt
  • Bower
  • NodeJS
ดูเหมือนเยอะนะครับ แต่จริงๆ แล้วเราใช้เจ้า Yeoman จัดการได้ง่ายมากๆ ครับ.

มาเริ่มกันเลยแล้วกันนะครับ

  1. ต้องมี NodeJS โหลดได้ที่ NodeJS
  2. ต้องมี Git โหลดได้ที่ Git-SCM และควรจะมี GitHub ไว้ด้วยเผื่ออยากจะใช้
  3. ต้องมี Ruby สำหรับ Windows ให้ลง Ruby Installer
  4. ควรจะมี Compass ใช้งานคู่กับ Sass

ติดตั้งด้วยการพิมพ์ บน Command-Line

gem update —system gem install compass

  1. เริ่มติดตั้ง Yeoman

    yeoman-logo
    ใช้ ​Command-Line ทั้งหมด ในการติดตั้งและใช้งาน
    • 1. คำสั่งนี้เพื่อใช้ npm ติดตั้ง yeo แบบ Global
      npm install yo -g
      ขั้นตอนี้ถ้าใครรันไม่ได้ ให้ไปตรวจสอบการติดตั้ง Nodejs ว่าอนุญาติให้ทำ Execute Path หรือไม่
    • 2. คำสั่งนี้เพื่อใช้ npm ติดตั้ง generator-webapp แบบ Global
      npm install -g generator-webapp
      เพื่อติดตั้งตัวสร้าง Template สำหรับ WebApp แบบทั่วไป
    • 3. คำสั่งนี้เพื่อใช้ npm ติดตั้ง generator-webapp แบบ Global
      npm install -g generator-angular
      เพื่อติดตั้งตัวสร้าง Template สำหรับ AngularJS ซึ่งผมไปอ่านบทความ AngularJS ได้ที่หัวข้อด้านบน
    • 4. เสร็จเรียบร้อยสำหรับการติดต้ง Yeoman พร้อมตัว Generator ทั้งสองแบบ
      คุณสามารถสร้าง Yo Project ได้แล้วในตอนนี้

    ทดลองสร้าง Project WebApp และ AngularJs พร้อมด้วย Bootstrap และ Sass

    โดยประกอบ พระเอกของเรื่องเข้ามาสามคน เอ้!!หรือจะเป็น หนึงคน หมูป่า นกอีกตัว นะครัชชช
    yeomanangularbower
    เริ่มที่ Web App ก่อนแล้วกัน ใช้ ​Command-Line ทั้งหมด ในการติดตั้งและใช้งานนะครัชช
    • 1. สร้าง โฟล์เดอร์สำหรับเก็บ Project
      C:\>mkdir project
      สามารถใช้ windows explorer หรืิอคำสั่ง mkdir เพื่ิอสร้างได้ หลังจากสร้างแล้วให้ cd เข้าไปยัง Folder ที่สร้างให้เรียบร้อย
    • 2. สั่งสร้าง Webapp Project
      C:\project\>yo webapp
      folderofapp
      Yeoman จะทำการ Generate สิ่งที่จำเป็นสำหรับ Webapp ให้ โดยขั้นตอนแรกจะมีสามอย่างให้เลือกสำหรับ Yeoman ในรุ่นที่ผมใช้ทดสอบ คือ Bootstrap for Sass อันนี้ผมแนะนำว่าควรลงนะครับแต่ตsอนนี้ยังเป็นรุ่น 2.3 เดี้ยวค่อยไป Up เป็น 3.0 ทีหลังได้ครับ ใครไม่รู้จักถือว่าคุณต้องไปอ่านเพิ่มแล้วนะครับเพราะมันจำเป็นมากสำหรับนักพัฒนาเว็บครับ อันถัดมา RequireJS ถ้าคุณชอบเขียน Javascript แล้วอยากให้มันนำกลับมาใช้ใหม่ได้ ทำงานข้ามไฟล์ได้ หรือตรวจการโหลดซ้ำถือว่าจำเป็นมากครับ ส่วน ตัวสุดท้าย Modernizr ใช้ตรวจสอบการทำงานของ Device ที่เราใช้ว่า Support Html5 Css3 อะไรบ้างประมาณนั้นครับ เลือกตามใจชอบกด Enter จะได้โครงสร้างไฟล์ทั้งหมดตามรูป <App> ใช้เก็บงานเราทั้งหมด <test> ใช้เขียน Test case จบครับ
    • 3. จากนั้นทำการทดสอบ Code ของเรารันคำสั่ง
      c:\project\>grunt server
      คำสั่งนี้จะทำให้สร้าง Server สำหรับทำงาน ข้อดีของมันมีเยอะ แต่ที่ผมชอบมากคือ คุณลืมปุ่ม F5 Refresh ไปได้เลย เมื่อใดก็ตามที่คุณแก้ไขไฟล์อะไรก็ตามใน Folder App มันจะ Auto Refresh ครับ
    • 4. ผลลัพธ์หลังจากการสั่ง grunt server คือ
      finwebapp
      ทั้ง Jquery,Bootstrap,Sass,Modernizr,RequireJS พร้อมใช้งานทั้งหมดครับ
    • 5. ทำ distribute ไว้สำหรับ Upload ขึ้น Webserver
      c:\project\>grunt
      จะได้ folder dist เพิ่มขึ้นมาครับ โดย Grunt จะทำให้ทั้ง ทดสอบ js css ทั้ง Gzip Compile Sassb Karma etc....เหนื่อยๆๆ ยาวไปนิด จบแล้วนะครับ ลองศึกษาเรื่องอื่นเพิ่มเติมกันเองนะครับ เหอะๆ เช่น Test Case AngularJS

    Enjoy coding! ว่างๆ จะกลับมาเขียนต่อนะครับ