Kategori Yok

Bölüm 9: Sayfa Elemanı Widget’lar

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

ArcGIS Experience Builder ile Profesyonel Web Uygulamaları Geliştirme

🧪 Bölüm 9: İleri Düzey Teknikler ve Optimizasyon

Anahtar Noktalar

  • İleri Düzey Teknikler Nedir? ArcGIS Experience Builder’da karmaşık veri işleme, performans optimizasyonu, özel iş akışları ve erişilebilirlik gibi gelişmiş özelliklerin kullanımı.
  • Optimizasyon: Uygulamanın hızını, kullanıcı deneyimini ve ölçeklenebilirliğini artırmak için veri, widget ve eylem optimizasyonu.
  • Kapsamlı Özellikler: Arcade ifadeleri, 3D sahneler, dinamik veri kaynakları ve özel iş akışları.
  • Erişilebilirlik: WCAG 2.1 standartlarına uygun uygulamalar oluşturma.
  • Haziran 2025 Güncellemesi: Yeni Arcade fonksiyonları, 3D performans iyileştirmeleri ve erişilebilirlik API’leri.

İleri Düzey Tekniklerin ve Optimizasyonun Önemi

İleri düzey teknikler, ArcGIS Experience Builder uygulamalarınızı standart bir harita uygulamasından öteye taşıyarak karmaşık analizler, dinamik veri görselleştirmeleri ve yüksek performanslı deneyimler sunmanızı sağlar. Optimizasyon, uygulamanızın büyük veri setleriyle çalışmasını, farklı cihazlarda akıcı bir deneyim sunmasını ve erişilebilirlik standartlarına uymasını garanti eder. Örneğin:

  • Bir afet yönetimi uygulamasında, gerçek zamanlı veri akışıyla dinamik analiz yapılabilir.
  • Bir şehir planlama uygulamasında, 3D sahnelerle kullanıcılar arazi yapısını görselleştirebilir.
    Bu bölümde, ileri düzey teknikleri, optimizasyon stratejilerini, kod örneklerini, erişilebilirlik uygulamalarını ve pratik senaryoları Haziran 2025 sürümüne uygun olarak aşırı ayrıntılı bir şekilde açıklayacağız. Yeni başlayanlardan uzman geliştiricilere kadar herkes için rehber niteliğinde bir içerik sunacağız.

9.1 İleri Düzey Teknikler ve Optimizasyon Nedir?

İleri Düzey Teknikler, ArcGIS Experience Builder’ın standart özelliklerini genişleten yöntemlerdir:

  • Arcade İfadeleri: Dinamik veri işleme ve görselleştirme.
  • 3D Sahneler: Gerçekçi arazi ve yapı görselleştirmeleri.
  • Dinamik Veri Kaynakları: Harici API’ler ve gerçek zamanlı veri entegrasyonu.
  • Özel İş Akışları: Karmaşık kullanıcı etkileşimleri ve otomasyonlar.

Optimizasyon, uygulamanın performansını, kullanıcı deneyimini ve erişilebilirliğini iyileştirme sürecidir:

  • Veri Optimizasyonu: Büyük veri setlerini verimli işleme.
  • Widget Optimizasyonu: Gereksiz kaynak tüketimini azaltma.
  • Erişilebilirlik Optimizasyonu: WCAG 2.1 uyumluluğu.

Neden Önemli?

  • Performans: Büyük veri setleriyle çalışırken hızlı yükleme süreleri sağlar.
  • Kullanıcı Deneyimi: Akıcı ve sezgisel bir arayüz sunar.
  • Erişilebilirlik: Engelli kullanıcılar için kapsayıcı bir deneyim sağlar.
  • Ölçeklenebilirlik: Uygulamanın büyüyen veri ve kullanıcı ihtiyaçlarına uyum sağlamasını garantiler.

9.2 İleri Düzey Teknikler

9.2.1 Arcade İfadeleri ile Dinamik Veri İşleme

Arcade, ArcGIS platformunda veri görselleştirme, hesaplama ve filtreleme için kullanılan bir betik dilidir. Experience Builder’da, haritalar, widget’lar ve veri kaynakları için dinamik ifadeler yazabilirsiniz.

  • Kullanım Alanları:
    • Özelliklere göre dinamik renk kodlaması.
    • Veri hesaplamaları (ör. alan, mesafe).
    • Filtreleme ve veri dönüştürme.
  • Örnek: Risk Seviyesine Göre Renk Kodlaması// Haritada afet risk seviyesine göre renk belirleme var riskLevel = $feature.risk_score; if (riskLevel > 75) { return { color: \'red\', label: \'Yüksek Risk\' }; } else if (riskLevel > 50) { return { color: \'orange\', label: \'Orta Risk\' }; } else { return { color: \'green\', label: \'Düşük Risk\' }; }
  • Yapılandırma Adımları:
    1. Harita widget’ında bir veri katmanı seçin.
    2. Symbology > Arcade sekmesine gidin.
    3. Yukarıdaki ifadeyi ekleyin ve haritaya uygulayın.
  • Haziran 2025 Yenilikleri:
    • Yeni fonksiyonlar: GeoJSONToFeature, RealTimeStream.
    • Performans iyileştirmeleri: 50.000 özellik sınırı optimize edildi.

