Giriş

Uygulama geliştirmek için temel jQuery ve javascript'i bilmeniz gerekiyor.

Kendi uygulamanızı bulut üzerinden kolayca geliştirin Uygulamalar > Code Studio açınız.

Kolay ve esnek uygulama çatısı ile kod yazmak çok basit!

Hesabınızın Developer türü olması gerekiyor ve uygulama geliştirmek için bir uygulama anahtarı gerekiyor uygulamanızı yayınlayabileceğiniz bir platform mevcut maksimum 3 uygulama yayınlayabilirsiniz uygulama geliştirmeden önce hazırlayacağınız uygulama sisteme uyumlu ve şartlarımıza uygun olmalı.

Uygulamalarınızda,

- En fazla 2 reklam yerleştirebilirsiniz.

- Kötüye kullanım ve spam işlemler olmamalıdır!

- Hakkında ve yardım kısmı olmalıdır!

- Benzer veya kopya olmamlıdır!

- Uygulamanız ücretli olacak ise her satın alma başına çok küçük ücret alınacaktır.

- Ücretli uygulamalarda reklam yerleştiremezsiniz!

Hazırsanız başlayalım!

Notlar

Uygulamanıza başlamak için HTML (index.html) dosyası oluşturun.

Dosyalar bir klasör'de tutulmalıdır başlangıç dosyasında uygulamanızın açılması için ön adı ile klasör adı aynı olmalıdır. head tagların arasına script dosyalarını dahil ediniz:

../js/bulut.sdk/jquery.js

../js/bulut.sdk/main.js

Dahil ettikten sonra kendinize ait bir script dosyası oluşturun ya da script tagların arasında başlangıç kodunuzu yazınız:

$(document).ready(function(){
Application("Ön adı","Uygulama adı", "Simge & İcon","Uygulama adresi", Genişlik,Yükseklik ,X Konum,Y Konum, Footer,"Footer içerik", Büyütme,Küçültme, Yeniden Boyutlandırma);
});

Parametre türleri:

Parametre Türü
Ön ad String
Uygulama adı String
Simge & Icon String
Uygulama adresi String
Genişlik Integer
Yükseklik Integer
X Konum Integer
Y Konum Integer
Footer Booelan (true & false)
Footer içerik String
Büyültme Booelan (true & false)
Küçültme Booelan (true & false)
Yeniden boyutlandırma Booelan (true & false)

Örnek kullanımı:

$(document).ready(function(){
Application("test","Yeni Uygulama", "js/bulut.sdk/test_app.png","test/yeni.html", 600,500, 300,50, "",false, false,false);
});

veya,

$.Uygulamam({
uygulama: "uC1lv_test",
adi: "Yeni Uygulama",
icon: "../bulut.sdk/test_app.png" ,
url: "uC1lv_test/yeni.html" ,
genislik: 300,
yukseklik: 200,
x: 80,
y: 50,
footer: false,
footer_icerik: "",
pencere_max: false,
pencere_min: false,
pencere_boyutlandirma: false,
});

Ekran çıktısı:

Veri

Kullanıcının verilerini getirmek için iki fonksiyon vardır bu fonksiyonlar main.js ile gelen özelliklerdir.

1. Bulut_kullanicibilgicek();

Kullanıcının 5 temel bilgisini getirirsiniz bunlar:

Veri Komut Türü
Adı hesap.ad NvarChar(50)
Soyadı hesap.soyad NvarChar(50)
E-Mail adresi hesap.email NvarChar(150)
Kullanıcı adı hesap.kullaniciadi NvarChar(50)
Avatar hesap.avatar NvarChar(150)

Örnek kullanımı:

$(document).ready(function(){
Bulut_kullanicibilgicek();
$("#baslik").append("Merhaba, " + hesap.ad + "!");
});

Ekran çıktısı:

2. Bulut_sistembilgicek();

Kullanıcının sistem bilgilerini getirir.

