37 KiB

Raw Blame History Unescape Escape

Bankacılık Uygulaması Yapımı Bölüm 4: Durum Yönetimi Kavramları

⚡ Sonraki 5 Dakikada Yapabilecekleriniz

Yoğun Geliştiriciler için Hızlı Başlangıç Yolu

flowchart LR
    A[⚡ 5 minutes] --> B[Diagnose state issues]
    B --> C[Create central state object]
    C --> D[Add updateState function]
    D --> E[See immediate improvements]

1. Dakika: Mevcut durum sorununu test edin - giriş yapın, sayfayı yenileyin, çıkış yapmayı gözlemleyin
2. Dakika: let account = null ifadesini let state = { account: null } ile değiştirin
3. Dakika: Kontrollü güncellemeler için basit bir updateState() fonksiyonu oluşturun
4. Dakika: Yeni deseni kullanmak için bir fonksiyonu güncelleyin
5. Dakika: Geliştirilmiş öngörülebilirlik ve hata ayıklama yeteneğini test edin

Hızlı Tanı Testi:

// Before: Scattered state
let account = null; // Lost on refresh!

// After: Centralized state
let state = Object.freeze({ account: null }); // Controlled and trackable!

Neden Önemli: 5 dakika içinde, kaotik durum yönetiminden öngörülebilir ve hata ayıklanabilir desenlere dönüşümü deneyimleyeceksiniz. Bu, karmaşık uygulamaları sürdürülebilir kılan temeldir.

🗺️ Durum Yönetimi Ustalığı Öğrenme Yolculuğunuz

journey
    title From Scattered State to Professional Architecture
    section Diagnosing Problems
      Identify state loss issues: 3: You
      Understand scattered updates: 4: You
      Recognize architecture needs: 6: You
    section Centralizing Control
      Create unified state object: 5: You
      Implement controlled updates: 7: You
      Add immutable patterns: 8: You
    section Adding Persistence
      Implement localStorage: 6: You
      Handle serialization: 7: You
      Create session continuity: 9: You
    section Balancing Freshness
      Address data staleness: 5: You
      Build refresh systems: 8: You
      Achieve optimal balance: 9: You

Yolculuğunuzun Hedefi: Bu dersin sonunda, kalıcılığı, veri tazeliğini ve öngörülebilir güncellemeleri ele alan profesyonel bir durum yönetimi sistemi oluşturmuş olacaksınız - üretim uygulamalarında kullanılan aynı desenler.

Ders Öncesi Test

Ders öncesi test

Giriş

Durum yönetimi, Voyager uzay aracındaki navigasyon sistemi gibidir – her şey sorunsuz çalıştığında, orada olduğunu bile fark etmezsiniz. Ancak işler ters gittiğinde, yıldızlararası uzaya ulaşmak ile kozmik boşlukta kaybolmak arasındaki farkı yaratır. Web geliştirmede, durum, uygulamanızın hatırlaması gereken her şeyi temsil eder: kullanıcı giriş durumu, form verileri, gezinme geçmişi ve geçici arayüz durumları.

Bankacılık uygulamanız basit bir giriş formundan daha sofistike bir uygulamaya dönüştükçe, muhtemelen bazı yaygın zorluklarla karşılaşmışsınızdır. Sayfayı yenileyin ve kullanıcılar beklenmedik bir şekilde çıkış yapar. Tarayıcıyı kapatın ve tüm ilerleme kaybolur. Bir sorunu hata ayıklayın ve aynı veriyi farklı şekillerde değiştiren birden fazla işlev arasında dolaşırsınız.

Bunlar kötü kodlamanın işaretleri değil – uygulamalar belirli bir karmaşıklık eşiğine ulaştığında ortaya çıkan doğal büyüme sancılarıdır. Her geliştirici, uygulamaları "konsept kanıtı"ndan "üretime hazır" hale geçerken bu zorluklarla karşılaşır.

Bu derste, bankacılık uygulamanızı güvenilir, profesyonel bir uygulamaya dönüştüren merkezi bir durum yönetim sistemi uygulayacağız. Verilerin akışını öngörülebilir bir şekilde yönetmeyi, kullanıcı oturumlarını uygun şekilde sürdürmeyi ve modern web uygulamalarının gerektirdiği akıcı kullanıcı deneyimini oluşturmayı öğreneceksiniz.

Ön Koşullar

Durum yönetimi kavramlarına dalmadan önce, geliştirme ortamınızın düzgün bir şekilde ayarlandığından ve bankacılık uygulamanızın temelinin hazır olduğundan emin olmanız gerekir. Bu ders, bu serinin önceki bölümlerindeki kavramlar ve kodlar üzerine inşa edilmiştir.

Devam etmeden önce aşağıdaki bileşenlerin hazır olduğundan emin olun:

Gerekli Kurulum:

