Javascript Web Sitesinden Veri Çekme

Dünyanın en popüler programlama dillerinden Javascript, modern web teknolojilerinin en gözdesi. Peki Javascript ile json dosyasından veri nasıl çekeriz? Siberdefter Eğitim kaldığı yerden devam ediyor arkadaşlar.

Bu işlemi size basit bir örnekle göstermek istiyorum. Öncelikle &#;client&#; id değerine sahip bir paragraf oluşturuyorum.

Adım 1: Kullanıcı tarafını hazırlayalım

Kafamdaki senaryoda &#;client&#; idsi taşıyan bir paragrafım var ben buraya jSON dosyamdan aldığım veriyi işleyeceğim ve kullanıcıya anlamlı bir şey sunacağım.

Adım 2: Javascript ile JSON verimizi çekelim

Javascript&#;in bize sunduğu velinimetlerden olan &#;fetch()&#; fonksiyonu ile örnek bir API&#;ye bağlanacağız ve JSON dosyamızı çekeceğiz, ardından dosyamdaki veriyi işleyeceğim ve HTML tarafındaki kutucuğuma yerleştireceğim.

İlk etapta &#;client&#; ve &#;url&#; isminde iki değişken oluşturdum, url isimli değişkenim API linkini barındırıyor, client değişkenim ise HTML bloğumu. fetch fonksiyonuma url değişkenimi veriyorum ve &#;then()&#; fonksiyonlarımı bağlıyorum.

then() bağlantı başarılı olduğu zaman yaptıracağım işlemlerden bir tanesi, bana gelen cevap (response / res) json() fonksiyonu ile işleniyor ve bir sonraki then() ile birlikte de gelen değerlerini out ile alıyorum.

forEach ile döngüye sokup client&#;ın içeriğine verilerimi basıyorum arkadaşlar. JSON dosyamda şehir ve insan ismi yazdığından ötürü &#;X from X&#;den&#; şeklinde bir işleme yaptım.

javascript, javascript dersleri, JSON

sql dosyanızı bir servera kurmanız gerekiyor, sonra php ile veritabanına bağlanıp verileri çekebilirsiniz. html ile böyle bir şey mümkün değil, html ve js browser tarafında, php ise server tarafında çalışır.

• luchetti  ( ) 

SQL dosyasi server tarafli bir dosyadir, yani lokal bilgisayarda veya serverda calisir. JavaScript temelde browser tarafinda calisan front-end bir dildir. Browserlarin bilgisayar kaynaklarina erisimi guvenlik nedeniyle limitlenmistir bu nedenle javascript dili bilgisayardaki bir dosyaya erisimi cok zor kurallara baglanmistir, bircok durumda da erisemez. Eger SQL kaynaga javascript ile erismek istiyorsan javascript dilini browserda degil de server yada lokal bilgisayarda calistirmalisin. Yani Javascript back-end calismali. Bunun icin bir javascript kutuphane/framework olan seafoodplus.info bilmelisin. Once seafoodplus.info temellerini ogren ornegin buradan seafoodplus.info daha sonra da buradaki ornektegi gibi mysql (yada herhangi bir database) seafoodplus.info data cekebilirsin.

Eger seafoodplus.info kullanMAdan cekmek istersen server tarafli calisan bir baska dile ihtiyacin var, php, java, c# gibi. bunun disinda "native" yani araya baska araclar, diller, kodlar sokmadan yapmanin bir yolu yok.

seafoodplus.info cok gelecek vadeden, javascript ile yapacagin seyleri back-ende tasiyan ve gelecegi parlak bir teknoloji. Belki seafoodplus.info e giris yapman biraz zaman alabilir ama bu ogrendigin teknoloji ile ve javascript dili ile ciddi anlamda ufkunu acmis olursun, javascript dilini artik her alanda kullanabilirsin. seafoodplus.info de basit bir teknoloji degil bugun paypal, google, facebook gibi devlerin cesitli alanlarda kullandigi, is ilanlarinda calisan aradigi C dili temelli cok performansli bir teknoloji. Javascriptden baska hicbir dil kullanmadan database erisimi olan bir web sitesi yazabilirsin. bundan baska "native" bir yol yok, ancak cesitli "widget" lar ile birseyler yapabilirsin ama cok da tatminkar olmaz.

• emrahday  ( ~ ) 

Web Scraping/Crawling, bir -ya da daha fazla- web sitesindeki verileri ayıklamak ve uygulama kullanıcılarına uygun hale getirme tekniğinin adıdır. Türkçe’ye Web Kazıma olarak geçse de yaygın olarak web scraping ya da web crawling terimleri kullanılır.

Kullanım Alanları

İnternet üzerinde birçok veri bulunur. Dağıtık halde bulunan bu verileri ayıklayarak yapısal olarak daha düzgün bir hale getirip kullanabiliriz. Web Scraping kullanım alanlarına örnek olarak

