12/03/2559

ติดตั้ง ionic2 สำหรับพัฒนา Application

Ionic เป็น Framework ที่ได้รับความนิยมในการพัฒนา Mobile Application มากในปัจจุบัน ซึ่ง ณ ตอนนี้ ได้ออก Version 2 ออกกมาแล้ว ใบบทความนี้จะเสนอขั้นตอนการติดตั้ง Ionic2 สำหรับพัฒนาแอปพลิเคชั่น

1. Download และติดตั้ง Node JS จาก www.nodejs.org
2. ทดสอบว่าติดตั้ง Node JS สมบูรณ์หรือไม่โดยพิมพ์ npm ที่ command line ถ้าขึ้นขอความดังรูปแสดงว่าติดตั้ง Node JS เรียบร้อยแล้ว


3. พิมพ์คำสั่ง npm install -g cordova ดังรูป

4. เมื่อลง cordova แล้ว ให้พิมพ์คำสั่ง npm install -g cordova ionic เพื่อ ลง ionic

5. ทดสอบสร้าง Application โดย ไปที่ Folder Documents
พิมพ์ cd Documents กด enter และพิมพ์ ionic start --v2 myApp blank เพื่อสร้าง Aplication



6. พิมพ์  n 

7. พิมพ์ cd myApp เพื่อเข้าไปที่ folder project  และพิมพ์ ionic serve เพื่อ run Application หากมีหน้าต่างแจ้งเตือนให้กด Allow

ผลลัพธ์ที่ได้คือ  Application ดังรูป


8. ทดลองแก้  Header ของ Application  โดยไปที่  Documents > myApp > src > pages  และเปิดไฟล์ home.html โดย editor ใดก็ได้



9. แก้ code ในไฟล์ ้home.html เป็น

<ion-header>
  <ion-navbar color="secondary">
    <ion-title>My First Ionic2</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

</ion-content>

เมื่อ save แล้ว refresh web browser ผลลัพธ์ที่ได้ คือ