Kategori Yok

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 8: Geliştirici Araçları ve Özelleştirme

Anahtar Noktalar

  • Geliştirici Araçları Nedir? ArcGIS Experience Builder’ın geliştirici sürümü, özel widget’lar, temalar ve entegrasyonlar oluşturmak için kullanılan araçlar ve API’lerdir.
  • Özelleştirme Türleri: Özel widget’lar, temalar, veri kaynakları ve iş akışları geliştirme.
  • Araçlar: ArcGIS API for JavaScript, Experience Builder Developer Edition, Node.js, TypeScript ve Visual Studio Code.
  • Gereksinimler: Geliştirici hesabı, Node.js kurulumu ve temel JavaScript bilgisi.
  • Haziran 2025 Güncellemesi: Yeni widget şablonları, geliştirilmiş hata ayıklama araçları ve erişilebilirlik API’leri.

Geliştirici Araçlarının ve Özelleştirmenin Önemi

ArcGIS Experience Builder’ın geliştirici araçları, standart özelliklerin ötesine geçerek tamamen özelleştirilmiş web uygulamaları oluşturmanızı sağlar. Özel widget’lar, temalar veya veri entegrasyonları ile uygulamanızı organizasyonunuzun ihtiyaçlarına göre uyarlayabilirsiniz. Örneğin:

  • Özel bir widget ile şirketinize özgü bir analiz aracı oluşturabilirsiniz.
  • ArcGIS API for JavaScript ile harita etkileşimlerini özelleştirebilirsiniz.
    Bu bölümde, geliştirici araçlarını, özelleştirme süreçlerini, kurulum adımlarını, kod örneklerini ve pratik uygulamaları Haziran 2025 sürümüne uygun olarak aşırı detaylı bir şekilde açıklayacağız. Hem yeni başlayanlar hem de ileri düzey geliştiriciler için adım adım rehberler, kod snippet’leri ve en iyi uygulamalar sunulacak.

8.1 Geliştirici Araçları ve Özelleştirme Nedir?

Geliştirici Araçları, ArcGIS Experience Builder Developer Edition ve ArcGIS API for JavaScript gibi araçlarla özel bileşenler oluşturmayı sağlayan bir ekosistemdir. Bu araçlar, standart widget’ların ve temaların ötesine geçerek uygulamanıza benzersiz işlevsellikler eklemenize olanak tanır.

Özelleştirme, Experience Builder’ın varsayılan özelliklerini genişletmek için yapılır:

  • Özel Widget’lar: Yeni işlevler eklemek (ör. özel bir analiz aracı).
  • Özel Temalar: Markanıza özgü görsel stiller oluşturma.
  • Özel Veri Kaynakları: Harici veri entegrasyonları.
  • Özel İş Akışları: Karmaşık kullanıcı etkileşimleri.

Neden Önemli?

  • Esneklik: Organizasyonunuzun ihtiyaçlarına özel çözümler sunar.
  • Entegrasyon: Harici sistemlerle (ör. CRM, IoT) bağlantı kurar.
  • Rekabet Avantajı: Benzersiz uygulamalarla kullanıcı deneyimini geliştirir.

8.2 Geliştirici Araçları ve Kurulumu

ArcGIS Experience Builder Developer Edition’ı kullanmak için aşağıdaki araçlar ve ortamlar gereklidir:

8.2.1 Gerekli Araçlar

  • ArcGIS Experience Builder Developer Edition:
  • Node.js: JavaScript çalışma ortamı (v16 veya üstü önerilir).
  • Visual Studio Code: Kod düzenleyici.
    • Eklentiler: ESLint, Prettier, TypeScript desteği.
  • ArcGIS API for JavaScript: Harita ve veri işlevselliği için (4.x sürümü).
  • ArcGIS Geliştirici Hesabı:
    • ArcGIS Online veya Enterprise’da geliştirici hesabı gerekir.
    • Hesap Oluşturma.

8.2.2 Developer Edition Kurulumu

  1. Node.js Kurulumu:
    • Node.js’i indirin ve kurun.
    • Terminalde node -v ve npm -v komutlarıyla sürümü kontrol edin.
  2. Experience Builder Developer Edition İndirme:
    • ArcGIS Geliştirici Portalından indirin.
    • ZIP dosyasını bir klasöre çıkarın (ör. C:\\ArcGIS-Experience-Builder).
  3. Ortam Kurulumu:
    • Terminalde, proje klasörüne gidin: cd C:\\ArcGIS-Experience-Builder.
    • Gerekli bağımlılıkları yükleyin: npm install.
  4. Geliştirme Sunucusunu Başlatma:
    • npm start komutunu çalıştırın.
    • Tarayıcıda https://localhost:3001 adresine gidin.
  5. ArcGIS Hesabı ile Oturum Açma:
    • Geliştirme ortamında ArcGIS Online veya Enterprise hesabınızla oturum açın.
    • Bu, veri kaynaklarına ve API’lere erişim sağlar.

