Kategori Yok

Bölüm 13: Şablonlar ve Temalar

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 13: Şablonlar ve Temalar

Anahtar Noktalar

  • Şablonlar Nedir? ArcGIS Experience Builder’da önceden tasarlanmış, özelleştirilebilir uygulama düzenleri ve yapılandırmalar.
  • Temalar Nedir? Uygulamanın görsel stilini (renkler, yazı tipleri, düzenler) tanımlayan özelleştirilebilir tasarım setleri.
  • Kullanım Alanları: Hızlı prototipleme, marka uyumluluğu, kullanıcı deneyimi optimizasyonu.
  • Araçlar: Experience Builder arayüzü, Developer Edition, ArcGIS API for JavaScript, CSS ve TypeScript.
  • Erişilebilirlik: WCAG 2.1 standartlarına uygun temalar ve şablonlar.
  • Haziran 2025 Güncellemesi: Yeni şablon kütüphanesi, gelişmiş tema özelleştirme araçları ve erişilebilirlik iyileştirmeleri.

Şablonlar ve Temaların Önemi

Şablonlar ve temalar, ArcGIS Experience Builder uygulamalarının hızlı bir şekilde oluşturulmasını, markanıza uygun görsel bir kimlik kazandırılmasını ve kullanıcı dostu bir deneyim sunulmasını sağlar. Örneğin:

  • Bir şehir planlama şablonu, harita ve tablo widget’larını önceden yapılandırılmış olarak sunar.
  • Özel bir tema, organizasyonunuzun renk şemasına ve logosuna uygun bir arayüz sağlar.
    Bu bölüm, şablonların ve temaların kullanımını, oluşturma ve özelleştirme süreçlerini, erişilebilirlik uygulamalarını, kod örneklerini ve pratik senaryoları Haziran 2025 sürümüne uygun olarak tüm detaylarıyla açıklayacak. Yeni başlayanlardan uzman geliştiricilere kadar herkes için kapsamlı bir rehber sunulacak.

13.1 Şablonlar ve Temalar Nedir?

Şablonlar, ArcGIS Experience Builder’da önceden tasarlanmış uygulama düzenleridir. Her şablon, belirli bir kullanım senaryosu için optimize edilmiş widget’lar, eylemler ve veri kaynakları içerir. Örneğin:

  • Kamu Bilgilendirme Şablonu: Harita, lejant ve arama widget’ları.
  • Analitik Pano Şablonu: Grafik, tablo ve filtre widget’ları.

Temalar, uygulamanın görsel stilini tanımlayan tasarım setleridir. Bunlar:

  • Renk paletleri (birincil, ikincil renkler).
  • Yazı tipleri (font ailesi, boyut, ağırlık).
  • Düzen stilleri (kenar boşlukları, gölgeler, kenarlıklar).
  • Widget görünümleri (butonlar, kartlar, paneller).

Neden Önemli?

  • Hızlı Başlangıç: Şablonlar, sıfırdan uygulama geliştirmeyi hızlandırır.
  • Marka Uyumluluğu: Temalar, uygulamanızı organizasyonunuzun görsel kimliğine uyarlar.
  • Kullanıcı Deneyimi: Tutarlı ve estetik bir tasarım, kullanıcı memnuniyetini artırır.
  • Erişilebilirlik: WCAG 2.1 uyumlu temalar, kapsayıcı bir deneyim sunar.

13.2 Şablonlar

13.2.1 Yerleşik Şablonlar

ArcGIS Experience Builder, çeşitli kullanım senaryoları için hazır şablonlar sunar.

  • Popüler Şablonlar:
    • Blank Full Screen: Boş bir tam ekran şablonu, esnek düzenlemeler için.
    • Foldable: Katlanabilir bir düzen, mobil cihazlar için ideal.
    • Dashboard: Veri görselleştirme için grafik ve tablo odaklı.
    • Storytelling: Hikaye anlatımı için kaydırılabilir bölümler.
  • Adımlar:
    1. Experience Builder’da yeni bir uygulama oluşturun.
    2. Create New > Templates sekmesinden bir şablon seçin.
    3. Widget’ları ve veri kaynaklarını özelleştirin.
  • Haziran 2025 Yeniliği: Yeni şablon kütüphanesi, 3D sahneler ve IoT entegrasyonu için özel şablonlar içerir.

13.2.2 Özel Şablon Oluşturma

