22 Temmuz 2017 Cumartesi

.net Core MVC ile basit bir Workplace Bot deneyimleme (macos - VS Code)


Bot dünyasına şöyle bir giriş yapmak için şöyle basit bir .net core MVC projesi oluşturdum. :)

vs code terminal'den dotnet build ve dotnet run dedim ve projemin localhost:5000 'de koştuğunu gördüm.

Workplace üzerinde çalışmaya başlamak için öncelikle localimi tünelledim. Bu da ne demek?
Yerel makinanızı tünellek;  size bir subdomain vererek - yerelinizi internet üzerinde yayınlamanıza yardımcı olan bir eylemdir. Bu sayede yerel makinanızda çalışan bir uygulamayı uzakta bulunan müşterinize veya ekip arkadaşınıza çalışır halde göstermek için bir yerlere deploy etmenize gerek kalmaz.(https://www.serhatdundar.com/tag:ngrok)
Bu işlemi yapmak için araçlar var. Bunlardan en yaygını ngrok diye bir araç. Diğeri de https://localname.io/ diye şirin bir araç. localname.io'nun macos uygulaması da var ve subdomain vermenize izin veriyor. İkisi de iş görüyor.

Daha yaygın diye ngrok üzerinden gideyim.

1. Öncelikle download edelim;
https://ngrok.com/download
2. Şimdi login olup auth_token'ınımızı öğrenelim ve terminalimizden ngrok'un olduğu dizinde ngrok komutlarını çalıştırmaya başlayalım.
./ngrok authtoken authtokenım
3. Şimdi de 5000 portumu tünelliyorum çünkü uygulamam orada koşuyor.
./ngrok http 5000
Bana tünellediği adresi verdi;
https://fakirdomaini.ngrok.io
artık bu adres üzerinden workplace ile bağlantı kurmaya hazırız.

Şimdi workplace'de sol menü'den Integrations kısmına girip en alttaki "Create Custom Integration" butonuna tıklayalım.





Botumuza isim verip oluşturuyoruz ve id'si, token'ı vs oluşuyor. İzinleri kafadan attım hangileri lazımsa onlar seçilmeli..




Buraya kadar kolay geldik. Şimdi ise yazdığımız uygulama ile workplace'i tanıştırmamız lazım. Bunu bize webhook sağlayacak.

Webhooks sekmesine gelip uygulamamızın adresini veriyoruz. Yazdığımız adresin workplace'e success dönüyor olması gerek..

Bunun için WorkplaceController'ımda bir methodum var;

[HttpGet]
public string Get()
{
var query = Request.Query;

if (query["hub.mode"] == "subscribe" &&
query["hub.verify_token"] == "bot_verify_token")
{
var retVal = query["hub.challenge"];
return retVal.ToString();
}
else{
return Request.Query["hub.challange"];
}
}


dotnet build , dotnet run .. çalışıyor. O halde webhook'u ayarlayabilirim;


Kabul etti.. :)

Şimdi workplace'le iletişelim.. Diğer metodları yazalım, hatta direkt tüm controller'ı paylaşayım.. Bizim uygulamamız papağan misali sadece bizim ona yazdığımız şeyi bize dönüyor. Aşağı yukarı şöyle birşey;

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Net;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace botapp.Controllers
{
[Route("[controller]")]
public class WorkplaceController : Controller
{
[HttpGet]
public string Get()
{
var query = Request.Query;

if (query["hub.mode"] == "subscribe" &&
query["hub.verify_token"] == "weather_bot_verify_token")
{
var retVal = query["hub.challenge"];
return retVal.ToString();
}
else{
return Request.Query["hub.challange"];
}
}

[ActionName("Receive")]
[HttpPost]
public async Task<ActionResult> ReceivePost([FromBody]BotRequest data)
{
await Task.Factory.StartNew(async () =>
{
foreach (var entry in data.entry)
{
foreach (var message in entry.messaging)
{
if (string.IsNullOrWhiteSpace(message?.message?.text))
continue;

var msg = "You said: " + message.message.text;
var json = $@" {{recipient: {{ id: {message.sender.id}}},message: {{text: ""{msg}"" }}}}";
await PostRaw($@"https://graph.facebook.com/v2.6/me/messages?access_token=accesstokenim", json);
}
}
});

return new StatusCodeResult((int)System.Net.HttpStatusCode.OK);
}

private async Task<string> PostRaw(string url, string data)
{
var request = (HttpWebRequest)WebRequest.Create(url);
request.ContentType = "application/json";
request.Method = "POST";

var requestStream = await request.GetRequestStreamAsync();
using (var requestWriter = new StreamWriter(requestStream))
{
requestWriter.Write(data);
}

var responseStream = await request.GetResponseAsync();

var response = (HttpWebResponse)responseStream;
if (response == null)
throw new InvalidOperationException("GetResponse returns null");

using (var sr = new StreamReader(response.GetResponseStream()))
{
return sr.ReadToEnd();
}
}
}
}


Burada bir adet BotRequest modeli görüyoruz.. Bunu da aşağıda kaynağını verdiğim arkadaş yazmış. Onun örneğinden kopya çektim bayağı.

https://tutorials.botsfloor.com/facebook-chatbot-in-asp-net-2f9379a238b0


BotRequest ;

using System.Collections.Generic;

