Skip to main content

Uygulama geliştirme eğitimi

Bu bölümde size IBAX Ağı üzerinde basit bir uygulamanın nasıl geliştirileceğini göstereceğiz.

Amaç​

Uygulama basit işlevlerle başlar, ancak öğretici ilerledikçe karmaşıklığı artar.

Uygulamanın son sürümünde, bazı basit mesajlar (dizeler), gönderenlerin zaman damgalarını ve hesap tanımlayıcılarını içeren bir veritabanı tablosunda saklanır. Kullanıcılar, ekosistem menüsünden erişilebilen uygulama sayfasından mesaj listesini görüntüleyebilir ve yeni bir mesaj ekleyebilir.

Bölüm 1: Environment​

Weaver

IBAX'in tek müşterisi olan Weaver, tüm kullanıcılar ve ekosistem rolleri için işlevler sağlar. Bununla uygulama geliştiriciler uygulamalarını geliştirebilir ve test edebilir, ekosistem yöneticileri ekosistemlerini yönetebilir ve kullanıcılar ekosistemlerle etkileşime girebilir.

Bu eğitimde, Weaver'da sözleşmeleri, sayfa şablonlarını kodlayacak ve diğer tüm eylemleri gerçekleştireceksiniz. Weaver ayrıca sözleşme kodlarını geri yüklemek, kaydetmek ve yürütmek, veri yapılarını (veritabanı tabloları) yönetmek, erişim izinleri atamak ve uygulamalar oluşturmak için bir yol sağlar.

Her düğümün kendi Weaver örneği vardır.

2. Bölüm: Sözleşme​

İlk basit uygulamanız "Merhaba Dünya!"

Not

Bu uygulamada dizeler bir veritabanı tablosunda tutulacak ve bir kullanıcı sayfası yok.

Oluşturucu hesabı​

Geliştirici rolüne sahip hesaplara ekosistemin "kök" ayrıcalıkları atanacaktır. Varsayılan olarak, bu rol tüm eylemlere erişebilir. Yeni bir ekosistemde, oluşturucu hesaba, ekosistemde yeni uygulamalar ve veritabanı tabloları oluşturmak gibi büyük değişiklikler yapmak için kullanmanız gereken Yönetici rolü atanacaktır.

İçerik oluşturucu hesabını kullanarak ekosisteme giriş yapın.

Yeni uygulama​

Ekosistem yaratıcısı olarak oturum açtıktan sonra yeni bir uygulama oluşturabilirsiniz.

Yeni bir Uygulama Yarat:

  1. Geliştirici sekmesine gidin;

  2. Soldaki menüden Uygulama'yı seçin;

  3. Uygulama sayfasında Yeni'yi seçin;

  4. Ad alanında uygulama adını belirtin;

  5. Koşullar'ı "doğru" olarak ayarlayın;

"true", herkesin uygulamada değişiklik yapabileceği anlamına gelir;

Başka bir seçenek de ContractConditions("MainCondition") olup, bu, yaratıcısı dışında hiç kimsenin uygulamada değişiklik yapamayacağı anlamına gelir.

  1. Uygulamanız uygulamalar listesinde görüntülenecektir, etkinleştirmek için belirli bir uygulamanın Ad alanına tıklayın.

Not

Geliştirici sekmesinde bir uygulamaya tıklayarak ilgili kaynaklara erişebilirsiniz, ekosistem üzerinde hiçbir etkisi yoktur. Hangisini seçerseniz seçin, tüm ekosistem uygulamaları hala mevcuttur.

Yeni veritabanı tablosu​

Verileri depolamak için Weaver'da uygulama için bir veritabanı tablosu oluşturun.

Bir veri tablosu oluşturun:

  1. Geliştirici sekmesinde, Uygulama - Ad > Veritabanı tablosu'nu seçin;

Seçilen uygulamaya ilişkin tüm veritabanı tabloları burada görüntülenecektir. Liste boşsa, uygulamanız için henüz hiçbir veritabanı tablosu oluşturulmamıştır.

  1. Yeni；'ye tıklayın