9.2.2 3D Sahnelerle Görselleştirme

3D sahneler, arazi, binalar ve altyapı gibi coğrafi verileri gerçekçi bir şekilde görselleştirir.

  • Kullanım Alanları:
    • Şehir planlama (bina yükseklikleri, gölgeler).
    • Afet yönetimi (sel simülasyonları).
  • Adımlar:
    1. Harita Widget’ı ekleyin ve bir 3D sahne katmanı bağlayın (ör. ArcGIS Online’dan bir Web Scene).
    2. Yapılandırma:
      • Scene Quality: Yüksek (detaylı) veya Düşük (performans odaklı).
      • Tools: Elevation Profile, Line of Sight, Slice.
    3. Örnek: Yükseklik Profili Analizi:
      • Elevation Profile Widget ekleyin.
      • Action: Harita tıklamasıyla yükseklik profili hesaplayın.
  • İpucu: 3D sahnelerde performans için düşük poligonlu modeller kullanın.

9.2.3 Dinamik Veri Kaynakları

Harici API’lerden veya gerçek zamanlı veri akışlarından veri çekmek için dinamik veri kaynakları kullanılır.

  • Örnek: IoT Sensör Verisi Entegrasyonu:// client/your-extensions/data-sources/IoTDataSource.ts import { DataSource, DataSourceConstructorOptions } from \'jimu-core\'; export default class IoTDataSource extends DataSource { constructor(options: DataSourceConstructorOptions) { super(options); } async ready() { const response = await fetch(\'https://api.example.com/iot-sensors\'); const data = await response.json(); return data.map(item => ({ geometry: { x: item.longitude, y: item.latitude }, attributes: { temperature: item.temperature, timestamp: item.timestamp } })); } }
  • Adımlar:
    1. Özel veri kaynağını oluşturun (yukarıdaki kod).
    2. Veri Paneli’nde veri kaynağını ekleyin.
    3. Harita veya Grafik widget’ına bağlayın.
  • Haziran 2025 Yeniliği: RealTimeStream fonksiyonu ile WebSocket desteği.

9.2.4 Özel İş Akışları

Karmaşık kullanıcı etkileşimleri için özel iş akışları oluşturabilirsiniz.

  • Örnek: Otomatik Analiz İş Akışı:// client/your-extensions/workflows/AnalysisWorkflow.ts import { Workflow, WorkflowContext } from \'jimu-core\'; import Graphic from \'esri/Graphic\'; import Buffer from \'esri/tasks/support/BufferParameters\'; import GeometryService from \'esri/tasks/GeometryService\'; export default class AnalysisWorkflow extends Workflow { async execute(context: WorkflowContext) { const { mapView, data } = context; const geometryService = new GeometryService({ url: \'https://utility.arcgisonline.com/arcgis/rest/services/Geometry/GeometryServer\' }); const params = new BufferParameters({ geometries: [data.geometry], distances: [100], unit: \'meters\' }); const result = await geometryService.buffer(params); const graphic = new Graphic({ geometry: result[0], symbol: { type: \'simple-fill\', color: [255, 0, 0, 0.5] } }); mapView.graphics.add(graphic); } }
  • Adımlar:
    1. İş akışını oluşturun.
    2. Harita widget’ından tetikleyici ekleyin (ör. Record Selection Change).
    3. İş akışını çağırın.

9.3 Optimizasyon Teknikleri

9.3.1 Veri Optimizasyonu

  • Veri Azaltma:
    • Büyük veri setlerini filtreleyin (ör. sadece gerekli özellikleri yükleyin).
    • Arcade ile veri özetleme: SummarizeAttributes.
  • Önbellekleme:
    • Statik veri kaynakları için istemci tarafı önbellekleme kullanın.
    • Örnek: esri/request ile önbellek ayarları.import { request } from \'esri/request\'; request(\'https://services.arcgis.com/data\', { responseType: \'json\', cache: \'force-cache\' });
  • Sıkıştırma:
    • GeoJSON veya CSV formatlarını sıkıştırılmış olarak yükleyin.

