32 KiB

Raw Blame History Unescape Escape

Tarayıcı Uzantısı Projesi Bölüm 2: Bir API Çağırma, Yerel Depolama Kullanma

journey
    title Your API Integration & Storage Journey
    section Foundation
      Setup DOM references: 3: Student
      Add event listeners: 4: Student
      Handle form submission: 4: Student
    section Data Management
      Implement local storage: 4: Student
      Build API calls: 5: Student
      Handle async operations: 5: Student
    section User Experience
      Add error handling: 5: Student
      Create loading states: 4: Student
      Polish interactions: 5: Student

Ders Öncesi Test

Ders öncesi test

Giriş

Hatırlıyor musunuz, tarayıcı uzantınızı oluşturmaya başlamıştınız? Şu anda güzel görünümlü bir formunuz var, ancak bu form temelde statik. Bugün onu gerçek verilerle bağlayarak ve hafıza kazandırarak canlandıracağız.

Apollo görev kontrol bilgisayarlarını düşünün - sadece sabit bilgileri göstermiyorlardı. Sürekli olarak uzay aracıyla iletişim kuruyor, telemetri verileriyle güncelleniyor ve kritik görev parametrelerini hatırlıyorlardı. Bugün oluşturacağımız dinamik davranış tam olarak bu. Uzantınız internete bağlanacak, gerçek çevresel verileri alacak ve ayarlarınızı bir dahaki sefere hatırlayacak.

API entegrasyonu karmaşık görünebilir, ancak aslında kodunuza diğer hizmetlerle nasıl iletişim kuracağını öğretmekten ibarettir. İster hava durumu verilerini, ister sosyal medya akışlarını, ister bugün yapacağımız gibi karbon ayak izi bilgilerini alıyor olun, hepsi bu dijital bağlantıları kurmakla ilgilidir. Ayrıca tarayıcıların bilgiyi nasıl saklayabileceğini keşfedeceğiz - tıpkı kütüphanelerin kitapların nerede olduğunu hatırlamak için kart kataloglarını kullanması gibi.

Bu dersin sonunda, gerçek verileri alan, kullanıcı tercihlerini saklayan ve sorunsuz bir deneyim sunan bir tarayıcı uzantısına sahip olacaksınız. Haydi başlayalım!

mindmap
  root((Dynamic Extensions))
    DOM Manipulation
      Element Selection
      Event Handling
      State Management
      UI Updates
    Local Storage
      Data Persistence
      Key-Value Pairs
      Session Management
      User Preferences
    API Integration
      HTTP Requests
      Authentication
      Data Parsing
      Error Handling
    Async Programming
      Promises
      Async/Await
      Error Catching
      Non-blocking Code
    User Experience
      Loading States
      Error Messages
      Smooth Transitions
      Data Validation

✅ Kodunuzu nereye yerleştireceğinizi bilmek için ilgili dosyalardaki numaralandırılmış segmentleri takip edin.

Uzantıda manipüle edilecek öğeleri ayarlayın

JavaScript'in arayüzü manipüle edebilmesi için önce belirli HTML öğelerine referanslar oluşturması gerekir. Bunu, bir teleskopun belirli yıldızlara yönlendirilmesi gibi düşünün - Galileo, Jüpiter'in uydularını incelemeden önce Jüpiter'i bulmalı ve odaklanmalıydı.

index.js dosyanızda, her önemli form öğesine referanslar yakalayan const değişkenleri oluşturacağız. Bu, bilim insanlarının ekipmanlarını etiketlemesine benzer - her seferinde tüm laboratuvarı aramak yerine, doğrudan ihtiyaç duydukları şeye erişebilirler.

flowchart LR
    A[JavaScript Code] --> B[document.querySelector]
    B --> C[CSS Selectors]
    C --> D[HTML Elements]
    
    D --> E[".form-data"]
    D --> F[".region-name"]
    D --> G[".api-key"]
    D --> H[".loading"]
    D --> I[".errors"]
    D --> J[".result-container"]
    
    E --> K[Form Element]
    F --> L[Input Field]
    G --> M[Input Field]
    H --> N[UI Element]
    I --> O[UI Element]
    J --> P[UI Element]
    
    style A fill:#e1f5fe
    style D fill:#e8f5e8
    style K fill:#fff3e0
    style L fill:#fff3e0
    style M fill:#fff3e0

