Category Archives: Windows Phone

UWPToolkit Yayınlandı!

UWPToolkit Nedir?

Evet yukarıda alıntı yaptığım tweetten de anlaşılacağı gibi 18 Ağustos tarihinde UWP Toolkit adı altında Windows 10 geliştiricilerinin işini kolaylaştıracak bir sürü user control, converer, service provider vs. barından bir toolkit yayınlandı. Bunu daha önce Windows Phone için yayınlanan WPToolkit’in UWP hali diyebiliriz. UWP olduğu için Windows 10 içeren bütün cihazlarda bu toolkiti kullanabiliriz demek oluyor bu elbette! Toolkitin içerisinde neler var şöyle bir göz atalım:

UWPToolkit'in GitHub sayfasından...

İçinde Neler Var?

Aslında yukarıdaki resimde tam olarak içerisinde neler olduğu anlatılmış. Fakat ben biraz da Githubdaki projeden bahsetmek istiyorum. Github’da projenin bütün source code’uyla beraber bir de sample app yani örnek proje yayınlanmış. Projeye ait bütün componentlerin detaylı bir şekilde kullanıldığı bu örnek uygulamayı Windows 10 cihazınıza yükleyerek projenin bütün içeriğini test edebilirsiniz.

Bilmeniz Gerekenler

  • UWP Toolkit minimum version olarak SDK 10586 gerektiriyor. Eğer projeniz 10586 öncesini hedef göstererek oluşturulmuşsa bu toolkiti malesef kullanamıyorsunuz. Çünkü içerisinde Composition API’dan estanteneler bulunduruyor ki bu API’da zaten minimum olarak bu sürümü destekliyor. Proje içerisindeki animasyonlar eğer destekleniyorsa Composition API aracılığı ile yapılıyor. Örneğin Blur efektini normalde XAML aracılığı ile veremezsiniz. (Araya DirectX falan sokmak gerekiyo, hiç araştırmayın :P)
  • Bir alt başlıkta da değindiğim gibi proje açık kaynak kodlu olarak Github üzerinden geliştirilmeye devam ediyor.
  • Visual Studio 2015 Update 3 kurmadan geliştirme yapamazsınız. Gereksinimler için buraya tıklayarak Getting Started sayfasını ziyaret edebilirsiniz.

Açık Kaynak

Yayınlandığı günden itibaren buraya tıklayarak ulaşabileceğiniz Github profili üzerinden açık kaynak olarak yayınlanan bu toolkit için henüz yayınlanmasının üzerinden 5 gün geçmesine rağmen bir çok pull request geldi bile… Hatta ben de birkaç tane gönderdim. 🙂 Eğer siz de projenin gelişmesine katkı sağlamak istiyorsanız Github sayfası üzerinden Issue’lar kapatabilir, eksik gördüğünüz yerleri tartışıp ortak karar alındığında pull request göndererek geliştirebilir ya da kendi projelerinizde kullanarak eksiklikleri dile getirebilirsiniz.

 

0
Shares

Güncel Televizyon geri dönüyor !

Hızlanan kalp atışlarınızı duyar gibiyim … Çok pardon o odamın camına çarpan kar tanelerinden geliyormuş 😛

Yaklaşık 10 gün önce Güncel Televizyon’un Windows 10 sürümünü yazmaya başladım.Azar azar buraya tıklayarak ulaşabileceğiniz GitHub reposunu güncelliyorum.Şu an için sadece tamamlanmamış ana sayfası , hakkında sayfası , kanal listeleme ve yayın akışı sayfası var.Henüz izleme kısmıyla ilgili bir çalışma göndermedim repoya.Yoğunluktan sıyrıldığım zaman elbet o da gelecek.

Projeyi Prism kullanarak MVVM altyapısıyla geliştiriyorum.Aslında bir Universal Windows Project (UWP) projesi.Yani çıktı alabildiğimiz zaman hem Windows 10 , hem Windows Phone 10 hem de Xbox üzerinde çalışacak.Xbox kısmı şu an için mümkün değil gerçi fakat ben projeyi tamamlayana kadar o SDK’i de sanırım yayına almış olur sayın Microsoft 🙂

Güncel Televizyon her zaman benim üzerinde çalışmaktan zevk aldığım bir proje olmuştur.Aslına bakarsanız kendimi ve diğerlerini geliştirmenin bir yolu olarak düşünebiliriz.Açık kaynaklı geliştiriyorum çünkü ‘Bunu ben yaptım, sadece benimdir‘ demeyi sevmiyorum.Ben yazdıkça, insanlar okudukça bu döngü mutual bir ilişkiye doğru gider.Ben yazarken kendimi geliştiriyorum, siz de öğrenmek istediğiniz yerler için bir referans bulabiliyorsunuz.Bundan güzel daha ne olabilir ki?

Uygulamanın Windows 10 sürümünde yepisyeni birkaç özellik daha eklemeyi düşünüyorum.Tamamen freestyle bir şekilde geliştirildiği için aslında yazarken “Aaa bu da olsa efsane olur” dediğim birçok özellik gelecektir aklıma.O nedenle main feature set henüz hazır değil.Fakat elbette bir önceki sürümde olan kanal bulma, canlı yayın akışı, bozuk kanal raporlama gibi ana özellikler bu sürümde de yerini koruyacak.Bunlara ek olarak yeni bir kanal eklendiğinde push notification gönderme gibi şekil şukul işlere de girişmek istiyorum aslında.Bakalım daha neler göreceğiz 🙂

Projeye her zaman destek olabilirsiniz.Bu projeye benim başlamış olmam sadece benim geliştiriyor olmam anlamına gelmiyor.Tıpkı çoğu açık kaynaklı geliştirilen proje gibi.Naming conventionlara ve proje altyapısına uygun her türlü kod desteği kabulümüzdür 🙂

Yakın zamanda bu proje üzerinde çok detaylı bir yazı hazırlamayı da düşünüyorum.Şimdilik bu kadar yeter, hayat toz pembe olmasa da hep gülücük saçın 🙂

0
Shares

Güncel Televizyon Artık Open Source !

Geçen sene ilk versionunu kodlamaya başladığım , Windows Store’da 3 binden fazla değerlendirmesi olan , 50 binden fazla indirilen ve 4.5 yıldız ortalamaya sahip olan televizyon izleme uygulamam Güncel Televizyonu Github üzerinden açık kaynak hale getirdim.Bu uygulamanın bende yeri aslında oldukça büyük.Küçük projelerin yanında bu tarz büyük bir projeye başlamamlaberaber Windows Phone ve Windows 8 üzerindeki tecrübelerimi fazlasıyla geliştirme fırsatı buldum.Şu an bu teknolojiler üzerinde bildiğim neredeyse herşeyi bu projede bulabilirsiniz.Aşağıda özene bezene yazdığım bir hikaye mevcut.Projenin her bir aşamasını , neyi nerde neye dayanarak nasıl yazdım vs. hepsini öğrenebilirsiniz 🙂

Projeye buraya tıklayarak GitHub üzerinden ulaşabilirsiniz !

Hikaye

Fikir tamamen ‘Acaba yapabilir miyim ?’ düşüncesiyle ortaya çıktı.Uzun bir yolculuk olacağını biliyordum , fakat herzamanki gibi bu korku da beni yıldırmadı 🙂 Küçük bir araştırma yaparak HLS (m3u8) , RTMP ve MMS protokolleri üzerinden streaming yapmayla ilgili bilgiler edindim.Daha sonra bu protokollerin Windows Development konusunda yapılan örneklerini araştırdım.Çoğu kanallar HLS yayını yapıyordu ve Windows’taki MediaElement kontrolü by default olarak bu desteği vermiyordu.Araştırmalarıma devam ederek Windows Phone Media Streaming Library (PhoneSM) adlı open-source kütüphaneyi buldum.Bu kütüphane sayesinde MediaElement’e HLS oynatma desteğini entegre edebiliyordum.

Web API

