คู่มือการติดตั้งโปรแกรมสำหรับสร้าง...

ITSC

I

www.itsci.mju.ac.th 31 สิงหาคม 2558

คู่มือการติดตัง้โปรแกรมส าหรบัสร้าง Mobile Application ด้วย HTML5 และ

Ionic Framework

S

จดัท ำโดยอำจำรยน์งครำญ ค ำวิชยั

สำขำวิชำเทคโนโลยีสำรสนเทศ

คณะวิทยำศำตร ์มหำวิทยำลยัแม่โจ้

NONGKRAN KHOMWICHAI 2 | P a g e

Contents

1. ติดตัง้โปรแกรม Sublime Text ......................................................................................................... 3

2. ตดิตั้ง Node JS ............................................................................................................................... 7

3. ติดตัง้ Git ส ำหรับใช้งำน PhoneGap/Cordova Plugin ........................................................................ 9

4. ติดตัง้ชุดค ำสั่ง Cordova CLI และ Ionic Framework ....................................................................... 14

5. ตดิตั้ง Java Development Kit (JDK) .............................................................................................. 16

6. ติดตัง้โปรแกรม Android Studio .................................................................................................... 18

7. กำรติดตัง้ระบบ Ant ...................................................................................................................... 27

9. ติดตัง้ USB Driver ที่ตรงกับรุ่น/ยี่หอ้ของอุปกรณ์ Android ............................................................ 30

Content


sdf

1. ตดิต้ังโปรแกรม Sublime Text

Reference: http://nextflow.in.th/2015/how-to-prepare-sublime-for-ionic-framework-

development/

1. ดาวน์โหลด และติดตั้งโปรแกรม Sublime Text http://www.sublimetext.com/3 โดยเลือก

ดำวนโ์หลดใหต้รงกับคุณสมบัติระบบปฏิบัติกำร ในที่นี้ผูจ้ัดท ำเป็นระบบปฏิบัติกำร Window 64 bit

สร้าง Mobile App ด้วย HTML 5 และ Ionic Framework

Step By Step to Install Program

http://nextflow.in.th/2015/how-to-prepare-sublime-for-ionic-framework-development/

http://nextflow.in.th/2015/how-to-prepare-sublime-for-ionic-framework-development/

http://www.sublimetext.com/3


2. ไฟล์ดาวน์โหลดจะเป็นไฟล์บีบอัดประเภทซิปไฟล์ ท าการแตกไฟล์ แล้วน ำโปรแกรมไปวำงไว้ที่

ไดร์ C ดังภำพ (ทั้งนีโ้ปรแกรม Sublime Text ที่ได้จำกกำรดำวน์โหลดนีจ้ะเป็นเวอร์ชันทดลองใชง้ำน)

3. ทดสอบเปิดโปรแกรม Sublime Text

หลังจำกติตตั้งโปรแกรม Sublime Text 3 เรียบร้อยแลว้ต่อไปท ำกำรตดิตั้งส่วนเสริม หรอืปลั๊ก

อิน หรอืเรียกว่ำ Package ส ำหรับกำรใช้งำน Sublime Text


4. ติดตั้ ง Package Control โดยท าการ Copy ข้อความในกล่องที่อยู่ ในเว็บเพจ ต่อไปนี้

https://packagecontrol.io/installation โดยเลือก copy ตำมเวอร์ชันของ Sublime Text ที่ติดตั้งไป ในที่นี้

ติดตัง้เป็น Sublime Text 3

5. จากนั้นเปิด Console View ของโปรแกรม Sublime Text (เมนู View -> Show Console)

แล้วให้ Copy ข้อควำมไปวำงไว้ใน Console View แล้วกด Enter

https://packagecontrol.io/installation


6. Install Package ที่ต้องการใช้งาน

เปิดค ำสั่ง Command โดย Windows : Ctrl + Shift + P และ Mac : Cmd + Shift + P

พิมพ์ค ำว่ำ Install เพื่อค้นหำค ำสั่ง Package Control : Install Package แล้วกด Enter ระบบโหลดรำยชื่อ

Package (สังเกตจำกด้ำนล่ำงของโปรแกรม) ให้ค้นหำ และ install package ดังตอไปนี ้

รายชื่อ Package

1. AngularJS

2. Sidebar Enhancement

3. Ionic Framework Snippet (v.2.1)

4. All AutoComplete

5. AutoFileName

6. HTML-CSS-JS Prettify

7. Emment (ติดตั้งเสร็จแล้ว จะมีการติดตั้ง PyV8 เพิ่มเติม โยการแสดงสถานะด้านล่าง

โปรแกรมให้แน่ใจว่าติดตั้งเสร็จเรียบร้อยแล้ว แล้วท าการ Restart โปรแกรม)

7. ทดสอบการเรียกใช้งานโปรแกรม Sublime Text โดยการสร้างไฟล์ index.html


2. ตดิต้ัง Node JS

