Ana içeriğe geç

2.1.3 Hvlng Framework Theme#

Eksen yazılım geliştirme altyapısı ön yüz (User Interface - UI) geliştirmek için kullanıcılarına angular tabanlı kütüphaneler sunmaktadır. Bu kütüphaneler angular ve PrimeNG 'nin son kararlı sürümleri ile uyumlu çalışması hedeflenerek geliştirilmektedir.

Theme paketi Eksen tarafından sağlanan 3 angular kütüphanesinden projeler için genel bir çatı sunan, hazır ekranlar ve bileşenler sağlayan pakettir.

Theme paketi sisteme giriş ile ilgili ekranlar (login, profil seçim, ikinci seviye doğrulama gibi), ana ekran, hata ekranları, kullanıcı kayıt ekranları, şifre işlemleri ile ilgili ekranlar ve yardım ekranı sağlar.

Ayrıca Theme paketi ekmek kırıntısı bileşeni, ana yerleşimle ilgili bileşenler (üst bar, alt bar, duyurular gibi) menü ve yükleniyor bileşeni gibi bileşenler sağlar. Ayrıca kullanıcı dostu yazdırma ile ilgili direktif sağlar.

Theme paketi Prime NG'nin default light temasının Eksen projeleri için özelleştirilmiş halini sunar. Bu özelleştirme bileşen görünümlerinde ve genel tema kurallarında bir takım değişiklikler içerir. Ayrıca bff, core ve theme paketleri ile sağlanan bileşenlerin görsel kuralları (scss kuralları) theme paketinde yer almaktadır.

Aşağıda sağlanan ekranlar ve bileşenler açıklanmıştır.

HvlLoginComponent#

Eksen ile geliştirilen projelerde kullanılmak üzere sunulmuş sisteme giriş ekranıdır.

Bu bileşen keysys ile uyumlu çalışacak şekilde geliştirilmiştir. Bu bileşenin kullandığı servisler BFF Security modülünde yer almaktadır.

Login ekranı çoklu dil desteğine sahiptir. Konfigürasyonda theme.language.supportedLanguages kısmında belirtilen diller için çoklu dil giriş desteği sağlanır.

Multi-tenant çalışacak projeler için giriş ekranı da multi-tenant girişi desteklemektedir. Giriş sırasında tenant seçimi sağlanmaktadır.

Giriş ekranında kullanıcı kayıt ekranına geçiş sağlanabilmektedir. Bu yeteneğin açılıp kapatılabilmesi Setting uygulaması üzerinden yapılabilmektedir. Bu sayede bu ayar dinamik olarak çalışma zamanında değiştirilebilir. Ayrıca kullanıcı kayıt ekranı ile ilgili konfigürasyon core.theme.register altında yer almaktadır. Kullanıcı kaydı için kvkk dosyası gösterimi ve kullanıcı kodu seçebilme gibi ayarlar bu konfigürasyonda yapılmaktadır.

Giriş ekranı farklı doğrulama yöntemlerini desteklemektedir. Bu yöntemler aşağıda açıklanmıştır:

  • Öntanımlı doğrulama yöntemi veritabanı üzerinden doğrulamadır. Bu yöntem kullanıcı kayıtlarının keysys veritabanında saklanıp doğrulama işleminin de bu kayıtlar üzerinden yapılmasını sağlandığı yöntemdir.
  • LDAP doğrulama yöntemi kullanıcı şifre eşleşmesinin keysis üzerinden bir ldap sunucuna yaptırıldığı yöntemdir. En bilinen LDAP sunucusu Microsoft Exchange Server'dır ve bir çok kurumda kullanılmaktadır. LDAP ile doğrulama yöntemi kullanıldığında kullanıcı hesabı yöntemi LDAP yöneticilerine devredilmiş olunur.
  • Kerberos doğrulama yöntemi desteklenen bir diğer kullanıcı doğrulama yöntemidir. Kerberos ile doğrulamada kullanıcı bilgileri kullanıcının kullandığı işletim sisteminden kerberos protokülü ile alınır. Bu yöntemde kullanıcı bilgisayarına giriş yaptığı kullanıcı kodu ile uygulamaya da giriş yapmış olur. Kullanıcıdan kullanıcı kodu şifre bilgisi istenmediği giriş sürecinin otomatik olduğu bu yöntem son kullanıcı için büyük kolaylık sağlamakla birlikte kritik uygulamalarda kullanımı sakıncalı olabilir. Özellikle kişisel bilgisayarların paylaşıldığı kurumlarda kullanımı sakıncalıdır. Kerberos doğrulama yöntemi yine Microsoft Exchange Server tarafından desteklenmektedir.

Geliştirilen proje birden fazla giriş yöntemini destekleyecek şekilde konfigüre edilebilir. Bu durumda giriş ekranında önce giriş yönteminin seçilmesi sağlanır.

Login ekranının Captcha desteği vardır. Bunun için konfigürasyonda core.security.captcha.enabled ayarı true verilmelidir. Ayrıca konfigürasyonda core.security.captcha altındaki captcha sağlayıcısı ile ilgili ayarlar ve diğer ayarlar da yapılmalıdır.

