Alper Dinçer'in Günlüğü
2009 sonunda aldığım Google Maps Kalifiye Geliştirici (Qualified Developer) sertifikam ile yanında Google’ın hediyeleri t-shirt ve rozet hediyeleri geldi. Daha öncesinde sadece webden yayınlanan sertifikam artık hard-copy olarak da elime geçmiş oldu 🙂
Teşekkürler Google 🙂
2009 yılında Hacettepe Bilgi Belge Yönetimi Bölümündeki BBY 310 dersi kapsamında Balkan ve beni Yaşar Hocamız (Yaşar TONTA) “mentor” olarak çağırınca başlayan bir projeden bahsetmek istiyorum. Ders kapsamında öğrenciler ile birlikte geliştirdiğimiz kampüs bilgi sistemi ile Google Maps altlığı üzerine kampüsün haritasını ekleyerek kullanılabilirliği arttırmaya çalıştık.
www.beytepecampus.com adresinden ulaşabilen sitede çalışabilirliği arttırmak için farklı bir teknoloji kullandık. Kullanıcı arayüzünü daha önce ödül alan uygulamam olan ExtMap‘ı kullanıp, tamamen javascript tabanlı bir sistem geliştirdik. Arka planda ise PHP ile veritabanı olarak da Google SpreadSheets’i kullandık. İlk etapda biraz garip gelse de bu sistem gerçekten hem veri toplama kısmını hızlandırdı hem de kullanıcıya sunum kısmını hızlandırdı. Google’un sağlamış olduğu Docs API üzerinden Google SpreadSheets’e ulaşarak sanki veritabanı kullanır gibi uygulamamızı geliştirdik. Aslında burada PHP’yi kullanmamızın tek zorunluluğu “proxy”ye olan ihtiyacımızdı. Biz uygulamamızı geliştirirken aynı zamanda birden fazla kişi de Google SpreadSheets’i kullanarak verileri aynı anda sisteme girmeye devam ettiler. Böylelikle hızlı bir şekilde ve Google’ın alt yapısını kullanarak neredeyse “0” (sıfır) maliyetle “Bulut Bilişim” teknolojisi üzerine uygulama geliştirmiş olduk.
Aşağıdaki ekran görüntülerinden de göreceğiniz üzere uygulama gayet esnek oldu, en azından benim düşüncem böyle 🙂 Umarım diğer üniversitelerde de böyle çalışmalara başlar ve haritalar hayatımıza daha da renk katar.
Uygulamanın Ekran Görüntüsü
Günümüzde enerji önemli bir konuma sahip ve bu nedenle birçok savaş çıkıyor. Gün geçtikçe enerji kaynakları azaldığı için alternatif enerji kaynakları önem kazanmaya başladı. Bunların da başında bitmek tükenmek bilmeyen ve çevreye zararı olmayan güneş enerjisi geliyor. İlk kurulum masrafları biraz yüksek olsa da ilerleyen zamanlarda elektriğimizin büyük bir kısmını güneş enerjisinden kullanabiliriz gibime geliyor. Tabi herşey teknoloji ile de olmayacak ama bu bugünün konusu değil 🙂
6 ay önce bir konferans için APlus Enerji firmasından arkadaşlarım Mehmet ve Ozan ile birlikte bir makale yazdık. Makale kapsamında bir de uygulama yazalım istedik ve uygulama kısmı ile ben ilgilendim. Uygulamayı bir seviyeye getirdikten sonra bunu herkesle paylaşmak amacı ile www.gunesharitasi.com adresinde uygulamayı dünyaya açtık.
Yukarıdaki resimde de görüldüğü üzere Türkiye’nin Güneş Enerjisi Potansiyeli tematik olarak renklendirilerek harita üzerine aktarıldı. Ama sadece bunun yeterli olmayacağı düşünülerek noktasal verileri de sisteme ekledik. Veriler 1 Km’lik gridler olarak hazırlandı. Ayrıca ışıma (kWh/m2) verisine ek olarak, eğim ve yükseklik verisine de sistem aracılığı ile ulaşabilirsiniz. Böylelikle herhangi bir enlem ve boylamdaki bu verilere ulaşmanız sağlandı. Aşağıdaki resimde bununla ilgili detaya ulaşabilirsiniz.
Bu özellikler haricinde alanları ya da uzunlukları ölçmeniz için araçlara, altlık haritaları (uydu görüntüsü, arazi, yol) değiştirmenize yarayan araçlara da sistem üzerinden erişebilirsiniz. Bu özellikler ile ilgili ekran görüntüsüne de aşağıdan erişebilirsiniz.
www.günesharitasi.com adresinden ulaşabileceğiniz uygulama tamamen ücretsiz olup size bir fikir vermesi amacıyla geliştirilmiştir. Yani bu uygulamayı projelerinizde kullanamanız durumunda çıkabilecek sorunlardan sorumluluk kabul etmemekteyiz. Ayrıca sistemin teknik tarafı Google Maps JS API üzerinde Google App Engine servisleri ile entegre olacak şekilde ExtMap’in yeni yapısı ile tasarlandı. Google App Engine kullanıldığından dolayı da Bulut Bilişim yaklaşımı kullanılmış oldu.
http://code.google.com/apis/maps/documentation/v3/events.html
JavaScript de diğer programlama dillerinde olduğu gibi çeşitli olaylar içererek bunlara cevap verip kullanıcı ya da program içerisindeki diğer modüllere ulaşır. Bu olaylar sayesinde programın işleyişi şekillenmektedir. Örneğin haritanın merkezi değiştiğinde şunu yap, ya da şu yaklaşma seviyesinin altına inme gibi şeyleri olaylar yardımıyla yapabilirsiniz.
Yeni versiyonda da V2’deki gibi bir olay sistemi mevcut. Bu versiyonda 2 tip olay bulunmakta :
Kullanıcı Olayları (kullanıcının haritaya tıklaması ya da yaklaşması gibi)
MVC Yapısındaki durum değişiklikleri ile ilgili olaylar
Buradaki MVC (Model-View-Controller) yapısı daha önceki yapıda bahsettiğim Nesne Yönelimli Yapı ile ilgili bir terim. Bunun için biraz Google’dan makale okuyabilirsiniz.
İlgili olayları “google.maps.event” alan adı aldındaki metodlar ile yapabilirsiniz. Bununla ilgili detaylı örneği birazdan vermiş olacağım.
Kullanıcı Olayları :
‘click’ –> ekrana tıklayınca ortaya çıkar.
‘dblclick’ –> ekrana çift tıklayınca ortaya çıkar.
‘mouseover’ –> bir obje üzerine gelince ortaya çıkar.
MVC Durum Değişiklikleri :
Bu tipde haritanın bir özelliği değiştiğinde ortaya çıkabilir. Örneğin haritanın üstünde bir uzaklaşma/yakınlaşma olması durumunda “zoom_changed” olayı ortaya çıkmaktadır.
Harita Olayları :
Harita ile ilgili olayları addListener() metodu ile ekliyoruz. Bu metot 3 parametre almaktadır : sırası ile takip edilecek obje, objenin olayı ve olay sonrası çalışacak fonksiyon/metot. Aşağıdaki örnekte haritanın yaklaşma seviyesinin değişmesi durumunda ne yapacağımızı göreceksiniz.
[code lang=”javascript”]
[/code]
Olaylarda Parametreler :
Bazı olaylar sonucunda ortaya bazı parametrelerde çıkar. Örneğin haritaya tıklanma olayında çalışacak fonksiyona tıklanılan noktanın koordinat bilgileri de gitmektedir. Böylelikle daha interaktif bir geliştirme ortamı sunulmuş olmaktadır. Aşağıdaki örnekte haritayı takibe alıp tıklanıldığında tıklanılan noktanın koordinatları ekranda göstereceğiz.
[code lang=”javascript”]
[/code]
Olaylar sırasında kullanılabilecek farklı teknikler bulunmakla beraber, bunların en önemlisi kapatma (closure) olarak isimlendirilen JavaScript’te özel (private) kullanımını sağlayan bir yaklaşımdır. Fakat bunu sonraki yazılarımızda daha detaylı olarak işleyeceğiz.
http://code.google.com/apis/maps/documentation/v3/introduction.html
Bu kısımda da Google Maps JS API V3’ün yukarıdaki eğitsel dökümanını takip edeceğiz. Bu dökümanda da örnekle başladığı gibi ben de örnekle başlayacağım.
[code lang=”html4strict”]
[/code]
Örnekte yaptıklarımızın üstünden adım adım gidersek :
a) Öncelikle sayfamıza Google Maps JS API’yi eklememiz gerek. Ayrıca bu kısımda mobil cihazlar için daha önceki yazımızda bahsedilen “meta” etiketler ile ayarlarımızı tamamlıyoruz. API’yi kullanırken ileride kullanacağımız GPS için “sensor=true” diyoruz. Ayrıca dil olarak Türkçe kullanacağımızı “language=tr” diyerek tamamlıyoruz.
[code lang=”html4strict”]