8.2.3 Visual Studio Code Yapılandırması

  • Eklentiler:
    • ESLint: Kod kalitesini kontrol eder.
    • Prettier: Kod formatlamasını otomatikleştirir.
    • ArcGIS JS API Snippets: Hızlı kod tamamlama.
  • Ayarlar:
    • TypeScript desteği için tsconfig.json dosyasını kontrol edin.
    • .eslintrc dosyasında linting kurallarını özelleştirin.

8.3 Özelleştirme Türleri

ArcGIS Experience Builder’da özelleştirme, dört ana alanda yapılır: widget’lar, temalar, veri kaynakları ve iş akışları.

8.3.1 Özel Widget Geliştirme

Özel widget’lar, Experience Builder’ın varsayılan widget’larına yeni işlevler ekler. Örneğin, bir IoT sensör verisi görselleştirme widget’ı oluşturabilirsiniz.

  • Adımlar:
    1. Yeni Widget Oluşturma:
      • Terminalde, proje klasöründe: npm run create-widget -- --name MyCustomWidget.
      • Bu, client/your-extensions/widgets/MyCustomWidget klasörünü oluşturur.
    2. Widget Yapısı:
      • manifest.json: Widget’ın meta verileri (ad, açıklama, özellikler).
      • Widget.tsx: Ana React bileşeni (TypeScript).
      • setting/Setting.tsx: Widget ayar paneli.
      • config.json: Varsayılan yapılandırma.
    3. Kodlama:
      • Örnek: Basit bir “Merhaba Dünya” widget’ı.// client/your-extensions/widgets/MyCustomWidget/Widget.tsx import { React, WidgetProps } from \'jimu-core\'; export default function MyCustomWidget(props: WidgetProps) { return ( <div className=\"my-widget\" style={{ padding: \'20px\' }}> <h3>Merhaba Dünya!</h3> <p>Bu benim özel widget’ım.</p> </div> ); }
    4. Widget’ı Test Etme:
      • npm start ile geliştirme sunucusunu çalıştırın.
      • Experience Builder’da Insert widget > MyCustomWidget seçeneğini ekleyin.
    5. ArcGIS API Entegrasyonu:
      • Harita ile etkileşim için ArcGIS API for JavaScript kullanın.import MapView from \'esri/views/MapView\'; import WebMap from \'esri/WebMap\'; import { React, WidgetProps, useEffect } from \'jimu-core\'; export default function MyMapWidget(props: WidgetProps) { useEffect(() => { const webmap = new WebMap({ portalItem: { id: \'your-webmap-id\' } }); const view = new MapView({ container: \'mapDiv\', map: webmap }); return () => view.destroy(); }, []); return <div id=\"mapDiv\" style={{ width: \'100%\', height: \'400px\' }} />; }
    6. Widget’ı Paylaşma:
      • Widget’ı bir ZIP dosyası olarak paketleyin: npm run build.
      • ArcGIS Online/Enterprise’a yükleyin ve diğer uygulamalarda kullanın.

8.3.2 Özel Tema Geliştirme

Özel temalar, uygulamanızın görsel kimliğini markanıza uygun hale getirir.

  • Adımlar:
    1. Yeni Tema Oluşturma:
      • Terminalde: npm run create-theme -- --name MyCustomTheme.
      • Bu, client/your-extensions/themes/MyCustomTheme klasörünü oluşturur.
    2. Tema Yapısı:
      • manifest.json: Tema meta verileri.
      • variables.json: Renk, yazı tipi ve stil tanımları.
      • styles/style.css: Özel CSS kuralları.
    3. Örnek Tema:// client/your-extensions/themes/MyCustomTheme/variables.json { \"primary\": \"#007bff\", \"secondary\": \"#6c757d\", \"fontFamily\": \"Roboto, sans-serif\", \"fontSize\": \"16px\" } /* client/your-extensions/themes/MyCustomTheme/styles/style.css */ .jimu-widget { background-color: #f8f9fa; border-radius: 5px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }
    4. Tema Uygulama:
      • Experience Builder’da Settings > Theme > MyCustomTheme seçin.
    5. Test Etme:
      • npm start ile temayı canlı test edin.

