AI arayüzünde küçük güncelleme: bütün ekranı modele bırakma

Bir AI asistanı kartın başlığını değiştirecek, özeti kısaltacak ve ilerleme göstergesini güncelleyecek olsun. Bütün arayüzü yeniden üretmek yerine yalnızca bu üç alana yönelik küçük bir veri değişikliği istemek mümkün. Buradaki öneri belirli bir React özelliği değil; model çıktısını uygulamanın kontrol ettiği bir sözleşmeye dönüştüren tasarım yaklaşımıdır. Deney gerçek model çağrısı yapmaz ve ziyaretçinin yazdığı metni kod olarak çalıştırmaz.

Önce değişebilen alanları belirle

Ekrandaki her alanı modele açmak zorunda değilsin. Bu örnekte title, summary ve progress değişebilir; request alanı yanıtın hangi işe ait olduğunu belirtir. Bilinmeyen alanlar kabul edilmez. Böylece modelin yanlışlıkla başka bir düğmenin hedefini, kullanıcı kimliğini veya görünmeyen ayarı değiştirmesi bu veri yolunun parçası olmaz. Alan listesi küçük kaldığında beklentiyi test etmek de kolaylaşır.

Sözleşmeyi örnek bir başarılı yanıtla sınırlama. Başlık boşsa, özet çok uzunsa veya ilerleme yüzün üzerindeyse ne olacağını yaz. İstemcide bir sayıyı kaydırıcıyla sınırlamak tek başına yeterli değildir; çıktı başka bir kaynaktan geldiğinde aynı kurallar uygulanmalı. Gerçek uygulamada sunucunun kabul ettiği değişiklikler de kendi yetki ve doğrulama sınırlarını taşımalıdır.

Ayrıştırma ile kabul kararını ayır

Bir metin JSON olarak ayrıştırılabiliyorsa yalnızca biçim kontrolünün bir bölümü geçilmiştir. Bir dizi, yanlış türde bir değer veya beklenmeyen alan da geçerli JSON olabilir. Uygulamanın kabul kararı, kendi şemasına ve iş kurallarına dayanmalıdır. Deneyde sayı beklenen yere metin vermeyi, boş bir başlık göndermeyi ve bilinmeyen alan eklemeyi deneyebilirsin.

Ret durumunda anlaşılır bir sonuç üretmek önemlidir. Ekranı boşaltmak veya yarım uygulanmış bir değişiklik bırakmak yerine son geçerli durum korunabilir. Kullanıcı neyin kabul edilmediğini görürken önceki metni kaybetmez. Bu davranış hata gizlemek değildir; başarısız öneriyle son geçerli ekranın birbirinden ayrılmasıdır. Hata kaydı tutulacaksa modelin bütün çıktısını gereksiz yere günlüklemek de varsayılan olmamalı.

{
  "title": "New title",
  "summary": "Existing summary",
  "progress": 60
}

Yanıtı güncel işle eşleştir

Asenkron yanıtlar başlama sırasıyla bitmek zorunda değildir. Kullanıcı ikinci bir istek gönderdiğinde ilk istek hâlâ çalışıyor olabilir. İlk yanıtın geç gelmesi, güncel kartı eski bir sonuçla değiştirmemeli. Deneyde güncel istek kimliği başlangıçta ikidir ve 1–10 arasında değiştirilebilir; request değeri seçilen güncel kimlikle eşleşmeyen parça reddedilir. Bu sayı gerçek kullanıcı veya kayıt kimliği değildir, yalnızca sıralama ilişkisini açıklayan bir araçtır.

Gerçek uygulamada yeni iş başlayınca sürümün nasıl arttığını, iptal edilen isteğin ne olduğunu ve bileşen kapandığında sonucun nereye gideceğini tanımla. İstek kimliği kontrolüyle ağ isteğini iptal etme aynı iş değildir. Birini uygulamak diğerinin etkisini otomatik sağlamaz. Kullanıcıya eski yanıtın uygulanmadığını göstermek, sessizce karışan sonuçlardan daha anlaşılır bir davranış sunabilir.

