A2UI ile temsilcilerin Android uygulamalarınızda kullanıcı arayüzü oluşturmasına izin verme

Herkese merhaba. Bu konuşmada, yepyeni A2UI kitaplığımızı kullanarak Android uygulamalarınızda kullanıcı arayüzü oluşturma hakkında konuşacağız.

Ben Nick Butcher. Jetpack Compose üzerinde çalışan bir ürün müdürüyüm.

Herkese merhaba, ben Anton. Compose ekibinde mühendisim.

Bugün size bahsetmekten büyük heyecan duyduğumuz yeni Jetpack Compose A2UI oluşturucu üzerinde çalışıyorum.

Evet, yapay zeka özelliklerinin gelişmesiyle birlikte birçok uygulama, yapay zekanın kullanıcıları için yeni deneyimler oluşturmaya veya mevcut deneyimleri iyileştirmeye nasıl yardımcı olabileceğini araştırıyor.

Bazı kullanıcıların ilgisini çeken heyecan verici deneyimlerden biri de üretken kullanıcı arayüzü. Bu deneyim, çalışma zamanında temsilci arka uçlarının kullanıcılarınız için yepyeni kullanıcı arayüzleri oluşturmasını sağlıyor. Bu da bize göre çok ilginç bir deneyim.

Ancak maalesef şu anda birçok temsilci tabanlı arka uç yanıtı, bu şekilde metin duvarlarına hapsolmuş durumda.

Örneğin, bir temsilciden seyahat rezervasyonu için yeni bir özellik oluşturmasını istedim.

İstemimiz şu şekilde:

Gördüğünüz gibi, aslında oldukça iyi bir yanıt verdi ancak bu yanıt, kolayca etkileşim kuramayacağım bir metin duvarına sıkışmış durumda ve uygulamamın geri kalanına hiç benzemiyor.

Üretken kullanıcı arayüzü ise dinamik girişlere yanıt olarak anında yeni bir kullanıcı arayüzü oluşturmanıza olanak tanır. Böylece daha fazla özelleştirme veya yeni deneyimler sunabilirsiniz.

Standart, yerel bileşenler kullanılarak oluşturulan bir kullanıcı arayüzü örneği.

Yani bu tür bir deneyimi bugün kendiniz de oluşturabilirsiniz ancak arka uçla etkileşim için kendi biçiminizi, kendi etkinlik akışınızı ve işlevlerinizi tanımlamanız gerekir.

Agent-to-UI'ın kısaltması olan A2UI, tüm bunları tanımlamak için JSON biçimini kullanan açık bir protokoldür.

A2UI'nin en sevdiğim özelliklerinden biri, bildirim temelli bir biçim olması.

Temsilci, oluşturulacak kullanıcı arayüzünün JSON gösterimini döndürür.

İstemcinizin yürütmesi gereken herhangi bir kod döndürmez. Bu da sizi belirli güvenlik açıklarına karşı korur.

Yalnızca bildirim amaçlıdır.

A2UI ile ilgili bilmemiz gereken başka hangi kavramlar var?

Yalnızca iki ana kavram vardır: kataloglar ve yüzeyler.

Katalogda, temsilcinin kullanıcı arayüzünü oluşturmak için kullanabileceği metin, düğme, satır ve sütun gibi bileşenler bulunur.

Katalogda, temsilcinin metin biçimlendirme, kullanıcı girişini doğrulama veya URL'leri açma için kullanabileceği işlevler de bulunur.

Katalog, uygulamanızın hangi bileşenleri ve işlevleri desteklediğini tanımlayan bir sözleşmedir. Temsilci yalnızca bu bileşenleri ve işlevleri kullanarak derleme yapabilir.

Bu, Nick'in de belirttiği gibi, temsilcinin uygulamanızda hiçbir zaman rastgele kod yürütmediği anlamına gelir.

Tasarladığınız ve güvendiğiniz yapı taşlarından bir kullanıcı arayüzü oluşturur.

Önemli bir kavram daha var: Yüzey.

Yüzey, slayttaki gezi planlayıcı örneğinde olduğu gibi temsilcinin kontrol ettiği kullanıcı arayüzü parçasıdır.

Temsilci, bir yüzeyin kullanıcı arayüzünü JSON'da createSurface, updateComponents gibi A2UI protokol mesajlarını ve kataloğunuzda tanımlanan bileşenleri ve işlevleri kullanarak açıklar.

Katalog, A2UI'da çok temel bir kavramdır. Temsilcinin arayüz oluşturmak için kullanabileceği bileşenleri kontrol eder.

A2UI spesifikasyonu, çoğu kullanıcı arayüzünü oluşturmak için kullanabileceğiniz ortak bileşenlerden oluşan temel katalog adlı bir öğeyi tanımlar.

