Web Uygulaması İş Akışı

AppMaster Web Designer'da, Arka Uç mantığına ek olarak Ön Uç tarafındaki web uygulamaları için iş mantığını yapılandırabilirsiniz. Bu güçlü özellik, belirli iş ihtiyaçlarına göre uyarlanmış gelişmiş, dinamik web uygulamaları oluşturmanıza olanak tanır.

Bir web uygulaması bağlamında iş süreçleri, kullanıcı kimlik doğrulamasını, veri işlemeyi, çevrimiçi işlemleri, içerik yönetimini, müşteri hizmetleri operasyonlarını ve koşullara bağlı olarak kullanıcı arayüzü öğelerinin özelleştirilmesini içerebilir.

AppMaster Web Designer'da Üç Düzey İş Mantığı:

• Uygulama Tetikleyicileri: Bunlar, uygulama çapındaki olaylara veya durumlara yanıt vererek belirli iş süreçlerini başlatan üst düzey tetikleyicilerdir.
• Genel İş Süreçleri: Bunlar, uygulamanın çeşitli bölümlerine uygulanabilen, görevleri otomatikleştiren ve iş akışlarını kolaylaştıran önceden tanımlanmış işlem kümeleridir.
• Öğe Tetikleyicileri: Uygulama tetikleyicilerinden daha ayrıntılı olan bunlar, belirli kullanıcı arayüzü öğelerine bağlanır ve bu öğelerle etkileşimlere dayalı olarak iş süreçlerini etkinleştirir.

AppMaster Web Designer, bu düzeydeki iş mantığından yararlanarak, yalnızca görsel olarak çekici değil aynı zamanda akıllı ve kullanıcı ihtiyaçlarına ve davranışlarına duyarlı web uygulamaları oluşturmanıza olanak tanır.

🔔 BP'yi başlatmak için herhangi bir yeni iş mantığı ekledikten sonra çalışan önizlemeyi yeniden yüklemek önemlidir.

Uygulama Tetikleyicileri

AppMaster Web Designer'daki Uygulama Tetikleyicileri , işlevselliği ve kullanıcı deneyimini geliştirmek için uygulama çapındaki olaylara veya belirli iş süreçlerinde yürütme çalıştıran durumlara yanıt veren üst düzey tetikleyicilerdir.

AppMaster, her biri belirli senaryolar için tasarlanmış çeşitli Uygulama Tetikleyicileri sunar:

• Uygulama Başlatıldığında: Uygulama başlatıldığında etkinleştirilir; ilk kurulum prosedürleri için idealdir.
• Uygulamada Gezinme: Uygulamanın farklı bölümleri arasında gezinme sırasında tetiklenir.
• Uygulama Bulanıklaştırmasında: Uygulama odağı kaybettiğinde tetiklenir; eylemleri duraklatmak veya kaydetmek için kullanışlıdır.
• Uygulama Odaklandığında: Uygulama yeniden odaklandığında yürütülür; içeriği sürdürmek veya güncellemek için idealdir.
• Uygulamada Gizli: Uygulama simge durumuna küçültüldüğünde veya ekranda görünmediğinde etkinleştirilir.
• Uygulamada Görünürde: Uygulama tekrar görünür hale geldiğinde tetiklenir; içeriği yenilemek için kullanışlıdır.
• Uygulama Yok Edildiğinde: Uygulamanın kapanma işlemi sırasında yürütülür.
• Çevrimiçi Uygulamada: Uygulama çevrimiçi bir durum algıladığında tetiklenir; verileri senkronize etmek için mükemmeldir.
• Uygulamada Çevrimdışı: Uygulama çevrimdışı olduğunda etkinleşerek çevrimdışı işlevleri etkinleştirir.
• Uygulama Kimlik Doğrulaması Gerektiğinde: "401 (Yetkisiz)" yanıtı alındığında etkinleştirilir ve kullanıcının yeniden kimlik doğrulaması yapması istenir.
• Uygulama Yasaklandığında: Genellikle erişim kontrolü ve izinler için kullanılan "403 (Yasak)" yanıtını tetikler.

Uygulama tetikleyicilerinin tam listesi, uygulamanızın Arka Uç düzeyinde WebSocket Uç Noktaları oluşturularak genişletilebilir.

Bu tetikleyiciler, başlatma sırasında kullanıcı yetkilendirmesini yönetmek, erişim haklarını doğrulamak, yetkilendirme değişiklikleri üzerine yeniden yönlendirmeyi yapılandırmak, hataları işlemek ve çok daha fazlası için kullanılabilir; bu da onları hızlı yanıt veren ve güvenli bir web uygulaması oluşturmada vazgeçilmez kılar.

Genel İş Süreçleri