Veri alma dersi tamamlanmış olmalı - uygulamanız hesap verilerini başarıyla yükleyip görüntüleyebilmelidir
Node.js sisteminize yüklenmiş olmalı, böylece arka uç API'sini çalıştırabilirsiniz
Hesap veri işlemleri için sunucu API'sini yerel olarak başlatın

Ortamınızı Test Etme:

API sunucunuzun doğru çalıştığını aşağıdaki komutu bir terminalde çalıştırarak doğrulayın:

curl http://localhost:5000/api
# -> should return "Bank API v1.0.0" as a result

Bu komut ne yapar:

GET isteği gönderir yerel API sunucunuza
Bağlantıyı test eder ve sunucunun yanıt verdiğini doğrular
API sürüm bilgilerini döndürür her şey düzgün çalışıyorsa

🧠 Durum Yönetimi Mimari Genel Bakış

mindmap
  root((State Management))
    Current Problems
      Session Loss
        Page Refresh Issues
        Browser Close Impact
        Variable Reset Problems
      Scattered Updates
        Multiple Modification Points
        Debugging Challenges
        Unpredictable Behavior
      Incomplete Cleanup
        Logout State Issues
        Memory Leaks
        Security Concerns
    Centralized Solutions
      Unified State Object
        Single Source of Truth
        Predictable Structure
        Scalable Foundation
      Controlled Updates
        Immutable Patterns
        Object.freeze Usage
        Function-Based Changes
      State Tracking
        History Management
        Debug Visibility
        Change Auditing
    Persistence Strategies
      localStorage Integration
        Session Continuity
        JSON Serialization
        Automatic Sync
      Data Freshness
        Server Refresh
        Stale Data Handling
        Balance Optimization
      Storage Optimization
        Minimal Data
        Performance Focus
        Security Considerations

Temel İlke: Profesyonel durum yönetimi, basit etkileşimlerden karmaşık uygulama iş akışlarına kadar ölçeklenen güvenilir kullanıcı deneyimleri oluşturmak için öngörülebilirlik, kalıcılık ve performans arasında denge kurar.

Mevcut Durum Sorunlarını Teşhis Etme

Bir suç mahallini inceleyen Sherlock Holmes gibi, kullanıcı oturumlarının kaybolması gizemini çözmeden önce mevcut uygulamamızda tam olarak neler olduğunu anlamamız gerekiyor.

Mevcut durum yönetimi zorluklarını ortaya çıkaran basit bir deney yapalım:

🧪 Bu Tanı Testini Deneyin:

Bankacılık uygulamanıza giriş yapın ve kontrol paneline gidin
Tarayıcı sayfasını yenileyin
Giriş durumunuza ne olduğunu gözlemleyin

Eğer giriş ekranına geri yönlendirildiyseniz, klasik bir durum kalıcılığı sorununu keşfettiniz. Bu davranış, mevcut uygulamamızın kullanıcı verilerini her sayfa yüklemesinde sıfırlanan JavaScript değişkenlerinde saklamasından kaynaklanır.

Mevcut Uygulama Sorunları:

Önceki dersten basit account değişkeni, hem kullanıcı deneyimini hem de kodun sürdürülebilirliğini etkileyen üç önemli soruna neden olur:

Sorun	Teknik Sebep	Kullanıcı Etkisi
Oturum Kaybı	Sayfa yenileme JavaScript değişkenlerini temizler	Kullanıcılar sık sık yeniden kimlik doğrulaması yapmak zorunda kalır
Dağınık Güncellemeler	Birden fazla işlev durumu doğrudan değiştirir	Hata ayıklama giderek zorlaşır
Eksik Temizlik	Çıkış, tüm durum referanslarını temizlemez	Potansiyel güvenlik ve gizlilik endişeleri

Mimari Zorluk:

Titanik'in bölümlere ayrılmış tasarımı gibi, bu sorunları tek tek çözmek, altta yatan mimari sorunu ele almayacaktır. Kapsamlı bir durum yönetimi çözümüne ihtiyacımız var.

💡 Burada aslında neyi başarmaya çalışıyoruz?

Durum yönetimi aslında iki temel bulmacayı çözmekle ilgilidir:

Verilerim Nerede?: Hangi bilgilere sahip olduğumuzu ve nereden geldiğini takip etmek
Herkes Aynı Sayfada mı?: Kullanıcıların gördüklerinin gerçekte olanlarla eşleştiğinden emin olmak

Planımız:

Kendi etrafımızda dönmek yerine, merkezi bir durum yönetim sistemi oluşturacağız. Bunu, tüm önemli şeylerin sorumluluğunu üstlenen gerçekten organize bir kişi gibi düşünün:

