Web API'leri için Acemi Eğitimi + Hızlı Başlarken

API'lerle çalışma hakkında ilk öğrenmeye başladığımda bu göründüm.

Demek bir API kullanmak istiyorsun?

Eğer bunu okuyorsanız, ihtimaller doğrultusunda şu şeyleri aradığınızdan emin olabilirsiniz:

“Bir API'yi nasıl kullanırım?”
“Bir API için hangi kütüphaneyi kullanırım?”
“API nedir?”
“Lütfen bana yardım edin freeCodeCamp’ın Weather App API'sine takıldım ve ne yaptığımı bilmiyorum.”

Hayatını 100 kat daha kolaylaştıracağım çünkü seninle aynı teknedeydim.

Devam edin, çünkü bunu okuduktan sonra, size bir API'nin tam olarak ne olduğunu ve biriyle nasıl etkileşime gireceğinizi anlatacağınıza söz veriyorum.

İlk önce ilk şey.

Bir nesnenin ne olduğunu anlamamız gerekir.

Bunun gibi bir şey gördüğünü biliyorum.

Tanıdık geliyor mu? Evet biliyorum, muhtemelen JavaScript yolculuğunuzda ilk öğrendiğiniz şeylerden biriydi.

Tamam, peki amacın ne? Bunun ne alakası var?

Bu nesne hakkında bir şey fark ettiniz mi? Hileli bir soru değil.

Bu nesne size ne söylüyor?

Err, kişi adında bir nesne mi? Anahtarları ve değerleri var… peki ne?

İyi başlangıç.

Tamam, başka ne söylüyor? Bu nesne size tam olarak ne söylüyor?

Neyi tarif ediyor?

Ah. Kişi denilen bir nesnedir. Mario olan bir isim var. 22 yaşında bir yaş. Luigi adında bir erkek kardeş. Ve sanırım yemek mantar mı?

Şimdi anladın!

İlerleyelim.

Peki buna ne dersin?

Bu aynı şey değil mi?

Yakından bak.

Ah, beyan yok mu? Mesela hiçbir const Person = şu anda değil.

Isınıyorsunuz…

Anahtarların tırnakları var mı?

Kesinlikle.

NE OLMUŞ YANİ?

Anlamanız gereken şey, ilk snippet'iniz normal günlük JavaScript nesnenizdir, ikinci snippet'in çok benzer olduğunu, ancak buna JSON denir.

En büyük kilit nokta, genellikle birlikte çalışacağınız API'nin her zaman JSON'u tüküreceğini bilmek. Bu anahtar.

Beynine aşılamaya çalıştığım zihinsel model, bir API ile çalışmanın bir nesneyle çalışmak kadar basit olmasıdır.

Yani ilk pasaja geri dönelim. Bu Kişinin adını almak istesem ne yazmam gerekirdi?

Bu kolay. Sadece nokta özelliğine isim özelliğine erişirim. Ben sadece Person.name yapabilirim ve bu bana "Mario" verirdi.

Şimdi, peki ya JSON?

Uh. Aynı şey…?

Neredeyse. Mesele şu ki, sadece isimsiz bir nesne. Nokta isimlendirmeden önce bir şey olmadan .name nasıl kullanılır

Hey! Bu hileli bir soruydu. Adil değil!
Ama tamam. Peki nasıl atayacağız?

Bu kolay.

Daha önce ne dediğimi hatırlıyor musun? Bir JSON genellikle bir API'den gelen yanıt nasıl olurdu?

Pratik bir örnek kullanalım. Aslında bir API’den veri alalım.

Devam edin ve bunu web tarayıcınızın konsoluna yerleştirin.

Ne görüyorsun?

Bu biraz farklı görünüyor. Ama öncekinden biraz daha tanıdık. Bu sadece bir dizi nesne.

Ve dizideki ilk nesnenin adını istesem?

Kolay! İlk nesneyi almak için [0] tuşunu kullanın, daha sonra adı almak için .name kullanın!

Şimdi anlıyorsun.

Tamam. Fakat… bunların hepsi nasıl çalışıyor? Nereye atandı? Bu kod ne yapıyor? Bıraktığın çok şey var. Kayboldum!

Bunu olabildiğince basit yapacağım. Tamamen anlayamayabilirsiniz ama bu yakında zamanla gelecek.

Bu snippet'in açıklamalı bir sürümüne bakalım.

Ve işte burda!

Şimdi bir API'nin nasıl çağrılacağının temellerini anlamalısınız, verileri alıp bir şeyler yapabileceksiniz.

Bu durumda API'yi arayabildik ve şimdi ilk nesneyi ve onun ismini console.log dosyasını alabildik.

Yani burada zorluk.

Veri almanı ve onu DOM'ye girmeni istiyorum.

İşte başlangıç ​​kodunuz. Bunu en sevdiğiniz metin düzenleyicide bir .html dosyasına kopyalayıp yapıştırın ve boşlukları doldurmaya çalışın.

Farklı bir son nokta kullanırsanız bonus puan! / Posts bitiş noktasını kullanmayı deneyin.