Weaver, yeni bir veritabanı tablosu oluşturmanız için size sayfayı gösterecektir.

  1. Ad alanında adı belirtin;

Bu öğreticide, veritabanı tablosunun adı 'apptable' olacaktır.

  1. "Mesaj" sütununu ekleyin, türünü "Metin" olarak ayarlayın;

Bu tablonun iki sütunu olmalıdır: "id" (ön tanımlı) ve "message". Daha sonra daha fazla sütun ekleyeceksiniz.

  1. Okuma ve yazma izinleriyle ilgili olarak, her alanı 'true' olarak ayarlayın;

Bu, herkesin veritabanı tablosuna giriş eklemesine, girişleri güncellemesine, sütun eklemesine ve giriş verilerini okumasına olanak tanır;

Bir seçenek olarak, yaratıcı hesabına okuma ve yazma izinlerini ayırabilirsiniz. Bu durumda, bu alanı ContractConditions("MainCondition") olarak ayarlayın.

Yeni Kontrat​

Kontrat kodu​

Her sözleşmenin üç bölümü vardır. Daha fazla ayrıntı için lütfen bakınız: Sözleşme yapısı。

Bir kontrat oluşturun​

  1. Geliştirici sekmesinde, Uygulama - Ad > Kontratı seçin;

Uygulama ile ilgili tüm sözleşmeler burada görüntülenecektir. Yeni uygulamalar için liste boştur.

  1. Yeni'yi tıklayın;

Düzenleyicide yeni bir sözleşme şablonu görüntülenecektir.

Boş bir sözleşme şablonu aşağıdaki gibi gösterilir:

contract ... {
    data {

    }
    conditions {

    }
    action {

    }
}

Kontrat adı​

İlk olarak, lütfen sözleşme adını belirtin.

    contract AppContract {

    }

Data​

'data' bölümünü doldurun.

Aşağıdaki örnekte, "Mesaj" değişken adını belirtirken, "string" değişken türünü ifade eder.

data {
    Message string
}

Conditions​

"Koşullar" bölümünü doldurun. Basit bir doğrulama koşulu, boş dizelerden kaçınmaktır. Messageın uzunluğu 0 ise, sözleşme uygulanırken önceden tanımlanmış bir uyarı mesajı tetiklenecektir.

conditions {
    // avoid writing empty strings
    if Size($Message) == 0 {
        error "Message is empty"
    }
}

Action​

'action' bölümünü doldurun. Basit bir işlem, veri tablosuna "message" yazmaktır.

    action {
        DBInsert("apptable", {message: $Message})
    }

Tam kontrat kodu​

Tam kontrat kodu aşağıda gösterilmiştir.

IBAX'teki tüm kontratlar, "data", "conditons" ve "action" bölümleri dahil olmak üzere bu şekilde oluşturulacaktır.

contract AppContract {
    data {
        Message string
    }
    conditions {
        // avoid writing empty strings
        if Size($Message) == 0 {
            error "Message is empty"
        }
    }
    action {
        DBInsert("apptable", {message: $Message})
    }
}

Kaydet ve çalıştır​

Şimdi, sözleşmeyi test etmeye hazırlanıyoruz:

  1. Editörün menüsünde Kaydet'e tıklayın;

Bu, sözleşme kodunu güncelleyecek ve güncellenmiş sürüm tüm ağ düğümleri için geçerli olacaktır.

  1. Editörün menüsünde Çalıştır'a tıklayın;

Bu, Sözleşmeyi Çalıştır sayfasını görüntüler.

  1. Sözleşmeyi Çalıştır sayfasında, sözleşmenin giriş parametrelerini girin;

Bu sözleşmenin bir "Message" parametresi olduğundan, Anahtar alanına "Message" ve Değer alanına "Merhaba, Dünya"yı ayarlayın.

  1. Çalıştır'a tıklayın.