// form fields
const form = document.querySelector('.form-data');
const region = document.querySelector('.region-name');
const apiKey = document.querySelector('.api-key');

// results
const errors = document.querySelector('.errors');
const loading = document.querySelector('.loading');
const results = document.querySelector('.result-container');
const usage = document.querySelector('.carbon-usage');
const fossilfuel = document.querySelector('.fossil-fuel');
const myregion = document.querySelector('.my-region');
const clearBtn = document.querySelector('.clear-btn');

Bu kodun yaptığı şey:

Form öğelerini yakalar document.querySelector() kullanarak CSS sınıf seçicileriyle
Giriş alanlarına referanslar oluşturur bölge adı ve API anahtarı için
Sonuç görüntüleme öğelerine bağlantılar kurar karbon kullanım verileri için
UI öğelerine erişim sağlar yükleme göstergeleri ve hata mesajları gibi
Her öğe referansını bir const değişkeninde saklar kodunuzda kolayca yeniden kullanmak için

Olay dinleyicileri ekleyin

Şimdi uzantınızı kullanıcı eylemlerine yanıt verecek hale getireceğiz. Olay dinleyiciler, kodunuzun kullanıcı etkileşimlerini izleme yöntemidir. Bunları, erken telefon santrallerindeki operatörler gibi düşünün - gelen çağrıları dinler ve bir bağlantı yapmak istendiğinde doğru devreleri bağlarlardı.

sequenceDiagram
    participant User
    participant Form
    participant JavaScript
    participant API
    participant Storage
    
    User->>Form: Fills out region/API key
    User->>Form: Clicks submit
    Form->>JavaScript: Triggers submit event
    JavaScript->>JavaScript: handleSubmit(e)
    JavaScript->>Storage: Save user preferences
    JavaScript->>API: Fetch carbon data
    API->>JavaScript: Returns data
    JavaScript->>Form: Update UI with results
    
    User->>Form: Clicks clear button
    Form->>JavaScript: Triggers click event
    JavaScript->>Storage: Clear saved data
    JavaScript->>Form: Reset to initial state

form.addEventListener('submit', (e) => handleSubmit(e));
clearBtn.addEventListener('click', (e) => reset(e));
init();

Bu kavramları anlamak:

Form gönderme dinleyicisi ekler kullanıcılar Enter tuşuna bastığında veya gönder düğmesine tıkladığında tetiklenir
Temizleme düğmesine bir tıklama dinleyicisi bağlar formu sıfırlamak için
Olay nesnesini (e) işleyici fonksiyonlara iletir ek kontrol için
init() fonksiyonunu hemen çağırır uzantınızın başlangıç durumunu ayarlamak için

✅ Burada kullanılan kısa ok fonksiyon sözdizimine dikkat edin. Bu modern JavaScript yaklaşımı, geleneksel fonksiyon ifadelerinden daha temizdir, ancak her ikisi de eşit derecede iyi çalışır!

🔄 Pedagojik Kontrol Noktası

Olay İşleme Anlayışı: Başlangıç işlemlerine geçmeden önce şunları açıklayabildiğinizden emin olun:

✅ addEventListener'ın kullanıcı eylemlerini JavaScript fonksiyonlarına nasıl bağladığını açıklayın
✅ Olay nesnesi (e)'nin neden işleyici fonksiyonlara iletildiğini anlayın
✅ submit ve click olayları arasındaki farkı tanıyın
✅ init() fonksiyonunun ne zaman çalıştığını ve nedenini açıklayın

Hızlı Kendini Test Et: Bir form gönderiminde e.preventDefault()'u unutursanız ne olur? Cevap: Sayfa yenilenir, tüm JavaScript durumu kaybolur ve kullanıcı deneyimi kesintiye uğrar.

Başlatma ve sıfırlama fonksiyonlarını oluşturun

Uzantınız için başlatma mantığını oluşturalım. init() fonksiyonu, bir geminin navigasyon sistemi gibi enstrümanlarını kontrol eder - mevcut durumu belirler ve arayüzü buna göre ayarlar. Birinin uzantınızı daha önce kullanıp kullanmadığını kontrol eder ve önceki ayarlarını yükler.

reset() fonksiyonu, kullanıcılara temiz bir başlangıç sağlar - bilim insanlarının deneyler arasında enstrümanlarını sıfırlayarak temiz veri elde etmeleri gibi.

