เราได้เข้าร่วมฝึกอบรมการสร้าง Mobile App ด้วย HTML5 , Angular JS และ Ionic Framework โดยวิทยากร NextFlow (บริษัทแอมอราวน์ จำกัด) คุณธีรเศรษฐ์ จิรภัทร์ชาญเดช สอนดีมากเลย ส่วนขั้นตอนการทำ Workshop รอคู่มือถัดไปจ้า...

1. ITSCI
www.itsci.mju.ac.th 31 สิงหาคม 2558
คู่มือการติดตั้งโปรแกรมสาหรับสร้าง
Mobile Application ด้วย HTML5 และ
Ionic Framework
S
จัดทำโดยอำจำรย์นงครำญ คำวิชัย
สำขำวิชำเทคโนโลยีสำรสนเทศ
คณะวิทยำศำตร์ มหำวิทยำลัยแม่โจ้

2. 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

3. NONGKRAN KHOMWICHAI 3 | P a g e
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

4. NONGKRAN KHOMWICHAI 4 | P a g e
2. ไฟล์ดาวน์โหลดจะเป็นไฟล์บีบอัดประเภทซิปไฟล์ ทาการแตกไฟล์ แล้วนำโปรแกรมไปวำงไว้ที่
ไดร์ C ดังภำพ (ทั้งนี้โปรแกรม Sublime Text ที่ได้จำกกำรดำวน์โหลดนี้จะเป็นเวอร์ชันทดลองใช้งำน)
3. ทดสอบเปิดโปรแกรม Sublime Text
หลังจำกติตตั้งโปรแกรม Sublime Text 3 เรียบร้อยแล้วต่อไปทำกำรติดตั้งส่วนเสริม หรือปลั๊ก
อิน หรือเรียกว่ำ Package สำหรับกำรใช้งำน Sublime Text

5. NONGKRAN KHOMWICHAI 5 | P a g e
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

6. NONGKRAN KHOMWICHAI 6 | P a g e
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

7. NONGKRAN KHOMWICHAI 7 | P a g e
2. ติดตั้ง Node JS
(NodeJS Package Manager บน Windows 8.1, 8, และ 7) หรือ npm
1. ดาวน์โหลดไฟล์โปรแกรม NodeJS จาก https://nodejs.org/download/ โดยเลือกให้ตรงกับ
ระบบปฏิบัติกำรที่ใช้งำน
2. ติดตั้ง NodeJS หรือ npm โดยกำรดับเบิ้ลคลิกไอคอนโปรแกรม ตำมขั้นตอนของ Wizard จนเสร็จ

8. NONGKRAN KHOMWICHAI 8 | P a g e
3. เปิดโปรแกรม Command Prompt พิมพ์คาสั่ง npm และตรวจสอบเวอร์ชันด้วยคาสั่ง npm –
version เพื่อทาการทาสอบการติดตั้งและทดสอบเวอร์ชั่นการใช้งาน

9. NONGKRAN KHOMWICHAI 9 | P a g e
3. ติดตั้ง Git สำหรับใช้งำน PhoneGap/Cordova Plugin
1. ดาวน์โหลดโปรแกรม Git จาก http://git-scm.com/download/win และดับเบิ้ลคลิกที่ไอคอน
โปรแกรม เพื่อติดตั้ง
2. ติดตั้งโปรแกรม Git ตามขั้นตอน Wizard จนสาเร็จ

10. NONGKRAN KHOMWICHAI 10 | P a g e
3. เลือกตามภาพ
4. กาหนดโฟล์เดอร์ของ Git

11. NONGKRAN KHOMWICHAI 11 | P a g e
5. เลือก Use Git from the Windows Command Prompt
6. เลือก Use OpenSSH

12. NONGKRAN KHOMWICHAI 12 | P a g e
7. เลือกกาหนด Checkout Window-style, commit Unix-Style line endings
8. เลือก Use MinTTY