Jetpack Compose A2UI oluşturucu, Material 3 bileşenlerini kullanarak temel kataloğun bir uygulamasını sağlar.

Katalog bileşenlerinin çoğu kullanıma hazırdır.

Üç medya bileşeni vardır: resim, video ve ses oynatıcı. Bu bileşenlerde, seçtiğiniz kitaplığı eklemeniz gerekir.

Örneğin, resim yükleme için Coil'i, video ve ses oynatıcı için Media3'ü seçebilirsiniz.

Ancak A2UI'ın ve yeni oluşturucu kitaplığımızın asıl gücü, tamamen özel bileşenler ve kataloglar oluşturabilmeniz ve temsilcinin kullanıcı arayüzünü oluşturmak için kullanabileceği öğeleri tamamen kontrol edebilmenizdir.

Kataloglara daha sonra değineceğiz.

Şimdi bunun nasıl göründüğüne bakalım.

Şimdi demo makinesine geçelim.

Bu, kullanacağımız demo uygulamamız. Ne kadar kolay olduğunu göstermek için A2UI oluşturucuyu geliştireceğiz.

Ekranın ortasındaki küçük çiplerde görebileceğiniz gibi, bunlar bir temsilciye gönderebileceğiniz istemlerdir.

İstemlerden birini tıkladığımızda bu istem, arka uçta gerçek bir canlı temsilciye gönderiliyor. Bu nedenle, demo için umutluyuz. İstemlerin yanı sıra bazı sistem talimatları da ekliyoruz.

Bu nedenle, arka uca A2UI protokolü ve bileşen kataloğu hakkında bilgi veriyoruz. Bu örnekte, kullanıcı arayüzünü oluşturmak için kullanabileceği temel kataloğu kullanıyoruz ve bunu nasıl oluşturacağına dair bazı örnekler veriyoruz.

Demo uygulamamızdaki sohbet oturumu uygulaması, temsilcinin yanıtlarından ham JSON A2UI mesajlarını nasıl çıkaracağını zaten biliyor.

Bu durumda temsilci, bir metin ve ardından A2UI protokol mesajlarıyla yanıt verdi: createSurface, updateComponents.

Ancak şu anda uygulamamız yalnızca bu ham JSON'u gösteriyor ve henüz kullanıcı arayüzü olarak oluşturmuyor.

Kodu uygulamaya geçmeden önce bir saniyeliğine slaytlara dönelim. Bir adım geri gidip bu kodu uygulamak için kullanacağımız sistem tasarımından bahsedelim.

İşte başlıyoruz.

Evet, planımız şu şekilde.

Yapay zeka ajanı, ChatSession sınıfı tarafından alınan bir yanıtı uygulamamıza yanıtı akış şeklinde gösterir.

ChatSession, temsilcinin yanıtlarından ham A2UI JSON mesajlarını ayıklar ve bunları A2UI mesaj işleyiciye iletir.

Mesaj İşleyici, bu ham JSON iletilerini anlamsal bir temsile dönüştüren bir ayrıştırıcıyla yapılandırılır.

Ardından işlemci, mesajları katalog tanımına göre doğrular ve bir dizi yüzey modeliyle eşler.

Yüzey modelleri, kullanıcı arayüzünün görünümünü ve temsilcinin kontrol ettiği kullanıcı arayüzü parçalarını tanımlar.

Bu yüzey modelleri daha sonra kitaplığımız tarafından sağlanan A2UI yüzey bileşeni kullanılarak yerel Compose kullanıcı arayüzü olarak oluşturulur.

Temsilci ile kullanıcı arayüzü arasındaki iletişim çift yönlüdür. Bu nedenle, kullanıcı arayüzüyle etkileşim kurduğunda kullanıcı işlemleri ve hatalar temsilciye geri gönderilir.

Özetle üç ana yapı taşı vardır: katalog, mesaj işleyici ve yüzey.

Bunun için kod yazalım.

Evet, makineleri değiştirebilirsek inşa edelim.

İlk adım, bağımlılığı eklemektir.

Burada, Material 3 A2UI bağımlılığını eklediğimizi ve projeyi senkronize ettiğimizi görebilirsiniz. Böylece Gradle'ın tamamlanmasını beklememiz gerekmez.

Bu, Material 3 bileşenlerini kullanarak temel kataloğun uygulanmasını tanımlayan üst düzey bağımlılıktır ancak altında daha ayrıntılı başka bağımlılıklar da vardır.

Dolayısıyla, temel kataloğu kullanmak istemiyorsanız (nedenini daha sonra açıklayacağız) daha ayrıntılı olanları kullanabilirsiniz.

Ancak bu, geri kalanını geçişli olarak çeker.

Anladım.

Üç şey olduğunu söylemiştik.

İlk adım, bir katalog tanımlamaktı.

Uygulamamızda, temel kataloğun Material 3 uygulamasının bir örneğini oluşturmaya yardımcı olacak bir fabrika işlevi oluşturacağız.

