Xamarin ile Instagram Uygulaması Yazmak

Selamlar;

Öncelikle bunca zamandır Azure üzerinde paylaştığım Url’lerin hepsi değişmiştir. Ilgili yeni Url’leri bloğumdan erişebilirsiniz.

Konu ile ilgili video aşağıdadır:

Bugün Visual Studio 2015 ve Xamarin ile android cihazlar için cep telefonu ile çekilen yada gallery’den seçilen bir resimin belirlenen bir web sayfasında real time olarak görünmesini sağlayacağız. Amaç eventlerde detaylı olarak anlatacağım bu konun şimdiden kullanılan mimarisinden ve belli başlı kritik noktlarından bahsetmektir. Öncelikle doğru bir mimari çizmek hayati bir önem taşımaktadır.

workFlow

Mobil uygulamamız restfull bir webapi servisi ile konuşup ilgili resimi yollar. Daha sonra alınan resim bir storage’da saklanır. Bu bir Image Cdn veya Azure Blob Storage olabilir. Ilgili resim signalR kullanılarak tüm clientlara real time olarak push edilir. Mvc View tarafında AngularJs  kullanılarak ilgili modele yeni gönderilen resim eklenerek, sıralanan list item’da gözükmesi sağlanır. Böylece çekilen resim sayfadaki tüm clientlara gösterilmiş olur.

Aşağıda görüldüğü gibi mobile uygulama için Camera, Internet ve Write_External_Storage izinlerinin verilmesi gerekmektedir.

Screenshot_2014-12-22-17-48-51  Screenshot_2014-12-23-14-34-27

Ekran tasarımı olarak Camera’yı açan bir button, var olan resimlerden seçim yapmayı sağlayan bir button bir de Web Api servisine ilgili resmi gönderen bir başka button bulunmaktadır. Seçilen veya camera ile çekilen resimi kullanıcaya göstermek için bir de image view bulunmaktadır.

Main.axml: Design kodları aşağıdaki gibidir.

Fotoğraf çekme button’una basılınca IsThereAnAppToTakePictures function’ı ile mobil cihazda fotoğraf çekmeye uygun bir uygulama varmı diye check edilir.

Alttaki komut ile ilgili resim, gerekli izinlerin verilmesi şartı ile çekilir.

 intent.PutExtra(MediaStore.ExtraOutput, Android.Net.Uri.FromFile(App._file));

OnActivityResult() methodunda çekilen resim Image View’a sığdırılarak yani resize edilerek atanır. Full size olarak çalışmak çok fazla memory’den yiğip uygulamanın kitlenmesine neden olabilir. Örnek kod aşağıdaki gibidir. LoadAndResizeBitmap() custom yazılan bir extension method’dur.

Screenshot_2014-12-23-14-33-52

Aynı şekilde gallery’den var olan resim seçildiği zaman alttaki kod işletilerek ilgili galeri ekranı açılır. Daha sonra ilgili resim seçilince ilgili image url’i alınıp gene resize işleminden sonra Image View’a atanarak, user’a gösterilir.

Var olan galeriden seçilen image’in path’inin bulnması için ayrıca GetPathToImage() adlı custom bir method yazılır. Amacı Android.Net.Uri‘yi string url path olarak alabilmektir.

Send Image buttonuna basıldığında ilgili WebApi restfull servise istenen image  Client.UploadFile() methodu ile gönderilir.

Gönderme işlemi tamamlanınca çıkacak sesli bildiri Proje’de Resources/raw şeklinde açılan folder’a konan .wav dosyalarından erişilir. Mesela upload.wav’a, Resource.Raw.upload şeklinde erişilebilir.

Çalma işlemi Android.Media.MediaPlayer.Create() methodu ile gerçekleşmektedir. Ayrıca resim gönderildikten sonra _imageView’e istene bir default resim atanabilmesi için, Resources/drawable altına belirlenen bir Icon.png atılarak Resource.Drawable.Icon şeklinde set edilebilir. Folder’a atılan bir dosyaya sanki enum bir nesne gibi erişmek, mobil dünyanın ne kadar farklı olduğunu bize birdaha kanıtlamaktadır.

Alınan resimler öncelikle MobileImages folderına kaydedilip daha sonra ilgili azure blob storage’a atılır.  Daha sonra eklenen resim datalarını tüm clientlara push edilmesi için ilgili signalR GetImages hub classın’daki AddImage() method’u aşağıdaki gibi eklenen resim parametresi ile triger edilir. Bütün bu işlemler asenkron olarak yapılır.

Aşağıda ilgili GetImages Hub class’ının kodları görülmektedir. AddImages() methodu ile ilgili resim clientlar’ın addImages() function’ına gönderilerek tetiklenir. Sayfa ilk yüklendiğinde hub classına connect olunduğunda  OnConnected() methodu devreye girer ve azure blob storage’dan çekilen resimler, ListModel olarak tüm clientların reloadImages() function’ına gönderilir.

