15 Mart 2018 Perşembe

Xamarin.Forms Android frame'e shadow vermece


Yeyy yine Xamarin'e uğramak nasip olduu ^^

Xamarin'in çok güzel bir platform olduğunu ama hiç hakkını veremediğimi düşünmüşümdür her zaman. Artık iş konusunda daha özgür bir alana sahip olduğum için yaptığım işlerin hakkını vermek istiyorum ve bu yüzden işler biraz daha yavaş çıkıyor. :) Deadline geçmediği sürece sıkıntı yok bence :))

Şimdi hızlıca yaşadığım frame sıkıntısını nasıl çözdüğümü anlatayım, malum deadline beklemez.

Sıkıntımız xamarin.forms'daki frame arkadaşının Android'de shadow vermiyor olmasıydı. .xml ler denedim, gradient'ler bilmem ne ler denedim ama istediğim sonuca ulaşamadım. Sonrasında ise .9.png uzantısını keşfettim.

Bu uzantıda bir gölge görseli oluşturdum ve frame'imin background resource'una verdim. Sonuç gayet güzel şimdilik.



.9.png uzantılı shadow u oluşturmak için kullandığım tool; 

http://inloop.github.io/shadow4android/
https://github.com/inloop/shadow4android

Burada görselimi oluşturup dosyayı shadow.9.png ismi ile android drawable klasörünün altına ekledim ve aşağıdaki gibi kullandım;


using System;
using Android.Content;
using Android.Support.V4.View;
using ShadowFrame.Droid.Renderers;
using ShadowFrame.Renderers;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly: ExportRenderer(typeof(ShadowedFrame), typeof(ShadowedFrameRenderer))]
namespace ShadowFrame.Droid.Renderers
{
    public class ShadowedFrameRenderer: FrameRenderer
    {
        public ShadowedFrameRenderer(Context context) : base(context)
        {
        }

        protected override void OnElementChanged(ElementChangedEventArgs<Frame> e)
        {
            base.OnElementChanged(e);

            if (e.NewElement != null)
            {
                //http://inloop.github.io/shadow4android/
                ViewGroup.SetBackgroundResource(Resource.Drawable.shadow);
            }
        }
    }
}

Öğrendiğim örnek;
https://stayrony.github.io/add-shadow-to-custom-shape-on-android/

Ayrıca çözüme ulaşmaya çalıştığım diğer yolda yani xml oluşturmaya çalıştığımda yine bayağı faydalandığım tool'u da eklemek isterim;

http://angrytools.com/gradient/

Daha güzel çözümleri öğretene hayır dememm 


19 Şubat 2018 Pazartesi

node.js ile bir de kik bot yazayım


Botları deneyimlemeye devam ederken kik bot'la devam edeyim dedim. Ben bi messenger, bi  telegram bilirdim öncesinde meğer ne channel'lar varmış :) hepsini deneyeceğimmm. En azından papağan seviyesinde denmek istiyorum hepsini projemiz için.

Bunda bot oluşturmak ve çalıştırmak workplace'deki kadar karışık olmadı. Hikaye kısmı bittiğine göree..

Öncelikle dev.kik.com adresine gittim. Log in olmaya çalıştığımda benden yuvarlak bir qr kod taramamı istedi.  Telefonuma kik uygulamasını indirip kodu taradım. Kik'ten Botsworth diye bir bot arkadaş hemen welcome dedi ve email adresimi istedi verify etmek için. bota email adresimi yazdım ve mail geldi. Böylece verify olmuş oldum.

Ardından benden username belirlememi istedi. Çok sinirlendim çünkü benim kullandığım, kullanacağım, kullanma ihtimalim olan tüm isimler mi unavailable olur arkadaş. Biz bile böyleysek gelecek nesilleri düşünemiyorum nasıl nickname, username sahibi olacaklar?.. Guid guid gezerler muhtemelen..



Neyse 5000. yaratıcı denememde bir isim bulabildim şükür. user'ımdan sonra bot oluşturma aşamasına da geçtim. Aynı sorunu burada da yaşadım ama olmayacak bir isim bulup yoluma devam etmeyi seçtim.

Sonrasında dev.kik.com'a log in olduğunda şöyle sade bir ekran karşımıza çıkıyor.



Buradaki API Key ve 5000 sefer deneyerek oluşturduğumuz username'e ihtiyacımız var.

Bot oluşturma işlemimiz tamam olduğuna göre arkasını doldurma vakti.

Her zaman yaptığımız gibi, botumuz için klasör yaratıp termalden bu klasörün içine girip

