Author Archives: Muhammad

Simple Http Server with Templated Response in Go

In this post we are going to see how easy it is to host an Http Server in go (GoLang). As we discussed in the previous post we have to use specialized packages for any go app. In order to host an Http server, we need to use net/http package.

In the following code, we are using the package. The package provides methods to listen to Http requests. It also allows to define simple routes. Here we are just defining main route for the app.

Building and running the app is as easy as ever. Here we are building to create the executable. We are then simply running the executable.

Simple Http Server

The request is handled by SimpleIndexHandler method. It just respond with a simple message. It also add any sub-route specified in the request. Here we are just requesting the app. Since there are no sub-path, it just returns a hello message in the response.

go server index

If we do specify a sub-path, it is added to the response.

go server path

Serving HTML Response

Serving Html response is also very easy. Let’s add a simple Html file to the same folder. Let’s name it index.html.

http package provides ServerFile method. Here we can provide a file name with any necessary path information. It picks up the file and serve the html content of the file.

When we build and run the application again. The request to index sub-path is served with the contents of index.html.

Serving Html file

Templated Html Response

We can also serve Html response built from a template. The template does support variables passed, which is then used and formatted inside the template. Here we are defining a Student type. It has an Id (int) and Name (string) field.

We can use this type to build up our response. Here we have defined a new function to build up the response. Here we would be needing html/template package. The package provides necessary methods to parse the template, pass arguments and rendering a response.

This can be served up simply by using HandleFunc provided by http package.

And here is the response in the client browser when top-student route is requested.

templated html response

Using Template Files

We can also keep the template in a file. Here we are adding IndexTemplated.html file. The file assumes certain parameter with properties Id and Name.

The same html/template package provides functionality to load template from a list of files. We can then pass arguments to the template and then build up the rendered response. Here we are serving up the response using /top-student-from-file sub-path.

When we build and run it, the response is provided as follows:

templated response

GitHub Repository

https://github.com/msiddiqi/AlternateStack-GitApp

Setting Your Mac for Go Development (GoLang)

In this post we are going to see how we can setup your Mac machine for development using GoLang. Go is an open source programming language from Google, which is very efficient for writing platform independent, highly scalable and concurrent code. Let’s first download Go. You can download the installer which should provide the necessary tools for development using the language.

go installer download

The installer should also add go in your PATH. If it is successfully installed, you can verify it from the terminal. Just type go in your terminal.

go terminal

In order to check which version of go is installed, you can use go version command in the terminal.

go version

Setting $GOPATH

The Go installer just installs the necessary base for development but you need additional packages for developing a go application. They are separately downloaded. This requires GOPATH environment variable to be set. You can just create this bash_profile in your User folder.

touch .bash_profile

We update .bash_profile as follows:

Setting VSCode for Go Development

In order to develop Go applications in VSCode, we have to set it up first. Ideally, it should pick up the system’s settings, but it doesn’t. We need to update settings to specify the folder used to download packages.

go settings

Let’s update the settings.json with the following settings:

For debugging support, we are not done yet with Visual Studio Code. As we try to hit Debug, we get the following message:

go debug vscode

We can install this using Integrated Visual Studio Code terminal:

First Go App

Let’s write our first Go app. This is actually the skeleton of any Go App. This has a simple main function, which uses PrintLn function from fmt package to print a simple message to the console.

Go application can be built using go build command. It creates an executable in the same folder, which can be run directly. You can notice that the message written using fmt is printed on the console.

building go

GitHub Repository:

https://github.com/msiddiqi/AlternateStack-GitApp

Angular2 – Using Images, CSS and other assets

Angular2 – Using Images, CSS and other assets:

In this post, we are going to learn how we can use assets including image and CSS style in an angular 2 application. Let’s use the banner of our blog site as the image:

alternate-stack

In order to keep our example simple, we are using a very basic style setting the width and height of an image to a specific value.

All the assets in an angular 2 app are created in public folder. Here we have created two sub-folders; images and stylesheets. Both of these folders just have one component corresponding to their folder names.

image-styles

As we build the project using ng b command. All the constituents of the folder are copied directly to disk directory. Please notice stylesheets and images folder in the dist folder below.

dist-asssets

In order to use them, we can simply use relative path from dist folder. Here we are adding a reference for stylesheet app-styles.css.

And here we are adding image to our application. We are using the class as-banner which we defined above.

As we ng serve the app, the image is displayed with the style applied correctly.

GitHub Repository

Angular2- Environment Specific Configuration

Angular2 makes development and release workflows a lot easier than other javascript frameworks. One such ease is the ease of environment specific settings and configuration. In this post, we are going to see how we can keep environment specific configurations in an angular2 application developed using Angular CLI. We will be using the project we have been building so far. You can download all source code from GitHub.

