Görünüm ve Tema

Bu sayfa, Apinizer API Portalı arayüzünün kurumsal kimliğe uygun şekilde özelleştirilmesini sağlar. Portalın genel tasarımı, renk düzeni, yazı tipi, sayfa başlıkları ve içerik alanları bu ekran üzerinden yönetilir. Ayrıca ana sayfa, bilgilendirme (“Nasıl Çalışır”) ve alt bilgi (footer) alanları için çok dilli içerik oluşturulmasına da olanak tanır. Yapılan değişiklikler, portal arayüzünde gerçek zamanlı olarak önizlenebilir ve kullanıcıya kurumsal, bütünsel bir deneyim sunacak şekilde uygulanır.

İçindekiler

Temel Ayarlar

Apinizer API Portalı üzerinde yer alan Tema ve Görünüm (Appearance) ayarları bu ekrandan yönetilir. Görsel kimlik, renk paleti, yazı tipi ve sayfa başlıkları bu ekran üzerinden düzenlenir.

Dış Görünüş ekran detaylarını içeren görsele aşağıda yer verilmiştir:

Görsel 1:

API Portal Arayüzündeki Etkisi

Aşağıdaki görseller, Apinizer API Portalı’nın Tema ve Görünüm (Appearance) ayar ekranını göstermektedir. Görsel üzerinde yer alan numaralar, yapılandırılabilir alanların konumlarını ifade etmektedir:

Görsel 2:

Görsel 3:

Görsel 4:

Görsel 5:

Tema görünümü ekran konfigürasyonu için kullanılan alanlar aşağıdaki tabloda görülmektedir.

Ana Sayfa Ayarları

Bu alan, API Portalı ana sayfasında kullanıcıların ilk karşıladığı içeriklerin düzenlendiği bölümdür. Portalın tanıtım metinleri, yönlendirici açıklamalar, bağlantılar veya görsel içerikler bu sekmede tanımlanır.
Düzenleme sırasında sağ tarafta bir “Preview (Önizleme)” bölümü görünür; bu sayede yapılan değişikliklerin portal üzerinde nasıl görüneceği anlık olarak izlenebilir.

Sol kısımda içerik düzenleme alanı bulunur ve buraya HTML veya düz metin eklenebilir.

Portalın kurumsal kimliğiyle uyumlu bir karşılama mesajı, açıklama veya rehber metin bu alanda oluşturulabilir.

Ana Sayfa iki dil desteği sunar:

• Portal Home (EN): İngilizce içerik alanı

• Portal Home (TR): Türkçe içerik alanı

Portal Settings ekranında her iki dil seçeneği aktifse, sistem kullanıcıya otomatik olarak uygun dildeki içeriği gösterir.

Ana Sayfa içeriği ekran detaylarını içeren görsele aşağıda yer verilmiştir:

API Portal Arayüzündeki Etkisi

Default olarak ana sayfa ekteki görseldeki gibi geliyor:

Varsayılan içerik girildiğinde portal ana sayfası, kullanıcıya karşılama başlığı, kısa açıklama ve “How It Works?”, “Discover Our APIs”, “Register”, “Contact Us” gibi aksiyon kartlarıyla açılır. Ekteki ekran görüntüsünde (örnek) ana sayfa kartlarının nasıl hizalandığı görülmektedir.

Kendi HTML’inizi kaydettikten sonra portal sayfasını yenilediğinizde aynı alanı canlı olarak görebilirsiniz. Eğer HTML’de sütun yapısı kullandıysanız kartlar veya banner bu alanda yerini alır.

Nasıl Çalışır

Bu alan, API Portalı üzerinde yer alan “Nasıl Çalışır” sayfasının içeriğini yönetmek için kullanılır. Portal kullanıcılarına, sistemin genel işleyişi, API erişim süreci veya kayıt/adım adım kullanım rehberi gibi bilgilendirici içeriklerin sunulduğu bölümdür.

Sol tarafta içerik düzenleme alanı, sağ tarafta ise yapılan değişikliklerin portal üzerinde nasıl görüneceğini gösteren “Preview (Önizleme)” alanı bulunur.
İçerik HTML formatında hazırlanabilir; başlıklar, listeler veya bağlantılar gibi zengin metin ögeleri desteklenir.