Yayın adresleri sürekli değişiyordu.Bir gün çalışan bir HLS yayını bir sonraki gün çalışmayabiliyordu.Bunu farkettikten sonra uygulamanın içerisinde yayın linklerini sabit olarak gömemeyeceğimi anladım.Bu sorunu çözmek için de çalışan canlı yayın linklerini uygulamaya iletebilecek bir Web API hazırladım.API, izlenilmek istenen kanalın yayın linkini kendi hafızasından uygulamaya iletiyordu ve bu linkleri değiştirmek için tek yapmam gereken sadece API projesini güncelleyip publish etmekti.Böylece her yayın linki değiştiğinde uygulamayı güncelleyip Windows Store’a update göndermek zorunda kalmayacaktım.

Basit bir web api projesi üzerinden çoktan uygulamaya bir farklılık yaratmıştım.Arkasında bir web servis çalışan tek televizyon izleme uygulaması Güncel Televizyondu.Fakat bu da yeterli değildi.Her gün bütün linkler çalışıyor mu acaba diye kontrol edemezdim.Bu soruna da bir çözüm bulmam gerekiyordu , buldum da 🙂 Çok izlenen ve resmi sitelerinde ‘Canlı İzle’ özelliği olan kanallar için Web API projesini güncelledim.API’a bu kanallardan izleme linki isteği geldiğinde API kanalın web sitesindeki ‘Canlı Izle’ sayfasına gidecek , siteyi okuyup içerisinden uygulamaya gönderilecek izleme linkini hazırlayacak ve göndericekti.Böylece az bir eforla çoğu kullanıcının izlediği popüler kanalların kontrolünü yaparak vakit kaybetmeyecektim ve uygulamadaki linkler daha uzun ömürlü ; hatta ömürsüz olacaktı 🙂

Sırf yukarıdaki özelliği API’a entegre etmem bile işimi oldukça kolaylaştırmıştı.Fakat bu da benim için yeterli değildi.Uygulamanın daha ön plana çıkabilmesi için değişik özellikler düşünmem gerekiyordu.Ben de yine hiçbir televizyon izleme uygulamasında olmayan Yayın Akışı desteğini getirdim.API , istenilen kanalın o günkü yayın akışını belli başlı web sitelerine bağlanıp hazırlayarak uygulamaya geri döndürüyordu.Ilk yazdığımda her istekte site tekrar analiz edilip öyle gönderiliyordu ve bu da ciddi bir vakit kaybıydı (4,5 saniye).Bu özelliği daha da geliştirerek her gece 2’de otomatik olarak desteklenen bütün kanalların yayın akışını hafızasında tutacak bir sistem hazırladım.Azure Websites üzerinde çalışan Web API projesi her gece Azure Webjobs’dan tetiklenen bir komutla hafızasındaki bütün kanalların yayın akışını yeniliyor ve bir sonraki güne kadar hafızasında tutuyordu.Böylece istenilen kanalın yayın akışı milisaniyeler içerisinde uygulamaya iletilebiliyordu.

Kanal sayısı arttıkça uygulamalaya iletilecek yayın linkleri artıyor ve bunların kontrolü de zorlaşıyordu.Bu linkleri bir veritabanı altyapısına bağlayarak herhangi bir link değiştiğinde Web API projesini tekrar tekrar publish etmekten kurtuldum.Artık yapacağım tek şey canlı sitesinden okunamayan kanallar için linkini veritabanına girmekti.Böylece uygulamada kullanabileceğim fully functional ve oldukça hızlı bir altyapıya sahip oldum.

Windows 8.1

Web API projesini hazırladıktan sonra uygulamayı derli toplu bir hale getirmek için çalışmalara devam ediyordum.PhoneSM’i izleme sayfasınad entegre ederek HLS yayın desteğini sağladım.Çoğu kanal kendi sitelerinde HLS yayını yapıyordu.Aslında Güncel Televizyon’un sahip olduğu bu zengin ve çalışan kanal listesinin tek sebebi HLS videoları oynatabilmesiydi.Arkasındaki API altyapısı sayesindeyse bu linkler hiçbir zaman ölmüyor , marketteki ratingleri gittikçe artıyordu.

Uygulama kullanılmaya başlandıkça yorumları okumaya devam ediyordum.Herkesin şikayetçi olduğu donma sorununa alternatif birşeyler bulmam gerekiyordu.Ülkemizdeki internet altyapısının verdiği düşüklük nedeniyle bazı kullanıcılar yayınları izlerken buffering sürecinde sıkılıyor ve kötü yorumda bulunuyorlardı.Ben de uygulamaya desteklenen kanallarda HD – Low quality özelliğini getirdim.Interent hızına güvenen kullanıcılar HD butonuna basarak en yüksek kalitede izleyebiliyorlardı.Düşük hızlı internete sahip kullanıcılar göz zevklerinden biraz fedakarlık ederek en düşük kalitede izleyebiliyorlardı 🙂 İleride bu özelliği daha da geliştirerek kullanıcılara destekleyen kanallarda seçebilecekleri bütün bandwith değerleri üzerinden izleme özelliği sundum.

Bu zamana kadar uygulamanın eksiklerini arkadaşlarımdan ve marketteki yorumlardan okuyordum.Bu takibin kontrolü biraz zordu haliyle.Kullanıcılar benimle olan iletişimlerini daha kolay yollardan iletmelilerdi.Bu nedenle bir Mobile Services projesi hazırlayarak uygulamaya iletişim formu koydum.Artık uygulamayı geliştirebilmek için daha fazla kaynağım vardı.

Uygulamaya yeni bir kanal eklendiğinde veya bazı kanalları kaldırmam gerektiğinde uygulamayı günellemem gerekiyordu.Bu başlı başına büyük bir sorundu ve çözümü çoktan düşünmüştüm aslında.Uygulamaya kanal senkronizasyon mantığını getirerek bu sorundan kurtulabilirdim.Uygulama açılırken version numarasını API’a gönderiyordu.API , version numarasını kontrol ederek o versiondan yeni bir version varmı diye kontrol ediyordu.Eğer update varsa , uygulamaya yeni kanal listesini gönderiyordu.Eğer yeni kanal listesi gelirse , uygulama bütün kanalları silip yeni kanal listesini locale kaydediyordu.Böylece bütün kanallar version numarasına göre senkron bir şekilde çalışıyordu.

Her kanalın fotoğrafı Azure Storage üzerinde açtığım bir blob üzerinde veritabanındaki kanal numarasına göre saklanıyordu.Eğer bir kanalın fotoğrafını güncellemem gerekirse sadece Storage hesabımdaki dosyanın üzerine kopyalıyordum.

Windows Phone 8.0

PhoneSM , Windows Phone 8.1 üzerinde çalışmıyordu.Ayrıca telefon uygulamasının Metro uygulamasından biraz daha yanar dönerli olması gerekiyordu , kısacası ekstra bazı componentlar kullanarak uygulamanın arayüzünü güzelleştirmem gerekiyordu.Telerik for Windows Phone kullanmaya karar verdim.API projesine çağrı yapan ve Windows 8.1 uygulamasında kullandığım bazı classları Windows Phone projesine aktararak büyük bir iş yükünün altıntan kolayca kurtuldum.Windows uygulamasındaki bütün özellikleri Windows Phone projesine aktararak Universal Project olarak markete gönderdim.

Mutluyum 😀

Sonuç

Benim için ‘Ben bunu yapabiliyorum !’ diyebildiğim bir proje oldu Güncel Televizyon.Şu an en yeni sürümü Windows Store mağzasında , telefon sürümü ise şu an için yayında değil.Vakit buldukça biraz daha geliştirip yayınlayacağım.Bunun yanında iki platformdaki appten de kaldırdığım push notification özelliği gibi özellikler de vardı , onları da vakit bulursam tekrar eklemeyi düşünüyorum.

Sayonara ! 🙂

0
Shares

[Windows Phone Development 101] – Tasarım (XAML)

Serinin ilk yazısına buraya tıklayarak ulaşabilirsiniz.

Aradan yaklaşık 2.5 ay geçmiş 🙂 Koşturmaca nedeniyle çok özen göstermek istediğim bu seriye yeterli vakti ayıramadım sanırım :/ Olsun , kaldığımız yerden devam !

Serinin ilk yazısında geliştirmelerimizi C# ve XAML kullanarak yapacağımızı ve XAML’ın ne olduğunu kabataslak anlatmıştım.Artık bir Windows Phone uygulamasında kullanacağınız bütün ekranların nasıl bir yapıyla kodlanması gerektiğine değinebiliriz.

