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.

Genelde atanan yanlış atama yöntemi aşağıdaki gibidir. Gerçek saat : “2018-09-15T22:42:24.161Z

Sonuç : “2018-09-15T19:42:24.161Z

Çözüm: Aşağıdaki gibi bir helper methodu ile sorun çözülür.

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

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.

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.

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.

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.

Örnek Kullanım Şekli:

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.

Kullanım şekli:

7-) Bilinmeyen Bir Servisten Sıralanmadan Gelen Datanın İsme Göre Performanslı Bir Şekilde Sıralanması:

8-) Sonsuz Scrollü Bir Arama Sayfası İçinde 100 Kayıttan Sonrasının Çekmemesi İçin Yapılması Gereken:


Methodun Çağrıldığı Yer :

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ı:

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:

Kullanım şekli:

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 :)

Çö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.

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/

Herkes Görsün:

Bunlar da hoşunuza gidebilir...

7 Cevaplar

  1. Tagi dedi ki:

    Güzel konular.
    Teşekkürler

  2. İsa dedi ki:

    İonic 4 icinde böyle güzel bilgiler bekliyoruz :)

  3. Kerim dedi ki:

    Eline sağlık Bora hocam.

  4. ramazan dedi ki:

    ionic 4 serisi yapacak mısınız?

Bir cevap yazın

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