namespace botapp
{

public class BotRequest
{
public string @object { get; set; }
public List<BotEntry> entry { get; set; }
}

public class BotEntry
{
public string id { get; set; }
public long time { get; set; }
public List<BotMessageReceivedRequest> messaging { get; set; }
}

public class BotMessageReceivedRequest
{
public BotUser sender { get; set; }
public BotUser recipient { get; set; }
public string timestamp { get; set; }
public BotMessage message { get; set; }
public BotPostback postback { get; set; }
}

public class BotPostback
{
public string payload { get; set; }
}

public class BotMessageResponse
{
public BotUser recipient { get; set; }
public MessageResponse message { get; set; }
}

public class BotMessage
{
public string mid { get; set; }
public List<MessageAttachment> attachments { get; set; }
public long seq { get; set; }
public string text { get; set; }
public QuickReply quick_reply { get; set; }
}

public class BotUser
{
public string id { get; set; }
}

public class MessageResponse
{
public MessageAttachment attachment { get; set; }
public List<QuickReply> quick_replies { get; set; }
public string text { get; set; }
}

public class QuickReply
{
public string content_type { get; set; }
public string title { get; set; }
public string payload { get; set; }
}

public class ResponseButtons
{
public string type { get; set; }
public string title { get; set; }
public string payload { get; set; }
public string url { get; set; }
public string webview_height_ratio { get; set; }
}

public class MessageAttachment
{
public string type { get; set; }
public MessageAttachmentPayLoad payload { get; set; }
}

public class MessageAttachmentPayLoad
{
public string url { get; set; }
public string template_type { get; set; }
public string top_element_style { get; set; }
public List<PayloadElements> elements { get; set; }
public List<ResponseButtons> buttons { get; set; }
public string recipient_name { get; set; }
public string order_number { get; set; }
public string currency { get; set; }
public string payment_method { get; set; }
public string order_url { get; set; }
public string timestamp { get; set; }
public Address address { get; set; }
public Summary summary { get; set; }
}

public class PayloadElements
{
public string title { get; set; }
public string image_url { get; set; }
public string subtitle { get; set; }
public List<ResponseButtons> buttons { get; set; }
public string item_url { get; set; }
public int? quantity { get; set; }
public decimal? price { get; set; }
public string currency { get; set; }
}

public class Address
{
internal string street_2;

public string street_1 { get; set; }
public string city { get; set; }
public string postal_code { get; set; }
public string country { get; set; }
public string state { get; set; }
}
public class Summary
{
public decimal? subtotal { get; set; }
public decimal? shipping_cost { get; set; }
public decimal? total_tax { get; set; }
public decimal total_cost { get; set; }
}

}

dotnet build
dotnet run

hadi yazışalım :)


Biraz daha yaratıcı hale getirmek artık kodlamaya kalmış olduu :) Birşeyler deneyeceğim kendi çapımda bakalım.. Gerçi,, başka ne olabilir ki? :PPP



20 Temmuz 2017 Perşembe

npm ERR! missing:


Merhaba Cinlerim..

.net core mvc ile ufak çaplı bir projeye başlamışken bootstrap'i jquery'yi fln npm'den eklemeye kalktım pratik olur diye. :) Yine mono laneti vuku bulup sorun çıktığı için çok da pratik olduğu söylenemez ama birşey daha tecrübe etmiş oldum.

Sıkıntı şöyle başladı, vs'den "Add New Item" deyip "npm Configuration File" seçtim. Sonra oluşan package.json dosyama aşağıdaki gibi paketleri ekledim, kaydettim.

"dependencies": {
"bootstrap": "3.3.7",
"jquery": "3.2.1",
"jquery-validation": "1.16.0",
"jquery-validation-unobtrusive": "3.2.6"
}

bu işlemi yaptıktan sonra "node_modules" diye bir klasör oluşup paketlerimin içine yüklenmesi gerekiyordu normalde ama eklenmedi. Paketlerin yanında yüklenmediğini belirten işaretler uyarılar vardı. Ardından Visual Studio üzerinden node.js Interactive Window'u açıp .npm komutlarını çalıştırmayı denedim.

Birkaç sitede çözüm olarak ".npm init -y" komutunun durumu düzelteceği yazıyordu. Olmadı, bende şöyle bir hata verdi;
Please specify a valid Node.js project or project directory. If your solution contains multiple projects, specify a target project using .npm [ProjectName or ProjectDir] <npm arguments> For example: .npm [MyApp] list

Dediğini yaptım..
.npm [ProjeminAdı] list
Yine bana aynı çıktıyı verdi; :(
+-- UNMET DEPENDENCY bootstrap@3.3.7
+-- UNMET DEPENDENCY jquery@3.2.1
+-- UNMET DEPENDENCY jquery-validation@1.16.0
`-- UNMET DEPENDENCY jquery-validation-unobtrusive@3.2.6
npm ERR! missing: bootstrap@3.3.7, required by asp.net@1.0.0
npm ERR! missing: jquery@3.2.1, required by asp.net@1.0.0
npm ERR! missing: jquery-validation@1.16.0, required by asp.net@1.0.0
npm ERR! missing: jquery-validation-unobtrusive@3.2.6, required by asp.net@1.0.0
[ProjeminAdı] list completed with errors
Sonra birkaç şey daha denedim, biraz daha araştırdım derken şu paketi buldum;

https://www.npmjs.com/package/npm-install-missing

Hadi bunu da deneyeyim bari;

 .npm install -g npm-install-missing

Bu paketi kurduktan sonra kullanmam lazım tabi, işte şöyle;


.npm [ProjeminAdı] npm-install-missing

Sonunda bir succesful mesajı görebildim :) Sonrasında tekrar şu komutu çalıştırdım;
.npm [ProjeminAdı] install
Oldu ve hasretle yolunu gözlediğim klasörüm geldi. Ve paketlerim yüklendi. Aferim, bugün de iyi eğlendik. :)
 
(Burada bir karikatür vardı ama telif yerim diye kaldırdım. Herkese dava açıyorlarmış karikatür paylaşılıyor diye. Karikatürün doğasına hiç uymuyor bence bu tavır :-/ Güzel eğlendim bugün)