Boş bir WP projesi açtığınız zaman MainPage isimli bir sayfa projeye otomatik olarak eklenir.Bu sayfa uygulama çalıştığı zaman ilk olarak yüklenecek sayfadır.Eğer uygulama açıldığında farklı bir sayfayı yüklemek isterseniz App.xaml.cs dosyasını açarak aşağıdaki satırı düzenleyebilirsiniz :

if (!rootFrame.Navigate(typeof(MainPage), e.Arguments))

App.xaml.cs dosyasındaki rootFrame nesnesi , uygulamanın çalışma süreci içerisinde ekranı dolduracak olan nesnedir.Ilk yazıda bahsettiğim Navigate methodu ile bu satırda yüklenecek sayfayı belirliyoruz.Dikkat ederseniz bu method geriye bir bool döndürüyor.Bunun nedeni navigasyonun başarısız olduğu senaryoları yakalayıp handle etmek.Yani ben herhangi bir nedenden dolayı istediğim sayfayı yükleyemiyorsam Exception alıp uygulamayı patlatmak yerine farklı bir alternatif sayfaya yönlendirme yapabilir veya kullanıcıya uygun hata mesajını gösterebilirim.Bu tarz senaryolara ve geri tuşunu handle etme işlemlerine bir sonraki yazılarda değineceğim.

XAML konusuyla girdik fakat bu kısma değinmeseydim olmazdı … Tasarım üzerinden devam edelim.

MainPage sayfasını düzenlemek için dosya üzerine çift tıklayarak sayfayı XAML Designer ile açın.Designerın alt barındaki >> veya << butonlarını kullanarak sayfayı ikiye bölebilir ve hem tasarım tarafını hem de tasarımın kod tarafını görebilirsiniz.Tasarım yapmak için XAML tasarım aracını kullanabileceğiniz gibi XAML kodlarını yazarak da yapabilirsiniz.Benim daha kolayıma geldiği için ben genelde designer tarafına pek bulaşmıyorum.Bu yeni başlayanlar için iyi bir yöntem olmayabilir , fakat XAML kodlarını yazmaya ve birşeyleri kafanızda hızlı bir şekilde oturtmaya başlayınca kod tarafında yazımın daha rahat olduğunu görebilirsiniz 🙂

Boş bir XAML sayfası

Boş bir XAML sayfası

Karşınızda yukarıdaki gibi bir ekran olması lazım.Sağ tarafta tasarımın kodları , sol tarafta ise bir önizlemesi.Bu ekranı görüyorsanız Visual Studio’nun sol tarafında Toolbox’ı da görüyorsunuz demektir.All XAML Controls başlığı altında bu sayfaya ekleyebileceğiniz bütün XAML kontrollerini görebilirsiniz.En çok kullanılan kontrolleri kısa açıklamalarıyla beraber sizler için yazdım.Bir kontrole tıkladıktan genelde sağ altta açılan Properties penceresinde o kontrole ait değiştirilebilir özelliklerin listesini bulabilirsiniz.Aşağıda anlattığım sık kullanılan kontrollerin temel özelliklerinden ziyade dikkat edilmesi gereken yerlerine veya ipucu olarak kullanılabilirliği olan özelliklerine değindim , buyrunuz :

textblock1

  • Textblock : Ekrana belirlenen font ve büyüklük ile yazı yazar.Entry , label vs. olarak diğer platformlarda alternatifleri mevcuttur.Aslında ekranda düz bir yazı göstermek istediğimiz her yerde kullanabiliriz.
    • Background propertsini yoktur.Bu nedenle arkaplan rengini değiştiremezsiniz , her zaman transparandır.

 

textbox1

  • TextBox : Bir yazı girilmesi gereken durumlarda kullanılır.Örneğin bir giriş ekranında kullanıcı adı’nın girildiği yerler birer TextBox’tır.
    • InputScope : Kullanıcı bu TextBox’a tıkladığında girebileceği değerlerin açılması gereken pencereyi belirler.Detaylar için inceleyebilirsiniz.
    • BorderBrush : Kutucuğun çevresindeki kenarların rengini belirler.
    • BorderThickness : Kutucuğun çevresindeki kenarların kalınlığını belirler.4 farklı değer alır , soldan başlamak üzere saat yönünde bütün kenarlar için farklı bir kalınlık değeri girebilirsiniz.(double türünden)
    • SelectionHighlight : Kullanıcı kutucuktaki yazıyı seçtiği zaman seçili alanın hangi renge boyanacağını belirler.

buton1

  • Button : Tıklanabilir bir düğme 🙂
    • Text propertisi yoktur , üzerindeki yazıyı Content propertysini kullanarak değiştirebilirsiniz.Bu property string değil object alır.Bu nedenle içerisinde göstermek istediğiniz yazı haricinde farklı şeyler varsa kod tarafından halledebilirsiniz.(TODO 🙂 )
    • BorderBrush ve BorderThickness propertylerini buton için de kullanabilirsiniz.

checkbox1

  • CheckBox : Bir yazının yanında seçilebilir bir kutucuk içeren kontroldür.
    • IsChecked propertysi kontroldeki kutucuğun seçili olup olmadığını kontrol eder.

 

Yukarıdaki 4 tane görsel kontrolün kısa açıklamalarını yaptıktan sonra artık görsel olmayan XAML kontrollerine geçebiliriz.XAML’da bu görsel kontrolleri ekranda bir düzen içerisinde gösterecek olan konroller de mevcuttur.Stackpanel ve Grid gibi kontrolleri ekrana koyduğunuz zaman varsayılan olarak göremezsiniz.Bunun nedeni bu kontrollerin bir görselliğe ihtiyacının olmamasından ziyade , asıl amacının içerisinde barındırdığı diğer kontrolleri nasıl göstereceğiyle ilgili olmasıdır.

Şimdi yukarıdaki yazı biraz kafa karıştırmış olabilir , şöyle düzeltelim.Stackpanel dediğimiz kontrol , içerisinde birçok görsel element alabilir.Ben ekranda bir Stackpanel koyup içerisinde yüzlerce Button veya TextBlock vs. ekleyebilirim.Stackpanelin amacı bu eklediğim kontrolleri ekrana alt alta veya yan yana göstermesidir.Aşağıdaki iki örnek resmi inceleyerek neyden bahsettiğimi anlayabilirsiniz :

stack1

Orientation = Vertical StackPanel

stack2

Orientation = Horizontal StackPanel

Dikkat ederseniz Orientation propertysine Horizontal değerini verirsem Stackpanel içerisindeki görsel elementler alt alta değil , yan yana sıralanıyor.Hem design hem kod tarafını resimlerde paylaşmayı uygun buldum , çünkü genel olarak XAML kodları nasıl yazılıyor (syntax) görmeniz açısından iyi olacağını düşünüyorum.

Stackpanelin dışında bir de Grid kontrolünü ele almak istiyordum aslında bu yazıda fakat Grid ile ilgili anlatmak istediğim bir çok şey olduğu için bu yazıda ona yer vermeyeceğim.Bir sonraki yazıyı tamamen Grid üzerine yazmak istiyorum.