function init() {
	// Check if user has previously saved API credentials
	const storedApiKey = localStorage.getItem('apiKey');
	const storedRegion = localStorage.getItem('regionName');

	// Set extension icon to generic green (placeholder for future lesson)
	// TODO: Implement icon update in next lesson

	if (storedApiKey === null || storedRegion === null) {
		// First-time user: show the setup form
		form.style.display = 'block';
		results.style.display = 'none';
		loading.style.display = 'none';
		clearBtn.style.display = 'none';
		errors.textContent = '';
	} else {
		// Returning user: load their saved data automatically
		displayCarbonUsage(storedApiKey, storedRegion);
		results.style.display = 'none';
		form.style.display = 'none';
		clearBtn.style.display = 'block';
	}
}

function reset(e) {
	e.preventDefault();
	// Clear stored region to allow user to choose a new location
	localStorage.removeItem('regionName');
	// Restart the initialization process
	init();
}

Burada olanları parçalayarak açıklayalım:

Tarayıcının yerel depolamasından saklanan API anahtarı ve bölgeyi alır
İlk kez kullanıcı mı yoksa geri dönen kullanıcı mı olduğunu kontrol eder
Yeni kullanıcılar için kurulum formunu gösterir ve diğer arayüz öğelerini gizler
Kaydedilmiş verileri otomatik olarak yükler geri dönen kullanıcılar için ve sıfırlama seçeneğini gösterir
Mevcut verilere dayalı olarak kullanıcı arayüzü durumunu yönetir

Yerel Depolama Hakkında Temel Kavramlar:

Tarayıcı oturumları arasında veri saklar (oturum depolamanın aksine)
Veriyi anahtar-değer çiftleri olarak saklar getItem() ve setItem() kullanarak
Belirli bir anahtar için veri yoksa null döner
Kullanıcı tercihlerini ve ayarlarını hatırlamak için basit bir yol sağlar

💡 Tarayıcı Depolamasını Anlamak: LocalStorage, uzantınıza kalıcı bir hafıza kazandırmak gibidir. Antik İskenderiye Kütüphanesi'nin parşömenleri sakladığı gibi - bilgiler, bilim insanları ayrılıp geri döndüğünde bile erişilebilir kalır.

Anahtar özellikler:

Veriyi tarayıcı kapandıktan sonra bile saklar

Bilgisayar yeniden başlatıldığında ve tarayıcı çöktüğünde hayatta kalır

Kullanıcı tercihleri için önemli bir depolama alanı sağlar

Ağ gecikmeleri olmadan anında erişim sunar

Önemli Not: Tarayıcı uzantınızın kendi izole edilmiş yerel depolaması vardır ve bu, normal web sayfalarından ayrı çalışır. Bu, güvenlik sağlar ve diğer web siteleriyle çakışmaları önler.

Saklanan verilerinizi tarayıcı Geliştirici Araçları'nı (F12) açarak, Uygulama sekmesine giderek ve Yerel Depolama bölümünü genişleterek görüntüleyebilirsiniz.

stateDiagram-v2
    [*] --> CheckStorage: Extension starts
    CheckStorage --> FirstTime: No stored data
    CheckStorage --> Returning: Data found
    
    FirstTime --> ShowForm: Display setup form
    ShowForm --> UserInput: User enters data
    UserInput --> SaveData: Store in localStorage
    SaveData --> FetchAPI: Get carbon data
    
    Returning --> LoadData: Read from localStorage
    LoadData --> FetchAPI: Get carbon data
    
    FetchAPI --> ShowResults: Display data
    ShowResults --> UserAction: User interacts
    
    UserAction --> Reset: Clear button clicked
    UserAction --> ShowResults: View data
    
    Reset --> ClearStorage: Remove saved data
    ClearStorage --> FirstTime: Back to setup

⚠️ Güvenlik Düşüncesi: Üretim uygulamalarında, API anahtarlarını Yerel Depolama'da saklamak güvenlik riskleri taşır çünkü JavaScript bu verilere erişebilir. Öğrenme amacıyla bu yaklaşım uygundur, ancak gerçek uygulamalar hassas kimlik bilgileri için güvenli sunucu tarafı depolama kullanmalıdır.

Form gönderimini işleme

Şimdi birinin formunuzu gönderdiğinde ne olacağını ele alacağız. Varsayılan olarak, tarayıcılar form gönderildiğinde sayfayı yeniler, ancak bu davranışı kesintisiz bir deneyim oluşturmak için durduracağız.

