เริ่มต้นกับ Bot Framework

ตั้งแต่ต้นปีที่ผ่านมาเราก็เห็นว่า ขาใหญ่ในวงการทั้งหลายพยายามโปรโมท API ที่เรียกว่า Bot ทั้ง Facebook Google, Microsoft, Apple, LINE ต่างเปิดตัวกันครบหมด ซึ่งน่าจะเป็นสัญญาณว่า นี่คือเทรนต่อไปของ  API

ส่วนตัวผมก็อยากลองเล่นมาตั้งแต่ Microsoft เปิดตัวแล้ว จนได้มีโอกาสมาลองวันนี้ครับ

Bot Framework คืออะไร ถ้าไปดูใน  https://dev.botframework.com/ ก็คือมันก็คือระบบตอบรับอัตโนมัตินั่นเอง ซึ่งจริงๆแล้ว Bot มีมานานแล้วแต่อาจจะใช้ในงานเฉพาะทาง แต่ตอนนี้พวกบริษัทยักษ์ใหญ่ก็ทำเป็น Framework ให้เราพัฒนา Bot เพื่อใช้ใน App ของเราได้ง่ายขึ้น

เนื่องจาก Bot Framework ของ Microsoft นั้นจริงๆแล้วก็คือ Framework ที่พัฒนาต่อยอดจากแนวคิดของ Web Service ดังน้ันมันก็คือการเขียน Web Service นั่นเอง

ซึ่งเรามีตัวเลือก 2 ทางครับ
1. ใช้ Node.js
2. ใช้.NET

ครั้งนี้ผมจะใช้ Node.js ในการสร้าง Bot Service ครับ เริ่มจากสร้าง Folder เปล่า แล้วสร้าง Node.js config ด้วย command นี้

npm init

จากนั้นเราจะทำการโหลด Dependencies ที่ใช้ในการพัฒนา Bot กันครับ ด้วย command

npm install --save botbuilder
npm install --save restify

จากนั้นลองสร้างไฟล์ app.js แล้ว Copy ตามนี้

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

//=========================================================
// Bot Setup
//=========================================================

// 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); 
});
  
// Create chat bot
var connector = new builder.ChatConnector({
    appId: process.env.MICROSOFT_APP_ID,
    appPassword: process.env.MICROSOFT_APP_PASSWORD
});
var bot = new builder.UniversalBot(connector);
server.post('/api/messages', connector.listen());

//=========================================================
// Bots Dialogs
//=========================================================

bot.dialog('/', function (session) {
    session.send("Hello World");
});

ในส่วนของ Code ข้างบนที่เป็น JavaScript นั้นแบ่งออกได้เป็น 4 ส่วน

  1. สีแดง – การเรียกใช้งาน modules ที่เกี่ยวข้อง
  2. สีเขียว – เป็นการสร้าง Web Service แบบ REST ที่ port 3978
  3. สีม่วง – เป็นการสร้าง bot object และทำการรับฟัง Request ที่จะเข้ามาด้วย path /api/messages เช่น ถ้ามี client เรียก http://localhost:3978/api/messages ตัว bot object จะได้รับ message นี้
  4. สีส้ม – เป็นการจัดการ Dialog (บทสนทนา) ซึ่งจากตัวอย่างจะเป็นการส่งข้อความ “Hello World” กลับไปให้ Client

จากนั้นไปโหลด Bot Framework Emulator มาจาก ทีนี่ ซึ่งตัว Emulator ก็คือตัวที่เอาไว้ใช้ทดสอบ Bot service ของเรานั่นเอง หน้าตาจะเป็นแบบนี้

bot_emu

จากนั้นลองรัน app.js ดูครับ ด้วย command

node app.js

ถ้า Bot เรารันได้แบบไม่มีปัญหาก็จะขึ้น Console แบบนี้ครับ

server_run

กลับมาที่ Emulator ลองพิมพ์อะไรไปแล้ว Enter ดูครับ

bot_send.pngหลังจากพิมพ์ Hi ไป จริงๆแล้วก็คือการส่ง HTTP request ไปที่ http://localhost:3978/api/messages พร้อมกับ JSON payload ที่มี Property “text” นั่นเอง

ส่วนฝั่ง Bot นั้นก็ตอบรับกลับมาเป็น JSON response

bot_recreive.png

ซึ่ง “text” : “Hello World” ก็คือ string ที่ทำการ assign ตอนที่เราเขียน  Code ในไฟล์ app.js

bot.dialog('/', function (session) {
    session.send("Hello World");
});

งั้นเราลองมาแก้เป็น .send() อย่างอื่นแทนเพื่อทดสอบ ก็ได้อย่างที่เห็นครับ

bot_last.png

มาถึงตรงนี้จาก Bot Framework เบื้องต้นตอนนี้อาจจะยังทำให้ไม่ค่อยเห็นว่าจะเอาไปใช้ต่อยังไงได้บ้าง แต่ลองนึกดูว่าถ้าเราสามารถสร้างระบบถาม-ตอบได้อย่างฉลาด เช่นมีการดึง data จากที่ต่างๆ รวมถึงทำ Machine Learning ก็อาจจะทำให้ Bot นั้นมีประโยชน์มากขึ้น ยังไงก็ขอเวลาผมไปลองศึกษาเพิ่มเติมก่อนละกันครับ 🙂

 

Advertisements

Electron เขียน Desktop Apps ด้วย Web เทคโนโลยี HTML/Javascript

ต้องเรียกว่ายุคสมัยนี้ หากใครเป็น Software Developer แล้วเขียนโปรแกรมได้บน Platform เดียวเช่น Windows ก็คงถือว่าเริ่มจะ Outdated แล้ว

ในอดีตกาลนั้น การเขียนโปรแกรม Desktop ซึ่งก็คือเป็นโปรแกรมหรือ App ที่ใช้งานบน PC/Mac ซึ่งโดยส่วนใหญ่แล้วจะใช้ C/C++, VB, .NET, Java หรือ Objective-C/Swift

ซึ่งจากที่กล่าวไว้ข้างบนนั้นส่วนใหญ่เวลาเขียนมาแล้ว จะเจาะจงว่ามันจะทำงานได้บน OS เดียวเท่านั้น จะมีก็แต่

– Java ที่สามารถเขียนครั้งเดียวแล้วนำไปใช้บน OS อื่นๆได้(ผมไม่แน่ใจว่า Java สามารถใช้งานบน OSX ของ Mac ได้มั้ย)
– C/C++ ก็สามารถเขียนแล้วใช้งานบน Windows/Linux ได้แต่อาจจะต้องใช้ framework ต่างๆช่วยเพื่อให้ Code นั้นไม่ยึดติดกับ OS ใดๆ

แต่เนื่องจากว่ายุค Wep app ครองโลกแบบนี้ และด้วยความที่ HTML, CSS, Javascript ซึ่งเป็น Building Blocks ของ Web techs นั้น ง่ายต่อการทำ UI และสามารถทำงานใต้ Web Browser ใดๆก็ตามที่รองรับมาตรฐานของการพัฒนา Web (HTML5/Es6/Es6) ทำให้ตัว Web techs นั้นมีความได้เปรียบเรื่องการพัฒนา App ให้ Cross Platform

ทางโปรเจค Electron นั้นก็ได้ใช้จุดแข็งตรงนี้มาพัฒนาเป็น Framework ที่ทำให้ Developer สามารถพัฒนาโปรแกรมบน Desktop แบบ Cross Platfrom ด้วย HTML,CSS,Javascript แบบเดียวกับที่ใช้ทำ Web app

จริงๆแล้ว Electron นั้นคือการนำ Open Source ที่นิยมมากสำหรับสาย Web นั่นก็คือ Chromium และ Node.Js มาเป็น Framework เดียว ซึ่งทำให้เราใช้มันสำหรับทำได้ทั้ง UI หรือ Non-UI รวมถึง UI Frameworks ต่างๆเช่น Angular/Polymer/React ก็สามารถนำมาใช้ได้หมด รวมทั้ง Node.Js modules ต่างๆ

เราลองมาเริ่มกัน

  1. เริ่มจากเข้าไปเวปหลัก http://electron.atom.io/ ก่อนเลยครับ
  2. จากนั้นลองทำตาม Quick Start

เพื่อทำการติดตั้งโปรเจคตัวอย่าง

# Clone the Quick Start repository
$ git clone https://github.com/electron/electron-quick-start

# Go into the repository
$ cd electron-quick-start

# Install the dependencies and run
$ npm install && npm start

คำสั่งที่ให้ตัว Electron ทำงานคือ “npm start” และผลจาก sample app คือ ….ทาด้าาาาา..

Hellow World พร้อม Debugger..ในรูปแบบ Desktop App

Screen Shot 2559-06-11 at 9.55.57 AM

มาดูอีกทีแล้วทำไมต้องเราใช้ “npm start” ในการสั่งเปิด App ด้วย จริงๆแล้วเราสามารถสั่งจาก Electron ได้เลยประมาณนี้