flowchart TD
    A[User Action] --> B[Event Handler]
    B --> C[updateState Function]
    C --> D{State Validation}
    D -->|Valid| E[Create New State]
    D -->|Invalid| F[Error Handling]
    E --> G[Object.freeze]
    G --> H[Update localStorage]
    H --> I[Trigger UI Update]
    I --> J[User Sees Changes]
    F --> K[User Sees Error]
    
    subgraph "State Management Layer"
        C
        E
        G
    end
    
    subgraph "Persistence Layer"
        H
        L[localStorage]
        H -.-> L
    end

Bu veri akışını anlamak:

Merkezi hale getirir tüm uygulama durumunu tek bir yerde
Yönlendirir tüm durum değişikliklerini kontrollü işlevler aracılığıyla
Sağlar UI'nin mevcut durumla senkronize kalmasını
Sunar veri yönetimi için açık, öngörülebilir bir model

💡 Profesyonel İçgörü: Bu ders temel kavramlara odaklanmaktadır. Karmaşık uygulamalar için Redux gibi kütüphaneler daha gelişmiş durum yönetimi özellikleri sunar. Bu temel ilkeleri anlamak, herhangi bir durum yönetimi kütüphanesini ustalıkla kullanmanıza yardımcı olacaktır.

⚠️ İleri Seviye Konu: Durum değişiklikleri tarafından tetiklenen otomatik UI güncellemelerini ele almayacağız, çünkü bu Reaktif Programlama kavramlarını içerir. Bunu öğrenme yolculuğunuz için mükemmel bir sonraki adım olarak düşünün!

Görev: Durum Yapısını Merkezileştirme

Dağınık durum yönetimimizi merkezi bir sisteme dönüştürmeye başlayalım. Bu ilk adım, takip eden tüm iyileştirmeler için temeli oluşturur.

Adım 1: Merkezi Bir Durum Nesnesi Oluşturun

Basit account tanımını değiştirin:

let account = null;

Yapılandırılmış bir durum nesnesi ile değiştirin:

let state = {
  account: null
};

Bu değişikliğin önemi:

Merkezi hale getirir tüm uygulama verilerini tek bir yerde
Hazırlar daha sonra daha fazla durum özelliği eklemek için yapıyı
Oluşturur durum ve diğer değişkenler arasında net bir sınır
Kurallar uygulamanız büyüdükçe ölçeklenen bir model

Adım 2: Durum Erişim Desenlerini Güncelleme

Fonksiyonlarınızı yeni durum yapısını kullanacak şekilde güncelleyin:

register() ve login() fonksiyonlarında, şu ifadeyi değiştirin:

account = ...

Şununla:

state.account = ...

updateDashboard() fonksiyonunda, şu satırı en üste ekleyin:

const account = state.account;

Bu güncellemelerin sağladıkları:

Mevcut işlevselliği korur yapıyı geliştirirken
Kodunuzu daha sofistike durum yönetimi için hazırlar
Tutarlı desenler oluşturur durum verilerine erişim için
Merkezi durum güncellemeleri için temel oluşturur

💡 Not: Bu yeniden yapılandırma, sorunlarımızı hemen çözmez, ancak güçlü iyileştirmeler için gerekli temeli oluşturur!

🎯 Pedagojik Kontrol: Merkezileştirme İlkeleri

Dur ve Düşün: Az önce merkezi bir durum yönetimi temelini uyguladınız. Bu, kritik bir mimari karardır.

Hızlı Öz Değerlendirme:

Durumu tek bir nesnede merkezileştirmenin neden dağınık değişkenlerden daha iyi olduğunu açıklayabilir misiniz?
Bir fonksiyonu state.account kullanacak şekilde güncellemeyi unutursanız ne olurdu?
Bu model kodunuzu daha gelişmiş özellikler için nasıl hazırlar?

Gerçek Dünya Bağlantısı: Öğrendiğiniz merkezileştirme modeli, Redux, Vuex ve React Context gibi modern çerçevelerin temelidir. Büyük uygulamalarda kullanılan aynı mimari düşünceyi oluşturuyorsunuz.

Zorluk Sorusu: Uygulamanıza kullanıcı tercihlerini (tema, dil) eklemeniz gerekseydi, bunları durum yapısına nerede eklerdiniz? Bu nasıl ölçeklenirdi?

Kontrollü Durum Güncellemelerini Uygulama

Durumumuzu merkezileştirdikten sonra, bir sonraki adım, veri değişiklikleri için kontrollü mekanizmalar oluşturmayı içerir. Bu yaklaşım, öngörülebilir durum değişikliklerini ve daha kolay hata ayıklamayı sağlar.

Temel ilke hava trafik kontrolüne benzer: birden fazla işlevin durumu bağımsız olarak değiştirmesine izin vermek yerine, tüm değişiklikleri tek bir kontrollü işlev aracılığıyla yönlendireceğiz. Bu model, verilerin ne zaman ve nasıl değiştiğine dair net bir gözetim sağlar.

Değişmez Durum Yönetimi:

