มาติดตั้ง Ionic Framework กันเถอะ


หลังจากรู้จักกับเจ้า Ionic Framework กันไปแล้ว บทความนี้ เราจะมาทำการติดตั้งตัว Framework กัน แต่ก่อนหน้าที่เราจะติดตั้งตัว Framework ได้ เราต้องทำการติดตั้งซอฟท์แวร์ต่างๆ ที่จำเป็นเสียก่อน เนื่องจากตัว ionic framework นั้น ใช้ node.js เขียนสคริปต์สำหรับ command line ต่างๆ ไม่ว่าจะเป็นการสร้างโปรเจคหรือการ รัน App ของเราบนเว็บบราว์เซอร์ รวมถึงการรวม command line เข้ากับ PhoneGap หรือ Cordova ด้วย

1. ติดตั้ง Node.js

ขั้นแรกให้ดาวน์โหลด Node.js มาติดตั้งที่เครื่องก่อน หากใครใช้ Windows ให้โหลดตัวติดตั้งแบบไฟล์ install หากใครใช้ MacOS หรือ Linux ก็ใช้ command line ได้ตามที่ถนัดได้เลย

2. ติดตั้ง Java JDK

หากใครติดตั้งไว้แล้ว สามารถข้ามข้อนี้ไปได้เลยครับ
ผมแนะนำให้ search จาก google เอาครับ ไม่ได้ลงลิงค์ให้ เนื่องจากตัว URL อาจะมีการเปลี่ยนแปลง
ดาวน์โหลด Java JDK
ในรูปผมได้ เลือกดาวน์โหลด Java SE Development Kit 8 แต่หากใครต้องการลง Java SE Development Kit 7 ก็ได้นะครับ หลังจากเลือกแล้วจะนำเราไปหน้้าดาวน์โหลดดังรูปด้านล่างครับ
ยอมรับข้อตกลง และดาวน์โหลด
ให้เราเลือก Accept License Agreement เพื่อยอมรับข้อตกลง และดาวน์โหลด ตาม OS version ที่ลงไว้ครับ 32 bits หรือ 64 bits


3. ติดตั้ง Ant

Download Ant จาก Apache Ant
ให้ดาวน์โหลดจากตัว .zip ไฟล์ หรือหากใครพัฒนาบน MacOS หรือ Linux ก็เลือกดาวน์โหลดได้ตามใจชอบครับ หลังจากนั้นให้เรา แตกไฟล์ไปไว้ที่ไหนก็ได้ครับ แต่จำตำแหน่งที่เราแตกไป หลังจากนั้นให้เอา Path นี้ไปตั้งค่าใน System Variable ครับ ให้เราไปที่ Control Panel พิมพ์คำว่า System ลงในช่อง Search ครับ หลังจากนั้นคลิกที่ Edit the system environment variables

ตั้งค่า System Variable
หลังจากนั้นจะปรากฏหน้าจอหน้าจอให้เราตั้งค่าครับ ให้ทำตามขั้นตอนตามด้านล่างครับ
  • คลิก Environment Variables...

  • New...

  • ในช่อง Variable name ใส่คำว่า ANT_HOME
  • ในช่อง Variable value ใส่ Path ที่เราแตกไฟล์ Ant ไว้ ในที่นี่ผมสมมติว่าแตกไว้ที่ D:\ant นะครับ
  • กด OK

  • สร้างตัวแปร Path หากใครยังไม่มี คลิกปุ่ม New...
  • ช่อง Variable name ใส่คำว่า Path
  • ช่อง Variable value ใส่ว่า %ANT_HOME%\bin
  • ส่วนหากใครมีตัวแปร Path อยู่แล้วให้เลือกตัวแปร Path แล้วคลิกปุ่ม Edit... แทนปุ่น New...
  • กด OK


  • กด OK อีกที


4. ลง Android SDK

โหลด Android SDK จาก http://developer.android.com/sdk/ หลังจากนั้นทำการ แตกไฟล์ นำ Path ที่แตกไฟล์ไปตั้ง System Variable เช่นเดียวกับ การตั้งค่า Variable ให้ Ant

ช่อง Variable name ใส่คำว่า ANDROID_HOM แทน
ช่อง Variable value ใส่ Path ที่แตก android sdk ไว้ลงไป
หลังจากนั้นแก้ไข้ตัวแปร Path ใน System Variable เพิ่ม %ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools; ต่อท้ายในตัวแปร Path


ระหว่าง Path แต่ละอันให้ขั้นด้วยตัวอักษร ; (Semi colon) นะครับ
%XXX% หมายถึง System Variable ที่เราประกาศไว้ เช่น %ANT_HOME% จะอ้างไปยัง D:\ant เป็นต้น 
เพิ่ม Android SDK tools ลงในตัวแปร Path 

5. ลง Cordova

เนื่องจากเราลง npm แล้ว (จะติดตั้งมาพร้อมกับ Node.js นะครับ) ผมจะใช้คำสั่ง จาก command line แทนนะครับ
  • เปิด Dos ขึ้นมาก กดปุ่ม WinKey + R > พิมพ์ cmd ลงไป
  • พิมพ์คำสั่งตามด้านล่างลงไปครับ
npm install -g cordova

6. Ionic Framework ผ่าน npm (Node Package Manager)

ทำเช่นเดียวกับขั้นตอนที่ 5 ครับ แต่เปลี่ยนเป็น ionic แทน

npm install -g ionic
Tip: เราสามารถติดตั้ง cordova พร้อมกับ ionic ได้เลย ด้วยคำสั่ง
npm install -g cordova ionic
Seven Seconds Web Developer

Morbi aliquam fringilla nisl. Pellentesque eleifend condimentum tellus, vel vulputate tortor malesuada sit amet. Aliquam vel vestibulum metus. Aenean ut mi aucto.

No comments:

Post a Comment