Bu nedenle, burada sürümü de olan material A2UI basic catalog adlı kitaplık işlevini kullanıyoruz.

Daha önce de belirttiğimiz gibi, bu kitaplık ihtiyacınız olan tüm ortak bileşenleri sağlar. Ancak sizi belirli resim yükleme veya medya oluşturma kitaplıklarını kullanmaya zorlamak istemediğimiz için bunları kendiniz sağlamanız gerekir.

Örneğin, Anton burada Coil'in AsyncImage composable'ı için bir sarmalayıcı oluşturmuş. Bu sarmalayıcıyı resim yüklemek için kullanacağız. Ayrıca demomuzun Wikipedia'dan resim araması için biraz daha mantık ekleyeceğiz.

Böylece bunu katalog bileşenlerine kolayca ekleyebiliriz.

Benzer şekilde, oluşturma, video ve ses için de benzer uygulamalarımız var. Bunları ExoPlayer ile oluşturmak için Media3 kitaplığını kullanacağız.

Bu şekilde kendi bileşenlerimizi kolayca ekleyebiliriz.

Katalogda olması gereken bir sonraki şey, standart işlevler kümesidir.

Bunlar, istemcinin sağlayabileceği işlevlerdir.

Yine, temel katalogla birlikte bunun bir uygulamasını da sunuyoruz ancak bunu bir bağlamla sağlamamız gerekiyor. Bu bağlamı, kullanıcı bir öğeye dokunursa URI açma gibi belirli işlemleri yapmak için kullanacaksınız.

Böylece ilk adımı tamamlamış olduk.

Bir katalog oluşturduk.

Bir sonraki adımda mesaj işleyiciyi ayarlamamız gerekiyor.

Yani yanıtları ve diğer şeyleri ayrıştıran şey budur.

Uygulamamızın görünüm modeline geçelim. Burada, daha önce oluşturduğumuz kataloğu örneklendireceğiz.

Ardından, yanıtları kullanmak istediğimiz bileşenlere göre doğrulamak için kataloğa erişmesi gereken bu mesaj ayrıştırıcıyı, mesaj işleyici nesnesini oluşturacağız.

Oluşturmamız gereken bir diğer bileşen de ayrıştırıcıdır. Bu, aslında geri gelen JSON mesajlarını ayrıştırmaktan sorumlu nesnedir.

Burada ChatSession nesnesini oluşturuyoruz.

Daha önce de belirttiğim gibi, ChatSession, temsilcinin yanıtlarından ham A2UI mesajlarını zaten ayıklar.

Her yeni A2UI mesajı hazır olduğunda bu onA2uiMessage geri çağırma işlevini çağırır.

Bu nedenle, tek yapmamız gereken bu mesajların her birini işlemciye ulaştığında iletmektir.

processInput işlevini çağırıp bir ayrıştırıcı ve mesaj veriyoruz.

Bu nedenle, processInput işlevi her mesajı ayrıştırır ve ardından işleyicinin kataloğa göre doğrulaması ve yüzey modellerini güncellemesi için işi sıraya koyar.

Bu nedenle, işlemci mevcut etkin yüzey modelleri grubunu activeSurfaces StateFlow olarak gösterir.

ChatSession, temsilci yanıtlarının kullanıcı arayüzü durumlarına yüzey modellerini ekleyerek oluşturma işlemini gerçekleştiren bir mantığa sahiptir.

Bu nedenle, bu activeSurfaces StateFlow'u ChatSession'a parametre olarak iletiriz.

Ayrıca, bahsettiğim gibi processInput işlevi, işlemci için işleri sıraya koyar.

Ancak işlemeye başlamak için arka plan iş parçacığında bir eş yordam başlatmamız gerekir.

Bunun için bir ViewModelScope kullanacağız ve varsayılan dağıtıcıyı ayarlayacağız.

Bu eş yordamda processor.collectMessages'ı çağırmamız yeterlidir.

Bu eş yordam etkinken işlemci, mesaj sırasındaki mesajları işler.

Bu nedenle, kullanıcı sohbet geçmişini temizlediğinde mevcut yüzeyleri de temizlememiz gerekir.

Bu nedenle, clearSurfaces'ı çağırırız.

Anladım.

İlk iki adımı tamamladık.

Kataloğu oluşturduk ve mesajları ayrıştırmak için işlemciyi oluşturduk.

Bir sonraki adımda, bu yanıtları kullanıcı arayüzümüzde oluşturmamız gerekiyor.

Bu nedenle, ayrıştırıcı tarafından ayrıştırılan bu yüzeyleri topluyoruz.

Kullanıcı arayüzümüzde bu kaynakları temsilci yanıt nesnesinde ileteceğiz ve bunlar üzerinde yineleme yapacağız.

