- Web odaklı bir şirket olan Vercel, Apple Design Award düzeyinde yerel bir deneyim hedefiyle çeşitli teknoloji yığınları ve UI kalıplarını denedikten sonra uygulamayı React Native + Expo kombinasyonuyla tamamladı
- Temelde, bir not yazar gibi fikir yazıldığında bunun arka planda üretildiği AI sohbet tabanlı üretim deneyimi yer alıyor; mesaj animasyonu, kaydırma, klavye ve Liquid Glass composer’a kadar ayrıntılı biçimde tasarlanarak iOS yerel düzeyinde sohbet etkileşimi hayata geçirildi
- Sohbet uygulamasında LegendList, Reanimated, react-native-keyboard-controller tabanlı context ve hook kombinasyonları,
blankSize ve contentInset hesapları, composer yüksekliği bağlantısı gibi yapılarla dinamik yükseklik ve klavye değişimleri akıcı şekilde ele alındı
- Kod yapısının öne çıkan yönü, web ve yerel arasında tipler, iş mantığı ve API katmanının paylaşılması; ayrıca Zod tabanlı OpenAPI şeması → Hey API → Tanstack Query akışıyla v0 web ve v0 Platform API müşterilerinin aynı endpoint’leri kullanacak şekilde tasarlanmış olması
v0 iOS uygulamasının genel görünümü ve hedefi
- Vercel, ilk mobil uygulaması olan v0 for iOS’u yayınlarken, web odaklı bir şirket olmasına rağmen Apple Design Award seviyesinde yüksek kaliteli yerel deneyim üretmeyi hedefledi
- iOS uygulaması çıkana kadar odağı web olduğu için, tam anlamıyla yerel uygulama geliştirme yeni bir alandı
- Bunun için herkese açık beta öncesinde farklı teknoloji yığınları ve UI kalıpları kullanan onlarca sürüm denendi
- Referans olarak Apple Notes, iMessage gibi iPhone’un dilini iyi kullanan uygulamalardan ilham alındı ve ana ekrandaki diğer uygulamalar arasında yer bulabilecek düzeyde bir kalite beklendi
- Belirli bir framework’e sabitlenmeden, birden fazla yığın gerçekten uygulanıp karşılaştırıldıktan sonra sonuca varıldığı belirtiliyor
- Birçok denemenin ardından nihayet React Native + Expo seçildi; sonuçta yerel bir uygulama gibi hissettirdiğine dair çok sayıda geliştirici geri bildirimi alınınca ayrıntılı teknik yapı da paylaşıldı
v0 sohbet deneyiminin yönü
- v0 iOS, “bilgisayardan uzaktayken akla gelen fikirleri hemen çalıştırılabilir bir şeye dönüştüren araç” olmayı hedefliyor ve kendini not uygulamasının bir sonraki nesli olarak konumluyor
- Web’deki gibi bir mobil IDE ya da tüm işlevleri taşımaktansa, hareket halindeyken yapay zekayla bir şeyler üretmeye yönelik basit ve keyifli bir deneyim önceliklendirildi
- Bu deneyimin merkezinde sohbet arayüzü bulunuyor ve bunun için şu gereksinimler tanımlandı
- Yeni mesajlar akıcı animasyonlarla görünmeli
- Yeni kullanıcı mesajı ekranın üst kısmına kadar kaydırılarak gösterilmeli
- Asistan mesajı, akış halinde gelirken basamaklı fade-in (streaming + gecikme) ile görüntülenmeli
- Giriş alanı (composer) Liquid Glass stilinde yüzer yapıda olmalı ve kaydırılabilir içeriğin üstünde durmalı
- Var olan bir sohbet açıldığında son mesaja kadar kaydırılmış durumda başlamalı
- Klavye davranışı doğal ve yerele yakın hissettirmeli
- Metin girişi görsel ve dosya yapıştırmayı ve pan gesture ile focus/blur davranışını desteklemeli
- Markdown render etme hızlı olmalı ve dinamik bileşenleri de desteklemeli
- Mobilde AI sohbet için çok sayıda UI kalıbı bulunsa da, AI kod üretimine yönelik mobil kalıp olmadığı için yeni bir kalıp doğrudan tasarlanmak zorunda kaldı; bunu hedeflenen seviyeye getirmek için önemli ölçüde çalışma, test ve ince ayar gerekti
Birleştirilebilir sohbet yapısının tasarımı
- Sohbet gereksinimlerini karşılamak için sohbet kodu, özellik bazında birleştirilebilir (composable) olacak şekilde tasarlandı
- Bunun için tüm sohbeti saran birden fazla Context Provider oluşturuldu ve mesaj listesi bunların içine yerleştirildi
- Sohbet uygulamasında şu açık kaynak kütüphaneler kullanıldı
- LegendList: yüksek performanslı liste render etme
- React Native Reanimated: animasyonlar ve shared value’lar
- react-native-keyboard-controller: klavye durumunu kontrol etme ve event handling
- Her mesaj render edilirken
item.role değerine göre user / assistant / optimistic-placeholder ayrımı yapılıyor ve role göre farklı bileşenler kullanılıyor
Mesaj animasyonunun uygulanması
- İlk kullanıcı mesajı, Reanimated shared value kullanılarak yumuşak bir fade-in ile gösteriliyor
useFirstMessageAnimation hook’u mesaj yüksekliği, ekran yüksekliği ve klavye yüksekliğini hesaplayarak translateY ve opacity kontrolünü yapıyor
- İlk asistan mesajı, kullanıcı mesajı animasyonu tamamlandıktan sonra gecikmeli fade-in ile geliyor
- Var olan sohbetlerde
scrollToEnd() ve contentInset ayarı ile yeni mesajlar ekranda doğal biçimde üst kısma yerleştiriliyor
Kaydırma ve klavye kontrolü
- Sohbet deneyiminin kalitesi büyük ölçüde klavye davranışının doğallığına bağlı ve React Native’de yerel uygulamaya yakın bir klavye hissi oluşturmak oldukça zordu
- iOS sürümleri arasındaki farklar nedeniyle klavye davranışında kararsızlık ortaya çıktı ve
react-native-keyboard-controller bakımcısıyla birlikte hata düzeltmeleri ve performans iyileştirmeleri yapıldı
useKeyboardAwareMessageList hook’u ile klavyenin açılma, kapanma ve sürüklenme event’leri ayrıntılı biçimde kontrol edildi- Var olan bir sohbet açılırken otomatik kaydırma konumunu ayarlamak için
scrollToEnd birkaç kez çağrılarak dinamik yükseklik sorunu çözüldü
Liquid Glass Floating Composer ve giriş alanı iyileştirmeleri
- iMessage’taki Liquid Glass efekti uygulanarak yarı saydam ve yüzer bir giriş alanı oluşturuldu
KeyboardStickyView ve composerHeight shared value’su ile scroll view contentInset değeri gerçek zamanlı ayarlandı
- Giriş alanı yüksekliği değiştiğinde otomatik kaydırmayı korumak için
useScrollWhenComposerSizeUpdates hook’u kullanıldı
- Varsayılan
TextInput içindeki scroll bounce ve gösterge görünmesi sorunlarını çözmek için RCTUITextView yerel yaması uygulandı
- Böylece swipe gesture ile klavyeye focus verilebilmesi iyileştirildi
Görsel yapıştırma ve akış halindeki içeriğin fade-in gösterimi
- Expo modülü üzerinden
UIPasteboard event’leri algılanarak metin, görsel ve dosya yapıştırma desteklendi
- FadeInStaggeredIfStreaming bileşeni ile AI yanıt metninde kelime bazlı fade-in uygulandı
- Animasyon havuzu yönetimiyle eşzamanlı animasyon sayısı sınırlandı ve performans optimize edildi
- Daha önce görülen içerik için
DisableFadeProvider kullanılarak yeniden animasyon önlendi
Web ile yerel arasında kod paylaşımı ve Platform API
- Web ve mobil arasında tipler ve yardımcı fonksiyonlar paylaşıldı; UI ve durum yönetimi ise ayrıştırıldı
- Zod tabanlı, tip güvenli bir API framework’ü kurularak OpenAPI spec otomatik üretildi
- Mobil uygulama API çağrılarını Hey API + Tanstack Query ile yapıyor
- Bu yapı temel alınarak v0 Platform API yayımlandı ve aynı endpoint’ler harici geliştiricilere de açıldı
Stil verme ve yerel bileşenler
- react-native-unistyles ile tema yönetimi yapıldı; Context erişimi olmadan hızlı stil verme sağlandı
- Zeego ile iOS yerel
UIMenu tabanlı menüler uygulandı
- iOS 26’da ortaya çıkan Alert konum hatası düzeltildi ve React Native’e upstream patch katkısı yapıldı
- modal (formSheet) ile ilgili sürükleme ve flickering sorunları düzeltildi; Callstack, Meta ve Expo ile birlikte çalışılarak bunlar React Native 0.82’ye yansıtıldı
Gelecek planları ve topluluk işbirliği
- İlk uygulama React Native + Expo kombinasyonuyla tamamlandıktan sonra, gelecekteki projelerde de aynı yığının korunması planlanıyor. Mevcut yığından memnunlar
- Vercel, iddialı ürünleri yüksek seviyede hayata geçirmeye odaklanıyor ve
- web ve yerel geliştiricilerin aynı düzeyde ürünler üretebilmesi için içeride geliştirdikleri birikimi açık kaynak olarak paylaşmayı planladıklarını belirtiyor
- özellikle AI sohbet uygulamaları için açık kaynak kütüphaneler konusunda beta test yapacak topluluk üyeleri arıyorlar ve React Native iyileştirmelerine katkı vermeyi sürdürecekler
Henüz yorum yok.