Electron : NodeJS ile Masaüstü Uygulaması

1-GS-t3eNz9Jy7YWKIxxmJPg
Son dönemin popüler dillerinden olan NodeJs ile masaüstü uygulaması geliştireceğiz. Bu arada Atom editörüde Electron’la geliştirildi. Çalışma mantığı şu şekilde main.js ile uygulamamızı çalıştırıyoruz. Daha sonra uygulamanın arayüzünü index.html adında klasörün içinde oluşturuyoruz yani uygulama çatısı mantığı ile neredeyse aynı yine arayüz için kütüphaneler indirip kullanabiliyoruz ortaya oldukça güzel şeyler çıktığını söyleyebilirim. Örnek verecek olursak semantic-ui uygulamada kullandığınızı düşünürsek görsellik olarak uygulamada istediğimiz verimi alırız. Paket olarak electron-prebuilt paketini kullanacağız. Consolda desktop’a gelip aşağıdaki komutları yazıyoruz.

- mkdir electron
- cd electron
- npm init

daha sonra init için açılan parametreleri giriyoruz. Parametrede dikkat etmemiz greken yer start kısmını şu şekilde yapıyoruz.

"scripts": {
        "start": "electron ."
    }

Daha sonra paketimizi yüklüyoruz.
npm install –save-dev electron-prebuilt
main.js kısmını yazalım.

var app = require('app');
var BrowserWindow = require('browser-window');
 
app.on('ready', function() {
    mainWindow = new BrowserWindow({
        height: 700,
        width: 900
    });
 
    mainWindow.loadUrl('file://' + __dirname + '/index.html');
});

kodlarda da görüldüğü gibi ekran bi nesne olarak açılıyor daha sonra yükseklik ve genişlik veriyoruz.
görüntüyü index.html içinde oluşturuyoruz. html dosyasının içine bakalım.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>vuralusenc.com</h1>
  </body>
</html>

resim
html dosyasıda bildiğimiz web sayfası gibi görüldüğü gibi kullanımı oldukca basit isteyenler bu adresteki örneğede bakabilir bu yazıda anlatıcaklarım bu kadar herkeze kolay gelsin.

jQuery İle Canlı Önizleme

Merhaba arkadaşlar şu sıralar angularjs oldukça popüler durumda ancak jQuery kullanarak da aynı şeyleri yapabiliriz.Örnek verecek olursak bir textarea olusturalım

<textarea name="yazi">
 
</textarea>
<div id="sonuc">
 
</div>

daha sonra jQuery kodlarını yazalım.

$("textarea[name=yazi]").keyup(function(){
    $("#sonuc").html($(this).val());
});

burada keyup fonksyonunu kullanarak canlıönizleme yapıyoruz.

Demo

Javascripte JSON Kullanımı

Merhaba Arkadaşlar,

Bu bölümde JSON’nun ne işe yaradığı ve nasıl kullanılğını inceleyeceğiz.

Öncelikle ne gibi özellikleri var buna söyleyelim.Açılımı JavaScript Object Notation manasına

gelmektedir.XML çok benzeyen bir yapısı vardır ancak daha anlaşılması daha kolay bir yapıya sahiptir.Herhangi bir programlama dili ile rahatça okunabilir bundan dolayı kullanışlıdır.Örneğin Facebook’taki bilgilerimi JSON formatında almak istiyorum bunun için şu kodu yazmalıyım.

http://graph.facebook.com/vural.usenc

şu şekilde görüntü gelecektir.

Adsız

Javascripte örnek verecek olursak

var text = '{ "Personel" : [' +
'{ "Adi":"Vural" , "Soyadi":"Usenc" },' +
'{ "Adi":"Yakup" , "Soyadi":"Gultekin" },' +
'{ "Adi":"Ali" , "Soyadi":"Karayel" } ]}';

Bu şekilde oluşturduğumuz JSON formatindaki kodu Javascript ile diziye dönüştürmek için bu kodu kullanıyoruz

var obj = JSON.parse(text);

diziye aldıktan sonra isteğimiz şekilde verileri çekebiliriz.

Bir demo yaptığımızda

<script type="text/javascript">// <![CDATA[
document.getElementById("demo").innerHTML =
obj.Personel[1].Adi+ " " + obj.Personel[1].Soyadi;
>
// ]]></script>

Bu şekilde istediğimiz veriyi alabilir ve kullanırız.