Temel olarak XAML ile tasarım yapmak için aşağıdaki açıklamaları okumanızda yarar var.Bu açıklamaları birkaç paragrafla anlatmak yerine madde madde yazmanın daha uygun olacağını düşündüm :

  1. Ekrana koyduğunuz her kontrolün Margin propertysi ekranın kenarlarından kaçar pixel boşluk bırakılması gerektiğini ifade eder.Örneğin Stackpanel içerisindeki Button kontrolüne Margin=”10″ yazarsam bütün kenarlarından 10’ar pixel uzaklaşır.Aşağıda Margin’in diğer kullanım örneklerini yazdım :
    1. Margin=”10″ : Bütün kenarlardan 10 pixel uzaklaşır.
    2. Margin=”10,5″ : Sol ve sağ taraftan 10 pixel , alt ve üst taraftan 5’er pixel uzaklaşır.
    3. Margin=”10,5,5,0″ ya da Margin=”10 5 5 0″ : Ilk numara sol taraftan olmak üzere saat yönünde takip eden numaralara göre kenarlardan uzaklaşır.
  2. HorizontalAlignment ve VerticalAlignment propertylerini kullanabilirsiniz.Bu propertyler ile ekrandaki kontrolü ekranın veya dışındaki elementin (Örnek : Stackpanel) ne tarafına hizalanması gerektiğini değiştirebilirsiniz.
    1. Left : Sol hizalar
    2. Right : Sağ hizalar
    3. Center : Ortaya hizalar
    4. Stretch : Bulunduğu konumda ekranı tamamen doldurana kadar hizalama yapar.
  3. Opacity propertysi görsel elementin şeffaflığını temsil eder.Double cinsinden maksimum değeri 1.0 olmak üzere kullanılır.(Örneğin Opacity=”0.6″ yazarsam %60 şeffaflık verebiliim)
  4. Visibility propertysi elementin ekranda görünüp görünmeyeceğini temsil eder.
  5. XAML tarafında koyduğunuz elementlere C# kısmından erişmek istiyorsanız elementlere bir isim vermek zorundasınız.Bunu da x:Name özelliğini kullanarak yapabilirsiniz.Örneğin ben ekrana bir Button koydum ve buna C# kodumdan erişmek istiyorum.XAML tarafında x:Name=”buton1″ yazdığım zaman artık Visual Studio’nun Intellisense’i bu elementi C# tarafında (O sayfaya ait XAML dosyasının .CS uzantılı dosyasında) algılayabilir.
    buton3
  6. Koyduğunuz elementlere ait Eventleri Properties ekranında “Şimşek” simgesine tıklayarak görebilirsiniz.Bu eventlere ait kutucuklara çift tıkladığınız zaman gerekli EventHandler otomatik olarak C# tarafında oluşturulur.
    1. XAML tarafında Event eklemek isterseniz EventAdi=”EventHandlerIsmi” formatında yazabilirsiniz.Örneğin bir butonun Click eventi için ben handlerımı Click=”Button_Clicked” syntaxlıyla XAML tarafında yazabilirim.Zaten Properties penceresinden kutucuğa çift tıkladığınız zaman .cs dsoyasına handler eklenirken XAML dosyasına da bu satır eklenir.

      buton4

    2. Eventin adını yazdıktan sonra tırnakları koyduktan sonra Visual Studio size “<New Event Handler>” seçeneğini sunar.Buna basarsanız otomatik olarak butona ait Event Handler cs kısmında oluşturulur.
  7. XAML’da eklediğiniz kontrollerde mümkün olduğunca düşük Margin değerleri kullanmaya özen gösterin.Toolboxtan ekrana bir kontrol sürükleyip bıraktığınız zaman kod tarafna dönüp bakarsanız otomatik olarak bir Margin değeri ekendiğini görürsünüz.Windows Phone uygulamalarında yaptığınız tasarımların farklı çözünürlüklere sahip bütün cihazlarda aynı görünmesini istiyorsanız tasarımlarınızı bu koşullarda yapmak zorundasınız.Toolboxtan ekranın ortasına sürükleyip bıraktığınız bir TextBlock sizin designer önizleme ekranınızda tam ortada gözükebilir.Fakat şöyle bir olay var ki sürükleyip bırakarak eklediğiniz element varsayılan olarak bir Margin değerine sahip olduğu için çözünürlük ne olursa olsun uygulama çalışmaya başladığında o margin değerlerine sahip olacak.Bu da farklı çözünürlüklere sahip telefonlarda aslında tam ortada gözükmeyeceği anlamına geliyor.Bunun yerine koyduğunuz elementin Margin değerlerini silip HorizontalAlignment ve VerticalAlignment  propertylerini Center yapmanız isediğiniz sonucu verecektir.

7. maddeye uygun tasarımların nasıl yapılacağı aslında biraz sizin görsel parçalama yetinize bağlı.Yaptığınız bir tasarımı bir sonraki yazıda oldukça detaylı anlatacağım Grid kontrolüyle olabildiğince detaylı yaparsanız çözünürlük farketmeksizin her telefonda aynı görüntüde çalışabilir.Yukarıdaki Center’a ayarlama örneği oldukça ufak bir örnekti.Daha kompleks tasarımlara sahip mobil uygulamalarda bu bir yaklaşımda kodlama yeteneğini XAML üzerinde vakit geçirdikte çok kolay bir şekilde anlayabileceğinizi düşünüyorum.

Birden fazla nesneyi ekrana basmak için kullandığımız GridView , ListView , Listbox gibi kontrolleri de ileriki yazılarda inceleyeceğiz.Hepinize iyi çalışmalar 🙂

0
Shares

T2 Mobil Hackathon Maceramız

Bu haftasonu 28 – 29 Mart tarihleri arasında Ankara Cyberpark’ta gerçekleşen T2 Mobil Hackathon’a arkadaşlarım Nejat ve Sezgin ile ben de katıldım.Cumayı Cumartesiye bağlayan gece otobüse atladık , sabah 6:30’da Ankaradaydık 🙂

AŞTİ’de Ankara serüvenimiz başlamış oldu.Etkinliğin başlamasında daha 2.5 saat vardı ve hafif yağmurlu havada mahsur kalmıştık.Bir proje düşünmemiz de gerekiyordu.Bilkent’e giden servislerin Sıhhiye köprüsünün ordan kalktığını öğrenip köprüye doğru servise bindik.Bir çayevine oturup kahvaltı ederken proje fikirlerini tartışmaya başladık.Güzel fikirler ortaya atıldı ve en sonunda Live@’te karar kıldık 🙂

Live@

Live@ , sokak sanatçılarının 10 ile 30 saniye arasında preview ses kayıtlarını telefonunuzdan paylaşıp , diğer sanatçıları keşfetmenizi sağlayan lokasyon bazlı bir mobil platform.Live@ ile gittiğiniz herhangi bir şehirde Keşfet bölümünden hoşunuza gidebilecek sanatçıların kısa demolarını dinleyerek çaldıkları adrese yol tarifi alabiliyorsunuz.Facebook login ile çalışan uygulamada sevdiğiniz sesleri favoriye alabilir , diğer sosyal ağlarda paylaşabilir ya da diğer kullanıcıların görmesini kolaylaştırmak için likelayabilirsiniz.Fikir aşaması , tasarımı , servisi ve clientı ile bir bütün halinde tamamen hackathon süresi içerisinde (yaklaşık 27 saat) ortaya çıkmış , herşeyiyle hatasız çalışan bir platform 🙂

Live@ Logo

Cyberpark’a girdiğimizde girişte kayıtlarımızı yaptırdık.Açılış konuşmasını ve Mustafa Kasap’ın Azure’a giriş konuşmasını dinledikten sonra bir 10 dakika içerisinde planlama ve iş paylaşımı yaptık.Serviste Sezgin , tasarımda Nejat ve clientta bendeniz Burak olarak grup MSP Alpha hackathona hazırdı 🙂

Planlamadan sonra 10:30 – 12:00 arası bir brain storming yaptık.Bu süre içerisinde uygulamanın amacını , çözüm bulduğumuz sorunları , prototip için feature listi ve kullanacağımız teknolojileri tartıştık.Servis için bir ASP.NET Web API , ses dosyaları ve saklanacak diğer dosyalar için Azure Storage , source control için Visual Studio Online üzerinde TFS , client için Windows Phone 8.0 ve veritabanı için de Azure SQL kullanmaya karar verdik.Hem hakim olduğumuz teknolojiler olduğundan dolayı ürünü daha hızlı ortaya çıkartabilecektik hem de arkasında Azure desteği olması gereken bir mobil hackathon olması dolayısıyla hackathon ruhuna bu tarz bir yaklaşımın daha iyi olacağını düşündük.

Sayfa tasarımlarında nelere dikkat etmeliyiz , renk paletimiz nasıl olacak vs. gibi görsel algıları da brain storming sırasında bir gözden geçirdik.Uygulama sayfalarını Nejat aradan çıkartırken biz de Sezgin ile backendde kullanacağımız projelerin hazırlıklarını yapmaya başladık.Servis için bir Azure Mobile Services projesi oluşturabilirdik , fakat Web API ile çalışmak bizim için hız açısından daha mantıklı olduğunu düşündük.

 