Veri Komut Türü
Diski sistem.disk Int
Diskin dolu alanı sistem.doludisk Int
Bellek (Bant genişliği) sistem.bellek Int

Örnek kullanımı:

$(document).ready(function(){
Bulut_kullanicibilgicek();
Bulut_sistembilgicek();
$("#baslik").append("Merhaba, " + hesap.ad + "!");
$( "#bilgi" ).append("Ad: " + hesap.ad + " Soyad: " + hesap.soyad);
$( "div#hesap" ).append("Diskiniz: " + sistem.disk + " Dolu: " + sistem.doludisk);
});

Ekran çıktısı:

Fonksiyonlar

1. Bulut_grafik();

Bulutun standart stillerini ve arayüzünü kullanmak için bu fonksiyonu ilk başta çağırmanız gerekir bu fonksiyonun iki tür kullanımı vardır biri "publish" uygulamanız paketleme (yayın) sırasında diğeri ise "build" kodlama sırasında uygulamanız yayınlamadan önce kullanınız paketleme sırasında ise "publish" yazmayı unutmayınız.

Eğer kendi stilinizi kullanmak istiyorsanız bu fonksiyonu çalıştırmayınız.

2. Saat görüntüleme:

Şu an ki saati getirir. Bunu kullanmak için fonksiyon parametrelerini giriniz örneğin,

$(document).ready(function(){
 $("#lbSaat").html("Saat: " + Fonksiyon.Saat("sa:dk:sn"));
}); 

Parametre içindeki bir fonksiyonu sildiğinizde sadece o değer döner örneğin Fonksiyon.Saat("sa:dk");

Ekran çıktısı:

11:37

3. Tarih görüntüleme:

Bugünün tarihini getirir:

$(document).ready(function(){
 $("#lbTarih").html("Tarih: " + Fonksiyon.Tarih());
}); 

Ekran çıktısı:

28.01.2015

4. Cookie işlemleri

Cookie fonksiyonları uygulamanız içerisinde kullanılmaktadır. Sistem'e cookie değeri aktarmak için farklı yollar izlenebilir parametre gönderme, diğer cookie fonksiyonları ile yapabilirsiniz. Temel 3 cookie fonksiyonu mevcuttur bunlar:

- Cookie.Ayarla("Adı","Değeri");

- Cookie.Getir("Adı");

- Cookie.Sil("Adı");

5. Fonksiyon.NoContextMenu();

Uygulamanızda sağ tık açılan menüyü devre dışı bırakır.

6. Yönlendirme:

Uygulamanızda herhangi istediğiniz sayfaya yönlendirir kullanımı: Fonksiyon.Yonlendir("sayfa.html");

7. Bulut_Mesaj();

Uygulamanızın orta kısmında mesaj penceresi gösterir. Kullanımı: Bulut_Mesaj("Merhaba!", "Başlık");

8. Temel matematik işlemleri:

Her dört fonksiyon iki sayı üzerinde işlem yapmaktadır ve sonucu istediğiniz kısıma geri döndürür.

Fonksiyon Örnek Çıktı
Fonksiyon.Topla(); Fonksiyon.Topla(10, 24); 34
Fonksiyon.Cikar(); Fonksiyon.Cikar(20, 4); 16
Fonksiyon.Bol(); Fonksiyon.Bol(1, 5); 0.2
Fonksiyon.Carp(); Fonksiyon.Carp(6, 6); 36

9. Fonksiyon.Yenile();

Bulunduğu sayfayı yeniler.

Dosya ve klasör işlemleri

1. Bulut_kullanicidizinislem();

Kullanıcının dosyaları ve klasörleri ile işlem yapmak için bir değişken oluşturun ve Bulut_kullanicidizinislem(); tanımlayın size geri bir değer dönecektir bu değeri kullanarak klasör ve dosya ile ilgili bir çok işlemi yapabilirsiniz.

2. Dizin oluşturma:

Kullanıcının bulutunda bir klasör oluşturur klasör oluşturur.

var dizin = Bulut_kullanicidizinislem(false); 
 $.gezgin_dizinolustur({
  dizin: dizin,
  klasorAdi: "/Belgelerim",
  durum: false
});

3. Dizin silme:

Kullanıcının bulutundaki istenilen klasörü içerisindeki dosyalar ile siler.

var dizin = Bulut_kullanicidizinislem(false);
$.gezgin_dizinsil({
 dizin: dizin,
 klasorAdi: "/Belgelerim",
 durum: false
});

4. Dosya oluştur:

Kullanıcının bulutunda istediğiniz türde dosya oluşturur dosya oluştururken aynı zamanda içerisine bilgi ekleyebilirsiniz. kullanınız.

var dizin = Bulut_kullanicidizinislem(false);
$.gezgin_dosyaolustur({
   dizin: dizin,
   dosyaAdi: "/yeni.txt",
   icerik: "Merhaba dünya!",
   durum:false
});

5. Dosya silme:

İstenilen dizindeki veya seçilen bir dosyayı kişinin bulutundan siler.

var dizin = Bulut_kullanicidizinislem(false);
$.gezgin_dosyasil({
 dizin: dizin,
 dosyaAdi: "/yeni.txt",
 durum: false
});

6. Dosya okuma:

Herhangi bir dizindeki bir dosyayı okuyup ekrana yazdırabilirsiniz.

Parametre Kullanım Çıktı
Dizin String ifade veya değişken Geri dönen değer
Dosya adı String ifade veya değişken Geri dönen değer
Yazdırma kısmı #kutu veya .icerik Geri dönen değer
jQuery parametresi text, html, append Geri dönen değer
Log Booelan (true veya false) Geri dönen değer

  var dizin = Bulut_kullanicidizinislem(false);
  $.gezgin_dosyaoku({
    dizin: dizin,
    dosyaAdi: "/yeni.txt",
    secilecek: "#yazi",
    fonksiyon: "html",
    durum: false
  });

7. Dizin & Dosya Listeleme:

Kullanıcının dizin bilgisini aldıktan sonra istenilen dizin içerisinden çeşitli işlemler yapılabilir bunlar belirli filtreyle dosyaları ve klasörleri listeleme veya sadece klasörlerini listeleme gibi vs işlemler yapabilirsiniz.

Parametre Kullanım Çıktı
Dizin String ifade veya değişken Geri dönen değer
Filtre *.zip .zip dosyalarını listeler.
Tür klasörler, dosyalar, tümü Herhangi birini yazarak çeşitli listeleme yapılır.
Doldur doldur: function(veri){ ... } Doldurulacak alan

var dizin = Bulut_kullanicidizinislem(false);
$.gezgin_dizinlistele({
    dizin: dizin,
    filtre:"*.zip",
    tur:"dosyalar",
    doldur:function(veri){
	$("body").append(veri);
	}
});

NOT: Klasör türlerinde filtreleme geçersizdir. Tümü ve dosyalar'da filtreleme çalışır.

Sistem

Bulut Bildirimleri

Kullanıcıya mesaj yerine dikkat çekici bir bildirim gönderebilirsiniz. 4 çeşit bildirim mevcuttur örnekleri ve kullanımını bu dökümandan öğrenebilirsiniz.

1. Basit Bildirim:

                                     $.bulut_basitbildirim({
                                      mesaj: "Merhaba!",
                                      pozisyon: "top left",
                                      zaman: 800,
                                      sabitleme: false
                                     });

Ekran çıktısı:

Basit bildirim

Parametre Kullanım
Mesaj String ifade
Pozisyon top,bottom,right,left (String)
Süre Integer (800 = ms, 1000 = sn)
Sabitleme Booelan (true veya false)

2. Gelişmiş Bildirim:

                                       $.bulut_gelismisbildirim({
                                        tema: "green",
                                        baslik: "Başlık",
                                        mesaj: "Merhaba!",
                                        bilgi: "Alt bilgi...",
                                        simge: "fa fa-globe",
                                        pozisyon: "bottom left"
                                       });

