Kategori Yok

Bölüm 11: Düzen Widget’lar

sabangul67@gmail.com
Ağustos 25, 20269 dk okuma1 görüntülenme

ArcGIS Experience Builder ile Profesyonel Web Uygulamaları Geliştirme

🔍 Bölüm 11: Hata Ayıklama, Test ve Bakım

Anahtar Noktalar

  • Hata Ayıklama Nedir? ArcGIS Experience Builder uygulamalarında hataları tespit etme, analiz etme ve düzeltme süreci.
  • Test: Uygulamanın işlevselliğini, performansını, erişilebilirliğini ve cihaz uyumluluğunu doğrulama.
  • Bakım: Uygulamanın güncel, güvenli ve kullanıcı ihtiyaçlarına uygun kalmasını sağlama.
  • Araçlar: Geliştirici konsolu, ArcGIS API hata ayıklama araçları, Visual Studio Code, ve erişilebilirlik test araçları.
  • Haziran 2025 Güncellemesi: Geliştirilmiş hata ayıklama araçları, otomatik test şablonları ve erişilebilirlik raporlama özellikleri.

Hata Ayıklama, Test ve Bakımın Önemi

Hata ayıklama, test ve bakım, ArcGIS Experience Builder uygulamalarının güvenilirliğini, performansını ve kullanıcı dostu olmasını sağlar. Örneğin:

  • Hata ayıklama, bir widget’ın veri yükleme sorununu çözerek kesintisiz bir deneyim sunar.
  • Test, uygulamanın farklı cihazlarda ve tarayıcılarda sorunsuz çalıştığını garanti eder.
  • Bakım, uygulamanın ArcGIS platform güncellemelerine uyumlu kalmasını sağlar.
    Bu bölüm, hata ayıklama tekniklerini, test stratejilerini, bakım süreçlerini, kod örneklerini, erişilebilirlik testlerini ve pratik senaryoları Haziran 2025 sürümüne uygun olarak süper uzun ve ayrıntılı bir şekilde açıklayacak. Yeni başlayanlardan uzman geliştiricilere kadar herkes için kapsamlı bir rehber sunulacak.

11.1 Hata Ayıklama, Test ve Bakım Nedir?

Hata Ayıklama, uygulamanızdaki hataları (bug’ları) tespit etme, nedenlerini analiz etme ve düzeltme sürecidir. Örneğin, bir widget’ın veri yüklememesi veya bir eylemin çalışmaması gibi sorunlar hata ayıklama ile çözülür.

Test, uygulamanın işlevselliğini, performansını, güvenliğini ve erişilebilirliğini doğrulama sürecidir. Test türleri:

  • Birim Testi: Tek tek bileşenlerin (ör. widget’lar) test edilmesi.
  • Entegrasyon Testi: Widget’lar ve veri kaynakları arasındaki etkileşimlerin test edilmesi.
  • Kullanıcı Kabul Testi: Kullanıcı deneyimini doğrulama.
  • Erişilebilirlik Testi: WCAG 2.1 uyumluluğunu kontrol etme.

Bakım, uygulamanın güncel, güvenli ve kullanıcı ihtiyaçlarına uygun kalmasını sağlayan sürekli bir süreçtir. Bu, ArcGIS platform güncellemelerine uyum, veri kaynağı değişiklikleri ve kullanıcı geri bildirimlerine yanıt vermeyi içerir.

Neden Önemli?

  • Güvenilirlik: Hataları gidererek kesintisiz bir deneyim sağlar.
  • Performans: Yavaş yükleme veya tepki sürelerini optimize eder.
  • Erişilebilirlik: Engelli kullanıcılar için kapsayıcı bir deneyim sunar.
  • Sürdürülebilirlik: Uygulamanın uzun vadeli kullanılabilirliğini garanti eder.

11.2 Hata Ayıklama Teknikleri

Hata ayıklama, ArcGIS Experience Builder uygulamalarında sorunları çözmek için kullanılan bir dizi yöntem ve araç içerir.

11.2.1 Geliştirici Konsolu ile Hata Tespiti

  • Araçlar: Tarayıcı geliştirici konsolu (Chrome DevTools, Firefox Developer Tools).
  • Adımlar:
    1. Uygulamayı Preview modunda açın.
    2. Tarayıcıda F12 tuşuna basarak geliştirici konsolunu açın.
    3. Console sekmesinde hata mesajlarını kontrol edin (ör. TypeError, ReferenceError).
    4. Network sekmesinde veri kaynağı çağrılarını inceleyin (ör. 404 veya 500 hataları).
  • Örnek Hata Mesajı:TypeError: Cannot read property \'geometry\' of undefined
    • Çözüm: Veri kaynağında veri formatını kontrol edin, null kontrolü ekleyin:const geometry = data?.geometry || { x: 0, y: 0 };

11.2.2 ArcGIS API for JavaScript Hata Ayıklama

ArcGIS API for JavaScript, harita ve veri işlevselliği için kullanılır ve hata ayıklama araçları sunar.

  • Örnek: Harita Widget’ında Hata Ayıklama// client/your-extensions/widgets/CustomMapWidget/Widget.tsx import { React, WidgetProps, useEffect } from \'jimu-core\'; import MapView from \'esri/views/MapView\'; import WebMap from \'esri/WebMap\'; export default function CustomMapWidget(props: WidgetProps) { useEffect(() => { try { const webmap = new WebMap({ portalItem: { id: \'your-webmap-id\' } }); const view = new MapView({ container: \'mapDiv\', map: webmap }); view.on(\'error\', (error) => { console.error(\'MapView Error:\', error); }); return () => view.destroy(); } catch (error) { console.error(\'MapWidget Error:\', error); } }, []); return <div id=\"mapDiv\" style={{ width: \'100%\', height: \'600px\' }} />; }
  • İpucu: try-catch blokları ve on(\'error\') olayları ile hataları yakalayın.

11.2.3 Visual Studio Code ile Hata Ayıklama

  • Eklentiler:
    • ESLint: Kod hatalarını tespit eder.
    • Debugger for Chrome: Tarayıcı ile entegre hata ayıklama.
  • Adımlar:
    1. launch.json dosyasını yapılandırın:{ \"version\": \"0.2.0\", \"configurations\": [ { \"type\": \"chrome\", \"request\": \"launch\", \"name\": \"Launch Chrome\", \"url\": \"https://localhost:3001\", \"webRoot\": \"${workspaceFolder}/client\" } ] }
    2. npm start ile geliştirme sunucusunu başlatın.
    3. Visual Studio Code’da Run and Debug ile hata ayıklama yapın.

11.2.4 Özel Widget Hata Ayıklama

  • Örnek: Özel Widget’ta Hata Tespiti// client/your-extensions/widgets/MyWidget/Widget.tsx import { React, WidgetProps, useEffect } from \'jimu-core\'; export default function MyWidget(props: WidgetProps) { useEffect(() => { console.log(\'Widget Props:\', props); // Props’ları kontrol et try { const data = props.useDataSource[0].data; console.log(\'Data:\', data); // Veriyi kontrol et } catch (error) { console.error(\'Widget Error:\', error); } }, [props]); return <div>My Widget</div>; }
  • İpucu: console.log ile veri akışını izleyin, try-catch ile hataları yakalayın.

11.2.5 Yaygın Hata Türleri ve Çözümleri

  • Veri Yükleme Hataları:
    • Hata: 404 Not Found (Veri kaynağı bulunamadı).
    • Çözüm: Veri kaynağının URL’sini ve paylaşım ayarlarını kontrol edin.
  • Eylem Hataları:
    • Hata: Eylem tetiklenmiyor.
    • Çözüm: Mesaj türü ve hedef widget’ı doğrulayın.
  • Performans Sorunları:
    • Hata: Yavaş yükleme.
    • Çözüm: Veri setini optimize edin, önbellekleme kullanın.

11.3 Test Stratejileri

Test, uygulamanın tüm yönlerini doğrulayarak kullanıcı deneyimini iyileştirir.

11.3.1 Birim Testi

  • Araçlar: Jest, React Testing Library.
  • Örnek: Özel Widget için Birim Testi// client/your-extensions/widgets/MyWidget/__tests__/MyWidget.test.tsx import { render } from \'@testing-library/react\'; import MyWidget from \'../Widget\'; test(\'MyWidget renders correctly\', () => { const props = { config: { text: \'Test\' } }; const { getByText } = render(<MyWidget {...props} />); expect(getByText(\'Test\')).toBeInTheDocument(); });
  • Adımlar:
    1. npm install --save-dev @testing-library/react jest.
    2. Test dosyasını oluşturun.
    3. npm test ile testleri çalıştırın.

11.3.2 Entegrasyon Testi

  • Amaç: Widget’lar ve veri kaynakları arasındaki etkileşimleri test etme.
  • Adımlar:
    1. Preview modunda eylemleri test edin (ör. Harita seçimi Tablo’yu güncelliyor mu?).
    2. Farklı veri kaynaklarını bağlayarak veri akışını kontrol edin.
  • Örnek: Harita ve Tablo entegrasyonunu test etme.

11.3.3 Kullanıcı Kabul Testi

  • Amaç: Kullanıcı deneyimini doğrulama.
  • Adımlar:
    1. Kullanıcı senaryolarını tanımlayın (ör. “Kullanıcı haritada bir noktaya tıklar, detaylar görünür”).
    2. Preview modunda senaryoları test edin.
    3. Kullanıcı geri bildirimlerini toplayın.

11.3.4 Erişilebilirlik Testi

  • Araçlar:
    • axe DevTools: Otomatik erişilebilirlik testi.
    • Screen Reader: NVDA veya VoiceOver ile test.
  • Adımlar:
    1. axe DevTools eklentisini tarayıcıya kurun.
    2. Uygulamayı tarayın ve WCAG 2.1 hatalarını kontrol edin.
    3. Klavye navigasyonunu test edin (ör. Tab ve Shift+Spacebar).
  • Örnek: ARIA Etiketi Kontrolü<button aria-label=\"Filtreyi Uygula\" role=\"button\">Uygula</button>

11.3.5 Performans Testi

  • Araçlar: Chrome DevTools (Performance sekmesi), Lighthouse.
  • Adımlar:
    1. Performance sekmesinde yükleme sürelerini analiz edin.
    2. Lighthouse ile performans, erişilebilirlik ve SEO puanlarını kontrol edin.
  • Optimizasyon İpuçları:
    • Veri setlerini basitleştirin (ör. sadece gerekli alanlar).
    • Widget’ları lazy-loading ile yükleyin.

11.4 Bakım Süreçleri

Bakım, uygulamanın güncel ve kullanıcı ihtiyaçlarına uygun kalmasını sağlar.

11.4.1 Güncellemeleri Takip Etme

  • ArcGIS Platform Güncellemeleri:
  • Adımlar:
    1. ArcGIS Online/Enterprise sürümünü kontrol edin.
    2. Uygulamanızı yeni sürüme uyumlu hale getirin (ör. API değişiklikleri).

11.4.2 Veri Kaynağı Yönetimi

  • Adımlar:
    1. Veri kaynaklarının paylaşım ayarlarını düzenli kontrol edin.
    2. Eski veri katmanlarını kaldırın veya güncelleyin.
  • Örnek: Veri kaynağı bağlantısını test etme:const response = await fetch(\'https://services.arcgis.com/data\'); if (!response.ok) { console.error(\'Data source error:\', response.status); }

11.4.3 Kullanıcı Geri Bildirimleri

  • Adımlar:
    1. Kullanıcı geri bildirimlerini toplamak için bir Anket Widget’ı ekleyin.
    2. Geri bildirimlere göre widget veya eylemleri güncelleyin.
  • Örnek: Anket Widget’ı ile geri bildirim toplama.

11.4.4 Güvenlik Bakımı

  • Adımlar:
    1. API anahtarlarını ve OAuth token’larını düzenli yenileyin.
    2. HTTPS bağlantılarını doğrulayın.
    3. Paylaşım ayarlarını kontrol edin (ör. yalnızca organizasyon üyelerine açık).

11.5 Haziran 2025 Güncellemesindeki Yenilikler

  • Hata Ayıklama:
    • Geliştirici konsolunda ayrıntılı hata raporları.
    • Otomatik hata ayıklama önerileri.
  • Test Araçları:
    • Yeni Jest şablonları.
    • Otomatik erişilebilirlik raporlama.
  • Erişilebilirlik:
    • Yeni useAccessibility hook’u.
    • Otomatik ARIA etiket oluşturma.
  • Performans:
    • Daha hızlı widget yükleme süreleri.
    • Optimize edilmiş veri kaynağı entegrasyonu.

11.6 Pratik Örnekler

Aşağıda, basitten zora dört pratik örnekle hata ayıklama, test ve bakım süreçlerini açıklayacağız.

Örnek 1: Veri Yükleme Hatasını Düzeltme (Başlangıç Seviyesi)

  • Amaç: Harita widget’ında veri yükleme hatasını tespit edip düzeltme.
  • Widget’lar: Harita, Tablo.
  • Adımlar:
    1. Hata Tespiti:
      • Geliştirici konsolunda: 404 Not Found hatası.
    2. Çözüm:
      • Veri kaynağının URL’sini kontrol edin.
      • Örnek: Yanlış URL: https://services.arcgis.com/wrong-url.
      • Doğru URL: https://services.arcgis.com/correct-url/FeatureServer/0.
    3. Test:
      • Preview modunda veri yüklemesini kontrol edin.
      • Tablo widget’ında verilerin göründüğünü doğrulayın.
    4. Bakım:
      • Veri kaynağını düzenli kontrol eden bir script yazın:async function checkDataSource() { try { const response = await fetch(\'https://services.arcgis.com/correct-url/FeatureServer/0\'); if (!response.ok) throw new Error(\'Data source unavailable\'); console.log(\'Data source OK\'); } catch (error) { console.error(\'Data source error:\', error); } }
  • Sonuç: Veri yükleme hatası giderilmiş bir harita uygulaması.
  • İpucu: Veri kaynağı değiştiğinde paylaşım ayarlarını kontrol edin.

Örnek 2: Eylem Hatasını Düzeltme ve Test Etme (Orta Seviye)

  • Amaç: Harita seçimiyle Tablo’yu güncellemeyen bir eylemi düzeltme.
  • Widget’lar: Harita, Tablo, Filtre.
  • Adımlar:
    1. Hata Tespiti:
      • Geliştirici konsolunda: Cannot read property \'update\' of undefined.
    2. Çözüm:
      • Harita widget’ında Action > Record Selection Change ayarını kontrol edin.
      • Hedef widget’ın (Tablo) doğru seçildiğinden emin olun.
      • Örnek düzeltme:// client/your-extensions/widgets/CustomActionWidget/Widget.tsx import { React, WidgetProps, useDataSource } from \'jimu-core\'; export default function CustomActionWidget(props: WidgetProps) { const { data } = useDataSource(props.useDataSource[0]); if (!data) { console.warn(\'No data available\'); return <div>No data</div>; } return <div>Data loaded</div>; }
    3. Test:
      • Preview modunda Harita’da bir noktaya tıklayın, Tablo’nun güncellendiğini kontrol edin.
      • Jest ile birim testi yazın:test(\'CustomActionWidget handles no data\', () => { const { getByText } = render(<CustomActionWidget useDataSource={[]} />); expect(getByText(\'No data\')).toBeInTheDocument(); });
    4. Bakım:
      • Eylemlerin düzenli çalıştığını kontrol eden bir cron job kurun.
  • Sonuç: Sorunsuz çalışan bir eylem mekanizması.
  • İpucu: Eylem yapılandırmalarını belgeleyin.

Örnek 3: Erişilebilirlik Testi ve İyileştirme (İleri Seviye)

  • Amaç: Uygulamanın WCAG 2.1 uyumluluğunu test etme ve iyileştirme.
  • Widget’lar: Harita, Filtre, Tablo.
  • Adımlar:
    1. Erişilebilirlik Testi:
      • axe DevTools ile tarama yapın.
      • Hata: “Düğmelerde aria-label eksik.”
    2. Çözüm:
      • Filtre widget’ına ARIA etiketleri ekleyin:<button aria-label=\"Filtreyi Uygula\" role=\"button\">Uygula</button>
      • Klavye navigasyonu ekleyin:import { useKeyboardNavigation } from \'jimu-core\'; useKeyboardNavigation({ onEnter: () => applyFilter() });
    3. Test:
      • NVDA veya VoiceOver ile ekran okuyucu testi yapın.
      • Klavye ile navigasyonu kontrol edin (ör. Tab, Shift+Spacebar).
    4. Bakım:
      • Her güncelleme sonrası erişilebilirlik testlerini tekrarlayın.
      • Otomatik test script’i yazın:// __tests__/accessibility.test.tsx import { render } from \'@testing-library/react\'; test(\'Button has aria-label\', () => { const { getByRole } = render(<button aria-label=\"Filtreyi Uygula\" role=\"button\">Uygula</button>); expect(getByRole(\'button\')).toHaveAttribute(\'aria-label\', \'Filtreyi Uygula\'); });
  • Sonuç: WCAG 2.1 uyumlu bir uygulama.
  • İpucu: Renk kontrastını WebAIM Contrast Checker ile kontrol edin.

Örnek 4: Afet Yönetimi Uygulaması için Kapsamlı Hata Ayıklama ve Bakım (Uzman Seviyesi)

  • Amaç: Gerçek zamanlı afet verileriyle çalışan bir uygulamanın hata ayıklamasını, testini ve bakımını yapma.
  • Widget’lar: Harita (3D), Analiz, Tablo, Widget Kontrolcüsü, Akordeon.
  • Adımlar:
    1. Hata Tespiti:
      • Sorun: IoT veri kaynağı yüklenmiyor.
      • Geliştirici konsolunda: WebSocket connection failed.
      • Çözüm: WebSocket URL’sini kontrol edin, yeniden bağlanma mekanizması ekleyin:// client/your-extensions/data-sources/IoTDataSource.ts import { DataSource, DataSourceConstructorOptions } from \'jimu-core\'; export default class IoTDataSource extends DataSource { private ws: WebSocket; constructor(options: DataSourceConstructorOptions) { super(options); this.connect(); } connect() { this.ws = new WebSocket(\'wss://api.disaster-sensors.com/stream\'); this.ws.onmessage = (event) => { const data = JSON.parse(event.data); this.updateData(data.map(item => ({ geometry: { type: \'point\', x: item.lon, y: item.lat }, attributes: { risk_score: item.risk } }))); }; this.ws.onerror = () => { setTimeout(() => this.connect(), 5000); // 5 saniye sonra yeniden bağlan }; } destroy() { this.ws.close(); } }
    2. Test:
      • Birim Testi: WebSocket veri kaynağını test edin:test(\'IoTDataSource connects\', () => { const ds = new IoTDataSource({ id: \'test\' }); expect(ds.ws).toBeDefined(); });
      • Entegrasyon Testi: Harita, Tablo ve Analiz widget’larının veri akışını test edin.
      • Erişilebilirlik Testi: axe DevTools ile tarama yapın, ARIA etiketlerini kontrol edin.
      • Performans Testi: Lighthouse ile yükleme sürelerini analiz edin.
    3. Bakım:
      • Veri kaynaklarını haftalık kontrol eden bir script yazın.
      • Kullanıcı geri bildirimlerini toplamak için Anket Widget’ı ekleyin.
      • ArcGIS platform güncellemelerini takip edin.
  • Sonuç: Güvenilir, erişilebilir ve güncel bir afet yönetimi uygulaması.
  • İpucu: Hata ayıklama için loglama sistemleri (ör. Sentry) kullanın.

11.7 En İyi Uygulamalar ve İpuçları

  • Hata Ayıklama:
    • Her zaman try-catch kullanın.
    • Geliştirici konsolunu düzenli kontrol edin.
  • Test:
    • Otomatik testler yazın (Jest, React Testing Library).
    • Erişilebilirlik testlerini her güncelleme sonrası tekrarlayın.
  • Bakım:
    • Veri kaynaklarını ve paylaşım ayarlarını düzenli kontrol edin.
    • Kullanıcı geri bildirimlerini değerlendirin.
  • Erişilebilirlik:
    • WCAG 2.1 standartlarına uyun.
    • Klavye navigasyonu ve ekran okuyucu desteğini test edin.

11.8 Sorun Giderme

  • Veri Yükleme Hataları: Veri kaynağının URL’sini ve paylaşım ayarlarını kontrol edin.
  • Eylem Hataları: Mesaj türü ve hedef widget’ı doğrulayın.
  • Performans Sorunları: Veri setlerini optimize edin, önbellekleme kullanın.
  • Erişilebilirlik Sorunları: ARIA etiketleri ve klavye navigasyonunu kontrol edin.

11.9 Kaynaklar

Yazar

sabangul67@gmail.com

Bu yazarın yayınladığı diğer içerikleri inceleyebilirsiniz.

Tüm yazıları
Devamını Keşfet

Benzer Yazılar