Nati Namvong

Nati Namvong

Just Coding the Future.

คนไทยกำลัง #google อะไรกันอยู่ (at Google Thailand Office - 14th Floor)

at Google Thailand Office - 14th Floor

at Google Thailand Office - 14th Floor

ChatSuki #Chatchart #Cosplay #Sticgo

ChatSuki #Chatchart #Cosplay #Sticgo

Install Phalcon on Mac

สิ่งที่ต้องเตรียม

  • Xcode
  • Homebrew
  • Git
  • automake
  • libtool

เตรียม Environment ก่อนติดตั้ง Phalcon ด้วย brew

brew tap homebrew/dupes

brew tap josegonzalez/homebrew-php

brew install php54

brew install automake

brew install libtool

xcode-select —install

ติดตั้ง Phalcon

git clone git://github.com/phalcon/cphalcon.git

cd cphalcon/build

sudo ./install

เพิ่มในบรรทุดนี้เข้าไปในไฟล์ php.ini

extension=phalcon.so

Restart Web Server เป็นอันเสร็จ

at Midtown, Palo Alto

at Midtown, Palo Alto

Grammy Awards #sellsuki

TukTuk Mazda Ducati MotorWay และ GM1

Yeo! Angular

image

Installing Node.js

http://nodejs.org/

Installing Yeoman

npm install -g yo grunt-cli bower

Installing Generators

npm install -g generator-angular

Using Generators

ใช้ Command line เข้าไปที่โฟลเดอร์ที่จะใช้ใน Project แล้ว Run Command นี้

yo angular

หลังจาก Run Command แล้วจะมีการถามข้อมูลต่างๆจาก Yo เช่น จะใช้ Twitter Bootstrap หรือเปล่า จะให้ SCSS หรือเปล่า ซึ่งตรงนี้ก็ขึ้นอยู่กับเราว่าจะใช้หรือไม่ ถ้าใช้ก็ตอบ yes ถ้าไม่ก็ตอบ no ไปเท่่านั้นเอง

และหลังจากที่เลือกเสร็จหมดแล้ว Yo ก็จะทำการติดตั้งไฟล์พื้นฐานที่จำเป็นให้เราไว้พร้อมทำงานต่อไป 

image

Install package

bower install

Local Development

grunt server

คำสั่งนี้เป็นการสร้าง localhost server ขึ้นมาและเปิด App ของเราให้บน Browser เลย นอกจากนั้นเวลาที่เราแก้ Code มันก็จะ Update ให้ Auto เลยด้วย

image

Building Your Application

เมื่อ App เราพร้อมที่จะปรากฏต่อสายตาชาวโลก ก็ถึงเวลา Build ขึ้น Production ด้วยคำสั่งนี้

grunt build

โดยหลังจาก Run คำสั่งนี้แล้ว เราจะได้โฟลเดอร์ dist ขึ้นมาใหม่ ซึ่งภายในบรรจุไฟล์ .html .css และ .js ของ App ให้เราพร้อมที่จะเอาไปไว้บน Production Server 

image

Conclusion

สรุปก็คือ Yeoman เป็น Tool Set ที่ช่วยให้เราสามารถสร้าง Web Application ได้ง่ายและเป็นระบบ โดยที่มี Workflow ที่ง่ายเป็นระเบียบ เหมาะแก่การใช้ใน Project ต่อไปของคุณยิ้งนัก

Useful links
Automating AngularJS With Yeoman, Grunt & Bower
Kickstart Your AngularJS Development with Yeoman, Grunt and Bower
GETTING STARTED WITH YEOMAN
Bootstrapping AngularJS With Yeoman
Using Yeoman to Create a Web Application

Data Binding in Angular

The view is a projection of the model at all times. When the model changes, the view reflects the change, and vice versa.

DOC Thailand (at Sidewalk Cafe’)

DOC Thailand (at Sidewalk Cafe’)

annyang! say hello to your new user interface
www.talater.com/annyang

annyang! say hello to your new user interface

www.talater.com/annyang