Ardından, bu A2UI yüzey composable'ını kullanırız ve içeriği istediğimiz yere oluşturmak için modelleri tek tek işlerken her bir modeli bu composable'a iletiriz.

Burada dikkat edilmesi gereken bir nokta, temsilcinin çok fazla içerik göstermeyi seçmesi durumunda liste gibi bir şey kullanmayı tercih edebileceğidir.

Bu nedenle, düzgün şekilde oluşturulması için bu bileşende sınırlı yüksekliği maksimum yükseklik olarak ayarlamamız gerekir.

Böylece temel bir A2UI oluşturucu uygulamış olduk.

Şimdi uygulamamıza geri dönüp yeniden başlattıktan sonra istemi tekrar gönderirsek temsilci, gerçek bir kullanıcı arayüzü oluşturmak için bu aracı kullanır.

Bunu canlı olarak kodlayalım.

Bu, göz boyama değil.

Ancak evet, gerçek resimler kullanıyor.

Yalnızca metin yanıtı göstermek yerine sekmeler, iletişim kutuları, tarih seçiciler, kaydırma çubukları gibi uygulamanızı oluştururken kullanacağınız tüm standart Material bileşenlerini kullanıyor.

Bu, gerçek Materyal bileşenlerini kullanan gerçek bir uygulama olduğu için gerçek bileşenlerin yaptığı şeyleri yapar.

Yerel performansa benzer bir performansa sahiptir.

Burada koyu moda yanıt verme gibi işlemler yapar.

Bunlar Material bileşenleridir.

Renkleri, şekilleri, tipografiyi vb. özelleştirdiğiniz bir dış Materyal Teması Oluşturma composable'ınız varsa bu bileşenler bunları alır ve uygulamanızın geri kalanı gibi görünür.

Nick'in de belirttiği gibi, bunlar yerel Compose bileşenleri olduğundan yerel semantiklere sahiptir.

Bu, Compose'un tüm yerleşik erişilebilirlik özelliklerinin desteklendiği anlamına gelir.

Bu sayede TalkBack, yazı tipi ölçeklendirme ve klavyeyle gezinme gibi özellikler kullanıma hazır olur.

Çalışma zamanında yeni bir kullanıcı arayüzü oluşturmak için bir temsilci çağırdığınızdan biraz gecikme olabilir.

Temsilcinin yanıt vermesini beklemeniz gerekebilir.

Kitaplık, bu gecikmeyi en aza indirmek için elinden geleni yapar.

Bu nedenle, bu tür bir yöntem kullanırsak ne olduğunu ve bunu nasıl en aza indirdiğimizi göstermek için biraz daha yavaş göstermek amacıyla bazı bekleme süreleri ekleyeceğiz.

Evet, temsilcinin tam yanıtı yayınlaması biraz zaman alabileceğinden aşamalı oluşturma adlı bir yöntem kullanıyoruz.

Bu nedenle, kök bileşen gelir gelmez yüzeyin kullanıcı arayüzünü göstermeye başlarız.

Tüm kapsayıcı bileşenleri, alt öğeler henüz gelmediyse alt öğeleri için yükleme yer tutucuları gösterir.

Alt bileşenler geldiğinde Material 3 hareket şeması kullanılarak animasyonlu hale getirilir.

Anladım.

Şimdi de kitaplığın başka bir özelliğini göstermek için bir sonraki isteme geçelim.

Akşam yemeği için masa rezervasyonu yaptığımız başka bir istem daha var.

Temsilci bu kaydırma çubuğu bileşenini kullanmayı seçiyor. Evet, kullanmış.

Burada, temsilcinin anında oluşturduğu kullanıcı arayüzünü sürükleyip etkileşimde bulunabileceğinizi görebilirsiniz.

Ayrıca, yalnızca bileşendeki sayının değişmediğini, daha aşağıda sayımın yapıldığı bu biçim dizesinin de bulunduğunu görebilirsiniz.

Bunu güncellemek için temsilciye gidiş dönüş yapmıyor, değil mi?

Bu, çift yönlü bir bağlamadır.

Bu nedenle kaydırma çubuğu bileşeni, bu yüzeyin bellek içi veri modeline bağlıdır.

Veri modelinde aynı yola bağlanan tüm bileşenler, değer değiştiğinde otomatik olarak güncellenir.

Kaydırma çubuğu, görüntülenecek değeri okur ve kaydırma çubuğunu sürüklediğimde bu değeri modele geri yazarak günceller.

Tüm bunlar, temsilciye gidiş dönüş olmadan yerel olarak gerçekleşir.

Ancak temsilciden verileri güncellemesini de isteyebiliriz.

6 kişi yapalım.

Temsilci yanıt verirken kaydırıcıya dikkat edin.

6'ya yükseldi.

Şimdi temsilciden ne aldığımıza bakalım.

