Windows 10 UWP uygulamasında Log için Slack kullanmak

Bu makaleyi okumadan önce Windows 10 UWP uygulamasında {x:Bind} kullanarak basit DataBinding makalesini okumanızı tavsiye ederim.

Slack, http://www.slack.com adresinde hizmet veren, son yılların en başarılı uygulamalarından birisi. Kendi sitelerinde yazana göre;

Slack is a messaging app for teams that is on a mission to make your working life simpler, more pleasant, and more productive

Geçen hafta aldığım çok ilginç bir email‘de bir uygulamada loglama için Slack kullanabilir miyiz? sorusu vardı.

Bu makalede Windows 10 UWP uygulamasında Slack entegrasyonu yapacağız, fakat aynı yöntemler ile rahatlıkla bir web uygulamasında veya web service‘inde aynı entegrasyon kurulabilir.

Öncelikle Slack üzerinde ücretsiz olarak bir hesap, hesabı oluşturduktan sonra yeni bir Channel oluşturmamız gerekiyor. Örneğin SlackLoggerApp-Logs isimli bir channel oluşturmak için;

Yeni bir public channel oluşturunca Slack sayfasında aşağıdaki gibi bir mesaj gözükmeli;

Got it! butonuna tıkladığımızda bizi channel‘in sayfasına yönlendirmeli;

https://{hesap}.slack.com/apps/build/custom-integration adresine giderek yazacağımız uygulamanın entegre olacağı Slack web servisini oluşturuyoruz. Bunun için Incoming WebHooks seçeneğini seçerek ilerlememiz lazım;

Gelen ekranda uygulamamızı geliştirirken ihtiyaç duyacağımız tüm bilgiler yer alıyor. Özellikle Webhook URL ve Sending Messages alanındaki bilgilere kesinlikle ihtiyacımız olacak;

Bu noktaya geldikten sonra Visual Studio‘yu açalım ve yeni bir Blank App (Universal App) projesi oluşturalım;

Projeyi oluşturduktan sonra MainPage.xaml dosyasını açalım ve aşağıdaki kodları yazalım;

<Page x:Class=”SlackLogger.MainPage” xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation” xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml” xmlns:local=”using:SlackLogger”>

&lt;StackPanel Background="#1abc9c" Padding="10"&gt;
    &lt;TextBox Header="Adınız" Margin="5" BorderBrush="Transparent" Text="{x:Bind FirstName, Mode=TwoWay}" /&gt;
    &lt;TextBox Header="Soyadınız" Margin="5" BorderBrush="Transparent" Text="{x:Bind LastName, Mode=TwoWay}" /&gt;
    &lt;TextBox Header="EMail Adresiniz" Margin="5" BorderBrush="Transparent" Text="{x:Bind EMail, Mode=TwoWay}" /&gt;
    &lt;TextBox Header="Mesajınız" Margin="5" Height="300" BorderBrush="Transparent" Text="{x:Bind MessageBody, Mode=TwoWay}" /&gt;
    &lt;Button Content="Gönder" Margin="5" Height="40" HorizontalAlignment="Stretch" Click="{x:Bind Send}" /&gt;
&lt;/StackPanel&gt;

</Page></pre>

Önce bir StackPanel nesnesi oluşturduk, içerisine 4 adet Textbox 1 adet Button nesnesi ekledik.

Textbox nesnelerinin Header özelliklerine verdiğimiz değerler ile birer başlığa sahip olmalarını sağladık.

BorderBrush özelliklerine verdiğimiz Transparent değer sayesinde çerçevelerin gözükmemesini sağladık.

Son olarak, Text özelliklerine ve Click olayına {x:Bind} tipinde değerler vererek Databinding yapıyoruz. Burada önemli olan nokta, Textbox‘ların Text özelliklerine yaptığımız Databinding‘de Mode özelliğine TwoWay değerini vererek, iki yönlü Databinding yapmak. Böylece ekranda bir değer değiştirildiği zaman Databinding yapıldığı property‘nin değeri otomatik olarak güncellenecek.

Böylece çalıştırdığımızda aşağıdaki gibi gözüken bir uygulama elde edeceğiz;

Databinding için FirstName, LastName, EMail ve MessageBody property‘lerini, ayrıca Send() methodunu yazmamız lazım. MainPage.xaml.cs dosyasını açalım ve aşağıdaki kodları ekleyelim;

public string FirstName { get; set; }
public string LastName { get; set; }
public string EMail { get; set; }
public string MessageBody { get; set; }

private async void Send()
{
    var client = new HttpClient();

    var payload = "{\"text\": \"" + FirstName + " " + LastName + "(" + EMail + ") : " + MessageBody + "\"}";

    await client.PostAsync(new Uri("https://hooks.slack.com/services/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"), new HttpStringContent(payload));
}


