Bu yazıda’ da Proxy için Kullanım Senaryoları üzerinde duruyor olacağız.
Oluşturulan nesne üzerinde property erişimlerini yakalayıp bir yerlerde göstermek, kodunuzda bir hata problem veya davranışı hakkında bilgi almanızı sağlar.
Aşağıdaki örneği incelersek. Point nesnemizin x özelliğine atama veya okuma yapıldığında bilgileri console/file/network vb.. yerlere yazmak istediğimizde bu point tracePropertyAccess ile modify ederek artık tüm erişimlerin return eden WrapperObj üzerinden yapılmasını sağlıyoruz.
İlk yazıda JS zaten MetaProgramming konseptlerini içerdiğini ama Intercession (Bazı dil işlemlerinin yapılarını yeniden tanımlama) konusunu ES5 sonrasında Proxy özelliği ile getirdiğinden bahsetmiştik. Yukarıdaki linkini verdiğim kitaptaki örnekleri anlatmaya devam ediyoruz. Bu yazıda Proxy konusunu biraz daha detaylı inceliyor olacağız.
İlk örneğimiz bir Proxy nesnesi oluşturmak üzerine. Bunun için bir target ikinci olarak target üzerindeki çağrımları yakalayacak olan handler var. Aşağıdaki örnekte target üzerinde hiç bir işlem yapılmadan direk handler tüm gelen isteklere statik olarak cevaplıyor.
Önceki örneklerde Led yakmak Arduino’ya üzerinde Output oluşturmaya odaklanmıştık. Bu örnekte Kullanıcının düğme üzerinde oluşturduğu etkileşimleri(Input) yazdığımız Arduino programı ile algılamaya çalışacağız.
Devrenin ve örneğin detaylarını bu linkten ulaşabilirsiniz. Kısaca yukarıdaki devremizi anlatırsak.
Düğmeye basınca Sarı’dan 5V okuyacağız, düğmeye basmayınca 0V okuyacağız. Buna göre kodumuzu geliştirebiliriz. button.on() ile yapılan etkileşimi çok basit bir şekilde algılayabiliriz.
Bu seriye başladığımda 2 örnek yapmıştım. Blink ve LedControl With NodeServer , aşağıdaki API’leri kullanarak tek LED üzerinde uygulayabileceğiniz bir çok örnek bulunuyor. İsterseniz bu API’leri kullanarak çok karmaşık denemeler yapabilirsiniz.
Led açma, kapatma veya mevcut durumunu tam ters durumlara getirme API’leridir.
led.on()
led.off()
led.toggle()
Bu API çağırdığınızda verilen ms kadar on verilen ms kadar off olacak şekilde sürekli tekrar eder.
led.blink(ms, callback)
led.strobe(ms, callback)
Peki biz bu ışığı farklı seviyelerde vererek LED daha az daha çok yakabilir miyiz. Cevap evet pulse API’si bunu yapmamıza olanak sağlar
led.pulse(ms, callback)
Yukarıdaki Örneklerde Led süresi sabittir ve Led On/Off Modundadır. Bunlar belirtilen…
Treemap, Maryland üniversitesindeki bir araştırma sonucunda ortaya çıkıyor. 1990'larda Ben Shneiderman ağaç veri yapısının daha kompakt şekilde nasıl gösterebilirim üzerine yaptığı araştırmalar ve çalışmalar üzerinde ortaya çıkmıştır..
Örnek bir Ağaç Yapısını biz UI’da Tree(Ağaç) bileşenleri klasör/directory ve yaprak/leaf şeklinde kullandığımız bir yöntem var. Bu yöntem uygulamalarda kullanmak için uygunken
İlk yazımızda Arduino üzerinde basit bir Led yakmaya çalışmıştık. Bunun için öncelikle Arduino IDE kullanmıştık. Sonra’da aynı örneği (http://johnny-five.io/) JS kütüphanesi sayesinde NodeJS ile çalıştırmıştık.
Kodu Node Server üzerinde çalıştırmanın bize kazandırdığı ufkumuzu geliştirdiği durumlar var. Node üzerinde bunu çalıştırabiliyor olmak Web Server olsun, Desktop uygulaması olsun veya bir Worker (AI, Crawler, Processing) olsun bir çok farklı durum için Arduino ile beraber çalışacak projeler geliştirebilirsiniz.
Ben aşağıda bu durumu Express Web Sunucu ile deniyor olacağım. Kod oldukça basit 3000 portunda bir Web sunucu ayağa kaldıracağız. Bu web sayfasına her giriştede % 2 bir mod alarak Led on/off komutları göndereceğiz.
Arduino başlangıç setini aldıktan önce Arduino sitesinden işletim sisteminiz için IDE indirin. Bundan sonra IDE açtığınızda Board türü ve Bilgisayarınız ile Cihazı Bağladığınız portu belirlemeniz gerekiyor.
Tools → Board → Arduino Uno ve Tools → Port → usb vb… Bilgisayar ve Uno arasındaki bağlantı noktasını seçmeniz gerekiyor.
Zaten bağlantı kurduğunuzda üzerindeki 2 Lamba yanmaya başlıyor.
Görselleştirme Altlıkları ve Chart’ların ne kadar önemli olduğunu ve bunları ne amaçla kullanabileceğimiz konusunda Visualization Layouts parça parça yazmaya devam ediyorum.
Peki Business Intelligence (İş Zekası) olsun, veya bir Seçim çalışması, Pandemi Sonuçlarının gösterilmesi vb… bir çok konuda Görselleştirme’den faydalanıyoruz. Peki bu Görselleştirmeleri biz kodlamadan yapabilecek platformlar var mı ?
Evet böyle servisler var. No-Code veya Low-Code dediğimiz bu platformlar sizin kod yazmadan, veya çok az kod yazarak istediğiniz çıktıları, web sayfalarını veya yazılımları oluşturmanızı sağlıyor.
Visualization Platform buna benzer bir mantıkla çalışıyor. Normalde verileriniz Excel’de basit bir yapıda tutuluyorsa bu işlemler biraz daha basit oluyor. Veritabanlarını kullanıp bunlardan veri…
MetaProgramming dilin standart kullanımı dışında iskelet yapısı üzerinden dinamik erişmenizi sağlayan programlama yöntemidir. Java dilindeki Reflection API gibi.. Class, Metodlarına vb.. bilgilere dinamik olarak erişip, dinamik kod çağrımları gerçekleştirmek.
JS kendi iç mekanikleri zaten bu şekilde dinamik çalışabilirlik üzerine hazırlanmış . Örneğin eval fonksiyonunu kullanarak istediğiniz bir string veya bir dosyadan, network okuduğunu kodu dinamik çalıştırabilirsiniz. Aşağıdaki örnekte bu durumu anlatan kodu görebilirsiniz.
Genelde iconlar için SVG ve PNG formatları kullanılır. Ama Web Uygulamaları geliştirmede SVG bu yarışı kazanmış gibi gözüküyor, bunda tasarım dili ve yapıların daha sadeleşmesi ve colorların daha dinamik olarak bu tasarım yapıları içerisinde değiştirilebilir olması. Bizi Vector Graphics olarak hazılanmış SVG kullanmaya itmiştir. Bir diğer neden de hazır icon kütüphanelerinin oluyor olması.
Aşağıdaki resimde ile Google Fonts, FontAwesome, ReactIcon, SVG ile Icon kullanma
Senior Frontend Developer at Thundra