Bu yaklaşım, görev kontrolünün uzay aracı iletişimlerini nasıl ele aldığına benzer - her iletim için tüm sistemi sıfırlamak yerine, yeni bilgileri işlerken sürekli operasyonu sürdürürler.

Form gönderim olayını yakalayan ve kullanıcının girişini çıkaran bir fonksiyon oluşturun:

function handleSubmit(e) {
	e.preventDefault();
	setUpUser(apiKey.value, region.value);
}

Yukarıda şunları yaptık:

Varsayılan form gönderim davranışını engeller sayfanın yenilenmesini önlemek için
Kullanıcı giriş değerlerini çıkarır API anahtarı ve bölge alanlarından
Form verilerini setUpUser() fonksiyonuna iletir işleme için
Sayfa yenilemelerinden kaçınarak tek sayfa uygulama davranışını sürdürür

✅ HTML form alanlarınız required özelliğini içerir, bu nedenle tarayıcı, kullanıcıların bu fonksiyon çalışmadan önce hem API anahtarını hem de bölgeyi sağlamasını otomatik olarak doğrular.

Kullanıcı tercihlerini ayarlama

setUpUser fonksiyonu, kullanıcının kimlik bilgilerini kaydetmek ve ilk API çağrısını başlatmaktan sorumludur. Bu, kurulumdan sonuçları görüntülemeye sorunsuz bir geçiş sağlar.

function setUpUser(apiKey, regionName) {
	// Save user credentials for future sessions
	localStorage.setItem('apiKey', apiKey);
	localStorage.setItem('regionName', regionName);
	
	// Update UI to show loading state
	loading.style.display = 'block';
	errors.textContent = '';
	clearBtn.style.display = 'block';
	
	// Fetch carbon usage data with user's credentials
	displayCarbonUsage(apiKey, regionName);
}

Adım adım, burada olanlar:

API anahtarını ve bölge adını yerel depolamaya kaydeder gelecekteki kullanım için
Yükleme göstergesini gösterir kullanıcıları veri alındığı konusunda bilgilendirmek için
Önceki hata mesajlarını ekrandan temizler
Kullanıcıların ayarlarını daha sonra sıfırlamaları için temizleme düğmesini gösterir
Gerçek karbon kullanım verilerini almak için API çağrısını başlatır

Bu fonksiyon, hem veri kalıcılığını hem de kullanıcı arayüzü güncellemelerini bir arada yöneterek sorunsuz bir kullanıcı deneyimi oluşturur.

Karbon kullanım verilerini görüntüleme

Şimdi uzantınızı API'ler aracılığıyla harici veri kaynaklarına bağlayacağız. Bu, uzantınızı bağımsız bir araçtan, internet üzerinden gerçek zamanlı bilgilere erişebilen bir şeye dönüştürür.

API'leri Anlamak

API'ler, farklı uygulamaların birbirleriyle nasıl iletişim kurduğudur. Bunları, 19. yüzyılda uzak şehirleri birbirine bağlayan telgraf sistemi gibi düşünün - operatörler uzak istasyonlara istek gönderir ve istenen bilgilerle yanıt alırlardı. Sosyal medyayı her kontrol ettiğinizde, bir sesli asistana soru sorduğunuzda veya bir teslimat uygulaması kullandığınızda, API'ler bu veri alışverişlerini kolaylaştırır.

flowchart TD
    A[Your Extension] --> B[HTTP Request]
    B --> C[CO2 Signal API]
    C --> D{Valid Request?}
    D -->|Yes| E[Query Database]
    D -->|No| F[Return Error]
    E --> G[Carbon Data]
    G --> H[JSON Response]
    H --> I[Your Extension]
    F --> I
    I --> J[Update UI]
    
    subgraph "API Request"
        K[Headers: auth-token]
        L[Parameters: countryCode]
        M[Method: GET]
    end
    
    subgraph "API Response"
        N[Carbon Intensity]
        O[Fossil Fuel %]
        P[Timestamp]
    end
    
    style C fill:#e8f5e8
    style G fill:#fff3e0
    style I fill:#e1f5fe

REST API'ler hakkında temel kavramlar:

REST, 'Temsili Durum Transferi' anlamına gelir
Standart HTTP yöntemlerini kullanır (GET, POST, PUT, DELETE) veriyle etkileşim için
Veriyi tahmin edilebilir formatlarda döner, genellikle JSON
Farklı türde istekler için tutarlı, URL tabanlı uç noktalar sağlar