Client tarafında bir Universal App yapmayı başta düşünüyorduk , fakat compatibility açısından 8.0 projesinin hem daha hızlı hem de daha çözüm odaklı olduğuna karar verdik.Bir Portable Class Library üzerinden ilerlemeyi , bunun ileriki zamanlarla diğer platformlara uygulamayı çıkarmak için daha kolay olacağını biliyorduk fakat bu hackhaton süresi içerisinde kaynaklarımızı daha fazla harcayacağından dolayı vazgeçtik.Bunun yerine Windows Phone projesi içerisinde daha modüler bir yapı izleyerek aynı code sharingi yakalamaya çalıştık , oldu da 🙂

Bu hazırlıkların ardından Sezgin ile saat 2 gibi artık backend tarafında veritabanı tasarımına başlayabilirdik.1 , 1.5 saatlik bir tasarım sürecinin ardından kodlamaya başladık.Gerek tasarım , gerek sunucu gerekse client tarafında bazı zamanlar ortak bir fikirde karar kılmakta zorlansak da sonuç olarak ortaya tamamiyle çalışan hatasız bir prototip sunabildik 🙂 Bizim için zaten hackathon mantığı da buydu.

Biz bütün bu dizayn aşamalarıyla uğraşırken organizasyonu düzenleyen T2 de bizler için süreci kolaylaştırmak için herşeyi yapıyordu 🙂 Sürekli masamıza gelen ikramlar , yemekler , çerezler , içecekler derken zaten çalışmakan kaytarmak için masa başından ayrılamıyorduk 🙂 Organizasyon tam anlamıyla en ince detayına kadar düşünülmüştü.Gece 12 – 1 gibi uygulamada artık birşeyleri gerçekten ortaya çıkartabildiğimiz fakat neticesinde de enerjimizin taban yaptığı zamanlarda gelen enerji içecekleri çok ince bir detay olmasına rağmen benim gözümden kaçmadı 🙂 Soğuk havada kocaman kazanlarda gelen sıcak çorbalar , ihtiyacınız olduğunda rahat uyuyabileceğiniz karanlık ve geniş bir oda , sırtınız yere gelmesin diye uyurken altınıza alabileceğiniz Microsoft Azure matları falan derken size düşen tek şey de fikrinizi geliştirmek oluyor 🙂 Biz kullandığımız teknolojilere hakim olduğumuzdan dolayı pek mentor arayışına girmedik , fakat bütün bu süreçte etrafta takıldığınız yerde size yardımcı olmak için çabalayan mentorlar da bulunuyor , daha ne !

Çalıştığımız masa ilk günün sonunda (gerçi sürekli çalışma içerisinde bulunduğumuz için bizim için baş – son kavramı pek olmadı) resmen çöplüğe döndü.Heryerde kağıtlara çizilmiş ekranlar , user controller , usbler , detay yazıları , çerez kırıntıları , sandviçler , kola kutuları … 🙂

Masamız ...

Hackathon bitimine doğru jüri sunumu için ufak bir slayt hazırladık.Uygulamayı son olarak birkaç kere daha test ettik , jüri sunumunda yapacağımız demoda aksilikle karşılaşmamak için … 🙂 Artık hazırdık.Jüri sunumları başladı , 3. sırada biz vardık.Jüri üyeleri arasında Mustafa Kasap hocamız da vardı 🙂

Sunumdayız :)

Sunum sırasında Bilkent Cyberpark Genel Müdürü Canan Çakmakçı bize “2015 yılında neden video upload özelliği yok ?” sorusunu yöneltti , biz de video yükleme özelliğinin uygulamanın basitliğine aykırı olduğunu ve müziğin göze değil kulağa hitap eden birşey olduğunu belirttik 🙂 Sunum sırasında belirtmedim fakat bu soru üzerine benim söylemek istediğim birkaç şey daha var açıkçası.Ben bu yaklaşımı 2 farklı şeye benzettim.Birincisi , bu proje Twitter olsaydı , bundan birkaç sene önce olsaydı ve biz de Twitterın kurucuları olsaydık , sunum sırasında bu soruyu sormak “201x yılında sınırsız yazabilme imkanım varken neden 140 karakter ?” sorunusu sormak ile aynı şey 🙂 Ikincisi ise bu yaklaşımı “2020 yılındayız , bu uygulamada neden hologramik görüntüleme desteği yok ?” ya da “Bu uygulama neden Hololenste çalışmıyor ?” yaklaşımına benzetebiliriz 🙂

“Iş modeliniz nedir ?” ya da “Gelir modeliniz nedir ?” sorularına hiç değinmek istemiyorum , çünkü zaten biz bu projeyi geliştirirken tamamen fun project kafasında çalıştık , hatta organizasyona gelirken de bir haftasonu kaçamağı kafasındaydık 🙂 Sunum sırasında bu sorulara tabiki gelir elde edebileceğimiz kaynakları sunduk ki bunun sorulacağını biliyorduk ve hazırlığımızı yapmıştık.Fakat 27 saat içerisinde geliştirilmiş bir prototipten de gelir elde etmeyi beklemek hem hackathon ruhuna aşırı aykırı bir yaklaşım , hem de pek verimli bir yaklaşım değil.Bize göre bu sorunun cevabı 27 saatlik bir hacakthonda verilmesi gereken bir cevap değil ; ürünlerin değil , fikirlerin yarıştığı ve ucunda yatırımın kesin olduğu yarışmalarda verilmesi gereken bir cevap 🙂

Tabiki bu durum yalnızca T2 hackathon jürisine özel bir durum değil , genel olarak herhangi bir hacakthonun sonunda yaşanan bir durum malesef.Biz katılımcılar olarak hackathon jürilerine “Bizim uygulamamız bu kadar para kazandıracak , bakın arkamızdaki sunumda da görüyorsunuz zaten , uygulamayı bitiremedik ama sunumdaki gibi olacak ileride …” demekten ziyade “Biz xx saat aşırı yoğun bir tempoda çalıştık , sonuç olarak bu ürünü çalıştırabilir bir hale getirdik , buyrun cihaz budur , uygulama budur , alın elinizde canlı olarak test ederek değerlendirmenizi yapın” demeyi tercih ediyoruz.Çünkü bizim için hackathon ruhu böyle birşey 🙂 Sunum odaklı bir çalışma ortamı olsaydı biz 27 saat boyunca fikrimizi uygulama haline getirmek için çalışmazdık , bunun yerine 27 saatte dünyanın en göz boyayıcı sunumunu hazırlar , jüriden gelebilecek sorulara en ödül odaklı yanıtları belirler ve ön çalışmamızı yaptıktan sonra karşılarına çıkardık 🙂 Keşke Ankarada geçirebileceğimiz birkaç saat vaktimiz daha olsaydı da blogumda yazmak zorunda kaldığım fikirlerimi canlı olarak tartışabilseydik 🙂

Ikincilik pozumuz :)

 

MSP Alpha ekibi olarak geliştirdiğimiz mobil uygulama Live@ hackathonda ikinci oldu 🙂 Sunumların ardından yapılan kokteylde diğer gruplar ile keyifli sohbetler yaptık , organizasyon ekibiyle çok güzel bağlar kurduk.Özellikle teşekkür etmek istediğim ve bizi hackathon süresince yanlız bırakmayan iki isim ; Soner Altın(a.k.a Soner Abi) ve  Mustafa Kasap , herşey için teşekkürü borç biliyoruz , katıldığım(ız) en keyifli hackathondu ! Bir dahaki sefere görüşmek üzere ! 🙂

0
Shares

Json.NET ile null propertyleri ignore etmek.

Son zamanlar üzerinde çalıştığım bir Jira uygulaması var.Daha önce duymayanlar için açıklayayım , Jira bir proje yönetim portalı.

Uygulama içerisinden Jira REST API’ı kullanarak giriş yaptığınız hesabınıza atanmış projeleri , size açık olan bugları vs. görüp işlem yapabiliyorsunuz.Proje üzerinde çalışırken rastladığım fakat çözümünü bir türlü bulamadığım bir hatayı sizlerle paylaşmak istiyorum.

Rest api üzerinde bir projeye issue oluşturmak için istek gönderirken bazen “It is not on the appropriate screen, or unknown” hatası alıyordum.Biraz araştırma sonucu bunun Jira portalında sorun oluştururken ekranda gözükmeyen alanları güncellemeye çalışırken alınan bir hata olduğunu öğrendim.Örneğin bir projenin hiçbir version bilgisi yoksa , siz version alanını null bile gönderseniz bu hatayı alabiliyorsunuz.