8.3.3 Özel Veri Kaynakları

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

  • Adımlar:
    1. Veri Kaynağı Oluşturma:
      • client/your-extensions/data-sources klasöründe yeni bir veri kaynağı oluşturun.
      • Örnek: REST API’den veri çeken bir veri kaynağı.// client/your-extensions/data-sources/MyDataSource.ts import { DataSource, DataSourceConstructorOptions } from \'jimu-core\'; export default class MyDataSource extends DataSource { constructor(options: DataSourceConstructorOptions) { super(options); } async ready() { const response = await fetch(\'https://api.example.com/data\'); const data = await response.json(); return data; } }
    2. Veri Kaynağını Kullanma:
      • Veri Paneli’nde özel veri kaynağını ekleyin.
      • Widget’lara bağlayın (ör. Tablo, Grafik).

8.3.4 Özel İş Akışları

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

  • Adımlar:
    1. İş Akışı Tanımlama:
      • client/your-extensions/workflows klasöründe bir iş akışı oluşturun.
      • Örnek: Kullanıcı bir konuma tıkladığında analiz yapan bir iş akışı.// client/your-extensions/workflows/MyWorkflow.ts import { Workflow, WorkflowContext } from \'jimu-core\'; export default class MyWorkflow extends Workflow { async execute(context: WorkflowContext) { const { mapView, data } = context; const analysisResult = await performAnalysis(data); mapView.popup.open({ title: \'Analiz Sonucu\', content: JSON.stringify(analysisResult) }); } }
    2. İş Akışını Tetikleme:
      • Widget’tan iş akışını çağırın (ör. Harita tıklaması).

8.4 ArcGIS API for JavaScript ile Entegrasyon

ArcGIS API for JavaScript, harita ve veri işlevselliği için güçlü bir araçtır. Experience Builder ile entegre ederek özelleştirilmiş harita deneyimleri oluşturabilirsiniz.

  • Örnek: Harita Widget’ına Özel Katman Ekleme: // 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/your-service-url/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 (ör. IoT verileri).
    • Dinamik pop-up’lar.
    • Analiz araçları (ör. buffer, spatial query).

8.5 Haziran 2025 Güncellemesindeki Yenilikler

  • Yeni Widget Şablonları:
    • IoT veri görselleştirme şablonu.
    • 3D analiz widget şablonu.
  • Hata Ayıklama Araçları:
    • Geliştirici konsolunda daha ayrıntılı hata mesajları.
    • Canlı widget önizleme desteği.
  • Erişilebilirlik API’leri:
    • Klavye navigasyonu için yeni hook’lar (ör. useKeyboardNavigation).
    • Ekran okuyucu uyumluluğu için ARIA etiketleri.
  • Performans İyileştirmeleri:
    • Daha hızlı widget derleme süresi.
    • Optimize edilmiş veri kaynağı entegrasyonu.

8.6 Pratik Örnekler

Aşağıda, basitten zora dört pratik örnekle geliştirici araçlarını ve özelleştirmeleri açıklayacağız.

Örnek 1: Basit Metin Widget’ı (Başlangıç Seviyesi)

  • Amaç: Kullanıcıya özelleştirilebilir bir metin gösteren widget oluşturmak.
  • Adımlar:
    1. npm run create-widget -- --name HelloWorldWidget
    2. Widget.tsx dosyasını düzenleyin:import { React, WidgetProps } from \'jimu-core\'; export default function HelloWorldWidget(props: WidgetProps) { const { config } = props; return ( <div style={{ padding: \'20px\', backgroundColor: \'#f8f9fa\' }}> <h3>{config.text || \'Merhaba Dünya!\'}</h3> </div> ); }
    3. setting/Setting.tsx dosyasını düzenleyin:import { React, WidgetSettingProps } from \'jimu-core\'; export default function HelloWorldWidgetSetting(props: WidgetSettingProps) { const { config, onSettingChange } = props; return ( <div> <label>Metin:</label> <input type=\"text\" value={config.text || \'\'} onChange={(e) => onSettingChange({ id: props.id, config: { ...config, text: e.target.value } })} /> </div> ); }
    4. npm start ile test edin.
    5. Experience Builder’da widget’ı ekleyin ve metni yapılandırın.
  • Sonuç: Kullanıcı tarafından özelleştirilebilir bir metin widget’ı.

Örnek 2: Harita Katman Kontrol Widget’ı (Orta Seviye)

  • Amaç: Haritadaki katmanları açıp kapatan bir widget oluşturmak.
  • Adımlar:
    1. npm run create-widget -- --name LayerControlWidget
    2. Widget.tsx dosyasını düzenleyin:import { React, WidgetProps, useEffect, useState } from \'jimu-core\'; import MapView from \'esri/views/MapView\'; import { JimuMapViewComponent, JimuMapView } from \'jimu-arcgis\'; export default function LayerControlWidget(props: WidgetProps) { const [mapView, setMapView] = useState<JimuMapView | null>(null); const [layers, setLayers] = useState<any[]>([]); useEffect(() => { if (mapView) { setLayers(mapView.map.layers.toArray()); } }, [mapView]); const toggleLayer = (layerId: string) => { const layer = mapView.map.findLayerById(layerId); layer.visible = !layer.visible; }; return ( <div style={{ padding: \'10px\' }}> <JimuMapViewComponent useMapWidgetId={props.useMapWidgetIds?.[0]} onActiveViewChange={setMapView} /> <h4>Katmanlar</h4> {layers.map((layer) => ( <div key={layer.id}> <input type=\"checkbox\" checked={layer.visible} onChange={() => toggleLayer(layer.id)} /> <span>{layer.title}</span> </div> ))} </div> ); }
    3. npm start ile test edin.
    4. Harita widget’ıyla birlikte kullanın.
  • Sonuç: Harita katmanlarını kontrol eden bir widget.