Login ekranı iki aşamalı doğrulamayı da desteklemektedir. E-Mail ve SMS üzerinden kod alarak iki aşamalı doğrulama yapılabilmektedir. İki aşamalı doğrulamanın konfigürasyonu keysys'te yapılmalıdır.

Login bileşenini projenizde kullanmak için ana modül routing konfigürasyonunda aşağıdaki gibi bir routing tanımı yapmanız yeterlidir. Oturum sonlanınca login ekranına yönlendirme işlemi BFF Core modülü Global Error Handler sınıfı tarafından ele alınmaktadır.

import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { HvlLoginComponent } from '@hvlng/framework-theme';

const routes: Routes = [
    ...
    { path: 'login', component: HvlLoginComponent },
    ...
]
@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule],
    providers: [],
})
export class AppRoutingModule {}

HvlMainComponent#

Bu bileşen Eksen projelerinde uygulamanın ana yerleşimini sağlayan bileşendir. Login'den sonra açılan bu ekran solda menü, üst'te üst bar, altta alt bar ve ortada uygulama ekranı gözükecek şekilde bir yerleşim düzeni sağlar. Ayrıca ortadaki uygulama ekranın üstünde ekmek kırıntısı (breadcrumb) bileşeni bulunur. Bu bileşen o an açık olan ekranın menüdeki yolunu gösterir.

Ekrandaki elemanların HvlMainComponent bileşenin sağladığı yerleşim düzeni ile ekrandaki yerleşimini gösteren örnek bir ekran görüntüsü aşağıda yer almaktadır.

HvlMainComponent bileşeni Eksen uygulamalarında ana yerleşim düzeni sağlayan tek bileşendir. Eğer bir proje farklı bir yerleşim düzeni tercih etmek isterse kendi yerleşim bileşenini geliştirmelidir.

AppComponent#

Bu bileşen Eksen projelerinde kullanılmak üzere sağlanmış root bileşendir.

Bu bileşen uygulama açılışnda BFF tarafından sağlanan güvenlikle ile igili servislerin ilklendirilmesini sağlar. Ayrıca giriş yapılan dile göre uygulama genelinde ilgili dilin kullanılmasını sağlar.

Bu bileşenin sağladığı bir diğer önemli yetenek ise sağdan sola dil (rtl) desteğidir. Giriş yapılan dil rtl bir dil ise ana yerleşimin ve bileşenlerdeki görünümün yatayda tersine dönmesini sağlar.

Yazdırma Desteği, HvlPrintDirective#

Theme modülü kullanıcı dostu yazdırma için HvlPrintDirective direktifini ve üstbar'da yazdırma butonunu sağlar. HvlPrintDirective direktifi geliştiricilere ekranda yazdırılabilir alan belirlemesini sağlarken yazdırma butonu da sadece istenilen alanın yazdırılması için yetenek sağlar. Bu özellikler menü, üstbar gibi yazıcı çıktısında gözükmesi istenmeyen alanların gizlenip sadece anlamlı kısımların çıktıda yer almasını sağlar.

Bu konu Kullanıcı Dostu Yazdırma kısmında detaylı olarak dökümante edilmiştir.

HvlTopbarComponent#

HvlTopbarComponent bileşeni ana ekranın üst kısmında yer alır ve arama, bildiriler, duyurular, oturum bilgileri, yazdırma, ve çoklu dil ile ilgili işlemleri sağlar. Bu bileşenin genel görünümü aşağıda yer almaktadır.

HvlTopbarComponent ilk olarak bir logo alanı sağlar. Buradaki logo .topbar-header-logo css sınıfı ile verilmiştir ve kullanan projeler bu kuralı ezerek kendi logolarını verebilirler.

Logo'dan sonra arama bar'ı yer almaktadır.

Arama barından sonra sırası ile bildirim ve duyurular, yazdırma, takvim ve sürüm bilgisi butonları yer almaktadır.

Bildirim ve duyurular butonu üzerinde kullanıcıya ait kaç adet bildirim olduğu gösterilir. Butonu tıklanınca da bildirimler ve duyurular görülebilir. Bildirimler Eksen Notification ürünü ile tam entegre çalışmaktadır.

Yazdırma butonu kullanıcı dostu yazdırma ile ilgili işlevler sunar ve Kullanıcı Dostu Yazdırma kısmında detaylı olarak açıklanmıştır. Takvim butonu kullanıcıya takvimi gösterir. Sürüm bilgisi butonu ise uygulamanın sürüm bilgisini gösterir.

En sağda ise oturum açmış kullanıcının bilgilerinin gösterildiği ve tıklandığında oturum ve kullanıcı ile ilgili işlevler sunan kısım yer alır. Bu kısımda kullanıcı uygulamanın dilini değiştirebilir, profil bilgilerini görebildiği ekranı açabilir, şifresini değiştrebilir, açık oturumların listesini görebilir ve sistemden çıkış yapabilir.

HvlLoaderComponent#

