Ebru Güleç: Linux Yaz Kampı 2015

Herkese merhaba. Bu yazımda Bolu da düzenlenen Linux Yaz Kampı 2015'den izlenimlerimi ve öğrendiklerimi sizlerle paylaşacağım. Baştan uyarmak isterim birazcık uzun ve keyifli bir yazı olacak :) Birde öğretici tabi :)
Öncelikle belirtmeliyim eğer zamanınız ve imkanınız varsa kesinlikle katılmalısınız. Öyle bir ortamı, dostlukları, hem öğrenirken hemde mutlu olduğunuz bir yer kolay kolay bulunmuyor. Bende hissettim tabi bu kadar güzel olacağını Django ve Javascript ile Web Programlamaya Giriş kursuna başvurdum ve kabul edildim :) 16 gün dolu dolu ve çok yoğun geçti. Akşam bilgisayarım ile uyuyup sabah kodlarla uyandım diyebilirim :) Html/css ve JavaScripte giriş kısmını beş gün boyunca Aziz Arslan ve Eniz Gülek den aldık. Hem eğlenceli hemde öğretici bir eğitim olduğunu söyleyebilirim :) Birkaç tane web sitesinin tasarımını ve responsive özelliğini yaptık. Benim için hem bildiğim konuları tekrar hemde yeni birçok şey öğrendiğim beş gün oldu. Ardından 2 gün boyunca Üstün Özgür den ileri JavaScript dersleri aldık. Tabiri caizse eğer Üstün Hoca esti geçti diyebilirim. Beyinlerimizde birazcık yanmış olabilir tabi :) Ama JavaScripti tam manasıyla kavradığımıza inanıyorum. Üstün hocanın bu yoğun bilgi bombardımanından sonra Django' yu nasıl toparlayacağız derken neyse ki korktuğumuz gibi olmadı :) Çünkü Python çok tatlı bir dil ve hocalarımızda gayet iyi olunca 2 günde Python'ı temel olarak bitirdik. Ve Djangoya merhaba dedik :) Umut Karcı ve Fatih Erikli hem anlattı hemde uygulayarak gösterdi. Bir hata ile karşılaştığımızda herbirimiz ile tek tek ilgilendiler. Eğitim sırasında gruplara ayrılıp bir proje konusu belirledik. Eğitim bittiğinde ise her grubun kendine ait bir projesi vardı. Ortaya harika şeyler çıktı :) Eğitim genel olarak böyle geçti. Ders çıkışlarında ve aralarda da Php ve Python arasında tatlı bir rekabet vardı. Lyk'nın geleneği bozulmadı ve 16 gün boyunca birbirimize sataşıp durduk :) Sonunda ise kodların kardeşliği kazandı :) Yazının en altına bu atışmaya ve diğer günlere ait resimleri bulabilirsiniz. Hatıra kısmı bittiğine göre bilgilendirici kısma geçebilirim artık :) Doğru bir şey mi düşündüm bilmiyorum ama html/css ve Python' a ait Türkçe kaynakların sayısının çok olduğunu gördüm. Bende size Türkçe kaynak bakımından yetersiz olduğunu düşündüğüm İleri JavaScript ve Django da öğrendiklerimi anlatmaya karar verdim. Ve başlıyorum :)

İleri JavaScript:

JavaScript nesne yönelimli, daha çok tarayıcılarda kullanılan dinamik bir programlama diliymiş. Ayrıca JavaScript prototip tabanlı, dinamik türlere ve birinci sınıf fonksiyonlara sahipmiş.

JavaScriptte değişkenler “var” adı ile belirtilir. Verinin türünü belirtmeye gerek yok. Otomatik olarak algılıyormuş. Python gibi :).
-->Değişkenlerin belirli olduğu yerlere scope(kapsam) denir. Yani değişkenlerin tanımlı olduğu aralıklardır.

-->Bu şekilde fonksiyonun içerisinde bir tanımlama yaptığımızda değişken sadece fonksiyon içerisinde tanımlıdır.

»» 1 ve 5 numaralı kısımlarda değişkenler tanımlanmamıştır.

»» 2. kısımda alttaki diğer ifadelerin yazılmadığını varsayarsak; değişkenin başına var yazılmadığı için değişken dışarı taşıp global hale gelmiştir. Programın herhangi bir yerinde kullanılabilir ancak önerilen bir kullanım değildir. “var emre” ifadesi eklendiğinde artık global değil Undefined dır. Javascript “var” tanımlama kelimesini ilk kullanıldığı satıra taşır gibi düşünebiliriz.

»» 3 . seçenek de var ile değişken tanımlanmış ve sadece fonksiyon aralığında kullanılabilir. Var ifadesini bir kelepçe olarak da düşünebiliriz. Değişkeni fonksiyon içerisine kelepçeler.
»» 4. kısımda ise değişkene bir değer atanmıştır.

>>> Eğer hem fonksiyonun içinde hemde global alanda bir değişken tanımlarsak biri diğerini gölgelemiş olacak ve program çalıştığında istediğimiz sonucu alamayacağız.

