Kategori Yok

Bölüm 10: Menü ve Araç Çubuğu 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 10: Entegrasyon ve Harici Sistemlerle Bağlantı

Anahtar Noktalar

  • Entegrasyon Nedir? ArcGIS Experience Builder’ın harici sistemler, veri kaynakları ve API’lerle bağlantı kurarak daha kapsamlı ve işlevsel uygulamalar oluşturmasını sağlama süreci.
  • Harici Sistemler: REST API’ler, WebSocket’lar, IoT platformları, CRM sistemleri, veritabanları ve diğer ArcGIS ürünleri.
  • Bağlantı Yöntemleri: Özel veri kaynakları, ArcGIS API for JavaScript, Webhook’lar ve özel widget’lar.
  • Erişilebilirlik ve Güvenlik: Harici sistemlerle güvenli bağlantı ve WCAG 2.1 uyumluluğu.
  • Haziran 2025 Güncellemesi: Yeni WebSocket desteği, geliştirilmiş API entegrasyon araçları ve erişilebilirlik iyileştirmeleri.

Entegrasyon ve Harici Sistemlerle Bağlantının Önemi

Entegrasyon, ArcGIS Experience Builder uygulamalarını harici veri kaynakları ve sistemlerle birleştirerek daha dinamik, gerçek zamanlı ve özelleştirilmiş çözümler sunar. Örneğin:

  • Bir IoT platformundan gerçek zamanlı sensör verilerini haritaya entegre edebilirsiniz.
  • Bir CRM sisteminden müşteri verilerini analiz için Experience Builder’a bağlayabilirsiniz.
    Bu bölüm, entegrasyon yöntemlerini, harici sistemlerle bağlantı kurma adımlarını, güvenlik ve erişilebilirlik uygulamalarını, kod örneklerini ve pratik senaryoları Haziran 2025 sürümüne uygun olarak süper ayrıntılı bir şekilde açıklayacak. Yeni başlayanlardan uzman geliştiricilere kadar herkes için rehber niteliğinde bir içerik sunulacak.

10.1 Entegrasyon ve Harici Sistemler Nedir?

Entegrasyon, ArcGIS Experience Builder’ın harici veri kaynakları, API’ler, veritabanları veya diğer sistemlerle iletişim kurmasını sağlayan süreçtir. Bu, uygulamanıza ek işlevsellik, gerçek zamanlı veri akışı ve özelleştirilmiş iş akışları ekler.

Harici Sistemler, Experience Builder ile entegre edilebilecek sistemlerdir:

  • REST API’ler: Harici veri kaynaklarından veri çekme (ör. hava durumu API’si).
  • WebSocket’lar: Gerçek zamanlı veri akışı (ör. IoT sensörleri).
  • Veritabanları: SQL veya NoSQL veritabanlarından veri alma.
  • CRM ve ERP Sistemleri: Salesforce, SAP gibi platformlarla entegrasyon.
  • ArcGIS Ürünleri: ArcGIS Online, ArcGIS Enterprise, ArcGIS Pro.

Neden Önemli?

  • Dinamik Veri: Gerçek zamanlı verilerle uygulamaları zenginleştirir.
  • Özelleştirme: Organizasyonun ihtiyaçlarına özel çözümler sunar.
  • Verimlilik: Manuel veri aktarımını ortadan kaldırır.
  • Güvenlik: Kimlik doğrulama ve şifreleme ile güvenli bağlantılar sağlar.

10.2 Entegrasyon Yöntemleri

ArcGIS Experience Builder, harici sistemlerle bağlantı kurmak için çeşitli yöntemler sunar. Aşağıda her biri detaylıca açıklanmıştır:

10.2.1 Özel Veri Kaynakları

Harici veri kaynaklarını entegre etmek için özel veri kaynakları oluşturabilirsiniz.

  • Kullanım Alanları:
    • REST API’lerden veri çekme.
    • WebSocket ile gerçek zamanlı veri akışı.
    • Veritabanı bağlantıları.
  • Örnek: REST API’den Veri Çekme// client/your-extensions/data-sources/RestDataSource.ts import { DataSource, DataSourceConstructorOptions } from \'jimu-core\'; export default class RestDataSource extends DataSource { constructor(options: DataSourceConstructorOptions) { super(options); } async ready() { const response = await fetch(\'https://api.example.com/data\', { headers: { Authorization: `Bearer ${this.config.apiKey}` } }); const data = await response.json(); return data.map(item => ({ geometry: { type: \'point\', x: item.longitude, y: item.latitude }, attributes: { id: item.id, value: item.value } })); } }
  • Adımlar:
    1. Experience Builder Developer Edition’da yeni bir veri kaynağı oluşturun.
    2. Veri Paneli’nde veri kaynağını ekleyin.
    3. Harita, Tablo veya Grafik widget’ına bağlayın.
  • Güvenlik:
    • API anahtarlarını config.json içinde saklayın.
    • HTTPS kullanın.