AppMaster Web Designer'daki Genel İş Süreçleri, tekrarlanan işlemleri ve yedekli mantığı farklı akışlar halinde kapsüllemek için özel olarak tasarlanmıştır. Bu iş süreçleri bir kez oluşturulduktan sonra, web uygulamanızın iş süreçlerinin herhangi bir düzeyine farklı bloklar halinde sorunsuz bir şekilde entegre edilebilir.

Ana Özellikler:

• Verimli İş Akışı Yönetimi: Ortak görevleri Genel İş Süreçlerine taşıyarak, tekrarlamayı önemli ölçüde azaltır ve uygulamanızın iş akışını kolaylaştırırsınız.
• Ön Uç İşlevselliği: Genel İş Süreçleri, Arka Uç iş süreçlerinin işlevselliğini yansıtırken, Ön Uçta benzersiz bir şekilde yürütülür. Bu, kullanıcı arayüzünde daha hızlı etkileşimlere ve anında geri bildirime olanak tanır.

Yeniden Kullanım Kolaylığı:

Mantık oluştururken bir Genel İş Sürecini kullanmak için, istediğiniz bloğu Kullanıcı Tarafından Oluşturulan BP'ler grubundan tuvalinize sürüklemeniz yeterlidir.

🔔 Performansın Dikkate Alınması: Karmaşık ve kaynak yoğun görevler için bu işlemlerin sunucu tarafında (Arka Uç) yürütülmesini tavsiye ettiğimizi unutmamak önemlidir. Bu yaklaşım, özellikle hesaplama gerektiren veya hassas verilerin güvenli bir şekilde işlenmesini gerektiren işlemler için daha iyi performans ve verimlilik sağlar.

Öğe Tetikleyicileri

AppMaster Web Designer'daki Bileşen Tetikleyicileri, web uygulamalarınıza etkileşim eklemek için gereklidir. Bu tetikleyiciler belirli kullanıcı arayüzü öğelerine bağlı olup, kullanıcı etkileşimlerine yanıt olarak önceden tanımlanmış iş süreçlerini etkinleştirir. Uygulamanızdaki her bileşen, dinamik ve ilgi çekici bir kullanıcı deneyimi oluşturmak için özelleştirilebilen bir dizi tetikleyiciye sahiptir:

• Ortak Tetikleyiciler: Bileşenler, bileşenin yaşam döngüsüne ve görünürlük değişikliklerine yanıt veren onCreate , onDestroy , onShow ve onHide gibi bir dizi standart tetikleyiciyi paylaşır.
• Spesifik Tetikleyiciler: Ortak tetikleyicilere ek olarak bileşenlerin, işlevlerine göre uyarlanmış benzersiz tetikleyicileri vardır. Örneğin, bir Button'ın bir onClick tetikleyicisi olabilir, bir Table onUpdateData'ya yanıt verebilir ve bir Tabs'ın bir onTabSelect tetikleyicisi olabilir.

Çeşitliliğe rağmen temel prensip tutarlı kalıyor: Bir olay, buna karşılık gelen bir iş sürecini tetikler. Bileşen Tetikleyicilerini etkili bir şekilde kullanarak, kullanıcı girdilerine gerçek zamanlı olarak tepki veren, genel kullanıcı deneyimini geliştiren ve uygulamanızı daha sezgisel ve kullanıcı dostu hale getiren etkileşimli ve duyarlı bir web uygulaması oluşturabilirsiniz.

Tetikleyicilere Erişim

Bir bileşenin tetikleyicilerini görüntülemek ve yapılandırmak için tuval üzerinde bileşeni seçin ve sağ kenar çubuğundaki 'İş Akışı' sekmesine gidin. Burada mevcut tetikleyicilerin bir listesini bulacaksınız. Birine tıklamak, istediğiniz iş sürecini ona eklemenizi sağlar. Mantık eklenmiş tetikleyiciler, kolay tanımlama için mavi renkle vurgulanır.

İş Süreçleri Oluşturma

Bir bileşen tetikleyicisi için bir iş süreci ayarlamak, Modül 4'te görüldüğü gibi, arka uç iş süreci oluşturmaya benzer bir yaklaşımı izler. Farklı eylemleri temsil eden blokların eklendiği ortak bir tuval kullanacaksınız. Bu bloklar arasındaki bağlantılar, eylem sırasını tanımlayarak karmaşık iş akışlarını sezgisel olarak oluşturmanıza olanak tanır.

Uygulama İş Akışı Oluşturma

Hesapla butonu için böyle bir iş süreci oluşturalım. Öncelikle butona tıkladığımızda ne yapmamız gerektiğine karar verelim:

• X ve Y değerlerini bulun. Bunları ilgili giriş alanlarından alın.
• Hesaplamalar için bir uç nokta başlatın ve X ve Y parametrelerini ona iletin.
• Sonuç kapsayıcısını görünür hale getirin.
• Hesaplama sonucunu gerekli Etiket alanlarına koyun.