Bunun olmaması için değişken adlarının isimlendirilmesine ve tanımlanmasına dikkat etmeliyiz.

JavaScriptte 2 çeşit tepeye taşıma olayı gerçekleşir.
1)Var Hosting(Tepeye Taşıma):
Değişken il nerede kullanıldıysa var ifadesini oraya taşır.
2) Function Hosting:
Fonksiyonu alıp çağırıldığı yrin üzerine taşır.
Not: Burada bahsedilen taşıma olayı program içerisinde gerçekleştirilmez. Ama JavaScript öyle kabul eder. Daha açıklayıcı olması açısından böyle anlamak ve anlatmak daha uygun.

Veri Türleri:

-Array ► var dizi = [“Fenerbahçe”, “Beşiktaş”, “Galatasaray”, “5”, “7”];

-String ► “Ebru”, 'Ebru'

-Number ► 1 , 1.2

-Boolean ► true, false

-Noan(Not a number)

-Null ► var x = null;

-Undefined ► var x;

-Object ► dictionary = {isim: “Ebru”, soyad: ”Güleç”, yas : 20};

-Function ► function(){ }

Dipçe: JavaScriptte objeye bağlanmış fonsiyona method denir.

Obje = Veri + Metod(Fonksiyon)

var foo = function(parameter){ }

Dipçe-2: JavaScriptte fonksiyonun değeri nasıl tanımlandığı ile değil nasıl çağırıldığı ile ilgilidir.

Şimdide JavaScript'in temel yapı taşlarından biri olan “this” den bahsetmek istiyrum. Bence this joker eleman gibi bir şey. Can simidi de olabilir :) This de olay şu net bir anlamı yok. This tam olarak şuna takabül ediyor diyemem. Çağırılma anında görevi belirleniyor dersek yanlış olmaz. Dizi 5 şekilde çağırabiliriz.

1)Fonksiyon olarak çağırma(all):
this = global
2)Metod olarak çağırma:
x.kos() ayse.kos()
this = x this = ayse
3)call ile çağırma:

fonksiyon.call(x,1,2,3)
fonksiyon(1,2,3){
this = x;
}
4)new kullanarak çağırma:
5)bind bağlamak:

JavaScript ile Prototip Tabanlı Programlama:

Daha önce nesne yönelimli programlama ile çok haşır neşir olmadığım için(sanıyorum ki bunun nedeni çömezliğimden ) JavaScriptte beynimi yakan kısımlardan biri olmuştur. Başta bu da nesi gibi içsel çığlıklarımın oluştuğu kullanım alanını gördülçe haa iyiymiş ya dediğim güzel olay :)

Dipçe: Yazının devamını getirmeden belirtmem gerek JavaScriptte herşey birer nesnedir. Fonksiyonlar bile.
-->C# ve Java gibi programlama dillerinde OOP temelini class keyword’ü oluşturmaktadır. Ancak JavaScript’te class keyword’ü bulunmaz. Bunun yerine fonksiyon mantığıyla nesne yönelimi modellenir.

var InsanListesi = function () {
this.insanlar = [];
};

-->InsanListesi adında bir obje oluşturduk ve insanlar dizisini this ile belirttik.

InsanListesi.prototype.ekle = function (insan) {
this.insanlar.push(insan);
};

-->InsanListesine bir prototype oluşturduk. Girilen insan verilerini insanlar adında boş diziye gönderecek. Prototype’lar özetle bir sınıfa ait olan ve her nesneoluşturulurken değil, sadece bir kez oluşturulan nesnelerdir.Prototype’lar metod olmak zorunda da değildir. Değişken vb. nesne de olabilir.

var insanListesi = new InsanListesi();

-->InsanListesine yeni bir nesne oluşturduk.

var Insan = function (name, surname, age, type, takim) {
this.name = name;
this.surname = surname;
this.age = age;
this.type = type;
this.takim = takim;
insanListesi.ekle(this);
};

-->Insan adında bir fonksiyon oluşturduk ve parametrelerini verdik. This ile bunları bağladık.

Insan.prototype.toggle = function () {
if (this.type === "Ogrenci") {
this.type = "Ogretmen";
} else {
this.type = "Ogrenci";
}};

-->Toggle bir obje görünür halde ise gizler,gizli haldeyse gösterir. Yukarıdaki kodda eğer ögrenci ise ogretmen yap. Ogretmen ise ogrenci yap demiş olduk.

new Insan("Ustun", "Ozgur", 30, "Ogretmen", "BJK");
new Insan("Aytac", "Genc", 22, "Ogrenci", "FB");
new Insan("Burak", "Guneli", 23, "Ogrenci", "GS");

var insanlar = [

["Fatih", "Guneli", 23, "Ogrenci", "TS"],

["Mehmet", "Sargil", 21, "Ogrenci", "Bursa"],

["Cuneyt", "Elmas", 22, "Ogrenci", "BJK"]
];