$ ./node_modules/.bin/electron .

มาดูรายละเอียดของโครงสร้างของ App กัน

Screen Shot 2559-06-11 at 10.50.34 AM

ไฟล์ที่สำคัญคือ

  • index.html แน่นอนครับเป็นหน้า UI หลัก
  • main.js แน่นอนครับเป็น Entry point ของโปรแกรมเรา
  • package.json เป็นไฟล์ Config สำหรับ NodeJs

มาลองดูไฟล์ main.js กันก่อนครับ จะเห็นว่ามีการสร้าง BrowserWindow ขนาด 800×600 แล้วทำการโหลด index.html เป็นหน้าแรก ซึ่ง BrowserWindow คือการเปิด Web Browser Window (ที่ใช้ Chromium ในการ render นั่นเอง)

function createWindow () {
 // Create the browser window.
 mainWindow = new BrowserWindow({width: 800, height: 600})

 // and load the index.html of the app.
 mainWindow.loadURL(`file://${__dirname}/index.html`)

 // Open the DevTools.
mainWindow.webContents.openDevTools()

 // Emitted when the window is closed.
 mainWindow.on('closed', function () {
 // Dereference the window object, usually you would store windows
 // in an array if your app supports multi windows, this is the time
 // when you should delete the corresponding element.
 mainWindow = null
 })
}

และ Code “mainWindow.webContents.openDevTools() น่าจะเป็นการ Debugger Window ที่นี่เราลองลบบรรทัดนี้ดูแล้วรันใหม่ ก็จะเห็นว่า Debugger หายไปแล้ว

Screen Shot 2559-06-11 at 11.01.21 AM.png

ที่นี้มาลองดู index.html กันครับ ดูแล้วก็ไม่มีอะไรมาก

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
<!– All of the Node.js APIs are available in this renderer process. –>
We are using node document.write(process.versions.node),
Chromium document.write(process.versions.chrome),
and Electron document.write(process.versions.electron).
</body>

// You can also require other files to run in this process
require(‘./renderer.js’)

</html>

เรามาลองแก้ HTML ง่ายๆกันเพื่อทำ Contact card app เอาไว้แนะนำตัว

Screen Shot 2559-10-08 at 9.32.48 AM.png

ผลที่ได้ก็คือ

Screen Shot 2559-06-11 at 11.42.28 AM

เมื่อกดปุ่ม More Info.. จะทำการเปิด MessageBox เพื่อแสดงข้อความ

Screen Shot 2559-06-11 at 11.44.51 AM

สรุปได้ว่าเราสามารถเขียน App ที่มี ประสพการณ์แบบ Desktop ด้วย HTML/Javasctipt ได้ง่ายๆ(?) โดยใช้ Framework Electron ครับ….

13409222

Windows 10 – Universal Windows Platform ขอลองซักนิด

เนื่องจากว่า Microsoft โปรโมทนักหนากับ Universal Windows Platform (UWP) ที่เมื่อเขียนแล้วสามารถนำไปรันบน Windows 10, Windows Phone, Xbox, etc.. ซึ่งน่าจะเป็นการพลักดันครั้งสำคัญของ Microsoft ในการสร้าง Eco System ให้กลับมาแย่ง Market Share อีกครั้ง

โดยส่วนตัวแล้วผมก็มีประสบการณ์กับ C# + WPF มาพอสมควรทำให้ปรับตัวได้ไม่ยาก และ  UWP น้ันมี Architect เดียวกับ WPF ในการทำ User Interface.

เริ่มจาก

  1. Install Visual Studio 2015 Community Editoin ซึ่งใช้งานได้ Free 🙂
  2. สร้าง Project ใหม่เป็นแบบ UWP

newproj

3. ไฟล์ที่ถูกสร้างมาจาก UWP project ก็คุ้นหน้าคุ้นตา MainPage.xaml อีกแล้ว..

default_files

4. ลองมาดู Project Properties..ก็พบว่าเราสามารถ target App ของเราได้ตาม Windows 10 Build version

project_prop

5. มาดูฝั่ง XAML กันบ้าง ซึ่งตัว code ที่ Visual Studio สร้างมาให้ก็เป็นแค่หน้าจอขาวๆ

xaml_code.png

6. พวก Default Controls ของโลก WPF ก็ยังมาอย่างครบครัน

system_controls

7. ลองใส่ Button ดูก็ลอง ลาก แล้วก็วางได้เลย

xaml_code2