9.3.2 Widget Optimizasyonu

  • Minimum Widget Kullanımı:
    • Gereksiz widget’ları kaldırın.
    • İç içe düzen widget’larını sadeleştirin.
  • Asenkron Yükleme:
    • Widget’ları lazy-loading ile yükleyin.const LazyWidget = React.lazy(() => import(\'./MyHeavyWidget\'));
  • Performans İzleme:
    • Geliştirici konsolunda widget yükleme sürelerini kontrol edin.

9.3.3 Eylem Optimizasyonu

  • Eylem Sınırlandırma:
    • Çok fazla eylem tanımlamaktan kaçının.
    • Örneğin, bir Harita widget’ına yalnızca gerekli eylemleri (ör. Zoom to, Filter Data) ekleyin.
  • Filtre Optimizasyonu:
    • SQL ifadelerinde indekslenmiş alanlar kullanın.
    • Örnek: WHERE indexed_field = \'value\' yerine WHERE non_indexed_field = \'value\' kullanmayın.

9.3.4 Erişilebilirlik Optimizasyonu

  • WCAG 2.1 Uyumluluğu:
    • ARIA Etiketleri: Widget’lara aria-label ve role ekleyin.<button aria-label=\"Filtreyi Uygula\" role=\"button\">Uygula</button>
    • Klavye Navigasyonu: Haziran 2025 güncellemesiyle gelen useKeyboardNavigation hook’unu kullanın.import { useKeyboardNavigation } from \'jimu-core\'; useKeyboardNavigation({ onEnter: () => applyFilter() });
  • Ekran Okuyucu Desteği:
    • Widget’larda açıklayıcı metinler kullanın.
    • Örnek: Harita widget’ında aria-describedby ile açıklama ekleyin.
  • Renk Kontrastı:

9.4 Haziran 2025 Güncellemesindeki Yenilikler

  • Arcade İyileştirmeleri:
    • GeoJSONToFeature: GeoJSON verilerini doğrudan özelliklere dönüştürme.
    • RealTimeStream: WebSocket tabanlı gerçek zamanlı veri akışı.
  • 3D Performans:
    • Daha hızlı sahne yükleme (WebGL optimizasyonları).
    • Düşük poligonlu 3D modeller için otomatik optimizasyon.
  • Erişilebilirlik API’leri:
    • Yeni useAccessibility hook’u.
    • Otomatik ARIA etiket oluşturma.
  • Hata Ayıklama:
    • Geliştirici konsolunda daha ayrıntılı performans raporları.

9.5 Pratik Örnekler

Aşağıda, basitten zora dört pratik örnekle ileri düzey teknikleri ve optimizasyonları açıklayacağız.

Örnek 1: Dinamik Renk Kodlaması ile Emlak Uygulaması (Başlangıç Seviyesi)

  • Amaç: Mülk fiyatlarına göre haritada dinamik renk kodlaması yapmak.
  • Widget’lar: Harita, Filtre.
  • Adımlar:
    1. Harita Widget’ı ekleyin, emlak verileri içeren bir katman bağlayın.
    2. Symbology > Arcade sekmesinde aşağıdaki ifadeyi ekleyin:var price = $feature.price; if (price > 500000) { return { color: \'red\', label: \'Yüksek Fiyat\' }; } else if (price > 200000) { return { color: \'yellow\', label: \'Orta Fiyat\' }; } else { return { color: \'green\', label: \'Düşük Fiyat\' }; }
    3. Filtre Widget’ı ekleyin, fiyat aralığı için filtre tanımlayın.
    4. Action: Filtre değiştiğinde Harita’yı güncelleyin.
    5. Optimizasyon:
      • Veri setini sadece gerekli alanlarla sınırlandırın (ör. price, geometry).
      • Harita yükleme için düşük kaliteli mod seçin.
    6. Preview ile test edin.
  • Sonuç: Fiyatlara göre dinamik renk kodlaması yapan bir emlak haritası.
  • İpucu: Arcade ifadelerinde performans için karmaşık döngülerden kaçının.

Örnek 2: Gerçek Zamanlı IoT Verileri (Orta Seviye)

  • Amaç: IoT sensör verilerini gerçek zamanlı olarak görselleştiren bir uygulama.
  • Widget’lar: Harita, Grafik, Özel Veri Kaynağı.
  • Adımlar:
    1. Özel veri kaynağı oluşturun:// client/your-extensions/data-sources/IoTSensorDataSource.ts import { DataSource, DataSourceConstructorOptions } from \'jimu-core\'; export default class IoTSensorDataSource extends DataSource { constructor(options: DataSourceConstructorOptions) { super(options); } async ready() { const ws = new WebSocket(\'wss://api.example.com/iot-stream\'); ws.onmessage = (event) => { const data = JSON.parse(event.data); this.updateData(data.map(item => ({ geometry: { x: item.lon, y: item.lat }, attributes: { temperature: item.temp } }))); }; return []; } }
    2. Harita Widget’ı ekleyin, veri kaynağını bağlayın.
    3. Grafik Widget’ı ekleyin, sıcaklık verileri için çizgi grafiği oluşturun.
    4. Optimizasyon:
      • WebSocket verilerini 10 saniyede bir güncelleyin.
      • Veri boyutunu sınırlayın (ör. son 100 kayıt).
    5. Preview ile test edin.
  • Sonuç: Gerçek zamanlı IoT verileri görselleştiren bir uygulama.
  • İpucu: WebSocket bağlantılarını kapatmak için ws.close() kullanın.

Örnek 3: 3D Şehir Planlama Panosu (İleri Seviye)

  • Amaç: 3D sahne ile şehir planlama analizi yapan bir pano.
  • Widget’lar: Harita (3D), Elevation Profile, Tablo, Widget Kontrolcüsü.
  • Adımlar:
    1. Harita Widget’ı ekleyin, 3D sahne katmanı bağlayın.
      • Scene Quality: Orta (performans-detal dengesi).
    2. Elevation Profile Widget’ı ekleyin, harita ile senkronize edin.
    3. Tablo Widget’ı ekleyin, bina verilerini listeleyin.
    4. Widget Kontrolcüsü ile Filtre ve Özellik Bilgisi widget’larını kontrol edin.
    5. Action:
      • Harita seçimi Tablo’yu güncelleyin.
      • Elevation Profile analizi Harita’da grafik eklesin.
    6. Optimizasyon:
      • 3D modelleri düşük poligonlu kullanın.
      • Veri yüklemesini önbelleğe alın.
    7. Preview ile test edin.
  • Sonuç: 3D şehir planlama analizi yapan bir pano.
  • İpucu: 3D performans için WebGL hata ayıklama araçlarını kullanın.

Örnek 4: Afet Yönetimi için Karmaşık İş Akışı (Uzman Seviyesi)

  • Amaç: Gerçek zamanlı afet verileriyle otomatik analiz yapan bir uygulama.
  • Widget’lar: Harita (3D), Analiz, Tablo, Akordeon, Özel İş Akışı.
  • Adımlar:
    1. Akordeon Widget’ı ekleyin, “Harita” ve “Analiz” panelleri oluşturun.
    2. Harita Widget’ı (3D sahne) ve Analiz Widget’ı (Line of Sight) ekleyin.
    3. Tablo Widget’ı ekleyin, afet verilerini listeleyin.
    4. Özel iş akışı oluşturun:// client/your-extensions/workflows/DisasterAnalysisWorkflow.ts import { Workflow, WorkflowContext } from \'jimu-core\'; import Graphic from \'esri/Graphic\'; import Query from \'esri/rest/support/Query\'; import FeatureLayer from \'esri/layers/FeatureLayer\'; export default class DisasterAnalysisWorkflow extends Workflow { async execute(context: WorkflowContext) { const { mapView, data } = context; const layer = new FeatureLayer({ url: \'https://services.arcgis.com/disaster-data/FeatureServer/0\' }); const query = new Query({ where: \'risk_score > 50\', outFields: [\'*\'] }); const result = await layer.queryFeatures(query); const graphics = result.features.map(feature => new Graphic({ geometry: feature.geometry, symbol: { type: \'simple-marker\', color: \'red\' } })); mapView.graphics.addMany(graphics); } }
    5. Action: Harita tıklaması iş akışını tetiklesin.
    6. Optimizasyon:
      • Veri sorgularını indekslenmiş alanlarla yapın.
      • Grafikleri önbelleğe alın.
    7. Preview ile test edin.
  • Sonuç: Gerçek zamanlı afet analizi yapan bir uygulama.
  • İpucu: İş akışlarında hata yönetimi için try-catch kullanın.

9.6 En İyi Uygulamalar ve İpuçları

  • Modülerlik: Kodları küçük, yeniden kullanılabilir bileşenlere ayırın.
  • Hata Yönetimi: Arcade ve iş akışlarında try-catch blokları kullanın.
  • Performans İzleme: Geliştirici konsolunda yükleme sürelerini kontrol edin.
  • Erişilebilirlik: WCAG 2.1 standartlarına uyun, ARIA etiketleri ekleyin.
  • Dokümantasyon: Özelleştirmeler için kullanıcı kılavuzu hazırlayın.

9.7 Sorun Giderme

  • Arcade Hataları: İfadeleri ArcGIS Arcade Playground’da test edin.
  • 3D Performans Sorunları: Düşük poligonlu modeller kullanın, WebGL hatalarını kontrol edin.
  • Veri Yükleme Sorunları: Veri kaynağının paylaşım ayarlarını doğrulayın.
  • Erişilebilirlik Sorunları: Klavye navigasyonu ve ekran okuyucu uyumluluğunu test edin.

9.8 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