Böylece *Gönder* butonuna basıldığında **Slack**'te oluşturduğumuz **public channel**'ın **web service**'ine istediğimiz bilgiyi gönderebileceğiz. Bu makaledeki örnekte *Ad Soyad (EMail) : Message* formatında bilgiyi *Windows.Web.Http* **namespace**'i altında yeralan HttpClient sınıfının PostAsync() methoduna HttpStringContent tipinde gönderiyoruz.

*Gönder* butonuna bastığımızda, **Slack**, aşağıdaki **notification**'ı gösterecek;

![](/assets/uploads/2016/02/slack-7.png)

Eğer **Slack**'teki **public channel**'ın sayfasını açacak olursak, orada da *mesajı* görebileceğiz;

![](/assets/uploads/2016/02/slack-8.png)

WebCamp Etkinliği, Şubat 2016

Microsoft Türkiye Ofisi ile birlikte 17 Şubat 2016 tarihinde Wyndham Hotel içerisinde Web Camp etkinliği organize ettik.

Bu etkinlik kapsamında Asp.Net Core 1.0, Typescript, AngularJS 2.0, ionicframework gibi birçok konuya ilişkin örnek uygulamalar geliştirdik.

Etkinliği birlikte organize ettiğimiz Microsoft Türkiye Ofisi çalışanı arkadaşlarıma ve etkinliğe katılanlara teşekkür ederim

SASS (scss dosyaları) ile !default anahtar kelimesi kullanımı

SASS Dokümantasyonunda Variable Defaults: !default alanında yazana göre;

You can assign to variables if they aren’t already assigned by adding the !default flag to the end of the value. This means that if the variable has already been assigned to, it won’t be re-assigned, but if it doesn’t have a value yet, it will be given one.

yani, !default anahtar kelimesi ile biten bir değişken tanımı varsa ve o ana kadar o değişken daha önce tanımlanmadıysa tanımlanır ve değer ataması yapılır, daha önce tanımlandıysa görmezden gelinir

Hemen bir örnek ile inceleyelim;

$ornek: ‘ilk içerik’;

$ornek: ‘ikinci içerik’ !default;

#main { content: $ornek; }</pre>

Yukarıdaki SASS (scss dosyası) çıktısı aşağıdaki gibi olacaktır;

#main {
    content: 'ilk içerik';
}

Aynı şekilde

$renk: red;

$renk: blue !default;

#main {
    background-color: $renk;
}

SASS (scss dosyası) çıktısı aşağıdaki gibi olacaktır;

#main {
    background-color: red;
}


Windows 10 UWP Uygulamalarında InkCanvas ile imza almak

Geçen hafta email ile aldığım bir soruyu cevaplamak üzere bu makaleyi yazıyorum.

Windows 10 UWP uygulamalarında eğer kullanıcının imzasını ekran üzerinde almak isterseniz InkCanvas sınıfını kullanabilirsiniz.

Hemen Visual Studio açıp yeni bir proje oluşturarak nasıl yapabileceğimizi inceleyelim;

Öncelikle MainPage.xaml dosyasını açalım ve içerisini aşağıdaki gibi değiştirerek, ekran tasarımımızı yapalım;

<Page x:Class=”InkCanvasOrnek.MainPage” xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation” xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml” xmlns:local=”using:InkCanvasOrnek”>

&lt;Grid Background="#f1c40f" Padding="20"&gt;
    &lt;Grid.RowDefinitions&gt;
        &lt;RowDefinition Height="Auto" /&gt;
        &lt;RowDefinition Height="Auto" /&gt;
        &lt;RowDefinition Height="Auto" /&gt;
        &lt;RowDefinition Height="*" /&gt;
        &lt;RowDefinition Height="Auto" /&gt;
    &lt;/Grid.RowDefinitions&gt;

    &lt;TextBox Header="Adınız" Grid.Row="0" /&gt;
    &lt;TextBox Header="Soyadınız" Grid.Row="1" /&gt;
    &lt;TextBlock Text="İmzanız" Margin="0, 4, 0, 8 " Grid.Row="2" /&gt;
    &lt;InkCanvas x:Name="ink" Grid.Row="3" /&gt;
    &lt;Button HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Content="Kaydet" Padding="10" Grid.Row="4" /&gt;
&lt;/Grid&gt;

</Page></pre>

Eğer uygulamamızı Windows 10 Mobile Emulator‘ünde açacak olursak aşağıdaki gibi gözükmeli;

Dokunmatik ekran ve Mouse ile InkCanvas‘ın kullanılabilmesi için MainPage.xaml.cs dosyasında bulunan constructor‘da InkPresenter property‘sinde yeralan InputDeviceTypes özelliğine CoreInputDeviceTypes enum’ında bulunan Mouse ve Touch değerlerini aşağıdaki şekilde eklememiz gerekli;

ink.InkPresenter.InputDeviceTypes = CoreInputDeviceTypes.Mouse | CoreInputDeviceTypes.Touch;

