Agenda:

  • Introduction to Microsoft Bot Framework
  • Design and Develop,Test /Debug Bot Application with Demo
  • Getting Started With Azure Bot Service.
  • Deploy /Publish Intelligent Bots using Bot Builder SDK (.Net) with Demo
  • Embed a bot in a Xamarin Mobile Application
Free Registration : https://goo.gl/KSPzgv





Introduction:

Microsoft introduced the public preview of Video Indexer as a part of Cognitive Service. Previously, we used Video API but now it's replaced with Video Indexer. Video Indexer automatically extracts the metadata and builds intelligent innovative AI applications based on Video and Audio.

In this article, I will show how to integrate Video Indexer embeddable widgets into the mobile application.

Create Video Indexer Account:

The implementing Video Indexer into the application, you must have to create account and upload your video using my previous article as a reference .
Video Indexer supports embedding two types of widgets into your Mobile application
Cognitive Insights – its Includes all visual insights that were extracted from video indexer.
Player -its enable you to stream the video.
Embedding Video:
I will show below steps for how to get embedding source from video indexer portal

Step 1: 

Login to Video Indexer Portal using Microsoft, google or Azure Active directory account

Step 2: 

Select your video, whichever need to integrate to the application.

Step 3: 

Click the "embed" button that appears below the video.


Step 4: 

After click on “embed” button, Select the widget you want to embed with the desired options. (player/insights)



Step 6: 

You can copy the embed codes from embed popups and start implement into your application for Public videos. If you want to embed a Private video, you have to pass an access token in the iframe src attribute as a query string .

Create Xamarin / Web Application:

Let's start with creating a new Xamarin Forms Project using Visual Studio. Open Run - Type “Devenev.Exe” and enter - New Project (Ctrl+Shift+N) - select Blank Xaml App (Xamarin.Forms) template.



It will automatically create multiple projects, like .NET Standard, Android, iOS, and UWP.

Implement Cognitive Insights Widget:

Cognitive insights widget contains all the visual insights that were extracted from the video after the indexing process such as people appearances, top keywords, sentiment analysis, transcript, translate, and search.
Let we start implement into the Xamarin Application.
You can add webview control inside the content page as per below xaml design

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:VideoIndexer"
:Class="VideoIndexer.MainPage">
<WebView x:Name="browser" WidthRequest="1280" HeightRequest="780"></WebView>
</ContentPage>

You can use your cognitive insights widget code from c# code as a htmlwebviewsource . You can specify the query string for whatever widgets need to display ( <url>?widgets=people&title=myInsights)


public MainPage()
{
InitializeComponent();
// var browser = new WebView();
var htmlSource = new HtmlWebViewSource();
htmlSource.Html = @"<html><head><script src='https://breakdown.blob.core.windows.net/public/vb.widgets.mediator.js'></script></head>
<body><iframe width='580' height='780' src='https://www.videoindexer.ai/embed/insights/9123e16b12' frameborder='0' allowfullscreen></iframe>
</body></html> ";
browser.Source = htmlSource;
}

You can deploy the application, the output look like below


Implement Video Insights Widget:

The video player widget is a customized Media Player that except of providing video streaming, contains extra features such as playback speed and closed captions. Refer below code for video insight wedge implementation 

public MainPage()
{
InitializeComponent();
// var browser = new WebView();
var htmlSource = new HtmlWebViewSource();
htmlSource.Html = @"<html><head><script src='https://breakdown.blob.core.windows.net/public/vb.widgets.mediator.js'></script></head>
<body><iframe width='1280' height='720' src='https://www.videoindexer.ai/embed/player/9123e16b12' frameborder='0' allowfullscreen></iframe>
</body></html> ";
browser.Source = htmlSource;
}

Implement Video and Cognitive Insights Widget:

Copy the player and cognitive insights embed code and also include javascript communication file for communicate with each other widget

var htmlSource = new HtmlWebViewSource();
htmlSource.Html = @"<html><head><script src='https://breakdown.blob.core.windows.net/public/vb.widgets.mediator.js'></script></head>
<body><iframe width='1280' height='720' src='https://www.videoindexer.ai/embed/player/9123e16b12' frameborder='0' allowfullscreen></iframe>
<iframe width = '1280' height = '780' src = 'https://www.videoindexer.ai/embed/insights/9123e16b12/?widgets=people&title=myInsights' frameborder = '0' allowfullscreen ></iframe >
</body></html> ";
browser.Source = htmlSource;

Summary

In this article, we learned how to sign in to Video Indexer and integrate Video Indexer embeddable widgets into the mobile cross platform application. If you have any questions/feedback/ issues, please write in the comments box.




MSDN Source Code


Introduction:

The Bot Framework enables you to build bots that support different types of interactions with users. You can design conversations in your bot to be freeform. Your bot can also have more guided interactions where it provides the user choices or actions. The conversation can use simple text strings or more complex rich cards that contain text, images, and action buttons. And you can add natural language interactions, which let your users interact with your bots in a natural and expressive way.

In this article, we can deploy a bot to azure using visual studio 2017, register app with bot portal and testing it with the Bot Framework Emulator.

Setup and Create New Bot Application.

You can read my previous article for Getting Started with Bots Using Visual Studio 2017 from following URL http://www.c-sharpcorner.com/article/getting-started-with-bots-using-visual-studio-2017/



You need azure account for deploy bot application to azure so If you do not have an Azure account, you can click following url for a free trial azure subscription. https://azure.microsoft.com/en-us/free/

Register Bot Application:

Step 1: Navigate to Bot Framework Portal from https://dev.botframework.com/

Step 2: Click on Sign in button and login with credential

Step 3: Click on Create a Bot or Skill

Step 4: Click on Create a Bot and click on Register

Step 5: Upload relevant app png icon and max size should be 30k

Step 6: Provide your bot's Display Name.

Step 7: Provide a Description of your bot.



Step 7: Provide your bots Https endpoint in configuration section.

We are not yet deployed our bot to the cloud so leave the endpoint blank for now. we will return to the Bot Framework Portal later and specify the endpoint after we have deployed our bot.

Step 8: On the next page, click Generate an app password to continue.

Step 9: Copy and securely store the password that is shown, and then click Ok.

Step 10: Click Finish and go back to Bot Framework.

Step 11: Back in the Bot Framework Portal, the App ID field is now populated.

Click 12: Click on Register to complete the registration process.

Update Web Configuration file:

Open your project in Visual Studio and update the Microsoft App Id and Microsoft App Password values in your web configuration settings to specify the app ID and password values that were generated for your bot during the above registration process.



<appSettings>
<!-- update these with your BotId, Microsoft App Id and your Microsoft App Password-->
<add key="BotId" value="DevEnvExeBot" />
<add key="MicrosoftAppId" value="2f3edda3-d36d-4d88-8acf-e448d870348e" />
<add key="MicrosoftAppPassword" value="L6KOPcc3jqZB6hKPe06yxsH" />
</appSettings>

Azure publishing wizard:

Step 1: Right click on Project > Select on Publish and start publish bot application into azure



Step 2: Select on Microsoft Azure App Service > select on Create New and click on Publish button


Step 3: Login with Microsoft azure account and click on create app service

Step 4: Copy the Destination URL value to the clipboard (you'll need this value later to test the connection to the bot)


Update Site Url from Bot Portal:

Step 1: Sign in to the Bot framework Portal - https://dev.botframework.com/

Step 2: Click My Bots.

Step 3: Select the bot that you want to configure and click Settings.

Step 4: Provide your bot's HTTPS endpoint. This is the endpoint where your bot will receive HTTP POST messages from Bot Connector. If you built your bot by using the Bot Builder SDK, the endpoint should end with /api/messages.
Step 5: Click on Save Changes.

Test Bot Application on Portal:

After publish Bot application into azure, you can test bot application from portal and emulator .

Step 1: Sign in to the Bot framework Portal - https://dev.botframework.com/

Step 2: Click on Test and provide input text


Test Bot Application on Emulator:

Open Bot Emulator and Provide your bot's HTTPS endpoint with api/messages .

Provide Microsoft App ID and Password and click on Connect



If you are getting following error, Click on Edit Tunneling (ngrok) setting.



download Tunneling (ngrok.exe) from https://ngrok.com/download and click on browse and associate ngrok.exe path



Click on refresh from Bot emulator and provide your input for test application 


Summary

In this article, your learned how to Deploy a bot to Azure using Visual studio 2017. If you have any questions/ feedback/ issues, please write in the comment box.
The Bot Framework enables you to build bots that support different types of interactions with users. You can design conversations in your bot to be freeform. Your bot can also have more guided interactions where it provides the user choices or actions. The conversation can use simple text strings or more complex rich cards that contain text, images, and action buttons. And you can add natural language interactions, which let your users interact with your bots in a natural and expressive way.

In this article, we can create a bot by using the Visual studio 2017 with Bot template and testing it with the Bot Emulator.

Install Visual Studio 2017:

Download Visual Studio 2017 from the following URL given below.

Download Visual Studio 2017 from https://www.visualstudio.com/downloads/.

Refer Visual Studio 2017 system requirement from https://www.visualstudio.com/en-us/productinfo/vs2017-system-requirements-vs.



Note:

You can build bots for free with Visual Studio 2017 Community.

The Bot Builder SDK for .NET currently supports Only on Windows. Visual Studio for Mac is not supported.

Bot Application template:

Download the Bot Application template from the following url http://aka.ms/bf-bc-vstemplate and install the template by saving the .zip file to your Visual Studio 2017 project templates directory.

The Visual Studio 2017 project templates directory is typically located following url

%USERPROFILE%\Documents\Visual Studio 2017\Templates\ProjectTemplates\Visual C#\


Create New Project:

Let's start with creating a new Bot application in Visual Studio 2017.

Click on Windows Key > Select Visual Studio 2017.



Now, open VS and create new project with c# project, select the Bot applications template as per below



The Bot application was created with all of the components and installed all required Nuget reference


Update Bot Builder Nuget Package:

Verify your application Microsoft.Bot.Builder nuget package was installed under reference .if not , refer follow below steps

Right-click on the Bot project(DevEnvExeBot) and select Manage NuGet Packages.

In the Browse tab, type "Microsoft.Bot.Builder" and click on Search

Locate the Microsoft.Bot.Builder package in the list of search results, and click the Update button for that package or Uninstall and Install the package .



Update Code:

The Default application added simple conde snipper, no need to change anything. if you want to test your custom message, you can change like below.

You can find messagereceiveAsync method from Dialogs / RootDialog.cs file.

In this method activity.Text will return user text input so you can reply message based input text .

private async Task MessageReceivedAsync(IDialogContext context, IAwaitable<object> result)
{
var activity = await result as Activity;
// calculate something for us to return
int length = (activity.Text ?? string.Empty).Length;
// return our reply to the user
//test
if (activity.Text.Contains("technology"))
{
await context.PostAsync("Refer C# corner website for tecnology http://www.c-sharpcorner.com/");
}
else if (activity.Text.Contains("morning"))
{
await context.PostAsync("Hello !! Good Morning , Have a nice Day");
}
//test
else if (activity.Text.Contains("night"))
{
await context.PostAsync(" Good night and Sweetest Dreams with Bot Application ");
}
else if (activity.Text.Contains("date"))
{
await context.PostAsync(DateTime.Now.ToString());
}
else
{
await context.PostAsync($"You sent {activity.Text} which was {length} characters");
}
text.Wait(MessageReceivedAsync);
}

Install bot Emulator:

You will need to download and install the emulator for testing bot application .You can download bot emulator from https://docs.microsoft.com/en-us/bot-framework/debug-bots-emulator .


Run Bot Application:

The emulator is a desktop application that lets you test and debug your bot on localhost or remotely. Now, you can click on run the application in any browser

Test Application on Bot Emulator:

  • You can follow below steps for test bot application
  • Open Bot Emulator
  • Copy above localhost url and past it from emulator eg: http://localHost:3979
  • You can append the /api/message from above localhost url eg: http://localHost:3979/api/messages.
  • You won't need to specify Microsoft App ID and Microsoft App Password for localhost testing so click on Connect



Summary:

This article your learned about how to create Bot application using visual studio 2017.

If you have any questions/ feedback/ issues, please write in the comment box.

Introduction:

Azure Functions is a solution for easily running small pieces of code in the cloud. We can create, execute, and test our custom logic function without creating a VM or web applications and also without needing to install any software or infrastructure to run the function.

In this article, you will learn about create, test, debug and deploy azure functions using Visual Studio 2017. Azure Functions tools are available as part of the Azure development workload in Visual Studio 2017 version 15.3, or a later version.


Prerequisites:

Download and Install Visual 2017 version 15.3 .

If you already Installed Visual Studio 2017, Update Visual Studio from Extensions and updates

Open Visual Studio 2017 > Tools > Extensions and Updates > Select product Updates under the Products category and select Visual studio update 15.3 preview 7.0 version and click on update


Step 1: 

Create Azure Functions Project in Visual Studio 2017

Open Visual Studio 2017 Preview 15.3 > Select File >click on New Project (Ctrl +Shift +N) > Select on Visual C# >Click on Cloud > select Azure Functions, type a Name for your project, and click on OK


Step 2: 

Create New Function
Azure Functions Solution will generate like below with host.json and locl.settings.json file .



In Solution Explorer, right-click on your Azure function project and select Add > New Item. Select Azure Function and click Add.



Select HttpTrigger as Azure Function type, select Functions for Access Rights, and click Create. The function created is accessed by an HTTP request from any client.



After click on Ok, will generates a new class with a Static Run method, that is attributed with [FunctionName] attribute. The [FunctionName] attribute indicates that the method is the entry for an Azure Function

using System.Linq;
using System.Net;
using System.Net.Http;
using System.Threading.Tasks;
using Microsoft.Azure.WebJobs;
using Microsoft.Azure.WebJobs.Extensions.Http;
using Microsoft.Azure.WebJobs.Host;

namespace DevEnv_AzureFunctionsDemo
{
public static class DemoFunctions
{
[FunctionName("DemoFunctions")]
public static async Task<HttpResponseMessage> Run([HttpTrigger(AuthorizationLevel.Function, "get", "post", Route = null)]HttpRequestMessage req, TraceWriter log)
{
log.Info("C# HTTP trigger function processed a request.");
// parse query parameter
string name = req.GetQueryNameValuePairs()
.FirstOrDefault(q => string.Compare(q.Key, "name", true) == 0)
.Value;
// Get request body
dynamic data = await req.Content.ReadAsAsync<object>();
// Set name to query string or body data
name = name ?? data?.name;
return name == null
? req.CreateResponse(HttpStatusCode.BadRequest, "Please pass a name on the query string or in the request body")
: req.CreateResponse(HttpStatusCode.OK, "Hello " + name + "Welcome C# Corner ");
}
}
}

Step 3:

 Azure Functions Test:

You can Press F5 for run, test and debug your azure function, if prompted, accept the request from Visual Studio to download and install Azure Functions Core (CLI) tools. You may also need to enable a firewall exception so that the tools can handle HTTP requests.

Copy the Azure function local deploy url on runtime output window



Append the name parameter to the query string. Use an actual name for the <Enter a name here> placeholder.
https://<Local Host url> /api/<Your Function Name>? name=<Enter a name here>
Paste the URL into your browser, and you should get a response similar to the following.


If you are Function locally working as expected means, you can initiate to publish the project to Azure.

Step 4:

 Publish Project to Azure:

If you don't have an Azure subscription, create a free account before start deploy azure function.

In Solution Explorer, right-click the project and select Publish. Choose Create New and then click on Publish.



If you haven't already connected Visual Studio to your Azure account, click Add an Account and Provide the login details and connect

In the Create App Service dialog, provide Hosting settings as specified below



Click Create to create a function app in Azure with these settings. After the provisioning is complete, make a note of the Site URL value, which is the address of your function app in Azure.
Copy the base URL of the function app from the Publish profile page. Replace the localhost:port of the URL you used when testing the function locally with the new base URL. As before, make sure to append the query string with &name=<yourname> to this URL and execute the request.

Download Source Code :


Related Article:


Summary:

In this article, you learned about Azure Functions and how to create, test, publish Azure Functions using visual studio 2017.

If you have any questions/ feedback/ issues, please write in the comment box.
Visual Studio provide the many inbuilt templates for create a project, In this article we can create a new project template as per your client or product requirement and use the your project template on multiple developer. Visual Studio provides wizards to help you generate templates from projects that are open in the integrated development environment (IDE).

Project template will allow a developer to create new projects based on your exported project. The developer will be able to utilize your template for the new project dialog box


Create New Project:

Let start with creating a new Xamarin or any Project using visual studio 2017.

Open Run > Type Devenev.Exe and press Enter > New Project (Ctrl+Shift+N) -> Select any project Template and customize the project as per your requirement.


Click on Ok and edit the project until it is ready to be exported as a template.

Export Project Template:

In this article, we are export only one project. If you have more than one project in your current solution, I will explain in my next article.

Edit the project as per your requirement > Select the project menu from Visual Studio > Select on Export Template.


Choose template Type:

Choose the project template and select your project and click on Next


Export Template Wizard:

Fill out the template options as you want and click on Finish

Provide Template Name is Project template display name .

Provide Template Description is a detailed description about your template

Provide Icon Image and icon image will display near to the project Template name

Provide preview image and preview image will display near to describe.

Check the checkbox for auto import the template into visual studio or after export, will generate zip file and you can move the zip file to following location C:\Users\<username>\Documents\Visual Studio 2017\Templates\ProjectTemplates


Edit Template:

The file explorer should pop up with My Exported Templates where your newly exported project is packed into a .zip file.


You can extract the template and if you want to edit the template, edit form MyTemplate.vstemplate file .

<VSTemplate Version="3.0.0" xmlns="http://schemas.microsoft.com/developer/vstemplate/2005" Type="Project">
<TemplateData>
<Name>csharpcornerProjectTemplate</Name>
<Description>csharpcornerProjectTemplate</Description>
<ProjectType>CSharp</ProjectType>
<ProjectSubType>
</ProjectSubType>
<SortOrder>1000</SortOrder>
<CreateNewFolder>true</CreateNewFolder>
<DefaultName>csharpcornerProjectTemplate</DefaultName>
<ProvideDefaultName>true</ProvideDefaultName>
<LocationField>Enabled</LocationField>
<EnableLocationBrowseButton>true</EnableLocationBrowseButton>
<Icon>__TemplateIcon.png</Icon>
<PreviewImage>__PreviewImage.png</PreviewImage>
</TemplateData>
<TemplateContent>
<Project TargetFileName="csharpcornerProjectTemplate.csproj" File="csharpcornerProjectTemplate.csproj" ReplaceParameters="true">
<ProjectItem ReplaceParameters="true" TargetFileName="App.xaml">App.xaml</ProjectItem>
<ProjectItem ReplaceParameters="true" TargetFileName="App.xaml.cs">App.xaml.cs</ProjectItem>
<Folder Name="Assets" TargetFolderName="Assets">
<ProjectItem ReplaceParameters="false" TargetFileName="LockScreenLogo.scale-200.png">LockScreenLogo.scale-200.png</ProjectItem>
<ProjectItem ReplaceParameters="false" TargetFileName="SplashScreen.scale-200.png">SplashScreen.scale-200.png</ProjectItem>
<ProjectItem ReplaceParameters="false" TargetFileName="Square150x150Logo.scale-200.png">Square150x150Logo.scale-200.png</ProjectItem>
<ProjectItem ReplaceParameters="false" TargetFileName="Square44x44Logo.scale-200.png">Square44x44Logo.scale-200.png</ProjectItem>
<ProjectItem ReplaceParameters="false" TargetFileName="Square44x44Logo.targetsize-24_altform-unplated.png">Square44x44Logo.targetsize-24_altform-unplated.png</ProjectItem>
<ProjectItem ReplaceParameters="false" TargetFileName="StoreLogo.png">StoreLogo.png</ProjectItem>
<ProjectItem ReplaceParameters="false" TargetFileName="Wide310x150Logo.scale-200.png">Wide310x150Logo.scale-200.png</ProjectItem>
</Folder>
<ProjectItem ReplaceParameters="false" TargetFileName="csharpcornerProjectTemplate_TemporaryKey.pfx">csharpcornerProjectTemplate_TemporaryKey.pfx</ProjectItem>
<ProjectItem ReplaceParameters="true" TargetFileName="MainPage.xaml">MainPage.xaml</ProjectItem>
<ProjectItem ReplaceParameters="true" TargetFileName="MainPage.xaml.cs">MainPage.xaml.cs</ProjectItem>
<ProjectItem ReplaceParameters="false" TargetFileName="Package.appxmanifest">Package.appxmanifest</ProjectItem>
<Folder Name="Properties" TargetFolderName="Properties">
<ProjectItem ReplaceParameters="true" TargetFileName="AssemblyInfo.cs">AssemblyInfo.cs</ProjectItem>
<ProjectItem ReplaceParameters="true" TargetFileName="Default.rd.xml">Default.rd.xml</ProjectItem>
</Folder>
</Project>
</TemplateContent>
</VSTemplate>

Custom Visual Studio template:

You can now restart Visual studio and go to New Project in Visual Studio and find the Project template like below

After click on Ok , project will automatically create new project with your default functionality .


Summary:

In this article, you learned how to create a project template using visual studio

If you have any questions/ feedback/ issues, please write in the comment box.











Featured Post

Improving C# Performance by Using AsSpan and Avoiding Substring

During development and everyday use, Substring is often the go-to choice for string manipulation. However, there are cases where Substring c...

MSDEVBUILD - English Channel

MSDEVBUILD - Tamil Channel

Popular Posts