--> Yeni insanlarımızı ekledik.

insanlar.forEach(function (insan) {
Insan.apply(Object.create(Insan.prototype), insan);
});

--> forEach kısmen girilen insan modellerini parçalayıp insan prototipine ekliyor.

Sonrasın da fonksiyonel programlama da for, forEach, map ve map+filter karşılaştırması yaptık. Burayı uzun uzadıya anlatmak yerine örenkler üzerinden gitmeyi tercih ediyorum.

1)Sayıların karesini alma:
var sayilar = [1, 2, 3, 4, 5, 6, 7]
For:
var kareler = [ ];
for (var i=0; i < sayilar.lenght, i++){
kareler[i] = sayilar[i] * sayilar[i];
}

forEach:

var kareler = [ ];
sayilar.forEach(function(sayi)){
kareler.push(sayi*sayi)
}
map:

var kareler = sayilar.map(function(sayi)){
return sayi * sayi;
}

2)Karesi 9'a bölünen sayıların karesini bul

for:
var kareler = [ ];
for( var i= 0; i<sayilar.lenght; i++){
if(karesi % 9 ===0)
kareler.push(karesi);
}

forEach:
var kareler= [ ];
sayilar.forEac

h(function(sayi)){
if(sayi = sayi %9 ===0){
kareler.push(sayi*sayi)
}

Map + Filter:
var kareler = sayılar.map(function(sayi)){
return sayi * sayi

filter(function(kare){
return kare % 9 === 0;}

3) Karesi 9'a bölünen sayıları bul
for:
for(kareler.push(sayilar[i])

forEach:
kareler.push(sayi)

map:
filter(function(sayi)){
return sayi * sayi % 9 === 0;

}
Reduce: Bir listeyi özetliyor. Tek sonuç çıkartıyor.
var toplam = sayilar.reduce(function(a,b)){
return a + b;
}

Bu öğrendiklerimizi kullanarak imdb benzeri bir proje yaptık. Bu projeyi ve dersde yaptığımız örneklere şuradan ulaşabilirsiniz.

Django:

Django konusuna girmeden önce size Virtualenv den bahsetmek istiyorum. Nedir bu Virtualenv?
Virtualenv ile bilgisayarımızda sanal bir ortam oluşturarak uygulamamızı bilgisayarımızın geri kalanından soyutluyoruz. Tam anlamıyla bağımsız Python geliştirme ortamı desek daha uygun olur sanırım. Djangoda da proje geliştirmeden önce virtualenv yi kuruyoruz.

-->pip install virtualenv
diyerek kuruyoruz.

-->virtualenv env
diyerek sanal geliştirme ortamımızı oluşturuyoruz.

Oluşturduğumuz klasöre gidip onu aktif ediyoruz.
--> source blog/bin/activate

-->pip3 install django
İçerisine djangoyu kuruyoruz.
--> django-admin.py startproject projeAdi
Projemizi başlatıyor ve bir isim veriyoruz.

-->Projemizi başlattıkdan sonra bu dosyalar oluşuyor.
∠ setting.py: Projenin ayarlarının yapıldığı dosya
∠ urls.py: Sitenin url'lerinin belirlendiği kısım
∠ manage.py: Projenin yürütüldüğü script

→ python3 manage.py startapp blog
Ugulama oluşturuyoruz.

blog
| - - __init__.py
| - - modelsipy
| - -tests.py
' - - views.py
Oluşturduğumuz uygulamamız Model, View ve Template ögelerinden oluşur.

Model: Uygulamamızın veritabanı ile ilgili kısmıdır. Her model veritabanındaki bir tablo ile eşleşir.
View :Kullanıcıya gösterilen ve kullanıcıdan yanıt alınan katmandır.

Temlate: Kullanıcıya verilecek olan yanıtın işlendiği kısımdır. Template'lar HTML snuçlar üretmeyi kolaylaştırır.
Urls kısmı ise projemizdeki urls'lerin belirlendiği kısımdır.

-->python3 manage.py migrate
Veritabanı oluşturuyoruz.
-->python3 manage.py createsuperuser
Super user oluşturuyoruz ve bir şifre belirliyoruz. Ardından;

-->python3 manage.py runserver
dedikten sonra django başarılı bir şekilde çalışmış oluyor ve karşımıza şu sayfa çıkıyor.

Bu ekrandan sonra models, views, templates , url kısımlarımızı düzenliyoruz ve projemiz çalışmaya hazır :) Bundan sonraki kısımları tek tek anlatamayacağım çünkü yeterince uzun bir yazı oldu. Bu kısımları farklı bir başlık altında detaylıca anlatmayı düşünüyorum. JavaScripttide aynı şekilde. Ama ondan önce ikisinde de uzmanlaşmam gerek :)

Python ve django ile yaptığımız örneklere şu adresden ulaşabilirsiniz.

İlgili Görseller :)

(Resimlerin üzerine tıklayarak yeni sekmeden daha büyük görebilirsiniz)