Sonuç sağda görüntülenecektir.

Bazı diziler başarıyla eklendiyse, sonuç, işlemlerin değişikliğini tanıtmak için blok kimliğini ve sonuç kodunu içerecektir.

{
 "block": "31",
 "result": null
}

Bölüm 3: Sayfa​

Sözleşme yürürlüğe girdiğinde, onu yararlı bir şeye genişletmenin zamanı geldi. Bu bölümde, UI ve diğer işlevleri uygulayacaksınız.

Not

Bu uygulamada, dizeler, bir günlükteki girişler gibi bir veritabanı tablosunda saklanacaktır. Her dizenin bir yazarı ve zaman damgası olacaktır.

Kullanıcılar, daha sonra basit bir form olarak gösterilen uygulama sayfasında saklanan dizelerin listesini görüntüleyebilir.

New field​

Öncekinde olduğu gibi, Geliştirici sekmesi > Uygulama - Ad > Veritabanı tablosu sayfasında veritabanı tablosunu düzenleyin;

apptable içine aşağıdaki alanları ekleyin:

  • author , Number alan türü, Değiştir'i true olarak ayarlayın;

Bu alan, author hesabının tanımlayıcısını saklayacaktır.

  • timestamp , Date/Time alan türü, Change'i 'true' olarak ayarlayın.

Kontratı güncelleyin​

AuthorID ve timestamp işlemek için kontrat kodunu güncelleyeceğiz.

Yazar kimliği, ekosistemin hesap kimliğidir. Timestamp, sözleşmenin Unix zaman biçiminde yürütüldüğü tarih ve saattir.

Her iki değer de Önceden tanımlanmış değişkenler tarafından sağlandığından ve önceden tanımlanmış değişkenlerin girilmesine veya doğrulanmasına gerek olmadığından, bunlar yalnızca işlem bölümünde güncellenebilir.

AuthorID "keyid",timestampise"key_id", timestamp ise "time" ile tanımlandığı bir mesaj eklerken veritabanı tablosuna AuthorID ve timestamp yazmak için sözleşmeyi güncelleyin.

action {
 DBInsert("apptable", {message: $Message, author: $key_id, timestamp: $time})
}

Sayfa​

Uygulama sayfası için, veritabanı tablosunda saklanan mesajların görüntülendiği basit bir sayfadır.

Diğer tüm kaynaklar gibi, UI sayfasını Weaver'da oluşturabilirsiniz:

1.Geliştirici sekmesine gidin, Uygulama - Ad > Sayfa'yı tıklayın;

  1. Yeni'yi tıklayın; Görsel tasarımcı yeni bir sekmede açılacaktır.

Tasarımcı görünümleri​

Varsayılan sayfa boş. Sayfayı hızlı bir şekilde doldurmak için önceden tanımlanmış yapıyı kullanabilirsiniz.

Temel bir tablo oluşturun:

  1. Sağdaki görünüm seçicide Tasarımcı'yı tıklayın; Görünüm, görsel tasarımcıya geçecektir.

  2. Soldaki menüde Başlıklı Tablo'yu seçin ve sayfaya sürükleyin. Sayfada birden çok öğeye sahip bir tablo görüntülenecektir.

Geliştirici görünümü​

IBAX'in kullanıcı sayfası bir Şablon Dili ile kodlandığından, sayfa kodunu yazarken lütfen Geliştirici görünümüne geçin.

Geliştirici görünümüne geçin.

  1. Sağdaki görünüm seçicide Geliştirici'ye tıklayın.

Görünüm, sayfa kodunu tutan bir sekme ile düzenleyiciye geçecektir.

Veritabanı tablosundan veri alın​

Şimdiye kadar, sayfa şablonuyla hiçbir şey yapılmadı. Bir sonraki adımda, sayfanın apptabledan veri görüntülemesine izin vermek için kodu güncelleyeceğiz.

  1. DBFind işleviyle veritabanı tablosundan veri istemek için;

Aşağıdaki örnekte, bu işlev çağrısı apptabledan veri almak için kullanılır. Veriler, kaynak src_table içine yerleştirilecek ve zaman damgası alanına göre sıralanacaktır. src_table daha sonra tablo görünümündeki sayfa için veri kaynağı olarak kullanılacaktır.

   DBFind(Name: apptable, Source: src_table).Columns(Columns: "author,timestamp,message").Order(timestamp)
  1. src_tabledan gelen verileri görüntülemek için, bunu Table işlevinde veri kaynağı ve başlık olarak belirtin.
    Table(Columns: "AUTHOR=author,TIME=timestamp,MESSAGE=message", Source: src_table)
  1. Sağdaki görüntü seçmede, verileri doğru görüntüleyip kontrol etme için önizleme'ye tıklayın.

Tam sayfa kodu​

Bu bölümün tam sayfa kodu aşağıdadır. Bu temel sayfa daha sonra genişletilecektir.

DBFind(Name: apptable, Source: src_table).Columns(Columns: "author,timestamp,message").Order(timestamp)

Div(Class: panel panel-primary) {
    Div(Class: panel-heading, Body: Table block)
    Table(Columns: "AUTHOR=author,TIME=timestamp,MESSAGE=message", Source: src_table)
    Div(Class: panel-footer text-right) {
    Button(Class: btn btn-primary, Contract: ContractName, Body: More)
    }
}

Sayfayı kaydedin​

Sayfayı kaydetmek için Kaydet'e tıklayın:

  1. Sayfa Adı alanında AppPage veya sayfa için başka bir ad belirtin;

  2. Menüde default_menu öğesini seçin;

  3. Koşullar'ı true olarak ayarlayın;

  4. Tamam'a tıklayın.

Bölüm 4: Uygulama​

Önceki bölümlerde bir sözleşme, verileri depolamak için bir tablo ve bu verileri görüntülemek için temel bir kullanıcı arayüzü sayfası oluşturdunuz.

Bu bölümde, görünüşünü ve eylemlerinin gerçek olana benzer olmasını sağlamak için uygulamayı sonlandıracaksınız.

Sayfanın bir menüye bağlanması gerekir; örneğin, Ana Sayfa sekmesinde görüntülenen default_page, varsayılan ekosistem menüsü default_menu ile bağlantılıdır.

Bu uygulama öğreticisi çok basit olduğundan (yalnızca bir sayfaya sahip olduğundan), bunun için ayrı bir menü oluşturmaya gerek yoktur. Varsayılan menüdeki yeni menü öğesi yeterlidir.

Not

Geliştirici sekmesi > Uygulama - Ad > Sayfa'da sayfa özelliklerini düzenleyerek sayfa menüsünü tanımlayabilirsiniz. Örneğin, uygulamanızın birden fazla sayfası varsa, bu sayfalar arasında gezinmek için bir menü oluşturmanız ve bunu uygulamanın tüm sayfalarına atamanız gerekebilir.

Bir menü öğesi ekleyin​

Diğer tüm kaynaklar gibi, menüler de Weaver'da oluşturulabilir ve düzenlenebilir:

  1. Geliştirici sekmesi > Menü'ye gidin;

  2. default_menu girişinin Adını tıklayın;

Editörde yeni bir sekme açılacaktır.

  1. Şablonun sonuna, uygulama sayfasını açmak için bağlanacak yeni bir menü öğesi ekleyin ve simgesi FontAwesome simge setinden gelir.
    MenuItem(Title:Messages, Page:AppPage, Icon:"fa fa-envelope")
  1. Kaydet'e tıklayın.

Yeni menü öğesini test edin​

Yeni menü öğesinin geçerli olup olmadığını kontrol edin:

  1. Giriş sekmesini açın;

  2. Menüde Yenile'ye tıklayın;

    Mesaj başlığına sahip bir giriş görünecektir;

  3. Mesajlar'a tıklayın.

    Başvuru sayfası açılacaktır.

