Node Webkit powered Dashboard application

This post is part 2 of 7 in the series Node Webkit Apps
Tweet about this on TwitterShare on LinkedIn2Share on Google+0Share on Reddit0Buffer this pageFlattr the authorEmail this to someonePrint this page

Node Webkit Powered Dashboard app

In this post, we will be building a full fledged desktop application using node webkit and web technologies. We are going to build a dashboard app called myDashboard. The app will show the Weather report, Google Map, Flickr images and a Calendar. The final product would look like

Screen Shot 2014-07-20 at 3.47.12 pmScreen Shot 2014-07-20 at 3.46.14 pmScreen Shot 2014-07-20 at 3.48.13 pmScreen Shot 2014-07-20 at 3.48.33 pmScreen Shot 2014-07-20 at 3.47.55 pmYou can get the complete code here. The final installers are around 200MB, hence did not share the installer.

So, let us see how we can build this app.

Contents

Prerequisites

To build desktop apps, you need to have a general awareness on how web apps need to behave when on a desktop. This includes the menus, toolbars etc. You need to be also aware of the fact that internet is not always present and there might permissions issues to run the application.

You also need to have a good understanding of web technologies (HTML, CSS and JS), REST API, oAuth etc. Node webkit uses the power of Node js and Webkit engine to provide a platform to run Web apps driven by Nodejs on a desktop.

Before you continue, please go through Hello Node and Node Webkit – Build Desktop Apps with Node and Web Technologies.

Getting Started

As mentioned earlier, we are going to build a Dashboard application. The first thing we are going to do is analyse what we are going to show in the dashboard.

So, for this dashboard app, we are going to have a login and a register screen. We will also implement a lock screen for our dashboard app. On the main page, we are going to show a Weather report, a Google map and a few images from Flickr. Apart from these, we will also show a calendar.

We will let the user configure the location for the Weather as well the location where the map will be centered. We will also let the user provide the tags with which the Flickr search is made.

Now, we have an idea what we are going to do. It is up to you, if you want to design your application first or if you are lazy like me you will be searching for a Admin Dashboard template.

After a quick search. I found AdminLTE Dasboard and Control Panel Template which in my opinion is one of the best Free Admin templates out there. Kudos to Abdullah Almsaeed for open sourcing the template.

We will be consuming this template and optimizing a couple of things for desktop apps.

Begin Development

First, create a new folder named myDashboard. Next, create a new folder inside it named template. We will be dumping the template here and pick only the required components.

Download the template into the template folder and unzip it.

Next, inside myDashboard folder, download the node-webkit libs and unzip it. Rename the unzipped folder to nw and get rid of the node-webkit zip file.

Finally, create a new folder named development. This is where we do all the development.

The final folder structure would be Screen Shot 2014-07-20 at 5.57.44 pm

Now, open a new terminal/prompt inside the development folder. We will initialize a new node project. Run

npm init

and fill it up like

Screen Shot 2014-07-20 at 5.20.59 pm

This is the default node specific package.json. Now, we will be adding the dashboard app related configs. The final package.json would look like

Now, inside the development folder, create a new file named index.html. This will be our starter file and fill it up like

Now, we will run the app. We have 2 ways of running the app.

First way is to zip all the contents of development folder and launching it using the nw executable we have downloaded earlier. This is a very very very tedious process when the app starts to grow.

Second way is to configure sublime text to build the app for us (recommended). Check Debugging with Sublime Text 2 and 3 for more info.

Once this is configured, open index.html and navigate to tools and select node-webkit as the build system

Screen Shot 2014-07-20 at 5.31.35 pm

Now, to run the app tools > build or Ctrl + B or Command + B and you should see the app launch and the Hello World  message.

During development you can set  "toolbar": true to access the dev tools.

Continue Development

Now, we have set up the basic project. Let us add the required features. Before we do that, I would highly recommend going through the entire template again. This will give you an idea as what all features are already implemented and available to be directly consumed.

First up, we are going to implement is the registration and login feature. Before that, we will give a structure to the app. Inside development folder, create a new folder named assets. Inside assets create 4 folders named cssjs, img, fonts. 

Since I have already implemented the app, I know what all files we would be needing. So we will directly copy the files needed for the complete project.

JS folder : Copy

  • myDashboard/template/AdminLTE-master/js/bootstrap.min.js to myDashboard/development/assets/js/
  • myDashboard/template/AdminLTE-master/js/jquery-ui-1.10.3.min.js to myDashboard/development/assets/js/
  • myDashboard/template/AdminLTE-master/js/AdminLTE/app.js to myDashboard/development/assets/js/
  • myDashboard/template/AdminLTE-master/js/plugins/fullcalendar/fullcalendar.min.js to myDashboard/development/assets/js/
  • Download a copy of http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js to myDashboard/development/assets/js/

CSS folder : Copy

  • myDashboard/template/AdminLTE-master/css/AdminLTE.css to myDashboard/development/assets/css/
  • myDashboard/template/AdminLTE-master/css/bootstrap.min.css to myDashboard/development/assets/css/
  • myDashboard/template/AdminLTE-master/css/font-awesome.min.css to myDashboard/development/assets/css/
  • myDashboard/template/AdminLTE-master/css/ionicons.min.css to myDashboard/development/assets/css/
  • myDashboard/template/AdminLTE-master/css/fullcalendar/fullcalendar.css to myDashboard/development/assets/css/

Images folder : Copy

  • myDashboard/template/AdminLTE-master/img/avatar5.png to myDashboard/development/assets/img/
  • myDashboard/template/AdminLTE-master/img/blur-background09.jpg to myDashboard/development/assets/img/

Fonts folder : Copy

  • myDashboard/template/AdminLTE-master/fonts to myDashboard/development/assets/fonts/

Once this tedious task is done, you need not worry about resources any more.

index.html will contain the login screen. You can refer myDashboard/template/AdminLTE-master/pages/examples/login.html for the login page. I have taken then above page, removed a few imports and fields and made it like

Note : We will get to dash.authUser() in a moment.

Save the file and run the app (cmd + b or ctrl + b). And you should see the login screen. Screen Shot 2014-07-20 at 6.13.14 pmThe page also includes simple validations.

Before we get started with the authentication logic, we will build the register screen too. Create a new file at the same level as index.html and name it register.html. Copy the below markup to register.html