Fiori uygulaması geliştirirken dikkat edilmesi gerekenler

 

Fiori konusuna yıllarını vermiş biri olarak sektörde bu işe yeni başlamış veyabaşlayacak olanlara, müşteri konumunda olup Fiori uygulaması geliştirme hizmeti alacak olanlara bir takım tavsiyelerde bulunmak ve buz dağının arkasında ne tür tehlikelerin bizleri beklediği konusunda uyarılar yapmak istiyorum.

Öncelikle şunu belirtmek isterim ki her UI5 uygulaması maalesef bir Fiori uygulaması olamıyor. Bir Fiori uygulamasında şu 5 ana özelliğin mutlaka bulunması gerekiyor;

  1. Role-based: Uygulama sadece tek bir role göre geliştirilmeli birden farklı rol için birden fazla uygulama geliştirilmeli
  2. Responsive: Uygulama her türlü cihazda çalışabilecek şekilde geliştirilmeli
  3. Simple: Kullanımı kolay olmalı, kullanıcı bir şey yapmak için eziyet çekmemeli, 1-1-3 dediğimiz 1 kullanıcı, 1 senaryo, en fazla 3 seviyeli ekran prensibine bağlı kalınmalı
  4. Coherent: Diğer Fiori uygulamalarından farklı bir yapısı olmamalı, mesela bir onay uygulamasında solda liste, sağda detay ve detayın altında footer bar’da onayla, reddet butonları olmalı
  5. Delightful: Kullanıcılar uygulamaya hızla adapte olabilmeli, uygulama kullanıcıya yaptığı işle ilgili değer katmalı

Bu ana özelliklerin dışında SAP’nin bizler için hazırlamış olduğu Fiori Design Guidelines sayfasında tasarım ile ilgili bilmemiz gereken bütün konular tek tek anlatılmış durumda. Bu konuların baştan sona okunmasında fayda var. Ama önemli olanları şöyle sıraladım;

  • Uygulamalarda kullanılacak bileşenlerin doğru kullanım şekilleri
  • Uygulama türlerine göre tasarım şekilleri
  • Mobile first yaklaşımı
  • Letterboxing yöntemi ile maksimum 1280px genişliğe sahip ekran tasarlama
  • Cozy ve compact form faktörleri
  • Fiori Launchpad kullanımı, ana sayfaya uygulama ekleme, gruplama mantığı
  • Hata mesajlarının gösterim şekli
  • Navigasyon (özellikle de split app türünde dikkat edilmeli)
  • Tasarım şablonları (Daha önce bahsettiğim SAP Splash and BUILD)
  • SAPUI5 Explored sayfasındaki bileşenlere mutlaka göz atılmalı

 

Şimdi gelelim biraz da işin daha teknik kısmına. Bildiğiniz üzere Fiori uygulamaları tamamen javascript dili kullanılarak geliştiriliyor. Javascript ile inanılmaz derecede esnek bir dil. Aynı amaca hizmet eden bir kodlama belki de yüzlerce farklı şekilde yapılabiliyor. Burada best practice kavramı devreye giriyor. SAP’nin bize önerdiği yöntemlerle uygulama geliştirmek ciddi önem taşıyor. Bu önerileri dikkate almayanların ileride ciddi problemler yaşayacağını uygulamaların çöpe dönüşeceği üzülerek belirtmek isterim.

