Ionic Bir Uygulamada İşinize Yarayabilecek 10 İpucu
Selamlar,
Bu makalede Ionic mobile bir uygulamada işinize yarayabilecek 10 güzel ipucundan bahsetmek istiyorum.
1-) “toISOString()” ile Yanlış Zamanın Çekilmesi :
Ionic’de aşağıda gördüğünüz gibi bir tarih kontrolünde, “DealDate” değerini en başta o anki gün ve saat’in atanması istediğinde “toISOString()” ile Tarih kontrolü için olan çevirimden sonra, saat değerinin o anki saat’e göre 3 saat geride olduğu görülür.
|
1 2 |
<ion-datetime displayFormat="DD/MM/YYYY" pickerfORMAT="DD/MM/YYYY" [(ngModel)]="data.DealDate" class="my-date" [disabled]="true"></ion-datetime> |
Genelde atanan yanlış atama yöntemi aşağıdaki gibidir. Gerçek saat : “2018-09-15T22:42:24.161Z”
|
1 |
this.data.DealDate = new Date().toISOString(); |
|
1 |
console.log(new Date().toISOString()); |
Sonuç : “2018-09-15T19:42:24.161Z”
Çözüm: Aşağıdaki gibi bir helper methodu ile sorun çözülür.
|
1 2 3 4 5 6 7 |
this.data.DealDate = this.helper.GetCurrentDateTimeString(); GetCurrentDateTimeString(): string { var tzoffset = (new Date()).getTimezoneOffset() * 60000; //offset in milliseconds var localISOTime = (new Date(Date.now() - tzoffset)).toISOString().slice(0, -1); return localISOTime; } |
2-) Ekrana Çekilen Resmin Yanlış Orientation’da basılması:
Native camera ile Android ortamda çektiğiniz bir resim, ekrana yukarıdaki gibi yanlış bir pozisyonda geliyor ise, Camera özelliklerini aşağıdaki gibi yapınız. “EKLE” olarak belirtilen kısımlar, resmin ekrana yanlış basılmasını engellemektedir. Genişliğin 720 belirtilmesi sizin donanımınız için pek de önemli olmayabilir!
Çözüm: “encodingType: this.camera.EncodingType.JPEG“
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
takePicture() { let options: CameraOptions = { destinationType: this.camera.DestinationType.DATA_URL, sourceType: this.camera.PictureSourceType.CAMERA, EKLE ==> encodingType: this.camera.EncodingType.JPEG, EKLE ==> targetHeight: 720, EKLE ==> targetWidth: 720, saveToPhotoAlbum: false, quality: 50, //allowEdit: true, correctOrientation: true }; this.camera.getPicture(options).then((imageData) => { this.data.ImageData = imageData; this.base64Image = "data:image/jpeg;base64," + this.data.ImageData; this.data.ImageGuid = this.helper.GetGuid(); }, (err) => { console.log(err); }); } |
3-) 2 Sayfa Arasındaki Parametre Alışverişinden Sonra, İlgili NavParams Değerinin Silinmesi:
Diyelim ki Update sayfasındaki “ionViewWillLeave()” methodundan==> Detail sayfasındaki “ionViewWillEnter()” methoduna değişen datayı aşağıdaki gibi gönderelim:
Update.html: Bir önceki sayfaya “isUpdateDeal” değişkeni ve “data” gönderilmektedir.
|
1 2 3 4 |
ionViewWillLeave() { this.navCtrl.getPrevious().data.isUpdateDeal = this.isUpdateDeal; this.navCtrl.getPrevious().data.deal = this.data; } |
Detail.html: Eğer “Detail” sayfasına, “Update” sayfasından gelinmiş ise “isUpdateDeal” değeri “true” olacaktır. Fakat eğer ilgili değişken silinmez ise , daha sonradan örneğin Ana sayfadan yine Detail sayfasına gelinir ise, hata alınacaktır. Bunu engellemek için ilgili parametrenin, “this.navParams.data.deal = null” şeklinde temizlenmesi gerekmektedir.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
async ionViewWillEnter() { //Sayfa yeni mi yükleniyor? Yoksa "Deal" sayfasından mi gelindi bakılır. var isUpdateDeal = this.navParams.get('isUpdateDeal'); if (isUpdateDeal) { let loader = this.loadingController.create( { content: 'Görüşme Güncelleniyor..', dismissOnPageChange: true }); loader.present().then(() => { this.data = <DealModel>this.navParams.get('deal'); EKLE ==> this.navParams.data.isUpdateDeal = null; EKLE ==> this.navParams.data.deal = null; }); } } |
4-) Eğer Ionic Mobile Bir Projede Guid Oluşturmak İstenir ise:
Örneğin çekilen bir resme Unique bir isim verilmesi istenir ise, aşağıdaki gibi bir helper methodu kullanılabilir.
|
1 2 3 4 5 |
GetCurrentDateTimeString(): string { var totalMiliseconds = (new Date()).getTimezoneOffset() * 60000; var currentISOTime = (new Date(Date.now() - totalMiliseconds)).toISOString().slice(0, -1); return currentISOTime; } |
5-)Eğer Bir Text içinden Html Tagleri Temizlemek İsterseniz Aşağıdaki Gibi Bir Helper Methodu Kullanabilirsiniz:
Örneğin aranılan bir kelime, bulunulan isimler içinde bold yani kalın hale getirildi. Şimdi de seçilen ismideki bu html kodun temizlenmesi gerekiyor. Bunun için aşağıdaki helper methodu kullanılabilir.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
private cleanTag(html: string) { if (!html) { return ""; } return html.replace(/<(?:.|\n)*?>/gm, ''); } private removeBrSlash(html: string) { if (!html) { return ""; } return html.replace(/<br( \/|\/|)>/gm, '\r\n'); } public removeHTMLTag(html: string) { return this.cleanTag(this.removeBrSlash(html)); } |
Örnek Kullanım Şekli:
|
1 2 3 |
ionViewWillLeave() { this.navCtrl.getPrevious().data.selectedCustomerName = this.helper.removeHTMLTag(this.selectedCustomerName); } |
6-) Ekrana Basılan Bir Text Alanın, Belli Bir Max Boyuta Göre Kısıtlanması:
Örneğin ekrana sığmayan adres bilgisi, aşağıdaki Pipe yani filter ile istenen bir boyuta kısaltılabilir.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'Short' }) export class ShortPipe implements PipeTransform { constructor() { } transform(value: string, length: number = 20): string { if (value!=null && value!="" && value.length > 20) { return value.substring(0, length) + ".."; } else { return value; } } } |
Kullanım şekli:
|
1 2 3 4 |
<ion-col width-80 style="text-align: right"> <p>{{deal.EmployeeName | Short}}</p> <p>{{deal.CustomerName | Short}}</p> </ion-col> |
7-) Bilinmeyen Bir Servisten Sıralanmadan Gelen Datanın İsme Göre Performanslı Bir Şekilde Sıralanması:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
public getLocations() { this.service.getLocationList(this.customerId).then(result => { this.loader.dismiss(); this.locationList = result.List.sort((a, b) => { if (a.Name < b.Name) return -1; if (a.Name > b.Name) return 1; return 0; }); }); } |
8-) Sonsuz Scrollü Bir Arama Sayfası İçinde 100 Kayıttan Sonrasının Çekmemesi İçin Yapılması Gereken:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
doInfinite(infiniteScroll: InfiniteScroll) { this.page += 1; console.log(this.page); if (this.queryCustomer.length > 2 || this.queryCustomer.length == 0) { this.service.getDealList(this.selectedCustomerID, this.page, this.pageSize, this.queryCustomer).then(result => { this.dealList = this.dealList.concat(result.List); infiniteScroll.complete(); if (this.dealList.length > 100) { infiniteScroll.enable(false); this.scroll = infiniteScroll; } }); } } |
Methodun Çağrıldığı Yer :
|
1 2 3 4 |
<ion-infinite-scroll (ionInfinite)="doInfinite($event)" threshold="100px"> <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Daha fazla kayıt..."> </ion-infinite-scroll-content> </ion-infinite-scroll> |
8.1-) Yine Aynı Sonsuz Scrollü Arama Sayfası İçinde, Scroll Yapılıp Sayfanın Aşağısına Gelinmiş İse, Yeni Bir Arama Durumunda Scroll’ü Sayfanın Başına Çıkartılması:
|
1 2 3 4 5 6 7 |
public getDealsByCustomer() { if (this.queryCustomer.length > 2 || this.queryCustomer.length == 0) { this.page = 0; EKLE ==> this.content.scrollToTop(); if (this.scroll != null) this.scroll.enable(true); } } |
9-) Projede Kullanılan Google Harita “<agm-map>”‘in Sayfaya Konulduğu Halde Gözükmemesi:
Css’de ekrana basılan haritanın “width”‘inin mutlaka 100 % olarak ayarlanması gerekmektedir.
showAddress.scss:
|
1 2 3 4 5 6 |
agm-map { height: 200px; width:100%; opacity:0; transition: opacity 150ms ease-in; } |
Kullanım şekli:
|
1 2 3 4 5 |
<div *ngIf="data.Latitude && data.Longitude"> <agm-map [latitude]="ConvertNumber(data.Latitude)" [longitude]="ConvertNumber(data.Longitude)"> <agm-marker [latitude]="ConvertNumber(data.Latitude)" [longitude]="ConvertNumber(data.Longitude)"></agm-marker> </agm-map> </div> |
10-) Son Olarak Size .Net Core Bir WebApi Servisden Gelen Datanın Kolonları “camelCase” İse Ve Sizin Modelinize Uymuyor İse:
Kesinlik ile aşağıdaki gibi bir çözüm’e GİTMEYİN! Sorun sizde değil, .Net Core WebApi Servisindedir :)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
this.data = new DealModel(); this.data = <DealModel>this.navParams.get('data'); this.data.CustomerID = this.navParams.get('data')["customerId"]; this.data.DealDate = new Date(this.data.DealDate).toISOString(); this.data.CreateDate = this.navParams.get('data')["createDate"]; this.data.CustomerName = this.navParams.get('data')["customerName"]; this.data.DealDate = new Date(this.navParams.get('data')["dealDate"]).toISOString(); this.data.DealNote = this.navParams.get('data')["dealNote"]; this.data.EmployeeName = this.navParams.get('data')["employeeName"]; this.data.EmployeeID = this.navParams.get('data')["employeeId"]; this.data.ImageData = this.navParams.get('data')["imageData"]; this.data.ImageGuid = this.navParams.get('data')["imageGuid"]; this.data.Latitude = this.navParams.get('data')["latitude"]; this.data.LocationID = this.navParams.get('data')["locationId"]; this.data.LocationName = this.navParams.get('data')["locationName"]; this.data.Longitude = this.navParams.get('data')["longitude"]; this.data.SalesmanID = this.navParams.get('data')["salesmanId"]; this.data.SalesmanName = this.navParams.get('data')["salesmanName"]; this.data.ImageUrl = this.navParams.get('data')["imageUrl"]; this.data.ID = this.navParams.get('data')["id"]; this.data.OperationID = this.navParams.get('data')["operationId"]; this.data.OperationName = this.navParams.get('data')["operationName"]; |
Çözüm:
Startup.cs/ ConfigureServices(): .Net Core WebApi servisinde, aşağıdaki kodun konfigürasyona eklenmesi ile, tüm kolonlar camelCase olmadan tanımlandığı hali ile gelecektir.
|
1 2 3 4 |
services.AddMvc() .AddJsonOptions(options => options.SerializerSettings.ContractResolver = new DefaultContractResolver()); |
Geldik bir makalenin daha sonuna. Bu makalede size, Ionic Mobile bir uygulama yazarken, işinize yarayabilecek 10 ipucundan bahsettim.
Yeni bir makalede görüşmek üzere hepinize hoşçakalın.
Kaynaklar: https://ionicframework.com/docs/ , https://stackoverflow.com/questions/10830357/javascript-toisostring-ignores-timezone-offset , https://forum.ionicframework.com/t/how-to-remove-html-tags-from-content/78011/2 , https://ionicframework.com/docs/native/
Güzel konular.
Teşekkürler
Ben teşekkür ederim…
İonic 4 icinde böyle güzel bilgiler bekliyoruz :)
Eline sağlık Bora hocam.
Eyvallah Kerim
ionic 4 serisi yapacak mısınız?
Yeniliklerini anlatacağım…