Bir mesaj göndermek​

Logicor'daki düğmeler, parametrelere bağlı olarak sözleşmeleri uygulamak ve sayfaları açmak için kullanılabilir.

Button işlevinin iki sözleşme parametresi vardır:

  • Contract

    Etkinleştirilen sözleşmenin adı.

  • Params

    Sözleşmenin giriş parametreleri.

Form​

Sözleşmeye veri göndermek için, başvuru sayfasına bir mesaj için bir giriş alanına ve sözleşmeyi AppContract'ı etkinleştirmek için bir düğmeye sahip olması gereken bir form ekleyin.

Aşağıda bu tür bir formun bir örneği verilmiştir. Kendi Div içinde yuvalanmıştır. Girdi alanının önceden tanımlanmış bir "message_input" ada sahip olduğunu tanımlayan form görünümünü içeren Div öğesinin arkasına koymak. Düğme, sözleşmeye Mesaj değerini göndermek için bu ismi kullanır. Son olarak, giriş alanının değerini almak için Val işlevi kullanılır.

Div(Class: panel panel-primary) {
 Form() {
 Input(Name: message_input, Class: form-control, Type: text, Placeholder: "Write a message...", )
 Button(Class: btn btn-primary, Body: Send, Contract: AppContract, Params: "Message=Val(message_input)")
 }
}

Bu yeni özelliği mesaj göndererek test ederken formun yenilenmediğini fark edebilirsiniz. Bu, sayfa yenilemede tanıtılacaktır.

Formda gezinme​

Varsayılan görünümde, sayfadaki form ilk sayfada yalnızca 25 girdi görüntüleyebilir. Bu nedenle, kullanıcıları tüm form girişlerine yönlendirmek için bazı basit düğmeler ekleyebilirsiniz.

İki gezinme butonu olacak ve her biri uygulama sayfasını yeniden yükleyebilir ve parametreleri ona iletebilir.

  • Önceki buton ilk 25 girişi görüntüleyecektir. Başka giriş yoksa buton görüntülenmez;

  • Sonraki butonunda sonraki 25 girişi görüntüleyecektir. Başka giriş yoksa, buton görüntülenmez.

Değişkenler​

Gezinme düğmeleri, tablo görünümü durumlarını depolamak için iki değişken gerektirir:

  • #table_view_offset#

Bu değişken, mevcut tablo görünümünün ofsetini saklar.

Sayfa yeniden yüklendiğinde gezinme düğmeleri bunu bir parametre olarak iletecektir.

  • #record_count#

Bu değişken, tablodaki toplam giriş sayısını saklar.

Değer hesaplanacaktır.

Giriş sayısı​

#record_count# saymak için lütfen mevcut DBFind işlev çağrısını değiştirin. .count() çağrısında belirtilen değişken, giriş sayısını saklayacaktır.

DBFind(Name: apptable, Source: src_table).Columns(Columns: "author,timestamp,message").Order(timestamp).Count(record_count)

Tablo ofseti​

Sayfa açıldığında tablo görünümü ofseti sayfaya geçirilmelidir. #table_view_offset# bir değer almazsa 0 olarak ayarlayın.

Aşağıdaki kodu sayfanın en üstüne ekleyin.

If(GetVar(table_view_offset)){

}.Else{
    SetVar(table_view_offset, 0)
}

DBFind işlev çağrısını yeniden değiştirin. Bu sefer yeni tablo görünümü ofsetini kullanmalıdır.