8. ลอง Double Click ที่ Button Object เพื่อเขียน Code Behide กัน
ลอง โชว์ Message Box

private async void button_Click(object sender, RoutedEventArgs e)
{
var dialog = new MessageDialog(“Hey Windows Universal Platform app!”);
await dialog.ShowAsync();
}

9. Compile App ได้เลยแล้วลอง Click ที่ปุ่ม Button

App เราก็จะถูก Style ด้วย Windows 10 – WUP UI เป็นค่าเริ่มต้น

msgbox_run

10. ถ้าอยากลองเทสกับหน้าจอหลายๆแบบ ใน Visual Studio ก็มีให้ปรับตามนี้

screen_res.png

11. ลองมาดู output files ของการ compile กันครับ ผลออกมาคือ .exe และ พวก dependencies assemblies ทั้งหลาย

app_output

12. ลอง double click เพื่อรัน App2.exe ตรงๆกันดูครับ

อ้าว error! แล้วเราจะรัน app ของเรายังไงล่ะครับ….

runtime_err.png

13. ลองไป เมนู Deploy App ดู

deploy.png

14. หลังจาก Deploy เสร็จ App ของเราก็มาโผล่ที่ Start Menu นั่นเอง

startmenu

และเนื่องจากผมลองเขียน app ที่มี scope ชัดเจนนิดนึง เลยลองเขียน App อ่านเวปสุดฮิต
แน่นอน Pantip นั่นเอง 🙂

ซึ่งตอนนี้ทาง app ก็ยังไม่มีอะไรมาก แค่ ListView ที่ทำ Data Binding กับ List Object เอามา render บนหน้าจอได้รวมถึงได้ลองใช้ HTTP req ในการดึง Data จาก Pantip.

pnatipw

ท้ายที่สุดจากการทดลองของผม UWP app นั้นเริ่มต้นได้ไม่ยากสำหรับคนที่มีความคุ้นเคยกับ C# และ WPF ซึ่งผมคิดว่าคนที่เคยเขียน Windows Form ก็น่าจะปรับตัวได้ไม่ยาก รวมถึง Visual Studio ที่เป็น IDE ที่ค่อนข้าง Powerful จึงทำให้การเขียนโปรแกรมทำได้เร็วขึ้น

 

ทดสอบ C# ด้วย .NET Core บน OSX

สำหรับคนที่เขียน C# บน Windows ก็คงต้องอยากที่จะให้มันเขียนได้บน Mac หรือ Linux ใช่มั้ยครับ จริงๆแล้วก็มี Mono Framework ที่ตอบโจทย์อยู่แล้ว แต่ถ้าเราต้องการ Native Experience ล่ะ?

.NET Core อาจจะเป็นคำตอบ (มั้ง)

เนื่องจากผมอยากลองดูว่า .NET Core ที่เป็น Open Source ของ .NET Framework ที่ทาง Microsoft ประกาศไว้ช่วงต้นๆปีที่แล้วจะเป็นยังไง ผมก็เลยลอง Setup ดูบน Mac เพื่อทดสอบ

เริ่มต้นจากทำตาม link นี้ http://dotnet.github.io/getting-started/ ซึ่งทางเวปจะ detect ให้ว่าตอนนี้เรากำลังใช้ OS อะไรอยู่

สำหรับ Mac – OSX จะต้องโหลดไฟล์ .pkg เพื่อทำการลง dotnet compiler ลงบนเครื่อง

หลังจากลงเสร็จก็มาเริ่มต้นจากใช้ Termial

Screen Shot 2559-01-10 at 11.48.19 PM

ลองสร้าง new default project ผ่าน commandline “dotnet new”

Screen Shot 2559-01-10 at 11.49.50 PM

ลอง “ls” ดูไฟล์ที่สร้างขึ้นมาจะได้แบบนี้ ซึ่งประกอบด้วย

  1. NuGet.Config
  2. Program.cs
  3. project.json

Screen Shot 2559-01-10 at 11.51.06 PM.png

ลองรัน command ตามที่ Getting Started บอกถัดไป “dotnet restore” เพื่อทำการ restore หรือ download พวก assemblies/dlls/modules ที่ได้กำหนดใน project.json มาเพื่อใช้ในการ Compile ตัวโปรเจคของเรา

Screen Shot 2559-01-10 at 11.54.08 PM

หลังจาก restore พวก dependencies ของโปรเจคเราแล้วลองสั่ง  compile และ run กันด้วย “dotnet run”

!!!! Error…

Unhandled Exception: System.IO.FileNotFoundException: Could not load file or assembly ‘System.Console, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a’ or one of its dependencies. The system cannot find the file specified.

