IONIC FRAMEWORK Sompoch kulthararom.

งานนำเสนอเรื่อง: "IONIC FRAMEWORK Sompoch kulthararom."— ใบสำเนางานนำเสนอ:

1 IONIC FRAMEWORK Sompoch kulthararom

2 สมโภชน์ กุลธารารมณ์บรรจุ นายทหารสัญญาบัตร (อัตรา ร. อ
สมโภชน์ กุลธารารมณ์บรรจุ นายทหารสัญญาบัตร (อัตรา ร.อ.) อาจารย์ประจำแผนกการสอน กองวิทยาการศูนย์ไซเบอร์ทหาร กองบัญชาการกองทัพไทย

3 Install & Run ติดตั้ง Node.Js ตรวจสอบการติดตั้ง เปิด cmd พิมพ์ npm -v ติดตั้ง ionic framework เปิด cmd พิมพ์ npm install ionic cordova –g สร้างโปรเจ็คใหม่ ใน cmd พิมพ์ ionic start myapp blank (blank,tabs,sidemenu) ใน cmd พิมพ์ ionic serve –I (-i คือเปิด Browser แบบหน้าจอมือถือได้) (stop กด Ctrl+c) ติดตั้ง Visual Studio Code ติดตั้ง android studio ลองรันบน emulator ที่มากับ android studio ถ้า error licene

4 Install & Run (ต่อ) 8. Java JDK html Check CMD>Javac

5 Install & Run (ต่อ) 9. ตั้งค่า Enveronment Variable ให้กับ android sdk ที่ลง android studio ไว้

6 Install Code Editor VS Code Install Extension
Angular 6 and TypeScript/HTML VS Code Snippets Npm Intellisense Path Intellisense

7 IONIC 4 Companents Companents คือรูปร่างหน้าตาแอพ ที่จะปรับแต่ง UI ให้สวยงาม

8 Platform add ios/android
ionic cordova platform [<action>] [<platform>] [options] ionic cordova platform add android ถ้าต้องการยกเลิก ionic cordova platform rm ios

9 Icon & splash screen เป็นการตั้งรูปไอคอนของแอพ (icon) และหน้าจอเวลาโหลดเข้าหน้าแอพ (splash) icon.png ขนาด 1024×1024px splash.png ขนาด 2732×2732px  โดยทั้งคู่จะเก็บไว้ในฟอรเดอร์ resources (จะต้องใช้คำสั่ง platform add ก่อนถึงจะมี)

10 Run ionic cmd>Ionic run android

11 Ionic create page cmd > ionic generate page about
home ไปหน้า about

12 Navigate With Parameter

13 ion-alert

14 Badge

15

16 Card & Item slide

17 Ionic cordova run android -l
แล้วเจอ Error ให้เปิด Android Studio แล้วไปกดอัพเดท SDK จะมีแจ้งให้เปิด ถ้า Build ได้แต่ Error ไม่เปิด Emulator ให้ไป Create AVD ใหม่ แล้วเลือก

18 ngModel เพื่อรับส่งค่า

19 App คำนวนเลข สร้าง textbox 2 อันและปุ่มกด เมื่อกดปุ่มให้ เอาตัวเลขสองอันมาคูณกัน

20 App Native Vibration https://ionicframework.com/docs/native/vibration/
Edit Error>npm install home.page.ts import { Vibration } from import { Platform } from private vibration: Vibration,private platform: Platform) {} //use this.vibration.vibrate(1000); app.module.ts import { Vibration } from providers: [ Vibration, ], สังเกต native สำหรับ ionic4 รุ่น beta จะมี /ngx

21 App Native Flashlight ไฟฉาย
home.page.ts import { Flashlight } from Constructor(private flashlight: Flashlight ) {} //use flashlightOn(){ this.flashlight.switchOn(); } flashlightOff(){ this.flashlight.switchOff(); app.module.ts import { Flashlight } from providers: [ Flashlight, ],

22 https://beta.ionicframework.com/docs/native/backlight

23 App Native Barcode

24 App คำนวน BMI

25 App บันทึกข้อมูลลงใน SQLite
สร้าง textbox ใส่ ข้อความและบันทึกลงฐานข้อมูล