R ile Web Kazıma (Web Scraping)

class: center, middle, inverse, title-slide

.title[
# R ile Web Kazıma (Web Scraping)
]
.author[
### Umut Yener Kara
]
.date[
### 2023
]

---

### İnternetten Veri Toplama

İnternette sosyal bilimcilerin kullanabileceği bolca veri vardır. Mesela:

* Sosyal medya
* Haber siteleri 
* Hükümet kaynakları
* Forumlar

İnternetten veri toplamanın iki ana yolu vardır:

1. **API'lar** - i.e. Veri tabanlarından
2. **Webscraping** - i.e. Kullanıcılara yönelik web sayfalarından

__Altın Kural__: Her zaman önce API var mı kontrol edilmeli. API veya dışa aktarma özellikleri yoksa web kazımaya başvurulmalı.

---

## Web kazıma vs. API

* **Web kazıma avantajları**
    * İnternette görebildiğiniz her şey kazınabilir. [İyi bir yazı](https://blog.hartleybrody.com/web-scraping/).
    * Herhangi bir sınırlama, kota veya özel izin ihtiyacı yoktur (genellikle).

* **Web kazıma zorlukları**
    * Araştırmacılar için fazla ileri programlama becerileri gerektirebilir.
    * Veriler kirli ve düzensiz olabilir.
    * Siteden siteye kolay, zor ve hatta imkansız olabilir.
    * Hukuki ve etik sıkıntılar ortaya çıkabilir.

---

## Bazı uyarılar

* Kazıma yapmadan önce sitelerin kullanım ve hizmet şartları ile robots.txt dosyalarını mutlaka kontrol edin.

* Kibar olun, sitelerin sunucularına fazla yüklenip siteyi çökertmeyin. Etik web kazımı konulu şu [kaynağa](https://towardsdatascience.com/ethics-in-web-scraping-b96b18136f01) göz atabilirsiniz.

* Web siteleri devamlı değişir. Önceden çalışan kazıyıcınız muhtemelen sonrasında çalışmayacaktır.

* Eğer topladığınız verileri ticari amaçlarla kullanıyorsanız ve üçüncü taraflarla paylaşıyorsanız hukuki sıkıntılar yaşayabilirsiniz. Ancak ticari boyutu olmayan akademik araştırmalarda genelde yasal bir sıkıntı yaşanmamaktadır.

* Yasal olanla etik olan aynı şey değildir. Eğer kullanıcıların gizliliğini ve mahremiyetini ihlal ediyorsanız, yaptığınız yasal olsa bile etik olmayacaktır.

---

## Web Siteleri Nasıl Çalışır?

* Web siteleri bir sunucuda depolanan *kodlar* ile *verilerin* bir karışımından oluşur.

* Kullanıcıya ("front end") kodlar ve veriler HTML + CSS + javascript kodları olarak gönderilir.

```html
id="Vikipedi.27ye_ho.C5.9F_geldiniz.21"></span><span class="mw-headline" id="Vikipedi'ye_hoş_geldiniz!"><a href="/wiki/Vikipedi" title="Vikipedi">Vikipedi</a>'ye <a href="/wiki/Vikipedi:Ho%C5%9F_geldiniz" title="Vikipedi:Hoş geldiniz">hoş geldiniz</a>!</span></h1>
<p><a href="/wiki/Vikipedi:Vikipedi%27yi_kim_yaz%C4%B1yor%3F" title="Vikipedi:Vikipedi&#39;yi kim yazıyor?">Herkesin</a> katkıda bulunabildiği <a href="/wiki/%C3%96zg%C3%BCr_i%C3%A7erik" title="Özgür içerik">özgür</a> ansiklopedi
</p>
</div>

```

---
## Web siteleri nasıl çalışır?

* Tarayıcınız bu kodları ve verileri işleyerek çıktısını gösterir.

![layout](data:image/png;base64,#img/layout.png)

---
## HTML

* HTML: **H**yper **T**ext **M**arkup **L**anguage.

* HTML bir web sayfasının **yapısını** belirler.

* HTML bir dizi **öğe (*element*)**den meydana gelir.

* HTML öğeleri taracıya içeriği nasıl göstereceğini söyler.

* HTML öğeleri içeriğin hangi türde olduğunu belirtir: "başlık",
"paragraf", "link" vb.

---
## Web Kazıma HTML kodu getirir

* HTML kodu toplamak kolaydır.

* Asıl zor olan HTML kodunda istediğiniz veriyi bulmaktır.

* Herhangi bir siteye gidip *ctrl + u* kısayolu ile kaynak kodunu inceleyin.

* O halde istediğimiz veri bulmak için HTML kodunun yapısını anlamamız ve aradığımız öğeleri nasıl bulacağımızı öğrenmemiz gerekir.

---
## HTML: Temel Yapı

```html
<!DOCTYPE html>
<html>
	 <head>
		<title>Page title</title>
	</head>
 	<body>
 		<p>Hello world!</p>
 	</body>
</html>
```
---
## HTML Ağaç Temsili

* Ağacın bütün dalları bir *öğedir*.

* HTML öğeleri başka öğeler içerebilir.

![tree](data:image/png;base64,#img/HTMLDOMTree.png)

---
## HTML Öğeleri

HTML öğeleri başlangıç etiketi (*tag*) ile başlar ardından içerik gelir, sonlarında ise bir bitiş etiketi bulunur:

![html-tags](data:image/png;base64,#img/html-tags.png)

Bir HTML öğesi etiketler ve arasındaki herşeyi içerir.

---
## Yaygın HTML etiketleri

| Tag        | Meaning           | 
| ------------- |-------------  |
| `<head>`     | sayfa başlığı (metaveri, vb.) | 
| `<body>`     | ana gövde, asıl içerik |
| `<p>` | normal metin (paragraf) |
| `<h1>`, `<h2>`, `<h3>` | başlık, alt-başlık vb. 1, 2, 3  |
| `ol,`, `<ul>`, `<li>` | sıralı liste, sırasız liste, liste öğesi |
| `<a href="page.html">` | "page.html" adresine link |
| `<table>`, `<tr>`, `<td>`  | tablo, tablo satırı, tablo öğesi |
| `<div>`,`<span>` | general containers |

---
## HTML Sayfa Yapısı

![page-structure](data:image/png;base64,#img/page-structure.png)

---
## HTML Özellikleri

.pull-left[
* HTML öğelerininin özellikleri olabilir.

* Özellikler her zaman başlangıç etiketinde belirtilir.

* Özellikler her zaman isim/değer çiftleri şeklinde karşımıza çıkar: name="value"
]

.pull-right[
![html-tags](data:image/png;base64,#img/html-attributes.png)
]

---
## HTML içerisinde arama yapma

Bazen aradığımız veriyi sadece HTML etiketleri veya özelliklerini kullanarak bulabiliriz (örn., bütün `<a>` etiketleri).

Ancak genelde bu yeterli olmayacaktır. Bir sayfada 1000 tane `<a>` etiketi bulunabilir. Biz ise örneğin sadece `<p>` etiketinin içerisindeki `<a>` etiketleriyle ilgileniyor olabiliriz.

Bunun için CSS kullanmamız gerekiyor.

---
## CSS (**Cascading** Style Sheet)

CSS, HTML öğelerinin *görünümünü* belirler.

CSS web sitelerine sonradan eklenen bir özelliktir. HTML kodu daha çok içeriklerin formatını ayarlamak için tasarlanmıştır, görünümü için değil.

HTML `<font>` ve `<color>` gibi etiketler içerse bile bir web sitesinin topluca görünümünü değiştirmek için kullanışsızdır.

Genelde site tasarımcıları HTML kodunda görünüm için çok sayıda `class` ve `id` gibi **CSS selector** diye bilinen özellik kullanır.

Web kazıma yaparken istediğimiz veriyi bulmak ve toplamak için sıkça bu *selector*ları kullanırız.

---
## CSS Anatomisi

| Type  | HTML    | CSS Selector   | 
| :----- | :-------: | -------------:  |
| Element | `<a>`,     | `a` <br> `p a`| 
| Class | `<a class="blue">`  | `.blue` <br> `a.blue` |
| ID | `<a id="blue">` | `#blue` <br> `a#blue` |

---

### Selector Gadget ile Öğe Bulmak

* Selector Gadget HTML öğelerini bulmayı kolaylaştıran bir tarayıcı eklentisidir.

* Şu siteye başvururak eklentiyi kurabilirsiniz: https://selectorgadget.com/

* *Kullanım:* Selector Gadget'ı çalıştırın, seçmek istediğiniz öğeye tıklayın.

* Sonrasında seçmek **istemediğiniz** öğelere tıklayın.

* Sadece seçmek istediğiniz öğeler sarıyla boyalı olana kadar yukarıdakileri tekrarlayın.

* Sağ alt köşedeki selector adresini kopyalayıp ilgili R koduna yapıştırın ve veriyi toplayın.

---
### Genel İş Akışı

1. Veri toplamak istediğiniz sitenin **statik** mi yoksa **dinamik** mi bir web sitesi olduğunu anlamaya çalışın.

2. Statik web siteleri için `rvest`, dinamik web siteleri için `rselenium` kullanın.

3. Selector Gadget ile toplamak istediğiniz öğeleri seçerek adresleri R koduna yazın.

4. Eğer Selector Gadget selectorları işe yaramıyorsa, `F12` veya tarayıcınızın `inspect` özelliğini kullanarak doğru selectorları bulmaya çalışın.

5. Eğer kodunuz istediğiniz veriyi topluyorsa kodunuzu bir fonksiyona dönüştürüp istediğiniz sayıda sayfaya uygulayın.

6. Veriyi bilgisayarınıza `.csv` gibi tercih edeceğiniz bir formatta kaydedin ve analiz edin.

**Not:** Sunum, Rochell Terman'ın bir sunumundan uyarlanmıştır: https://github.com/rochelleterman/Webscraping-R