13. NONGKRAN KHOMWICHAI 13 | P a g e
9. คลิกออก Enable file System caching
10. โปรแกรมทาการติดตั้ง

14. NONGKRAN KHOMWICHAI 14 | P a g e
11. เสร็จสิ้นการติดตั้ง Git
4. ติดตั้งชุดคำสั่ง Cordova CLI และ Ionic Framework
ต้องมีกำรดำวน์โหลด และติดตั้งชุดคำสั่งเอำไว้ใช้งำน (เรียก CLI) โดยต้องมีกำรเชื่อมต่อเครื่องที่ติดตั้ง
เข้ำกับ Internet โดยขั้นตอนนี้ใช้เวลำในกำรติดตั้งนำนพอสมควร ขึ้นอยู่กับควำมเร็วอินเตอร์เน็ท
ขั้นตอนโดยสรุป
1. เรำต้องมีกำรติดตั้ง NPM (Node Package Manager) ให้เรียบร้อยก่อน ถ้ำมีกำรลง Node JS ไว้
ให้เครื่องเรียบร้อยแล้วไปต่อขั้นตอนถัดไป
2. หลังจำกติดตั้งแล้ว ให้เปิดโปรแกรม Command Prompt ขึ้นมำแล้วพิมพ์คำสั่งลงไปด้ำนล่ำงลง
ไปแล้วกด Enter ทั้งนี้จะเป้นกำรสั่งดำวน์โหลดชุดคำสั่ง Cordova และ Ionic CLI มำติดตั้ง
เพิ่มเติม จะใช้เวลำพอสมควร

15. NONGKRAN KHOMWICHAI 15 | P a g e
รอกำรติดตั้ง ระหว่ำงนี้อัตรำเร็วในกำรติดตั้งขึ้นอยู่กับควำมเร็วของสัญญำณอินเตอร์เน็ตด้วย
3. เมื่อติดตั้งเสร็จแล้วให้กลับไปที่โปรแกรม Command Prompt แล้วทดสอบเรียกคาสั่ง

16. NONGKRAN KHOMWICHAI 16 | P a g e
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 ของโปรแกรม

17. NONGKRAN KHOMWICHAI 17 | P a g e
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 FilesJavajdk1.8.0_60
PATH : ; %JAVA_HOME%bin
ทดสอบการใช้งาน ว่าสามารถใช้งานได้หรือไม่ โดย Command Prompt คาสั่ง javac

18. NONGKRAN KHOMWICHAI 18 | P a g e
6. ติดตั้งโปรแกรม Android Studio
1. ดาวน์โหลดโปรแกรม Android Studio จาก http://developer.android.com/sdk/index.html
2. คลิกยอมรับข้อตกลง แล้วกดปุ่มดาวน์โหลด
3. ดับเบิ้ลคลิกที่ไอคอน ที่ดาวน์โหลดมา

19. NONGKRAN KHOMWICHAI 19 | P a g e
4. ติดตั้งตามขั้นตอนโปรแกรม Wizard
5. คลิกเลือกดังภาพ

20. NONGKRAN KHOMWICHAI 20 | P a g e
6. ให้ทาการ Copy PATH ที่อยู่ของ Android ไว้เพื่อไว้ใช้ต่อไป
7. กาหนดขนาดค่าของ Emulator เป็น 2GB

21. NONGKRAN KHOMWICHAI 21 | P a g e
8. เลือกโฟล์เดอร์สาหรับการจัดเก็บโปรแกรม Android Studio
9. โปรแกรมทาการติดตั้ง

22. NONGKRAN KHOMWICHAI 22 | P a g e
10. เสร็จสิ้นการติดตั้ง
11. การติดตั้งสาเร็จ ให้เลือก I do not have a previous version of studio or I do not want…
12. การติดตั้ง Android Studio Wizard คลิก install