Temsilci, kullanıcı arayüzünün tamamen yeni bir açıklamasını göndermek yerine kaydırma çubuğunun yolunu güncelleyen küçük bir mesaj (updateDataModel) gönderdi.

Kaydırma çubuğu bu yola bağlı olduğundan yerinde güncellendi.

Bu nedenle, her yüzeyin veri modeli Compose anlık görüntü durumuna göre oluşturulur ve bir yola bağlı her bileşen özelliği türetilmiş bir durumdur.

Bu sayede, kullanıcı veya temsilci veri modelindeki değeri güncellediğinde aynı değere bağlı tüm bileşenler otomatik olarak yeniden oluşturulur.

Anladım.

Diyelim ki harekete geçmek ve rezervasyon düğmesine basmak istiyoruz. Bu durumda ne olacak Anton?

Şu anda hiçbir şey olmuyor.

Düğme bir işlem gönderir ancak bunu henüz temsilciye göndermeyiz.

Şimdi bu sorunu çözelim.

Girişleri işlemek için işlemciye bağlanmamız gerektiği gibi, kullanıcının temsilcinin oluşturduğu kullanıcı arayüzünde gerçekleştirdiği tüm çıkışlara ve işlemlere de bağlanmamız gerekir.

Bunun için işlemcinin sunduğu outboundEvents akışını kullanır ve bu akış üzerinden veri toplarız.

Bu, kullanıcının bir işleme dokunduğu veya kullanıcı arayüzüyle bir işlem gerçekleştirdiği durumlara göre istediğiniz mantığı ekleyebileceğiniz bir fırsattır.

Burada, ne yapılacağına karar vermesi için tüm işlemleri temsilciye geri gönderiyoruz. Ancak bu noktada kendi arka ucunuzu mu çağıracağınıza yoksa uygulamanızda farklı bir ekrana mı gideceğinize de karar verebilirsiniz. Bu size kalmış.

Anton bunu buraya ekledi. Şimdi rezervasyonu onayla işlemine bastığımızda, yaptığınız bu işlem temsilciye geri gönderilecek.

Bu noktada, arka uçta bazı işlevleri çağırmaya karar verebilirsiniz.

Şimdi temsilciye gerçekte ne gönderdiğimize bakalım.

Bu, A2UI işlem mesajıdır.

Bu işlem, bir bağlama sahiptir ve bağlam, bu işlem gerçekleştirildiğinde temsilcinin gönderilmesini istediği bir dizi özellik içerir.

Düğmeyi tıkladığımda bu özellikler, veri modelindeki mevcut değerlere göre çözümlenir ve temsilciye gönderilir.

Temsilci şu ana kadar bizimle oldukça iyi işbirliği yaptı ancak burada yapay zekadan bahsediyoruz ve yapay zeka hata yapabilir.

Şimdi temsilcinin bize geri bildirdiği kullanıcı arayüzünde hata yaptığını varsayalım.

Bu son istemde, size gösterebilmek için temsilciden hata yapmasını istiyoruz.

Bakalım ne olacak.

Evet.

Gördüğünüz gibi, bileşenlerden biri hata ile işaretlenmiş.

Bu sorun artık düzeltildi.

Bu, temsilcinin kendi kendini düzeltme döngüsüdür.

Her bileşen kullanıcı arayüzüne ulaşmadan önce mesajı katalog şemasına göre doğrularız.

Bileşen şemayla eşleşmiyorsa hata olarak işaretlenir.

Temel katalog uygulamasının oluşturucusu, kullanıcı arayüzünün geri kalanı gösterilmeye devam ederken bu hatanın söz konusu bileşene özel olduğunu gösterir.

Arka planda, oluşturucu temsilciye bir hata mesajı göndererek neyin yanlış gittiğini bildirir.

Bu durumda, "Mevcut olmayan bilinmeyen türdeki bileşen türü katalogda bulunamadı" şeklinde bir mesaj gönderdik.

Ardından temsilci, mevcut kullanıcı arayüzünü güncelleyen bir takip yanıtı gönderdi ve kullanıcı arayüzü düzeltildi.

Evet.

Material temel kataloğunun mevcut uygulamasında hataları hemen gösteriyoruz. Ancak özel bileşeninizde, temsilcinin hatayı düzeltmesini beklerken hata oluşursa bileşen için yükleme göstergesi göstermeye devam edebilirsiniz.

Bu şekilde hata kullanıcıdan tamamen gizlenebilir.

Kataloglar ve özel bileşenlerden bahsetmişken, şimdiye kadar yalnızca hazır olarak sunulan temel kataloğu kullandık ancak elbette bunu kendi ihtiyaçlarınıza göre özelleştirebilirsiniz.

Kataloğu oluşturmak için fabrika işlevini kullandığımızda tüm farklı bileşenler için varsayılan değerler kullanıldığını görebilirsiniz.