10.2.2 WebSocket ile Gerçek Zamanlı Veri

WebSocket’lar, IoT veya diğer gerçek zamanlı veri akışları için idealdir.

  • Örnek: IoT Sensör Verisi// client/your-extensions/data-sources/IoTWebSocketDataSource.ts import { DataSource, DataSourceConstructorOptions } from \'jimu-core\'; export default class IoTWebSocketDataSource extends DataSource { private ws: WebSocket; constructor(options: DataSourceConstructorOptions) { super(options); this.ws = new WebSocket(\'wss://api.example.com/iot-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: { temperature: item.temp, timestamp: item.time } }))); }; return []; } destroy() { this.ws.close(); } }
  • Adımlar:
    1. WebSocket veri kaynağını oluşturun.
    2. Harita veya Grafik widget’ına bağlayın.
    3. Veri akışını test edin.
  • Haziran 2025 Yeniliği: RealTimeStream Arcade fonksiyonu ile WebSocket entegrasyonu kolaylaştı.

10.2.3 ArcGIS API for JavaScript ile Entegrasyon

ArcGIS API for JavaScript, harita ve veri işlevselliği için güçlü bir araçtır.

  • Örnek: Özel Harita Widget’ı// 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\'; import FeatureLayer from \'esri/layers/FeatureLayer\'; export default function CustomMapWidget(props: WidgetProps) { useEffect(() => { const webmap = new WebMap({ portalItem: { id: \'your-webmap-id\' } }); const layer = new FeatureLayer({ url: \'https://services.arcgis.com/external-api/FeatureServer/0\' }); webmap.add(layer); const view = new MapView({ container: \'mapDiv\', map: webmap }); return () => view.destroy(); }, []); return <div id=\"mapDiv\" style={{ width: \'100%\', height: \'600px\' }} />; }
  • Kullanım Alanları:
    • Özel katmanlar ekleme.
    • Dinamik pop-up’lar oluşturma.
    • Analiz araçları (ör. buffer, spatial query).

10.2.4 Webhook’lar ile Entegrasyon

Webhook’lar, harici sistemlerden olay tabanlı bildirimler almak için kullanılır.

  • Adımlar:
    1. ArcGIS Online/Enterprise’da bir Webhook oluşturun.
    2. Webhook URL’sini harici sisteme bağlayın (ör. Zapier, Integromat).
    3. Olayları Experience Builder’da işlemek için özel bir veri kaynağı oluşturun.
  • Örnek: Yeni bir veri eklendiğinde Tablo widget’ını güncelleme.

10.2.5 Veritabanı Entegrasyonu

SQL veya NoSQL veritabanlarından veri çekmek için ArcGIS REST API veya özel veri kaynakları kullanılır.

  • Örnek: PostgreSQL Entegrasyonu// client/your-extensions/data-sources/PostgresDataSource.ts import { DataSource, DataSourceConstructorOptions } from \'jimu-core\'; export default class PostgresDataSource extends DataSource { constructor(options: DataSourceConstructorOptions) { super(options); } async ready() { const response = await fetch(\'https://your-server.com/api/postgres\', { method: \'POST\', body: JSON.stringify({ query: \'SELECT * FROM locations\' }), headers: { \'Content-Type\': \'application/json\' } }); const data = await response.json(); return data.map(item => ({ geometry: { type: \'point\', x: item.lon, y: item.lat }, attributes: item })); } }
  • Adımlar:
    1. Veritabanı API’sini oluşturun (ör. Node.js ile).
    2. Experience Builder’a veri kaynağı olarak ekleyin.
    3. Widget’lara bağlayın.

10.3 Güvenlik ve Erişilebilirlik

10.3.1 Güvenlik

  • Kimlik Doğrulama:
    • OAuth 2.0 ile güvenli API erişimi.
    • Örnek: ArcGIS API for JavaScript ile OAuth.import esriId from \'esri/identity/IdentityManager\'; esriId.registerToken({ server: \'https://services.arcgis.com\', token: \'your-access-token\' });
  • Veri Şifreleme:
    • HTTPS kullanarak veri aktarımını şifreleyin.
    • API anahtarlarını ortam değişkenlerinde saklayın.
  • Erişim Kontrolü:
    • Harici veri kaynakları için paylaşım ayarlarını doğrulayın.
    • Organizasyon veya grup tabanlı paylaşım kullanın.

10.3.2 Erişilebilirlik

  • WCAG 2.1 Uyumluluğu:
    • ARIA Etiketleri:<div role=\"region\" aria-label=\"IoT Veri Görselleştirme\">...</div>
    • Klavye Navigasyonu:
      • Haziran 2025 güncellemesiyle gelen useKeyboardNavigation hook’u.import { useKeyboardNavigation } from \'jimu-core\'; useKeyboardNavigation({ onEnter: () => triggerAction() });
    • Renk Kontrastı: Minimum 4.5:1 oranı.
  • Ekran Okuyucu Desteği:
    • Widget’lara açıklayıcı metinler ekleyin.
    • Örnek: Harita widget’ında aria-describedby.

10.4 Haziran 2025 Güncellemesindeki Yenilikler

  • WebSocket Desteği:
    • RealTimeStream Arcade fonksiyonu.
    • Optimize edilmiş WebSocket performansı.
  • API Entegrasyon Araçları:
    • Yeni useExternalData hook’u.
    • Otomatik hata yönetimi.
  • Erişilebilirlik:
    • Yeni useAccessibility hook’u.
    • Otomatik ARIA etiket oluşturma.
  • Performans:
    • Harici veri yükleme için önbellekleme iyileştirmeleri.
    • Daha hızlı API çağrıları.

10.5 Pratik Örnekler

Aşağıda, basitten zora dört pratik örnekle entegrasyon yöntemlerini açıklayacağız.

Örnek 1: Hava Durumu API Entegrasyonu (Başlangıç Seviyesi)

  • Amaç: Hava durumu verilerini haritaya entegre eden bir uygulama.
  • Widget’lar: Harita, Metin, Özel Veri Kaynağı.
  • Adımlar:
    1. Özel veri kaynağı oluşturun:// client/your-extensions/data-sources/WeatherDataSource.ts import { DataSource, DataSourceConstructorOptions } from \'jimu-core\'; export default class WeatherDataSource extends DataSource { constructor(options: DataSourceConstructorOptions) { super(options); } async ready() { const response = await fetch(\'https://api.openweathermap.org/data/2.5/weather?q=London&appid=your-api-key\'); const data = await response.json(); return [{ geometry: { type: \'point\', x: data.coord.lon, y: data.coord.lat }, attributes: { temperature: data.main.temp, description: data.weather[0].description } }]; } }
    2. Harita Widget’ı ekleyin, veri kaynağını bağlayın.
    3. Metin Widget’ı ekleyin, hava durumu detaylarını gösterin:// client/your-extensions/widgets/WeatherWidget/Widget.tsx import { React, WidgetProps, useDataSource } from \'jimu-core\'; export default function WeatherWidget(props: WidgetProps) { const { data } = useDataSource(props.useDataSource[0]); return ( <div style={{ padding: \'20px\' }}> <h3>Hava Durumu</h3> <p>Sıcaklık: {data?.[0]?.attributes.temperature}°C</p> <p>Açıklama: {data?.[0]?.attributes.description}</p> </div> ); }
    4. Preview ile test edin.
  • Sonuç: Hava durumu verilerini gösteren bir harita uygulaması.
  • İpucu: API anahtarını güvenli bir şekilde saklayın.

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

  • Amaç: Gerçek zamanlı trafik verilerini harita ve grafikte görselleştirme.
  • Widget’lar: Harita, Grafik, Özel Veri Kaynağı (WebSocket).
  • Adımlar:
    1. WebSocket veri kaynağı oluşturun:// client/your-extensions/data-sources/TrafficDataSource.ts import { DataSource, DataSourceConstructorOptions } from \'jimu-core\'; export default class TrafficDataSource extends DataSource { private ws: WebSocket; constructor(options: DataSourceConstructorOptions) { super(options); this.ws = new WebSocket(\'wss://api.traffic-data.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: { speed: item.speed, timestamp: item.time } }))); }; return []; } destroy() { this.ws.close(); } }
    2. Harita Widget’ı ekleyin, veri kaynağını bağlayın.
    3. Grafik Widget’ı ekleyin, hız verileri için çizgi grafiği oluşturun.
    4. Optimizasyon:
      • Veri akışını 5 saniyede bir güncelleyin.
      • Maksimum 1000 veri noktası saklayın.
    5. Preview ile test edin.
  • Sonuç: Gerçek zamanlı trafik verileri görselleştiren bir uygulama.
  • İpucu: WebSocket bağlantı hatalarını yönetmek için try-catch kullanın.

Örnek 3: CRM Entegrasyonu (İleri Seviye)

  • Amaç: Salesforce’tan müşteri verilerini haritaya entegre eden bir uygulama.
  • Widget’lar: Harita, Tablo, Özel Veri Kaynağı.
  • Adımlar:
    1. Salesforce API veri kaynağı oluşturun:// client/your-extensions/data-sources/SalesforceDataSource.ts import { DataSource, DataSourceConstructorOptions } from \'jimu-core\'; export default class SalesforceDataSource extends DataSource { constructor(options: DataSourceConstructorOptions) { super(options); } async ready() { const response = await fetch(\'https://your-salesforce-instance.com/services/data/v52.0/query?q=SELECT+Id,Name,Location__c+FROM+Account\', { headers: { Authorization: `Bearer ${this.config.oauthToken}` } }); const data = await response.json(); return data.records.map(record => ({ geometry: JSON.parse(record.Location__c), attributes: { id: record.Id, name: record.Name } })); } }
    2. Harita Widget’ı ekleyin, veri kaynağını bağlayın.
    3. Tablo Widget’ı ekleyin, müşteri verilerini listeleyin.
    4. Action: Harita seçimi Tablo’yu güncelleyin.
    5. Güvenlik: OAuth token’ını güvenli bir şekilde saklayın.
    6. Preview ile test edin.
  • Sonuç: Salesforce verilerini görselleştiren bir uygulama.
  • İpucu: OAuth yenileme token’larını yönetmek için bir mekanizma kurun.

Örnek 4: Afet Yönetimi için IoT ve Veritabanı Entegrasyonu (Uzman Seviyesi)

  • Amaç: IoT sensör verileri ve PostgreSQL veritabanından gelen afet verilerini birleştiren bir uygulama.
  • Widget’lar: Harita (3D), Analiz, Tablo, Widget Kontrolcüsü, Akordeon.
  • Adımlar:
    1. IoT Veri Kaynağı oluşturun (WebSocket):// 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, timestamp: item.time } }))); }; return []; } destroy() { this.ws.close(); } }
    2. PostgreSQL Veri Kaynağı oluşturun:// client/your-extensions/data-sources/PostgresDisasterDataSource.ts import { DataSource, DataSourceConstructorOptions } from \'jimu-core\'; export default class PostgresDisasterDataSource extends DataSource { constructor(options: DataSourceConstructorOptions) { super(options); } async ready() { const response = await fetch(\'https://your-server.com/api/disaster-data\', { method: \'POST\', body: JSON.stringify({ query: \'SELECT * FROM disaster_reports WHERE risk_score > 50\' }), headers: { \'Content-Type\': \'application/json\' } }); const data = await response.json(); return data.map(item => ({ geometry: { type: \'point\', x: item.lon, y: item.lat }, attributes: item })); } }
    3. Harita Widget’ı (3D sahne) ekleyin, her iki veri kaynağını bağlayın.
    4. Analiz Widget’ı ekleyin (Line of Sight).
    5. Tablo Widget’ı ekleyin, PostgreSQL verilerini listeleyin.
    6. Widget Kontrolcüsü ile Filtre ve Özellik Bilgisi widget’larını kontrol edin.
    7. Action:
      • IoT verileri Harita’yı güncelleyin.
      • PostgreSQL verileri Tablo’yu güncelleyin.
      • Harita seçimi Analiz ve Tablo’yu tetiklesin.
    8. Optimizasyon:
      • Veri akışını 10 saniyede bir güncelleyin.
      • PostgreSQL sorgularında indekslenmiş alanlar kullanın.
    9. Güvenlik: API ve WebSocket için HTTPS ve OAuth kullanın.
    10. Preview ile test edin.
  • Sonuç: IoT ve veritabanı verilerini birleştiren bir afet yönetimi uygulaması.
  • İpucu: Büyük veri setleri için önbellekleme ve sıkıştırma kullanın.

10.6 En İyi Uygulamalar ve İpuçları

  • Modülerlik: Veri kaynaklarını ve widget’ları yeniden kullanılabilir hale getirin.
  • Hata Yönetimi: API çağrılarında try-catch blokları kullanın.
  • Performans: Önbellekleme ve veri sıkıştırma ile yükleme sürelerini azaltın.
  • Erişilebilirlik: WCAG 2.1 standartlarına uyun, ARIA etiketleri ekleyin.
  • Dokümantasyon: Entegrasyonlar için ayrıntılı kılavuzlar hazırlayın.

10.7 Sorun Giderme

  • API Hataları: API anahtarlarını ve URL’leri kontrol edin.
  • WebSocket Bağlantı Sorunları: Bağlantı kesintilerini yönetmek için yeniden bağlanma mekanizması kurun.
  • 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.

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