state nesnemizi değişmez olarak ele alacağız, yani onu doğrudan değiştirmeyeceğiz. Bunun yerine, her değişiklik, güncellenmiş verilerle yeni bir durum nesnesi oluşturur.

Bu yaklaşım, doğrudan değişikliklere kıyasla başlangıçta verimsiz görünebilir, ancak hata ayıklama, test etme ve uygulama öngörülebilirliğini sürdürme açısından önemli avantajlar sağlar.

Değişmez durum yönetiminin faydaları:

Fayda	Açıklama	Etki
Öngörülebilirlik	Değişiklikler yalnızca kontrollü işlevler aracılığıyla gerçekleşir	Hata ayıklama ve test daha kolay
Geçmiş Takibi	Her durum değişikliği yeni bir nesne oluşturur	Geri al/yeniden yap işlevselliğini etkinleştirir
Yan Etki Önleme	Kazara değişiklikler olmaz	Gizemli hataları önler
Performans Optimizasyonu	Durumun gerçekten değiştiğini tespit etmek kolaydır	Verimli UI güncellemelerini sağlar

JavaScript'te Object.freeze() ile Değişmezlik:

JavaScript, Object.freeze() ile nesne değişikliklerini önler:

const immutableState = Object.freeze({ account: userData });
// Any attempt to modify immutableState will throw an error

Burada olanları açıklamak:

Engeller doğrudan özellik atamalarını veya silmelerini
Hata verir değişiklik girişimleri yapılırsa
Sağlar durum değişikliklerinin kontrollü işlevler aracılığıyla yapılmasını
Oluşturur durumun nasıl güncellenebileceğine dair net bir sözleşme

💡 Derinlemesine İnceleme: MDN belgelerinde yüzeysel ve derin değişmez nesneler arasındaki farkı öğrenin. Bu ayrımı anlamak, karmaşık durum yapıları için çok önemlidir.

stateDiagram-v2
    [*] --> StateV1: Initial State
    StateV1 --> StateV2: updateState('account', newData)
    StateV2 --> StateV3: updateState('account', anotherUpdate)
    StateV3 --> StateV4: updateState('preferences', userSettings)
    
    note right of StateV1
        Object.freeze()
        Immutable
        Debuggable
    end note
    
    note right of StateV2
        New object created
        Previous state preserved
        Predictable changes
    end note

Görev

Yeni bir updateState() fonksiyonu oluşturalım:

function updateState(property, newData) {
  state = Object.freeze({
    ...state,
    [property]: newData
  });
}

Bu fonksiyonda, yeni bir durum nesnesi oluşturuyoruz ve önceki durumdan verileri spread (...) operatörü kullanarak kopyalıyoruz. Ardından, durum nesnesinin belirli bir özelliğini yeni verilerle köşeli parantez notasyonu [property] kullanarak değiştiriyoruz. Son olarak, Object.freeze() kullanarak nesneyi değişikliklere karşı kilitliyoruz. Şu anda yalnızca account özelliği duruma kaydedilmiş durumda, ancak bu yaklaşımla duruma istediğiniz kadar özellik ekleyebilirsiniz.

Durum başlatmasını, başlangıç durumunun da dondurulduğundan emin olmak için güncelleyeceğiz:

let state = Object.freeze({
  account: null
});

Ardından, register fonksiyonunda state.account = result; atamasını şu şekilde değiştirin:

updateState('account', result);

Aynısını login fonksiyonunda yapın, state.account = data; ifadesini şu şekilde değiştirin:

updateState('account', data);

Artık kullanıcı Çıkış Yap düğmesine tıkladığında hesap verilerinin temizlenmesi sorununu düzeltme fırsatını değerlendireceğiz.

Yeni bir logout() fonksiyonu oluşturun:

function logout() {
  updateState('account', null);
  navigate('/login');
}

updateDashboard() içinde, yönlendirme return navigate('/login'); ifadesini return logout(); ile değiştirin.

Yeni bir hesap oluşturmayı, çıkış yapmayı ve tekrar giriş yapmayı deneyerek her şeyin hala doğru çalıştığını kontrol edin.

İpucu: Tüm durum değişikliklerini görmek için updateState() fonksiyonunun altına console.log(state) ekleyebilir ve tarayıcınızın geliştirme araçlarındaki konsolu açabilirsiniz.

Veri Kalıcılığını Uygulama

Daha önce belirlediğimiz oturum kaybı sorunu, kullanıcı durumunu tarayıcı oturumları arasında koruyan bir kalıcılık çözümü gerektirir. Bu, uygulamamızı geçici bir deneyimden güvenilir, profesyonel bir araca dönüştürür.

Atomik saatlerin, güç kesintileri sırasında bile hassas zamanı korumak için kritik durumu uçucu olmayan bellekte saklamasını düşünün. Benzer şekilde, web uygulamaları, temel kullanıcı verilerini tarayıcı oturumları ve sayfa yenilemeleri arasında korumak için kalıcı depolama mekanizmalarına ihtiyaç duyar.

