Arayüz Render Motoru

Ekranı tanımlayın.
Frontend geliştirmeyi atlayın.

TotalApp'teki onay ekranlarının ve diğer motorların ürettiği formların arkasındaki Server-Driven UI (sunucu tabanlı arayüz) katmanı. Başka bir motorun ihtiyaç duyduğu her tablo veya form kombinasyonu için elle bir ekran kodlamak yerine, bu motor ekranı küçük bir JSON ağacı olarak tanımlar ve frontend bunu, paylaşılan ve temaya duyarlı bir bileşen kataloğu kullanarak anında render eder.

Sunucu Tabanlı Arayüz Anlamsal Stil Matris İncelemelerini Güçlendirir Temaya Duyarlı
Sunucu Tabanlı Arayüz

Bir JSON ağacı girer.
Çalışan bir ekran çıkar

Backend, bir ekranı girdi, rozet, buton gibi bileşenlerden oluşan bir JSON ağacı olarak tanımlar; frontend bunu anında render eder. Her yeni form için sayfaya özel frontend kodu yazmaya gerek kalmaz.

  • Ekranlar küçük bir JSON bileşen ağacı olarak tanımlanır
  • Her tablo/form kombinasyonu için elle kodlanmış bir frontend sayfası gerekmez
  • Herhangi bir motor, frontend çalışması yapmadan bir inceleme ekranı üretebilir
  • Yeni alanlar veya eylemler, uygulama değil JSON değiştirilerek yayına alınır
Üretilen Bir Ekranı Görün
totalapp.app / ui-tree
{
"type": "form",
"children": [
{ "type": "badge", "role": "success" },
{ "type": "input", "label": "Vendor" },
{ "type": "button", "role": "primary" }
]
}
Anlamsal Stil

Renkler değil, roller.
Marka kendini uygular

Bileşenler, sabit renk değerleri değil primary, success, danger gibi anlamsal roller taşır. Her tenant'ın white-label markası otomatik olarak uygulanır, ekran başına sıfır stil çalışması gerekir.

  • Bileşenler bir hex kod değil, bir rol bildirir
  • Aynı JSON ağacı, herhangi bir tenant'ın markası altında doğru şekilde render edilir
  • Sıfır yinelenen ekran — tek bir paylaşılan bileşen kataloğu
  • Onlarca neredeyse aynı, elle inşa edilmiş ekranın yerini tek bir sistem alır
Bileşen Kataloğunu Keşfedin
totalapp.app / component-catalog
Bileşen rolleri — tenant başına çözülür
role: primary role: success role: danger
Tenant A — Acme Corp
"primary" rolü menekşe rengine çözülür — Acme'nin marka rengi
Tenant B — Nova Retail
Aynı JSON ağacı, "primary" rolü Nova'nın turuncusuna çözülür — hiçbir ekran kodu değişmedi
Matris Ajanı İncelemelerini Güçlendirir

Perde arkasında
zaten çalışıyor

Matris Ajanı bir tedarikçiyi, potansiyel müşteriyi veya uyumluluk kaydını puanladıktan sonraki insan incelemesi adımı bu motor tarafından render edilir — sunucu tabanlı ekranların bugün üretimde işe yaradığının kanıtı.

  • Matris Ajanı inceleme ekranları elle değil, üretilerek oluşturulur
  • Onay, bulgu ve inceleme akışları aynı render yolunu paylaşır
  • Yeni motorlar aynı inceleme arayüzünü anında yeniden kullanabilir
  • Tek bir render motoru, birçok üretilmiş deneyim
Bir İnceleme Ekranını Görün
totalapp.app / matrix/review
TechParts GmbH — Skor 91 Render edildi
Üretilen Bileşenler
badge · role: success
kırılım çubukları · 3 kriter
onayla / reddet butonları
Yukarıdaki her öğe, Matris Ajanı tarafından üretilen ve bu motor tarafından render edilen bir JSON ağacıdır — özel bir inceleme sayfası elle inşa edilmedi.
Varsayılan Olarak Temaya Duyarlı

White-label,
ekstra çalışma olmadan

Üretilen her ekran, tenant'ın white-label markasına — logo, renkler ve tipografiye — otomatik olarak uyar; ekran başına ek temalandırma kodu gerekmez.

  • Tenant markası, üretilen her ekrana otomatik olarak uygulanır
  • Anında render — frontend ağacı bir kez okur ve render eder
  • Açık ve koyu mod, ekstra işaretleme olmadan desteklenir
  • Yeni tenant'lar ilk gününden itibaren doğru markalanmış ekranlar alır
White-Label'ı Aksiyonda Görün
totalapp.app / theme-preview
Aynı JSON ağacı, iki tenant
primary buton
rozet vurgusu
Tenant A — Acme Corp
primary buton
rozet vurgusu
Tenant B — Nova Retail
Logo, renkler ve tipografi tenant başına otomatik olarak değişir — ekran başına ek temalandırma kodu gerekmez.
Tüm Özellikler

Kutudaki her şey

Arayüz Render Motoru, herhangi bir motor için onay ekranlarını çalıştırmaya hazır, eksiksiz bir Sunucu Tabanlı Arayüz katmanı sunar.

Sunucu Tabanlı Arayüz

Backend, bir ekranı bileşenlerden oluşan bir JSON ağacı olarak tanımlar; sayfaya özel frontend kodu gerekmez.

Anında Render

Frontend, ağacı bir kez okur ve tamamen çalışan, stillendirilmiş bir ekranı anında render eder.

Anlamsal Stil

Bileşenler, sabit renkler değil primary, success, danger gibi anlamsal roller taşır; böylece her tenant'ın markası otomatik olarak uygulanır.

Sıfır Yinelenen Ekran

Tek bir paylaşılan bileşen kataloğu, onlarca neredeyse aynı, elle inşa edilmiş onay/inceleme sayfasının yerini alır.

Matris Ajanı İncelemelerini Güçlendirir

Matris Ajanı bir tedarikçiyi, potansiyel müşteriyi veya uyumluluk kaydını puanladıktan sonraki insan incelemesi adımı bu motor tarafından render edilir.

Varsayılan Olarak Temaya Duyarlı

Üretilen her ekran, tenant'ın white-label markasına otomatik olarak uyar.