Sorun oluşturmak için gönderdiğim modelde Version ve Components adlı 2 property var.Version için geçerli olan bu hata components için de geçerli.Eğer bu propertyler boşsa , gönderilen Jsonda da olmamaları gerekiyordu.Json.NET’in ise null propertyleri serialize edilen jsondan ignorelamak için müthiş bir attribute’u var …

[JsonProperty(NullValueHandling = NullValueHandling.Ignore)]

null ise serialize ediliş halinde eklenmesini istemediğiniz propertylere bu attribute’u ekleyerek bu tarz hataları kolaylıkla atlatabilirsiniz 🙂

Herkese iyi pazarlar !

0
Shares

[Windows Phone Development 101] – Giriş

ÖNSÖZ

Herkese merhabalar ,

Windows Phone Development başlıklı yeni bir blog serisine başlayacağımı duyurmuştum.So , here we go …

Öncelikle biraz konseptten bahsetmek istiyorum.Blog serisini en temelden başlayarak hazırlayacağım (C#’a girişten değil tabiki de …).Orta seviye de olsa C# bilgisi olan ve daha önce WP’a uygulama geliştirmemiş olan birisi seriyi takip ederek bu konu üzerinde oldukça profesyönel projeler ortaya çıkartabilir.

Seri boyunca temelden zora doğru bir konu listesi hazırladım.Bu yazıyla bir giriş yaparak seriye ilerleyen zamanlarda devam edeceğiz 🙂

Giriş

Windows Phone , Microsoft’un geliştiriciliğini yaptığı bir mobil işletim sistemidir.En çok Nokia/Microsoft Lumia’larda kullanılmaktadır.Bunun yanında WP kullanan HTC , Samsung telefonlar da mevcut piyasada.En son sürümü 8.1 sürümüdür ve en popüler kullanımda olan sürümleri de 8.0 ve 8.1’dir.

Şimdi neden 8.0 ve 8.1 diye ayırdığımı merak ediyorsanız sebebini şöyle açıklayabilirim :

Windows Phone 8.1 ile Windows mimarisine Universal App mantığı geldi.Universal App ise ortak bir dosyayı kullanan (Shared) iki farklı proje aslında.Visual Studio’da bir Universal App açtığınız zaman solition dosyasına 3 farklı proje açılır.

  1. Windows Store
  2. Windows Phone
  3. Shared

Shared projesi içerisindeki kodlar , diğer iki proje arasında ortak kullanılabilir.Böylece ben Shared projesini paylaşan iki farklı platformdaki projeler arasında yalnızca ufak tasarımsal değişiklikler yaparak aynı anda iki farklı platforma da app çıkartabilirim.

Universal App mantığı geldiğindn dolayı Windows Phone’daki bazı kütüphaneler biraz Windows Store’laştırıldı.Örneğin , Windows Phone 8.0 projesine iki sayfa arasında navigasyon yapmak için

NavigationService.Navigate

kullanılırken , Windows Store uygulamasında iki farklı sayfa arasında navigasyon yapmak için

Frame.Navigate

kulanılıyordu.Universal App mantığıyla beraber artık NavigationService’e elveda denildi ve Frame ile yola devam edildi.Yani Windows Phone’daki kod yazımı birazcık daha Windows Store mantığına yaklaştı.

Biz  geliştirmelerimizi C# ve XAML kullanarak Windows Phone 8.1 üzerinden yapacağız.Fakat C# ve XAML , Windows Phone geliştirmesi yapmak için tek seçenek de değil.Windows Phone için geliştirme yapmak için 3 farklı seçeneğiniz var :

  • C# / VB + XAML
  • C / C++ + XAML
  • HTML + CSS + Javascript

Yukarıdaki dillerden XAML’ı daha önce duymamış olabilirsiniz.XAML aslında bir tasarım dilidir.WPF ve Silverlight ile kullanılmaya başlandı ve şimdi de Windows Store ve Windows Phone uygulamalarında kullanılmaya devam ediyor.

Windows Core Mimarisi.

Geliştirici Ortamının Hazırlanması

Windows Phone uygulamalarını Microsoft’un harika IDE’si Visual Studio’yu kullanarak geliştirebilirsiniz.Visual Studio’da WP Development yapabilmek için Windows Phone SDK’yı kurmanız gerekiyor.Zaten Visual Studio 2013’ün kurulum ekranında yüklenecek eklentileri seçerken Windows Phon SDK seçeneği ekranda beliriyor.Yanındaki kutucuğu işaretleyerek Visual Studio’da Windows Phone uygulamaları geliştirmek için gerekli SDK’yı bilgisayarınıza yükleyebilirsiniz.

En aşağıdaki Windows Phone 8.0 SDK seçeneğini işaretleyerek SDK’yı yükleyebilirsiniz.

 

Kurulum tamamlandıktan sonra bilgisayarınızı yeniden başlatın ve Visual Studio’yu çalıştırın.

Boş Windows Phone 8.1 Projesi Oluşturma

File > New > Project menüsünü takip edin.Templates > Visual C# > Store Apps > Windows Phone Apps menüsünü izleyerek Blank App (Windows Phone)’u seçin.

Şimdi burada bir şey kafanızı kurcalıyor olabilir.Bu menüde 2 tane Blank App şeması var.Birinde Windows Phone yazıyor , diğerinde Windows Phone Silverlight.Eğer Windows Phone şemasından açarsanız güncel olan Windows Phone Runtime kodunu kullanarak geliştirme yapabilirsiniz.Yani yukarıdaki Frame – NavigationService örneğindeki Frame’i kullanarak diyebiliriz.Eğer Windows Phone 8.o’de yazdığınız kodu çok fazla güncellemek istemiyorsanız , ve 8.1 ile gelen bazı özelliklerden (Universal Apps gibi) fedakarlık edebileceğinizi düşünüyorsanız Blank App (Silverlight) açarak 8.0 stilinde kod yazarak 8.1 projesi çıkartabilirsiniz.

d1

Projemiz açıldığnda Solution Explorer’da Windows Phone uygulaması geliştirmek için gerekli minimal dosyaları görebilirsiniz.Burada dikkatiniz çekmek istediğim birkaç nokta var aslında.Daha önce de söylediğim gibi XAML bir tasarım dili.Solution Explorer’daki XAML uzantılı dosyalar ise uygulamanın arayüz dosyaları.Bu dosyalara bağlı olarak gelen bir de xaml.cs uzantılı dosyalar var.Bu dosyalar ise aslında işin C# kısmı diyebiliriz.

Her XAML dosyası (Resource vs. hariç) bir CS dosyasına bağlıdır.Bu bağlantı sayesinde bir XAML dosyasına , yani uygulamanın arayüzüne koyduğumuz bir kontrolün (Örnek : TextBox) özelliklerine erişip müdahale edebiliriz.Serinin ilk yazısı olduğu için yalnızca temel dosya mantığından bahsediyorum , ilerleyen serilerde XAML – CS interaksiyonunu had safhalara çıkaracağız …

MainPage , sistem tarafından otomatik oluşturulan ilk sayfadır.Mobil uygulamalarda navigasyon sayfa mantığıyla çalışır.Örneğin çoğumuzun kullandığı WhatsApp uygulamasından bahsedelim.Platform farketmeksiniz bütün mobil uygulamar sayfa yapısını kullanır.Siz kişi listesinden bir kişiye tıklayarak sohbet ekranına geldiğinizde anlarsınız ki aslında Sohbet Sayfası ve Kişi Listesi Sayası olarak 2 farklı sayfa arasında navigasyon yaptınız.Işte MainPage’de uygulamayı çalıştırdığımızda karşımıza çıkacak olan ilk ekran.

Solution Explorer

Solution Explorer

XAML dosyaları için tasarım dosyaları dedik fakat burda ayırmamız gereken bir istisna var.Oluşturulan App.xaml dosyası aslında tasarımsal bir şey ifade etmiyor bizim için.App.xaml ve App.xaml.cs , uygulamada bütün sınıflar arasında kullanabileceğimiz ortak bir repository aslında.Bütün sayfalardan erişmek istediğiniz bir nesne var ise App.xaml.cs içerisine tanımlayabilirsiniz.Ya da bir template hazırladınız , bunu App.xaml içerisine koyarak Resourcelardan erişebilirsiniz.(Resource’ları da ilerleyen serilerde detaylı bir şekilde inceleyeceğiz)

Uygulama ilk çalıştırıldığında MainPage yüklenmeden önce App.xaml.cs içerisindeki kodlar çalışır.Buradaki override methodlar App sınıfının inherit edildiği Application sınıfından gelen methodlardır.

  • OnLaunched = Uygulama çalıştırıldığında tetiklenir.
  • OnSuspending = Uygulama beklemeye alındığında tetiklenir.(Windows Phone Uygulama Yaşamdöngüsü’nü serinin diğer yazılarında işlediğimizde bu methodlar çok daha anlamlı hale gelecek 🙂 )

Assets klasörü uygulamanın içerisinde dışarıdan eklediğiniz içeriklerin saklandığı klasördür.Özel bir anlamı yoktur , varsayılan olarak yeni bir klasör olarak oluşturulur.Fakat ilk oluşturulduğunda içerisinde uygulamanızın telefonda görüneceği simgeleri vs. barındırır.Bu dosyaları da manifest dosyasından değiştirebiliriz.

Package.appxmanifest , temelinde bir XML dosyasıdır.Uygulamanın izinlerini , açıklamalarını , çalışması için gerekli temel ayarları vs. barındırır.Çift tıklayarak açtığınızda Manifest Designer aracılığıyla değiştirebileceğiniz özellikleri görebilirsinizManifest Designer

Designer üzerinde gördüğünüz seçenekler size sunulan bütün seçenekler değildir.Manifest dosyasına sağ tıklayarak  View Code a basarsanız gerçek XML dosyasını görürsünüz ve bu dosyada designerda yapamayacağınız değişiklikler yapabilirsiniz.(Custom uri scheme için protocol register etmek gibi , daha sonra işleyeceğiz … 🙂 )

Kapanış

Serinin ilk yazısında Windows Phone ve mimarisi konusunda çok basit de olsa bilgi sahibi olduğunuzu düşünüyorum.Belirli bir roadmap hazırlamadığım için yazıda çoğu kez “ileride işleyeceğiz” sözünü kullanmış olabilirim 🙂 Şimdilik bazı şeylere ne olduğunu bilmeseniz de kulak aşınalığı olması açısından fikir sahibi olmanız yeterli.

Serinin bir sonraki yazısında görüşmek üzere , iyi çalışmalar.

 

 

0
Shares

(IoT) TI Sensor Tag ile Sensör Verilerini Okumak

1,2 Ekim’de Haliç Konge Merkezi’nde düzenlenen Webit 2014 etkinliğinde Microsoft IoT Hackathona ben de katıldım.Hackathonda katılımcılardan beklenen Texas Instruments Sensor Tag isimli multi sensörlü bir cihazı Microsoft Azure ile entegreli bir şekilde kullanarak bir proje geliştirmekti.

Etkinlik alanında 3 tane de Bluetooth ile kontrol edilebilen BeeWi oyuncak arabalarından vardı.Ben de proje olarak 2 tane TI Sensor Tag kullanarak bu arabaların uzaktan kontrolünü sağlayabilecek bir Windows Phone uygulaması geliştirdim.2 farklı sensörden bir tanesi gaz – fren için , diğeri ise sol ve sağ için.Başta çok mantıksız geliyordu açıkçası fakat projeyi geliştirdikten sonra arabayı sürmeyi hiç bırakmak istemedim , o kadar zevkli oldu 🙂

Bu yazıda da size bu sensörlerden gelen veriyi nasıl olarak yakalayacağımızı anlatmak istiyorum..Bu cihazlar BLE ( Bluetooth Low Energy ) modunda çalıştıkları için pek fazla güç harcamıyorlar.Ayrıca içinde 6 farklı sensör ve sol – sağ tık içeren bir buton bölümü var.Bu sensörler de GATT ( Generic Attribute Profile ) profillerinde çalışıyorlar.Lumia Black güncellemesiyle bütün Lumia’lara GATT profillerini okuyabilme özelliğinin geldiğini de hatırlatmak isterim.Sensörleri kısaca listelemek gerekirse :

  • IR Temperature
  • Humidity
  • Pressure
  • Accelerometer
  • Gyroscope
  • Magnetometer

Son sürümünde artık iBeacon desteği de getirilmiş ve cihaz 25 $.Buraya tıklayarak sayfasını ziyaret edebilirsiniz.

Cihazdan kısaca bahsettikten sonra gelelim bu aletteki verileri okumaya.Öncelikle kitin kurulumunu yaptıktan sonra elinizde bir adet Sensor Tag oluyor , onu belirteyim :)Kurulum da gayet basit , kitin içindeki pili cihaza takıyorsunuz , bitiyor 😀 Dilerseniz yanında gelen plastik kabı veya silikon kırmızı kabı da kullanabilirsiniz.Cihazdaki verileri okuyabilmek için birçok platforma (iOS , Android , Windows Phone) SDK mevcut.Ben bu yazıda C# kütüphanesini kullanacağım.