Veri Kalıcılığı için Stratejik Sorular:

Kalıcılığı uygulamadan önce, şu kritik faktörleri göz önünde bulundurun:

Soru	Bankacılık Uygulaması Bağlamı	Karar Etkisi
Veriler hassas mı?	Hesap bakiyesi, işlem geçmişi	Güvenli depolama yöntemlerini seçin
Ne kadar süreyle saklanmalı?	Giriş durumu vs. geçici UI tercihleri	Uygun saklama süresini seçin
Sunucuya gerekli mi?	Kimlik doğrulama jetonları vs. UI ayarları	Paylaşım gereksinimlerini belirleyin

Tarayıcı Depolama Seçenekleri:

Modern tarayıcılar, farklı kullanım senaryoları için tasarlanmış birkaç depolama mekanizması sunar:

Birincil Depolama API'leri:

localStorage: Kalıcı Anahtar/Değer depolama
- Verileri tarayıcı oturumları arasında süresiz olarak saklar
- Tarayıcı yeniden başlatmalarından ve bilgisayar yeniden başlatmalarından etkilenmez
- Belirli bir web sitesi alanına özgüdür
- Kullanıcı tercihleri ve giriş durumları için mükemmeldir
sessionStorage: Geçici oturum depolama
- localStorage ile aktif oturumlar sırasında aynı şekilde çalışır
- Tarayıcı sekmesi kapandığında otomatik olarak temizlenir
- Kalıcı olmaması gereken geçici veriler için idealdir
HTTP Çerezleri: Sunucu ile paylaşılan depolama
- Her sunucu isteğiyle otomatik olarak gönderilir
- Kimlik doğrulama jetonları için mükemmeldir
- Boyut olarak sınırlıdır ve performansı etkileyebilir

Veri Serileştirme Gereksinimi:

Hem localStorage hem de sessionStorage yalnızca string depolar:

// Convert objects to JSON strings for storage
const accountData = { user: 'john', balance: 150 };
localStorage.setItem('account', JSON.stringify(accountData));

// Parse JSON strings back to objects when retrieving
const savedAccount = JSON.parse(localStorage.getItem('account'));

Serileştirmeyi anlamak:

JavaScript nesnelerini JSON stringlerine dönüştürür JSON.stringify() kullanarak
JSON'dan nesneleri yeniden oluşturur JSON.parse() kullanarak
Karmaşık iç içe nesneleri ve dizileri otomatik olarak işler
Fonksiyonlar, tanımsız değerler ve döngüsel referanslarda başarısız olur

💡 Gelişmiş Seçenek: Büyük veri setleriyle karmaşık çevrimdışı uygulamalar için IndexedDB API'sini düşünün. Bu, tam bir istemci tarafı veritabanı sağlar ancak daha karmaşık bir uygulama gerektirir.

quadrantChart
    title Browser Storage Options
    x-axis Low Complexity --> High Complexity
    y-axis Short Duration --> Long Duration
    
    quadrant-1 Professional Tools
    quadrant-2 Simple Persistence
    quadrant-3 Temporary Storage
    quadrant-4 Advanced Systems
    
    localStorage: [0.3, 0.8]
    sessionStorage: [0.2, 0.2]
    HTTP Cookies: [0.6, 0.7]
    IndexedDB: [0.9, 0.9]
    Memory Variables: [0.1, 0.1]

Görev: localStorage Kalıcılığını Uygulama

Kullanıcıların açıkça çıkış yapana kadar oturumda kalmasını sağlamak için kalıcı depolama uygulayalım. Hesap verilerini tarayıcı oturumları arasında saklamak için localStorage kullanacağız.

Adım 1: Depolama Yapılandırmasını Tanımlayın

const storageKey = 'savedAccount';

Bu sabit ne sağlar:

Saklanan veriler için tutarlı bir tanımlayıcı oluşturur
Depolama anahtarı referanslarındaki yazım hatalarını önler
Depolama anahtarını değiştirmeyi kolaylaştırır
Bakımı kolay kod için en iyi uygulamaları takip eder

Adım 2: Otomatik Kalıcılık Ekleme

updateState() fonksiyonunun sonuna şu satırı ekleyin:

localStorage.setItem(storageKey, JSON.stringify(state.account));

Burada olanları açıklamak:

Hesap nesnesini depolama için bir JSON stringine dönüştürür
Veriyi tutarlı depolama anahtarımızı kullanarak kaydeder
Durum değişiklikleri olduğunda otomatik olarak çalışır
Saklanan verilerin her zaman mevcut durumla senkronize olmasını sağlar

💡 Mimari Avantaj: Tüm durum güncellemelerini updateState() üzerinden merkezileştirdiğimiz için, kalıcılık eklemek yalnızca bir satır kod gerektirdi. Bu, iyi mimari kararların gücünü gösterir!

