Ionic Native Typescript
Selamlar,
Ionic NATIVE:
Ionic Native, üzerinde çalıştığı makinanın yani bu makalede Mobile cihazın özelliklerine erişmek için kullanılan pluginler topluluğudur. Tamamı ile cross platform çalışan, Ios için Objective-C ve Swift, Android için Java ve son olarak Windows Phone için C# ile yazılmış birçok plugin topluluğundan oluşmaktadır. Native toolara ait detaylı bilgiye, buradan erişebilirsiniz. Örneğin kamerayı kullanma, bulunulan geo location’a erişim, acceleration denilen, telefonun 3 boyutta hareket ettirilmesini algılama gibi bir çok özelliğe bu Cordova/PhoneGap pluginleri sayesinde, sorunsuzca erişilebilir.
Bu makalede belli başlı Native pluginleri incelenecektir. Bir plugin projeye dahil edildiği zaman, aşağıda görüldüğü gibi plugins klasörünün altına kaydedilir.
1-) Vibration : Telefonun titreşimini sağlamak amacı ile kullanılan bir plugindir. Buradan da incelenebilir.
- “ionic cordova plugin add cordova-plugin-vibration” ile ilgili plugin projeye katılmış olunur.
- “sudo npm install –save @ionic-native/vibration” İlgili dosyalar nodeJs ile indirilmiş olunur.
- “ionic generate page Vibration” : Titreşim yapılacak sayfa aşağıdaki gibi oluşturulur.
vibration.html: Ana sayfaya 2 button konmuştur.1 tanesi tek titreşim, 2.si belirli bir süre titreşim yapmaktadır. Not: 2.adım Ios’da çalışmamaktadır.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!-- Generated template for the VibrationPage page. See http://ionicframework.com/docs/components/#navigation for more info on Ionic pages and navigation. --> <ion-header> <ion-navbar> <ion-title>Vibration</ion-title> </ion-navbar> </ion-header> <ion-content padding> <button ion-button full (click)="vibrate()">Vibrate</button> <button ion-button full (click)="vibrateRhythm()">Vibrate Rhythm</button> </ion-content> |
vibration.ts: IOS ortamında duration çalışmamaktadır.
- “import { Vibration } from ‘@ionic-native/vibration’‘” : İlgili kütüphane import ile eklenir.
- “constructor(public navCtrl: NavController, public navParams: NavParams,private vibration: Vibration)” : Constructer’da “Vibration” kütüphanesi private olarak “vibration” değişkenine dependency injection ile tanımlanır.
- “this.vibration.vibrate(1000)” : 1 sn süre ile titrer. Tüm platformlarda çalışır.
- “this.vibration.vibrate([2000,1000,500])” : 2sn titrer 1sn bekler, 1.5sn tekrardan titrer.
|
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 |
import { Component } from '@angular/core'; import { IonicPage, NavController, NavParams } from 'ionic-angular'; import { Vibration } from '@ionic-native/vibration'; @IonicPage() @Component({ selector: 'page-vibration', templateUrl: 'vibration.html', }) export class VibrationPage { constructor(public navCtrl: NavController, public navParams: NavParams,private vibration: Vibration) { } ionViewDidLoad() { console.log('ionViewDidLoad VibrationPage'); } //1 sn süre ile titrer. //Hepsinde çalışır. vibrate(){ this.vibration.vibrate(1000); } //2sn titrer 1sn bekler 1.5sn gene titrer. //Sadece Android ve Windows'da çalışır. vibrateRhythm(){ this.vibration.vibrate([2000,1000,500]); } } |
vibration.module.ts:
- “import { Vibration } from “@ionic-native/vibration”” : Vibration kütüphanesi import ile eklenir.
- “providers :[ Vibration ]” : İlgili kütüphane modules içinde provider altında tanımlanır.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
import { NgModule } from '@angular/core'; import { IonicPageModule } from 'ionic-angular'; import { VibrationPage } from './vibration'; import { Vibration } from "@ionic-native/vibration"; @NgModule({ declarations: [ VibrationPage, ], imports: [ IonicPageModule.forChild(VibrationPage), ], providers :[ Vibration ] }) export class VibrationPageModule {} |
Şimdi gelin ilgili sayfayı app.html altına menu olarak koyalım:
app.html: Ekelenen satır.
|
1 |
<button menuClose ion-item (click)="goVibration()"> <ion-icon name="pulse"></ion-icon>Vibration</button> |
app.component.ts: Eklenen yönlendirme goVibration() methodu.
|
1 2 3 |
goVibration() { this.nav.push(VibrationPage); } |
app.module.ts: Son olaraka projeye ekelenen sayfa app.module’e de aşağıdaki gibi tanımlanır.
|
1 2 3 4 5 6 |
import { VibrationPageModule } from "../pages/vibration/vibration.module"; imports: [ .... VibrationPageModule ]. |
2-) Camera : Telefonun kamerasına erişmek için kullanılan bir plugin’dir. Daha detaylı bilgiye buradaki linkden ulaşabilirsiniz.
- “ionic cordova plugin add cordova-plugin-camera” ile ilgili plugin projeye katılmış olunur.
- “sudo npm install –save @ionic-native/camera” İlgili dosyalar nodeJs ile indirilmiş olunur.
- “ionic generate page Camera” : Kamera ile resim çekilecek sayfa aşağıdaki gibi oluşturulur.
camera.html: Ana sayfaya 1 tane resim çek şeklinde(Take Picture) button konmuştur. tıklanma anında “takePicture()” methodu çağrılacaktır. Hemen altına çekilen resim “imgSrc” değişkenine atanacaktır. Eğer resim var ise ilgili resim “<img [src]=”imgSrc”>” şeklinde ekrana yukarıda görüldüğü gibi basılacaktır.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<ion-header> <ion-navbar> <ion-title>Camera</ion-title> </ion-navbar> </ion-header> <ion-content padding> <button ion-button full (click)="takePicture()">Take Picture</button> <ion-card *ngIf="imgSrc"> <img [src]="imgSrc"> </ion-card> </ion-content> |
camera.ts: Telefonun kamerasına erişilp resim çekilme ve çekilen resmin ekrana basılması işlerinin yapıldığı yerdir.
- “import { Camera, CameraOptions } from ‘@ionic-native/camera‘” : İlgili kütüphaneler import ile eklenir.
- “constructor(public navCtrl: NavController, public navParams: NavParams, private camera: Camera)” : Constructer’da “Camera” kütüphanesi private olarak “camera” değişkenine dependency injection ile tanımlanır.
- “takePicture()” methodunda resim çekilecek camera.getPicture() methodu için gerekli optionlar yaratılıp, resim çekilir.
- “let options: CameraOptions = {” : Camera optionları bu değişkene tanımlanır.
- destinationType : Çekilen resmin url’i ==>”this.camera.DestinationType.FILE_URI” alınır.
- sourceType : Telefonun kamerası ==>”this.camera.PictureSourceType.CAMERA” seçilir. “this.camera.PictureSourceType.PHOTOLIBRARY” seçilse idi, kayıtlı resimler içinde seçim yapılabilirdi.
- encodingType : Resim tipi “PNG” veya “JPG” olarak seçilir. “this.camera.EncodingType.PNG“
- targetHeight, targetWidth : Çekilecek resmin width ve height’i belirlenir.
- saveToPhotoAlbum : Çekilen resim telefona kaydedilsin mi?
- “this.camera.getPicture(options).then((imgageUri) => {” : Çekilen resmşn file_uri’si imageUri değişkenine aktarılır.
- “this.imgSrc = imgageUri” : İlgili resmin uri’si “imgSrc” değişkenine atanır.
|
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 |
import { Component } from '@angular/core'; import { IonicPage, NavController, NavParams } from 'ionic-angular'; import { Camera, CameraOptions } from '@ionic-native/camera'; @IonicPage() @Component({ selector: 'page-camera', templateUrl: 'camera.html', }) export class CameraPage { imgSrc: any; constructor(public navCtrl: NavController, public navParams: NavParams, private camera: Camera) { } ionViewDidLoad() { console.log('ionViewDidLoad CameraPage'); } takePicture() { let options: CameraOptions = { destinationType: this.camera.DestinationType.FILE_URI, sourceType: this.camera.PictureSourceType.CAMERA, encodingType: this.camera.EncodingType.PNG, targetHeight: 500, targetWidth: 500, saveToPhotoAlbum: false }; this.camera.getPicture(options).then((imgageUri) => { this.imgSrc = imgageUri; }); } } |
camera.module.ts:
- “import { Camera } from “@ionic-native/camera”” : Camera kütüphanesi import ile eklenir.
- “providers :[ Camera ]” : İlgili kütüphane modules içinde provider altında tanımlanır.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
import { NgModule } from '@angular/core'; import { IonicPageModule } from 'ionic-angular'; import { CameraPage } from './camera'; import { Camera } from "@ionic-native/camera"; @NgModule({ declarations: [ CameraPage, ], imports: [ IonicPageModule.forChild(CameraPage), ], providers :[ Camera ] }) export class CameraPageModule {} |
Şimdi gelin ilgili sayfayı app.html altına menu olarak koyalım:
app.html: Ekelenen satır.
|
1 |
<button menuClose ion-item (click)="goCamera()"> <ion-icon name="camera"></ion-icon>Camera</button> |
app.component.ts: Eklenen yönlendirme goCamera() methodu.
|
1 2 3 |
goCamera() { this.nav.push(CameraPage); } |
app.module.ts: Son olaraka projeye ekelenen sayfa app.module’e de aşağıdaki gibi tanımlanır.
|
1 2 3 4 5 6 |
import { CameraPageModule } from "../pages/camera/camera.module"; imports: [ .... CameraPageModule ]. |
3-) Geolocation : Telefon üzerindeki gps’e erişip, hangi konumda olunduğunu bulan plugindir. Biz bu örnekde konumumuzu bulup aynı zamanda bir harita üzerinde de göstereceğiz. Daha detaylı bilgiye buradaki linkden ulaşabilirsiniz.
- “ionic cordova plugin add cordova-plugin-geolocation ile ilgili plugin projeye katılmış olunur.
- “– sudo npm install –save @ionic-native/geolocation” İlgili dosyalar nodeJs ile indirilmiş olunur.
- “– ionic generate page geo-location” : Bulunulan konumu gösterecek sayfa aşağıdaki gibi oluşturulur.
İlgili harita uygulaması için ise “AGM – Angular Google Maps” kullanılmıştır. Eski paket adı “angular2-google-maps” yeni paket adı “@agm/core“‘dur. Öncelikle Google harita uygulamasının kullanılabilmesi için yandaki linkden ==> “https://developers.google.com/maps/documentation/javascript/get-api-key” bir Api Key’in alınması gerekmektedir.
- https://console.cloud.google.com adresine gelin.
- Eğer projeniz yok ise yaratın, eğer birden fazla var ise sol üstten alttaki gibi seçin.
- Soldaki menuden ==>
seçilir. Açılan menuden de ==> 
seçilir. - Açılan ekrandan, başta oluşturulan apiKey ==>
şekildeki gibi görülür. - “npm install @agm/core –save” : İlgili age map module projeye yüklenir. Detaylı bilgiye buradan erişilebilir.
Oluşan geo-location page altında:
geo.location.module.ts: Aşağıda görüldüğü gibi, Google Cloud Platform / APIs sayfası altında görünen Map key aşağıdaki gibi tanımlanır. Map Key’in, ilgili component’ın altındaki module de tanımlanması gerekmektedir. “app.module.ts”‘de tanımlanması hataya neden olmaktadır.
Not: Map key’in Google tarafındaki ismi apiKey nasıl görünüyor ise, aşağıdaki tanımlama sayfasında da aynı şekilde yazılmalıdır.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
import { NgModule } from '@angular/core'; import { IonicPageModule } from 'ionic-angular'; import { GeoLocationPage } from './geo-location'; import { Geolocation } from '@ionic-native/geolocation'; import { AgmCoreModule } from "@agm/core"; @NgModule({ declarations: [ GeoLocationPage, ], imports: [ IonicPageModule.forChild(GeoLocationPage), AgmCoreModule.forRoot({ apiKey: '**********************' }) ], providers: [ Geolocation ] }) export class GeoLocationPageModule { } |
geo-location.html: Aşağıda görüldüğü gibi “location” bilgisi çekildiği zaman ==> *ngIf=”location” ile var olup olmadığına bakılır.
- “<button ion-button full (click)=”getGeoLocation()”>GET GEOLOCATION</button>” : Tıklanma durumunda “getGeoLocation()” methodu ile bulunulan lokasyon bilgisi alınır.
- “<agm-marker [latitude]=”location.lat” [longitude]=”location.lng”></agm-marker> </agm-map>” : Harita üzerinde işaretlenecek olan kordinatların enlem (latitude) ve boylam (longitude) bilgisi girilerek, bulunulan konumun işaretlenmesi sağlanır.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<ion-header> <ion-navbar> <ion-title>GeoLocation</ion-title> </ion-navbar> </ion-header> <ion-content padding> <button ion-button full (click)="getGeoLocation()">GET GEOLOCATION</button> <div *ngIf="location"> <h3>Latitude: {{location.lat}}</h3> <h3>Longitude: {{location.lng}}</h3> <agm-map [latitude]="location.lat" [longitude]="location.lng"> <agm-marker [latitude]="location.lat" [longitude]="location.lng"></agm-marker> </agm-map> </div> </ion-content> |
geo-location.ts: Aşağıda görüldüğü gibi “AgmCoreModule ve Geolocation” kütüphaneleri harita ve bulunulan lokasyonun gösterilmesi için sayfaya eklenmiştir.
- “constructor(public navCtrl: NavController, public navParams: NavParams, private geolocation: Geolocation)” İlgili kütüphaneler constructer’da dependency injection ile projeye eklenir.
- “getGeoLocation()” : Methodunda “this.geolocation.getCurrentPosition().then((res) => {” ==> Enlem ve boylam bilgisi çekilir.
- “this.location = { lat: res.coords.latitude, lng: res.coords.longitude, zoom: 12, markerLabel: “You are here!” };”: İlgili enlem boylam alanları, zoom haritanın yakınlık miktarı ve bulunulan konum yazısı bu şekilde tanımlanır.
|
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 |
import { Component } from '@angular/core'; import { IonicPage, NavController, NavParams } from 'ionic-angular'; import { Geolocation } from '@ionic-native/geolocation'; import { AgmCoreModule } from '@agm/core'; @IonicPage() @Component({ selector: 'page-geo-location', templateUrl: 'geo-location.html', }) export class GeoLocationPage { map: any; location: { lat: number, lng: number, zoom: number, markerLabel: string }; constructor(public navCtrl: NavController, public navParams: NavParams, private geolocation: Geolocation ) { } ionViewDidLoad() { console.log('ionViewDidLoad GeoLocationPage'); } getGeoLocation() { this.geolocation.getCurrentPosition().then((res) => { this.location = { lat: res.coords.latitude, lng: res.coords.longitude, zoom: 12, markerLabel: "You are here!" }; }); } } |
*geo-location.sccs: Eğer css tanımlanmaz ise harita sayfada gözükmez. Not: Bu nedenle genişlik(width) : 100% verilmez ise harita sayfa üzerinde gözükmemektedir.
|
1 2 3 4 5 6 7 8 |
page-geo-location { agm-map { height: 300px; width:100%; opacity:0; transition: opacity 150ms ease-in; } } |
Şimdi gelin ilgili sayfayı app.html altına menu olarak koyalım:
app.html: Ekelenen satır.
|
1 |
<button menuClose ion-item (click)="goGeoLocation()"> <ion-icon name="locate"></ion-icon>Geolocation</button> |
app.component.ts: Eklenen yönlendirme goGeoLocation() methodu.
|
1 2 3 |
goGeoLocation() { this.nav.push(GeoLocationPage); } |
app.module.ts: Son olaraka projeye ekelenen sayfa app.module’e de aşağıdaki gibi tanımlanır.
|
1 2 3 4 5 6 |
<span class="pl-k">import</span> { <span class="pl-smi">GeoLocationPageModule</span> } <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">"</span>../pages/geo-location/geo-location.module<span class="pl-pds">"</span></span>; imports: [ .... <span class="pl-smi">GeoLocationPageModule</span> ]. |
4- )Device Motion : Mobile cihazın sağ, sola, öne ve arkaya hareketlerini algılayan jiroskop özelliğinden gelen datanın okunduğu api dir. Daha detaylı bilgiye buradaki linkden ulaşabilirsiniz.
- “ionic cordova plugin add cordova-plugin-device-motion” ile ilgili plugin projeye katılmış olunur.
- “sudo npm install –save @ionic-native/device-motion” İlgili dosyalar nodeJs ile indirilmiş olunur.
- “ionic generate page dvcmotion” : Cihaz hareketlerini algılayacak sayfa aşağıdaki gibi oluşturulur.
dvcmotion.html:
- “<button ion-button full (click)=”startMonitor()”>Start Motion</button>” : startMonitor() methodu ile ölçüm işine başlanır.
- “<button ion-button full color=”secondary” (click)=”stopMonitor()”>Stop Motion</button>” : Ölçüm işine son verilir.
- “<ion-card *ngIf=”data”>”: data değişkeni dolu ise cihazın X,Y,Z kordinatları anlık olarak ekrana basılır.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<ion-header> <ion-navbar primary> <button menuToggle> <ion-icon name="menu"></ion-icon> </button> <ion-title>Device Motiom</ion-title> </ion-navbar> </ion-header> <ion-content padding> <button ion-button full (click)="startMonitor()">Start Motion</button> <button ion-button full color="secondary" (click)="stopMonitor()">Stop Motion</button> <ion-card *ngIf="data"> <ion-card-content> <h2>x: {{data.x | number:'1.4-4'}}</h2> <h2>y: {{data.y | number:'1.4-4'}}</h2> <h2>z: {{data.z | number:'1.4-4'}}</h2> </ion-card-content> </ion-card> </ion-content> |
dvcmotion.ts: Aşağıda görüldüğü gibi “DeviceMotion, DeviceMotionAccelerationData, DeviceMotionAccelerometerOptions” kütüphaneleri sayfaya import olarak eklenir.
- “startMonitor()” : “var option: DeviceMotionAccelerometerOptions = { frequency: 200 }” : 200 milisaniyede bir data çekilir.
- “this.subscription = this.deviceMotion.watchAcceleration(option).subscribe((acceleration: DeviceMotionAccelerationData) => { this.data = acceleration; })” : 200milisaniyede bir çekilen cihazın pozisyon bilgisi, “data” değişkenine aktarılır.
- “stopMonitor()” : “this.subscription.unsubscribe();” monitor işlemine son verilir.
|
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 |
import { Component } from '@angular/core'; import { IonicPage, NavController, NavParams } from 'ionic-angular'; import { DeviceMotion, DeviceMotionAccelerationData, DeviceMotionAccelerometerOptions } from "@ionic-native/device-motion"; @IonicPage() @Component({ selector: 'page-dvcmotion', templateUrl: 'dvcmotion.html', }) export class DvcmotionPage { data: any; subscription: any; constructor(public navCtrl: NavController, public navParams: NavParams, private deviceMotion: DeviceMotion) { } ionViewDidLoad() { console.log('ionViewDidLoad DvcmotionPage'); } public startMonitor() { var option: DeviceMotionAccelerometerOptions = { frequency: 200 }; this.subscription = this.deviceMotion.watchAcceleration(option).subscribe((acceleration: DeviceMotionAccelerationData) => { this.data = acceleration; }); } public stopMonitor() { this.subscription.unsubscribe(); } } |
Şimdi gelin ilgili sayfayı app.html altına menu olarak koyalım:
app.html: Ekelenen satır.
|
1 |
<button menuClose ion-item (click)="goMotion()"><ion-icon name="game-controller-b"></ion-icon>Device Move</button> |
app.component.ts: Eklenen yönlendirme goGeoLocation() methodu.
|
1 2 3 |
goMotion() { this.nav.push(DvcmotionPage); } |
app.module.ts: Son olaraka projeye ekelenen sayfa app.module’e de aşağıdaki gibi tanımlanır.
|
1 2 3 4 5 6 |
import { DvcmotionPageModule } from "../pages/dvcmotion/dvcmotion.module"; imports: [ .... <span class="pl-smi">DvcmotionPageModule</span> ]. |
5-)Barcode Scanner: Bir barkod’un taranması ve taranan barkod bilgisine göre ürünün aranması için kullanılan bir plugindir. Daha detaylı bilgiye buradaki linkden ulaşabilirsiniz.
- “ionic cordova plugin add phonegap-plugin-barcodescanner“ ile ilgili plugin projeye katılmış olunur.
- “– sudo npm install –save @ionic-native/barcode-scanner” İlgili dosyalar nodeJs ile indirilmiş olunur.
- “– ionic generate page barcode” : Bulunulan konumu gösterecek sayfa aşağıdaki gibi oluşturulur.
barcode.html: Aşağıda görüldüğü gibi “scanBarcode()” methodu ile kamera açılıp scan işlemi yapılır.
- Eğer results dolu ise : Barcode formatı : “<h2>Format: {{results.format}}</h2>” ile ekrana basılır.
- Barcode’a ait text ise: “<h2>Text: {{results.text}}</h2>” ile ekrana basılır.
- “<button ion-button full (click)=”lookup()”>Lookup</button>”: ==> İlgili barcode bilgisine “lookup()” methodu ile erişilir.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<ion-header> <ion-navbar> <ion-title>Barcode</ion-title> </ion-navbar> </ion-header> <ion-content padding> <button ion-button full (click)="scanBarcode()">SCAN</button> <button ion-button full (click)="reset()" color="secondary">RESET</button> <div *ngIf="results"> <h2>Format: {{results.format}}</h2> <h2>Text: {{results.text}}</h2> <button ion-button full (click)="lookup()">Lookup</button> </div> </ion-content> |
barcode.ts: Scan buttonu tıklandığı zaman :
- “this.barcodeScanner.scan().then((barcodeData) =>” : Kamera açılarak barkod tarama işlemine başlanır.
- “this.results = barcodeData” : Dönen barkod değeri ilgili results değişkenine atanır.
- “lookup()==> window.open(
http://www.upcindex.com/${this.results.text}, ‘_system’)” : İlgili methodda, taratılan ürün için web sayfası açılır.
|
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 |
import { Component } from '@angular/core'; import { IonicPage, NavController, NavParams } from 'ionic-angular'; import { BarcodeScanner } from '@ionic-native/barcode-scanner'; /** * Generated class for the BarcodePage page. * * See http://ionicframework.com/docs/components/#navigation for more info * on Ionic pages and navigation. */ @IonicPage() @Component({ selector: 'page-barcode', templateUrl: 'barcode.html', }) export class BarcodePage { results: any; constructor(public navCtrl: NavController, public navParams: NavParams, private barcodeScanner: BarcodeScanner) { } ionViewDidLoad() { console.log('ionViewDidLoad BarcodePage'); } public scanBarcode() { this.barcodeScanner.scan().then((barcodeData) => this.results = barcodeData ), (err) => { alert('Error : ${err}'); } }; public reset() { this.results = null; } public lookup() { window.open(`http://www.upcindex.com/${this.results.text}`, '_system'); } } |
Şimdi gelin ilgili sayfayı app.html altına menu olarak koyalım:
app.html: Ekelenen satır.
|
1 |
<button menuClose ion-item (click)="goBarcode()"><ion-icon name="barcode"></ion-icon>Barcode Scanner</button> |
app.component.ts: Eklenen yönlendirme goBarcode() methodu.
|
1 2 3 |
goBarcode() { this.nav.push(BarcodePage); } |
app.module.ts: Son olaraka projeye ekelenen sayfa app.module’e de aşağıdaki gibi tanımlanır.
|
1 2 3 4 5 6 |
<span class="pl-k">import</span> { <span class="pl-smi">BarcodePageModule</span> } <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">"</span>../pages/barcode/barcode.module<span class="pl-pds">"</span></span>; imports: [ .... BarcodePageModule ]. |
Local Notification : Mobil cihaz üzerindeki bildirimlerin gözükmesi için kulanılan bir plugindir. Daha detaylı bilgiye buradaki linkden ulaşabilirsiniz.
- “ionic cordova plugin add de.appplant.cordova.plugin.local-notification“ ile ilgili plugin projeye katılmış olunur.
- “– sudo npm install –save @ionic-native/local-notifications” İlgili dosyalar nodeJs ile indirilmiş olunur.
- “– ionic generate page notification” : Cihaz üzerindeki uyarıları gösterecek sayfa aşağıdaki gibi oluşturulur.
notification.html: “<button ion-button full (click)=”setupNotification()”>Setup Notification</button>” İlgili button tıklanınca, notify olarak fırlatılacak mesajlar hazılanır ve gösterilir.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<ion-header> <ion-navbar primary> <button menuToggle> <ion-icon name="menu"></ion-icon> </button> <ion-title>Notification</ion-title> </ion-navbar> </ion-header> <ion-content padding> <button ion-button full (click)="setupNotification()">Setup Notification</button> <h2>{{results}}</h2> </ion-content> |
notification.ts: Uyarı mesajlarının yaratılıp gösterildiği yerdir. Aşağıda peş peşe 2 tane mesaj gösterilmektedir.
- “this.localNotifications.schedule([{” : Oluşturulacak mesajların gösterilmesini sağlar.
- id: 1 mesaj tekil numarası, title: Mesajın başında çıkacak başlık, sound: Mesaj çıkarken çalınacak uyarı sesi, data: { id = mesaj ID, name: Gösterilecek mesaj’ın kendisi }
|
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 |
import { Component } from '@angular/core'; import { IonicPage, NavController, NavParams, Platform } from 'ionic-angular'; import { LocalNotifications } from '@ionic-native/local-notifications'; @IonicPage() @Component({ selector: 'page-notification', templateUrl: 'notification.html', }) export class NotificationPage { results: string; constructor(public navCtrl: NavController, public navParams: NavParams, private localNotifications: LocalNotifications, private platform: Platform) { this.localNotifications.on('click', notification => { var data = JSON.parse(notification.data); this.results = data.name; alert(`Notification recevied! (${data.name})`) }) } ionViewDidLoad() { console.log('ionViewDidLoad NotificationPage'); } setupNotification() { this.localNotifications.schedule([{ id: 1, title: 'Test Notification', text: 'Well Done CoderBora', sound: this.platform.is('ios') ? 'file://sound.mp3' : 'file://beep.caf', data: { id: 13, name: 'Master of Proude' } }, { id: 2, title: 'Test Notification 2', text: 'Second Notify CoderBora', sound: this.platform.is('ios') ? 'file://sound.mp3' : 'file://beep.caf', data: { id: 14, name: 'Second Master of Proude' } }]); } } |
Şimdi gelin ilgili sayfayı app.html altına menu olarak koyalım:
app.html: Ekelenen satır.
|
1 |
<button menuClose ion-item (click)="goNotify()"><ion-icon name="notifications"></ion-icon>Setup Notify</button> |
app.component.ts: Eklenen yönlendirme goBarcode() methodu.
|
1 2 3 |
goNotify() { this.nav.push(NotificationPage); } |
app.module.ts: Son olaraka projeye ekelenen sayfa app.module’e de aşağıdaki gibi tanımlanır.
|
1 2 3 4 5 6 |
import { NotificationPageModule } from "../pages/notification/notification.module"; imports: [ .... NotificationPageModule ]. |
Geldik bir yazı dizisinin daha sonuna. Bu makalede, Ionic ile Native olarak nerde ise yapamıyacağımız şey olmadığını güncel örnekler ile gördük. Ionic mobile uygulamalarda ister performansı, ister ise kod geliştirme kolaylığı ile olsun benim ilk tercihim. Sizin de mutlaka bir fırsat vermenizi şiddet ile tavsiye ederim.
Yeni bir makalede görüşmek üzere hoşçakalın.
Source: https://ionicframework.com/docs/native
Source Code: https://github.com/borakasmer/IonicTeamsManagement
Hocam çok faydalı olmuş. En ihtiyaç olan pluginler. Emeğinize sağlık
Teşekkürler..
İonic kendi dokumantosyonunda bile böylü güzel anlatılmamış.
Ellerinize sağlık..
İonic ile bağlı mekalenizi sabırsızlıkla bekliyorum.
Teşekkür ederim :)
Çok kral adamsın
Hocam merhabalar ionic4 ile barkod okuma programı yapıyorum. Ama barkod okuyucu sadece 1 tane barkod okuyup tekrar geri geliyor. Aynı kamera ekranında birden çok barkod okumayı nasıl yapabilirim.