HvlLoaderComponent bileşeni asenkron bir işlem yapılırken işlemin devam ettiğini belirten 'yükleniyor' durumunu kullanıcıya yansıtmak için geliştirilmiş bir bileşendir. Bu bileşen HvlLoaderService servis ile entegre çalışır. HvlLoaderService'in show yada hide değerine göre kullanıcıya 'yükleniyor' görseli gösterilir yada gizlenir. HvlLoaderService'in kullanımı BFF Core kısmında örneklenmiştir.

HvlVerificationComponent#

İkinci seviye kullanıcı doğrulama işini yapan bileşendir. Kullanıcı ilk seviye doğrumayı (genellikle kullanıcı kodu / şifre doğrulaması) geçtikten sonra SMS yada E-Mail ile gönderilen kodu alarak kullanıcının ikinci seviye doğrulamasını yapar.

Tamamen keysys ile entegre çalışır. HvlLoginComponent bileşeninde belirtildiği gibi doğrulama ile konfigürasyon keysys'te yapılmalıdır.

HvlMenuComponent#

Keysys ürünü ile entegre bir şekilde kullanıcının yetkisi olduğu menüleri gösteren bileşendir. HvlMainComponent bileşini entegre çalışır. Menüden seçilen ekran HvlMainComponent'te uygulama ekranı için ayrılmış alana açılır.

Menü içinde arama özelliği vardır, kullanıcılar yetkisi olduğu menü ağacı içinde arama yabilir.

Ayrıca kullanıcının sık kullandığı menüleri fovori olarak seçip bunları favori menü altında saklayıp düzenlemesine olanak sağlar.

Menü öğeleri ile ilgili backend uçları ile işlem yapılmasını sağlayan HvlMenuItemRestService servisi de aynı paket içerisinde yer alır.

HvlUserActiveProfile#

Kullanıcının aktif profilindeki son giriş kayıtlarını gösteren sayfadır. Bu sayfaya HvlTopbarComponent bilenindeki Profil adımından erişilir.

HvlRegistrationComponent#

Son kullanıcıya yönelik kullanıcı kayıt ekranıdır. Setting ürünü üzerinden aktif/pasif edilebilir. Bu sayede kullanıcıların sisteme kayıt olabilmesi dinamik olarak açılıp kapatılabilir.

Kvkk metni konfigürasyonda theme.register.kvkkFilePath adresinden alınır ve kullanıcıdan kvkk metnini onaylaması istenir.

Kullanıcı kayıt sürecinin tamamı proje tarafından ele alınmalıdır. Email bilgisi alınan kullanıcı kvkk onayından sonra keysys üzerinden kayıt süreci başlatılır. Kullanıcı mail adresine gelen doğrulama sürecini tamamladıktan sonra süreç uygulamada devam ettirilir. Bu ekran ilk kayıt işleminin yapıldığı ekrandır kalan süreç bu ekran tarafında ele alınmaz.

Breadcrumb#

Uygulama içerisinde, kullanıcının nerede olduğunu, anasayfaya uzaklığını hiyerarşik olarak görüntülemesine yardımcı olan custom componenttir.

Idle#

Idle component, kullanıcının belirli süre içerisinde herhangi bir işlem yapmaması durumunda oturumunun sonlanmasını sağlatan, servis ve componentten oluşan tema özelliğidir. Belirli süre ise konfigüratif olup, core->theme->idleDuration değeriyle belirlenebilir.

 "idleDuration": {
            "enabled": false,
            "first": 10,
            "second": 60
        },

-enabled: idle özelliğinin aktif/pasifliğini belirleyen ayardır.
-first: ms türünden bir sayaç olup, duration aktif iken, kullanıcı oturum açmış ve bulunduğu ekranda herhangi bir hareket içerisinde değilse ,idle uyarı componentinin devreye gireceği süreyi belirler. -second: ms türünden bir sayaç olup, idle uyarı componentinin ekranda ne kadar kalacağını belirleyen ayardır. bu aralıkta kullanıcıya devam/çıkış seçeneği sunar. Devam etmesi durumunda token refresh edilir. Çıkış veya bu süre dahilinde herhangi bir aksiyon almadığı senaryoda kullanıcı oturumu sonlandırılır.

Favorite#

Menü üzerinden açılan uygulama ekranlarının, kişiye özel menü favori listesine eklenmesini sağlatan directive ve servislerden oluşan tema özelliğidir.

Favoriye alınan sayfa kişiye özel olup kalıcıdır. Uygulamaya tekrar giriş yapıldığında favori kayıtlar yüklenir. İstenildiği taktirde 2 yöntemle favori listesinden çıkartılabilir.

  1. iconu üzerine basılarak deavtive hale getirilir ve sayfa favori kayıtlardan çıkartılabilir.
  2. Favorilerim sayfasında, favori listesindeki kayıt üstüne gelindiğinde "-" işaretine basılarak sayfa favori kayıtlardan çıkartılabilir.

Help Portal#

Help portal custom bir component olup, uygulama üzerinden hvlng/framework-bff tarafından sunulan servis ve modellerin kullanılarak yardım sayfasının dialog üzerinden görüntülenmesini sağlar.

Örnek kullanım için buraya bakabilirsiniz.