Bot Framework ile Aşçı botunuzu yapın

Bot Framework aşçısı olma yolunda ilerlemek isteyenler için kendi aşçı botunuzu yapmaya hazır mısınız? Önlüğünüzü giyin ve sizinle bu işin mutfağında buluşalım

Gerekli malzemeler

  1. Bot Framework Template i ile oluşturulmuş bir proje
  2. Entity Framework Code First ile oluşturulmuş veritabanı
  3. SQL Server Tools ile Local Database oluşturma
  4. ASP.NET MVC ile yoğrulmuş bir Admin Paneli

Nasıl Yapılır

Öncelikle Visual Studio muzu açıyoruz ve hazır olana kadar bekliyoruz. Ardından New Project diyerek Bot Framework template i ile bir proje oluşturuyoruz. Ben bu projenin adına “Chefbot” diyorum.

Ardından Microsoft Bot Framework ile Hello Chatbot yazımdaki gibi gerekli Bot App ID ve Password lerini girelim ve ayarlarını yapmış olalım. Projemizi build edelim ve gerekli Nuget Package lar kurulmuş olsun.

Entity Framework Code First ile Veritabanını Hazırlama

Proje içerisinde kod yazmadan önce Nuget Package Manager veya Package Manager Console üzerinden Entity Framework ü kurabilirsiniz. Ben Package Manager Console u tercih ediyorum (Tools > Nuget Package Manager > Package Manager Console üzerinden aşağıdaki kodu çalıştırabilirsiniz)

Install-Package EntityFramework

Ardından proje içerisinde EF adında bir klasör oluşturalım içerisine Tables adında bir klasör oluşturalım. Bu çok ilkel bir Entity Framework Code First için yeterli klasör adları olduğunu düşünüyorum. Tables içerisine iki tane class oluşturacağız. Bu class lar bizim veritabanındaki tablolar olacaktır.

BotHistoryEntity.cs

RecipeEntity.cs

Bu iki class ı Tables klasörü içerisine oluşturduktan sonra EF klasörü içerisine DataContext adında bir DbContext sınıfı oluşturalım.

DataContext.cs

base olarak tanımladığımız 4. satırda veritabanımızın connection string inin adı yazıyor. Bunun için web.config e bir connection string eklemeniz gerekir. Local de geliştirme işlemi yapacaksanız SQL Server Tools ları kurulu ise Local Database oluşturabilirsiniz.

Local Database Oluşturma

Views > SQL Server Object Explorer üzerinden SQL Server ı genişletin ve altındaki localdb ile başlayan bir local server ı genişletin. Databases a sağ tıklayın ve Add New Database e tıklayın. Gelen ekranda gösterilen Path i değiştirebilirsiniz. Veritabanı adına ChefBot olarak karar verdim. İstediğiniz bir isim verebilirsiniz.

Oluşan veritabanına sağ tıklayın ve Properties e tıklayarak Visual Studio nun sağ tarafında bir pencere belirecek ve oradan Connection String i bulun. Evet artık bir veritabanınız ve connection string iniz var. Sıradaki aşama tablolarınızı oluşturmak

Migration ile Veritabanı Oluşturmak

Entity Framework Code First ile veritabanınızı oluşturmak için öncelikle kopyaladığınız connection string i Web.config e yerleştirelim

<Kopyaladığınız Connection String> ile değişikliği yapınız. DataContext.cs dosyasındaki 4. satırda yazan Connection string name ile buradaki name in uyuşması gerek eğer uyuşmaz ise hata alırsınız. Veritabanı connection string iniz de hatalı ise aynı şekilde bağlantı hatası alacaksınızdır.

Ardından yine Package Manager Console üzerinden veritabanını oluşturmak için birkaç satır komut çalıştıracağız. Öncelikle koddan veritabanı oluşturma işlemine Migration deniliyor. Projenizde Migration ı aktif etmeniz gerekir. Bunun için aşağıdaki kodu çalıştırabilirsiniz

Enable-Migrations

Bu kod bir kez çalıştıktan sonra bir daha çalışmaz. Projeniz içerisinde Migrations klasörü ve içerisine Configuration dosyası oluşacaktır. Ardından veritabanında tabloları ve kolonları oluşturması için migration ekleyelim. Aşağıdaki kod ile DbCreate adında bir migration ekleyelim

Add-Migration DbCreate

Bu işlemi gerçekleştirdikten sonra karşınıza bir DbCreate sınıfı oluşacak ve bu sınıf içerisindeki kodlara bakarsanız adım adım tablonuzu ve kolonlarınızı oluşturan kodlar var. Her Entity Framework Code First değişikliğinde yukarıdaki kodu çalıştırarak değişikliği uygulaması için gerekli kodları üretebilirsiniz. Üretilen bu kodları uygulamak için son komutumuzu çağıralım

Update-Database

Evet artık tablo ve kolonlarımız oluştu. SQL Server Object Explorer dan kontrol edebilirsiniz. Şimdiki aşama bu işin sırrının olduğu aşama. Veritabanı ile chatbot u buluşturup, chatbot a güzel bir sonuç çıkarmak

Veritabanı ile Chatbot u konuşturmak

Dialogs klasöründe RootDialog u açalım. MessageReceivedAsync methodunun içerisine boşaltalım ve aşağıdaki gibi bir kod yazalım

Context üzerinden bize kullanıcının hangi kanaldan tutun, hangi mesajı veya medyayı getiren bir sınıftır. Bu sınıf üzerinden 3. satırdaki gibi bir reply cevabı oluşturalım. Aynı zamanda güzel bir görüntü için “yazıyor” görüntüsünü oluşturalım ve kullanıcı beklemesi gerektiğini anlasın. Ardından mesajın boş olup olmadığına bakalım -Burada mesaj boş gelebilir. Eğer bir medya dosyası gönderilmişse text boş olarak gelir-

9. satırda oluşturduğumuz DataContext sınıfını tanımlıyoruz ve ardından gelen mesajı veritabanına kaydediyoruz. Kısaca logluyoruz diyebiliriz. Ardından devam edip bu sefer kullanıcının aradığı tarif adını 22. satırdaki gibi kendi tarif listemizde aratıyoruz. Ardından 23. satırda bu tarifin olup olmadığını bakıyoruz. Eğer yok ise 57. satırdaki gibi “Bu yemek tarifi bulunamadı” mesajını veriyoruz.

Tarifi veritabanımızda bulunduysa bunu kullanıcıya güzelce sunalım. İsterseniz bunu HeroCard lar ile liste halinde sunabilirsiniz. Ben burada bir fatura/fiş şeklinde sunmak istiyorum. İleri de bu bot a güncellemede ne kadar tutacağı konusunda bir fiyat vermek istiyorum. Her neyse 25. satırdaki gibi ReceiptItem ile boş bir List oluşturalım. Ardından veritabanında bulduğumuz tarifin içindekiler bölümünü Split ile satır satır bölelim ve bunları ReceiptItem olarak ayarlayalım. Bunları da boş ReceiptItem listemize ekleyelim. ReceiptCard oluştururken başlık, list olarak oluşturduğumuz List<ReceiptItem> ve Button ekleyelim. Bu button da internette bir tarife yönlendirebilirsiniz, Youtube videosuna veya istediğiniz başka bir şeye. Ben Google da aramaya yönlendiriyorum ve böylelikle ReceiptCard ı tamamlıyorum. Ardından ReceiptCard ı bir attachment haline getirip kullanıcıya ileteceğimin cevabına ekleyelim. Ardından kullanıcıya bu cevabı iletelim.

Eğer bunu HeroCard ile oluşturuyorsanız reply nin AttachmentLayout tipini AttachmentLayoutTypes.List olarak ayarlamanız gerekir. Böylelikle dikey olarak liste gelecektir. Carousel seçerseniz yatay olarak listelenecektir.

Bu işlemleri de yaptıysak artık chatbot umuz hazır. Şimdi bu chatbot a içerik oluşturmanın kolay bir yolunu hazırlayalım yani Admin paneli oluşturalım.