23. NONGKRAN KHOMWICHAI 23 | P a g e
13. รอการติดตั้ง ในการติดตั้งนี้อาศัยความเร็วจากอินเตอร์เน็ตด้วย
14. การติดตั้งสาเร็จ

24. NONGKRAN KHOMWICHAI 24 | P a g e
15. พบกับหน้า Welcome to Android Studio แต่ขึ้นตอนนี้ยังไม่พร้อมการใช้งานต้องมีการ
ติดตั้ง PATH เพื่อเรียกใช้งาน ในข้อถัดไป
16. จากพาทที่ Copy ไว้ นามาวางเปิดที่ Window Explore
C:UsersnongkranAppDataLocalAndroidsdk

25. NONGKRAN KHOMWICHAI 25 | P a g e
17. จากนั้นทาการ Copy Path อีก 2 อันที่จาเป็นใช้จาก platform-tools และ tools
C:UsersnongkranAppDataLocalAndroidsdkplatform-tools
C:UsersnongkranAppDataLocalAndroidsdktools

26. NONGKRAN KHOMWICHAI 26 | P a g e
18. นาพาทที่อยู่ไฟล์ทั้งสองโฟล์เดอร์มาเชื่อมต่อกันด้วยเครื่องหมาย ,
19. แล้ว Copy Path ทั้งสองอันไปวางที่ PATH
C:UsersnongkranAppDataLocalAndroidsdkplatform-
tools;C:UsersnongkranAppDataLocalAndroidsdktools
20. เมื่อใส่พาทเสร็จแล้วให้ทดสอบการเรียกใช้งานด้วย Command Prompt ก็จะพบกับ
โปรแกรม Android Studio ที่พร้อมใช้งาน ถัดไป

27. NONGKRAN KHOMWICHAI 27 | P a g e
7. กำรติดตั้งระบบ Ant
1. ติดตั้งด้วยตนเอง Manual และการติดตั้งโดยใช้โปรแกรมช่วย Win Ant
https://code.google.com/p/winant/ คลิก download the latest version
2. ดับเบิ้ลคลิกที่ไอคอนโปรแกรมแล้วทาการติดตั้ง
3. ติดตั้งโปรแกรม Ant ด้วยขั้นตอน Wizard ของโปรแกรม

28. NONGKRAN KHOMWICHAI 28 | P a g e
4. คลิกเลือก Options การติดตั้งดับภาพ คลิก Next
5. กาหนด Java directory
6. กาหนดโฟล์เดอร์สาหรับติดตั้งโปรแกรม

29. NONGKRAN KHOMWICHAI 29 | P a g e
7. คาถามดังภาพคลิก OK
8. เป็นคาถามเกี่ยวกับการบริจาคเงิน คลิก No
ถ้าระบบติดตั้งเรียบร้อยจะออกมาเป็นดังนี้

30. NONGKRAN KHOMWICHAI 30 | P a g e
9. ติดตั้ง USB Driver ที่ตรงกับรุ่น/ยี่ห้อของอุปกรณ์ Android
สาหรับการทดสอบ Android Application ที่เราสร้างขึ้นบน Windows กับอุปกรณ์จริงนั้นจะมี
ขั้นตอนพิเศษกว่าบนเครื่องบน Max OSX
คือเราต้องลง USB Driver ที่ตรงกับรุ่น/ยี่ห้อ ของอุปกรณ์นั้น ๆ เพื่อให้ Windows รู้จักกับ
อุปกรณ์เรา และสามารถใช้คาสั่งของ PhoneGap/Cordova ในการทดลองแอพ Android ใน
เครื่องจริงของเราได้ http://developer.android.com/tools/extras/oem-usb.html

31. NONGKRAN KHOMWICHAI 31 | P a g e
หลักสูตรอบรมสร้าง Mobile App ด้วย HTML 5 และ Ionic Framework
http://nextflow.in.th/ โดย โค๊ชพล ธีรเศรษฐ์
บริษัทแอมอราวน์ จากัด
Reference