In order to support environment configuration, Angular2 provides environment.ts file in the app folder. Here we can have all the configurations we want.

There are also environment specific configurations in config folder. Here we have two different files environment.dev.ts and environment.prod.ts for dev and prod environments respectively. In these configs, we can do environment specific overrides of our choice.

env configs

Of course, we can still build the project using ng’s build command.

(default) ng b

Building the project, generates the finalized environment.js file for a particular environment. By default, it uses dev environment.

envionrment.js

In order to use prod’s environment configuration file, we can just use –environment=prod. Running the build with just [ng build –prod] should also have the same effect.

(prod) ng build

We can verify that correct config values are generated. The difference is that they get generated in main.js file instead of environment.js file.

mainjs for env=prod

Using Environment Configs

And we can definitely use it in our template file.

Just make sure that you run it again with ng serve -prod.

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

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

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

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

Using NewMan with Build System

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

NewMan – npm

More details about NewMan can be found here:

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

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

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

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

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.

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

Code

You can download the code from my GitHub repository.

Angular2 Cart GitHub

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

Now let’s run the service:

node-app-run

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

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

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

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

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

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

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

npm latest

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

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

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

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

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

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

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

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

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

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

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

Developing C# Applications on Mac OS using VS Code

As we know we cannot run Visual Studio directly on Mac OS. So in order to develop applications targeting Microsoft .net framework, we need to rely on other tools including OmniSharp. Now we can also use Visual Studio Code to develop C# based applications.

Let’s first install Visual Studio Code. We can directly download OS compatible VS Code from the following link:

VSCode download

VSCode implements extensions based model. There are a number of extension available to develop applications targeting different platforms. Similarly, there is an extension available for C# development. The extension is provided by Microsoft.

Install C# extension

We can directly install the above extension from Visual Studio. Press Command + P and select option from the drop down. The extension provides support for syntax highlight for C# statements.

ext_install_csharp

In order to support complete debugging experience we need to install .net CLI tools. As soon as we install the above extension, it prompts for installation of .net CLI tool to support debugging.

.net cli tools

We can download .net CLI tools directly but there is a pre-requisite installation of open ssl using home brew package manager. If home brew is not installed on your machine, it can be downloaded directly using Terminal.

brew install

But before installing the CLI tools, we need to first add support for secure connection by installing open ssl. Let’s run the following commands in the terminal window.

Now you can download .net cli tools directly using the following link:

https://go.microsoft.com/fwlink/?LinkID=798400

As soon as it is downloaded, you can run the installation wizard. It is a step-by-step guide to installation. Please remember that you need to have admin rights for this installation. If installation is successful, you should see the following:

cli installation successful

The wizard also copies the tools in your PATH so you can run them directly through terminal. Here we have created a sample employeeApp using [dotnet new] command.

dotnet new

Here are the contents of the folder. It has a simple project.json file and Program.cs.

project.json

Yes, there is no csproj file for .net core based applications. This might change though as this is still Release Candidate. Here are the contents of project.json.

We can run it directly from the console using dotnet run command. This should compile and run the application.

dotnet run

Neo4j – An Introduction

A graph database allows data to be saved in terms of nodes and edges and their properties. This type of database suits the business cases where entities and their relationships defines the whole concept. They are faster to query too. In addition to storing data as nodes and relationships, they provide extra-ordinary query and visualization tool using non-sql query languages. So in that way, it can be regarded as a NoSQL database.

Neo4J is a graph analytics tool capable of analyzing extremely complex graph networks. The data stored as graphs can be queried using CYPHER.

Where to get Neo4J from?

Neo4J can be directly downloaded from neo4j.com.

Neo4J download

There are a number of releases available for different platforms. Since I am running it on Mac, I am getting a Mac version. After downloading the dmg file, we can simply drop it to the application folder to install it like regular Mac apps.

There is a free community edition available which I found very useful for my studies but there is also an enterprise edition available for business customers. There is also a free trial for the enterprise edition.

Running Neo4J

On windows platform, Neo4J can run as a console application. It can also run as a windows service. The web server runs on port 7474 by default.

After running the server, you can simply launch the default client. It is a browser based application which can just be launched by clicking the link available on the server window above.

Learning Cypher

A very good introduction to CYPHER syntax is available on neo4j’s website. Please refer to the following:

Importing Data to Neo4j

Let’s import some data. Here we have a simpleton comma separated file with data for an institute. It lists student and their course assignments.

Let’s use the following command to load data into Neo4j and hit execute.

If all data is loaded successfully, you should see the following view:

The data can be queried using match command in cypher. Here we are returning all students and courses with their relationships:

The result is provided both in text and visual format in different tabs. Here is how the data is provided in terms of nodes and their relationships.