Marvel Karakterlerini React ve Marvel API ile Gösteren Bir Uygulama Geliştirme
Marvel evreninin hayranıysanız ve React ile web geliştirmeye ilgi duyuyorsanız, bu makale tam size göre! Bu yazıda, Marvel API’sini kullanarak React ile etkileşimli bir Marvel karakter gösteri uygulaması nasıl oluşturulacağını adım adım ele alacağız. Uygulamamız, kullanıcıların farklı Marvel karakterlerini keşfedebileceği, özelliklerine göz atabileceği ve görsellerini görüntüleyebileceği bir platform sağlayacaktır.
1. Proje Kurulumu
Öncelikle, yeni bir React projesi oluşturarak başlayalım. Bunun için komut satırında aşağıdaki komutu çalıştırabilirsiniz:
“`bash
npx create-react-app marvel-character-showcase
“`
Komut çalıştırıldıktan sonra yeni projenizin bulunduğu klasöre gidin:
“`bash
cd marvel-character-showcase
“`
2. Marvel API’ye Erişmek
Marvel karakterlerine erişmek için Marvel API’sine ihtiyacımız var. API’ye erişmek için ücretsiz bir API anahtarı edinmemiz gerekecek. Marvel Developer Portalı‘ndan bir hesap oluşturabilir ve bir anahtar talep edebilirsiniz.
3. API İstekleri
API anahtarını aldıktan sonra, React uygulamasından API’ye isteyler göndermek için gerekli kodları yazabiliriz. Bu bölümde, fetch API’sini kullanarak Marvel API’sinden karakter bilgilerini çeken bir fonksiyon oluşturacağız:
“`javascript
import React, { useState, useEffect } from ‘react’;
function App() {
const [characters, setCharacters] = useState([]);
useEffect(() => {
const fetchData = async () => {
const apiKey = ‘YOUR_API_KEY’; // API anahtarınızı buraya ekleyin
const response = await fetch(`https://gateway.marvel.com/v1/public/characters?ts=1&apikey=${apiKey}&hash=YOUR_HASH`); // Hash değerini hesaplayın
const data = await response.json();
setCharacters(data.data.results);
};
fetchData();
}, []);
// … (Kalan kod)
}
export default App;
“`
Yukarıdaki kodda, API anahtarınızı ve hash değerini eklemeniz gerekiyor. Hash değerini hesaplamak için Marvel API’sindeki dokümantasyona göz atabilirsiniz.
4. Verileri Gösterme
API’den karakter verilerini çektikten sonra, bunları kullanıcı arayüzünde gösterebiliriz. Her karakter için bir kart oluşturabilir ve kartta karakterin adını, görselini ve kısa bir tanıtımını gösterebiliriz.
“`javascript
// … (Diğer kod)
function App() {
// … (Diğer kod)
return (
{character.name}
{character.description}
))}
);
}
// … (Diğer kod)
“`
Bu kod, her karakter için bir kart oluşturur ve karakterin adını, görselini ve açıklamasını görüntüler. `` etiketi içerisinde `character.thumbnail.path` ve `character.thumbnail.extension` kullanarak API’den gelen karakterin görsel URL’sini oluşturduk.
5. Uygulamayı Geliştirme
Uygulamayı daha etkileşimli hale getirmek için, kullanıcının karakterleri arama özelliği ekleyebilir, karakterlerin ayrıntılarını görebileceği bir modal penceresi oluşturabilir veya karakterleri kategorilere ayırabilirsiniz.
Ayrıca, CSS ile uygulamaya daha güzel bir görünüm kazandırabilirsiniz. Sitemde daha fazla React ve API örnekleri bulabilirsiniz.
Sonuç
Bu makalede, Marvel API’sini kullanarak React ile bir Marvel karakter gösteri uygulaması oluşturmayı adım adım öğrendik. Uygulamayı daha da geliştirmek ve özelleştirmek için kullanabileceğiniz birçok yol var. API dokümantasyonunu inceleyerek farklı özelliklere erişebilir ve uygulamanızı kendi ihtiyaçlarınıza göre şekillendirebilirsiniz.
#Etiketler
* Marvel API
* React
* Web Geliştirme
* API İstekleri
* Karakter Gösteri
* Marvel Karakterleri
* Uygulama Geliştirme
* Javascript
* Fetch API
* CSS
* Programlama
* Uygulama Tasarımı