Altın Konu API Nasıl Çalışır ve Entegre Edilir?

Replicant · 30 May 2021

Merhaba, programlama arayüzleri (API'ler), akıllı uygulamalar oluşturmak için nihai kısayollardan biridir. İki uygulama arasında bir iletişim kanalıdır. Bilerek veya bilmeyerek, internette gezinirken veya günlük yaşamınızda programları kullanırken bazı noktalarda API kullanmışsınızdır.

Bir API genellikle yanıt olarak karmaşık veriler gönderse de, bu bilgileri kullanıcılarınıza hizmet etmek için nasıl anlayabilir ve kullanabilirsiniz? API'ler hem deneyimli hem de yeni geliştiriciler için hayatı kolaylaştırır. Bu nedenle, bunları uygulamanızla nasıl kullanacağınızı bilmeniz gerekir.

Burada, birkaç kullanım örneği ve örnekle, programlarınıza geliştirici olarak hizmet etmek için bir API'yi nasıl kullanabileceğinize bir göz atacağız.

API'ler Nasıl Çalışır?

Geliştiriciler, diğer geliştiricilere hizmet edebilecek ürünler olarak API'ler oluşturur. Amaç, karmaşık web geliştirme süreçlerini tüketici geliştiriciler veya işletmeler için daha kolay, daha verimli ve daha hızlı hale getirmektir.

Çoğu işletme, sorunları çözmek ve müşterilerine daha iyi hizmet vermek için artık üçüncü taraf API'lerine bağımlıdır. Ancak, API'leri kullanmak birçok insanın düşündüğü kadar karmaşık değildir. Bunu, belirli bir HTTP isteği yaptığınızda size veri biçiminde belirli bir yanıt veren üçüncü taraf bir çözüm olarak düşünebilirsiniz.

API kullanmak, bir pizza restoranında sipariş vermek gibidir. Onlara ne istediğinizi söylemek için mutfağa gidemezsiniz. Pizzanızla dönmeden önce siparişinizi alıp mutfağa iletecek bir garsona ihtiyacınız var.

Bir API'yi sizinle mutfak arasındaki bağlantı olarak görüntüleyebilirsiniz. Bu durumda, garson (API) sağlayan restoranın patronu olan bir müşterisiniz. Garson daha sonra seçtiğiniz pizza (veri) ile yanıt verir. Gerçek bir API'de, web uygulamanız, uç nokta HTTP istekleri yaparak sağlayıcının içeriğini API'si aracılığıyla tüketmeyi talep eden istemcidir.

API Uç Noktası nedir?

Bir API'ye bağlanmak, programınızı bir API uç noktasına bağlamanızı gerektirir. Bunu iki yönlü bir bağlantı olarak görebilirsiniz. Programınıza bağlı uç nokta bir istek gönderirken, API'ye bağlı uç nokta sizi belirli bir yanıtla geri besler.

Uç nokta, istemcinin bir API'nin kaynaklarına doğrudan erişmesini isteyen ve sağlayan bir URL'dir.

Bir API ile veri almanın yanı sıra, bir sağlayıcıdan bir istemciye istekleri POST yapabilir, bir sağlayıcıdan daha fazla bilgi almak için PUT yöntemini kullanabilir ve ayrıca mevcut verileri programınızdan kaldırmak için DELETE yöntemini kullanabilirsiniz. Bu yöntemlerin her biri genellikle bir API'nin belgelerinde bulunur.

Bir API'ye Bağlanmak İçin Kriterler

Bir API'yi programınıza entegre etmek yalnızca anlık bir karar değildir; önceden düşünülmüştür. Hangi bilgiyi istediğinizi ve ne kadarını istediğinizi bilmelisiniz. Bu, özellikle çok boyutlu bir dizi olarak gelen JSON verileriyle uğraşıyorsanız, karmaşıklığı azaltır. Bu uygulama aynı zamanda programınız için ihtiyaç duyduğunuz belirli bilgileri almanızı sağlar.

Onlara bağlanmak için farklı kurallara sahip yüzlerce API var. Bazı API'ler ücretsiz ve açık kaynaklıyken, diğerlerine yalnızca abonelik temelinde erişilebilir.

Bazıları sorunsuz ve anlaşılır olmasına ve herhangi bir ön koşul gerektirmemesine rağmen, diğer API'ler, uç noktalarına bağlanabilmeniz için bir API anahtarı oluşturma veya bir geliştirici hesabına kaydolma gibi koşulları karşılamanızı gerektirebilir.

Ancak, herhangi bir API'nin en önemli yönlerinden biri, onun dokümantasyonudur. En iyi uygulama, kaynaklarını nasıl kodlayacağınız ve kullanacağınızla ilgili kılavuzlar için bağlanmayı düşündüğünüz herhangi bir API'nin belgelerini okumak ve takip etmektir. Bunun nedeni, her API'nin kendi bağlantı yöntemlerine ve talimatlarına sahip olmasıdır.

Herhangi bir API'ye bağlanmak için desteklediği programlama dillerini de bilmeniz gerekir.

Bir API'ye Nasıl Bağlanır: Pratik Örnekler

Bir API'ye bağlanmanın belirli bir yolu yoktur, ancak birkaç örnek, uygulamanızla API verilerini nasıl kullanabileceğinize ilişkin temel kavramları size gösterecektir. Ancak daha ileri gitmeden önce, API'ler ve bunlardan nasıl yararlanabileceğiniz hakkında birkaç makale yazdık.

Örneğin, gerçek zamanlı hava durumu verilerine erişmenizi sağlayan Weatherstack API ile nasıl bağlantı kurabileceğiniz hakkında ayrıntılı bir makalemiz var . Biz de yaklaşık yazdım sen Mediastack API kullanabilirsiniz nasıl web sitenize haber başlıklarını eklemek için kullanabileceği ücretli API olduğunu.

Bir API'ye nasıl bağlanabileceğinize dair birkaç kısa kod örneğine göz atalım.

Iro.js Renk Seçici API Nasıl Kullanılır

Iro.js, web sitenize ücretsiz bir renk seçici eklemenizi sağlayan basit bir API'dir. Renk tekerleğinde bir renk noktası seçtiğinizde API, o rengin onaltılı veya RGB kodunu döndürür. İro.js API'ye bağlanmak için tek yapmanız gereken içerik dağıtım ağı (CDN) uç noktasını DOM'nuzun baş bölümüne yapıştırmaktır.

Bu API'nin tam belgeleri iro.js.org adresinde mevcuttur . Aşağıdaki örnek kod parçasıyla bu API'ye nasıl bağlanabileceğinizi görelim:

Kod:

<!DOCTYPE html>
<html>
<head>
    <title>Practice Slider</title>
    <script src="https://cdn.jsdelivr.net/npm/@jaames/iro@5"></script>
</head>
<body>
      <button id="color-button"  onclick="sample()">Display color picker</button>
<div id="color-circle"> </div>
<div id="color-code"> </div>
</body>
<script>
let colors=  document.getElementById('color-code');
 const sample= ()=>{
 var colorPicker = new iro.ColorPicker('#color-circle', {
   // Set the size of the color picker
   width: 320,
   // Set the initial color to pure red
   color:"#ff0000"
 });
 colorPicker.on(['color:change', 'color:init'], function(color) {
  // log the current color as a HEX string
   colors.innerHTML=color.hexString;
 });
};
</script>
</html>

Yukarıdaki örnek API durumunda, ona bağlanmak için bir API anahtarına ihtiyacınız yoktur. Ancak, daha iyi anlamak için JavaScript'e daha yakından bakın. Bu API ile bağlantı kurmak için sadece iro sınıfından ColorPicker fonksiyonunu çağırmamız gerekiyor , ardından renk çarkı konteynerinin id'sini sınıfa geçiriyoruz .

iro.js API'sinin uç noktasıyla bağlantı kurmak kolaydır çünkü geliştiricileri, kullanıcıları için sınıfı kodlamak için fazladan bir iş yapmıştır. Aşağıdaki resim, yukarıdaki örnek kodun sonucudur.

Result-of-the-color-selector-API-code.jpgq50fitcropw750dpr1.jpg

Renk değişikliği olayının nasıl olduğunu görmek için başka bir HTML dosyası açıp aşağıdaki kodu komut dosyaları bölümüne yapıştırabilirsiniz :

Kod:

var colorPicker = new iro.ColorPicker('#color-pick', {
   // Set the size of the color picker
   width: 400,
   // Set the initial color to pure red
   color:"#ff0000"
 });
const myColor =(color)=>{
    console.log(color.hexString);
};
colorPicker.on("color:change", myColor);

Yukarıdaki kod, tekerlek üzerindeki renk seçicinin konumunu her değiştirdiğinizde onaltılık renk değerlerini günlüğe kaydeder.
Not: Tüm örnek kodlar, API belgelerindeki talimatları izlemenin sonucudur.

NoCodeAPI Döviz Alım Satım API'sı Nasıl Kullanılır

NoCodeAPI, para birimi dönüştürücü API dahil olmak üzere birçok API sunar. Döviz bozdurma uç noktasına bağlanmak için NoCodeAPI pazarına gidin ve bir hesap oluşturun.

Giriş yaptıktan sonra, sayfanın üst kısmında bir arama çubuğu var. Bu arama çubuğuna döviz kuru yazın , sorgunuz göründüğünde Etkinleştir'i tıklayın .

Sonraki sayfada Make Currency Exchange API'yi tıklayın . Ardından, API için tercih edilen bir ad yazın ve Oluştur'u tıklayın .

API'yi oluşturduktan sonra Belgeleri Görüntüle üzerine tıklayın . Ardından, API'nin uç noktasına bağlanma kodunu görüntülemek için tercih edilen bir dil seçin. Daha sonra bu örnek kodu kopyalayabilir ve daha fazla özelleştirme için uygulamanıza yapıştırabilirsiniz.

Para birimi dönüştürme için aşağıdaki örnek kodumuza bir göz atın:

Kod:

<!DOCTYPE html>
<html>
<head>
    <title>Currency converter</title>
</head>
    <div id="currency"> </div>
</body>
<script>
    let currency=  document.getElementById('currency');
async function callingFn() {
    try {
        const response = await fetch("https://v1.nocodeapi.com/techyprem/cx/FHNXhKRkWDCvMehl/rates/convert?amount=10&from=USD&to=Eur", {
            method: "get",
            headers: {
                "Content-Type": "application/json"
            }
        });
        const json = await response.json();
        currency.innerHTML="Success:" + JSON.stringify(json);
    } catch (error) {
        console.error("Error:", error);
    }
}
callingFn();
<script>
</html>

Yukarıdaki kod, dokümantasyondakinin yalnızca değiştirilmiş bir versiyonudur. Bununla birlikte, JavaScript'in yanıt değişkenindeki dönüşüm parametrelerine çok dikkat edin.

İşte ham JSON çıktısı şöyle görünür:

Kod:

Success:{"query":{"from":"USD","to":"EUR","amount":10},"info":{"time":1604587505388,"rate":0.844865},"result":8.44865,"text":"10 USD = 8.44865 EUR"}

API'lerden Yararlanın

Uygulamanız için API'leri kullanmak, projeleri daha hızlı tamamlamanıza olanak tanır. Bazı API belgeleri teknik olabilse de, yeni başlayanlar için kullanışlı olan birçoğu var.

Ancak, daha önce de belirttiğimiz gibi, verilere dokunmak istediğiniz herhangi bir API'den en iyi şekilde yararlanmak için, belgelerini yakından incelemeli ve ona bağlanma kurallarına uymalısınız.

Buradaki örneklerimiz için JavaScript kullanmış olsak da, API türüne bağlı olarak çoğu hala diğer programlama dillerini de desteklemektedir. Herhangi bir API'nin dokümantasyonundan dil desteği hakkında bilgi alabilirsiniz. Ayrıca, burada kullandığımız örneklerin birçok API kullanım durumundan yalnızca birkaçı olduğunu unutmayın.