npm init 

diyoruz ve project.json dosyamızı doldurmaya başlıyoruz. 

 Şimdi VS Code'dan klasörümüzü açıp app.js dosyamızı oluşturup kodlamaya başlayalım.

Öncelikle kik'in eşyasını ve kullanacağımız diğer component'leri kuralım.

npm install @kikinteractive/kik
npm install dotenv
npm install http

require('dotenv').config({
    path: 'settings.env'
});

let Bot = require('@kikinteractive/kik');
let http = require('http');

let bot = new Bot({
    username: process.env.KIK_BOT_USERNAME,
    apiKey: process.env.KIK_API_TOKEN,
    baseUrl: process.env.BOT_HOST
});

bot.updateBotConfiguration();

bot.onTextMessage((message) => {
    var replies = [message,"Hi dear..", "Let's start to learn.."];
    bot.send(replies, message.from, message.chatId);
});

let server = http.createServer(bot.incoming()).listen(process.env.PORT || 3978);

En basit anlamıyla bir papağan botu yapmak işte bu kadar kolay. 

Tabi projemizin ngrok'la tünelleme işlemini unutmuyoruz. 

ngrok http -region=eu -subdomain=kik-bot 3978

Ve bu adresi .env doyamıza ekliyoruz. 

.env dosyamızı da buraya eklersek;


Bu kadar basit, artık papağan botumuz hazır. Bunun üzerine koya koya gidebiliriz.



Gittim :)


24 Ocak 2018 Çarşamba

node.js ile de workplace botu yazayım


Hey ho,, mono in da haus

Son birkaç aydır botlarla haşır neşirlik sonucu kendime bir bot özeti, how-to'su çıkarmak ve bu özeti paylaşmak niyetiyle sayfama uğramış bulunmaktayım :)


:D Konuya geçeyim.. 

Daha önce .net core'la yapmıştım ama şimdi node.js'le yaptım. Çünkü node.js de canmış. :)

Yine bir workplace botunu örnekleyeceğim.

Önce botumuzu barındıracak bir klasör oluşturup terminal'de bu klasöre giriyoruz.

npm init
 komutunu çalıştırıp istenilen bilgileri mümkün olduğunca dolduruyoruz. Bu bilgiler project.json dosyamızı oluşturuyor.

Sonrasında klasörümüzü Visual Studio Code gibi bir editörle açıp içine app.js dosyamızı ekliyoruz. Bu dosyada kodlamaya başlayabiliriz.

Ardından botbuilder paketimizi eklemek için yine terminal'de şu komutu çalıştırıyoruz;

npm install --save botbuilder

Bir dee şu paketi yükleyelim;

npm install --save restify

Şuan .net core'da yaptığımız papağan botundan yapmaya başlamak için hazırız :) Hadi yapalım.

Şöyle bir repo'muz var. Buradaki Node örnekleri gayet yeterli başlangıç için;
https://github.com/Microsoft/BotBuilder

Buradaki hello-ChatConnector örneğini alalım;

var restify = require('restify');
var builder = require('botbuilder');

// Setup Restify Server
var server = restify.createServer();
server.listen(process.env.port || process.env.PORT || 3978, function () {
   console.log('%s listening to %s', server.name, server.url);
});
 
// Bot Storage: Here we register the state storage for your bot.
// Default store: volatile in-memory store - Only for prototyping!
// We provide adapters for Azure Table, CosmosDb, SQL Azure, or you can implement your own!
// For samples and documentation, see: https://github.com/Microsoft/BotBuilder-Azure
var inMemoryStorage = new builder.MemoryBotStorage();

// Create chat connector for communicating with the Bot Framework Service
var connector = new builder.ChatConnector({
    appId: process.env.MICROSOFT_APP_ID,
    appPassword: process.env.MICROSOFT_APP_PASSWORD
});

// Listen for messages from users
server.post('/api/messages', connector.listen());

// Create your bot with a function to receive messages from the user
var bot = new builder.UniversalBot(connector, function (session) {
    session.send("🐦 %s", session.message.text);}).set('storage', inMemoryStorage); // Register in memory storage


Şuan aslında kod olarak hazırız. Ama bu kadarla bitmiyor. Şimdi bu botumuzu yayınlama vakti.

Öncelikle Workplace'e  botumuzu Custom Integrations'dan ekleyelim.



Create Custom Integration butonuna tıklayıp botumuzun adını ve açıklamasını girelim.



