คู่มือการติดตั้ง IONIC FRAMEWORK

1.ติดตั้ง Node.Js https://nodejs.org/en/ ตรวจสอบการติดตั้ง  เปิด cmd พิมพ์ npm -v

2.ติดตั้ง ionic framework เปิด cmd พิมพ์ npm install ionic cordova –g

3. ทำการดาวนโหลด Visual Studio Code https://code.visualstudio.com/docs/?dv=win และกดติดตั้ง

4. สร้างฟอร์เดอร์ใน drive c: ตั้งชื่อ ionic และเข้าไปในฟอรเดอร์

บน address bar พิมพ์ cmd เพื่อเปิดใช้ cmd และพิมพ์คำสั่ง ionic start app 1 blank เพื่อสร้าง app 1

5.ทำการเข้าไปฟอร์เดอร์ app1 และพิมพ์ cmd บน address bar และพิมพ์ ionic serve

6.กด Ctrl+Shift+i เพื่อจำลองหน้าจอมือถือบน Google Chrome

7.ทำการโหลด JDK จาก https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html และติดตั้ง

8.ทำการคลิ๊กขวาที่ My Computer และเลือก Advance System Settings และเลือก Environment Variable กด New ใส่

หลังจากนั้น edit Path

และทดลองเปิด cmd พิมพ์ Javac ใน cmd จะแสดงคำสั่ง javac

10. ทำการแก้ไข Path อีกที เพิื่อเอา Android SDK มาใส่ ให้ cmd รู้จัก โดยเปิด Android Studio ขึ้นมาและ Create New Project แล้วกด Next ๆ ไปจน เข้าหน้าจอที่มีเมนู file->Settings->System Setting->Android SDK ทำการ Copy Path SDK มา ดังภาพ

หลังจากนัั้นไป My Comp วาง Path ที่ก๊อปมาลง เพื่อเข้าไปเอา Path สอง Path มาวางใน Environment Variable ตรง Path  คือ C:\Users\SCIRMUTP\AppData\Local\Android\Sdk\platform-tools และ C:\Users\SCIRMUTP\AppData\Local\Android\Sdk\tools

แล้วเปิด cmd ลองพิมพ์ android จะพบกับคำสั่ง android ขึ้นมา

11. สร้าง AVD โดยใน android studio ให้เลือกเมนู tools แล้วเลือก AVD แล้วกด Create New แล้วเลือก Nexus 5x เลือก New Image แล้วเลือกแบบ x86_x64 android 9.0 หลังจากนั้นจะโหลด แล้วพร้อมทำการเปิด Emulator ขึ้นมาพร้อมทำงาน ถ้าเปิด AVD  ไม่ได้ ให้ไป SDK เพิ่ม

12. กลับมาที่ฟอร์เดอร์โปรเจ็คให้เปิด cmd แล้วพิมพ์ ionic cordova platform add android –save

หลังจากนั้นพิมพ์ ionic cordova run android ถ้าไม่ติดอะไร จะมีหน้า emulator เปิดแอพเราขึ้นมาบนอุปกรณ์แอนดรอย์ที่สร้างขึ้น

13. แก้ไข icon แสดงในหน้าจอ และ splashscreen (Back Ground) โดยไปที่ฟอร์เดอร์แอพ ใน ฟอร์เดอร์ Resourcess จะมี icon.png กับ splash.png ให้แก้ แล้วใช้คำสั่ง ionic cordova resources ถ้าถามให้กรอก อีเมลกับพาสให้ไปสมัครใน ionicframework.com แล้วกรอกข้อมูลลงไป ฟรี

By admin

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.