Koding Vol. 2.1: Uygulama Geliştirmeye Giriş

Daha önce Koding ile ilgili bir yazı paylaşmıştım. İkinci bölümde ise Koding’te nasıl uygulama geliştirebileceğimizi göreceğiz.

## Koding ile Uygulama Geliştirmeye Giriş

Temel bir bilgi verdiğimize göre Koding ile uygulama geliştirme konusunda bir şeyler yapmaya başlayabiliriz.

Uygulama Oluşturmak

Koding’te uygulama oluşturmanın mantığı çok kolay,

Uygulama oluşturmak için Develop altındaki Make a new App butonuna tıklamanız gerekiyor.

Açılan pencereden “Blank Application” seçiyoruz. Bir diğer seçenek ise “Sample Application” Sample.kdapp’ten bir klon yaratıyor ve ismine de sizin belirlediğiniz bir ismi veriyor.

Burada Name kısmına kendi belirlediğimiz boşluk içermeyen bir isim girilmesi gerekiyor.

Bizim uygulamamızın adı “HelloWorld” olsun.

HelloWorld isimli uygulamamızı oluşturduktan sonra aşağıdaki gibi bir uygulamaya sahip olacağız:

Filetree’mizde uygulamamız şu şekilde:

Uygulama Manifestosu: .manifest

Her uygulamanın bir manifestosu, bildirisi var. Bu bildiriler uygulama hakkında bilgiler içeriyor.

Manifest dosyasının içeriği de şu şekilde:

{
  "devMode": true,
  "version": "0.1",
  "name": "HelloWorld",
  "identifier": "com.koding.apps.helloworld",
  "path": "~/Applications/HelloWorld.kdapp",
  "homepage": "kullaniciadi.koding.com/helloworld",
  "author": "Kullanici Adiniz",
  "repository": "git://github.com/kullaniciadi/helloworld.kdapp.git",
  "description": "HelloWorld : a Koding application created with the blank template.",
  "category": "web-app",
  "source": {
    "blocks": {
      "app": {
        "files": [
          "./index.coffee"
        ]
      }
    },
    "stylesheets": [
      "./resources/style.css"
    ]
  },
  "options": {
    "type": "tab"
  },
  "icns": {
    "128": "./resources/icon.128.png"
  }
}

Bu manifesto bizim uygulamamızın temel bilgilerini oluşturuyor. Dosyaların neler olduğu uygulamamızın adı, versiyonu, geliştirme modunda olup olmadığı gibi bir çok bilgi mevcut. Şimdilik ismini HelloWorld yerine Hello World yapalım:

"name": "HelloWorld"

satırını

"name": "Hello World"

olarak değiştiriyoruz ve kaydediyoruz. Editörün sağ üst köşesindeki butonlarla bu işlemi gerçekleştirebilirsiniz.

Dosyayı kaydettikten sonra, Compile & Run butonuna tıklıyoruz. Bu işlem uygulamamızı yeniden derliyor ve çalıştırıyor.

Yeni bir tabda uygulamamız açıldı, fakat isminin Hello World değil hala HelloWorld olduğunu görüyoruz. Bunun için uygulama listesinin olduğu tab altında sağ üst köşedeki Refresh Apps butonuna tıklamamız gerekiyor. Bu buton uygulamaları yeniliyor ve manifestolarındaki değişiklikleri güncelliyor.

Artık uygulamamızın adının Hello World olduğunu görebiliyoruz:

#### Uygulama ve appView

Uygulama açıldıktan sonra karşımızda kalbimiz kadar temiz bir ekranla karşılaşıyoruz:

index.coffee bizim ana dosyamız. Bu dosyayı açtığımızda içerisinde:

do ->

şeklinde bir kodla karşı karşıya kalıyoruz. Bunun JavaScript’çesi:

(function() {

})();

Yani bir scope açılmış ve sizin bir şeyler yazmanızı bekliyor. Bu durumda bu isteği boş çevirmemek gerekiyor.

Şimdi önemli bir noktaya geldik. Burada fazla derine inmeden yüzeysel geçmem gerekiyor, çünkü konu bir anda KDFramework dökümanlarına dönebilir, ki bu zaten var ve amacım bundan bir tane daha yazmak değil. Fatih Arslan, oldukça güzel bir tane yazdı zaten. :)