Ekran çıktısı:

Gelişmiş Bildirim

Gelişmiş bildirimde simgeler Font awesome olarak kullanılmaktadır örneğin: fa fa-flash şeklindedir. Birinci paremetre ise renkler belirtilmektedir.

Renk parametresinde renk kodu kullanamazsınız! Bunun yerine: error, ok, warning, blue, yellow, green, purple kullanabilirsiniz.

3. Kullanıcı Bildirim:

                                        $.bulut_kullanicibildirim({
                                         tema: "blue",
                                         resim: "http://site.com/resim/icon.png",
                                         baslik: "Başlık...",
                                         mesaj: "İçerik...",
                                         pozisyon: "bottom right"
                                        });

Ekran çıktısı:

Kullanıcı Bildirim

Kullanıcı bildirimde gelişmiş bildirimden bir farkı daha az renk ve simge yerine resim koyabilirsiniz. Kullanacağınız resimler bir web üzerinden ya da kullanıcının resmini çekebilirsiniz bunun dışında projenizden bir resmi kullanamazsınız! İlk parametrede sadece şu renkleri kullanabilirsiniz: blue, yellow, green

4. Renkli Bildirim:

         $.bulut_renklibildirim({ 
            arkarenk: "#b41924",
            onrenk: "#e4e4e4",
            mesaj: "Merhaba!",
            pozisyon: "top left"
         }); 

Ekran çıktısı:

Renkli Bildirim

Basit bildirim tarzındadır sadece istediğiniz renkler ile bildirim görüntüleyebilirsiniz. Birinci parametre arkaplan rengidir. İkinci parametre ise font rengidir.

Pencere

1. Bulut_YeniPencere();

Uygulamanızın içerisinde yeni bir pencere açabilirsiniz yeni pencere oluştururken Uygulama mantığı ile kullanınız.

$(document).ready(function(){
 Bulut_YeniPencere("Ön ad","Pencere adı", "Simge & İcon","Uygulama içindeki sayfa adresi", Genişlik,Yükseklik ,X Konum,Y Konum, Footer,"Footer içerik", Büyütme,Küçültme, Yeniden Boyutlandırma);
}); 

Yerel Depolama

HTML5 LocalStorage ile aynı görevi görmektedir. Kullanıcı tarayıcıdaki belleği silene kadar depolama yapmakta olduğunuz veriler saklanır. Bu özelliği çalıştırmak için Bulut_LocalStorage(); dahil ediniz.

1. YerelVeri.Ayarla();

Tarayıcının belleğinde yer ayırmak için bu fonksiyonu kullanabilirsiniz kullanım şekli: YerelVeri.Ayarla(Baslik, Merhaba Bulut!); birinci parametre veri adı belirtilir ikinci parametrede veri içeriği belirlenir.

2. YerelVeri.Getir();

Daha önceden tarayıcının belleğinde ayırmış olduğunuz bir yerel veriyi kullanmak için herhangi bir jQuery fonksiyonu ile kullanabilirsiniz örneğin: $("#sonuc").append(YerelVeri.Getir(Baslik));

3. YerelVeri.Sil();

Tarayıcının belleğindeki önceden bir yerel veri ayırdıysanız bunu silebilirsiniz. Örneğin: YerelVeri.Sil(Baslik);

Güvenlik

1. Fonksiyon.IPGetir();

Kullanıcının IP adresini getirmek için Fonksiyon.IPGetir(); kullanınız size geri dönen bir değer olacaktır bunu istediğiniz şekilde jQuery fonksiyonları ile kullanabilirsiniz.

2. Bulut_MD5();

Bir veriyi veya bilgiyi şifrelemek için ilk önce Bulut_MD5(); tanımlayınız sonra ise şifrelenecek bilgiyi jQuery fonksiyonu ile beraber Fonksiyon.Sifrele($("#txtAd").val()) şeklinde kullanabilirsiniz.