ASP.NET MVC ile Admin Paneli Hazırlama

Projemize sağ tıklayalım ve Add > Area ya tıklayarak Admin adını verelim. Ardından bazı şeyleri projenize eklemeniz gerektiğini söyleyecektir. Tek tek uygulayalım. Öncelikle Global.asax ı açalım ve GlobalConfiguration satırı altına aşağıdaki satırları ekleyelim.

Ardından Areas > Admin > Controller a sağ tıklayalım ve Add > Controller a tıklayalım. MVC 5 Controller with views, using Entity Framework seçeneğine tıklayalım. Model class ı olarak BotHistoryEntity ı gösterelim ve DataContext class ı olarak DataContext i gösterelim. Add butonuna basarak Ekleme, Listeleme, Güncelleme ve Silme işlemlerini hazırlamış olalım. Aynısını RecipeEntity içinde gerçekleştirelim. Artık gerekli veri oluşturma ve log izlemeleri için sayfalarımız hazır. Bunun güvenliğini arttıralım biraz

Admin Paneli için birazcık Güvenlik

Admin paneli için statik bir kullanıcı adı ve şifre tanımlayalım ve onu kontrol altına alalım. Web.config dosyasında <appsettings> içerisine aşağıdaki iki ayarı ekleyelim.

Ardından bu ayarları kolayca almak için yardımcı bir sınıf yazalım. Projemize sağ tıklayalım ve Helpers klasörü açalım. İçerisine SettingsHelper açalım fakat namespace den .Helpers ı kaldıralım. Aşağıdaki gibi sınıfımızı oluşturalım

Session yönetimi için bir class yazalım ama bundan önce içerisinde tutacağımız verinin modelini oluşturmamız gerekiyor. Ana dizinde Models klasörünün içerisine UserSessionModel oluşturalım. Aşağıdaki gibi bir model oluşturabilirsiniz.

Bunu da hazırladıktan sonra Session yönetimi içinde bir Helper sınıf yazalım. SessionHelper adında Helpers içerisine bir class açalım ve içerisinde yine namespace den .Helpers ı silelim ve aşağıdaki gibi kod yazalım.

Evet bunları hazırladığımıza göre artık Login için bir Controller oluşturalım. Areas > Admin > Model içerisine bir LoginModel oluşturalım. Bu model ile Views içerisinden verilerimizi alacağız. Aşağıdaki gibi bir model oluşturabilirsiniz

Artık AccountController adında bir boş controller oluşturabilirsiz. Bu controller içerisine kod yazmadan önce yetkilendirme için bir attribute yazalım. Admin klasörü içerisine Attributes klasörü açalım ve içerisine AdminAttribute adında bir class oluşturalım. İçerisine aşağıdaki gibi kodlarımızı yazalım.

Evet şimdi AccountController içerisine Login ve Logout yazabiliriz. Aşağıdaki gibi Get Login, Post Login ve Get Logout oluşturabilirsiniz

Get olan Login e sağ tıklayalım ve View ekleyelim. View ımızı aşağıdaki gibi hazırlayalım.

Artık yönetim panelimizde hazır oldu. En son yetkilendirme işlemlerini yapacağız. HistoriesController ve RecipesController ların üzerine aşağıdaki attribute u eklersek bundan sonra bu controller a sadece Admin yetkisi olan kullanıcı erişebilir olduğunu tanımlamış oluruz

[Admin]

Sonlandıralım

Evet gördüğünüz gibi bir chatbot ve bunu yönetebileceğiniz basit bir Admin Panel oluşturduk. Bu kodlara Github üzerinden ulaşabilirsiniz

Projenin kurulum videosu için aşağıdaki videoyu izleyebilirsiniz

Bir Sonraki Yazı

Önümüzdeki yazıda LUIS ile Chatbot geliştirmenin ve Türkçe dili gibi desteklenmeyen diller ile nasıl LUIS i entegre edebiliriz bunun üzerine güzel bilgilendirici bir yazı olacaktır. Sosyal medya, Github ve Medium üzerinden takip etmeyi unutmayın

Sevgilerle

-@PeaceCwz