Adım 3: Uygulama Yüklemesinde Durumu Geri Yükleme

Kaydedilen verileri geri yüklemek için bir başlatma fonksiyonu oluşturun:

function init() {
  const savedAccount = localStorage.getItem(storageKey);
  if (savedAccount) {
    updateState('account', JSON.parse(savedAccount));
  }

  // Our previous initialization code
  window.onpopstate = () => updateRoute();
  updateRoute();
}

init();

Başlatma sürecini anlamak:

Daha önce kaydedilmiş hesap verilerini localStorage'dan alır
JSON stringini tekrar bir JavaScript nesnesine dönüştürür
Durumu kontrol edilen güncelleme fonksiyonumuzu kullanarak günceller
Kullanıcının oturumunu sayfa yüklemesinde otomatik olarak geri yükler
Durumun mevcut olmasını sağlamak için rota güncellemelerinden önce çalışır

Adım 4: Varsayılan Rotayı Optimize Etme

Varsayılan rotayı kalıcılıktan yararlanacak şekilde güncelleyin:

updateRoute() içinde şu satırı değiştirin:

// Replace: return navigate('/login');
return navigate('/dashboard');

Bu değişikliğin mantıklı olmasının nedeni:

Yeni kalıcılık sistemimizden etkili bir şekilde yararlanır
Gösterge tablosunun kimlik doğrulama kontrollerini yapmasına izin verir
Kaydedilmiş bir oturum yoksa otomatik olarak girişe yönlendirir
Daha sorunsuz bir kullanıcı deneyimi oluşturur

Uygulamanızı Test Etme:

Bankacılık uygulamanıza giriş yapın
Tarayıcı sayfasını yenileyin
Giriş yapmış ve gösterge tablosunda olduğunuzu doğrulayın
Tarayıcınızı kapatıp yeniden açın
Uygulamanıza geri dönün ve hala giriş yapmış olduğunuzu doğrulayın

🎉 Başarı Kilidi Açıldı: Kalıcı durum yönetimini başarıyla uyguladınız! Uygulamanız artık profesyonel bir web uygulaması gibi davranıyor.

🎯 Pedagojik Kontrol: Kalıcılık Mimarisi

Mimari Anlayış: Kullanıcı deneyimini veri yönetimi karmaşıklığıyla dengeleyen sofistike bir kalıcılık katmanı uyguladınız.

Öğrenilen Temel Kavramlar:

JSON Serileştirme: Karmaşık nesneleri saklanabilir stringlere dönüştürme
Otomatik Senkronizasyon: Durum değişiklikleri kalıcı depolamayı tetikler
Oturum Kurtarma: Uygulamalar kesintilerden sonra kullanıcı bağlamını geri yükleyebilir
Merkezi Kalıcılık: Tüm depolama işlemlerini bir güncelleme fonksiyonu yönetir

Endüstri Bağlantısı: Bu kalıcılık modeli, İleri Düzey Web Uygulamaları (PWA'lar), çevrimdışı öncelikli uygulamalar ve modern mobil web deneyimleri için temel bir unsurdur. Üretim seviyesinde yetenekler oluşturuyorsunuz.

Düşünme Sorusu: Bu sistemi aynı cihazda birden fazla kullanıcı hesabını yönetmek için nasıl değiştirirdiniz? Gizlilik ve güvenlik etkilerini göz önünde bulundurun.

Kalıcılığı Veri Tazeliği ile Dengelemek

Kalıcılık sistemimiz kullanıcı oturumlarını başarıyla koruyor, ancak yeni bir zorluk ortaya çıkıyor: veri bayatlığı. Birden fazla kullanıcı veya uygulama aynı sunucu verisini değiştirdiğinde, yerel önbellek bilgileri güncelliğini yitiriyor.

Bu durum, hem saklanan yıldız haritalarına hem de mevcut göksel gözlemlere güvenen Viking denizcilerine benzer. Haritalar tutarlılık sağlarken, denizciler değişen koşulları hesaba katmak için taze gözlemlere ihtiyaç duyuyordu. Benzer şekilde, uygulamamız hem kalıcı kullanıcı durumuna hem de güncel sunucu verisine ihtiyaç duyuyor.

🧪 Veri Bayatlığı Sorununu Keşfetmek:

test hesabıyla gösterge tablosuna giriş yapın
Başka bir kaynaktan işlem simüle etmek için terminalde şu komutu çalıştırın:

curl --request POST \
     --header "Content-Type: application/json" \
     --data "{ \"date\": \"2020-07-24\", \"object\": \"Bought book\", \"amount\": -20 }" \
     http://localhost:5000/api/accounts/test/transactions

Tarayıcı sayfasını yenileyin
Yeni işlemi görüp görmediğinizi gözlemleyin

Bu test neyi gösteriyor:

Yerel depolamanın "bayat" (güncel olmayan) olabileceğini gösterir
Gerçek dünya senaryolarını simüle eder, burada veriler uygulamanız dışında değişir
Kalıcılık ve veri tazeliği arasındaki gerilimi ortaya çıkarır

Veri Bayatlığı Sorunu:

Sorun	Sebep	Kullanıcı Etkisi
Bayat Veri	localStorage otomatik olarak süresi dolmaz	Kullanıcılar güncel olmayan bilgi görür
Sunucu Değişiklikleri	Diğer uygulamalar/kullanıcılar aynı veriyi değiştirir	Platformlar arasında tutarsız görünümler
Önbellek vs. Gerçeklik	Yerel önbellek sunucu durumu ile eşleşmez	Kötü kullanıcı deneyimi ve kafa karışıklığı

Çözüm Stratejisi:

Kalıcılığın faydalarını veri doğruluğuyla dengeleyen bir "yüklemede yenileme" modeli uygulayacağız. Bu yaklaşım, kullanıcı deneyimini korurken veri doğruluğunu sağlar.

sequenceDiagram
    participant U as User
    participant A as App
    participant L as localStorage
    participant S as Server
    
    U->>A: Opens app
    A->>L: Load saved state
    L-->>A: Return cached data
    A->>U: Show UI immediately
    A->>S: Fetch fresh data
    S-->>A: Return current data
    A->>L: Update cache
    A->>U: Update UI with fresh data

Görev: Veri Yenileme Sistemi Uygulama

Kalıcı durum yönetiminin faydalarını korurken, sunucudan otomatik olarak taze veri alacak bir sistem oluşturacağız.

Adım 1: Hesap Verisi Güncelleyici Oluşturma

async function updateAccountData() {
  const account = state.account;
  if (!account) {
    return logout();
  }

  const data = await getAccount(account.user);
  if (data.error) {
    return logout();
  }

  updateState('account', data);
}

Bu fonksiyonun mantığını anlamak:

Kullanıcının şu anda giriş yapıp yapmadığını kontrol eder (state.account mevcut mu)
Geçerli bir oturum bulunmazsa çıkışa yönlendirir
Sunucudan mevcut getAccount() fonksiyonunu kullanarak taze hesap verisi alır
Sunucu hatalarını geçersiz oturumları kapatarak zarif bir şekilde yönetir
Kontrollü güncelleme sistemimizi kullanarak durumu taze verilerle günceller
updateState() fonksiyonu aracılığıyla otomatik localStorage kalıcılığını tetikler

Adım 2: Gösterge Tablosu Yenileme İşleyicisi Oluşturma

async function refresh() {
  await updateAccountData();
  updateDashboard();
}

Bu yenileme fonksiyonunun sağladıkları:

Veri yenileme ve UI güncelleme sürecini koordine eder
Taze verilerin yüklenmesini bekler ve ardından ekranı günceller
Gösterge tablosunun en güncel bilgiyi göstermesini sağlar
Veri yönetimi ve UI güncellemeleri arasında temiz bir ayrım korur

Adım 3: Rota Sistemiyle Entegrasyon

Rota yapılandırmanızı otomatik yenilemeyi tetikleyecek şekilde güncelleyin:

const routes = {
  '/login': { templateId: 'login' },
  '/dashboard': { templateId: 'dashboard', init: refresh }
};

Bu entegrasyon nasıl çalışır:

Gösterge tablosu rotası her yüklendiğinde yenileme fonksiyonunu çalıştırır
Kullanıcılar gösterge tablosuna yöneldiğinde her zaman taze verilerin gösterilmesini sağlar
Mevcut rota yapısını korurken veri tazeliği ekler
Rota bazlı başlatma için tutarlı bir model sağlar

Veri Yenileme Sisteminizi Test Etme:

Bankacılık uygulamanıza giriş yapın
Daha önceki curl komutunu çalıştırarak yeni bir işlem oluşturun
Tarayıcı sayfasını yenileyin veya başka bir yere gidip geri dönün
Yeni işlemin hemen göründüğünü doğrulayın

🎉 Mükemmel Denge Sağlandı: Uygulamanız artık kalıcı durumun sorunsuz deneyimini, taze sunucu verilerinin doğruluğuyla birleştiriyor!

📈 Durum Yönetimi Uzmanlık Zaman Çizelgeniz

timeline
    title Professional State Management Journey
    
    section Problem Recognition
        State Issues Diagnosis
            : Identify session loss problems
            : Understand scattered update issues
            : Recognize architectural needs
    
    section Architecture Foundation
        Centralized State Design
            : Create unified state objects
            : Implement controlled update patterns
            : Establish immutable principles
        
        Predictable Updates
            : Master Object.freeze() usage
            : Build debug-friendly systems
            : Create scalable patterns
    
    section Persistence Mastery
        localStorage Integration
            : Handle JSON serialization
            : Implement automatic synchronization
            : Create session continuity
        
        Data Freshness Balance
            : Address staleness challenges
            : Build refresh mechanisms
            : Optimize performance vs accuracy
    
    section Professional Patterns
        Production-Ready Systems
            : Implement error handling
            : Create maintainable architectures
            : Follow industry best practices
        
        Advanced Capabilities
            : Ready for framework integration
            : Prepared for complex state needs
            : Foundation for real-time features

🎓 Mezuniyet Dönüm Noktası: Redux, Vuex ve diğer profesyonel durum kütüphanelerini güçlendiren aynı ilkeleri kullanarak eksiksiz bir durum yönetimi sistemi oluşturdunuz. Bu desenler basit uygulamalardan kurumsal uygulamalara kadar ölçeklenebilir.

🔄 Bir Sonraki Seviye Yetkinlikler:

Durum yönetimi çerçevelerini (Redux, Zustand, Pinia) öğrenmeye hazır
WebSockets ile gerçek zamanlı özellikler uygulamaya hazır
Çevrimdışı öncelikli İleri Düzey Web Uygulamaları oluşturmak için donanımlı
Durum makineleri ve gözlemciler gibi gelişmiş desenler için temel oluşturuldu

GitHub Copilot Agent Challenge 🚀

Agent modunu kullanarak aşağıdaki meydan okumayı tamamlayın:

Açıklama: Bankacılık uygulaması için geri alma/yineleme işlevselliği içeren kapsamlı bir durum yönetimi sistemi uygulayın. Bu meydan okuma, durum geçmişi takibi, değişmez güncellemeler ve kullanıcı arayüzü senkronizasyonu gibi gelişmiş durum yönetimi kavramlarını uygulamanıza yardımcı olacaktır.

Talimat: Bankacılık uygulaması için şunları içeren geliştirilmiş bir durum yönetimi sistemi oluşturun: 1) Tüm önceki durumları takip eden bir durum geçmişi dizisi, 2) Önceki durumlara geri dönebilen geri alma ve yineleme işlevleri, 3) Gösterge tablosunda geri alma/yineleme işlemleri için UI düğmeleri, 4) Bellek sorunlarını önlemek için maksimum 10 durum geçmişi sınırı ve 5) Kullanıcı çıkış yaptığında geçmişin düzgün bir şekilde temizlenmesi. Geri alma/yineleme işlevselliğinin hesap bakiyesi değişiklikleriyle çalıştığından ve tarayıcı yenilemeleri arasında kalıcı olduğundan emin olun.