Nasıl Çalışır iki dil seçeneği sunar:

• How It Works (EN): İngilizce içerik alanı

• How It Works (TR): Türkçe içerik alanı

Portal Settings bölümünde her iki dil seçeneği aktif olduğunda, kullanıcıya otomatik olarak ilgili dildeki “Nasıl Çalışır” sayfası gösterilir.
Bu sayfa genellikle kullanıcı deneyimini artırmak ve portalın kullanımını açıklamak amacıyla hazırlanır.

Nasıl Çalışır örnek içeriği ekran detaylarını içeren görsele aşağıda yer verilmiştir:

API Portal Arayüzündeki Etkisi

Örnek ekranın API Portal de görünümünü içeren görsel aşağıda verilmiştir:

How It Works HTML alanı aynı HTML editörü kullanılır. Çoklu dil destekliyorsanız iki sekmeyi de doldurun. İçeriğe adım adım rehber, ikonlar, numaralı listeler ekleyebilirsiniz.

Menü yolu: Portal üst menü → How It Works?

İçerik HTML olarak render edilir, breadcrumb’da “Home / How It Works?” görünür.

Dil kontrolü: Şu anda bileşen İngilizce içeriği (howItWorksHtml) kullanır; TR desteği eklemek isterseniz bileşeni genişletmeniz gerekir.

Footer Ayarları

Bu bölüm, API Portalının alt kısmında (footer) görüntülenecek içeriklerin düzenlendiği alandır. Genellikle burada iletişim bilgileri, yasal metinler, telif hakkı (copyright) ifadeleri veya kurumsal bağlantılar yer alır.

Sol taraftaki metin alanına HTML veya düz metin eklenebilir; böylece bağlantılar, logolar ya da kısa bilgilendirme metinleri biçimlendirilmiş şekilde gösterilebilir.
Sağ tarafta yer alan “Preview (Önizleme)” alanı, yapılan değişikliklerin portalın alt kısmında nasıl görüneceğini anlık olarak görüntülemeyi sağlar.

Alt Bilgi iki dil desteği sunar:

• Footer (EN): İngilizce içerik alanı

• Footer (TR): Türkçe içerik alanı

Portal Settings ekranında hem TR hem EN dillerinin aktif olması durumunda, kullanıcıya otomatik olarak tercih ettiği dildeki footer alanı gösterilir.
Bu sayede portalın alt kısmı da çok dilli, kurumsal yapıya uygun bir şekilde düzenlenebilir.

Alt Bilgi örnek içeriği ekran detaylarını içeren görsele aşağıda yer verilmiştir:

API Portal Arayüzündeki Etkisi

Örnek ekranın API Portal de görünümünü içeren görsel aşağıda verilmiştir:

Footer HTML alanı portal alt bölümünde görünen HTML’dir.

Sosyal medya ikonları, iletişim bilgileri, yasal metinler ekleyebilirsiniz.

Script içeren embed’ler (ör. canlı chat) gerekiyorsa HTML içinde <script> kullanabilirsiniz; komponent bu script’leri çalıştıracak şekilde tasarlanmıştır.

Çalışma mantığı:

• HTML içerik DomSanitizer ile güvenli hale getirilir.
• İçerikte <script> varsa executeScripts() fonksiyonu çalıştırır ve script’leri DOM’a ekler.
• Ayar değişince footer hemen güncellenir (sayfa yenilemesi yeterli).

Kaydetme ve Önizleme

Kaydetme İşlemi

Nasıl Kaydedilir:

• Sağ üst köşedeki "Save" (Kaydet) butonuna tıklayın
• Tüm sekmeler (Basic, Home Page, How It Works, Footer) aynı anda kaydedilir
• Başarılı kayıt sonrası değişiklikler anında portal'a yansır.

Önizleme:

• Home Page, How It Works ve Footer sekmelerinde real-time önizleme mevcuttur.
• Sol tarafta kod yazarken, sağ tarafta canlı olarak nasıl görüneceğini görebilirsiniz.
• JavaScript kodları önizlemede de çalışır (apimRunScripts directive sayesinde).

Temel Alanlar

Sık Karşılaşılan Sorunlar: