Mobile Application Development

งานนำเสนอเรื่อง: "Mobile Application Development"— ใบสำเนางานนำเสนอ:

1 Mobile Application Development

2 การพัฒนา Application on Mobile
1. Native App Android จะใช้ภาษา Java และ tool ที่ใช้เช่น Android Studio , Eclipse

3 iOS ใช้ภาษา Object-C และใช้ x-code ในการพัฒนา (โปรแกรมนี้จะมีเฉพาะบน Mac-OS เท่านั้น)

4 การพัฒนา Application บน Mobile แบบ Native App มี ความยากเกินไปสำหรับนักพัฒนา และถ้าต้องการให้ Application ที่พัฒนาลองรับหลาย Device Platform ด้วยแล้ว จึงเป็นเรื่องยากมาก เพราะต้องเรียนรู้หลายภาษาที่ใช้ใน การพัฒนา

5 2. Hybrid App PhoneGap / Cordova Mobile App ที่สร้างด้วย HTML5
Adobe ได้ซื้อ PhoneGap จาก nitobi และใช้ชื่อว่า Adobe PhoneGap ในปี 2011 Cordova เป็นอีกชื่อหนึงของ PhoneGap ที่ถูกมอบให้ Apache เป็น ผู้ดูแล ละยังคงเป็น Open source เหมือนเดิม Mobile App ที่สร้างด้วย HTML5 คือการสร้าง Web app บน mobile โดยใช้ HTML5 jQuery Mobile แบบเดียวกับ Mobile App ใช้ jQuery ในการสร้าง Wep app ที่ สามารถแสดงผลบน Mobile Device

6 Ionic Framework “แอพ iOS/Android ที่สร้างด้วย PhoneGap/Cordova มันไม่โดนใจ ใช่ไหม?” “Mobile App ที่สร้างด้วย HTML5 ยังลื่นไม่พอใช่ไหม?” “JQuery Mobile กากเกินไป?” ถ้าอย่างนั้น Ionic Framework อาจจะเป็นคำตอบสำหรับคุณ ด้วยการออกแบบโครงสร้าง HTML5, CSS, และ Java script ใหม่ล่าสุด ที่จะทำให้แอพมือถือที่สร้างด้วยการเขียนเว็บของคุณ หรูหรา ใช้ งานได้ง่าย แก้ไขโค้ดได้สะดวก และที่สำคัญ เร็วปรี๊ดดดดดด

7 เตรียมความพร้อมสำหรับ Ionic
ก่อนจะพัฒนา app ด้วย ionic framework จะต้องติดตั้ง tool ต่างๆดังนี้ ## สำหรับ Window & Android Device ## 1) Code Editor สำหรับพัฒนา Application atom เข้าไปดาวน์โหลดและติดตั้งได้ที่ เมื่อติดตั้งเสร็จแล้วจะต้องติดตั้ง Package ที่ใช้ดังนี้ - angularjs - atom-beautify - atomcomplete-paths - emmet - ionic-framework-snippets

8 2) Web Browser แนะนำใช้ Google Chrome
3) ติดตั้ง Node JS ( เพื่อใช้คำสั่ง npm ใน command promt 4) ติดตั้ง Git สำหรับใช้งาน PhoneGap/Cordova Plugin เข้าไปดาวน์โหลดที่ ขั้นตอนการติดตั้ง Git ให้กด Next ไปเรื่อยๆ จนถึง Adjustiong your PATH environment ให้เลือกตามภาพด้านล่าง หลังจากนั้นก็กด Next จน Finish และลองเปิด command promt และพิมพ์ git ลงไป

9 5) ติดตั้ง Cordova CLI และ Ionic Framework
เปิด Command promt ขึ้นมาแล้วพิมพ์ npm install -g cordova ionic แล้ว enter รอจนโหลดเสร็จและลองพิมพ์ ionic เพื่อทดสอบจะได้ดังภาพ ด้านล่าง

10 6) ติดตั้ง Java development Kit (JDK)
downloads html เลือก Windows X64 สำหรับ 64 BIT ถ้า 32 Bit ให้เลือก Windows X86 หลังจากดาวน์โหลดเสร็จแล้วให้กด Install และ Next ไปเรื่อยๆ จะเสร็จ

11 7) ตั้งค่า PATH ให้กับ Java development Kit (JDK)
เมื่อ Install JDK เรียบร้อยแล้วให้เปิด windows explorer แล้วไป ที่ C:\Program Files\Java\jdk1.8.0_65 (version ที่ลงอาจจะมีการ update) ทำการ Copy Path ด้านบน และหลังจากนั้นให้กดคลิ๊กขวาที่ My Computer ของเราและเลือก Properties เลือก Advanced system settings และเลือก Environment Variable กดปุ่ม New และใส่ JAVA_HOME ในช่อง Variable Name และใส่ Variable Path ที่ Copy มาลงไปด้านล่าง หลังจากนั้นให้แก้ไขตัวแปร PATH กด EDIT และเพิ่ม ;%JAVA_HOME%\bin ต่อท้าย (ดูภาพขั้นตอนการทำในหน้าถัดไป)

12

13

14

15 หลังจากนั้นให้เปิด Command prompt ขึ้นมาและพิมพ์ javac ถ้าตั้งค่าถูกจะไม่ Error ได้ผลดังภาพด้านล่าง

16 8) ติดตั้ง Android Studio (http://developer. android. com/sdk/index
8) ติดตั้ง Android Studio ( เมื่อดาวน์โหลดเสร็จให้กดติดตั้งกด Next จนถึงหน้า Android SDK Installation Location ให้ Copy Path ไว้และกด Next จน Finish

17 ให้เอา path ที่ copy มาพิมพ์ไว้ที่ Notepad เพิ่ม platform-tools ตามด้วย ; กับวาง path อีกครั้งและพิมพ์ tools ลงไป C:\Users\sompochkulthararom\AppData\Local\Android\sdk\platfo rm- tools;C:\Users\sompochkulthararom\AppData\Local\Android\sdk\ tools หลังจากนั้นให้กับไปที่ Advanced system setting->Environment Variable แล้ว EDIT PATH อีกครั้งใส่ ; แล้ว copy path ด้านบนที่ เตรียมไว้วางลงไป หลังจากนั้นลองเปิด Command prompt แล้ว พิมพ์ Android ลงไป จะพบกับหน้าจัดการ SDK Manager

18

19 เมือเปิด Android SDK Manager ขึ้นมาให้ Install Android SDK Build-Tools Version และ Android (API 22) ด้วย

20 9) เปิด Mode Developer Option ใน Android
10) ลง USB Device ของอุปกรณ์มือถือรุ่นนั้นๆ ##### เพิ่มเติม ##### ถ้าคุณนำเครื่อง MacBook + iOS มาทดสอบเข้าไปที่ for-ios-dev-html-5-phonegap-cordova-ionic-framework/ ถ้าคุณนำเครื่อง MacBook + Android มาทดสอบเข้าไปที่ phonegap-ionic-framework/

21 9) เปิด Mode Developer Option ใน Android
10) ลง USB Device ของอุปกรณ์มือถือรุ่นนั้นๆ 11) ติดตั้ง Ant 12) ติดตั้ง genymotion ##### เพิ่มเติม ##### ถ้าคุณนำเครื่อง MacBook + iOS มาทดสอบเข้าไปที่ ios-dev-html-5-phonegap-cordova-ionic-framework/ ถ้าคุณนำเครื่อง MacBook + Android มาทดสอบเข้าไปที่ ionic-framework/ ถ้าคุณนำเครื่อง Windows 8,7 + Android มาทดสอบเข้าไปที่ dev/

22