Önceki uygulamada bir çevrim içi servis tarafından sağlanan verileri projemizde kullanmıştık. Gelen veri JSON biçiminde olduğu için de bu konuda hiç zorlanmamıştık. Çünkü hangi verinin XML ağacı içindeki hangi etiketler arasında yer aldığı belliydi. Bu uygulamamız da ise web ortamında bulunan ve standart yollarla sunulmayan verilerin nasıl elde edileceğini (parselleneceğini) ve Node-RED ortamında kullanılacağını örnekleyeceğiz. Bunun için HTTP Request (HTTP isteği) ve HTML node’larından faydalanacağız. HTTP Request ile Doviz.com sitesindeki güncel altın bilgisini alarak Node-RED ortamına taşıyacağız. Node-RED ortamına taşıdıktan sonra dilerseniz veri tabanına kaydedebilir, bir bildirim oluşturabilir veya bir gösterge üzerinde görüntülenmesini sağlayabilirsiniz. Bu tamamen hayal gücünüze kalmış. Aşağıda döviz.com sitesinin ana sayfası gözüküyor.
doviz.com tesinin ana sayfasının ekran görüntüsü
Aşağıda oluşturacağımız akışın şeması yer alıyor. Bu şema sırasıyla inject, HTTP Request, html ve debug node’larından oluşmakta. Inject node tahmin edebileceğiniz gibi akışı başlatmak için orada, HTTP request ise bir web sayfası URL’ine istek yaparak HTML çıktısını döndürür. node’un çıkışını bir debug node’a bağlayarak döndürülen HTML kodlarını görebilirsiniz. html node ise dönen HTML kodları içerisinden istediğimiz kısmı ayıklamamızı ya da parsellememizi sağlayacak.
HTML parselleme akışımızın şeması
Bu node’lardan en can alıcısı Altını Parselle ismiyle gözüken html node’dur. HTML node’unun özellikler panelini açarak aşağıdaki gibi yapılandırın.
HTML node’un özellikler paneli
Yukarıda görmüş olduğunuz gibi Selector kutusuna yazdığımız CSS seçici[1], HTML sayfasını oluşturan nesnelere onların CSS özelliklerini kullanarak ulaşmamızı sağlar. Bu kutuya yazdığımız seçici hiyerarşik olarak belirtilmiş bir seçicidir. Doğru seçiciyi elde edebilmek, bir web sayfasının HTML kodlarının analiz edilmesini gerektiren meşakkatli bir iş olabilir. Ancak bunun kolay bir yolu var. Örneğin, parsellemek istediğiniz web sitesini Firefox web tarayıcısını kullanarak görüntüleyin ve içeriğini almak istediğiniz kısmı sağ tıklatarak Incele/Inspect seçeneğine tıklatın. Pencerenin alt kısmında sayfaya ait HTML ağacının tıkladığınız kısmına ait HTML düğümünün seçili olarak gösterileceği (seçimin sayfa üzerinde de görebilirsiniz) bir panel açılacak. Aşağıdaki görseli ve adım sıralarını izleyin.
Web sayfasının istediğimiz bir kısmına ait CSS seçicinin elde edilmesi
Yukarıdaki görselde gerçekleştirilen işlemleri detaylı bir şekilde anlatmak gerekirse; Öncelikle sayfanın altın fiyatını görüntüleyen kısmına (tam olarak 387,03 yazan kısma) fare ile sağ tıklattık ve açılan menüden Inspect Element (Elemanı İncele) seçeneğini seçtik. Hemen ardından pencerenin alt kısmında <span class=”value”>387,03</span> kodunun yer aldığı düğüm görüntülendi. Aynı zamanda bu düğümün etki ettiği kısım da sayfa üzerinde mavi bir kutu ile işaretlendi. Bu düğümün üzerine sağ tıklatarak Copy->CSS Selector yolunu takip ederek CSS seçiciyi panoya kopyaladık. Bu menüde farklı türdeki seçicilerin de bulunduğunu görebilirsiniz; ancak kullanmış olduğumuz HTML node sadece CSS ve jQuery seçicilerini desteklemektedir.
Akışımızı deploy ettikten sonra Inject node’a tıklattığımızda, debug panelde aşağıdaki gibi görüntülendi.
Akışımızın debug node çıktısı
Bu yolla dilediğiniz web sayfasından istediğiniz içeri alabilirsiniz. Ancak bazı karışık web sayfaları sayfa içeriğinin bir kısmını JavaScript ile dinamik olarak oluşturuyor olabilir. Bu durumda HTML request node’umuzun sadece statik kodları elde edebileceğini düşünürsek burada yaptığımız gibi amacımıza ulaşamayabiliriz. Ancak bu da çözümsüz değildir bunun için web otomasyonu amacıyla geliştirilen Selenium kütüphanesinden faydalanabilirsiniz. Selenium için gereken Node-RED node’unu çevrim içi kütüphaneden yükleyebilirsiniz.
[1] https://github.com/fb55/css-select#user-content-supported-selectors