✅ Kullanacağımız CO2 Signal API dünya çapındaki elektrik şebekelerinden gerçek zamanlı karbon yoğunluğu verileri sağlar. Bu, kullanıcıların elektrik kullanımının çevresel etkisini anlamalarına yardımcı olur!

💡 Asenkron JavaScript'i Anlamak: async anahtar kelimesi, kodunuzun aynı anda birden fazla işlemi yönetmesini sağlar. Bir sunucudan veri istediğinizde, tüm uzantınızın donmasını istemezsiniz - bu, hava trafik kontrolünün bir uçağın yanıtını beklerken tüm operasyonları durdurması gibi olurdu.

Anahtar faydalar:

Uzantının yanıt verebilirliğini korur veri yüklenirken

Diğer kodun ağ istekleri sırasında çalışmaya devam etmesine izin verir

Kod okunabilirliğini artırır geleneksel geri çağırma desenlerine kıyasla

Ağ sorunları için zarif hata işleme sağlar

İşte async hakkında hızlı bir video:

🎥 Yukarıdaki görüntüye tıklayarak async/await hakkında bir video izleyin.

🔄 Pedagojik Kontrol Noktası

Asenkron Programlama Anlayışı: API fonksiyonuna dalmadan önce şunları anladığınızdan emin olun:

✅ Neden async/await kullandığımızı ve uzantıyı neden dondurmadığımızı anlayın
✅ try/catch bloklarının ağ hatalarını zarif bir şekilde nasıl ele aldığını anlayın
✅ Senkron ve asenkron işlemler arasındaki farkı anlayın
✅ API çağrılarının neden başarısız olabileceğini ve bu hataların nasıl ele alınacağını anlayın

Gerçek Dünya Bağlantısı: İşte günlük asenkron örnekler:

Yemek siparişi vermek: Mutfağın yanında beklemezsiniz - bir fiş alır ve diğer aktivitelerinize devam edersiniz
E-posta göndermek: E-posta uygulamanız gönderirken donmaz - daha fazla e-posta yazabilirsiniz
Web sayfalarını yüklemek: Görseller kademeli olarak yüklenirken metni okuyabilirsiniz

API Kimlik Doğrulama Akışı:

sequenceDiagram
    participant Ext as Extension
    participant API as CO2 Signal API
    participant DB as Database
    
    Ext->>API: Request with auth-token
    API->>API: Validate token
    API->>DB: Query carbon data
    DB->>API: Return data
    API->>Ext: JSON response
    Ext->>Ext: Update UI

Karbon kullanım verilerini almak ve görüntülemek için fonksiyonu oluşturun:

// Modern fetch API approach (no external dependencies needed)
async function displayCarbonUsage(apiKey, region) {
	try {
		// Fetch carbon intensity data from CO2 Signal API
		const response = await fetch('https://api.co2signal.com/v1/latest', {
			method: 'GET',
			headers: {
				'auth-token': apiKey,
				'Content-Type': 'application/json'
			},
			// Add query parameters for the specific region
			...new URLSearchParams({ countryCode: region }) && {
				url: `https://api.co2signal.com/v1/latest?countryCode=${region}`
			}
		});

		// Check if the API request was successful
		if (!response.ok) {
			throw new Error(`API request failed: ${response.status}`);
		}

		const data = await response.json();
		const carbonData = data.data;

		// Calculate rounded carbon intensity value
		const carbonIntensity = Math.round(carbonData.carbonIntensity);

		// Update the user interface with fetched data
		loading.style.display = 'none';
		form.style.display = 'none';
		myregion.textContent = region.toUpperCase();
		usage.textContent = `${carbonIntensity} grams (grams CO₂ emitted per kilowatt hour)`;
		fossilfuel.textContent = `${carbonData.fossilFuelPercentage.toFixed(2)}% (percentage of fossil fuels used to generate electricity)`;
		results.style.display = 'block';

		// TODO: calculateColor(carbonIntensity) - implement in next lesson

	} catch (error) {
		console.error('Error fetching carbon data:', error);
		
		// Show user-friendly error message
		loading.style.display = 'none';
		results.style.display = 'none';
		errors.textContent = 'Sorry, we couldn\'t fetch data for that region. Please check your API key and region code.';
	}
}

Burada olanları parçalayarak açıklayalım:

Modern fetch() API'sini kullanır harici kütüphaneler yerine daha temiz, bağımlılıksız kod için
response.ok ile doğru hata kontrolü uygular API hatalarını erken yakalamak için
Asenkron işlemleri async/await ile yönetir daha okunabilir kod akışı için
CO2 Signal API ile kimlik doğrulama yapar auth-token başlığı kullanarak
JSON yanıt verilerini ayrıştırır ve karbon yoğunluğu bilgilerini çıkarır
Birden fazla UI öğesini günceller biçimlendirilmiş çevresel verilerle
API çağrıları başarısız olduğunda kullanıcı dostu hata mesajları sağlar

Gösterilen modern JavaScript kavramları:

Şablon dizileri ${} sözdizimi ile temiz dize biçimlendirme için
Hata işleme try/catch blokları ile sağlam uygulamalar için
Async/await ağ isteklerini zarif bir şekilde yönetmek için
Nesne yapılandırması API yanıtlarından belirli verileri çıkarmak için
Yöntem zincirleme birden fazla DOM manipülasyonu için

✅ Bu fonksiyon, profesyonel geliştiricilerin düzenli olarak kullandığı birkaç önemli web geliştirme kavramını gösterir - harici sunucularla iletişim kurma, kimlik doğrulama, veri işleme, arayüz güncelleme ve hataları zarif bir şekilde yönetme.

flowchart TD
    A[Start API Call] --> B[Fetch Request]
    B --> C{Network Success?}
    C -->|No| D[Network Error]
    C -->|Yes| E{Response OK?}
    E -->|No| F[API Error]
    E -->|Yes| G[Parse JSON]
    G --> H{Valid Data?}
    H -->|No| I[Data Error]
    H -->|Yes| J[Update UI]
    
    D --> K[Show Error Message]
    F --> K
    I --> K
    J --> L[Hide Loading]
    K --> L
    
    style A fill:#e1f5fe
    style J fill:#e8f5e8
    style K fill:#ffebee
    style L fill:#f3e5f5

🔄 Pedagojik Kontrol Noktası

Tam Sistem Anlayışı: Tüm akışın ustalığını doğrulayın:

✅ DOM referanslarının JavaScript'in arayüzü kontrol etmesini nasıl sağladığını anlayın
✅ Yerel depolamanın tarayıcı oturumları arasında kalıcılık oluşturduğunu anlayın
✅ Async/await'in API çağrılarını uzantıyı dondurmadan nasıl yaptığını anlayın
✅ API çağrıları başarısız olduğunda ne olduğunu ve hataların nasıl ele alındığını anlayın
✅ Kullanıcı deneyiminin neden yükleme durumlarını ve hata mesajlarını içerdiğini anlayın

🎉 Başardığınız şey: Şunları yapan bir tarayıcı uzantısı oluşturdunuz:

İnternete bağlanır ve gerçek çevresel verileri alır
Kullanıcı ayarlarını oturumlar arasında saklar
Hataları zarif bir şekilde ele alır çökmeden
Sorunsuz, profesyonel bir kullanıcı deneyimi sağlar

Çalışmanızı npm run build çalıştırarak ve tarayıcıda uzantınızı yenileyerek test edin. Artık işlevsel bir karbon ayak izi takipçiniz var. Bir sonraki derste, uzantıyı tamamlamak için dinamik simge işlevselliği ekleyeceğiz.

GitHub Copilot Agent Challenge 🚀

Agent modunu kullanarak aşağıdaki meydan okumayı tamamlayın: Açıklama: Tarayıcı uzantısını hata yönetimi iyileştirmeleri ve kullanıcı deneyimi özellikleri ekleyerek geliştirin. Bu zorluk, API'lerle çalışma, yerel depolama ve modern JavaScript desenleri kullanarak DOM manipülasyonu pratiği yapmanıza yardımcı olacak.

Görev: displayCarbonUsage fonksiyonunun geliştirilmiş bir versiyonunu oluşturun. Bu versiyon şunları içermelidir: 1) API çağrılarında başarısızlık durumunda üstel geri çekilme ile yeniden deneme mekanizması, 2) API çağrısından önce bölge kodu için giriş doğrulaması, 3) İlerleme göstergeleri içeren bir yükleme animasyonu, 4) API yanıtlarının localStorage'da 30 dakika süreyle geçerlilik zaman damgalarıyla önbelleğe alınması, ve 5) önceki API çağrılarından gelen geçmiş verileri görüntüleme özelliği. Ayrıca tüm fonksiyon parametrelerini ve dönüş türlerini belgelemek için TypeScript tarzı JSDoc yorumları ekleyin.