(NodeJS Package Manager บน Windows 8.1, 8, และ 7) หรอื npm

1. ดาวน์โหลดไฟล์โปรแกรม NodeJS จาก https://nodejs.org/download/ โดยเลือกให้ตรงกับ

ระบบปฏิบัติกำรที่ใชง้ำน

2. ติดตั้ง NodeJS หรอื npm โดยกำรดับเบิล้คลิกไอคอนโปรแกรม ตำมขั้นตอนของ Wizard จนเสร็จ

https://nodejs.org/download/


3. เปิดโปรแกรม Command Prompt พิมพ์ค าสั่ง npm และตรวจสอบเวอร์ชนัด้วยค าสั่ง npm –

version เพื่อท าการท าสอบการติดตั้งและทดสอบเวอร์ชั่นการใช้งาน


3. ตดิต้ัง Git ส ำหรับใช้งำน PhoneGap/Cordova Plugin

1. ดาวน์โหลดโปรแกรม Git จาก http://git-scm.com/download/win และดับเบิล้คลิกที่ไอคอน

โปรแกรม เพื่อติดตัง้

2. ติดตั้งโปรแกรม Git ตามขั้นตอน Wizard จนส าเร็จ

http://git-scm.com/download/win


3. เลือกตามภาพ

4. ก าหนดโฟล์เดอร์ของ Git


5. เลือก Use Git from the Windows Command Prompt

6. เลือก Use OpenSSH


7. เลือกก าหนด Checkout Window-style, commit Unix-Style line endings

8. เลือก Use MinTTY


9. คลิกออก Enable file System caching

10. โปรแกรมท าการติดตั้ง


11. เสร็จสิ้นการติดตั้ง Git

4. ตดิต้ังชุดค ำสั่ง Cordova CLI และ Ionic Framework

ต้องมีกำรดำวน์โหลด และติดตั้งชุดค ำสั่งเอำไว้ใช้งำน (เรียก CLI) โดยต้องมีกำรเชื่อมต่อเครื่องที่ติดตั้ง

เข้ำกับ Internet โดยขั้นตอนนี้ใชเ้วลำในกำรตดิตั้งนำนพอสมควร ขึน้อยู่กับควำมเร็วอินเตอรเ์น็ท

ขั้นตอนโดยสรุป

1. เรำตอ้งมีกำรตดิตั้ง NPM (Node Package Manager) ให้เรียบร้อยก่อน ถ้ำมีกำรลง Node JS ไว้

ให้เครื่องเรียบร้อยแลว้ไปต่อขั้นตอนถัดไป

2. หลังจำกติดตั้งแล้ว ให้เปิดโปรแกรม Command Prompt ขึ้นมำแล้วพิมพ์ค ำสั่งลงไปด้ำนล่ำงลง

ไปแล้วกด Enter ทั้งนี้จะเป้นกำรสั่งดำวน์โหลดชุดค ำสั่ง Cordova และ Ionic CLI มำติดตั้ง

เพิ่มเติม จะใช้เวลำพอสมควร


รอกำรตดิตั้ง ระหว่ำงนี้อัตรำเร็วในกำรตดิตั้งขึน้อยู่กับควำมเร็วของสัญญำณอินเตอร์เน็ตดว้ย

3. เมื่อติดตั้งเสร็จแล้วให้กลับไปที่โปรแกรม Command Prompt แล้วทดสอบเรยีกค าสั่ง


5. ตดิต้ัง Java Development Kit (JDK)

กอ่นติดตั้งโปรแกรม Android Studio ต้องติดตั้ง Java JDK โดยต้องติดตั้งให้ตรงกับเวอร์ชันของ

เคร่ือง ทั้งน้ีหากผู้ใช้เคยติดตั้งแล้ว ควรปรับปรุงติดตั้งใหม่เป็นเวอร์ชั่นล่าสุด

1. ดาวน์โหลดโปรแกรม http://www.oracle.com/technetwork/java/javase/downloads/jdk8-

downloads-2133151.html

2. ดับเบิ้ลคลิกที่ไอคอนโปรแกรมเพื่อท าการติดตั้ง

3. ติดตั้งโปรแกรม Java JDK ตามขั้นตอน Wizard ของโปรแกรม

http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html


4. ท าการ Copy PATH ที่อยู่ของโปรแกรม โดยไปทีไ่ดร์ C Program Files Java jdk

เวอร์ชันที่ติดตัง้ล่ำสุด คลิกที่แท็บ window url แล้ว Copy พำทที่อยู่ไปวำงไว้ที่โปรแกรม Notepad

ส ำหรับน ำไปใช้ก ำหนดค่ำใน Environment Variable.. ต่อไป

5. คลิกขวา Start -> System ->Advanced system Setting ->Environment Variable…

เพื่อสร้าง JAVA_HOME และวางค่าพาทที่อยู่ jdk ที่ใช้งานล่าสุด

New… : C:\Program Files\Java\jdk1.8.0_60

PATH : ; %JAVA_HOME%\bin

