Monthly Archives: July 2016

Using PostMan for REST APIs

Using PostMan for APIs:

PostMan is a tool for testing HTTP REST Services. It’s a tool similar to Fiddler but a lot easier to use. It doesn’t work like a sniffer for all the HTTP traffic for the system. It works like a simple HTTP client. It allows to send HTTP requests with a request body. It also supports analysis of the response.

It also allows creation of collections which can be rerun later for testing the same APIs.

PostMan Apps

There are two apps available for PostMan. For Mac developers, we can simply install Mac app. There is also an in-browser experience using its Chrome App. In order to install it as a Chrome App, we can simply search it in the web store. Just click Add to Chrome button.

PostMan - Add to Chrome

PostMan – Add to Chrome

This should make the app available in the Chrome Apps list as follows:

PostMan - In Chrome Apps

PostMan – In Chrome Apps

Even though it is available as a chrome App, it is opened as a separate app outside chrome window. This is similar to Chrome Remote Desktop app.

Postman app

Postman app

Let’s test the sample API we created using express. Just notice the simple request using the simple HTTP Uri and JSON response.

Screen Shot 2016-07-31 at 2.43.05 AM

Using NewMan with Build System

PostMan can also be integrated with continuous integration using its tool called NewMan.

NewMan - npm

NewMan – npm

More details about NewMan can be found here:

Screen Shot 2016-07-31 at 2.46.27 AM

Using Third party libraries in Angular2 with Angular CLI

Using Third party libraries in Angular2 with Angular CLI

Angular2 has a special module based architecture. For using third party libraries with Angular CLI we have to follow certain steps. In this post we are going to discuss the same in the Angular2 Cart application we created earlier. Here we will assume that we are using SystemJS modules.

Angular2 Cart – – – GitHub Repository

Our app looks like this now.

Angular2 Cart

Angular2 Cart

Let’s use bootstrap as an example. Here we are installing bootstrap as a npm package.

bootstrap npm install

bootstrap npm install

Here we are assuming that you are using SystemJS with Angular 2. We are updating system-config.ts file inside src folder. to add how the bootstrap module would be available to the whole application. This would be available inside vendor folder.

Now we need to make sure that it is copied to the vendor folder. After building, the build contents are available in dist folder. We must select what should be part of the Angular2 CLI build process. vendorNpmFiles are assumed to be available in node_modules folder. For our case, we are updating angular-cli-build.js as follows:

Let’s build it again using ng b Angular CLI command.

ng-build

ng-build

Now you can notice that the bootstrap folder has been copied to the vendor folder. It also follows the same hierarchy as source folder.

bootstrap-vendor

bootstrap-vendor

Let’s update index.html to use the bootstrap css style. We are using bootstrap’s container class for one of the div(s).

As the application is loaded in the browser the vendor modules are available in the vendor folder as in the build.

Screen Shot 2016-07-29 at 12.48.19 AM

And the bootstrap’s css class container has also been applied to the div.

Screen Shot 2016-07-29 at 12.47.44 AM

Code

You can download the code from my GitHub repository.

Angular2 Cart GitHub

Angular2 Cart GitHub

Using NodeJS and Express for Hosting HTTP Service

Using NodeJS and Express for Hosting HTTP Service

In this post we are going to create a simple HTTP service using node and express. The service provides the list of student. It can also provide the details of a student using id as input.

Let’s first start with a simple HTTP service using NodeJS and express.

In order to install express package, we have to define the dependencies in package.json as follows:

Now just running npm install should install all the dependencies (express).

express-install-npm

express-install-npm

Now let’s run the service:

node-app-run

node-app-run

But as we run the service, we get the following:

express-browser-service

express-browser-service

That means we need to add routes to our service. And that’s the reason we have used express module. Let’s change the service as follows to add the required routes:

Now we have the service working. Here are the requests and their responses:

Angular 2 CLI – An Introduction

Angular 2 CLI – An Introduction

We have seen before how yeoman allows us to write the apps faster by taking care of most of the scaffolding work [HTTP based Rest Service in Angular JS using Yeoman]. Angular-CLI is a similar feature of Angular 2 providing support of different parts of an angular app, giving more time to developers to focus on more important parts of the app without wasting any time in repetitive tasks.

In this post we are going to create a simpleton cart application using Angular CLI. The application would allow to list / add / edit and delete items in a shopping cart application.

Requirements for following along…

The application would use Angular CLI to create the application. The tutorial assumes that you have NodeJS installed and you have an updated version of npm. You can verify that from your terminal.

npm-node-version

npm-node-version

Installing Angular-CLI

The first step is to install Angular-cli itself. It is an npm package. Here we are creating a separate folder for our project. We are cd’ing into the folder. Then we are running the npm install for angular-cli. We are using -g switch as we want to install it globally so we could use the tool globally.

angularl-cli-install-fail

angularl-cli-install-fail

This is just failing because we are not running the terminal as admin. You can just use sudo -s for this purpose. You will need to provide admin password. Then you should easily be able to run the same command.

angularl-cli-install-successful

angularl-cli-install-successful

Creating Project

Angular-cli installs ng tool. This is the actual tool used to generate scaffolding for angular2 apps. In order to create a new project, we run it as follows:

But you might get another surprise, here is what happened to me.

angular2-new

angular2-new

Actually the problem is with npm itself. Just upgrading npm to the latest version should fix the issue.

npm latest

npm latest

Just make sure that you install angular-cli again. Just notice ember-cli and dependencies being installed.

angular-cli-update

angular-cli-update

Now let’s try to create our project again. You can see that it has completed successfully without any failures.

ng-new-project

ng-new-project

Running Server

You can run the project by simply running ng serve command on terminal. Here it has launched the app on port 4200.

ng-serve

ng-serve

Project Structure

Angular-cli has done the basic necessary scaffolding for us. Let’s open this in some editor. Here I have opened this in Visual Studio Code. There are different folders created. Let’s keep the discussion about these folders for a separate post later and let’s focus on app folder.

cart-vs-code

cart-vs-code

Here the main app component is displayed. You can notice @Component. It is a decorator to associate metadata to a component. Here templateUrl attaches an angular template, specifying how this component can be displayed. It also has a style sheet associated using styleUrls.

Our AppComponent has a title property with assigned value ‘app works’. This is used by template as follows:

Now you understand why ‘app works’ was displayed when we ran the project earlier. Let’s update the property to Angular2 Cart and the UI is updated as follows:

angular2-cart

angular2-cart

Component Hierarchy

Angular2 app is really a hierarchy of different components. We can add other components and add them as child components to our app component. Let’s add another component for our cart. Let’s name it cart.

ng-new-component

ng-new-component

You can notice that a separate folder is added with the same name as follows:

component-folder-added

component-folder-added

Now we need to add cart component to the main app component. Please notice that selector for new component is app-cart. We will be using this selector to add it to the template as follows:

But the app component really doesn’t know about this selector. It has to know what and how to display this selector. The what is the cart-component, and how should be specified by the cart-component itself, so the app-component shouldn’t really be worried about it.

Actually, all child components are added to the component metadata using directives specifier. All the tags in the template are checked with the components in the directives list to determine if the selector is for a particular component in the list.

Now we have cart-component as a child of main app-component. And the UI is updated as follows:

child-component

child-component

Adding Service

Adding an angular2 service is as simple as adding a component using angular-cli. Here we are adding a service to get us the list of items in the cart or adding an item to the cart. Let’s run the following to generate scaffolding for cart service.

ng-new-service

ng-new-service

Here the service is added to the main app folder. Since an app can have a number of services, you can be more creative for the folder structure of services.

service-folder

service-folder

Let’s update the service code as follows:

Here we have two methods. One is to get the list of items in the cart. The other is to add a single item to the cart.

And we also need to update the cart template as follows:

And the UI is updated. There are two elements pre-populated. And we have two items through the submit button as follows:

add-item-submit

add-item-submit