DBFind(Name: apptable, Source: src_table).Columns(Columns: "author,timestamp,message").Order(timestamp).Count(record_count).Offset(#table_view_offset#)

Buton kodu​

Find the Div function call that defines the footer: Div(Class:panel-footer text-right). Add the button code into it.

Div(Class: panel-footer text-right) {
}

Previous düğmesi yalnızca geri dönülecek en az bir Sonraki varsa görünür. Bir düğme eklerken, sayfanın yeni tablo görünümü ofset 'offset_previous' hesaplanacaktır. Parametreler, yeniden açılan sayfanın 'PageParams'ına iletilir.

If(#table_view_offset# >= 25) {
    SetVar(offset_previous, Calculate(#table_view_offset# - 25))
    Button(Class: btn btn-primary, Body: Previous, Page: AppPage, PageParams:"table_view_offset=#offset_previous#")
}

Sonraki düğmesi, yalnızca toplam kayıt sayısı sayfada görüntülenen sayıdan fazla olduğunda görüntülenecektir. Bir düğme eklendiğinde, sayfanın yeni tablo görünümü ofset 'offset_next' hesaplanacaktır. Parametreler, yeniden açılan sayfanın 'PageParams'ına iletilir.

If(#record_count# >= Calculate(#table_view_offset# + 25)) {
    SetVar(offset_next, Calculate(#table_view_offset# + 25))
    Button(Class: btn btn-primary, Body: Next, Page: AppPage, PageParams:"table_view_offset=#offset_next#")
}

Bu düğmeleri ekledikten sonra sayfayı kaydedin ve Ana Sayfa > Mesajlar menü öğesinden test edin.

Sayfa yenileme​

Uygulanacak son işlev, sayfadaki tabloyu otomatik olarak güncellemektir. Kullanıcılar yeni bir mesaj gönderdiğinde, tabloda görüntülenmelidir.

Sözleşmeyi uygulamaya ek olarak, aynısını elde etmek için mevcut sayfayı yeniden açmak için Gönder düğmesini de kullanabilirsiniz. #table_view_offset# sayfaya herhangi bir değişiklik yapılmadan geçirilmelidir.

Gönder düğmesine Page ve PageParams ekleyin, kod aşağıdaki gibidir:

Button(Class: btn btn-primary, Body: Send, Contract: AppContract, Params: "Message=Val(message_input)", Page:AppPage, PageParams:"table_view_offset=#table_view_offset#")

Tam sayfa kodu​

Bu bölüm, uygulama sayfasındaki birçok değişikliği açıklar. Uygulama sayfasının tam kodu aşağıdadır.

If(GetVar(table_view_offset)){
}.Else{
    SetVar(table_view_offset, 0)
}
DBFind(Name: apptable, Source: src_table).Columns(Columns: "author,timestamp,message").Order(timestamp).Count(record_count).Offset(#table_view_offset#)
    Div(Class: panel panel-primary) {
        Div(Class: panel-heading, Body: Table block)
        Table(Columns: "AUTHOR=author,TIME=timestamp,MESSAGE=message", Source: src_table)
        Div(Class: panel-footer text-right) {
            If(#table_view_offset# >= 25) {
                SetVar(offset_previous, Calculate(#table_view_offset# - 25))
                Button(Class: btn btn-primary, Body: Previous, Page: AppPage, PageParams:"table_view_offset=#offset_previous#")
            }
            If(#record_count# >= Calculate(#table_view_offset# + 25)) {
                SetVar(offset_next, Calculate(#table_view_offset# + 25))
                Button(Class: btn btn-primary, Body: Next, Page: AppPage, PageParams:"table_view_offset=#offset_next#")
            }
        }
    }
    Div(Class: panel panel-primary) {
    Form() {
        Input(Name: message_input, Class: form-control, Type: text, Placeholder: "Write a message...", )
        Button(Class: btn btn-primary, Body: Send, Contract: AppContract, Params: "Message=Val(message_input)", Page:AppPage, PageParams:"table_view_offset=#table_view_offset#")
    }
}

Sonuçlar​

Uygulama geliştiriciler için yerleşim stilleri, erişim izinleri yönetimi ve uygulamalar ve kaynaklar arasındaki etkileşim gibi diğer önemli konuları açıklamak yerine, bu öğretici bir ekosistem için temel bir uygulamanın nasıl oluşturulacağını anlatır. Bu ileri düzey konular hakkında daha fazla bilgi için diğer ilgili belgelere bakın.