ทดสอบการใช้งาน ว่าสามารถใช้งานได้หรอืไม่ โดย Command Prompt ค าสั่ง javac


6. ตดิต้ังโปรแกรม Android Studio

1. ดาวน์โหลดโปรแกรม Android Studio จาก http://developer.android.com/sdk/index.html

2. คลิกยอมรับข้อตกลง แล้วกดปุ่มดาวน์โหลด

3. ดับเบิ้ลคลิกที่ไอคอน ที่ดาวน์โหลดมา

http://developer.android.com/sdk/index.html


4. ติดตั้งตามขั้นตอนโปรแกรม Wizard

5. คลิกเลือกดังภาพ


6. ให้ท าการ Copy PATH ที่อยู่ของ Android ไว้เพื่อไว้ใช้ต่อไป

7. ก าหนดขนาดค่าของ Emulator เป็น 2GB


8. เลือกโฟล์เดอร์ส าหรับการจัดเก็บโปรแกรม Android Studio

9. โปรแกรมท าการติดตั้ง


10. เสร็จสิ้นการติดตั้ง

11. การติดตั้งส าเร็จ ให้เลือก I do not have a previous version of studio or I do not want…

12. การติดตั้ง Android Studio Wizard คลิก install


13. รอการติดตั้ง ในการติดตั้งน้ีอาศัยความเร็วจากอินเตอร์เน็ตด้วย

14. การติดตั้งส าเร็จ


15. พบกับหน้า Welcome to Android Studio แต่ขึ้นตอนน้ียังไม่พร้อมการใช้งานต้องมีการ

ติดตั้ง PATH เพื่อเรยีกใช้งาน ในข้อถัดไป

16. จากพาทที่ Copy ไว้ น ามาวางเปิดที่ Window Explore

C:\Users\nongkran\AppData\Local\Android\sdk


17. จากนั้นท าการ Copy Path อีก 2 อันที่จ าเป็นใช้จาก platform-tools และ tools

C:\Users\nongkran\AppData\Local\Android\sdk\platform-tools

C:\Users\nongkran\AppData\Local\Android\sdk\tools


18. น าพาทท่ีอยู่ไฟล์ทั้งสองโฟล์เดอร์มาเชื่อมต่อกนัด้วยเคร่ืองหมาย ,

19. แล้ว Copy Path ทั้งสองอันไปวางท่ี PATH

C:\Users\nongkran\AppData\Local\Android\sdk\platform-

tools;C:\Users\nongkran\AppData\Local\Android\sdk\tools

20. เมื่อใส่พาทเสร็จแล้วให้ทดสอบการเรียกใช้งานด้วย Command Prompt ก็จะพบกับ

โปรแกรม Android Studio ที่พร้อมใช้งาน ถัดไป


7. กำรติดต้ังระบบ Ant

1. ติดตั้งด้วยตนเอง Manual และการติดตั้งโดยใช้โปรแกรมช่วย Win Ant

https://code.google.com/p/winant/ คลิก download the latest version

2. ดับเบิ้ลคลิกที่ไอคอนโปรแกรมแล้วท าการติดตั้ง

3. ติดตั้งโปรแกรม Ant ด้วยขั้นตอน Wizard ของโปรแกรม

https://code.google.com/p/winant/


4. คลิกเลือก Options การติดตั้งดับภาพ คลิก Next

5. ก าหนด Java directory

6. ก าหนดโฟล์เดอร์ส าหรับติดตั้งโปรแกรม


7. ค าถามดังภาพคลิก OK

8. เป็นค าถามเกี่ยวกับการบริจาคเงิน คลิก No

ถ้าระบบติดตั้งเรียบร้อยจะออกมาเป็นดังน้ี


9. ตดิต้ัง USB Driver ที่ตรงกับรุ่น/ยี่ห้อของอุปกรณ์ Android

ส าหรับการทดสอบ Android Application ที่เราสร้างข้ึนบน Windows กับอุปกรณ์จริงน้ันจะมี

ขั้นตอนพิเศษกว่าบนเคร่ืองบน Max OSX

คอืเราต้องลง USB Driver ที่ตรงกับรุ่น/ยี่ห้อ ของอุปกรณ์น้ัน ๆ เพื่อให้ Windows รู้จักกับ

อุปกรณ์เรา และสามารถใช้ค าสั่งของ PhoneGap/Cordova ในการทดลองแอพ Android ใน

เคร่ืองจริงของเราได้ http://developer.android.com/tools/extras/oem-usb.html

http://developer.android.com/tools/extras/oem-usb.html


หลักสูตรอบรมสร้าง Mobile App ด้วย HTML 5 และ Ionic Framework

http://nextflow.in.th/ โดย โค๊ชพล ธีรเศรษฐ์

บริษัทแอมอราวน์ จ ากัด

Reference

http://nextflow.in.th/

คู่มือการติดตั้งโปรแกรมสำหรับสร้าง...

Education