ÖNEMLİ: Birden fazla bilgiyi şifreleyebilirsiniz her defasında Bulut_MD5(); tanımlamanıza gerek yoktur sadece bir kez tanımladıktan sonra Fonksiyon.Sifrele(); bu fonksiyon kullanılabilir hale gelecektir.

$(document).ready(function(){
   Bulut_MD5();
   Bulut_Mesaj(Fonksiyon.Sifrele("Merhaba Bulut!"), "");
});
                                

Ekran çıktısı:

Şifreleme

Veritabanı

Bulut Database (.bdb):

Uygulamanıza yerel veritabanı kullanabilirsiniz. Veritabanı abonelik paketinize göre oluşturup kullanabilirsiniz. Veritabanlarınız projenizde Data klasörün içerisinde tutulmaktadır veritabanınızı yönetmek için veritabanınızı adına çift tıklayın.

NOT: MSSQL veya MySQL değildir bu veritabanlarını kullanmak için sdk dışında başka framework kullanmanız gerekir.

Yeni veritabanı oluşturmak:

Sol tarafda proje yönetim panelinde üst kısımda bulunan menülerde yer alan Veritabanı bu butona tıklayınız. Adım adım veritabanı oluşturması ve yönetimi:
Adım 1: kitaplar adında örnek bir veritabanı oluşturalım.
Adım 2: kitaplar veritabanı için yazarlar tablosu ekleyelim.
Adım 3: Tablomuza bir kaç alan ekledik tablomuzu kaydetmek için Kaydet ve tablo oluştur tıklayın. Kapat butonuna tıklarsanız tablo oluşturmadan veritabanınız oluşturulacaktır.
Veritabanımız oluşturulduktan sonra sol panelden veritabanı adına çift tıklayarak yönetebilirsiniz.
NOT: Veritabanınızın aktif olması için Araçlar menüsünden yenileyiniz bu işlemden önce çalışmalarınızı kaydediniz.

Kayıt ekleme:

Uygulamanızı test olarak çalıştığında ekleme, silme ve güncelleme işlemlerinde sadece test havuzunda gerçekleşecektir uygulamanızı kapattığınızda veritabanı yönetiminizde yaptığınız değişiklikler gözükmeyecektir.

$.bulut_verikaydet({ 
  uygulama: "uC1lv_test",
  vt: "kitaplar.bdb",
  tablo: "yazarlar",
  veriler: $("#txtNo").val() + "|" + 
  $("#txtAd").val() + "|" + $("#txtSoyad").val() + "|" + $("#txtKitapSayisi").val()
});

Kayıt ekleme komutunda uygulamanızın ön adını girmeyi unutmayınız! Veriler dinamik olarak veya el olarak ekleyebilirsiniz. Her bir sütunun verisi için | ile ayırarak gönderiniz.

Verileri gönderirken sütun sırasına göre yazınız sırası ile yazmazsanız yanlış veri kaydı gerçekleşir.

Verileri listeleme:

$("#veriler").empty();
    $.bulut_verigetir({ 
      uygulama: "uC1lv_test",
      vt: "kitaplar.bdb",
      tablo: "yazarlar",
      alan: ["Ad","Soyad","KitapSayisi"],
      doldur: function(veri){
	   $("#veriler").append("Yazar adı: " + veri[0] + " Soyadı: " + veri[1] + "Kitap sayısı: " + veri[2]);
      }
    }); 

alan: Getirilecek sütün adları yazılır her sütünun başlangıcı [0] index sayısına göre artmaktadır örneğin Ad[0],Soyad[1],KitapSayisi[2] alanlarını getiriyoruz Ad alanı veri[0]'dır. Bu yöntemde sorgu yoktur tüm verileri alanlara göre listeleyecektir.