Her uygulama scope’u içerisinde appView adında bir view mevcut. Bu view bir KDView nesnesi ve KDView’e göre bir geliştirme izlememiz gerekiyor. Bu durumda KDFramework’ü incelemek gerekiyor. Bunun yerine ben hızlıca bir başlangıç sağlamanız için bir şablon oluşturdum, sizin yapacağınız da aşağı yukarı aynı şablonu oluşturmak.

class MainView extends JView
  constructor:->
    super

    # Uygulama kodu buraya…

  pistachio:->
    """
    Buraya HTML/Template Kodu…
    """
  viewAppended: ->
    @setTemplate do @pistachio

appView.addSubView new MainView

Bu temel bir uygulama şablonu.

Şimdi uygulamamızı biraz daha geliştirelim:

class MainView extends JView
  constructor:->
    super
    @header = new KDHeaderView
      type: "big"
      title: "Hello World!"

  pistachio:->
    """
    
    <p>
        Hello World!!!
    </p>
    """
  viewAppended: ->
    @setTemplate do @pistachio

appView.addSubView new MainView
  cssClass: "hello-world"

Bu kodu yazdığımızda karşımıza şu şekilde bir uygulama çıkıyor:

Gördüğünüz gibi ilk uygulamamız hazır.

Kite’lar

Uygulamamızı yazdık fakat yapmamız gereken bir şey daha var. Bu uygulama biraz interaktif olmalı.

Kite’larımız daha önce bahsettiğimiz gibi birer kablo, birer bağlantı hattını oluşturuyor. Kite’lar ile hosting üzerinde bazı işlemleri yapıp cevap almanız mümkün.

Kite’lar teknik anlamda aynı front-end’deki Ajax gibi çalışıyorlar. Örnekte jQuery ile yapılmış bir Ajax request görüyoruz.

$.ajax({
  url: "/myapi",
  data: {a: 1, b: 2},
  success: function() {
    // veri geldikten sonra...
  }
});

veya CoffeeScript ile;

$.ajax
  url: "/myapi"
  data:
    a: 1
    b: 2
  success: ->
    // veri geldikten sonra...

şeklindeki bir Ajax ile /myapi öğesinden veri çektiğimizi hatırlayalım. Fakat bu kod server üzerinde HTTP ile çalışıyordu. Bu yapı yine Koding’in Kite’larına benziyor fakat örnekteki gibi bir kod ile çalışıyor.

kite = KD.getSingleton "kiteController"
kite.run
  kiteName: "mykite"
  withArgs:
    a: 1
    b: 2
, (err, data)->
  // veri geldikten sonra...

Gördüğünüz gibi, kod neredeyse aynı.

kite.run methodu object|string, function şeklinde bir parametre alıyor fakat nesne yerine bir string koyarsanız o kodu kullanıcının sunucusu üzerinde /Users/fka/Dropbox/Apps/Calepin/koding-2-uygulama-gelistirme.mdçalıştırıyor.

kite = KD.getSingleton "kiteController"
kite.run "ls", (err, data)->
  // "ls" komutunun çıktısı

Şimdi biraz önceki kodumuza tekrar dönelim.

class MainView extends JView
  constructor:->
    super
    @header = new KDHeaderView
      type: "big"
      title: "Hello World!"

    kite = KD.getSingleton "kiteController"
    kite.run "ls", (err, res)=>
      @header.$().next().append res

  pistachio:->
    """
    
    <pre>
    ls result:
    </pre>
    """
  viewAppended: ->
    @setTemplate do @pistachio

appView.addSubView new MainView
  cssClass: "hello-world"

Burada ls komutu alıp çıktısını $() methodunu kullanarak DOM elementine ulaştığımız @header değişkeninden sonraki elemente (Burada pre tagına) ekliyoruz. Şimdi bakalım nasıl bir sonuç elde ettik:

Bu seferlik bu kadarı yeterli, bir sonraki sefere daha yaratıcı uygulamalar, Koding’teki bir dosyayı açıp yeni bir dosyayı kaydetmek gibi konulara değineceğiz, belki küçük bir Plain Text editör yaparız. :)

Sağlıcakla!