Teknik anlamda dikkat edilmesi gereken noktaları şu şekilde sıraladım;

  1. Ekranları js view ile geliştirmek ciddi kolaylık ve esneklik sağlar ama ciddi bir uzmanlık da gerektirir, xml view kullanarak hatadan uzak durmak daha mantıklıdır.
  2. Ekran görünümüyle ilgili bileşenleri controller içerisinde oluşturmak takip edilebilirliği azaltır uzak durmakta fayda vardır.
  3. Uygulama başlangıç aşamasında sadece TR dilinde kullanılacak olsa bile uygulamalarda mutlaka i18n localization olmalı, metinler kesinlikle hardcode şekilde gömülmemelidir.
  4. Gateway 7.5 ile birlikte artık Component.js olmadan geliştirilmiş, component id’si olmayan uygulamalar artık Fiori Launchpad üzerinde embedded olarak değil yeni pencerede açılmaktadır. Bu nedenle her Fiori uygulamasının başlangıç noktası Component.js olmalıdır.
  5. Navigasyon için routing mutlaka sağlanmalı, kullanıcının ekranlar arası geçişleri mutlaka url’ye yansımalı bu sayede tarayıcıdan bulunan geri, ileri butonları düzgün çalışır olmalı ve uygulamanın herhangi bir ekranına bu routing ile nokta atışı ulaşılabilmelidir.
  6. Zorunda kalmadıkça sap.m dışında bir kütüphane kullanılmamalıdır.
  7. Mvc yaklaşımına dikkat edilmeli view’da olması gerekenler controller’a yazılmamalı, controller’da olması gerekenler view’a yazılmamalıdır.
  8. Css kullanımına dikkat edilmeli standart Fiori stilleri kesinlikle ezilmemelidir. Custom stiller oluşturulmalı ve addClass ile bileşene eklenmelidir. “Div” gibi standart html taglarına stil eklenmemelidir. “#__view1__button0” gibi generate edilmiş id’lere özel stil eklenmemelidir.
  9. Global değişkenler kullanılmamalı. Kullanılmak zorundaysa da uniqueness için fully qualified türden tanımlanmalıdır.
  10. sap.ui.getCore().getEventBus() Launchpad üzerindeki listener’ları bozacağı için  kullanılmamalıdır.
  11. sap.ui.getCore().setModel() Launchpad üzerindeki bütün modelleri ezeceği için kesinlikle kullanılmamalıdır.
  12. Bileşenlere erişim sap.ui.getCore().byId() ile yapılmamalı view içerisinde local id’ler oluşturulmalıdır.
  13. window.location.hash veya window.location gibi url manipule edici kodlar yazılmamalı navigasyon routing ile düzgün bir şekilde yapılmalıdır.
  14. sap.ui.localResources() ve jQuery.sap.registerModulePath()metodları Component.js içerisinde kullanılmamalıdır.
  15. SAPUI5 sınıflarının metodları çağırılırken parametreler sırayı takip edecek şekilde değil json objeleri şeklinde verilmelidir.
  16. Tarih ve saat alanları ile numerik alanlar farklı dil ve bölge ayarlarında mutlaka test edilmelidir.
  17. Güvenlik açığı oluşturacak odata servisleri yazılmamalı, servislerin farklı kaynaklardan çağrılabileceği düşünülerek yetki kontrolleri her çağrı için ayrı ayrı yapılmalıdır.
  18. Odata servisini çağırırken kullanıcı adı ve şifre kesinlikle kod içerisine gömülmemelidir.
  19. UI5’in private ve protected metodları veya özellikleri kullanılmamalı ve override edilmemelidir. Private metod veya özellik belirteci (_) alt çizgidir. Şu kullanım şekli hatalıdır;  oSelectDialog._oList.setGrowing(false);
  20. Standart uygulamanın repair edilmesi gibi bir durum da var onu hiç söylemek istemiyorum. Standart uygulamalar kesinlikle extend edilmelidir.

Bu listenin daha da uzayıp gideceğinin farkına varmışınızdır umarım. Sektördekaliteli işlerin çıkması için bu konulara ve daha fazlasına dikkat edilerek kod yazılmasını, yazılan kodların da daha dikkatli denetlenmesini ümit ediyorum.

May the Force be with you

 

Orjinal Yazı: https://www.linkedin.com/pulse/fiori-uygulaması-geliştirirken-dikkat-edilmesi-gerekenler-özcan