week 5 grid
- ไปที่ drive d ในโฟลเดอร์ชื่อเรา พิมพ์ cmd บน address bar
- ใช้คำสั่ง ionic start week5_grid blank เพื่อสร้างโปรเจ็คใหม่
- เนื่องจากมีการอัพเดท json ระบบจะให้กด y แล้ว enter
- พิมพ์ cd week5_grid
- พิมพ์ ionic serve เพื่อจำรองแอพบน browser
(ถ้าต้องการให้เปิดบน Google Chrome
ionic serve –browser “chrome”) - เปิด visual studio code แล้วเลือก file->open folder
แล้วเลือก week5_grid
ionic week 4
- เปิด cmd ในโฟลเดอร์ฺ เราแล้วพิมพ์ ionic start week4_alert blank
- cd week4_alert
- ionic serve
- ให้เปิดโปรเจคที่สร้างจากโปรแกรม visual studio code (เปิด visual studio code แล้วเลือก file->open folder)
- สร้างปุ่มเพื่อแสดงไอคอนบนปุ่ม (สามารถใช้ไอคอนได้จากเว็บ ionicons.com)
- ทำการปิด serve ใน cmd (กด ctrl+c ย้ำๆ)
- เปิด emulator ของ android ขึ้นมา
- กลับมาที่ cmd พิมพ์ฺ ionic cordova run android (จะเป็นการ build app บน simulate)
- แก้ไข icon โดยกลับไปที่โฟลเดอร์โปรเจ็คในโฟลเดอร์ resources หา icon.png ทำการเปิดด้วย photoshop แล้วปรับแต่งไอคอนให้สวยงาม แล้วเซฟทับของเดิม
- หลังจากนั้นให้พิมพ์ใน cmd ดังนี้ ionic cordova resources
- แล้วรันอีกที พิมพ์ฺ ionic cordova run android
- แก้ไขชื่อแอพโดยแก้ที่ไฟล์ config.xml
เปลี่ยน name กับ widget id เป็นชื่อแอพเรา แล้ว พิมพ์ฺ ionic cordova run android อีกครั้ง
week3 app page about home
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<ion-header> <ion-toolbar> <ion-title>about</ion-title> </ion-toolbar> </ion-header> <ion-content> <ion-card> <img src="assets/profile.jpg" /> <ion-card-header> <ion-card-title>sompoch kulthararom</ion-card-title> </ion-card-header> <ion-card-content> about me <br/> 1...<br/> 2...<br/> 3...<br/> </ion-card-content> </ion-card> <ion-button color="danger" href="/home"> home </ion-button> </ion-content> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<ion-header> <ion-toolbar> <ion-title> Ionic Blank </ion-title> </ion-toolbar> </ion-header> <ion-content> <div class="ion-padding"> <ion-button color="dark" href="http://kapook.com"> GO TO KAPOOK </ion-button> <ion-button color="danger" href="/about"> about </ion-button> </div> </ion-content> |
ionic week 3 การทำ icon splash screen และการทดสอบบน emulator
สร้าง project ใหม่
- เข้าไป drive d ในโฟลเดอร์ชื่อเราพิมพ์ cmd บน address bar ด้านบน
- cmd ที่ขึ้นมาพิมพ์ ionic start day3_icon blank แล้ว enter
- พิมพ์ cd day3_icon (หรือวิธีที่สอง copy ข้อความใน cmd โดยกด ctrl+c ในหน้าจอจะเป็น cd .\day3_icon ) แล้ว enter
- พิมพ์ ionic serve แล้ว enter เพื่อรองรัน app บน browser
- หยุด ionic serve โดยกด ctrl+ c ย้ำๆ (ctrl ค้างแล้วกด c ย้ำๆ บน keyboard)
- ionic cordova platform add android แล้ว enter ถ้า error ให้พิมพ์ใหม่ ถ้าทำสำเร็จจะพบ โฟลเดอร์ platform ในโปรเจค
กรณีที่ โฟลเดอร์ไม่มีโฟลเดอร์ android ด้านใน ต้องลบก่อนโดยพิมพ์ ionic cordova platform rm android แล้วถึงจะทวนคำสั่ง ionic cordova platform add android ใหม่ - กลับไปที่โฟลเดอร์ day3_icon จะมีโฟลเดอร์ resources (จะมีจากคำสั่งข้อที่ 6) ด้านในจะมี icon ให้คลิ้กขวาที่รูป icon ทำการแก้ไขโดย photoshop หลังจากนั้น save ทับอันเดิม (ชื่อ icon.png)
- เปิด cmd พิมพ์ ionic cordova resources แล้ว enter ระบบจะสร้าง icon ให้
- พิมพ์ ionic cordova run android (ต้องเปิด emu anroid ขึ้นมาก่อน)
ionic audio with HTML5
ไม่ต้องใช้ NativePlugin ก็ใช้ ความสามารถของ HTML5 เล่นเพลงได้เลย
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
import { Component } from '@angular/core'; import { NativeAudio } from '@ionic-native/native-audio/ngx'; @Component({ selector: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scss'] }) export class HomePage { audio: any; constructor(private nativeAudio: NativeAudio) { } ngOnInit() { this.audio = new Audio(); this.audio.src = "assets/audio/Reuben_s_Train.mp3"; this.audio.load(); } playAudio() { this.audio.play(); this.audio.loop = true; } stopAudio() { this.audio.pause(); } ngOnDestroy() { if(this.audio) { this.audio.pause(); this.audio = null; } } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<ion-header> <ion-toolbar> <ion-title>Home</ion-title> </ion-toolbar> </ion-header> <ion-content padding> <ion-button (click)="playAudio()"> Play Sound </ion-button> <ion-button (click)="stopAudio()"> Stop Sound </ion-button> </ion-content> |
natvieplugin.page.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
import { Component, OnInit } from '@angular/core'; import { Flashlight } from '@ionic-native/flashlight/ngx'; @Component({ selector: 'app-nativeplugin', templateUrl: './nativeplugin.page.html', styleUrls: ['./nativeplugin.page.scss'], }) export class NativepluginPage implements OnInit { constructor(private flashlight: Flashlight) { } openflash(){ this.flashlight.switchOn(); } ngOnInit() { } } |
app.module.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { RouteReuseStrategy } from '@angular/router'; import { IonicModule, IonicRouteStrategy } from '@ionic/angular'; import { SplashScreen } from '@ionic-native/splash-screen/ngx'; import { StatusBar } from '@ionic-native/status-bar/ngx'; import { AppComponent } from './app.component'; import { AppRoutingModule } from './app-routing.module'; import { Flashlight } from '@ionic-native/flashlight/ngx'; @NgModule({ declarations: [AppComponent], entryComponents: [], imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule], providers: [ Flashlight, StatusBar, SplashScreen, { provide: RouteReuseStrategy, useClass: IonicRouteStrategy } ], bootstrap: [AppComponent] }) export class AppModule {} |
code day 2
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<ion-header> <ion-toolbar> <ion-title>nativeplugin</ion-title> </ion-toolbar> </ion-header> <ion-content padding> <ion-button (click)="openflash()"> open flash light </ion-button> </ion-content> |
|
1 2 3 |
<ion-button shape="round" color="primary" fill="outline" href="/nativeplugin"> go to native plugin</ion-button> |
Recent Comments