Böylece isterseniz kendi bileşenlerinizi kolayca ekleyebilirsiniz.

Örneğin, uygulamamızda kendi tasarım sistemimiz ve kendi düğmemiz varsa bunu kolayca ekleyebiliriz.

Kataloğun bir örneğini oluştururken bu parametreyi geçersiz kılarız ve bu bileşen tanımını oluştururuz.

Bunu uygulamak için yeni bir sınıf oluşturursak burada bir arayüz olduğunu görebilirsiniz. Bu, düğme türünde bir A2UI temel kataloğudur.

Bu arayüzü uygularsak kendi bileşenimizi ekleyebiliriz.

Evet.

Temel katalogdaki bir bileşeni geçersiz kıldığımız için bu A2UI temel katalog düğmesi arayüzünü uygulamamız gerekir.

Bu arayüzde bileşenle ilgili ad, açıklama ve özellik şeması gibi bazı bilgiler zaten mevcut.

Kendi sürümümüzü uygulamak için bu composable işlevi uygulamamız yeterlidir.

Birkaç parametre alır.

Bu parametreler, doğrulandıktan sonra temsilciden alınan değerlerdir.

Bunlar, düğmenin içeriği olacak bir bileşene referans veren alt kimlik gibi şeylerdir.

Ayrıca düğmenin türünü, işlem tanımını ve diğer bazı parametreleri açıklayan bir varyantı vardır.

Düğmenin üretim uygulamasında bu parametrelerin tümünü kullanmamız gerekir ancak demo amaçlarımız için yalnızca alt öğeye ve işleme ihtiyacımız vardır.

Şimdi bu composable'ı uygulayalım.

Bu composable işlevde kendi özel beğeni düğmesi türümüzü oluşturacağız.

Gördüğünüz gibi, A2UI tarafından sağlanan ve doğrulanan parametreleri kullanabiliyoruz.

Örneğin, onClick işlevinde bu işlemi gönderebiliriz.

Bu kitaplık türü DispatchAction'ı kullanabilir ve A2UI'nin tanımladığı işlemi buna iletebiliriz.

Bu nedenle kendi düğmemizi kullanıyoruz ancak yine de alt içeriği, etiketi veya temsilcinin kullanmaya karar verdiği her şeyi oluşturmak istiyoruz.

Bunu yapmak için observeA2uiComponentState işlevini kullanırız ve oluşturulması gereken alt içeriği işlemek için childId'yi iletiriz.

Ardından, bu A2uiComponent composable işlevini kullanıp alt bileşen durumunu ileterek oluşturacağız.

Burada, alt içeriği yalnızca başarıyla yüklendiğinde oluşturduğumuzu görebilirsiniz. Ancak yükleme işlemi devam ediyorsa veya hata durumu varsa kendi mantığınızı da kullanabilir, ne göstermek istediğinize karar verebilirsiniz.

Demo uygulamamızdaki örnek istemlerden birine geri dönelim ve düğmeyi standart Material düğmesiyle değiştirelim.

Çok hafif, umarım görebiliyorsunuzdur.

Burada da çok özel bir düğme kullandığımızı görebilirsiniz.

Harika, kitaplık türlerinden bazılarını bu şekilde değiştirebilirsiniz. Peki kitaplığı kendi özel türlerinizle genişletmek isterseniz ne yapmanız gerekir?

Bunu, kataloğa ekleme yaparak kolayca gerçekleştirebiliriz.

Anton, yıldız puanı bileşenini uygulamak için yeni bir sınıf oluşturacak.

Bu nedenle, bu hayali gezide restoranları değerlendirmemize olanak tanıyacak bir özellik ekleyeceğiz.

Mevcut bir bileşeni değiştirmediğimiz için bu daha genel arayüzü, yani A2UI bileşen arayüzünü kullanıyoruz. Gördüğünüz gibi, geçersiz kılmamız gereken birkaç parametre var.

İlk ikisi ad ve açıklamadır.

Bu, bileşenimizin ne olduğunu ve ne yaptığını açıklar.

Bunlar çok önemlidir. Kataloğu serileştirip arka uca göndererek kullanıcı arayüzü oluşturmak için neleri kullanabileceğini söylediğimizde, temsilci yanıt verirken bu bileşeni kullanıp kullanmayacağına karar vermek için bunu kullanır.

Bu nedenle, oldukça açıklayıcı olmanız ve yapay zekaya bunun ne işe yaradığını tam olarak bildiğinizi söylemeniz gerekir.

Geçersiz kılmamız gereken bir sonraki özellik, bu bileşenin hangi verilerle ilgilendiğini tanımlayan özellikler özelliğidir.

Bir restoranı puanlayabilmeniz için yıldız puanı çubuğu oluşturuyoruz. Bunun için iki özelliğe ihtiyacımız var.