Daha fazla bilgi için agent mode adresini ziyaret edin.

🚀 Meydan Okuma: Depolama Optimizasyonu

Uygulamanız artık kullanıcı oturumlarını, veri yenilemeyi ve durum yönetimini etkili bir şekilde ele alıyor. Ancak, mevcut yaklaşımımızın depolama verimliliğini işlevsellikle ne kadar iyi dengelediğini düşünün.

Satranç ustalarının temel taşlar ile feda edilebilir piyonlar arasındaki farkı ayırt etmesi gibi, etkili durum yönetimi hangi verilerin kalıcı olması gerektiğini ve hangilerinin her zaman sunucudan taze alınması gerektiğini belirlemeyi gerektirir.

Optimizasyon Analizi:

Mevcut localStorage uygulamanızı değerlendirin ve şu stratejik soruları düşünün:

Kullanıcı kimlik doğrulamasını sürdürmek için gereken minimum bilgi nedir?
Hangi veriler o kadar sık değişiyor ki, yerel önbellekleme çok az fayda sağlıyor?
Depolama optimizasyonu, kullanıcı deneyimini bozmadan performansı nasıl artırabilir?

Uygulama Stratejisi:

Kalıcı olması gereken temel verileri belirleyin (muhtemelen sadece kullanıcı kimliği)
localStorage uygulamanızı yalnızca kritik oturum verilerini saklayacak şekilde değiştirin
Gösterge tablosu ziyaretlerinde her zaman sunucudan taze verilerin yüklendiğinden emin olun
Optimize edilmiş yaklaşımınızın aynı kullanıcı deneyimini koruduğunu test edin

Gelişmiş Düşünce:

Tam hesap verilerini saklamak ile sadece kimlik doğrulama jetonlarını saklamak arasındaki ödünleşimleri karşılaştırın
Kararlarınızı ve gerekçelerinizi gelecekteki ekip üyeleri için belgeleyin

Bu meydan okuma, hem kullanıcı deneyimini hem de uygulama verimliliğini düşünen profesyonel bir geliştirici gibi düşünmenize yardımcı olacaktır. Farklı yaklaşımları denemek için zaman ayırın!

Ders Sonrası Test

Ders sonrası test

Ödev

"İşlem ekleme" diyalog kutusunu uygulayın

İşte ödevi tamamladıktan sonra ortaya çıkan bir örnek:

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ık 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.

37 KiB Raw Blame History Unescape Escape