Veri güncelleme:

   $.bulut_veriguncelleme({ 
       	    uygulama: "uC1lv_test",
            vt: "kitaplar.bdb",
            tablo: "yazarlar",
            alan: "SiraNumarasi" ,
      		veri: "1",
     	  	degistirilecek_alan: "Ad",
      		yeni_veri: "Selahattin" 
   }); 

Veri güncellerken hangi alanın hangi değerine göre güncelleme yapılmaktadır yukaradaki örnekte yazarın Sıra numarasına göre güncelleme yaptık 1 numaralı yazarın adını Selahattin olarak değiştirdik. Birden fazla güncelleme işleminde döngüler kullanmanız önerilir.

Veri silme:

$.bulut_verisil({ 
        uygulama: "uC1lv_test",
        vt: "kitaplar.bdb",
        tablo: "yazarlar",
        alan: "SiraNumarasi",
     	veri: "3" 
}); 

Veri silme işlemi veri güncelleme mantığı ile aynıdır. Bu örnekte sıra numarasına göre sildik işlem sonucu sıra numarası 3 olan veriyi silmiş olduk.

Sorgular:

Sorgular ile bir çok SQL'e benzer işlemler yapabilirsiniz birden fazla veri getirmek veya tek bir özel veri getirebilirsiniz.

Parametre Anlamı Kullanımı
AND Ve @Ad='Selahattin' and @Soyad='Yüksel'
OR Veya @Ad='Selahattin' or @SiraNumarasi='5'
- Koşul olmadan @Ad='Selahattin'

Örnek sorgular:

     $.bulut_verisorgu({
      	    uygulama: "uC1lv_test",
            vt: "kitaplar.bdb",
            tablo: "yazarlar",
            sorgu:"@ad='Selahattin'",
            alanlar: ["Ad","Soyad"],
            doldur: function(veri){
            alert(veri[0] + " " + veri[1]);
            },
      });

Bu sorguda adı Selahattin olan tüm kayıtları getirecektir.

     $.bulut_verisorgu({
      	    uygulama: "uC1lv_test",
            vt: "kitaplar.bdb",
            tablo: "yazarlar",
            sorgu:"@ad='Selahattin' and @SiraNumarasi='1'",
            alanlar: ["Ad","Soyad"],
            doldur: function(veri){
            alert(veri[0] + " " + veri[1]);
            },
      });

Adı Selahattin ve sıra numarası 1 olan kayıtları getirecektir biz burada benzersiz bir kayıt numarası tuttuğumuz için bize tek bir kayıt dönecektir. (Üye girişi) kullanıcı adı ve şifre işlemlerinde and kullanılması gibi.

Arkaplan Hizmetleri

Uygulamanızı arkaplanda çalıştırmak için proje dizinine Services klasörü oluşturun, ve ardından Background.js javascript dosyası oluşturun.

Background.js

* Document ready olayı içerisine jQuery ve javascript fonksiyonlarını çalıştırabilirsiniz.
DİKKAT: SDK Paketini hepsini arkaplanda kullanamazsınız kullanılabilir fonksiyonlar:

- Bildirim gönderme (Sayfa 6)

- Kullanıcı işlemleri (Sayfa 3)

- Açılışta uygulamayı başlatma
StartApp("ÖnAd");

Paketleme

Uygulamanız hazır ise Bulut Code Studio ile paketle seçeneğine tıklayın öncelikle developer kimliğine sahip olmanız gerekiyor uygulamanızı mağazada yayınlamamız için gerekli bilgileri bize gönderin.

Uygulamanızla ilgili tüm detayları giriniz bunlar:

- Uygulamanızın 64x64 Simgesi (PNG)

- Web siteniz ve e-posta adresiniz (e-posta adresi zorunludur.)

- Uygulama açıklaması (En az 250 karakter)

- Uygulama adı

- Uygulamanıza ait 6 görsel (1 video eklenebilir YouTube üzerinden.)

- Dağıtım (Ücretli/Ücretsiz)

Uygulamanız incelenme süresi 1 haftadır incelenme cevabı kişisel e-posta adresinize bildilecektir.

İçindekiler