• Haber sitelerindeki haberleri çekip makine öğrenmesi(machine learning) eğitimlerinde,
• Bankaların web sitelerinden döviz bilgilerini çekip karşılaştırma ve analizinde,
• E-Ticaret sitelerinde satılan ürünlerin fiyatlarını çekip karşılaştırma ve analizinde,
• Projenizde kullanmak üzere bir sitedeki verileri çekip sonucu JSON dönen bir API geliştirmesinde,
• Emlak sitelerindeki belirli bölgelere ait ilanların çekilip excel’e dönüştürülmesinde,
• Sosyal Medyadaki içeriklerin çekilmesinde,
• Rehber sitelerindeki firmaların bilgilerinin excel’e dönüştürülmesinde,

Bunun gibi daha onlarca alanda kullanımına örnek verebiliriz. Şimdi gelelim nasıl yapacağımıza.

Web Scraping Nasıl Yapılır?

Web Scraping yapabilmek için iki yöntemimiz var. Bunlardan biri sitenin kaynak kodunu indirmek ve üzerinde ayıklama işlemi yapmak, ikincisi ise bir kullanıcı gibi siteyi tarayıcıda açıp ilgili alanlara tıklayan ve gerekli verileri toplayan bir yapı kurmak. Bu yöntemleri belirlerken, veri çekeceğimiz web sitesinin yapısına göre karar veririz. Ben genelde daha stabil ve kolay olduğundan ilk yöntemi tercih ediyorum. Bu kontrolü yaparken;

• Sitenin kaynak kodunda çekmek istediğim verilerin olup olmadığı kontrol edilir.
• Taracıyı dışında başka bir araç kullanarak dönen HTML içinde çekilecek verilerin olup olmadığı kontrol edilir.
• Eğer kaynak kodunda yoksa tarayıcıda Chrome Dev Tools açarak Network tab’ında bu verinin nasıl çekildiği kontrol edilir.

Bu maddelerden biri sağlanıyorsa ilk yöntemi seçebiliriz. Eğer sağlanmıyorsa bu kez ikinci yöntemle ilerlememiz gerekir.

Biz bu makalede ilk yöntemi kullanacağız. Kaynak kodu indirdikten sonra ayıklama işlemlerini iki farklı şekilde göreceğiz. Bu yazının devamında Regex kullanarak bu işlemi nasıl yapacağımızı göreceğiz. İkinci yöntem olan cheerio modülünü kullanarak web scraping işlemini ise ayrı bir makalede gerçekleştireceğiz.

Veri Çekme

Öncelikle veri çekeceğimiz adres: seafoodplus.info

Bu adresten Dolar, Euro ve Altın’ın alış ve satış bilgilerini çekip bir JSON elde edeceğiz. Ulaşmak istediğimiz JSON formatı aşağıdaki gibi olacak.

Bir sitenin HTML kodlarını çekmek için request-promise modülünü kullanabileceğimiz modüllerden sadece biridir. Bir modülü kullanabilmek için öncelikle kurmamız gerektiğini biliyoruz. request-promise modülünü kullanabilmek için request modülünü de kurmamız gerektiğinden ikisini kuruyoruz.

Bir javascript dosyası oluşturup modülü import edelim.

Ardından bu modülü kullanarak yukarıdaki adrese bir GET isteği gönderelim.

HTML verisini çekip body değişkenine atadık. Artık bu yığın içinden ihtiyacımız olan verileri ayıklayabiliriz.

Regex ile Web Scraping

Veri ayıklama geliştirmesini yapmadan önce her zaman web sitesininin kaynak kodlarını regex’e aktarıp regex’i burada oluştururum. Bu işlem beni geliştir > çalıştır > test döngüsünden kurtardığı için oldukça büyük zaman kazandırır. Hadi başlayalım.

İlk adımımız sayfaya tarayıcıdan girip sağ tık Kaynağı Görüntüle(View Source Code) ile sayfanın kaynak kodlarını açmak.

Ardından kaynak kodlar arasında ayıklayacağımız değerlerin yerini kaynak kod içinde arama yaparak(Windows için: Ctrl+f, mac için Cmd+f) tespit edelim.

Ardından kodların tamamını regex‘e yapıştıralım. Bazen sayfaların kaynak kodları çok kalabalık oluyor bu durumda ayıklamak istediğimiz alanının üstten ve alttan biraz fazlasını kopyalayıp alabiliriz. Eğer sadece ayıklamak istediğimiz alanı alırsak tam sayfa üzerinde regex’i çalıştırdığımızda farklı bir yerle eşleşebilir bu da sonucun doğru dönmemesine neden olur.

Özellikle sol tarafta ECMAScript(Javascript)’in işaretli olduğundan emin olalım ki geliştirme aşamasında yazdığımız Regex’te bir sorun çıkmasın. Ortamımız hazır, artık regex’i yazmaya başlayabiliriz. İlk olarak Regex alanına USD yazıp kaç tane yakaladığına bakalım.

USD regex’i ile eşleşen 2 yer tespit edildi. Bunu gösterme amacım ilk olarak eşleşme yapacağımız yeri gözlemlememiz gerektiğini anlatmaktı. Şimdi HTML tag(örn: div, span) ve attribute(örn: class) alanlarından yararlanarak regex’i oluşturalım. Kaynak koduna dikkat ettiğimizde enpara-gold-exchange-rates__table-item adında bir sınıf tanımlanmış. Regex’in yakalamaya başlaması için bu sınıfı, bitişi için de enpara-gold-exchange-rates__information sınıfını kullanabiliriz.