Kanvastaki Calc Button öğemizi seçin ve onClick Tetikleyicisine tıklayın.

İş süreci editörü açık olacaktır. Burada buton için iş sürecimizi oluşturacağız.

Girdilerden Değer Al

İlk adım kullanıcı tarafından girilen değerleri almaktır. Bunun için AppMaster, giriş parametresi olarak bir 'Element Anahtarı' içeren ve esasen belirtilen bileşenden mevcut değerleri okuyan 'Değer' çıktısını veren Giriş Kayan Veri Alma bloğunu sağlar.

İki ayrı alanımız olduğundan (X ve Y değerlerini temsil eder), her giriş alanı için bir tane olmak üzere iki 'Giriş Kayan Veri Al' bloğu kullanmanız gerekecektir.

Ayarlamak için:

• Her giriş alanı için iki Giriş Kayan Veri Bloğunu tuvalinize sürükleyin.
• Her bloğun Eleman Anahtarını ilgili Kayan Girişlere karşılık gelecek şekilde ayarlayın. Bu, bloğu doğru kullanıcı arayüzü öğesine bağlayarak bloğun doğru verileri okumasını sağlar.

Arayüzü oluştururken öğelerinizi daha önce UI Designer'da yeniden adlandırdıysanız, her blok için gerekli bileşeni bulmak ve seçmek kolaylaşır.

☝️ Tasarım aşamasında öğelerin yeniden adlandırılması, bunların daha sonra iş mantığı yapılandırması sırasında kolayca tanımlanmasına yardımcı olur.

Uç Noktayı Başlatın

Kullanıcı girişlerinin alınmasının ardından web uygulamanızın iş akışındaki sonraki aşama Endpoint'i başlatmaktır. Bu kritik adım, web uygulamanızın Ön Uç (kullanıcı arayüzü) ile Arka Uç (sunucu tarafı işlemleri) arasındaki bağlantıyı kurar ve hesaplama komutları tarayıcıdan sunucuya iletilir.

AppMaster'daki uç noktalar, uygulama içinde ayrı iş süreci blokları olarak temsil edilir. Uç noktalarımızı kullanmak için iş süreci blokları listesinden uygun olanı seçip tuvalinize sürüklemeniz yeterlidir.

Modül 5'te , GET yöntemiyle bir uç nokta yapılandırdık ve ona "module4-basic" temel URL'sini atadık. Bunu - Sunucu isteği GET /module4-basic/ olarak listelenmiş olarak bulmalı ve tuvale sürüklemelisiniz.

Bileşenlerden farklı olarak AppMaster uç noktaları, önceden tanımlandığı için kimlik ayarlarının yapılmasını gerektirmez. Bu özellik, uç noktaları iş mantığınıza entegre etme sürecini kolaylaştırır.

Son adım, önceki adımdan elde ettiğiniz X ve Y değerlerini Uç Noktaya girmektir. Bu, arka ucun bu girdileri alıp işlemesine ve gerekli hesaplamaları yapmasına olanak tanır.

Kullanıcı Arayüzü Öğelerinin Durumu

Web uygulaması iş akışınızdaki bir sonraki adım, kapsayıcıların görünürlüğünü yönetmektir; özellikle sonuçları görüntüleyen kapsayıcıyı göstermek ve ipucu içeren kapsayıcıyı gizlemek.

Bunu nasıl başaracağınız aşağıda açıklanmıştır:

1. İki Flex Güncelleme Özellikleri bloğunu tuvalinize sürükleyerek başlayın.
2. Her Flex Güncelleme Özellikleri bloğu için, ilgili kapsayıcılara karşılık gelen Öğe Anahtarı parametresini (biri sonuç kapsayıcısı için, diğeri ipucu kapsayıcısı için) atayın.
3. Bu blokların içindeki görünürlük parametresini yapılandırın. Sonuç kapsayıcısı için Görünür parametresini Doğru olarak ayarlayın ve hesaplama sonrasında görünür olmasını sağlayın. Bunun tersine, ipucu kapsayıcısının hesaplama tamamlandıktan sonra gizlemesi için bu parametreyi Yanlış olarak ayarlayın.

Bu adımları uygulayarak uygulama arayüzünüzde dinamik bir yanıt oluşturursunuz. Hesaplamalar yapmak için bir düğmeye tıklamak gibi bir kullanıcının eylemini takiben uygulama, ipucu kabını otomatik olarak gizler ve sonuç kabını görüntüler.

Bu yalnızca kullanıcı deneyimini geliştirmekle kalmaz, aynı zamanda uygulama arayüzünüzü temiz tutar ve etkileşimin her aşamasında ilgili bilgilere odaklanmasını sağlar.

Gerçek Zamanlı Önizleme