Bu, kullanıcının seçtiği yıldız sayısı gibi bir değer olacak. Bu değer, kullanıcının etkileşimde bulunabileceği ve değiştirebileceği değişken bir özellik olacak. Ayrıca maksimum yıldız sayısını da içerecek.

Burada Anton'un değer için bu dinamik sayı türü özelliği kullandığını görebiliriz.

Bu, kaç yıldızın seçildiğini gösterir.

Bu değerin ne için olduğunu temsilciye açıklayan bir açıklama da vardır.

Ardından statik türde bir özelliğimiz var. Bu bileşenin gösterebileceği maksimum yıldız sayısını tanımlamak için sayı türündeki bu A2UI özelliğini kullanıyoruz.

Bu iki özelliği tanımladıktan sonra bunları döndürmemiz gerekir.

Bu nedenle, bu properties özelliğini geçersiz kılarak bir liste oluşturup bunları döndüreceğiz.

Bu şekilde, temsilciye bu bileşenin neyle ilgilendiğini söylemiş olursunuz.

Evet.

Nick'in de belirttiği gibi, bu özellik tanımları, temsilcinin bu bileşeni nasıl kullanacağını bilmesi için katalog şemasının bir parçası olarak gönderilir.

Ancak bu özellik, aynı özellik tanımları çalışma zamanında yazılan değerleri ayıklamak için de kullanılır.

Böylece tek doğruluk kaynağı olur.

Şimdi bunu uygulamak için ne yapmamız gerektiğine bakalım.

Öncelikle, maksimum özelliğine erişmek için maksimum özelliği statik bir özellik olduğundan temsilci, bu özelliğin değerini özellikler nesnesinde satır içi olarak gönderir.

Bu nedenle, erişmek için özellikler nesnesinden almamız gerekir. Bunun için de anahtar olarak proper-max özellik nesnesini kullanarak referans vermemiz gerekir.

Bu özellik bir sayı olarak tanımlandığından, bunu bir int'e dönüştürmemiz ve varsayılanı ayarlamamız da gerekir.

Sırada değer özelliği var.

Değer özelliği dinamik bir özellik olduğundan veri modelindeki bir öğeye referans verir.

Bu nedenle, erişmek için properties.bind API'yi kullanmamız ve özellik nesnesini parametre olarak bir anahtar olarak iletmemiz gerekir.

Bu yöntem, bu özellik için veri modelinde depolanan mevcut değeri döndürür ve gelecekteki güncellemeler için abone olur.

Bu nedenle, veri modeli her güncellendiğinde bu bileşen otomatik olarak yeniden oluşturulur.

Benzer şekilde, bunu da bir tam sayıya dönüştürdük ve varsayılan bir değer belirledik.

Derecelendirmeyi değiştirebilmek için iki yönlü bağlama oluşturmamız gerekiyor.

Bunun için bindUpdater API'yi kullanırız.

Özelliği tanımlayan aynı özellik nesnesini iletiriz ve sonuç olarak bindUpdater, veri modelinde bu özelliğin değerini değiştirmemize olanak tanıyan bir lambda döndürür.

Artık yıldız puanı bileşenimizi yayınlamaya hazırız.

Anladım.

Kendi özel bileşenimizi tanımladığımıza göre artık bunu kullandığımız kataloğa eklememiz gerekiyor.

Daha önce temel kataloğu olduğu gibi kullanıyorduk.

Şimdi yapmamız gereken, temel kataloğu alıp özel bileşenimizi ekleyecek yeni bir katalog oluşturmak.

Katalog üç unsurdan oluşur.

Bir kimlik, bir dizi bileşen ve bir dizi işlevden oluşur.

Kimlik için, kataloğu ve üzerinde çalıştığımız sürümü benzersiz şekilde tanımlayan bir URI kullanacağız.

Bileşenler için ise temel katalogdaki tüm bileşenleri alıp ekleme operatörünü kullanarak az önce oluşturduğumuz özel bileşeni ekleyeceğiz.

İşlevler için ise temel katalogdaki işlevleri kullanacağız.

Böylece, yeni özel bileşen türümüzü eklemek için temel kataloğu genişletmiş olduk.

Gördüğünüz gibi, özel katalog oluşturmak oldukça kolay.

Yani temsilci, kataloğu nasıl kullanacağını kendisine gönderdiğimiz sistem talimatlarından öğrenir.

Özel bir katalog oluşturduğumuza göre sistem talimatlarını da güncelleyelim.

Bu nedenle, katalog nesnesini sistem talimatlarını oluşturan işlevimize ileteceğiz.

İşte karşınızda.

Şimdiye kadar bu standart kataloğu kullandığımız için temel katalog şemasının statik bir tanımını gönderiyorduk.

Özel bir kataloğumuz olduğuna göre toJsonSchemaString işlevini kullanarak şemayı dinamik olarak oluşturabiliriz.

