Kategori Yok

Bölüm 15: İleri Düzey Konular

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

ArcGIS Experience Builder ile Profesyonel Web Uygulamaları Geliştirme

🚀 Bölüm 15: İleri Düzey Konular

Anahtar Noktalar

  • İleri Düzey Konular Nedir? ArcGIS Experience Builder’da karmaşık işlevsellikler, özel geliştirmeler, performans optimizasyonları ve yenilikçi teknolojilerin kullanımı.
  • Kapsam: Özel widget geliştirme, 3D veri görselleştirme, gerçek zamanlı veri entegrasyonu, yapay zeka (AI) entegrasyonu, ve gelişmiş erişilebilirlik uygulamaları.
  • Araçlar: ArcGIS API for JavaScript, TypeScript, React, WebSocket, ve AI/ML kütüphaneleri.
  • Erişilebilirlik: WCAG 2.1 standartlarına uygun, kapsayıcı uygulamalar.
  • Haziran 2025 Güncellemesi: Yeni AI entegrasyon araçları, 3D performans iyileştirmeleri ve geliştirilmiş geliştirici araçları.

İleri Düzey Konuların Önemi

İleri düzey konular, ArcGIS Experience Builder uygulamalarını temel bir harita uygulamasından öteye taşıyarak, karmaşık analizler, yenilikçi görselleştirmeler ve kullanıcı odaklı çözümler sunar. Örneğin:

  • Bir afet yönetimi uygulamasında, gerçek zamanlı sensör verileriyle AI tabanlı risk tahmini yapılabilir.
  • Bir şehir planlama uygulamasında, 3D sahnelerle arazi kullanımını görselleştirebilirsiniz.
    Bu bölüm, ileri düzey teknikleri, özelleştirme yöntemlerini, kod örneklerini, erişilebilirlik uygulamalarını ve pratik senaryoları aşırı detaylı ve herkesin anlayacağı bir dille açıklayacak. Yeni başlayanlar için adım adım rehberler, uzmanlar için derinlemesine teknik bilgiler sunacağız, Haziran 2025 sürümüne uygun olarak.

15.1 İleri Düzey Konular Nedir?

İleri Düzey Konular, ArcGIS Experience Builder’ın standart özelliklerini genişleten tekniklerdir. Bunlar:

  • Özel Widget Geliştirme: Kendi widget’larınızı sıfırdan oluşturma.
  • 3D Veri Görselleştirme: Gerçekçi sahneler ve analiz araçları.
  • Gerçek Zamanlı Veri Entegrasyonu: WebSocket ve IoT verileriyle dinamik uygulamalar.
  • Yapay Zeka Entegrasyonu: Veri analizi ve tahmin için AI/ML kullanımı.
  • Gelişmiş Erişilebilirlik: Engelli kullanıcılar için kapsayıcı deneyimler.

Neden Önemli?

  • Özelleştirme: Organizasyonun ihtiyaçlarına özel çözümler sunar.
  • Performans: Büyük veri setleriyle hızlı ve akıcı uygulamalar sağlar.
  • Kullanıcı Deneyimi: Sezgisel, görsel olarak etkileyici ve erişilebilir arayüzler oluşturur.
  • İnovasyon: AI ve 3D teknolojilerle modern uygulamalar geliştirir.

15.2 İleri Düzey Teknikler

15.2.1 Özel Widget Geliştirme