Screen Shot 2559-01-10 at 11.56.20 PM

ปัญหานี้ก็คือมาดูที่ไฟล์ Program.cs

Code โปรแกรมเรามีการเรียกใช้ Console.WritLine หมายความว่ามันมี Dependency กับ System.Console ทำให้ Compile ไม่ผ่าน

using System;

namespace ConsoleApplication
{
 public class Program
 {
 public static void Main(string[] args)
 {
 Console.WriteLine("Hello World!");
 }
 }
}

ทีนี้มาดูไฟล์ project.json

{
 "version": "1.0.0-*",
 "compilationOptions": {
 "emitEntryPoint": true
 },
"dependencies": {
 "NETStandard.Library": "1.0.0-rc2-23616"
 },
"frameworks": {
 "dnxcore50": { }
 }
}

เราต้องทำการเพิ่ม dependencies เพื่อให้โปรเจคนี้รู้จัก dlls อื่นมากขึ้นเช่น System.Console ดังนั้นแก้ไฟล์ประมาณนี้

{
 "version": "1.0.0-*",
 "compilationOptions": {
 "emitEntryPoint": true
 },
"frameworks": {
 "dnxcore50": { 
"dependencies": { 
 "System.Console": "4.0.0-beta-*", 
 "System.IO": "4.0.11-beta-*", 
 "System.Runtime": "4.0.21-beta-*" 
 }
 }
 }
}

ลองรัน “dotnet restore” อีกรอบเพื่อโหลด dlls มาใหม่ก็จะยัง Error!!! ถ้าใช้ OSX 10.11.2+

ที่นี้ลองมาใช้ command นี้แทนในการ restore

“dotnet restore –runtime osx.10.10-x64”

จากนั้นก็ลอง “dotnet run” ในที่สุด Hello World! ก็ออกมาแล้ว

Screen Shot 2559-01-11 at 12.29.49 AM

ลองเขียน C# บน mac ด้วย Mono

วันนี้ว่างๆครับ เลยลองทดสอบการเขียนโปรแกรมด้วย C# บน mac
เนื่องจากว่า C# นั้นพัฒนาจาก Microsoft ซึ่งแรกเริ่มเดิมทีนั้นทำมาเพื่อ Windows

โดยทางสถาปัตยกรรมแล้วโปรแกรมหรือแอฟที่พัฒนาด้วยภาษา C# นั้นต้องทำงานภายใต้ .NET framework

ซึ่งได้มี project ที่ชื่อว่า Mono พัฒนา .NET framework สำหรับ OS อื่นๆที่ไม่ใช่ Windows และเราจะใช้สิ่งนี้ในการรันโปรแกรม C# บน Mac ครับ

เริ่มต้นจาก download  Mono จาก http://www.mono-project.com/download/ ก่อนซึ่งตัวนี้จะเป็นโปรแกรมที่เอาไว้รัน .exe ที่ compile จาก C#

จากนั้นก็ไป download http://www.monodevelop.com ซึ่งเป็นเครื่องมือ (IDE) ที่ทำให้เราพัฒนาโปรแกรม C# ได้ง่ายขึ้น เช่น UI Design, Debugging และ อื่นๆ ซึ่งจริงๆแล้ว IDE ตัวนี้คือ Xamarin Studio นั่นเอง

จากนั้นผมก็ลองเขียนโปรแกรมง่ายๆ คือการ แสดง message box หลังจาก click ที่ปุ่มที่สร้างขึ้นมาเพื่อที่ว่าผมจะได้ทำความเข้าใจกับ IDE  ตัวนี้

1. Code ในส่วนของการสร้าง window เปล่าๆไม่มีอะไรมาก

Screen Shot 2558-12-13 at 12.29.59 PM

2. มาหน้า Designer ซึ่งทาง Xamarin Studio ก็มี ToolBox Panel ที่ทำให้เราเลือก Control มาวางที่ Window ได้เลยเหมือนที่ทำได้ใน Microsoft Visual Studio

Screen Shot 2558-12-13 at 12.47.20 PM

3. ทำการ handle event เวลาที่มีการ Click ปุ่ม แล้วแสดง Message Box

Screen Shot 2558-12-13 at 12.30.22 PM

4. ลองรันโปรแกรมดู ok เราได้ MessageBox กับข้อความที่ต้องการScreen Shot 2558-12-13 at 12.30.42 PM

เป็นการจบการ install และการทำ simple app อย่างง่ายดาย 🙂