agent mode hakkında daha fazla bilgi edinin.

🚀 Zorluk

Web geliştirme için mevcut tarayıcı tabanlı API'leri keşfederek API'ler hakkındaki bilginizi genişletin. Bu tarayıcı API'lerinden birini seçin ve küçük bir demo oluşturun:

Geolocation API - Kullanıcının mevcut konumunu alın
Notification API - Masaüstü bildirimleri gönderin
HTML Drag and Drop API - Etkileşimli sürükleme arayüzleri oluşturun
Web Storage API - Gelişmiş yerel depolama teknikleri
Fetch API - XMLHttpRequest için modern bir alternatif

Araştırma soruları:

Bu API gerçek dünyada hangi sorunları çözüyor?
API hataları ve uç durumları nasıl ele alıyor?
Bu API'yi kullanırken hangi güvenlik hususları dikkate alınmalı?
Bu API farklı tarayıcılar arasında ne kadar yaygın destekleniyor?

Araştırmanızdan sonra, bir API'yi geliştirici dostu ve güvenilir yapan özellikleri belirleyin.

Ders Sonrası Test

Ders sonrası test

Gözden Geçirme ve Kendi Kendine Çalışma

Bu derste LocalStorage ve API'ler hakkında bilgi edindiniz; her ikisi de profesyonel bir web geliştirici için oldukça kullanışlıdır. Bu iki şeyin birlikte nasıl çalıştığını düşünebilir misiniz? Bir API tarafından kullanılacak öğeleri depolayan bir web sitesi tasarlamayı düşünün.

⚡ Sonraki 5 Dakikada Yapabilecekleriniz

DevTools Uygulama sekmesini açın ve herhangi bir web sitesinde localStorage'ı keşfedin
Basit bir HTML formu oluşturun ve tarayıcıda form doğrulamasını test edin
Tarayıcı konsolunda localStorage kullanarak veri depolamayı ve almayı deneyin
Ağ sekmesini kullanarak gönderilen form verilerini inceleyin

🎯 Bu Saatte Başarabilecekleriniz

Ders sonrası testi tamamlayın ve form işleme kavramlarını anlayın
Kullanıcı tercihlerini kaydeden bir tarayıcı uzantısı formu oluşturun
Yardımcı hata mesajlarıyla istemci tarafı form doğrulamasını uygulayın
Uzantı veri kalıcılığı için chrome.storage API'sini kullanmayı deneyin
Kaydedilen kullanıcı ayarlarına yanıt veren bir kullanıcı arayüzü oluşturun

📅 Hafta Boyunca Uzantı Geliştirme

Form işlevselliği ile tam özellikli bir tarayıcı uzantısı tamamlayın
Farklı depolama seçeneklerini öğrenin: local, sync ve session storage
Otomatik tamamlama ve doğrulama gibi gelişmiş form özelliklerini uygulayın
Kullanıcı verileri için içe/dışa aktarma işlevselliği ekleyin
Uzantınızı farklı tarayıcılarda kapsamlı bir şekilde test edin
Uzantınızın kullanıcı deneyimini ve hata yönetimini iyileştirin

🌟 Web API Uzmanlığı için Bir Aylık Plan

Çeşitli tarayıcı depolama API'lerini kullanarak karmaşık uygulamalar oluşturun
Çevrimdışı öncelikli geliştirme desenlerini öğrenin
Veri kalıcılığı içeren açık kaynak projelerine katkıda bulunun
Gizlilik odaklı geliştirme ve GDPR uyumluluğunu öğrenin
Form işleme ve veri yönetimi için yeniden kullanılabilir kütüphaneler oluşturun
Web API'leri ve uzantı geliştirme hakkında bilgi paylaşın

🎯 Uzantı Geliştirme Uzmanlığı Zaman Çizelgesi