Böylece uygulamada imza atmak için bir boşluk oluşturmuş olduk;

Eğer istersek, InkCanvas sınıfının InkPresenter property’sinde yeralan UpdateDefaultDrawingAttributes() methoduna yeni bir InkDrawingAttributes sınıfından değişken tanımlayabilir ve InkCanvas üzerine yapılan çizimlerin kalemini değiştirebiliriz;

var attr = new InkDrawingAttributes();
attr.Color = Colors.Red;
attr.PenTip = PenTipShape.Circle;
attr.Size = new Size(3, 18);
ink.InkPresenter.UpdateDefaultDrawingAttributes(attr);


![](/assets/uploads/2016/02/InkCanvas-4.png)

*Not : Taklit etmeye çalıştığım **Picasso**'nun çok bilinen imzası aşağıdaki gibidir, ne dersiniz, benzetebilmiş miyim?*

![](/assets/uploads/2016/02/InkCanvas-5.png)

Windows 10 UWP Uygulamalarının Hafıza Kullanım Durumu için MemoryManager sınıfını kullanmak

Windows 10 UWP uygulaması geliştirirken hafıza‘nın ne kadarını kullandığınızı ve kullanabileceğiniz ne kadar hafıza alanı kaldığını bulmanız gerekebilir.

Bu durumda Windows.System namespace‘i altında yeralan MemoryManager sınıfını kullanabiliriz.

Hemen Visual Studio açarak yeni bir proje oluşturalım;

Öncelikle MainPage.xaml dosyasını açalım ve içerisine aşağıdaki kodları yazarak ekranımızı tasarlayalım;

<Page x:Class=”MemoryManagerOrnek.MainPage” xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation” xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml” xmlns:local=”using:MemoryManagerOrnek”>

&lt;StackPanel&gt;

    &lt;TextBlock Text="AppMemoryUsage:" /&gt;
    &lt;TextBlock Name="AppMemoryUsage" /&gt;
    &lt;TextBlock Text="AppMemoryUsageLimit:" /&gt;
    &lt;TextBlock Name="AppMemoryUsageLimit" /&gt;

&lt;/StackPanel&gt;

</Page></pre>

Şimdi MainPage.xaml.cs dosyasını açalım ve DispatcherTimer sınıfından yeni bir değişken tanımlayıp, MainPage sınıfının constructor‘ında, her 1 saniyede bir tetiklenmesini sağlayalım;

DispatcherTimer timer = null;

public MainPage()
{
    this.InitializeComponent();

    timer = new DispatcherTimer();
    timer.Interval = new TimeSpan(0, 0, 1);
    timer.Tick += timer_Tick;
    timer.Start();
}

Artık timer_Tick() metodumuzu yazabiliriz;

private void timer_Tick(object sender, object e)
{
    AppMemoryUsage.Text = string.Format("{0} ({1:0.00} MB)", MemoryManager.AppMemoryUsage, MemoryManager.AppMemoryUsage / (1024.0 * 1024.0));
    AppMemoryUsageLimit.Text = string.Format("{0} ({1:0.00} GB)", MemoryManager.AppMemoryUsageLimit, MemoryManager.AppMemoryUsageLimit / (1024 * 1024 * 1024));
}


Yukarıdaki metodun içerisinde öncelikle MemoryManager sınıfının AppMemorryUsage **property**'sinin değerini okuduk ve bunu (*1024* x *1024*) değerine bölerek kaç **megabayt** (*MB*) yaptığını hesapladık, *AppMemoryUsage* isimli Textblock nesnesinde gösterdik.

Aynı şekilde MemoryManager sınıfının AppMemorryUsageLimit **property**'sinin değerini okuduk ve bunu (*1024* x *1024* x *1024*) değerine bölerek kaç **gigabayt** (*GB*) yaptığını hesapladık, *AppMemoryUsageLimit* isimli Textblock nesnesinde gösterdik.

Uygulama açıldıktan sonra her 1 saniyede bir, uygulamanın o anda *kullandığı* **hafıza miktarı** ve *kullanabileceği* **hafıza miktarı** ekranda gösterilecek.

![](/assets/uploads/2016/02/MemoryManagerOrnek-2.png)

*Not : Eğer uygulamayı bilgisayarınızda çalıştıracak olursanız, **AppMemoryUsageLimit** değeri olarak, sistemde kullanılabilir boş hafıza miktarını görmelisiniz. Eğer **512 MB** hafızaya sahip bir cep telefonunda çalıştıracak olursanız, **185 MB** limitini, **1024 MB** (1 GB) hafızalı bir cep telefonunda çalıştıracak olursanız **390 MB** limit görmelisiniz.*

Engin Polat hakkında

Chief Architect, Microsoft RD, Microsoft MVP

Ada ve Ege'nin babası ;)

Kategoriler

İstatistik

Makale Adedi: 458

Creative Commons Lisansı