Kendi şablonlarınızı oluşturarak tekrar kullanılabilir uygulama taslakları oluşturabilirsiniz.

  • Adımlar:
    1. Bir uygulama oluşturun ve widget’lar, eylemler ve veri kaynaklarıyla yapılandırın.
    2. Save As Template seçeneğini kullanarak şablonu kaydedin.
    3. ArcGIS Online/Enterprise’da şablonu paylaşın:
      • Share > Organization veya Share > Groups.
  • Örnek: Şehir planlama şablonu:
    • Widget’lar: Harita, Tablo, Filtre, Lejant.
    • Eylemler: Harita seçimi Tablo’yu günceller.
    • Veri Kaynağı: Şehir planlama verileri (ör. ArcGIS Feature Layer).

13.2.3 Şablon Paylaşımı ve Yönetimi

  • Paylaşım:
    • Şablonları ArcGIS Online/Enterprise’da paylaşabilirsiniz.
    • Adımlar:
      1. ArcGIS portalında şablonu bir öğe olarak kaydedin.
      2. Paylaşım seviyesini seçin (Herkese Açık, Organizasyon, Grup).
  • Yönetim:
    • Şablonları düzenli olarak güncelleyin.
    • Eski şablonları arşivleyin.

13.3 Temalar

13.3.1 Yerleşik Temalar

ArcGIS Experience Builder, varsayılan temalar sunar (ör. Light, Dark).

  • Kullanım:
    1. Settings > Theme sekmesine gidin.
    2. Bir tema seçin (ör. Light Theme).
    3. Renk, yazı tipi ve düzen ayarlarını özelleştirin.
  • Özellikler:
    • Renk paletleri (birincil, ikincil, aksan renkleri).
    • Yazı tipi seçenekleri (Roboto, Open Sans vb.).
    • Düzen stilleri (kenar boşlukları, gölgeler).

13.3.2 Özel Tema Oluşturma

Özel temalar, markanıza özgü görsel kimlik oluşturur.

  • Adımlar:
    1. Experience Builder Developer Edition’da yeni bir tema oluşturun: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\", \"fontSizeBase\": \"16px\", \"borderRadius\": \"4px\" } /* client/your-extensions/themes/MyCustomTheme/styles/style.css */ .jimu-widget { background-color: #f8f9fa; border: 1px solid #dee2e6; border-radius: 4px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .jimu-btn { background-color: #007bff; color: #ffffff; padding: 8px 16px; } .jimu-btn:hover { background-color: #0056b3; }
    4. Tema ayarlarını yapılandırın:// client/your-extensions/themes/MyCustomTheme/setting/Setting.tsx import { React, ThemeSettingProps } from \'jimu-core\'; export default function ThemeSetting(props: ThemeSettingProps) { const { theme, onThemeChange } = props; const updatePrimaryColor = (color: string) => { onThemeChange({ ...theme, primary: color }); }; return ( <div> <label>Birincil Renk:</label> <input type=\"color\" value={theme.primary} onChange={(e) => updatePrimaryColor(e.target.value)} /> </div> ); }
    5. npm start ile temayı test edin.
    6. Experience Builder’da Settings > Theme > MyCustomTheme seçin.

13.3.3 Tema Paylaşımı ve Yönetimi

  • Paylaşım:
    • Temayı bir ZIP dosyası olarak paketleyin: npm run build.
    • ArcGIS Online/Enterprise’a yükleyin.
  • Yönetim:
    • Tema dosyalarını düzenli güncelleyin.
    • Eski temaları arşivleyin.

13.3.4 Erişilebilir Temalar

WCAG 2.1 standartlarına uygun temalar oluşturmak için:

  • Renk Kontrastı:
  • Yazı Tipi Okunabilirliği:
    • Minimum font boyutu: 16px.
    • Sans-serif fontlar (ör. Roboto, Arial).
  • ARIA Etiketleri:<button aria-label=\"Haritayı Yenile\" className=\"jimu-btn\">Yenile</button>
  • Klavye Navigasyonu:import { useKeyboardNavigation } from \'jimu-core\'; useKeyboardNavigation({ onEnter: () => refreshMap() });

13.4 Şablon ve Tema Özelleştirme