/enpara-gold-exchange-rates__table-item(.*?)enpara-gold-exchange-rates__information/g

Oluşturduğumuz regexi açıklayalım:

• enpara-gold-exchange-rates__table-item gördüğün zaman yakalamaya başla.
• (.*?) gördüğün tüm karakterleri yakala ve bir grup içine al.
• enpara-gold-exchange-rates__information gördüğün zaman yakalamayı bitir.

Şimdi regex’te bir aralık belirledik. Tüm ifadeleri bir tane regex yazarak elde etmeye çalışmak yazdığımız regex’i karmaşıklaştıracaktır. Bu nedenle burada yakaladığımız daha küçük alanda çalışacak yeni bir regex yazabiliriz. Ayrıca daha küçük bir alanda çalışacağını bildiğimiz için çok daha genel bir regex yazma imkanına sahip olduk.

Süper! Artık elimizde istediğimiz alanlar var. Yazdığımız basit iki tane regex ile istediğimiz sonuca ulaştık. Yazdığımız son regex’i açıklayalım ve kodlamaya geçelim.

• ([,]+) arasındaki sayıları ve virgül(,) işaretini gördüğünde yan yana kaç kez tekrar ediyorsa yakala bunları bir gruba al.
• \s+ yan yana olan tüm white space karakterleri yakala
• TL ifadesini yakala

Düzenli ifadelerle ilgili eksiğiniz olduğunu düşünüyorsanız sizi şöyle alalım:

seafoodplus.info ile Kodlama

Artık web scraping için tüm araçlar hazır. Yapacağımız işlem yazdığımız regex’leri String metotlarını kullanarak uygulamamıza eklemek. Uygulamamızda HTML verisini çekmiştik. Şimdi bir fonksiyon tanımlayıp ayıklama işlemlerini yapalım.

Kodları adım adım açıklayalım:

• extractWithRegex adında, parametre olarak çektiğimiz HTML body’sini alan bir fonksiyon tanımlandı.
• body bir string değişken olduğu için match() metoduyla, ilk yazdığımız regex ifadesini içinde aradık.
• Eğer match metodu bir eşleşme bulursa bir dizi, bulamazsa null döneceğini bildiğimiz için sonucu atadığımız extractedInfo değişkenini kontrol ettik. Eğer null ise bir hata fırlatmasını sağladık.
• Ardından bu kez ayıklanmış daha küçük parça içinde ikinci regex’i arattık.
• Yine aynı şekilde eşleşme bulamazsa hata fırlatmasını sağladık.
• Ardından elde ettiğimiz verileri replace metoduyla temizleyip istediğimiz formata getirdik ve parseFloat ile sayısal ifadelere dönüştürdük. İki tane parseFloat kullanma nedenimiz, toFixed metodunun String döndürmesidir. Sonucu sayısal istediğimiz için tekrar dönüştürdük.
• En sonda da bulduğumuz sonuçları return ile döndürdük.

Böylece satır kodla veri ayıklama işlemimizi bitirdik. extractWithRegex fonksiyonunun çıktısı bir dizi olacaktır.

Burada dikkat ederseniz değerler istediğimiz gibi sayısal değil ve sonlarında TL ifadesi yer alıyor. Bu verileri JSON objesine yazarken düzenleyebiliriz. Şimdi bu verileri en başta söylediğimiz gibi JSON formatına dönüştürelim. Bunun için de ayrı bir fonksiyon tanımlayalım.

createJSON fonksiyonumuzda bazı kabullerimiz oldu. Bu kabuller; info parametresinin bir dizi olması gerektiği ve bu dizinin değerlerinin sırasının önemli olduğudur. Bu kabulleri belirlerken, web sitesinde çektiğimiz verilerin sıralamasından ve extractWithRegex metodunun çıktısını dikkate aldık. Son olarak tüm uygulamamız aşağıdaki halini aldı.

Toplamda 50 satırlık kodla bir web sitesinden veri çekme, regex ile ayıklama ve formatlama işlemlerini yapmış olduk. Burada geliştirdiğimiz fonksiyonlarda bazı hatalar fırlattık. Bu nedenle try-catch kullanarak bu hataları yakalamak uygulamanın çökmesini engellemek için önemlidir. Bu nedenle getExchangeInfo() fonksiyonunu çağırırken try-catch arasına aldık.

Bir web sitesinden veri çekme işlemi, o web sitesinin HTML kodlarına çok bağımlıdır. Eğer sitede bir değişiklik olursa yüksek ihtimalle yazdığınız kod çalışmayacaktır. Web Scraping yaparken bu konuyu göz önünde bulundurmanız önemlidir.

Bir sonraki Web Scraping makalesinde aynı işlemi cheerio modülü ile nasıl yapacağımızı adım adım anlatmaya çalışacağım. Mutlu günler :)

Soru hatalı mı? 👎

Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!

Beğendim Spam olarak işaretle

Cevaplar (1)