Meteor #3: สร้างโปรเจคแอพ To-do List ง่ายๆ

หลังจากติดตั้ง Meteor ลงในเครื่องเราเรียบร้อยแล้ว (Windows|Mac OS X) เราจะมาลองสร้างเว็บแอพ ช่วยจำงานง่ายๆ อย่าง To-do List กัน

โดยขั้นตอนจะแบ่งออกดังนี้ครับ

1. สร้าง folder เก็บโปรเจค Meteor ของเรา
2. สร้างโปรเจค To do โดยอาศัย template ตัวอย่าง
3. ทดสอบรันโปรเจค แบบ Web Application
4. แก้ไขหน้าเว็บ และเห็นผลทันที

1. สร้าง folder เก็บโปรเจค Meteor ของเรา

โดยให้เราสร้าง folder ขึ้นมาอันหนึงบน Desktop (จะได้ดูที่เดียวกัน) ชื่อ MyApp

จากนั้นบน Windows ให้กด Shift ค้างไว้ แล้วคลิกขวาที่ folder ‘MyApp‘ แล้วเลือกคำสั่ง Open Command Windows Here เพื่อเปิดโปรแกรม Command Prompt

ส่วนบน Mac OS X ให้เปิดโปรแกรม Terminal แล้วค่อยลาก folder ‘My App‘ ไปวางบนไอคอนของโปรแกรม Terminal ครับ

2. สร้างโปรเจค To do โดยอาศัย template ตัวอย่าง

พอเรามาอยู่ใน Command Line แล้ว ให้รันคำสั่งด้านล่าง เพื่อสร้างโปรเจค To do list

meteor create simple-todos

ระบบ Meteor ก็จะทำการดาวน์โหลดโปรเจคมาไว้ใน folder ‘MyApp‘ ของเรา

หลังจากเสร็จแล้ว Command Line ก็จะพร้อมรอคำสั่งต่อไปของเรา

3. ทดสอบรันโปรเจค แบบ Web Application

ระบบ Meteor นั้นมี Web server จำลองมาให้ในตัว เราสามารถเข้าไปสั่งเปิดได้จากใน folder โปรเจคของเราครับ

cd simple-todos

meteor

จากนั้นระบบก็จะแสดงขึ้นมาให้เห็นว่า Web server ของเราทำงานอยู่ที่ Url Address ไหน Port ไหน

เราก็สามารถเปิดเข้าไปที่เว็บได้จาก Web browser ได้เลย

4. แก้ไขหน้าเว็บ และเห็นผลทันที

และในขณะที่ Web server ของ Meteor เปิดอยู่นั่นเอง การแก้ไขไฟล์ใดๆ ในโปรเจค ก็จะทำให้ตัว Web browser นั้นรีเฟรชตัวเอง ให้ได้ผลลัพธ์ล่าสุด ตรงตามไฟล์ที่เราแก้ไขนั้นเอง

ลองแก้ไขข้อความใน <h2>  ดู

<h2>สวัสดี Teerasej</h2>

จะเห็นว่าใน Web browser เป็นค่าใหม่ทันที

สรุปในส่วนแบบเรียนรู้ Meteor #3: สร้างโปรเจคแอพ To-do List ง่ายๆ

จะเห็นว่าระบบของ Meteor มีการใช้ open source หลายๆ ส่วนมาช่วยให้การทำงานเราง่ายขึ้น จากการใช้คำสั่งผ่าน Command Line เราได้:

1. สร้าง folder เก็บโปรเจค Meteor ของเรา
2. สร้างโปรเจค To do โดยอาศัย template ตัวอย่าง
3. ทดสอบรันโปรเจค แบบ Web Application
4. แก้ไขหน้าเว็บ และเห็นผลทันที

มาดูตอนต่อไปกันครับ ว่าระบบ Meteor ทำงานได้อย่างไร

สามารถดูรายการเรียนรู้ใช้งาน Meteor Framework ได้ทั้งหมดที่นี่ครับ