timeline
    title API Integration & Storage Learning Progression
    
    section DOM Fundamentals (15 minutes)
        Element References: querySelector mastery
                          : Event listener setup
                          : State management basics
        
    section Local Storage (20 minutes)
        Data Persistence: Key-value storage
                        : Session management
                        : User preference handling
                        : Storage inspection tools
        
    section Form Handling (25 minutes)
        User Input: Form validation
                  : Event prevention
                  : Data extraction
                  : UI state transitions
        
    section API Integration (35 minutes)
        External Communication: HTTP requests
                              : Authentication patterns
                              : JSON data parsing
                              : Response handling
        
    section Async Programming (40 minutes)
        Modern JavaScript: Promise handling
                         : Async/await patterns
                         : Error management
                         : Non-blocking operations
        
    section Error Handling (30 minutes)
        Robust Applications: Try/catch blocks
                           : User-friendly messages
                           : Graceful degradation
                           : Debugging techniques
        
    section Advanced Patterns (1 week)
        Professional Development: Caching strategies
                                : Rate limiting
                                : Retry mechanisms
                                : Performance optimization
        
    section Production Skills (1 month)
        Enterprise Features: Security best practices
                           : API versioning
                           : Monitoring & logging
                           : Scalable architecture

🛠️ Tam Yığın Geliştirme Araç Seti Özeti

Bu dersi tamamladıktan sonra artık şunlara sahipsiniz:

DOM Uzmanlığı: Hassas öğe hedefleme ve manipülasyonu
Depolama Uzmanlığı: localStorage ile kalıcı veri yönetimi
API Entegrasyonu: Gerçek zamanlı veri alma ve kimlik doğrulama
Asenkron Programlama: Modern JavaScript ile engellemeyen işlemler
Hata Yönetimi: Başarısızlıkları zarifçe ele alan sağlam uygulamalar
Kullanıcı Deneyimi: Yükleme durumları, doğrulama ve akıcı etkileşimler
Modern Desenler: fetch API, async/await ve ES6+ özellikleri

Profesyonel Beceriler Kazanıldı: Şu alanlarda kullanılan desenleri uyguladınız:

Web Uygulamaları: Harici veri kaynaklarıyla tek sayfa uygulamalar
Mobil Geliştirme: Çevrimdışı özelliklere sahip API odaklı uygulamalar
Masaüstü Yazılımı: Kalıcı depolama ile Electron uygulamaları
Kurumsal Sistemler: Kimlik doğrulama, önbellekleme ve hata yönetimi
Modern Çerçeveler: React/Vue/Angular veri yönetimi desenleri

Bir Sonraki Seviye: Önbellekleme stratejileri, gerçek zamanlı WebSocket bağlantıları veya karmaşık durum yönetimi gibi ileri düzey konuları keşfetmeye hazırsınız!

Ödev

Bir API Benimseyin

Feragatname:
Bu belge, AI çeviri hizmeti Co-op Translator kullanılarak çevrilmiştir. Doğruluk için çaba göstersek de, otomatik çevirilerin hata veya yanlışlıklar içerebileceğini lütfen unutmayın. Belgenin orijinal dili, yetkili kaynak olarak kabul edilmelidir. Kritik bilgiler için profesyonel insan çevirisi önerilir. Bu çevirinin kullanımından kaynaklanan yanlış anlamalar veya yanlış yorumlamalar için sorumluluk kabul etmiyoruz.

32 KiB Raw Blame History Unescape Escape

Tarayıcı Uzantısı Projesi Bölüm 2: Bir API Çağırma, Yerel Depolama Kullanma

Ders Öncesi Test

Giriş

Uzantıda manipüle edilecek öğeleri ayarlayın

Olay dinleyicileri ekleyin

🔄 Pedagojik Kontrol Noktası

Başlatma ve sıfırlama fonksiyonlarını oluşturun

Form gönderimini işleme

Kullanıcı tercihlerini ayarlama

Karbon kullanım verilerini görüntüleme

🔄 Pedagojik Kontrol Noktası

🔄 Pedagojik Kontrol Noktası

GitHub Copilot Agent Challenge 🚀

🚀 Zorluk

Ders Sonrası Test

Gözden Geçirme ve Kendi Kendine Çalışma

⚡ Sonraki 5 Dakikada Yapabilecekleriniz

🎯 Bu Saatte Başarabilecekleriniz

📅 Hafta Boyunca Uzantı Geliştirme

🌟 Web API Uzmanlığı için Bir Aylık Plan

🎯 Uzantı Geliştirme Uzmanlığı Zaman Çizelgesi

🛠️ Tam Yığın Geliştirme Araç Seti Özeti

Ödev

32 KiB

Raw Blame History Unescape Escape