Web eğitimlerinin çoğu “HTML nedir?” diye başlar. Biz tersinden başlıyoruz. Önümüzde çalışan bir site var ve içinde ne olup bittiğini merak ediyoruz.
Seri boyunca tek bir site kullanıyoruz: şu an içinde olduğunuz site. Her bölümün burada bir alıştırma sayfası var. Videoda ne yapıyorsak siz de kendi tarayıcınızda aynısını yapabilirsiniz; sayılar, adresler, cevaplar sizin ekranınızda da aynı çıkar.
Sona geldiğimizde elinizde kendi yazdığınız bir program olacak. Bir alışveriş listesi alacak, fiyatları bu siteden çekecek, nakliyeyi hesaplayacak ve sonucu Excel'e yazacak. Daha önemlisi, başka bir sitede aynı şeyi nasıl yapacağınızı da bileceksiniz.
- Kaç bölüm?
- Yirmi. Sırayla izleyin; her bölüm bir öncekinin bıraktığı yerden devam ediyor.
- Ne gerekiyor?
- Chrome ve yedinci bölümden itibaren Python. İkisi de ücretsiz.
- Ön bilgi şart mı?
- Hayır. Biraz Python bilmek yedinci bölümden sonra işinizi kolaylaştırır, o kadar.
Önce bakmayı öğreniyoruz
İlk beş bölümde tek satır kod yazmıyoruz. Tarayıcı ile sunucu arasındaki konuşmayı dinliyoruz.
-
1
Bir web sitesi açtığımızda aslında ne oluyor?
Adres çubuğuna bir şey yazıp Enter'a bastığımız o bir saniyeyi yavaşlatıyoruz. Tarayıcı kime gidiyor, ne istiyor, karşılığında ne alıyor? Bu bölümde kod yok, sadece perdeyi aralıyoruz.
Alıştırma: Ana sayfa
-
2
F12'ye bastığımızda karşımıza çıkan dünya
F12'ye bir kere bastıysanız o kalabalık pencereyi büyük ihtimalle hemen kapatmışsınızdır. Bu sefer kapatmıyoruz. Hangi sekme ne işe yarıyor, hangilerine hiç bakmasak da olur, tek tek geziyoruz.
Alıştırma: DevTools alıştırma sayfası
-
3
Network sekmesi nedir?
Tek bir sayfa açtığımızı sanıyoruz ama tarayıcı arkada onlarca dosya istiyor. Network sekmesi bunların hepsini satır satır yazıyor. Okumayı bir öğrenince bir daha kapatamıyorsunuz.
Alıştırma: Network alıştırma sayfası, Ana sayfa
-
4
GET isteği nedir?
Arama kutusuna “ankara” yazınca adresin sonuna eklenen ?q=ankara ne demek? Adresi elle değiştirerek sayfayı yönetiyoruz. Sonra 200, 404, 500 gibi sayılarla sunucunun bize ne demek istediğini çözüyoruz.
Alıştırma: Arama, Durum kodları
-
5
Response gerçekte nedir?
İstek attık, peki geri gelen şey tam olarak ne? Aynı veriyi dört farklı kılıkta görüyoruz. Tarayıcının bunlardan birini sayfa yapıp bir diğerini neden dosya diye indirdiği de burada anlaşılıyor.
Alıştırma: Yanıt türleri
İlk verimizi çekiyoruz
Python sahneye çıkıyor. Ekranda gördüğümüz şeyi kodla almayı öğreniyoruz.
-
6
HTML'de görünen veriyi bulmak
Ekranda bir fiyat görüyorsunuz. O fiyat, sunucudan gelen o uzun metnin tam olarak neresinde yazıyor? Sağ tık, İncele. Aradığımız şeyin yerini tarif etmeyi öğreniyoruz, çünkü birazdan aynı tarifi Python'a vereceğiz.
Alıştırma: Ürün detayı
-
7
Python ile ilk verimizi çekiyoruz
Serinin ilk kodu. Dört satır Python ile tarayıcının yaptığı işi kendimiz yapıyoruz ve sayfa terminale düşüyor. Sunucu geç cevap verirse ya da sayfa yoksa ne olacağına da bakıyoruz.
Alıştırma: Ürün detayı, Yavaş sayfa, İstek yankısı
-
8
BeautifulSoup ile HTML'i parçalamak
Elimizde binlerce satırlık bir HTML var, biz içinden yalnızca ürün adıyla fiyatı istiyoruz. BeautifulSoup ile samanlıktan iğneyi çekip çıkarıyoruz.
Alıştırma: Fiyat listesi, Ürün detayı
-
9
Sayfa sayfa gezinmek
Bir sayfada 12 kayıt var, sitede 1200. Yüz sayfayı elle gezecek değiliz. Adresteki deseni bulup işi bir döngüye bırakıyoruz. Bunu yaparken karşıdaki sunucuya nasıl nazik davranılır, onu da konuşuyoruz.
Alıştırma: Fiyat listesi, 2. sayfa
Duvara çarpıyoruz
Bildiğimiz yöntem bir sayfada çalışmıyor. Nedenini ararken web sitelerinin asıl nasıl çalıştığını görüyoruz.
-
10
Ama bazı veriler HTML'de yok!
Her şey yolunda giderken bir sayfa bizi yarı yolda bırakıyor. Tarayıcıda dopdolu bir tablo var, Python'da sıfır satır, üstelik hata da yok. Serinin kırılma noktası bu bölüm.
Alıştırma: Günün en çok değişenleri
-
11
JavaScript ne yapıyor?
Geçen bölümün gizemini çözüyoruz. Bir düğmeye bastığınızda sayfa yenilenmeden içerik nasıl değişiyor? JavaScript'in arkada kiminle konuştuğunu adım adım izliyoruz.
Alıştırma: Etkileşimli liste
-
12
Fetch/XHR nedir?
Network'e geri dönüyoruz, bu kez tek bir filtreyle: Fetch/XHR. Sayfayı getiren istekle veriyi getiren isteğin ayrı şeyler olduğunu görünce pek çok şey yerine oturuyor.
Alıştırma: Fetch ve XHR yan yana
-
13
Network'teki bir isteği baştan sona okumak
Bir isteğe tıklayınca açılan o sekmeler var ya: Headers, Payload, Response, Preview, Initiator. Hepsini bir kere, acele etmeden, baştan sona okuyoruz. Bundan sonra hiçbir istek gözünüzü korkutmayacak.
Alıştırma: İstek okuma alıştırması
Sitenin arka kapısı
Veriyi kaynağından almayı öğreniyoruz ve her şeyi tek bir programda birleştiriyoruz.
-
14
POST isteği nedir?
Şimdiye kadar hep istedik, bu kez gönderiyoruz. Bir formu doldurup gönderdiğinizde yazdıklarınız adres çubuğunda görünmüyorsa nereye gidiyor?
Alıştırma: Fiyat sorgulama
-
15
Tarayıcının yaptığı isteği Python'dan yapmak
Serinin en keyifli anlarından biri. Tarayıcının gönderdiği isteği Network'ten okuyup aynısını Python'la gönderiyoruz ve sunucu farkı anlamıyor. Sonra bilerek bozuyoruz ki hata mesajı okumayı da öğrenelim.
Alıştırma: Fiyat sorgulama, Sorgu ucu
-
16
JSON nedir ve nasıl kullanılır?
Sunucular artık bize süslü parantezlerle dolu metinler gönderiyor. JSON ilk bakışta ürkütücü durur ama iç içe kutulardan ibarettir. Doğru kutuyu açmayı öğreniyoruz.
Alıştırma: JSON gezgini, Tek kayıt
-
17
API nedir?
Buraya kadar adını koymadan kullandığımız şeyin adını koyuyoruz: API. Sekizinci bölümde otuz satırla yaptığımız işi burada birkaç satırla yapınca neden var olduğunu kendiniz göreceksiniz.
Alıştırma: API dokümantasyonu
-
18
Bir web sitesinin API'sini bulmak
Dedektiflik bölümü. Elimizde doküman yok, adres yok, yalnızca çalışan bir sayfa var. Sitenin arkada hangi kapıyı çaldığını kendimiz buluyoruz.
Alıştırma: Şehir karşılaştırma
-
19
Initiator ile isteğin kaynağını bulmak
Bir adım daha derine iniyoruz. İsteği bulduk, peki onu sayfadaki hangi kod, hangi satırda gönderiyor? Yazılımla uğraşanlar bu bölümü sevecek.
Alıştırma: Fiyat trendi
-
20
Gerçek proje: maliyet hesaplayıcıyı kodla kullanmak
Final. Yirmi bölümde öğrendiğimiz her şeyi tek bir programda topluyoruz. Alışveriş listesini veriyoruz; program fiyatları buluyor, nakliyeyi hesaplıyor ve sonucu Excel'e yazıyor.
Alıştırma: Maliyet hesaplayıcı
Sonrası
Bu yirmi bölüm işin temeli. İkinci sezonda aynı siteyle devam edip daha büyük işlere giriyoruz: bin adresi otomatik gezen tarayıcılar, tekrar eden veriyi temizlemek, giriş yapılması gereken sayfalar, çerezler ve oturumlar, bir de tarayıcının kendisini kodla yönetmek.