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.

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.

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.

Şimdi gelin ilgili sayfayı app.html altına menu olarak koyalım:

app.html: Ekelenen satır.

app.component.ts: Eklenen yönlendirme goVibration() methodu.

app.module.ts: Son olaraka projeye ekelenen sayfa app.module’e de aşağıdaki gibi tanımlanır.

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.

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.

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.

Şimdi gelin ilgili sayfayı app.html altına menu olarak koyalım:

app.html: Ekelenen satır.

app.component.ts: Eklenen yönlendirme goCamera() methodu.

app.module.ts: Son olaraka projeye ekelenen sayfa app.module’e de aşağıdaki gibi tanımlanır.

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.

  • 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.

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.

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.

*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.

Şimdi gelin ilgili sayfayı app.html altına menu olarak koyalım:

app.html: Ekelenen satır.

app.component.ts: Eklenen yönlendirme goGeoLocation() methodu.

app.module.ts: Son olaraka projeye ekelenen sayfa app.module’e de aşağıdaki gibi tanımlanır.

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.

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.

Şimdi gelin ilgili sayfayı app.html altına menu olarak koyalım:

app.html: Ekelenen satır.

app.component.ts: Eklenen yönlendirme goGeoLocation() methodu.

app.module.ts: Son olaraka projeye ekelenen sayfa app.module’e de aşağıdaki gibi tanımlanır.

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.

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.

Şimdi gelin ilgili sayfayı app.html altına menu olarak koyalım:

app.html: Ekelenen satır.

app.component.ts: Eklenen yönlendirme goBarcode() methodu.

app.module.ts: Son olaraka projeye ekelenen sayfa app.module’e de aşağıdaki gibi tanımlanır.

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.

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 }

Şimdi gelin ilgili sayfayı app.html altına menu olarak koyalım:

app.html: Ekelenen satır.

app.component.ts: Eklenen yönlendirme goBarcode() methodu.

app.module.ts: Son olaraka projeye ekelenen sayfa app.module’e de aşağıdaki gibi tanımlanır.

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 Code: https://github.com/borakasmer/IonicTeamsManagement

Herkes Görsün:

Bunlar da hoşunuza gidebilir...

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir