Share via

Polymer App with WebAPI 2.0 for Beginners

  • Article

Prerequisites:

  • Basic knowledge of WebAPI
  • Basic knowledge of HTML5 and JavaScript

In this article, we will demonstrate a Basic app using Polymer framework which calls WebAPI 2.0 for fetching the data.

Configuring environment for Polymer application

Make sure latest version of NodeJS installed in the system. If you don’t have NodeJS then go to the site: https://nodejs.org/en/ and install the latest version first.

https://vs2015blog.files.wordpress.com/2016/06/1.png

After the installation finished, open the command prompt and check the following command: npm

 https://vs2015blog.files.wordpress.com/2016/06/2.png

Npm command should work in the command prompt and gives the usage of the command as the response. If this command does not work and gives the error "npm command not found", then set the environment variable in the system properties:

 https://vs2015blog.files.wordpress.com/2016/06/3.png  

And then check the same command. After configuring the Node in the system, run below command to install the latest bower: npm install -g bower

 https://vs2015blog.files.wordpress.com/2016/06/4.png

After successfully installing the bower component run the following command: npm install -g polymer-cli. This command installs the polymer framework in the system.

 https://vs2015blog.files.wordpress.com/2016/06/5.png

Now your system is ready to create the Polymer application.  

Creating The Polymer Application

For creating the Polymer application create a directory and move to that directory. By using these two commands: Mkdir PolyApp1 and then Cd PolyApp1. After this run this command to initialize the Polymer template selection: Polymer init. This command will prompt the selection of some templates:

 https://vs2015blog.files.wordpress.com/2016/06/16.png

With the down arrow keys select the app-drawer template and press enter. This will install the template in you specified directory. Then run this command: Polymer serve –open. After running this command your default browser will run the Polymer application:

 https://vs2015blog.files.wordpress.com/2016/06/6.png

To view the code you can select any editor and open the folder you have created. In this sample, I have created a folder named PolymerApp1. I prefer Brackets for editing the application. Your code will look like this:

 https://vs2015blog.files.wordpress.com/2016/06/7.png

Now your Polymer application is ready. Now we need to create a WebAPI application to generate the data.  

Creating WebAPI 2.0

To create a WebAPI, start Visual Studio and select a new project:

 https://vs2015blog.files.wordpress.com/2016/06/8.png

Then select an empty template with checked Web API :

 https://vs2015blog.files.wordpress.com/2016/06/9.png

Add the new class Product in Models and add the properties:

 https://vs2015blog.files.wordpress.com/2016/06/17.png

Add a ProductController class in Controllers and add the methods:

 https://vs2015blog.files.wordpress.com/2016/06/18.png

Build the project and run. Then check the API/Product to fetch all the products:

 https://vs2015blog.files.wordpress.com/2016/06/10.png

Now your WebAPI is successfully started and can be accessed via below url: http://localhost:26971/api/product. 26971 is a dynamic allocated port. In your case, it can be a different number. Now come to the command prompt which we have set for the Polymer application. And quit the current job by pressing Ctrl+c command:

 https://vs2015blog.files.wordpress.com/2016/06/11.png

This will ask for terminate the job Y/N. Give Y then it will quit the app.  

Interacting Polymer App with WebAPI

For Web API call we need to add the iron-ajax element in our Polymer application. For this, run the below command: bower install --save PolymerElements/iron-ajax. This command will install the iron-ajax element in your project directory.

 https://vs2015blog.files.wordpress.com/2016/06/12.png

After installing the Iron-Ajax element open the project editor and open my-view1.html file from src folder. Import the iron-ajax element by below line: <link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">. Add Iron-ajax to call the API: <iron-ajax auto url="http://localhost:26971/api/product" handle-as="json" on-response="tasksLoaded"></iron-ajax>

 https://vs2015blog.files.wordpress.com/2016/06/13.png

Add the dom-repeat template to display all the products: <template is="dom-repeat" items="{{todos}}"> Category: <span>{{item.Category}}</span> <br> Price: <span>{{item.Price}}</span> <br> Id: <span>{{item.Id}}</span> <br> <hr> </template> For Binding the response data add the below script: <script> Polymer({ is: "my-view1", properties: { todos: { type: Array, reflectToAttribute: true, notify: true } }, attached: function () { this.todos = []; }, tasksLoaded: function (data) {   this.todos = data.detail.response;   } }); </script> Your final html page should look like this:

 https://vs2015blog.files.wordpress.com/2016/06/19.png

Now run the project with the command: Polymer serve --open

 https://vs2015blog.files.wordpress.com/2016/06/14.png

This will launch the default browser with the Polymer application:

 https://vs2015blog.files.wordpress.com/2016/06/15.png

In this application, you can see all the products are displaying, which we are created in the WebAPI Application.

So, we have created a Polymer Application which interact WebAPI application created in Visual Studio 2015.