13.4.1 Şablon Özelleştirme

  • Adımlar:
    1. Bir yerleşik şablon seçin (ör. Dashboard).
    2. Widget’ları ekleyin veya kaldırın.
    3. Eylemleri yapılandırın (ör. Harita seçimi Grafik’i güncelleyin).
    4. Save As Template ile özelleştirilmiş şablonu kaydedin.
  • Örnek: Analitik pano şablonunu özelleştirme:
    • Widget’lar: Grafik, Tablo, Filtre.
    • Eylemler: Filtre değişimi Grafik ve Tablo’yu günceller.

13.4.2 Tema Özelleştirme

  • Adımlar:
    1. Settings > Theme sekmesinde bir tema seçin.
    2. Renk paletini, yazı tipini ve düzen ayarlarını değiştirin.
    3. Özel CSS eklemek için Developer Edition kullanın:/* client/your-extensions/themes/MyCustomTheme/styles/custom.css */ .jimu-widget-header { background-color: #007bff; color: #ffffff; padding: 10px; }
  • İpucu: CSS değişkenlerini kullanın::root { --primary-color: #007bff; --font-family: \'Roboto\', sans-serif; } .jimu-widget { background-color: var(--primary-color); font-family: var(--font-family); }

13.5 Haziran 2025 Güncellemesindeki Yenilikler

  • Yeni Şablon Kütüphanesi:
    • 3D sahneler için şablonlar.
    • IoT veri görselleştirme şablonları.
  • Tema Özelleştirme Araçları:
    • Gerçek zamanlı tema önizleme.
    • Yeni renk paleti seçici.
  • Erişilebilirlik İyileştirmeleri:
    • Otomatik kontrast oranı kontrolü.
    • Yeni useAccessibility hook’u.
  • Performans:
    • Daha hızlı tema yükleme.
    • Optimize edilmiş şablon rendering.

13.6 Pratik Örnekler

Aşağıda, basitten zora dört pratik örnekle şablon ve tema kullanımını açıklayacağız.

Örnek 1: Kamu Bilgilendirme Şablonu (Başlangıç Seviyesi)

  • Amaç: Şehir parklarını gösteren bir kamu bilgilendirme uygulaması.
  • Şablon: Blank Full Screen.
  • Tema: Light Theme.
  • Adımlar:
    1. Blank Full Screen şablonunu seçin.
    2. Harita Widget’ı ekleyin, park verileri içeren bir web haritası bağlayın.
    3. Arama Widget’ı ekleyin, adres araması için yapılandırın.
    4. Lejant Widget’ı ekleyin, park türlerini gösterin.
    5. Tema Özelleştirme:
      • Birincil renk: #28a745 (yeşil).
      • Yazı tipi: Arial.
      // variables.json { \"primary\": \"#28a745\", \"fontFamily\": \"Arial, sans-serif\" }
    6. Preview ile test edin.
    7. Save As Template ile şablonu kaydedin.
  • Sonuç: Kullanıcı dostu bir kamu bilgilendirme uygulaması.
  • İpucu: Mobil uyumluluk için responsive ayarları kontrol edin.

Örnek 2: Analitik Pano Şablonu (Orta Seviye)

  • Amaç: Şirket satış verilerini görselleştiren bir pano.
  • Şablon: Dashboard.
  • Tema: Özel Tema.
  • Adımlar:
    1. Dashboard şablonunu seçin.
    2. Grafik Widget’ı ekleyin, satış verileri için çubuk grafiği oluşturun.
    3. Tablo Widget’ı ekleyin, detaylı satış verilerini listeleyin.
    4. Filtre Widget’ı ekleyin, bölge ve tarih filtreleri tanımlayın.
    5. Eylem: Filtre değişimi Grafik ve Tablo’yu güncelleyin.
    6. Özel Tema:// variables.json { \"primary\": \"#007bff\", \"secondary\": \"#6c757d\", \"fontFamily\": \"Roboto, sans-serif\", \"fontSizeBase\": \"14px\" } /* styles/style.css */ .jimu-widget-card { border: 1px solid #dee2e6; border-radius: 4px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }
    7. Preview ile test edin.
    8. Şablonu ve temayı ArcGIS Online’da paylaşın.
  • Sonuç: Satış verilerini görselleştiren bir analitik pano.
  • İpucu: Grafik widget’ında veri sınırlandırması yaparak performansı artırın.

Örnek 3: Hikaye Anlatımı Şablonu (İleri Seviye)

  • Amaç: Şehir gelişim projesini anlatan bir hikaye anlatımı uygulaması.
  • Şablon: Storytelling.
  • Tema: Özel Tema.
  • Adımlar:
    1. Storytelling şablonunu seçin.
    2. Bölüm Widget’ı ekleyin, “Geçmiş”, “Şimdi” ve “Gelecek” bölümleri oluşturun.
    3. Her bölüm için Harita Widget’ı ekleyin, ilgili veri katmanlarını bağlayın.
    4. Metin Widget’ı ile açıklayıcı içerikler ekleyin.
    5. Menü Widget’ı ile bölümler arasında gezinme sağlayın.
    6. Özel Tema:// variables.json { \"primary\": \"#343a40\", \"secondary\": \"#f8f9fa\", \"fontFamily\": \"Open Sans, sans-serif\", \"borderRadius\": \"6px\" } /* styles/style.css */ .jimu-section { background-color: #f8f9fa; padding: 20px; border-radius: 6px; } .jimu-nav { background-color: #343a40; color: #ffffff; }
    7. Erişilebilirlik:
      • Menü için ARIA etiketleri ekleyin:<nav aria-label=\"Bölüm Gezinme\">...</nav>
      • Klavye navigasyonu ekleyin:useKeyboardNavigation({ onEnter: () => switchSection() });
    8. Preview ile test edin.
  • Sonuç: Etkileyici bir hikaye anlatımı uygulaması.
  • İpucu: Bölüm geçişlerini akıcı hale getirmek için animasyonlar kullanın.

Örnek 4: Afet Yönetimi için 3D Şablon ve Tema (Uzman Seviyesi)

  • Amaç: Afet yönetimi için 3D sahnelerle özelleştirilmiş bir uygulama.
  • Şablon: Özel 3D Şablon.
  • Tema: Özel Tema.
  • Adımlar:
    1. Yeni bir 3D şablon oluşturun:
      • Harita Widget’ı (3D sahne) ekleyin.
      • Analiz Widget’ı (Elevation Profile, Line of Sight) ekleyin.
      • Tablo Widget’ı ekleyin, afet verilerini listeleyin.
      • Widget Kontrolcüsü ile filtre ve özellik bilgisi widget’larını kontrol edin.
    2. Eylemler:
      • Harita seçimi Tablo’yu güncelleyin.
      • Analiz sonuçları Harita’da grafik göstersin.
    3. Özel Tema:// variables.json { \"primary\": \"#dc3545\", \"secondary\": \"#212529\", \"fontFamily\": \"Roboto, sans-serif\", \"fontSizeBase\": \"16px\", \"borderRadius\": \"8px\" } /* styles/style.css */ .jimu-widget { background-color: #212529; color: #ffffff; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } .jimu-btn { background-color: #dc3545; color: #ffffff; padding: 10px 20px; } .jimu-btn:hover { background-color: #c82333; }
    4. Erişilebilirlik:
      • ARIA etiketleri ekleyin:<div role=\"region\" aria-label=\"Afet Analizi Paneli\">...</div>
      • Klavye navigasyonu ekleyin.
    5. Performans Optimizasyonu:
      • 3D modelleri düşük poligonlu kullanın.
      • Veri yüklemelerini önbelleğe alın.
    6. Preview ile test edin.
    7. Şablonu ve temayı ArcGIS Online’da paylaşın.
  • Sonuç: Afet yönetimi için özelleştirilmiş bir 3D uygulama.
  • İpucu: 3D performans için WebGL hata ayıklama araçlarını kullanın.

13.7 En İyi Uygulamalar ve İpuçları

  • Şablonlar:
    • Şablonları belirli kullanım senaryolarına göre tasarlayın.
    • Yeniden kullanılabilirlik için modüler yapılar oluşturun.
  • Temalar:
    • Marka renklerini ve yazı tiplerini kullanın.
    • WCAG 2.1 kontrast standartlarına uyun.
  • Erişilebilirlik:
    • ARIA etiketleri ve klavye navigasyonu ekleyin.
    • Ekran okuyucu uyumluluğunu test edin.
  • Performans:
    • Tema dosyalarını sıkıştırın.
    • Gereksiz CSS kurallarını kaldırın.

13.8 Sorun Giderme

  • Şablon Hataları: Widget ve eylem yapılandırmalarını kontrol edin.
  • Tema Hataları: CSS seçicilerinin doğru olduğundan emin olun.
  • Erişilebilirlik Sorunları: axe DevTools ile tarama yapın.
  • Performans Sorunları: Önbellekleme ve düşük poligonlu modeller kullanın.

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