Mevcut durumu bilinçli koru

Kısmi değişiklik bütün durumun yerine geçmek zorunda değildir. Bu deney her JSON parçasını sabit başlangıç kartından hesaplar: Original title, Existing summary ve 0. Yalnızca progress gönderilirse başlık ve özet bu başlangıç değerlerinden alınır; önceki kabul edilen parçalar biriktirilmez. Gerçek bir uygulamada son geçerli duruma birleştirme davranışı ayrıca uygulanmalıdır. React’in nesne durumu rehberi, durumdaki nesneleri doğrudan değiştirmek yerine yeni nesnelerle güncellemeyi açıklar. İç içe yapıda ilgili katmanları kopyalamak gerekir; deney düz bir nesneyle sınırlıdır.

Önizlemede kabul edilen alanları göstermek incelemeyi kolaylaştırır. Bir değişiklik başlığı mı etkiledi, yalnızca ilerlemeyi mi? Kullanıcı bu ayrımı ekrandan anlayabilsin. Kaydetme veya yayımlama gibi dış etkileri aynı işlem içinde gizleme. Bir görsel önizlemenin değişmesi, veritabanındaki kaydın güncellendiğini veya yayına çıkıldığını kanıtlamaz; her adım kendi sonucunu bildirmelidir.

Küçük ret örnekleriyle başla

Denemeye geçerli bir progress değişikliğiyle başla. Sonra aynı isteğe bilinmeyen bir alan ekle, request değerini eskisine çevir ve aralık dışı bir sayı gönder. Her ret sonrasında deneyin sabit başlangıç kartına döndüğünü gözle; önceki kabul edilen önizleme saklanmaz. Gerçek uygulamada son geçerli ekranı korumak istiyorsan bu davranışı ayrıca uygula ve test et. Bu sıra, yalnızca mutlu yolun çalıştığı bir demodan daha fazla bilgi verir. Serbest metni HTML olarak yorumlayan bir kestirme ekleme.

PDF çıktısı seçtiğin JSON metnini ve modelin hesapladığı kabul sonucunu içerir. Gerçek sır veya kişisel veri yazma; bu alan yalnızca sahte örnekler içindir. Çıktıyı ekip içi bir sözleşme notuna ekleyebilirsin. Sonraki adımda tek bir gerçek ekranın alanlarını ve ret davranışını tanımlamak, tüm uygulamayı dinamik üreteceğini iddia etmekten daha gözlenebilir bir geliştirme hedefidir.

Kabul kaydında üç sonucu ayır

Bir değişiklik önerisi için ayrıştırıldı, kabul edildi ve ekrana uygulandı sonuçlarını ayrı düşün. Sözdizimi doğru bir metin, beklenmeyen alan nedeniyle reddedilebilir. Kabul edilen bir değişiklik de bileşen kapandığı için artık gösterilmeyebilir. Bu durumları tek bir “tamamlandı” işaretine sıkıştırmak hata araştırmasını zorlaştırır. Deney yalnızca kabul modelini gösterir; gerçek uygulamada sonraki adımlar ayrıca gözlenmelidir.

Kısa bir test kaydında giriş örneğini, beklenen kararı ve kalan ekranı birlikte tut. Başlık güncellenirken özetin korunması beklentisi açık olsun. Ardından aynı öneriyi eski istek kimliğiyle tekrarla ve parçanın reddedildiğini doğrula. Bu deneyde ret sabit başlangıç kartını gösterir; gerçek uygulamada son geçerli durumu koruma kuralını ayrı sınamalısın. Kopyalanan test metninde gerçek kullanıcı bilgisi bulunmasın. Böyle bir kayıt, sonraki şema değişikliğinde neyin kasıtlı olarak değiştiğini karşılaştırmayı kolaylaştırır. Yeni bir alan eklemek yalnızca arayüz kontrolü eklemek değildir; kabul ve ret örnekleri de o yeni sınırı kapsamalıdır.

Kaynak

• React — Updating objects in state