Örnek 3: IoT Veri Görselleştirme Widget’ı (İleri Seviye)

  • Amaç: Harici bir IoT API’sinden veri çeken ve grafik gösteren bir widget oluşturmak.
  • Adımlar:
    1. npm run create-widget -- --name IoTWidget
    2. Widget.tsx dosyasını düzenleyin:import { React, WidgetProps, useEffect, useState } from \'jimu-core\'; import { Chart } from \'react-chartjs-2\'; import \'chart.js/auto\'; export default function IoTWidget(props: WidgetProps) { const [data, setData] = useState<any[]>([]); useEffect(() => { const fetchData = async () => { const response = await fetch(\'https://api.example.com/iot-data\'); const result = await response.json(); setData(result); }; fetchData(); }, []); const chartData = { labels: data.map((d) => d.timestamp), datasets: [ { label: \'Sıcaklık\', data: data.map((d) => d.temperature), borderColor: \'#007bff\', fill: false } ] }; return ( <div style={{ padding: \'20px\' }}> <h3>IoT Verileri</h3> <Chart type=\"line\" data={chartData} /> </div> ); }
    3. package.json’a bağımlılık ekleyin:\"dependencies\": { \"react-chartjs-2\": \"^5.0.0\", \"chart.js\": \"^4.0.0\" }
    4. npm install ile bağımlılıkları yükleyin.
    5. npm start ile test edin.
  • Sonuç: IoT verilerini görselleştiren bir widget.

Örnek 4: 3D Analiz Widget’ı (Uzman Seviyesi)

  • Amaç: 3D haritada yükseklik analizi yapan bir widget oluşturmak.
  • Adımlar:
    1. npm run create-widget -- --name ElevationAnalysisWidget
    2. Widget.tsx dosyasını düzenleyin:import { React, WidgetProps, useEffect, useState } from \'jimu-core\'; import SceneView from \'esri/views/SceneView\'; import WebScene from \'esri/WebScene\'; import ElevationProfile from \'esri/widgets/ElevationProfile\'; import { JimuMapViewComponent, JimuMapView } from \'jimu-arcgis\'; export default function ElevationAnalysisWidget(props: WidgetProps) { const [sceneView, setSceneView] = useState<JimuMapView | null>(null); useEffect(() => { if (sceneView) { const elevationProfile = new ElevationProfile({ view: sceneView.view as SceneView, profiles: [{ type: \'ground\' }] }); sceneView.view.ui.add(elevationProfile, \'top-right\'); return () => elevationProfile.destroy(); } }, [sceneView]); return ( <div> <JimuMapViewComponent useMapWidgetId={props.useMapWidgetIds?.[0]} onActiveViewChange={setSceneView} /> <div style={{ padding: \'10px\' }}> <h3>Yükseklik Analizi</h3> <p>Haritada bir yol çizin, yükseklik profili otomatik hesaplanır.</p> </div> </div> ); }
    3. npm start ile test edin.
    4. 3D harita widget’ıyla birlikte kullanın.
  • Sonuç: 3D haritada yükseklik analizi yapan bir widget.

8.7 En İyi Uygulamalar ve İpuçları

  • Modüler Kod: Widget’ları küçük, yeniden kullanılabilir bileşenlere ayırın.
  • Hata Ayıklama: Konsolda hata mesajlarını düzenli kontrol edin.
  • Erişilebilirlik: ARIA etiketleri ve klavye navigasyonu ekleyin.
  • Performans: Büyük veri setlerinde önbellekleme kullanın.
  • Dokümantasyon: Widget’lar için kullanım kılavuzu oluşturun.

8.8 Sorun Giderme

  • Widget Yüklenmiyor: manifest.json dosyasını kontrol edin.
  • API Hatası: ArcGIS API sürüm uyumluluğunu doğrulayın (4.x).
  • Performans Sorunları: Gereksiz veri çağrılarını kaldırın.
  • Erişilebilirlik Sorunları: Klavye navigasyonu ve ARIA etiketlerini test edin.

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