ลองเล่น Google Web Starter Kit

featureimage วันนี้มีงาน Google I/O 2014 ดู Keynote มีช่วงนึงเค้าผูกถึงเรื่อง Material Design ในอนาคต (ประมาณนาทีที่ 41) ดูจบแล้วขนลุกมาก รู้สึกแบบว่า เฮ้ย!!! UI มันก้าวกระโดดอีกขั้นนึงแล้ว งานครั้งนี้มีเรื่องที่ Wow สำหรับ Developer เต็มไปหมด ตั้งแต่ Google Design, Material Design และ polymer-project

ย่อๆ คือ UI ของ Android รุ่น "L" จะมี movement มีการเคลื่อนไหวที่สวยงาม ตอบโต้กับการใช้งานของผู้ใช้ การเปลี่ยน UI จากแบบนึง ไปอีกแบบนึง จะเนียนตาเหมือนเป็น Animation ภายใต้หลักการ ทำงานครั้งเดียวใช้ได้และดูดีกับทุก Device ทุกขนาดหน้าจอ

ระหว่างที่ยังขนลุกอยู่ก็นึกขึ้นได้ว่า Google ออก Tools ช่วยทำเว็บขึ้นมาตัวนึง ชื่อ "Web Starter Kit" เลยลองเล่นซักหน่อย เด๋วพรุ่งนี้คุณจะคุยกับเค้า....ไม่รู้เรื่อง

Clone

เอา source code มาก่อน

$ git clone https://github.com/google/web-starter-kit.git WebStarterKit

ติดตั้งโปรแกรมที่จำเป็น

Web Starter Kit tools ต้องการพรรคพวกหลายตัว ไม่งั้นใช้ไม่ได้ เช็คให้ชัวร์ว่าในเครื่องเรามี Node, Ruby, Gulp และSass gem ลงไว้อยู่แล้ว

Node

ต้องใช้เวอร์ชั่น v0.10.x ขึ้นไป เช็คได้ด้วย node -v ถ้าไม่มีก็จัดการติดตั้งซะ ไปที่ http://nodejs.org/ แล้วโหลด .pkg มาลง ง่ายมาก

$ node -v
v0.10.24  

Ruby

ต้องใช้เวอร์ชั่น 1.8.7 ขึ้นไป เช็คได้ด้วย ruby -v ถ้าไม่มีก็จัดการติดตั้งซะ ใช้ homebrew ก็ได้ ง่ายดี

$ brew install ruby
$ ruby -v
ruby 2.0.0p451 (2014-02-24 revision 45167) [universal.x86_64-darwin13]  

Sass gem

ต้องใช้เวอร์ชั่น 3.3.x ขึ้นไป เช็คได้ด้วย sass -v ถ้าไม่มีก็จัดการติดตั้งซะ

$ sudo gem install sass
$ sass -v
Sass 3.3.8 (Maptastic Maple)  

Gulp

ต้องใช้เวอร์ชั่น 3.5.x ขึ้นไป เช็คได้ด้วย gulp -v ถ้าไม่มีก็จัดการติดตั้งซะ

$ sudo npm install --global gulp
$ cd WebStarterKit/
$ npm install

$ gulp -v
[14:34:52] CLI version 3.8.2
[14:34:52] Local version 3.8.2

สร้าง Project

$ cd WebStarterKit/app
$ gulp

จะได้ directory ชื่อ dist หน้าตาแบบนี้ Web Starter Kit Directory

ทดลองรัน

ถอยออกจาก WebStarterKit/app มาหนึึ่ง step แล้วใช้คำสั่ง gulp serve เพื่อ start service จาก WebStarterKit

$ cd ..
$ gulp serve

แล้วลองเข้า http://localhost:3000/#hello จาก browser จะได้หน้าตาประมาณนี้

Web Starter Kit Index Page

ที่เด็ดสุดของ WSK คือ เราไม่ต้องมี Real Device เพื่อใช้ทดสอบการทำงานของ UI เราอีกต่อไป เพราะเราสามารถทดสอบผ่าน Emulator ใน Chrome ได้ แถมยังแสดงผล Sync กันอีกด้วย คุ คุ คุโค่ยยยยยย

Web Starter Kit Emulator

(ด้านบนนี้คือเปิด Emu ของ iPhone 5, Ipad และ Nexus 5 จากนั้น ทดสอบการ Touch UI)