UI Component Basics
UI Bileşenleri
Projeler için kendi modifiye bileşenlerinizi geliştirme ihtiyacı her zaman olmuştur. Yeni bir UI bileşeni oluşturabilmeniz veya mevcut olan bir UI bileşenini modifiye etmek için UI temellerini iyi şekilde biliyor olmanız gerekir.
Her ne kadar bir çok açık kaynaklı kod veya kütüphane sayesinde UI Bileşenlerine ulaşıyor olsanızda, her zaman standart bileşenlerin yetmediği durumlar olacaktır. Sizin ya en baştan bir UI Bileşenini yazmanız gerekiyor veya belli bir seviyeye gelmiş UI bileşenini kendi projenize göre değiştirip (modifiye yapıp) kendi projenize özgün bir hale getirmeniz gerekiyor.
Bu sayede projenizin arayüzü ve kullanımı diğer benzer projelerden ayrılıp bir farklılık göstermeye başlayacaktır.
Bu yazımda daha önceden ve şu anda yer aldığım projelerden örnekler göstererek bu durumu anlatmaya çalışacağım. İlerleyen konularda iyi bir UI bileşeni nasıl yazılır üzerine çalışmalar yapacağım.
1. Trendocean
Arkadaşlarım ve benim ilk sosyal medya girişimi olan projede web arayüzünden kullanıcının soru ve şıkları girmesi sağlanıyordu. 2011 yılında yaptığımız bu projede girilen linklerin algılanarak Youtube, Vimeo, video, resim ve ses dosyalarını algılayıp bunları ilgili player çalışacak şekilde HTML içerisinde DOM nesnesi olarak gömüyordu.
2. Twit Turkey Stats
2014 yılında hobi olarak başladığım projede Twitter API üzerinden twit bilgilerini dinleyerek bunları anlık olarak Türkiye haritası üzerine işaretleyerek Türkiyedeki Twit yoğunluğunu gösteren bir bileşen geliştirmiştim. Twitlerin gerçek zamanlı görselleştirmesini sağlamıştım. Burada Processing.js kütüphanesini kullanmıştım.
3. Skykeeper
T2 firmasında tweetleri dinleyerek bunların görselleştirmesini gerçekleştiren başka bir uygulama geliştirmişti. Bu UI bileşeninde haritadanı etkileşimli olması isteniyordu. Haritanın üzerindeki bir ile tıklandığında ilgili ile zoom olup o ilin detayını bir anda göstermesi oldukça etkileyici bir gösterim sağlıyordu. Burada D3.js kütüphanesini kullanmıştık.
4. Sigortacılık Skorlama Aracı
Sigorta poliçesi oluşturması sırasında size sorulan soruların cevapları doğrultusunda bir akış işletilerek fiyatlandırma yapılıyor bunu mantıksal akışı ve bu akışın arkaplanda oluşturmasını istediğiniz kodları üretebilmesi için arka planda dinamik kod üretmesini istediğiniz bir araca ihtiyacınız var. Burada bileşenler arası etkileşimin çok olduğu yapılar tasarlamanız gerekiyor.
Bloklar , bu blokların içerisinde karar tabloları veya kod parçacıkları ve bu blokları birbirine bağlayan , birisinin çıktısınız diğerinde girdi olmasını sağlayabileceğiniz bir arayüz tasarlamanız gerekiyor. (Drag & Drop) mekanizmalarının ve (Kod Editor) kullanıldığı.
Farklı durumları test edebilmeniz için test araçları ve arka planda oluşan algoritmaya bu durumları verdiğinizde sonucun nasıl oluştuğunu adım adım görebildiğiniz bir görselleştirme aracına ihtiyaç duyarsınız.
Formül doğrulama veya bu formüle versiyon bazlı erişme ihtiyacı duyacağınız ekranları geliştirmeniz gerekir.
iBeacon ile İşe Giriş/Çıkış Sistemi
Bu projede İşe Girdim/ İşten Çıktım şeklinde 2 düğmeye ihtiyacınız var.Veya bir ToggleButton yaparak projeyi gerçekleştirebilirsiniz.
Ama bunun yerine bu işlemi gerçek bir karta benzettiğinizde ve bunu animasyonlu bir şekilde kredi kartı gibi sisteme takıp çıkardığınızda uygulamanız bambaşka bir hal alacaktır.
eFinans Mobil
eFatura sistemlerinde en önemli konu. Hangi günlerde faturalarınız var. Bunu takvim üzerinde çok güzel bir şekilde görselleştirdiğinizde kullanıcı tek bakışta ihtiyacı olan bütün bilgiyi görüntüleyebilir. Eğer buna uygun bir takvim bileşeniniz yok ise basit açık kaynaklı bir takvim bileşenini alın ve bu bileşeni kendi ihtiyaçlarınızı karşılayacak şekilde geliştirin.
- Bugün günlerden ne
- Hangi Günü seçtiniz
- Fatura olan günler
- Ödemesi Gelen Fatura Günleri
- Tahsili Gelen Fatura Günleri
- Ödemesi/Tahsili Gelen Fatura Günleri
GİB Mobil
Çok büyük vergi ile ilgili mevzuat dosyaların pdf hem offline hemde online olarak erişimi gerekiyordu. Bunun için local mysql veritabanları ve bu dosyaların lokalde saklanması için sistemler geliştirdik.
Kullanıcının en kısa yoldan borcunu sorgulaması veya ödeme yapabilmesi için ekran arayüzleri olabildikçe basitleştirildi.
Türkiye Enerji Verimliliği Portalı (Enver)
Alacağınız bir çok türde raporunuz ve alt kırılım menünüz var 350–500 menu. Kullanıcının 2 tıkta istediği içeriğe gitmesini nasıl sağlarsınız. Bunun için MegaMenu şeklinde bir bileşen geliştirmiştik. Burada Mustache kütüphanesi kullanıldı
Gruplu bir şekilde veriyi göstermek istiyorsanız ve bunu dinamik yapmak istiyorsanız bunu yapmanın en iyi yolu pivot tablosu bileşeni kullanmanız. https://pivottable.js.org/examples/
Burdaki birçok görselleştirme için D3.js ve benzeri Chart kütüphaneleri kullanıldı.
Thundra
AWS Lambda ortamındaki kodlar üzerinden debugging monitoring, ve observability yaparak performans sorunlarınızı bulmanıza, çözmenizi sağlayan bir SaaS uygulaması. https://www.thundra.io/ Bu projede de birçok UI bileşeni baştan yazılması gerekti. İlgili UI görsellerini aşağıdaki videodan görebilirsiniz.
Thundra’da yaptığım Frontend işlerini daha net göstermesi açısından Digital Garden içerisinde topladığım UI Videolarını aşağıdaki linkten izleyebilirsiniz.
https://onurdayibasi.dev/videos-of-thundra
Sonuç
Semantic UI , D3.js , Rechart, Ace, Pivottable vb.. bir çok UI bileşeni kütüphanesi mevcut ve çok kuvvetli kütüphaneler ama eninde sonunda ihtiyaçlarınızı tam karşılamadığında oturup ya kendi UI bileşeninizi kendiniz geliştireceksiniz veya mevcut bileşenleri kendi istekleriniz doğrultusunda değiştireceksiniz başka şansınız yok :). Bunun için sadece kütüphane kullanmayı değil bileşenlerin altyapılarında nasıl çalıştığını anlamaya çalışın. Bu sayede yeri geldiğinde müdahale edebilirsiniz.
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.