Özel widget’lar, Experience Builder’ın işlevselliğini genişletmek için kullanılır. Örneğin, bir analiz aracı veya özel bir veri görselleştirme widget’ı oluşturabilirsiniz.

  • Adımlar:
    1. Experience Builder Developer Edition’da yeni bir widget oluşturun:npm run create-widget -- --name MyCustomWidget
      • Bu, client/your-extensions/widgets/MyCustomWidget klasörünü oluşturur.
    2. Widget kodunu geliştirin:// client/your-extensions/widgets/MyCustomWidget/Widget.tsx import { React, WidgetProps, useState } from \'jimu-core\'; import { JimuMapViewComponent, JimuMapView } from \'jimu-arcgis\'; export default function MyCustomWidget(props: WidgetProps) { const [point, setPoint] = useState({ x: 0, y: 0 }); const handleMapClick = (view: JimuMapView) => { view.view.on(\'click\', (event) => { setPoint({ x: event.mapPoint.x, y: event.mapPoint.y }); }); }; return ( <div style={{ padding: \'20px\' }}> <h3>Harita Tıklama Koordinatları</h3> <JimuMapViewComponent useMapWidgetId={props.useMapWidgetIds?.[0]} onActiveViewChange={handleMapClick} /> <p>X: {point.x}, Y: {point.y}</p> </div> ); }
    3. Widget’ı uygulamaya ekleyin:
      • Experience Builder arayüzünde Insert > Widget > Custom seçin.
    4. Test edin:
      • npm start ile geliştirme sunucusunu başlatın.
      • Widget’ın harita tıklamalarını doğru şekilde yakaladığını kontrol edin.
  • İpucu: Widget’larda hata yönetimi için try-catch kullanın:try { view.view.on(\'click\', (event) => { setPoint({ x: event.mapPoint.x, y: event.mapPoint.y }); }); } catch (error) { console.error(\'Map click error:\', error); }

15.2.2 3D Veri 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 ve gölgeler.
    • Afet yönetimi: Sel veya deprem simülasyonları.
  • Adımlar:
    1. Harita Widget’ı ekleyin, bir 3D sahne katmanı bağlayın (ör. ArcGIS Online’dan 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: 3D Bina Analizi Widget’ı// client/your-extensions/widgets/BuildingAnalysisWidget/Widget.tsx import { React, WidgetProps, useEffect } from \'jimu-core\'; import { JimuMapViewComponent, JimuMapView } from \'jimu-arcgis\'; import Graphic from \'esri/Graphic\'; import FeatureLayer from \'esri/layers/FeatureLayer\'; export default function BuildingAnalysisWidget(props: WidgetProps) { const analyzeBuildings = (view: JimuMapView) => { const layer = new FeatureLayer({ url: \'https://services.arcgis.com/buildings/FeatureServer/0\' }); view.view.map.add(layer); view.view.on(\'click\', (event) => { const graphic = new Graphic({ geometry: event.mapPoint, symbol: { type: \'simple-marker\', color: \'red\' } }); view.view.graphics.add(graphic); }); }; return ( <div> <h3>Bina Analizi</h3> <JimuMapViewComponent useMapWidgetId={props.useMapWidgetIds?.[0]} onActiveViewChange={analyzeBuildings} /> </div> ); }
    4. Performans Optimizasyonu:
      • Düşük poligonlu 3D modeller kullanın.
      • WebGL hata ayıklama araçlarıyla performansı kontrol edin.
  • Haziran 2025 Yeniliği: 3D sahne yükleme süreleri optimize edildi, yeni WebGL araçları eklendi.

15.2.3 Gerçek Zamanlı Veri Entegrasyonu

WebSocket veya IoT verileriyle gerçek zamanlı veri entegrasyonu, dinamik uygulamalar oluşturur.

  • Örnek: IoT Sensör Verisi Widget’ı// client/your-extensions/widgets/IoTWidget/Widget.tsx import { React, WidgetProps, useState, useEffect } from \'jimu-core\'; import { JimuMapViewComponent, JimuMapView } from \'jimu-arcgis\'; import Graphic from \'esri/Graphic\'; export default function IoTWidget(props: WidgetProps) { const [data, setData] = useState([]); useEffect(() => { const ws = new WebSocket(\'wss://api.example.com/iot-stream\'); ws.onmessage = (event) => { const newData = JSON.parse(event.data); setData(newData); }; return () => ws.close(); }, []); const updateMap = (view: JimuMapView) => { view.view.graphics.removeAll(); data.forEach(item => { const graphic = new Graphic({ geometry: { type: \'point\', x: item.lon, y: item.lat }, symbol: { type: \'simple-marker\', color: \'blue\' } }); view.view.graphics.add(graphic); }); }; return ( <div> <h3>IoT Verileri</h3> <JimuMapViewComponent useMapWidgetId={props.useMapWidgetIds?.[0]} onActiveViewChange={updateMap} /> </div> ); }
  • Adımlar:
    1. WebSocket veri kaynağını oluşturun.
    2. Harita widget’ına bağlayın.
    3. Verilerin gerçek zamanlı güncellendiğini test edin.
  • İpucu: Bağlantı kesintileri için yeniden bağlanma mekanizması ekleyin:ws.onerror = () => { setTimeout(() => ws.connect(), 5000); };

15.2.4 Yapay Zeka Entegrasyonu

AI, veri analizi ve tahmin için kullanılabilir (ör. afet risk tahmini).

  • Örnek: AI Tabanlı Risk Tahmin Widget’ı// client/your-extensions/widgets/AIRiskWidget/Widget.tsx import { React, WidgetProps, useState, useEffect } from \'jimu-core\'; import { request } from \'esri/request\'; export default function AIRiskWidget(props: WidgetProps) { const [riskLevel, setRiskLevel] = useState(\'Bilinmiyor\'); useEffect(() => { const fetchPrediction = async () => { try { const response = await request(\'https://your-ai-api.com/predict\', { method: \'POST\', body: JSON.stringify({ data: props.useDataSource[0].data }) }); setRiskLevel(response.data.riskLevel); } catch (error) { console.error(\'AI Prediction Error:\', error); } }; fetchPrediction(); }, [props.useDataSource]); return ( <div style={{ padding: \'20px\' }}> <h3>Risk Tahmini</h3> <p>Risk Seviyesi: {riskLevel}</p> </div> ); }
  • Adımlar:
    1. Bir AI modeli API’si oluşturun (ör. TensorFlow.js veya Python Flask).
    2. Experience Builder’a veri kaynağı olarak bağlayın.
    3. Widget’ta tahmin sonuçlarını görselleştirin.
  • Haziran 2025 Yeniliği: Yeni useAI hook’u ile AI entegrasyonu kolaylaştı.

15.2.5 Gelişmiş Erişilebilirlik

WCAG 2.1 uyumluluğu, engelli kullanıcılar için kapsayıcı bir deneyim sağlar.

  • Adımlar:
    1. ARIA Etiketleri ekleyin:<button aria-label=\"Analizi Başlat\" className=\"jimu-btn\">Başlat</button>
    2. Klavye Navigasyonu:import { useKeyboardNavigation } from \'jimu-core\'; useKeyboardNavigation({ onEnter: () => startAnalysis() });
    3. Renk Kontrastı: Minimum 4.5:1 oranı.
    4. Ekran Okuyucu Testi: NVDA veya VoiceOver ile test edin.
  • Araçlar: axe DevTools, WebAIM Contrast Checker.

15.3 Performans Optimizasyonu

İleri düzey uygulamalarda performans kritik öneme sahiptir.

  • Veri Optimizasyonu:
    • Gereksiz veri alanlarını kaldırın.
    • Örnek: SELECT id, geometry FROM data yerine tam tablo sorgulamaktan kaçının.
  • Widget Optimizasyonu:
    • Lazy-loading kullanın:const LazyWidget = React.lazy(() => import(\'./HeavyWidget\'));
  • Önbellekleme:import { request } from \'esri/request\'; request(\'https://services.arcgis.com/data\', { cache: \'force-cache\' });
  • 3D Optimizasyonu:
    • Düşük poligonlu modeller kullanın.
    • WebGL performansını izleyin.

15.4 Haziran 2025 Güncellemesindeki Yenilikler

  • AI Entegrasyonu:
    • Yeni useAI hook’u.
    • Otomatik veri ön işleme fonksiyonları.
  • 3D Performans:
    • Daha hızlı sahne yükleme.
    • Yeni WebGL optimizasyon araçları.
  • Erişilebilirlik:
    • Otomatik ARIA etiket oluşturma.
    • Geliştirilmiş klavye navigasyon desteği.
  • Geliştirici Araçları:
    • Yeni hata ayıklama raporları.
    • Otomatik test şablonları.

15.5 Pratik Örnekler

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

Örnek 1: Özel Harita Tıklama Widget’ı (Başlangıç Seviyesi)

  • Amaç: Haritaya tıklandığında koordinatları gösteren bir widget.
  • Widget’lar: Harita, Özel Widget.
  • Adımlar:
    1. Özel widget oluşturun:// client/your-extensions/widgets/ClickCoordinatesWidget/Widget.tsx import { React, WidgetProps, useState } from \'jimu-core\'; import { JimuMapViewComponent, JimuMapView } from \'jimu-arcgis\'; export default function ClickCoordinatesWidget(props: WidgetProps) { const [coords, setCoords] = useState({ x: 0, y: 0 }); const handleClick = (view: JimuMapView) => { view.view.on(\'click\', (event) => { setCoords({ x: event.mapPoint.x, y: event.mapPoint.y }); }); }; return ( <div style={{ padding: \'20px\' }}> <h3>Koordinatlar</h3> <JimuMapViewComponent useMapWidgetId={props.useMapWidgetIds?.[0]} onActiveViewChange={handleClick} /> <p>X: {coords.x}, Y: {coords.y}</p> </div> ); }
    2. Uygulamaya ekleyin.
    3. Preview ile test edin.
  • Sonuç: Harita tıklamalarını gösteren basit bir widget.
  • İpucu: Koordinat formatını kullanıcı dostu hale getirin (ör. derece cinsine çevirin).

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

  • Amaç: IoT sensör verilerini gerçek zamanlı olarak haritada görselleştirme.
  • Widget’lar: Harita, Grafik, Özel Widget.
  • Adımlar:
    1. Özel IoT widget’ı oluşturun:// client/your-extensions/widgets/IoTDataWidget/Widget.tsx import { React, WidgetProps, useState, useEffect } from \'jimu-core\'; import { JimuMapViewComponent, JimuMapView } from \'jimu-arcgis\'; import Graphic from \'esri/Graphic\'; export default function IoTDataWidget(props: WidgetProps) { const [data, setData] = useState([]); useEffect(() => { const ws = new WebSocket(\'wss://api.example.com/iot-stream\'); ws.onmessage = (event) => { const newData = JSON.parse(event.data); setData(newData); }; return () => ws.close(); }, []); const updateMap = (view: JimuMapView) => { view.view.graphics.removeAll(); data.forEach(item => { const graphic = new Graphic({ geometry: { type: \'point\', x: item.lon, y: item.lat }, symbol: { type: \'simple-marker\', color: \'green\' } }); view.view.graphics.add(graphic); }); }; return ( <div> <h3>IoT Sensör Verileri</h3> <JimuMapViewComponent useMapWidgetId={props.useMapWidgetIds?.[0]} onActiveViewChange={updateMap} /> </div> ); }
    2. Grafik Widget’ı ekleyin, sensör verileri için çizgi grafiği oluşturun.
    3. Preview ile test edin.
    4. Performans Optimizasyonu:
      • Verileri 10 saniyede bir güncelleyin.
      • Maksimum 100 veri noktası saklayın.
  • Sonuç: Gerçek zamanlı IoT verileri görselleştiren bir uygulama.
  • İpucu: WebSocket bağlantı hatalarını yönetmek için yeniden bağlanma mekanizması ekleyin.

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

  • Amaç: 3D sahnelerle ş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. Eylem:
      • Harita seçimi Tablo’yu güncelleyin.
      • Elevation Profile analizi Harita’da grafik eklesin.
    6. Özel 3D Widget:// client/your-extensions/widgets/3DAnalysisWidget/Widget.tsx import { React, WidgetProps, useEffect } from \'jimu-core\'; import { JimuMapViewComponent, JimuMapView } from \'jimu-arcgis\'; import Graphic from \'esri/Graphic\'; import FeatureLayer from \'esri/layers/FeatureLayer\'; export default function ThreeDAnalysisWidget(props: WidgetProps) { const add3DGraphics = (view: JimuMapView) => { const layer = new FeatureLayer({ url: \'https://services.arcgis.com/buildings/FeatureServer/0\' }); view.view.map.add(layer); view.view.on(\'click\', (event) => { const graphic = new Graphic({ geometry: event.mapPoint, symbol: { type: \'point-3d\', symbolLayers: [{ type: \'icon\', resource: { primitive: \'circle\' }, size: 10, color: \'red\' }] } }); view.view.graphics.add(graphic); }); }; return ( <div> <h3>3D Analiz</h3> <JimuMapViewComponent useMapWidgetId={props.useMapWidgetIds?.[0]} onActiveViewChange={add3DGraphics} /> </div> ); }
    7. Performans Optimizasyonu:
      • Düşük poligonlu modeller kullanın.
      • Önbellekleme ekleyin.
    8. Erişilebilirlik:
      • ARIA etiketleri ve klavye navigasyonu ekleyin.
    9. Preview ile test edin.
  • Sonuç: 3D şehir planlama analizi yapan bir pano.
  • İpucu: WebGL performansını Chrome DevTools ile izleyin.

Örnek 4: AI Tabanlı Afet Yönetimi Uygulaması (Uzman Seviyesi)

  • Amaç: Gerçek zamanlı IoT verileri ve AI tahminleriyle afet yönetimi uygulaması.
  • Widget’lar: Harita (3D), Analiz, Tablo, Özel AI Widget, Widget Kontrolcüsü.
  • Adımlar:
    1. IoT Veri Kaynağı oluşturun:// client/your-extensions/data-sources/IoTDisasterDataSource.ts import { DataSource, DataSourceConstructorOptions } from \'jimu-core\'; export default class IoTDisasterDataSource extends DataSource { private ws: WebSocket; constructor(options: DataSourceConstructorOptions) { super(options); this.ws = new WebSocket(\'wss://api.disaster-sensors.com/stream\'); } async ready() { 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 } }))); }; return []; } destroy() { this.ws.close(); } }
    2. AI Tahmin Widget’ı oluşturun:// client/your-extensions/widgets/AIDisasterWidget/Widget.tsx import { React, WidgetProps, useState, useEffect } from \'jimu-core\'; import { request } from \'esri/request\'; import { JimuMapViewComponent, JimuMapView } from \'jimu-arcgis\'; import Graphic from \'esri/Graphic\'; export default function AIDisasterWidget(props: WidgetProps) { const [predictions, setPredictions] = useState([]); useEffect(() => { const fetchPredictions = async () => { try { const response = await request(\'https://your-ai-api.com/predict\', { method: \'POST\', body: JSON.stringify({ data: props.useDataSource[0].data }) }); setPredictions(response.data); } catch (error) { console.error(\'AI Prediction Error:\', error); } }; fetchPredictions(); }, [props.useDataSource]); const updateMap = (view: JimuMapView) => { view.view.graphics.removeAll(); predictions.forEach(item => { const graphic = new Graphic({ geometry: { type: \'point\', x: item.lon, y: item.lat }, symbol: { type: \'simple-marker\', color: item.risk > 50 ? \'red\' : \'green\' } }); view.view.graphics.add(graphic); }); }; return ( <div style={{ padding: \'20px\' }}> <h3>AI Risk Tahmini</h3> <JimuMapViewComponent useMapWidgetId={props.useMapWidgetIds?.[0]} onActiveViewChange={updateMap} /> <ul> {predictions.map((item, index) => ( <li key={index}>Konum: ({item.lon}, {item.lat}), Risk: {item.risk}</li> ))} </ul> </div> ); }
    3. Harita Widget’ı (3D sahne), Analiz Widget’ı, Tablo Widget’ı ekleyin.
    4. Eylemler:
      • Harita seçimi Tablo’yu güncelleyin.
      • AI tahminleri Harita’da görselleştirilsin.
    5. Erişilebilirlik:
      • ARIA etiketleri ve klavye navigasyonu ekleyin.
      • Ekran okuyucu testi yapın.
    6. Performans:
      • Veri akışını 10 saniyede bir güncelleyin.
      • Önbellekleme kullanın.
    7. Preview ile test edin.
  • Sonuç: AI destekli bir afet yönetimi uygulaması.
  • İpucu: AI modelini düzenli olarak güncelleyin ve test edin.

15.6 En İyi Uygulamalar ve İpuçları

  • Özel Widget’lar:
    • Modüler ve yeniden kullanılabilir kod yazın.
    • Hata yönetimi için try-catch kullanın.
  • 3D Görselleştirme:
    • Düşük poligonlu modeller kullanın.
    • WebGL performansını izleyin.
  • Gerçek Zamanlı Veri:
    • Bağlantı kesintileri için yeniden bağlanma mekanizması ekleyin.
    • Veri boyutunu sınırlayın.
  • AI Entegrasyonu:
    • Modelin doğruluğunu düzenli test edin.
    • API çağrılarını optimize edin.
  • Erişilebilirlik:
    • WCAG 2.1 standartlarına uyun.
    • Klavye navigasyonu ve ekran okuyucu desteği sağlayın.

15.7 Sorun Giderme

  • Widget Hataları: Geliştirici konsolunda hata mesajlarını kontrol edin.
  • 3D Performans Sorunları: Düşük poligonlu modeller ve WebGL araçları kullanın.
  • Veri Entegrasyon Hataları: WebSocket veya API bağlantılarını test edin.
  • Erişilebilirlik Sorunları: axe DevTools ile tarama yapın.

15.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