Bu işlem, az önce eklediğimiz yıldız puanı bileşeni de dahil olmak üzere bu kataloğun tam bir JSON temsilini oluşturur.

Sistem talimatları, temsilci için bazı örnek yanıtlar da içerir.

Bu nedenle, örneklerin doğru kataloğa referans vermesi için katalog kimliğini de burada değiştiriyoruz.

Anladım.

Böylece temel kataloğu genişleterek kendi özel türlerimizi eklemiş olduk.

Bunu yeniden dağıtıp bu istemlerden birini denersek derecelendirme kullanıcı arayüzü elde ederiz.

Ardından temsilci yanıt verir.

Burada, temsilcinin daha önce hiç görmediği ve az önce uyguladığımız yepyeni bir bileşen olan yıldız bileşenini görebilirsiniz.

Bu, temel kataloğun bir parçası değil, bunu yeni oluşturduk.

Yıldızı tıkladığımda bindUpdater lambda çağrılır ve veri modelindeki değer güncellenir.

Derecelendirmeleri gönderdiğimizde işleme göz atabiliriz. İşlemin bağlamı, az önce ayarladığımız değerleri içerir.

Şimdi slaytlara geri dönebiliriz.

Kısa sürede çok fazla konuya değindik. Ancak umarız, ajanların düz metin olarak yanıt vermesini sağlamaktan gerçek yerel kullanıcı arayüzleri oluşturmasını sağlamaya nasıl kolayca geçebileceğinizi gösterebilmişizdir.

Entegrasyonun oldukça kolay olduğunu size gösterebildiğimizi umuyoruz.

Bunun için üç ana bileşeni uygulamanız gerekir: Bileşen kataloğu oluşturmak, ayrıştırma mantığı uygulamak ve bunu kullanıcı arayüzünüzde oluşturmak.

Ayrıca, kitaplığın sizin için hazır olarak sunduğu birçok özellik olduğunu gösterdik. Örneğin, aşamalı oluşturma veya şemanızı doğrulama, kendi kendini düzeltme döngüleri veya hata işleme gibi birçok özellik sunuyor.

Bugün, bu aracı özelleştirmenin ne kadar kolay olduğunu da hızlıca gösterdik.

Materyal kullanıyorsanız temel kataloğun Materyal Teması Oluşturma'nıza nasıl yanıt verdiğini gösterdik ancak katalogdaki bileşenleri genişletmek veya değiştirmek gerçekten çok kolay.

Ancak bence en etkili yöntemlerden biri kendi kataloğunuzu oluşturmak.

Temsilcinin kullanabileceği kullanıcı arayüzü üzerinde en fazla kontrole sahip olmak istiyorsanız tamamen özel bileşenler oluşturabilirsiniz.

Tamamen serbest bırakmak isterseniz metin etiketleri ve düğmeler gibi çok temel bileşenler verip "Kullanıcı arayüzünü sen oluştur." diyebilirsiniz.

Daha fazla kontrol istiyorsanız daha ayrıntılı bileşenler oluşturup "Yalnızca bunları kullanabilirsin" diyebilirsiniz.

Yani temsilcinin neler yapabileceğini ve kullanıcılarınıza neler gösterebileceğini siz kontrol edersiniz.

Bu, yeni kullanıma sunduğumuz yeni A2UI oluşturucu kitaplığı ve Jetpack kitaplığıdır.

implementation("androidx.compose.material3:material3-a2ui:1.0.0-alpha02")

Şu anda alfa sürümünde. Alfa 02 kısa süre önce yayınlandı.

Bu bağlantıları takip ederek göz atabilirsiniz.

developer.android.com adresinde belgelerimiz ve birkaç örneğimiz var.

Temel kataloğu gösteren basit bir örneğimiz ve daha ayrıntılı bir örneğimiz var. Ayrıca, az önce oluşturduğumuz ve bugün ilerleyen saatlerde ADS açılış konuşmasında tekrar göreceğiniz bu JetPacker örnek uygulaması, kullanıcının gördüklerini kontrol etmek için bu tür daha ayrıntılı bileşenleri nasıl oluşturabileceğinizi gösteriyor.

Dediğim gibi, şu anda alfa aşamasındayız. Bu nedenle, aracı incelemek, geri bildirimlerinizi ve özellik isteklerinizi bizimle paylaşmak, aracı nasıl kullanmak istediğinizi veya hangi özellikleri eklememizi istediğinizi söylemek için harika bir zaman.

Bu nedenle, lütfen kitaplığa göz atın ve geri bildirimlerinizi bizimle paylaşın.

Biz de bunu yaptık.

Sizin ve temsilcilerinizin bu araçla neler yapacağınızı görmek için sabırsızlanıyorum.

Çok teşekkürler.

Teşekkür ederiz.