Akakce.com sitesini Bot Framework ile Chatbot haline getirelim

Biliyorsunuz ki Akakce.com size ürünleri en ucuzdan en pahalıya nerede satıldığını gösteren güzel bir site. Peki böyle sitelerin chatbot versiyonları nasıl olur ve daha hızlı neyi çözebilir?

Bu yazımızda öncelikle bu tarz sitelerin chatbot u olursa nasıl bir kazanç olur ve sonrasında bunu teknik olarak nasıl yapılacağı üzerine bakacağız

Akakçe yi inceleyelim ve neler var neler yok bunları bir tespit edelim. Chatbot olarak bir uygulamaları çıksa nasıl bir çözüm olur bakalım. Bu konuda chatbot çözümleri mobil uygulamaların alternatif ve kolay yöntemi olarak görünür.

Şimdi mobil uygulamada sunulan servis genel olarak ürün arama ve nerede ne kadara satıldığı gösteriliyor. Bunun dışında hesabınız var ise ürünleri favroiye ekleyebiliyorsunuz. Genel olarak özellikler bunlar. Şimdi chatbot yapılırsa ne avantajları ve dezavantajları olur bunları inceleyelim.

Avantajları

  1. Web site veya mobil uygulama olmadan genel olarak kullandığınız mesajlaşma uygulamalarından kullanabilirsiniz (Tüm chatbot ların özelliği olarak görebiliriz)
  2. E-Ticaret mobil uygulamaları aslında pek aktiflik yaşamaz (Tekstil hariç) Bunun sebebi kullanıcılar almak istediği ürünü alır ve işlemini bitirir. E-Ticaret siteleri mobil uygulamanın kullanılması için mobil uygulamaya özel indirimler sağlar. Bunu göze alarak fiyat arama uygulamasının indirilmesi/aktif kullanılması düşük bir olanak. Buna mesajlaşma uygulamalarından erişmesi oldukça ideal
  3. Image Processing ya da AI Services eklenirse resim yorumlayarak ürün arama yapılabilir ve bu bir konuşma havasında yaratılarak arkadaşınıza sormuş gibi ürün arama ve en ucuz satan yeri rahat bir şekilde bulabilmenizi sağlayabilecek çözümler
  4. Chatbot içerisinde uygulayabileceğiniz reklam modeliniz diğer reklam modellerine göre daha etkili olacaktır. Kullanıcıya direkt bir erişim sağlanır. Öneri olarak sunacağınız çözümler daha çok ilgi görecektir

Dezavantajları

  1. Chatbot ile gelir modeli uygulamak diğer platformlara göre daha kısıtlı. En basit reklam modeli olan banner reklamlar uygulanamamktadır
  2. Ürün geliştirme olarak Chatbot için bir geliştirici veya iş yükü oluşacaktır

Nasıl başlarız

Akakçe’nin sunduğu hizmeti cahtbot haline getirebilmek için öncelikle ne yol izleyeceğimizi belirleyelim. Ardından bu belirlediğimiz yoldaki adımları detaylandıralım.

  1. Akakçe sitesi üzerinde çalışan bir basit crawler
  2. Çalışan crawler ı bir Web API halinde çalışmasını sağlamak
  3. Bot Framework ile Akakce Crawler API bağlantısını sağlamak

Bölüm #1 — Crawler Hazırlamak

Bu bölümde akakçe nin crawler ını hazırlayacağız. Ben API Projesi ile Chatbot projesini ayıracağım. Bunun en büyük sebebi, bu API servisini başka bir yerde kullanmak istediğimden. Peki hangi teknolojiler ve kütüphaneler kullanılacak?

  1. NET Core 2.0 Projesi
  2. HtmlAgilityPack Core kütüphanesi (Html Parsing için .NET Core kütüphanesi)
  3. System.Text.Encoding.CodePages kütüphanesi (Türkçe karakterler için .NET Core Encoding kütüphanesi)

O zaman Visual Studio üzerinde .NET Core 2.0 Web API projesi oluşturalım

Burada dikkat edelim ki Solution adı ile proje adı değişiktir. Üzerine Bot Framework Template ile bir proje daha eklenecektir.

Web API seçtiğimize göre artık gerekli kütüphanemizi kurup işlemlere başlayabiliriz.

Install-Package HtmlAgilityPack.NetCore

Komutunu çalıştırarak HtmlAgilityPack Core u kuralım. Ardından Encoding için gerekli kütüphaneyi kuralım.

Install-Package System.Text.Encoding.CodePages

Ardından proje için kod yazmaya başlayabiliriz

Projemizde Models, Interfaces ve Crawlers klasörleri oluşturalım ve bunlar içerisine class ve interface lerimizi oluşturalım.

Öncelikle Modellerimizi oluşturalım ve içerisine aşağıdaki gibi kodlarımızı yazalım

ProductModel.cs

ProductDetailModel.cs

Şimdi Crawler içerisini kodlamaya başlayalım. Burada iki temel methodumuz var. Bunlardan birisi aramak için bir diğeri de aranan ürünlerin detaylarını almak için. Bunları interface e ekleyelim

IAkakceCrawler.cs

Task kullanmamızın sebebi async-await işlemleri yapacağımız için Task ile döndürmemiz gerekiyor. Interface içerisine bu şekilde ekliyoruz

Şimdi ise Crawler yazmaya başlayabiliriz. Burada iki tane methodumuz var ve bunları yazmamız gerekecek

AkakceCrawler.cs

Constructor çalıştığında HttpClient a UserAgent ve Cookie tutabilmesi için bir Handler tanımlayarak buna bir CookiesContainer tanımladık. Böylelikle cookie tutabilir. Olası User Agent ve cookie konularına takılmaması için ekledim. Bunun dışında .NET Core içerisinde direkt olarak “Windows-1254” encoding malesef ki gelmiyor. Bunun için kurduğumuz kütüphaneyi tanımlamamız gerekmektedir. Bu crawler ı çalıştırdığınız siteden siteye göre değişecektir. İsterseniz Akakçe’nin mobil versiyon sitesine bakabilirsiniz. Eğer mobil için responsive design yerine özel bir site var ise işiniz belki daha da kolaylaşabilir. Bir diğer ihtimal ise mobil uygulamasındaki trafiği dinleyerek kendi API servisini bile direkt olarak kullanabilirsiniz

Search methodunda gelen ürün ismini URL de encode ederek isteği atıp arama gerçekleştiriliyor ve sonrasında HTTP 200 dışında başka bir durum olmadığı sürece HtmlAgilityPack in HtmlDocument sınıfı ile parse işlemleri gerçekleşiyor.

Parse ederken DOM elementler üzerinden yapıldığı için Node lar üzerinden inerek yapılıyor. Eğer bir child node a erişim olacak ise nokta koyarak alınıyor.

GetDetail bölümünde ürünün direkt URL ine istek atarak içerisindeki elementler parse lanır. Akakçenin web sitesini güncellemesi ile çalışmayabilir Bu yüzden crawler bu konuda sıkıntı olabilir. Bu tarz hataları loglayarak hızlıca haberdar olup çözüm üretebilirsiniz.

Bölüm #2 — Web API Hazırlama

Şimdi bu yazdığımız Crawler ı Dependency Injection a ekleyelim ve Controller üzerinden erişelim.

Dependency Injection içerisine eklediğimize göre artık Controller içerisinde çağırabiliriz. Product Controller içerisine iki tane endpoint açalım. Bunlardan birisi Search bir diğeri Get olsun

Eklediğimiz Constructor içerisinde Dependency Injection içerisinde bulunan Crawler ı tanımladık. Ardından Search ve Get endpointlerimizi oluşturduk. Search HTTP Get ile Query parametresini alıyor. Get ise HTTP POST olarak Url i alıyor. Gönderirken URL decode/encode yapmamak için POST u tercih ettim. Eğer parametreler boş ise 400, veri boş ise 404, sorunsuz bir işlem olduysa 200 ile sonuç dönecektir.

İsterseniz standart bir sonuç dönebilirsiniz. Gelin şimdi Akakce Crawler API ını test edelim.

Search Endpoint Test

Get Endpoint Test

Servis sorunsuz bir şekilde çalışıyor. Artık Bot Framework ile bağlantı kurulabilir halde. İsterseniz bu API ile bir Mobile App entegrasyonu veya bir başka uygulamaya entegre edebilirsiniz

Bölüm #3 — Bot Framework kullanarak Chatbot Hazırlamak

Son bölüm ve artık projemizi bitirme vakti. Bu bölümde solution a ikinci bir proje ekleyeceğiz. Bot Framework template ini seçelim ve “Akakce.Chatbot” adında bir proje ekleyelim.

Bu projede yapacağımız 2. bölümde hazırladığımız API ya erişim sağlayarak CardView kullanarak ürünleri listeleyeceğiz.

Chatbot projemiz içerisine bir tane helper, iki model ve bir tane servis için istekleri yapacağımız bir class oluşturalım. Models klasörünü isterseniz .NET Standart ile paylaşımlı yapabilirsiniz.

Web.config içerisine bir tane API Endpoint URL imizi tanımlayabileceğimiz bir ayar ekleyelim ve önceki yazılarımda bahsettiğim Bot Framework App Name, App ID ve Password bilgilerini ekleyelim.

Web.config

SettingsHelper içerisine static olarak Web.config e eklediğimiz ayarı kolayca alabileceğimiz bir class oluşturalım. Namespace adındaki Helpers ı kaldıralım ve using System.Configuration; using bölümüne ekleyelim.

SettingsHelper.cs

ServiceContext.cs

Burada Singleton bir pattern mevcut. Constructor çalıştığında Endpoint Client a tanımlanır ve bundan sonra çalışacak iki method ise bu endpoint üzerinden çıkış yapar. Tanımladığımız 200,400 ve 404 e göre sonuçlar dönmektedir. Bu sonuçlara göre kullanıcılara özel mesajlar dönebilirsiniz.

RootDialog a gelelim ve Chatbot ile ilgili kodlarımızı yazalım.

RootDialog.cs

15. satırda yaptığımız bir kontrol var. Bu kontrol de kullanıcının seçtiği bir ürün mü yoksa aranan bir ürün mü bunu ayırt ediyoruz. SearchReply ve GetDetailReply ise bize bu iki endpoint den çıkan sonuçları bir Reply haline getirip kullanıcıya gönderilmek üzere hazırlıyor. GetHeroCard aslında yardımcı bir method. Bununla daha kolay HeroCard oluşturabiliyoruz.

Bu şekilde Chatbot umuzu ayarladıktan sonra artık son işlemler Deploy & Publish olacaktır. Burada API projemizi Azure a deploy edelim ve Bot Framework testimizi yapalım.

Deploy & Publish

Öncelikle API Projemizi Azure a deploy edelim. Oradan aldığımız Endpoint i Bot Framework e ekleyelim ve ardından test edelim.

Dreamspark yani yeni adıyla Imagine subscription içerisinde ücretsiz olarak Azure Web App e deploy ediyorum. Create dediğimiz zaman Azure üzerinde bir Web App oluşturuyor. Resource grubunuz ve App Service Planınız yok ise bunları otomatik olarak oluşturup publish ediyor.

Publish işlemi tamamlandıktan sonra endpoint url i kopyalayıp web.config içerisine yerleştirelim. Ardından Akakce.Chatbot projesine sağ tıklayalım ve menü üzerinden “Set as Startup Project” i seçelim. Bot Framework Emulator ile chatbot umuzu test edelim.

Demo

Demo olarak böyle bir Gif ile görebiliriz. Akakce yazıyı yazdıktan sonra bile değişiklik yapmış :)

Sonlandıralım

Bu chatbot u Skype, Facebook Messenger gibi mesajlaşma uygulamalarına kolayca entegre edebilirsiniz. Bunun üzerine ekleyebileceğiniz birçok şey mevcut aslında. Örneğin aklınızdaki fiyat aralığını ve birtakım özellikleri söyleyerek bazı şeyleri filitreleminizi sağlayacak bir chatbot haline gelebilir. Bunu LUIS (Language Understanding İntelligent Services) gibi servis yardımlarıyla asistan haline getirebilirsiniz.

Bir Sonraki Yazılar

Bir sonraki yazılarımda Azure Cognitive Services ve Azure Bot Services üzerine olacaktır. Azure üzerinde sunulan servisleri Bot Framework ile nasıl Chatbot içerisinde kullanırız bunların üzerine odaklanacağız.

Proje

Diğer Yazılar için