İş sürecinizin ilerleyişini değerlendirmek için ara sonuçları kolayca önizleyebilirsiniz:

1. Öncelikle iş süreci düzenleyicisindeki Kaydet ve Çık düğmesine tıklayın. Bu eylem mevcut iş akışınızı kaydedecek ve iş süreci düzenleyicisini kapatacaktır.
2. Uygulamayla etkileşimi sanki canlıymış gibi kontrol etmek için web uygulamanızın gerçek zamanlı önizlemesini çalıştırın.
3. Hesapla düğmesini tıklatarak işlevselliği test edin.

İş süreciniz doğru şekilde ayarlanmışsa, dinamik yanıtı göreceksiniz: ipucu içeren kapsayıcı gizlenecek ve aynı zamanda sonuçları görüntüleyen kapsayıcı da ortaya çıkacaktır.

Bu test yöntemi, iş süreçlerinizin amaçlandığı gibi çalıştığından emin olmak için pratik ve hızlı bir yol sunar ve başvurunuzu sonuçlandırmadan önce gerekli ayarlamaları yapmanıza olanak tanır.

Veri İşleme

Uygulamanızın mantığını başarıyla test ettikten sonra iş mantığınızı daha da hassaslaştırmanın zamanı geldi.

Son adım, hesaplanan sonuçların web uygulamanızın arayüzünde görüntülenmesini içerir. Arka uç iş sürecimizin çıktı verilerini web uygulamanızın ilgili kullanıcı arayüzü öğeleriyle eşleştireceğiz.

Arka uçtan gelen sonuçların önceden belirlenmiş bir sırayla döndürüldüğü göz önüne alındığında, göreviniz her veri parçasını (dizi öğesi) kullanıcı arayüzünüzdeki doğru Metin Bloğu öğesiyle hizalamaktır.

Veri işleme için aşağıdaki blokları kullanacağız:

• Dizi Öğesi : sonuç dizisi içindeki ayrı ayrı öğelere erişmek için bunları kullanın. Her indeks için 0'dan 4'e kadar bir bloğa ihtiyacınız olacak.
• Metne: Verileriniz Float formatında olduğundan, bu Float değerlerini görüntülenmeye uygun bir metin formatına dönüştürmek için bu bloğu kullanın.
• Metin Bloğu Güncelleme Verileri: Bu blok, kullanıcı arayüzünüzdeki metin bloklarını dönüştürülen metin verileriyle doldurmak için gereklidir.

Bu bloklar, sonuçlar dizisinden verileri çıkaracak, verileri metin biçimine dönüştürecek ve ardından kullanıcı arayüzünüzde karşılık gelen metin bloklarını güncelleyecektir.

Bunu nasıl ayarlayacağınız aşağıda açıklanmıştır:

1. Bu blokları tuvalin üzerine yerleştirin.
2. Dizi Öğesi bloğunda uç noktanızdan alınan diziyi girin (0'dan başlayın).
3. Dizi içindeki uygun öğeyi hedeflemek için Dizini ayarlayın.
4. Dizi Öğesinin çıkış Değerini To Text bloğuna bağlayın.
5. Verilerin görüntülenmesini istediğiniz UI öğeniz için Metin Bloğu Güncelleme Verilerindeki Öğe Anahtarını belirtin.
6. Blokları sırayla bağlayın.

Görüntülemek istediğiniz dizideki her öğe için bu blok dizisini çoğaltın. Her bir 'Dizi Öğesi' bloğundaki dizini, dizinin farklı öğelerine karşılık gelecek şekilde ayarlayın.

Bu blokların da sırayla bağlandığından emin olun.

Son sonuç

Bu, iş sürecinin oluşturulmasını tamamlar.

İş sürecinizi kaydedin ve önizlemede nihai sonucu kontrol edin. Modül 5'te uç noktanızı yayınladığınız dağıtım planında bir Uygulama Önizlemesi çalıştırın.

🎉 Bu muhteşem başarıyı tebrik ederiz!

İş mantığına ve etkileşimli kullanıcı arayüzüne sahip, tamamen işlevsel bir web uygulamasını başarıyla geliştirdiniz. Her şey planlandığı gibi giderse artık uygulamanızı yayınlama ve kullanıcılarla paylaşma şeklindeki bir sonraki son adımı atmaya hazırsınız.

Ancak yolculuk burada bitmiyor. Başvurunuzu daha da geliştirmek için bolca fırsat var! Kullanıcı arayüzü öğelerinizin görünümünü özelleştirerek veya web uygulaması mantığınızı genişleterek görsel çekiciliği ve kullanıcı deneyimini artırabilirsiniz. Örneğin, her girişi manuel olarak temizlemeden alanları gerekli hale getirebilir ve alanları sıfırlamak için bir düğme ekleyebilirsiniz.