Cihaz için hazırlanan Wiki sayfasına buraya tıklayarak , yazıda kullanacağımız TI SensorTag Library’nin Codeplex sayfasına ulaşmak için de buraya tıklayabilirsiniz.

Telefon ile cihaz arasında iletişim kurabilmeniz için öncelikle Bluetooth ayarlarından cihazları pair etmeniz gerekiyor.Pin ise 0000 veya sadece 0 🙂 GATT API Windows Phone 8 için mevcut değil.O nedenle Universal App veya sadece Windows Phone 8.1 uygulaması geliştirebilirsiniz.C# Library’sini indirdikten sonra projenize referans olarak ekleyin.

Projede Bluetooth kullanacağınız için Package.appmanifest dosyasında Capabilities altında Proximity ve Networking’i aktifleştirmeniz gerekiyor.Ardından GATT profillerini XML editör ile package.appmanifest dosyasında tanımlamalısınız.Bunun için öncelikle App.xaml dosyasını XAML kod editörüyle açın ve en üstte uygun bir yere aşağıdaki xaml referansını ekleyin :

xmlns:m2="http://schemas.microsoft.com/appx/2013/manifest"

Daha sonra Package.manifest dosyasını XML editörüyle açın (sağ click > View code) , Capabilities kısmında en son eklediğiniz Proxmity kısmının altına aşağıdaki kod bölüğünü kopyalayın

<m2:DeviceCapability Name="bluetooth.genericAttributeProfile">
      <m2:Device Id="any">
        <m2:Function Type="serviceId:0000180a-0000-1000-8000-00805f9b34fb" />
        <!--Device Info Service-->
        <m2:Function Type="serviceId:f000aa00-0451-4000-b000-000000000000" />
        <!--Temperature Device Service-->
        <m2:Function Type="serviceId:f000aa10-0451-4000-b000-000000000000" />
        <!--Accelerometer Device Service-->
        <m2:Function Type="serviceId:f000aa20-0451-4000-b000-000000000000" />
        <!--Humidity Device Service-->
        <m2:Function Type="serviceId:f000aa30-0451-4000-b000-000000000000" />
        <!--Magnetometer Device Service-->
        <m2:Function Type="serviceId:f000aa40-0451-4000-b000-000000000000" />
        <!--Barometer Device Service-->
        <m2:Function Type="serviceId:f000aa50-0451-4000-b000-000000000000" />
        <!--Gyroscope Device Service-->
        <m2:Function Type="serviceId:0000ffe0-0000-1000-8000-00805f9b34fb" />
        <!--Key Device Service-->
      </m2:Device>
    </m2:DeviceCapability>

 

Ardından bütün sensörler kullanıma açılacaktır.Bu kısımlarda bir adımı yanlış yapmanız sensörlere erişiminiz sırasında “UnauthorizedException” almanısı sağlayacaktır , o nedenle dikkatli olalım. Sensörlerden veri alabilmek için öncelikle sensörün ait olduğu sınıftan bir nesne yaratıp nesneyi initialize etmeniz gerekiyor.Nesneleri initialize edebilmeniz için de öncelikle etrafınızda bulunan GATT profilinin sinyallerini yakalamnız gerekiyor.Bu işlem GattUtils sınıfının altındaki GetDevicesOfService isimli method ile yapılabiliyor.Parametre olarak da yakalamak istediğiniz sensörün static Id’sini gönderebilirsiniz.Bu Idler üstteki XAML tarafında manifest dosyasına eklediğimiz Id ler ve her sınıfın içinde aslında SensorServiceUuid  propertysi altında bulunuyor.

