IONIC FRAMEWORK Sompoch kulthararom

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

Install & Run ติดตั้ง Node.Js https://nodejs.org/en/ ตรวจสอบการติดตั้ง เปิด 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

Install & Run (ต่อ) 8. Java JDK https://www.oracle.com/technetwork/java/javase/downloads/index-jsp- 138363.html Check CMD>Javac

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

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

IONIC 4 Companents https://beta.ionicframework.com/docs/components#action-sheet Companents คือรูปร่างหน้าตาแอพ ที่จะปรับแต่ง UI ให้สวยงาม

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

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

Run ionic cmd>Ionic run android

Ionic create page cmd > ionic generate page about home ไปหน้า about https://angularfirebase.com/lessons/ionic-4-routing-and-navigation-guide/

Navigate With Parameter

ion-alert https://beta.ionicframework.com/docs/api/alert

Badge

Card & Item slide

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

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

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

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

App Native Flashlight ไฟฉาย https://beta.ionicframework.com/docs/native/flashlight home.page.ts import { Flashlight } from '@ionic-native/flashlight/ngx'; Constructor(private flashlight: Flashlight ) {} //use flashlightOn(){ this.flashlight.switchOn(); } flashlightOff(){ this.flashlight.switchOff(); app.module.ts import { Flashlight } from '@ionic-native/flashlight/ngx'; providers: [ Flashlight, ],

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

App Native Barcode

App คำนวน BMI

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