สร้าง Web application ด้วย Yeoman

Image

Yeoman (yeoman.io)

เป็นเครื่องมือที่ใช้สำหรับ build environment สำหรับการทำ web application
โดยเฉพาะการทำด้วย backbone เราไม่จำเป็นต้องไปโหลด library ต่างๆนาๆมาไว้ที่เครื่อง เราแค่พิมพิ์คำสั่งผ่าน cmd แล้ว yeoman ก็ไปโหลดมาให้เรา

นอกจากนั้นมันยังมีเครื่องมือที่ใช้รัน server (ผมชอบมาก) ของตัวมันเอง
เวลาจะทำงานประเภท PSD to HTML จะเหมาะมาก เพราะ server ของ yeoman มันจะดักว่าไฟล์อะไรบ้างที่มีการอัพเดท
แล้วมันก็จะอัพเดทหน้าตาของ web โดยที่เราไม่ต้องมาเสียเวลา reload หน้าเอง เห็นความเปลี่ยนแปลงทันที เหมือนใน dreamwaver แต่ไวกว่า และเป็น browser จริง!

Installation

ใน MAX OSX และ Linux เป็นเรื่องที่ง่ายมาก แค่พิมพิ์คำสั่ง

$ curl -L get.yeoman.io | bash

เสร็จ

ใน windows เป็นอะไรที่เยอะกว่านั้น และสามารถทำได้หลายวิธี

1. ติดตั้งด้วย Chocolatey (http://chocolatey.org/) ตัวนี้เด็ดมาก มันเป็น cmd tool เหมือน apt-get ใน ubuntu คงต้องไปศึกษาแล้วเอามาเขียนลง blog อีกสักรอบ

พิมพิ์คำสั่งดังนี้

C:> @powershell -NoProfile -ExecutionPolicy unrestricted -Command “iex ((new-object net.webclient).DownloadString(‘http://bit.ly/psChocInstall’))” && SET PATH=%PATH%;%systemdrive%\chocolatey\bin
C:> cinst yeoman

เสร็จ

2. ลงด้วย git ซึ่งจะต้องลง
    – ruby (http://rubyinstaller.org/downloads/)
    – compass (http://compass-style.org/install/)
    – nodejs (http://nodejs.org/download/)
    – git (http://git-scm.com/)
    – PhantomJS (http://phantomjs.org/download.html อย่าลืมสร้าง path http://lh6.googleusercontent.com/-iX-vxgYN8TA/UFHn-t4iB1I/AAAAAAAAEhA/DyqsFfxREP0/s483/phantomjs-path.png)
    – Python (http://www.python.org/download/)

เมื่อติดตั้งเสร็จแล้ว ก็สามารถพิมพิ์คำสั่งได้เลย

C:> npm install yeoman

เสร็จ

First app with Yeoman

จาก cmd เราก็จะสร้างโฟลเดอร์ใหม่สำหรับ app ที่เราจะทำ

C:> cd /wamp/www/
C:> mkdir myapp
C:> cd myapp

สั่ง Yeoman ให้สร้าง web application ให้เรา

C:> yeoman init

จากนั้น Yeoman จะแสดง text wizard ให้เรากรอก input เข้าไป
ซึ่งมันจะถามประมาณว่าจะใช้ twitter bootstrap, requirejs, … ไหม

จากนั้นจะได้ folder ที่มีโครงสร้างประมาณนี้

myapp/
    app/
        images/
        scripts/
             vendor/
        styles/

จากนั้นก็สั่งให้ Yeoman สร้าง server

C:> yeoman server

เมื่อเราแก้ไขไฟล์ใน app นี้ server จะ reload ให้อัตโนมัติ

เมื่อสัปดาห์ที่แล้ว (ประมาณกลางเดือนกุมภา) เว็บไซด์ของ Yeoman ยังเป็น version เก่าอยู่
แต่ในระหว่างที่เขียนนี้ Yeoman ได้มีการปรับปรุงและขึ้น version ใหม่ของ code
ซึ่งตอนนี้จะใช้งานร่วมกับ bower (package managment) และ grunt (javascrip task เป็นตัวจัดการ server นั่นแหละ) ซึ่งจะมีคำสั่งใหม่ ที่ให้เข้าใจง่ายและทำงานได้ดีกว่าเดิม
ต้องลองไปศึกษาต่อเพิ่มเติมครับ

Ref:
– https://github.com/yeoman/yeoman/wiki/Manual-Install

One thought on “สร้าง Web application ด้วย Yeoman

  1. ขอบคุณมากคร้าบ อยากมาศึกษาด้านนี้เพิ่มเติม เดี๋ยวจะแวะมาบ่อย ๆ นะครับ ^^

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s