Şimdi etrafımızdaki Gyroscope GATT profiline ait sensörleri bulalım :

var gyro = new Gyroscope();
gyro.SensorValueChanged += SensorValueChanged;
var gyroProfiles = await GattUtils.GetDevicesOfService(gyro.SensorServiceUuid);

Buradaki gyroProfiles değişkeni bize etrafımızda gyroscope gatt yayını yapan SensorTag cihazlarını döndürecektir.Elinizde tek bir sensör varsa 0. indexi alarak işlem yapabilirsiniz.Ayrıca sensör tag cihazlarının isimleri SensorTag olarak geçer , DisplayName propertysinden kontrol ettirerek daha sağlıklı sonuçlar elde edebilirsiniz.Method async olduğundan kullandığınız fonksiyonu async keywordü ile modifiye etmeyi unutmayın.Eklediğimiz event handlerı yazının son kısmında yazacağız , o kısım bizim sensörden gelen verileri işlediğimiz bölüm olacak.

Cihazı yakaladığımıza göre bu cihazdaki sensörü bizi oluşturduğumuz sensör değişkenine initialize edebiliriz :

await gyro.Initialize(gyroProfiles[0]); /* 0. index = 1. cihaz */

Bu işlem başarıyla tamamlanırsa cihazdaki sensöre resmen bağlanmış oluyoruz.Fakat cihaz eğer ulaşılamaz bir konumdaysa , yayın sinyal seviyesi çok düşükse vs. nadir de olsa bağlanamayabiliyoruz.Veya siz profilleri okuduktan sonra işlem yaparken cihaz sinyal seviyesini kaybedebilir , bu nedenle de yüklenemez.Işte bu gibi durumlarda kullandığımız library bize özel bir exception döndürüyor : DeviceUnreachableException 🙂 Bunu da try – catch ile yakalayarak kullanıcıları bilgilendirebilirsiniz.

GATT sinyallerini sensörümüze yüklemeye başladık , fakat sensörümüz henüz aktif değil.Cihazdaki sensör çevresine aslında yalnızca “Bak benim gyroscope’um var ve bu id ile yayın yapıyorum ! Bana ulaşmak istersen bu Idyi kullan da haberim olsun”  tarzında bir yayın yapıyor.Bu nedenle low energy bluetooth ile çalışabiliyor.Biz de Initialize yaparak aslında “Senin Id’n bu mu ? Tamam ben biliyorum zaten , haberin olsun , bağlandım bak” diyoruz.

Işte bu adımdan sonra cihazdaki sensöre “Abi sen bana gyroscope’um var demiştin , onu bi açsana sana zahmet” diyebilmek için aşağıdaki kodu kullanıyoruz :

await gyro.EnableSensor();

Daha sonra cihazdaki sensör veri toplamaya başlıyor.Fakat bunu bize göndermiyor.Işte “E sen verileri topluyosun , bi zahmet gönderiver bak o kadar bağlandık” demek için de aşağıdaki kodu kullanarak cihazdan veri isteğimizi gerçekleştiriyoruz 🙂

await gyro.EnableNotifications();

Yukarıda yazdığımız EnableNotifications ve EnableSensor methodları için bir de Disable versionları mevcut.Cihazdan veri almayı kesmek istediğiniz zaman bu ikisini kullanabilirsiniz.Sensörü hafızadan silmek için de Dispose methodunu kullanabilirsiniz.

Cihaz bize verilerini gönderiyor , artık yakalamak için oluşturduğumuz event handleri yazabiliriz :

async void SensorValueChanged(object sender, SensorValueChangedEventArgs e)
        {
            await Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal, async () =>
            {
                var gyro = new Gyroscope();
                switch(e.Origin)
                {
                    case SensorName.Gyroscope:
                        float[] axisValues = Gyroscope.CalculateAxisValue(e.RawData, GyroscopeAxis.XYZ);
                        Debug.WriteLine("X: " + axisValues[0] + Environment.NewLine + "Y: " + axisValues[1] + "Z: " + axisValues[2]);
                        break;

                }
            });
        }

 

Yukarıdaki kodda e.Origin , verinin geldiği sensörün adını , e.Rawdata ise  sensörden gelen verinin işlenmemiş halini temsil ediyor.Gyroscopue’un bize gönderdiği X,Y,Z değerlerini yukarıda parçalayarak Debug ekranına yazdırıyoruz 🙂

  1. GATT Profil Idlerini kullanarak etrafındaki cihazları bul. (GetProfileOfDevices)
  2. Cihazları sensörlere yükle (Initialize)
  3. Cihazdaki sensörü aktifleştir (EnableSensor)
  4. Sensörden veri isteği yap (EnableNotifications)
  5. Gelen veriyi kullan (SensorValueChanged)

Işte hayat bu kadar basit arkadaşlar 😛 Hepinize kolay gelsin !

 

 

0
Shares

[Windows Phone] LongListSelector içinde seçileni Highlight yapmak

Data Binding kullanarak LongListSelector içine eklediğiniz veriler için bir ItemTemplate kullanıyorsanız tıklanan veriyi gerçekten tıklanmış gibi göstermek isteyebilirsiniz.WP Toolkit içinde LongListMultiSelector kullanıyorsanız bu bir problem değil çünkü zaten çoklu seçim yaptığınız için component seçilenleri otomatik olarak işaretliyor.

Biz aynı şeyi LongListSelector içinde yapabilmek için ItemTemplate içindeki Grid’imizi Tap eventını kullanacağız.Bir ItemTemplate kullandığınız için LongListSelector içindeki her bir item bu template e göre ekranda gösterilecek.Fakat tıklanan Grid ortak olduğu için sizin tıklanan gerçek objeye ulaşmanız biraz zor olabilir.Biz bu örnekte bu tarz zorluklarla hiç uğraşmayıp biraz daha pratik bir yol izleyeceğiz.Aynı sorunu ben de geliştirdiğim bir uygulamada yaşadım , sizlerin de yaşamaması için paylaşıyorum 😉

Işin pratiği , tıklanan Gridi sender objesi ile alıp hafızada saklamak ve arkaplanını değiştirmek.ItemTemplate içine eklediğiniz Gridin Tap eventına aşağıdaki gibi bir kod yazarsanız üzerine tıkladığınızda arkaplanının değiştiğini (bir nevi seçilmiş olduğunu) görebilirsiniz :

 

var gelen = (Grid)sender;
gelen.Background = new SolidColorBrush(Colors.Gray);

 

Buraya kadar bir problem yok.Peki başka bir itema tıkladığınızda ? 🙂 O da yukarıdaki eventı tetikleyecek ve seçilmiş gibi gözükecek.Böylece listede 2 tane seçilmiş item olacak.Biz bunu istemiyoruz.Bunun için projede bir tane static Grid objesi tanımlayıp , en son tıklanan Grid objesini bu değişken içerisinde saklıyoruz.Kodumuza da tıklandığında eğer daha önce tıklanmış bir Grid varsa , arkaplanını değiştir komutu veriyoruz.Sizin ItemTemplate’inizde Gridlerin arkaplanı neyse siz ona göre renk verebilirsiniz.Sonunda kodumuz şu şekilde birşey oluyor.

 

public static Grid SonTiklananGrid; // Partial Class içine ekleyeceğiniz static değişken

 

if (SonTiklananGrid != null)
    SonTiklananGrid.Background = new SolidColorBrush(Colors.White);
var gelen = (Grid)sender;
gelen.Background = new SolidColorBrush(Colors.Gray);

 

Bu işi VisualTreeHelper kullanıp LongListSelector altındaki Child elementlere ulaşmaya çalışarak da halledebilirdik fakat bu zor ve zahmetli bir yol.Biz bir nevi çakallık yapıyoruz burada 🙂 Bu anlattığımın nasıl göründüğünü anlayabilmeniz için kendi uygulamamdan bir fotoğraf paylaşayım :

3

Popüler Mekanlar uygulamam için hazırladığım güncelleme yakında yayınlanır , herkese kolay gelsin 🙂

 

0
Shares