Bot oluştuktan sonra bize vermiş olduğu App Id, App Secret ve özellikle tek sefer oluşturduktan sonra kaybetmemeniz gereken Access Token bilgilerinizi güvenli bir yere kaydedelim.

Sonrasında webhook'u ayarlamak için Azure'a uğramamız gerekecek evlerden ıraak :S :D

Adresimiz portal.azure.com
Buraya azure hesabımızla giriş yapalım.

Şöyle bir Dashboard gelecek önümüze;



Öncelikle Azure'dan bir "bot channel registration" oluşturalım.



Şimdi Bot Service oluşturma ekranımız gelecek. Buradaki messaging endpoint' çalışan bir endpoint vermemiz gerekiyor. O halde çözüm neydii? Tabii ki ngrok. :)

Şu komutu çalıştıralım;

ngrok http -region=eu -subdomain=zengindomaini 3978

Artık botumuz https://zengindomaini.eu.ngrok.io adresinde geçici olarak da olsa yayında.
Şöyle görelim vs code ekranımızı. Buradaki terminalde çalışmak da pratik oluyor;

Yeniden Azure'a dönebiliriz.

Messaging endpoint'teki adres şu;
https://zengindomaini.eu.ngrok.io/api/messages

çünkü mesajları kodumuzdan da görebileceğimiz gibi şuradan dinliyoruz;

// Listen for messages from users
server.post('/api/messages', connector.listen());




 Create butonuna bastıktan sonra bot servisimiz oluşmuş olmalı.

Hayırlı olsuun artık Azure'da da bir appid'miz ve appsecret'ımız var. Peki nerede? :D Ben şahsen çok zorlanmıştım bulmak için.. Ama bu sırrı sizinle de paylaşacağım.

Azure sol menüdeki Resource Groups'dan Deployments'a, oradan da ilgili deployment'a tıklayıp bilgilerini görebiliyorsunuz.



Bulduk ama bunlarla ne yapacağız? Kodumuzdaki şu kısım vardı ya, oraya işte bunların yerleri orası. Eğer bunları yazmazsanız debugda mesaj gönderme yerine düşer ama hata bot cevap vermez. Eğer tecrübesizseniz bir saat nedenini sorgulayabilirsiniz. Tecrübe konuşuyor :P

var connector = new builder.ChatConnector({
    appId: process.env.MICROSOFT_APP_ID, //APPID
    appPassword: process.env.MICROSOFT_APP_PASSWORD //APPSECRET
});

Eğer bu bilgileri environment olarak ayrı bir dosyadan okumak istiyorsanız

npm install --save dotenv

paketini yükleyip projenize .env uzantılı bir dosya oluşturup bu bilgileri buraya yazıp buradan okutabilirsiniz. Hatta 2 adet .env oluşturup live ve test key'lerini ayrı ayrı tutabilirsiniz.

Ben bunu vs code'un launch.json dosyasına aşağıdaki env ayarını nakşederek yaptım. İşte şöyle;

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceRoot}/src/app.js",
            "cwd": "${workspaceRoot}/src",
            "env" : {
                "NODE_ENV": "dev"
            }
        }
    ]
}


Sonra da bunu şöyle kullandım;

if ("dev" === process.env.NODE_ENV) {
    console.log("You are using development environments.");
    require('dotenv').config({
        path: 'settings_test.env'
    });
} else {
    console.log("You are using live environments.");
    console.log("[If you want to use dev environments. Please set environment variable 'export NODE_ENV=dev']")
    require('dotenv').config({
        path: process.env.BOT_ENV_FILE
    });
}


Son işimiz ise webhook'u ayarlayıp workplace'deki bot integration'a bu webhook adresini eklemek. Eğer isterseniz bu işlemi de Azure üzerinden, Resource Groups -> MonoBot -> Channels üzerinden channel ekleyerek yapabilirsiniz. Bunun için Channel seçimi yaptıktan sonra sizden istenen bilgileri doldurup bu bilgilerin altındaki webhook ve key bilgilerini workplace'deki yerine yapıştırmak.


Şuandan itibaren botumuz bize papağanlık yapabilir.

Referans aldığım linkler;

Bot info;
https://docs.microsoft.com/tr-tr/bot-framework/nodejs/bot-builder-nodejs-quickstart

https://github.com/Microsoft/BotBuilder

Kullanılan komponentlerin platforma göre ön izlemesini yapabileceğimiz yer;
https://docs.botframework.com/en-us/channel-inspector/channels/Facebook?f=Carousel&e=example1

Yalnız ne uzun oldu bu yazı yaaa :S :S