giriiş
Vue.js, kullanıcı arayüzleri oluşturmak için kullanılan bir ön uç JavaScript çerçevesidir. Baştan sona kademeli olarak benimsenebilecek ve diğer kütüphaneler veya mevcut projelerle iyi entegre olabilecek şekilde tasarlanmıştır. Bu yaklaşım, onu hem küçük projeler hem de diğer araçlar ve kütüphanelerle birlikte kullanıldığında karmaşık tek sayfalık uygulamalar için uygun hale getirir.
API veya Uygulama Programlama Arayüzü, iki uygulamanın birbiriyle iletişim kurmasını sağlayan bir yazılım arayüzüdür. Bir API, genellikle diğer geliştiricilerin veritabanları veya programlama dilleri arasındaki farklılıklar konusunda endişelenmeden uygulamalarında kullanabilecekleri verileri açığa çıkarır. Geliştiriciler genellikle verileri JSON formatında döndüren bir API'den alır ve bunları ön uç uygulamalarına entegre ederler. Vue.js, bu tür API'leri kullanmak için oldukça uygundur.
Bu eğitimde, iki önde gelen kripto para birimi olan Bitcoin ve Ethereum'un güncel fiyatlarını görüntülemek için Cryptocompare API'sini kullanan bir Vue uygulaması oluşturacaksınız. Vue'ye ek olarak, API istekleri oluşturmak ve döndürülen sonuçları işlemek için Axios kütüphanesini kullanacaksınız. Axios, JSON verilerini otomatik olarak JavaScript nesnelerine dönüştürdüğü ve Promises'ı desteklediği için harikadır; bu da okunması ve hata ayıklaması daha kolay bir kod sağlar. Her şeyin güzel görünmesi için CSS Foundation çerçevesini kullanacağız.
Ön koşullar
- Atom, Visual Studio Code veya Sublime Text gibi JavaScript sözdizimi vurgulamasını destekleyen bir metin düzenleyici. Bu düzenleyiciler Windows, macOS ve Linux'ta mevcuttur.
- HTML ve JavaScript'i birlikte kullanma konusunda bilgi edinin. Daha fazla bilgi için HTML'e JavaScript Nasıl Eklenir? başlıklı makaleyi okuyun.
- JSON veri formatını tanıma bölümünde JavaScript'te JSON ile nasıl çalışılacağı hakkında daha fazla bilgi edinebilirsiniz.
- API İsteklerine Başlarken API'lerle çalışma konusunda kapsamlı bir eğitim için Python3'te Web API Nasıl Kullanılır'a göz atın. Python için yazılmış olsa da, API'lerle çalışmanın temel kavramlarını anlamanıza yardımcı olur.
Adım 1 – Temel bir Vue Uygulaması Oluşturun
Bu adımda, temel bir Vue uygulaması oluşturacaksınız. API'den gelen canlı verilerle değiştireceğimiz bazı sahte veriler içeren tek bir HTML sayfası oluşturacağız. Sahte verileri görüntülemek için Vue.js kullanacağız. Bu ilk adımda, tüm kodu tek bir dosyada tutacağız.
Metin düzenleyicinizi kullanarak index.html adında yeni bir dosya oluşturun.
Bu dosyaya, bir HTML iskeleti tanımlayan ve CSS Foundation çerçevesini ve Vue.js kitaplığını bir içerik dağıtım ağından (CDN) çeken aşağıdaki HTML işaretlemesini ekleyin. Bir CDN kullandığınızda, uygulamanızı oluşturmaya başlamak için ek kod indirmeniz gerekmez.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css">
<meta charset="utf-8">
<title>Cryptocurrency Pricing Application</title>
</head>
<body>
<div class="container" id="app">
<h3 class="text-center">Cryptocurrency Pricing</h3>
<div class="columns medium-4" >
<div class="card">
<div class="card-section">
<p> BTC in USD </p>
</div>
<div class="card-divider">
<p>{{ BTCinUSD }}</p>
</div>
</div>
</div>
</div>
<script src="https://unpkg.com/vue@3"></script>
</body>
</html>{{ BTCinUSD }} satırı, Vue.js'nin sağladığı veriler için bir yer tutucudur ve kullanıcı arayüzünde verileri bildirimsel olarak sunmamızı sağlar. Bu verileri tanımlayalım.
Etiketin hemen altında با Vue، این کد را برای ایجاد یک برنامه جدید Vue اضافه کنید و یک ساختار داده برای نمایش در صفحه تعریف کنید:
...
<script>
const { createApp } = Vue
createApp({
data() {
return {
BTCinUSD: 3759.91
}
}
}).mount('#app')
</script>
Bu kod, yeni bir Vue uygulama örneği oluşturur ve örneği uygulama kimliğine sahip öğeye bağlar. Vue, bu işlemi uygulamayı bağlama olarak adlandırır. Yeni bir Vue örneği tanımlar ve ona bir yapılandırma nesnesi ileterek yapılandırırız. createApp örneğine BTCinUSD değerini döndüren bir veri nesnesi iletiriz. Ayrıca, createApp örneğinin bağlama yöntemini, bu uygulamayı bağlamak istediğimiz öğe kimliğini ve görünümde kullanılabilir hale getirmek istediğimiz verileri içeren bir veri seçeneğini belirten #app argümanıyla çağırırız.
Bu örnekte, veri modelimiz Bitcoin fiyatı için bir kukla değere sahip tek bir anahtar-değer çifti içeriyor: { BTCinUSD: 3759.91}. Bu veriler, anahtarı şu şekilde çift süslü parantez içine aldığımız HTML sayfamızda veya görünümümüzde görüntülenir:
<div class="card-divider">
<p>{{ BTCinUSD }}</p>
</div>Bu şifrelenmiş değeri zamanla API'den gelen canlı verilerle değiştireceğiz.
Bu dosyayı tarayıcınızda açın. Ekranınızda, sahte verileri gösteren aşağıdaki çıktıyı göreceksiniz:
Fiyatı ABD doları cinsinden görüntülüyoruz. Euro gibi ek bir para biriminde görüntülemek için veri modelimize başka bir anahtar-değer çifti ekleyeceğiz ve işaretlemeye başka bir sütun ekleyeceğiz. İlk olarak, veri modeline Euro satırını ekleyelim:
<script>
const { createApp } = Vue
createApp({
data() {
return {
BTCinUSD: 3759.91,
BTCinEURO: 3166.21
}
}
}).mount('#app')
</script>Daha sonra bölüm <div class> Mevcut olanı aşağıdaki satırlarla değiştirin.
<div class="container" id="app">
<h3 class="text-center">Cryptocurrency Pricing</h3>
<div class="columns medium-4" >
<div class="card">
<div class="card-section">
<p> BTC in USD </p>
</div>
<div class="card-divider">
<p>{{ BTCinUSD }}</p>
</div>
</div>
</div>
<div class="columns medium-4" >
<div class="card">
<div class="card-section">
<p> BTC in EURO </p>
</div>
<div class="card-divider">
<p>{{ BTCinEURO }}</p>
</div>
</div>
</div>
</div>Şimdi dosyayı kaydedin ve tarayıcınızda yeniden yükleyin. Uygulama artık Bitcoin fiyatını hem Euro hem de ABD Doları cinsinden gösterecektir.
Bu adımda, Vue uygulamanızı örnek verilerle oluşturup yüklemesini sağlayacaksınız. Şimdiye kadar her şeyi tek bir dosyada yaptık, şimdi de sürdürülebilirliği artırmak için her şeyi ayrı dosyalara böleceğiz.
Adım 2 – Netlik İçin JavaScript ve HTML'yi Ayırma
Nasıl çalıştığını öğrenmek için tüm kodu tek bir dosyaya koyuyoruz. Bu adımda, uygulama kodunu iki ayrı dosyaya ayırıyoruz: index.html ve vueApp.js. index.html dosyası işaretlemeyi, JavaScript dosyası ise uygulama mantığını içeriyor. Her iki dosyayı da aynı dizinde tutuyoruz.
Öncelikle index.html dosyasını düzenleyip JavaScript kodunu kaldırıp yerine vueApp.js dosyasına giden bir bağlantı koyalım.
Dosyanın şu bölümünü bulun:
...
<script src="https://unpkg.com/vue@3"></script>
<script>
const { createApp } = Vue
createApp({
data() {
return {
BTCinUSD: 3759.91,
BTCinEURO: 3166.21
}
}
}).mount('#app')
</script>
...Ve bunu şu şekilde değiştirin:
...
<script src="https://unpkg.com/vue@3"></script>
<script src="vueApp.js"></script>
...Daha sonra index.html dosyasıyla aynı klasörde vueApp.js dosyasını oluşturun.
Bu yeni dosyaya, <code> etiketi olmadan index.html dosyasında bulunan aynı JavaScript kodunu yapıştırın. قرار دهید:
const { createApp } = Vue createApp({ data() { return { BTCinUSD: 3759.91, BTCinEURO: 3166.21 } } }).mount('#app')Dosyayı kaydedin ve tarayıcıda index.html'yi yeniden yükleyin. Öncekiyle aynı sonucu göreceksiniz.
Burada uygulamayı işaretlemeden ayırdınız. Ardından, Bitcoin'den daha fazla kripto para birimini desteklemek için daha fazla veri ekleyeceksiniz.
Adım 3 – Veriler Üzerinde Yineleme Yapmak İçin Vue Kullanımı
Bu adımda, verileri yeniden yapılandıracak ve görünümünü Bitcoin ve Ethereum fiyatlarını gösterecek şekilde değiştireceksiniz.
vueApp.js dosyasını açın ve veri modelinin dönüş kısmını şu şekilde değiştirin:
const { createApp } = Vue
createApp({
data() {
return {
results: {"BTC": {"USD":3759.91,"EUR":3166.21}, "ETH": {"USD":281.7,"EUR":236.25}}
}
}
}).mount('#app')Veri modelimiz, iç içe geçmiş bir veri yapısıyla biraz daha karmaşık hale geldi. Artık "results" adlı, biri Bitcoin fiyatı, diğeri Ethereum fiyatı için olmak üzere iki kayıt içeren bir anahtarımız var. Bu yeni yapı, görünümümüzdeki tekrarları azaltmamızı sağlıyor. Ayrıca, Cryptocompare API'sinden aldığımız verilere de benziyor.
Dosyayı kaydedin.
Şimdi verileri daha planlı bir şekilde işleyebilmek için işaretlememizi değiştirelim.
Index.html dosyasını açın ve Bitcoin fiyatını görüntülediğimiz dosyanın şu bölümünü bulun:
...
<div class="columns medium-4" >
<div class="card">
<div class="card-section">
<p> BTC in USD </p>
</div>
<div class="card-divider">
{{BTCinUSD}}
</div>
</div>
</div>
<div class="columns medium-4" >
<div class="card">
<div class="card-section">
<p> BTC in EURO </p>
</div>
<div class="card-divider">
{{BTCinEURO}}
</div>
</div>
</div>
</div>
...Bunu, tanımladığınız veri kümesi üzerinde yineleme yapan bu kodla değiştirin.
...
<div class="columns medium-4" v-for="(result, index) in results">
<div class="card">
<div class="card-section">
<p> {{ index }} </p>
</div>
<div class="card-divider">
<p>$ {{ result.USD }}</p>
</div>
<div class="card-section">
<p> € {{ result.EUR }}</p>
</div>
</div>
</div>
...Bu kod, bir for döngüsü gibi davranan v-for ifadesini kullanır. Veri modelimizdeki tüm anahtar-değer çiftlerini yineler ve her birinin verilerini görüntüler.
Tarayıcıyı yeniden yüklediğinizde saçma sapan fiyatlar göreceksiniz:
Bu değişiklik, vueApp.js'deki sonuç verilerine yeni bir para birimi eklememizi ve bunu başka bir değişiklik yapmadan ekranda görüntülememizi sağlar.
Bunu denemek için veri setine vurgulanan bilgilerle birlikte başka bir sahte giriş ekleyin:
const { createApp } = Vue
createApp({
data() {
return {
results: {"BTC": {"USD":3759.91,"EUR":3166.21},
"ETH": {"USD":281.7,"EUR":236.25},
"NEW Currency":{"USD":5.60,"EUR":4.70}}
}
}
}).mount('#app')Ethereum girişinden sonra gelen virgülü girin. Dosyayı kaydedin.
Şimdi sayfayı bir web tarayıcısında yüklerseniz, yeni girdinin görüntülendiğini göreceksiniz:
Verileri programatik olarak incelediğimizde, işaretlemeye manuel olarak yeni sütunlar eklememize gerek kalmaz.
Burada, çeşitli para birimlerinin fiyatlarını görüntülemek için örnek veriler kullandınız. Şimdi, Cryptocompare API'sini kullanarak gerçek verileri alalım.
Adım 4 – API'den veri alın
Bu adımda, simüle edilmiş verileri Cryptocompare API'sinden gelen canlı verilerle değiştirerek Bitcoin ve Ethereum fiyatlarını web sayfasında ABD doları ve Euro cinsinden görüntülersiniz.
Sayfamızın verilerini almak için https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH&tsyms=USD,EUR adresini istiyoruz. Bu API, Bitcoin ve Ethereum'u USD ve EUR cinsinden talep ediyor. Bu API, bir JSON yanıtı döndürüyor.
API'ye bir istek göndermek ve terminal oturumunda yanıtı görüntülemek için curl'ü kullanın:
curl 'https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH&tsyms=USD,EUR'Çıktıyı şu şekilde göreceksiniz:
Output
{"BTC":{"USD":21694.18,"EUR":21407.64},"ETH":{"USD":1504.02,"EUR":1485.99}}Bu sonuç, önceki adımda kullandığınız kodlanmış veri modeline benzer, ancak Bitcoin ve Ethereum'un mevcut değerleriyle. Şimdi tek yapmamız gereken, uygulamamızdan bu URL'yi talep ederek verileri değiştirmek.
İstek için, verileri almak ve veri modelindeki sonuçlar dizisine kaydetmek için Vue'nin mounted() fonksiyonunu Axios kütüphanesinin GET fonksiyonuyla birlikte kullanıyoruz. Mounted fonksiyonu, Vue uygulaması bir öğeye bağlandığında çağrılır. Vue uygulaması bağlandıktan sonra, isteği API'ye gönderir ve sonuçları kaydederiz. Web sayfasına değişiklik bildirilir ve değerler sayfada görünür.
Öncelikle index.html'yi açın ve Vue'yu yerleştirdiğiniz satırın altına bir script ekleyerek Axios kütüphanesini yükleyin:
...
<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="vueApp.js"></script>
...Dosyayı kaydedin ve ardından vueApp.js'yi açın.
API'yi talep etmek ve veri modelini sonuçlarla doldurmak için vueApp.js'yi değiştirin ve güncelleyin.
const url = "https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH&tsyms=USD,EUR";
const { createApp } = Vue
createApp({
data() {
return {
results:[]
}
},
mounted() {
axios.get(url).then(response => {
this.results = response.data
})
}
}).mount('#app')Sonuçların varsayılan değerini kaldırıp yerine boş bir dizi kullandığımızı fark edeceksiniz. Uygulamamız ilk yüklendiğinde hiçbir verimiz olmayacak, ancak HTML görünümü yeniden yüklendiğinde bazı verilerin tekrarlanmasını bekliyor.
Axios.get fonksiyonu bir Promise kullanır. API verileri başarıyla döndürdüğünde, blok içindeki kod yürütülür ve veriler results değişkenimizde saklanır.
Dosyayı kaydedin ve web tarayıcınızdaki index.html sayfasını yeniden yükleyin. Bu sefer kripto para birimlerinin güncel fiyatını göreceksiniz.
Hiçbir şey görmüyorsanız, JavaScript Geliştirici Konsolu Nasıl Kullanılır? başlıklı makaleyi inceleyebilir ve kodunuzu hata ayıklamak için JavaScript Konsolu'nu kullanabilirsiniz. Sayfanın API verileriyle yenilenmesi bir dakika sürebilir.
Ayrıca çapraz doğrulama için indirebileceğiniz HTML ve JS dosyalarının bulunduğu bu Github deposuna da göz atabilirsiniz. Ayrıca deponun klonunu da oluşturabilirsiniz.
Bu noktada, uygulamanızı inceleme için canlı verileri çağıracak şekilde değiştirmiş olursunuz.
Sonuç
Elli satırdan kısa bir sürede, yalnızca üç araç kullanarak bir API kullanan uygulama oluşturdunuz: Vue.js, Axios ve Cryptocompare API. Bir sayfada veri görüntülemeyi, sonuçlar üzerinde yineleme yapmayı ve statik verileri API sonuçlarıyla değiştirmeyi öğrendiniz.
Artık temelleri anladığınıza göre, uygulamanıza ek işlevler ekleyebilirsiniz. Bu uygulamayı ek para birimleri görüntüleyecek şekilde düzenleyebilir veya bu eğitimde öğrendiğiniz teknikleri kullanarak farklı bir API kullanarak başka web uygulamaları oluşturabilirsiniz.