http://bistagrams.azurewebsites.net/: İlgili sayfa Mvc 6.0 ve AngularJS ile aşağıda görüldüğü gibi tasarlanmıştır.

Page

Resimler aşağıda görüldüğü gibi angularJS ile listelenmiştir.

page2

İlgili hub classına aşağıdaki gibi bağlandıktan sonra hubProxy’e ait reloadImages() function’ı ile ilgili resim datası 3’er li guruplar halinde angularJs $scope.datas‘ına eklenir. HubProxy’e ait birbaşka addImages() functionında tüm liste fullDataset lisitesine eklenerek temizlenir. Daha sonra yeni gelen image başta eklenmek şartı ile 3 erli guruplar halinde tekrardan $scope.datas‘ına doldurulur. Böylece yeni gelen image tüm clientlarda en başta görünmüş olur. Yapı angularJs ile kurgulandığından datas değiştiğinden buna bağlı tüm objeler bundan etkilenir. Buna bağlı olarak yukarıda görülen ilgili tabloda da yeni eklenen resim gözükür. Tüm bu işlemlerin tersi silme işlemi için geçerlidir.

Resimler 2 kere clicklendiğinde üstlerinde çıkan checkboxlar seçilip delete button’una basılınca ilgili data’dan seçili resimler çıkarılır. ve IsDeleted propertyleri true olarak atanır. Silinmiş olarak işaretlenen image dataları server side webapi deletePicture() methoduna gönderilir. İlgili storage’dan silinen resimler, diğer tüm clientların da bu durumdan haberdar olması adına signalR Hub class’ının DeleteListPush() methoduna gönderilir. Burada silinene resim listesi clientlar’daki HubProxy’e ait deletedListPress() function’ına gönderilerek $scope.datas‘dan çıkarılması ve ekrandan kaldırılması sağlanır. Delete işlemi ve bazı diğer durumlar için detaylı kodları eventlerime katılarak edinebilirsiniz. Gerekli bildirimleri twitterdan duyurucağım.

Bu projeden de anlaşılacağı gibi doğru mimariyi seçmek hayati önem taşımaktadır. Bu uygulamada da görüldüğü gibi mobil ve web application teknolojileri bir araya getirilerek gayet kullanışlı bir ürün ortaya çıkarılabilmektedir.

Yeni bir makalede görüşmek üzere hepinize hoşçakalın.

Herkes Görsün:

Sevebilirsin...

8 Yanıt

  1. Murat diyor ki:

    Hocam Selamlar;
    Harika bir makale olmuş. Daha iyi bir örnek bu konuda varsa göstersinler. Şimdiye kadar kimsenin yorum yapmaması çok enteresan:) Resimlerde bir de düzenleme olsa bitti gitti. Çok beyendim. Elinize sağlık.

    İyi çalışmalar.

  2. Veli diyor ki:

    Selamlar Bora Hocam;
    Eventinizi iple çekiyorum. Elinize sağlık. Ben de veli gibi çok beyendim. Muhteşem örnek.
    İngilizce yapmaya devam edin bence. Yurtdışında da dikkat çekeceği kesin. Ama burdaki gibi türkçe yazıyı ihmal etmeyin hocam.

    İyi yıllar….

  3. Cemil diyor ki:

    Paylaştıklarınız özgün, anlaşılır ve güncel. Süper ötesi diyebilirim :) Tebrikler.

  4. omer diyor ki:

    Hocam Selamlar;

    Hep yapmak istediğim birşeyi siz yapmışınız. Tabi ben sadece hayal ediyordum ama siz yapmışınız. Emeğiniz için teşekkür ederim. Cidden yine harika bir makale ve video olmuş. Çok teşekkürler. Ve iyi çalışmalar.

    İyi yıllar.

  5. Ceyda diyor ki:

    Selamlar;
    Öncelikle çok güzel bir paylaşım. Zaten daha güzel bir örnek şu an itibari ile de yok:) AngularJS ile ilgili tüm makalelerinizi okudum, hatta tüm videolarınızı izledim. Komple bir kitap okumuş gibi oldum.. Şu an rahatlıkla I know angularJS diyebilirm:) Demin ilk uygulamamı da yazdım.

    Bu kadar kaliteli paylaşımlar için yine çok teşekkür ederim.
    İyi çalışmalar.

  6. HastaneBul diyor ki:

    Oldukça sade, anlaşılır şekilde anlatmışsınız. Sitenizi takipteyim, iyi paylaşımlar yapıyorsunuz. Elinize sağlık.

  7. erdem diyor ki:

    çok güzel bir anlatım devamı sanırım olmayacak xamarin in ama olmasınıda çok isterdim

    • borsoft diyor ki:

      Selamlar Erdem;
      Öncelikle teşekkürler.
      Yok olmayacak diye birşey yok! Sırası gelince o konuda da yazıcam..

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir