tag:blogger.com,1999:blog-22255606000310994952024-03-13T17:16:00.641-07:00Neel BhattAnonymoushttp://www.blogger.com/profile/00726819598609175944noreply@blogger.comBlogger3125tag:blogger.com,1999:blog-2225560600031099495.post-74762162627497228732018-01-08T23:35:00.000-08:002018-01-08T23:35:04.014-08:00Create Angular 5 application using .Net Core 2.0 Template in Visual Studio 2017<div dir="ltr" style="text-align: left;" trbidi="on">
<img alt="Untitled design" class=" size-full wp-image-3107 aligncenter" height="300" src="https://neelbhatt40.files.wordpress.com/2017/12/untitled-design.jpg" width="1200" /><br />
<strong>Angular 5</strong> has been announced recently and we already have a template added in the <strong>Visual Studio 2017</strong> with <strong>.Net Core 2.0</strong><br />
If you want to know more about <strong>Angular in .Net Core</strong> then my post may help you to get the basic which you can find <a href="https://neelbhatt40.wordpress.com/2017/10/04/angular-with-net-core-2-0/">here </a>and if you want to see how can we <strong>deploy</strong> the <strong>Angular applications on Azure</strong> then have a look at my post <a href="https://neelbhatt40.wordpress.com/2017/12/19/build-angular-app-with-net-core-2-0-templatevs-2017-deploy-on-azure-step-by-step-guide/">here</a>.<br />
In this post, we will see how to add <strong>Angular 5 template</strong> in your <strong>Visual Studio</strong> and create an <strong>Angular 5 application using .Net Core 2.0</strong> templates.<br />
<strong>Prerequisite:</strong><br />
<ul>
<li><strong>Visual studio 2017</strong> community edition, <a href="https://www.visualstudio.com/downloads/">download here</a></li>
<li><strong>.Net Core 2.0 SDK</strong> from <a href="https://www.microsoft.com/net/download/windows">here </a>(I have written a post to install SDK <a href="https://neelbhatt40.wordpress.com/2017/09/11/net-core-2-0-installation/">here</a>)</li>
<li><strong>Node.js</strong> Version 9 or above from <a href="https://nodejs.org/en/">here</a></li>
</ul>
<h3>
Add Angular 5 template</h3>
Once you have all these installed, open your Visual Studio 2017 -> Create New Project -> Go to Online tab and search with Angular5:<br />
<img alt="ang1" class="alignnone size-full wp-image-3093" height="680" src="https://neelbhatt40.files.wordpress.com/2017/12/ang1.png" width="1096" /><br />
Select the <strong>Angular5TemplateCore</strong> and click on Ok.<br />
Downloading of the template will be started once you click on Ok:<br />
<img alt="ang2" class="alignnone size-full wp-image-3094" height="676" src="https://neelbhatt40.files.wordpress.com/2017/12/ang2.png" width="960" /><br />
Once the download gets completed, an installer will be opened which will install the template in Visual Studio 2017.<br />
<strong>Note - Close all running instances of the Visual Studio to have a smooth installation of the template.</strong><br />
The wizard will ask you to click on Modify:<br />
<img alt="ang3" class="alignnone size-full wp-image-3095" height="422" src="https://neelbhatt40.files.wordpress.com/2017/12/ang3.png" width="559" /><br />
Once you click on Modify, the installation will be completed:<br />
<img alt="ang4" class="alignnone size-full wp-image-3096" height="420" src="https://neelbhatt40.files.wordpress.com/2017/12/ang4.png" width="564" /><br />
<h3>
Create Angular 5 application</h3>
Once you have the template installed, open your Visual Studio 2017 -> Create New Project -> Select Installed tab and search with Angular5, now we would be able to see Angular5TF template:<br />
<img alt="ang5" class="alignnone size-full wp-image-3098" height="680" src="https://neelbhatt40.files.wordpress.com/2017/12/ang5.png" width="934" /><br />
<strong>Click on OK,</strong> <strong>Visual Studio will create a well-structured Angular 5 application for you:</strong><br />
<img alt="ang6" class="alignnone size-full wp-image-3099" height="646" src="https://neelbhatt40.files.wordpress.com/2017/12/ang6.png" width="374" /><br />
Now let us make sure that the application is Angular 5 application.<br />
For that open <strong>package.json</strong>, here you will be able to see <strong>angular version 5.0.0</strong> and <strong>Angular CLI version 1.5</strong>:<br />
<img alt="ang7" class="alignnone size-full wp-image-3100" height="809" src="https://neelbhatt40.files.wordpress.com/2017/12/ang7.png" width="531" /><br />
Next step is to install <strong>WebPack</strong>.<br />
<h3>
What is WebPack?</h3>
<strong>WebPack</strong> is a <strong>module bundler</strong>.<br />
WebPack is used to determine the dependencies, run transformations and create bundles that you can provide to your browser.<br />
<img alt="ang8" class="alignnone size-full wp-image-3101" height="359" src="https://neelbhatt40.files.wordpress.com/2017/12/ang8.jpg" width="638" /><br />
It is a good practice to add WebPack to the starting point that is why we will add below lines in package.json file if it is not there already:<br />
<strong>"</strong>postinstall<strong>": "</strong>webpack<strong> --config webpack.config.vendor.js"</strong><br />
<img alt="ang9" class="alignnone size-full wp-image-3102" height="403" src="https://neelbhatt40.files.wordpress.com/2017/12/ang9.png" width="626" /><br />
You may get below error if you have not added WebPack details in the package.json file:<br />
<h1 class="gh-header-title">
<span class="js-issue-title">Cannot find module './wwwroot/dist/vendor-manifest.json' </span></h1>
To avoid this error, we need to run above WebPack command first. That is why we have added the command to the package.json file.<br />
After adding above line, build the project. First time when you build the solution, it would take several minutes as it installs some dependencies.<br />
<h3>
Run the Angular application</h3>
Now click on IISExpress to run the application.<br />
After 5-10 seconds, the application might have compilation error as below in Vendor.js file:<br />
<blockquote>
An exception has been encountered. This may be caused by an extension.<br />
You can get more information by examining the file 'C:\Users\neel\AppData\Roaming\Microsoft\VisualStudio\15.0_b495e641\ActivityLog.xml'.</blockquote>
<img alt="ang10" class="alignnone size-full wp-image-3103" height="346" src="https://neelbhatt40.files.wordpress.com/2017/12/ang10.png" width="1185" /><br />
This error comes because IE does not support several functions used in the project. You need to import some libraries to resolve this error. Have a look <a href="http://kosmisch.net/Blog/DotNetEssential/Archive/2017/5/20/issue-unable-to-get-property-apply-of-undefined-or-null-reference-occurred-in-angular-4-vs2017-153-aspnet-core-20.html">here </a>to resolve the error.<br />
Once the error is resolved, the application will run properly:<br />
<img alt="ang11" class="alignnone size-full wp-image-3104" height="603" src="https://neelbhatt40.files.wordpress.com/2017/12/ang11.png" width="1054" /><br />
Hope it helps.<br />
<br />
<br />
</div>
Anonymoushttp://www.blogger.com/profile/00726819598609175944noreply@blogger.com0tag:blogger.com,1999:blog-2225560600031099495.post-58169807624381143982016-01-01T04:00:00.002-08:002016-01-01T04:00:55.982-08:00Hello World with MVC 6<div dir="ltr" style="text-align: left;" trbidi="on">
In this post we will see how to write your first application using MVC 6 and Visual studio 2015.<br />
We will go step by step.<br />
<br />
First of all let us add simple MVC 6 project.<br />
<br />
For that Open your Visual Studio 2015 and Create new project as shown below:<br />
<a href="https://neelbhatt40.files.wordpress.com/2015/08/new-project-mvc6.png"><img alt="new-project-mvc6" class="wp-image-213 aligncenter" height="433" src="https://neelbhatt40.files.wordpress.com/2015/08/new-project-mvc6.png?w=622&h=433" width="622" /></a><br />
and then select empty <span class="skimlinks-unlinked">Asp.Net</span> 5 preview.<br />
<a href="https://neelbhatt40.files.wordpress.com/2015/08/new-project-select-empty-aspnet5-template.png"><img alt="new-project-select-empty-aspnet5-template" class="wp-image-214 aligncenter" height="451" src="https://neelbhatt40.files.wordpress.com/2015/08/new-project-select-empty-aspnet5-template.png?w=622&h=451" width="622" /></a><br />
<br />
You can see the project structure like this:<br />
<br />
<a href="https://neelbhatt40.files.wordpress.com/2015/08/aspnet5_beginning_demo_2.jpg"><img alt="aspnet5_beginning_demo_2" class="wp-image-216 aligncenter" height="327" src="https://neelbhatt40.files.wordpress.com/2015/08/aspnet5_beginning_demo_2.jpg?w=323&h=327" width="323" /></a><br />
<strong><br /></strong>
<strong>What is new in folder structure?</strong><br />
<ul>
<li><strong>src folder</strong> – contains all projects that contain source code that make up your application.</li>
<li><strong>global.json</strong> – this is where you put solution-level settings, and allows you to do project-to-project references.</li>
<li><strong>wwwroot</strong> – is a folder in which all your static
files will be placed. These are the assets that you web app will serve
directly to the clients including HTML, CSS, Image and JavaScript files.</li>
<li><strong>project.json</strong> – contains project settings</li>
<li><strong>startup.cs</strong> – this is where you put your startup and configuration code.</li>
</ul>
<strong><br /></strong>
<strong>But wait! Is it MVC?</strong><br />
<strong><br /></strong>
No it is not.<br />
<br />
Our next step is to configure the site to use MVC. This requires changes to the <span class="skimlinks-unlinked">project.json</span> file and <span class="skimlinks-unlinked">Startup.cs</span> file. First, open <span class="skimlinks-unlinked">project.json</span> and add “<span class="skimlinks-unlinked">Microsoft.AspNet.Mvc</span>” to the “dependencies” property:<br />
<br />
So our <span class="skimlinks-unlinked">project.json</span> would be like this:<br />
<pre>{
"dependencies": {
"<span class="skimlinks-unlinked">Microsoft.AspNet.Mvc</span>": "6.0.0-*",
"<span class="skimlinks-unlinked">Nowin.vNext</span>": "1.0.0-*",
"Kestrel": "1.0.0-*"
},
"commands": {
"web": "Microsoft.AspNet.Hosting --server <span class="skimlinks-unlinked">Nowin.vNext</span>",
"web-kestrel": "Microsoft.AspNet.Hosting --server Kestrel"
}
}</pre>
<pre>
</pre>
<strong>Ok, so now it is Mvc project right?</strong><br />
<b><br /></b>
Wait, we forgot to add configurations.<br />
<br />
For that open <span class="skimlinks-unlinked">Startup.cs</span> and modify it as follows:<br />
<br />
<pre>using System;
using <span class="skimlinks-unlinked">Microsoft.AspNet.Mvc</span>;
using Microsoft.AspNet.Builder;
using Microsoft.Framework.DependencyInjection;
public class Startup
{
public void Configure(IApplicationBuilder app)
{
app.UseServices(services =>
{
services.AddMvc();
});
<span class="skimlinks-unlinked">app.Use(async</span> (context, next) =>
{
Console.WriteLine(<span class="skimlinks-unlinked">context.Request.Path</span>);
try
{
await next();
}
catch(Exception ex)
{
Console.WriteLine(ex);
}
});
app.UseMvc();
}
}</pre>
<pre>
</pre>
This code enables MVC and defines a route.<br />
<br />
<strong>Voila! Yes now it is an Mvc Project.</strong><br />
<strong><br /></strong>
Now let us add controlls and views.<br />
<br />
Oh! Well we need to follow some steps to add controlers and views
because we need to add simple class and make it a controller as below:<br />
<ul>
<li>Add a Controllers folder</li>
<li>Add an MVC Controller called <span class="skimlinks-unlinked">HomeController.cs</span> class to the Controllers folder</li>
<li>Add a Views folder</li>
<li>Add Home folder in the Views folder</li>
<li>Add an Index.cshtml MVC View Page to the Views/Home folder.</li>
</ul>
The project structure should be as shown:<br />
<a href="https://neelbhatt40.files.wordpress.com/2015/08/project-structure-controller-view.png"><img alt="project-structure-controller-view" class="wp-image-219 aligncenter" height="417" src="https://neelbhatt40.files.wordpress.com/2015/08/project-structure-controller-view.png?w=285&h=417" width="285" /></a><br />
<br />
Now, Edit <strong>Index.cshtml</strong> as below:<br />
<br />
<pre><h1>Hello from Razor!!<h1></pre>
<pre>
</pre>
And in <strong>HomeController</strong>:<br />
<br />
<pre>public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
}</pre>
<pre>
</pre>
Run the application – you should see Hello World output in your browser.<br />
<br />
<a href="https://neelbhatt40.files.wordpress.com/2015/08/hello-world.png"><img alt="hello-world" class="wp-image-221 aligncenter" height="328" src="https://neelbhatt40.files.wordpress.com/2015/08/hello-world.png?w=497&h=328" width="497" /></a><br />
<br />
Congratulations for your first MVC 6 project!<br />
<br />
<br />
Stay tuned for more!</div>
Anonymoushttp://www.blogger.com/profile/00726819598609175944noreply@blogger.com0tag:blogger.com,1999:blog-2225560600031099495.post-69242401929375400812015-12-30T05:32:00.002-08:002015-12-30T05:32:34.280-08:00WebHooks in Asp.Net : A Visual Studio Extension<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="background-color: white; border: 0px; box-sizing: border-box; color: #686868; font-family: 'Open Sans', sans-serif; font-size: 16px; line-height: 24px; margin-bottom: 24px; outline: 0px; padding: 0px; vertical-align: baseline;">
Before couple of weeks Asp.Net team has announced to support Web Hooks with Visual Studio.</div>
<div style="background-color: white; border: 0px; box-sizing: border-box; color: #686868; font-family: 'Open Sans', sans-serif; font-size: 16px; line-height: 24px; margin-bottom: 24px; outline: 0px; padding: 0px; vertical-align: baseline;">
<strong style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">First of all let us see What is WebHooks?</strong></div>
<div style="background-color: white; border: 0px; box-sizing: border-box; color: #686868; font-family: 'Open Sans', sans-serif; font-size: 16px; line-height: 24px; margin-bottom: 24px; outline: 0px; padding: 0px; vertical-align: baseline;">
<img alt="" class="aligncenter" src="https://blog.pusher.com/wp-content/uploads/2012/11/webhooks.png" style="box-sizing: border-box; clear: both; display: block; height: auto; margin: 0px auto; max-width: 100%;" /><br style="box-sizing: border-box;" />A <strong style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">WebHooks </strong>in web development is a method of augmenting or altering the behavior of a web page, or web application, with custom callbacks. These callbacks may be maintained, modified, and managed by third-party users and developers who may not necessarily be affiliated with the originating website or application.</div>
<div style="background-color: white; border: 0px; box-sizing: border-box; color: #686868; font-family: 'Open Sans', sans-serif; font-size: 16px; line-height: 24px; margin-bottom: 24px; outline: 0px; padding: 0px; vertical-align: baseline;">
In simple words WebHooks is a HTTP callback(user-defined HTTP Callback) which providing a simple pub/sub model for wiring together Web APIs and SaaS services.</div>
<div style="background-color: white; border: 0px; box-sizing: border-box; color: #686868; font-family: 'Open Sans', sans-serif; font-size: 16px; line-height: 24px; margin-bottom: 24px; outline: 0px; padding: 0px; vertical-align: baseline;">
<strong style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Ok, above explanation is a kind of theoretical, can you tell some real time example?</strong></div>
<div style="background-color: white; border: 0px; box-sizing: border-box; color: #686868; font-family: 'Open Sans', sans-serif; font-size: 16px; line-height: 24px; margin-bottom: 24px; outline: 0px; padding: 0px; vertical-align: baseline;">
Suppose you have a company account in Instagram! Now a new photo is tagged with tags of your choosing and you want to do some instant event like saying “Thank you!” or to answer if someone has asked anything or deletion of comments in case of some spamming!</div>
<div style="background-color: white; border: 0px; box-sizing: border-box; color: #686868; font-family: 'Open Sans', sans-serif; font-size: 16px; line-height: 24px; margin-bottom: 24px; outline: 0px; padding: 0px; vertical-align: baseline;">
WebHooks does it for you!</div>
<div style="background-color: white; border: 0px; box-sizing: border-box; color: #686868; font-family: 'Open Sans', sans-serif; font-size: 16px; line-height: 24px; margin-bottom: 24px; outline: 0px; padding: 0px; vertical-align: baseline;">
<strong style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">That is awesome! How to get WebHooks in Asp .Net?</strong></div>
<div style="background-color: white; border: 0px; box-sizing: border-box; color: #686868; font-family: 'Open Sans', sans-serif; font-size: 16px; line-height: 24px; margin-bottom: 24px; outline: 0px; padding: 0px; vertical-align: baseline;">
You can install the extension directly in Visual Studio using the Tools -> “Extensions and Updates” dialog, as shown below. Simply search for “WebHooks” and you will see below screen:</div>
<div style="background-color: white; border: 0px; box-sizing: border-box; color: #686868; font-family: 'Open Sans', sans-serif; font-size: 16px; line-height: 24px; margin-bottom: 24px; outline: 0px; padding: 0px; vertical-align: baseline;">
<img alt="image" class="aligncenter" src="https://i1.wp.com/blogs.msdn.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-00-63-56-metablogapi/6646.image_5F00_thumb_5F00_76D09545.png" style="box-sizing: border-box; clear: both; display: block; height: auto; margin: 0px auto; max-width: 100%;" /></div>
<div style="background-color: white; border: 0px; box-sizing: border-box; color: #686868; font-family: 'Open Sans', sans-serif; font-size: 16px; line-height: 24px; margin-bottom: 24px; outline: 0px; padding: 0px; vertical-align: baseline;">
After getting this Visual Studio extension you will see some wizard as shown below:</div>
<div style="background-color: white; border: 0px; box-sizing: border-box; color: #686868; font-family: 'Open Sans', sans-serif; font-size: 16px; line-height: 24px; margin-bottom: 24px; outline: 0px; padding: 0px; vertical-align: baseline;">
<img alt="image" class="aligncenter" src="https://i1.wp.com/blogs.msdn.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-00-63-56-metablogapi/0574.image_5F00_thumb_5F00_26F42322.png" style="box-sizing: border-box; clear: both; display: block; height: auto; margin: 0px auto; max-width: 100%;" /></div>
<div style="background-color: white; border: 0px; box-sizing: border-box; color: #686868; font-family: 'Open Sans', sans-serif; font-size: 16px; line-height: 24px; margin-bottom: 24px; outline: 0px; padding: 0px; vertical-align: baseline;">
The above wizard is used to select which client you want to use.</div>
<div style="background-color: white; border: 0px; box-sizing: border-box; color: #686868; font-family: 'Open Sans', sans-serif; font-size: 16px; line-height: 24px; margin-bottom: 24px; outline: 0px; padding: 0px; vertical-align: baseline;">
<img alt="image" class="aligncenter" src="https://i0.wp.com/blogs.msdn.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-00-63-56-metablogapi/5773.image_5F00_thumb_5F00_0981D216.png" style="box-sizing: border-box; clear: both; display: block; height: auto; margin: 0px auto; max-width: 100%;" /></div>
<div style="background-color: white; border: 0px; box-sizing: border-box; color: #686868; font-family: 'Open Sans', sans-serif; font-size: 16px; line-height: 24px; margin-bottom: 24px; outline: 0px; padding: 0px; vertical-align: baseline;">
Above wizard is used to enter secret number of client. It captures the secrets for each of them individually.</div>
<div style="background-color: white; border: 0px; box-sizing: border-box; color: #686868; font-family: 'Open Sans', sans-serif; font-size: 16px; line-height: 24px; margin-bottom: 24px; outline: 0px; padding: 0px; vertical-align: baseline;">
<strong style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Now Let us go step by step with the example of Instagram I explained above. Let us code it out!!</strong></div>
<div style="background-color: white; border: 0px; box-sizing: border-box; color: #686868; font-family: 'Open Sans', sans-serif; font-size: 16px; line-height: 24px; margin-bottom: 24px; outline: 0px; padding: 0px; vertical-align: baseline;">
We will take Instagram sample in which we will connect WebHooks to get the notification generated in Instagram account.</div>
<div class="paragraph" style="background-color: white; border: 0px; box-sizing: border-box; color: #686868; font-family: 'Open Sans', sans-serif; font-size: 16px; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<div style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: inherit; margin-bottom: 24px; outline: 0px; padding: 0px; vertical-align: baseline;">
<a href="https://instagram.com/developer/realtime/" style="border-bottom-color: rgb(226, 226, 226); border-bottom-style: solid; border-width: 0px 0px 1px; box-sizing: border-box; color: #83c2bc; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; transition: all 250ms ease-in-out; vertical-align: baseline;">Instagram WebHooks</a> support four kinds of subscriptions:</div>
</div>
<div class="paragraph" style="background-color: white; border: 0px; box-sizing: border-box; color: #686868; font-family: 'Open Sans', sans-serif; font-size: 16px; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<ul style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: inherit; list-style: square inside; margin: 0px 0px 24px; outline: 0px; padding: 0px; vertical-align: baseline;">
<li style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><strong style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Users</strong>: receive notifications when users registered with your application post new photos.</li>
<li style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><strong style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Tags</strong>: receive notifications when a new photo is tagged with specific tags.</li>
<li style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><strong style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Locations</strong>: receive notifications when new photos are posted and tagged with a specific location.</li>
<li style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><strong style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Geographies</strong>: receive notifications when new photos are posted in a given geo location defined by a center point and radius.</li>
</ul>
</div>
<div style="background-color: white; border: 0px; box-sizing: border-box; color: #686868; font-family: 'Open Sans', sans-serif; font-size: 16px; line-height: 24px; margin-bottom: 24px; outline: 0px; padding: 0px; vertical-align: baseline;">
First of all get secret number for your Instagram account as shown below:</div>
<div style="background-color: white; border: 0px; box-sizing: border-box; color: #686868; font-family: 'Open Sans', sans-serif; font-size: 16px; line-height: 24px; margin-bottom: 24px; outline: 0px; padding: 0px; vertical-align: baseline;">
<a href="https://neelbhatt40.files.wordpress.com/2015/10/2474-instagramcreateclient_08dd1a9e.png" style="border-bottom-color: rgb(226, 226, 226); border-bottom-style: solid; border-width: 0px 0px 1px; box-sizing: border-box; color: #83c2bc; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; transition: all 250ms ease-in-out; vertical-align: baseline;"><img alt="2474.InstagramCreateClient_08DD1A9E" class="wp-image-333 size-large aligncenter" src="https://neelbhatt40.files.wordpress.com/2015/10/2474-instagramcreateclient_08dd1a9e.png?w=700&h=312" style="border: 0px; box-sizing: border-box; clear: both; display: block; height: auto; margin: 0px auto; max-width: 100%; vertical-align: middle;" /></a></div>
<div style="background-color: white; border: 0px; box-sizing: border-box; color: #686868; font-family: 'Open Sans', sans-serif; font-size: 16px; line-height: 24px; margin-bottom: 24px; outline: 0px; padding: 0px; vertical-align: baseline;">
which will be stored in your web.config file as below:</div>
<pre style="background: rgba(0, 0, 0, 0.027451); border: 0px; box-sizing: border-box; color: #686868; font-family: 'Source Code Pro', monospace; font-size: 16px; line-height: 24px; margin-bottom: 24px; max-width: 100%; outline: 0px; overflow: auto; padding: 24px; vertical-align: baseline; word-wrap: normal;"><appSettings>
<span style="background-color: white; border: 0px; box-sizing: border-box; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> <add key="MS_WebHookReceiverSecret_InstagramId" value="Instagram Client ID" />
</span><span style="background-color: white; border: 0px; box-sizing: border-box; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> <add key="MS_WebHookReceiverSecret_Instagram" value="Instagram Client Secret" />
</span></appSettings></pre>
<div style="background-color: white; border: 0px; box-sizing: border-box; color: #686868; font-family: 'Open Sans', sans-serif; font-size: 16px; line-height: 24px; margin-bottom: 24px; outline: 0px; padding: 0px; vertical-align: baseline;">
After installation you will see a <strong style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">WebHookConfig.cs</strong> class in your App_Code folder which would be created automatically. It is used to initialize the process as shown below:</div>
<pre style="background: rgba(0, 0, 0, 0.027451); border: 0px; box-sizing: border-box; color: #686868; font-family: 'Source Code Pro', monospace; font-size: 16px; line-height: 24px; margin-bottom: 24px; max-width: 100%; outline: 0px; overflow: auto; padding: 24px; vertical-align: baseline; word-wrap: normal;">namespace WebHookReceivers
{
public static class WebHookConfig
{
public static void Register(HttpConfiguration config)
{
// Load receivers
config.InitializeReceiveInstagramWebHooks();
}
}
}</pre>
<div style="background-color: white; border: 0px; box-sizing: border-box; color: #686868; font-family: 'Open Sans', sans-serif; font-size: 16px; line-height: 24px; margin-bottom: 24px; outline: 0px; padding: 0px; vertical-align: baseline;">
Once you select the receiver as shown in figure, a class is added to the project that inherits from the <strong style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">WebHookHandler</strong> class, the base class for all WebHook handler customization you intend on doing.</div>
<div style="background-color: white; border: 0px; box-sizing: border-box; color: #686868; font-family: 'Open Sans', sans-serif; font-size: 16px; line-height: 24px; margin-bottom: 24px; outline: 0px; padding: 0px; vertical-align: baseline;">
Each receiver is identified by name, with the name being used in the route wire-up, so each generated handler checks to see if it’s the one who should be handling the incoming requests.</div>
<div style="background-color: white; border: 0px; box-sizing: border-box; color: #686868; font-family: 'Open Sans', sans-serif; font-size: 16px; line-height: 24px; margin-bottom: 24px; outline: 0px; padding: 0px; vertical-align: baseline;">
Instagram generated handler is below:</div>
<pre style="background: rgba(0, 0, 0, 0.027451); border: 0px; box-sizing: border-box; color: #686868; font-family: 'Source Code Pro', monospace; font-size: 16px; line-height: 24px; margin-bottom: 24px; max-width: 100%; outline: 0px; overflow: auto; padding: 24px; vertical-align: baseline; word-wrap: normal;"><code class="csharp keyword" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; box-sizing: border-box; font-family: 'Source Code Pro', monospace; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px 0.25em; vertical-align: baseline;">public</code> <code class="csharp keyword" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; box-sizing: border-box; font-family: 'Source Code Pro', monospace; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px 0.25em; vertical-align: baseline;">class</code> InstagramWebHook<code class="csharp plain" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; box-sizing: border-box; font-family: 'Source Code Pro', monospace; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px 0.25em; vertical-align: baseline;">Handler : WebHookHandler
</code><code class="csharp plain" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; box-sizing: border-box; font-family: 'Source Code Pro', monospace; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px 0.25em; vertical-align: baseline;">{
</code><code class="csharp spaces" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; box-sizing: border-box; font-family: 'Source Code Pro', monospace; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px 0.25em; vertical-align: baseline;"> </code><code class="csharp keyword" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; box-sizing: border-box; font-family: 'Source Code Pro', monospace; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px 0.25em; vertical-align: baseline;">public</code> <code class="csharp keyword" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; box-sizing: border-box; font-family: 'Source Code Pro', monospace; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px 0.25em; vertical-align: baseline;">override</code> <code class="csharp plain" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; box-sizing: border-box; font-family: 'Source Code Pro', monospace; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px 0.25em; vertical-align: baseline;">Task ExecuteAsync(</code><code class="csharp keyword" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; box-sizing: border-box; font-family: 'Source Code Pro', monospace; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px 0.25em; vertical-align: baseline;">string</code> <code class="csharp plain" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; box-sizing: border-box; font-family: 'Source Code Pro', monospace; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px 0.25em; vertical-align: baseline;">receiver, WebHookHandlerContext context)
</code><code class="csharp plain" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; box-sizing: border-box; font-family: 'Source Code Pro', monospace; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px 0.25em; vertical-align: baseline;"> {
</code><code class="csharp keyword" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; box-sizing: border-box; font-family: 'Source Code Pro', monospace; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px 0.25em; vertical-align: baseline;"> string</code> <code class="csharp plain" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; box-sizing: border-box; font-family: 'Source Code Pro', monospace; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px 0.25em; vertical-align: baseline;">action = context.Actions.First();
</code><code class="csharp spaces" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; box-sizing: border-box; font-family: 'Source Code Pro', monospace; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px 0.25em; vertical-align: baseline;"> </code><code class="csharp plain" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; box-sizing: border-box; font-family: 'Source Code Pro', monospace; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px 0.25em; vertical-align: baseline;">JObject data = context.GetDataOrDefault<JObject>();
</code><code class="csharp keyword" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; box-sizing: border-box; font-family: 'Source Code Pro', monospace; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px 0.25em; vertical-align: baseline;"> return</code> <code class="csharp plain" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; box-sizing: border-box; font-family: 'Source Code Pro', monospace; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px 0.25em; vertical-align: baseline;">Task.FromResult(</code><code class="csharp keyword" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; box-sizing: border-box; font-family: 'Source Code Pro', monospace; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px 0.25em; vertical-align: baseline;">true</code><code class="csharp plain" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; box-sizing: border-box; font-family: 'Source Code Pro', monospace; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px 0.25em; vertical-align: baseline;">);
</code><code class="csharp spaces" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; box-sizing: border-box; font-family: 'Source Code Pro', monospace; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px 0.25em; vertical-align: baseline;"> </code><code class="csharp plain" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; box-sizing: border-box; font-family: 'Source Code Pro', monospace; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px 0.25em; vertical-align: baseline;">}
</code><code class="csharp plain" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; box-sizing: border-box; font-family: 'Source Code Pro', monospace; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px 0.25em; vertical-align: baseline;">}
</code></pre>
<div style="background-color: white; border: 0px; box-sizing: border-box; color: #686868; font-family: 'Open Sans', sans-serif; font-size: 16px; line-height: 24px; margin-bottom: 24px; outline: 0px; padding: 0px; vertical-align: baseline;">
Now let us make some changes in above code as below:</div>
<pre style="background: rgba(0, 0, 0, 0.027451); border: 0px; box-sizing: border-box; color: #686868; font-family: 'Source Code Pro', monospace; font-size: 16px; line-height: 24px; margin-bottom: 24px; max-width: 100%; outline: 0px; overflow: auto; padding: 24px; vertical-align: baseline; word-wrap: normal;">public class InstagramWebHookHandler : WebHookHandler
{
public InstagramWebHookHandler()
{
this.Receiver = "instagram";
}
public override async Task ExecuteAsync(string generator, WebHookHandlerContext context)
{
// Get the WebHook client
InstagramWebHookClient client = Dependencies.Client;
// Convert the incoming data to a collection of InstagramNotifications
var instagramNotifications = context.GetDataOrDefault<IEnumerable<InstagramNotification>>();
foreach (var notification in instagramNotifications)
{
var entries = await client.GetRecentGeoMedia(context.Id, notification.ObjectId);
foreach (JToken entry in entries)
{
// Different sizes of images
var thumbnail = entry["images"]["thumbnail"].ToObject<InstagramMedia>();
}
}
}
}</pre>
<div style="background-color: white; border: 0px; box-sizing: border-box; color: #686868; font-family: 'Open Sans', sans-serif; font-size: 16px; line-height: 24px; margin-bottom: 24px; outline: 0px; padding: 0px; vertical-align: baseline;">
In the case above we extract information about different image resolutions (i.e. thumbnail here). However, the information provide by Instagram is huge and we can extract much other information.</div>
<div style="background-color: white; border: 0px; box-sizing: border-box; color: #686868; font-family: 'Open Sans', sans-serif; font-size: 16px; line-height: 24px; margin-bottom: 24px; outline: 0px; padding: 0px; vertical-align: baseline;">
Here we have used <strong style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">InstagramWebHookClient </strong>to retrieve additional data and then extract information about the images posted.</div>
<div style="background-color: white; border: 0px; box-sizing: border-box; color: #686868; font-family: 'Open Sans', sans-serif; font-size: 16px; line-height: 24px; margin-bottom: 24px; outline: 0px; padding: 0px; vertical-align: baseline;">
In above code it gets the notification generated in Instagram for you and you can do different code as per your requirement.</div>
<div style="background-color: white; border: 0px; box-sizing: border-box; color: #686868; font-family: 'Open Sans', sans-serif; font-size: 16px; line-height: 24px; margin-bottom: 24px; outline: 0px; padding: 0px; vertical-align: baseline;">
I will update if something would be updated by .Net team.</div>
<div style="background-color: white; border: 0px; box-sizing: border-box; color: #686868; font-family: 'Open Sans', sans-serif; font-size: 16px; line-height: 24px; margin-bottom: 24px; outline: 0px; padding: 0px; vertical-align: baseline;">
In my next post I will write demo code for<strong style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> <a href="https://neelbhatt40.wordpress.com/2015/10/16/github-webhooks-handler-using-asp-net/" style="border-bottom-color: rgb(226, 226, 226); border-bottom-style: solid; border-width: 0px 0px 1px; box-sizing: border-box; color: #83c2bc; font-family: inherit; font-style: inherit; font-weight: normal; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; transition: all 250ms ease-in-out; vertical-align: baseline;">Github handler of WebHooks.</a>(Post is available now)</strong></div>
<div style="background-color: white; border: 0px; box-sizing: border-box; color: #686868; font-family: 'Open Sans', sans-serif; font-size: 16px; line-height: 24px; margin-bottom: 24px; outline: 0px; padding: 0px; vertical-align: baseline;">
Stay tuned for more updates.</div>
</div>
Anonymoushttp://www.blogger.com/profile/00726819598609175944noreply@blogger.com0