Node.js Raspberry Pi Tutorial 2 - Our first site

Well this is part 2 in a series of blogs I am making surrounding the Raspberry Pi and node.ns - Here is part 1

So in the last tutorial we installed node.js 0.8.16,

The aim of this tutorial is to create a site running on the Express framework.. Express is sort of like the defacto standard now for building web apps in node.js, there are more complex ones such as Meteor and Derby which feature loads more stuff.. and we might go into them in the future.. but they are built using express and the principles we are going to learn here anyway so it is worth starting at the bottom.. I think diving right into Meteor would be confusing..

So what is express?

Express is the glue which holds our app together.. it is the framework of our app.. express is a series of tools bundled together which when initialized will spit out a ready to use app.. 

For example, say I wanted to create a website using node.js.. where would I start? Well first of all I know that I would need a HTTP server as that's just how the web works.. So I would look into nodes documentation and pull out its HTTP module and create a server..

So far so good.. Okay well, I am happy with my server just serving up "Hello World" or whatever the most basic example is and I have decided I want to add another page to my site which will serve up some other content.. let's go with a picture of a cat..

Well I only have the http server so I would have to set up some sort of request handler/router which would take the new page url (/cat) and figure out what functions to carry out and then actually execute those functions and pipe the image of the cat to the user.

I now have a server and a router.. (no split files or organisation yet just one file with some router code) say I want to parse the cookies of the user visiting my site so that they can stay logged in even when they leave the tab in their browser.. well I would have to look around in node.js libraries and would use the connect-cookie module and play around with that..

HTML or CSS templating? maybe pull in stylus or Jade and try and get the thing going..

This all sounds like a ball ache right? well that's where our good friend express comes into play..

Express just does all this for you.. all you have to do is type "express myApp" and it will create all the configuration, file organisation and module installation for you.. all you do is sat back and smoke a cigar. So are we agreed.. express is awesome? Okay let's install the thing.

What is NPM?

NPM if you have never used it is this cool way to install packages in node.. it is much like apt in Raspbian, instead of typing "sudo apt-get install porno" you would type "npm install porno" and it would find the relevant porno for your needs.. the files get dumped in every directory you use the npm install command in.. for example if I was in a directory /bacon and I type npm install random-package, then npm would create a folder inside bacon called "node_modules" and inside that would be my random-package.. node always looks inside the node_modules folder..

/bacon/node_modules/random-package.

There is one other way to install packages in Node and that is globally so instead of just installing them for the current project like I showed above they are installed on the whole computer. This is especially useful for installing packages like express, as you are going to want to use them for every project you set up so it makes sense to be able to use them everywhere..

So that is what we are going to do, install express onto the whole computer but first of all we want to make sure our package manager NPM is up to date.. 

Type the above into any directory, this will tell NPM to update itself, once this is done type npm -v to make sure you are running an up to date version (1.1.69 is my version).


This will install express on the pi so we can use it in our projects.. the -g is the global install option which is mentioned above..

Express installed.. let's make an App

Right for this tutorial we are just going to create the most basic Express app, there are some options you can tweak depending on your preferences, but as we are assuming you are all beginners lets not go into those just yet..

First of all find a directory you want to try out an express app in.. for this kind of thing I have a folder called "node-playground" where I test out all of this kind of stuff.. maybe try that.

The above commands make the directory we are going to play in, then the express command makes a separate directory called myApp (or anything you want to call it) with all the relevant files in..

If you have done it right you should see the following screen, I have listed the files inside the folder too

if you have something that looks like above then all is going well.. express it telling us to install the dependencies this app needs.. so we will do that in a second.. this also uses NPM,  (npm is used for everything pretty much so get used to it).. when you download or clone someones app you always have to let npm install the dependencies on your computer and compile them properly. So let's do it..

Change directory into the app if you haven't already like I have done above.. and then type



This should set loads of text going.. what npm is doing here is reading from the file called package.json for which modules express wants to use. It then goes through its libraries to find whatever versions are specified and downloads and installs them to a folder called node_modules.

I will go into package.json and how JSON works soon but for now just know that npm has installed everything express has asked for.. if you get any error which I am sure you won't.. maybe try installing the package build-essential (sudo apt-get install build-essential).. this just contains some basic tools for building packages which npm might want to use.

That's it.. you have a finished website which will run on the Raspberry Pi

Seriously that's how easy it is.. install express.. npm install and then finally to actually run your app just type

node app.js

This tells node to run it.. if everything is working node should say.. "running on localhost:3000" if you go to the pi's ip and then type :3000 you should see a page saying "welcome to Express"..

eg my pi is on 192.168.0.11 so in chrome I type 192.168.0.11:3000 to see my amazing express app.

Well that's all well and good but how does all this work so I can make my own cool apps I hear you ask.. well full explanation is coming soon.. I am tired right now bed time!

Installing bcrypt with Windows 8 and Visual studio 2012

Okay so I was using this tutorial here.. which wanted me to use bcrypt.. I am using Windows 8 and Visual Studio 2012 (I have the 2010 C++ stuff installed too as TooLateNate says to on the node-gyp github. Anyway I couldn't get it running with: as bcrypt just wouldn't play ball.. but thanks to finding this thread here I managed to solve the problem with typing So if you are having trouble with anything and you have my problem just type npm install PACKAGE --msvs_version=2012 So for bcrypt happy trails

Node.js Raspberry Pi Tutorial 1 - Installing Node

 


Okay so here is the first in a series of tutorials I am going to do on the Raspberry Pi using the node.js programming language.

The ultimate goal of these blogs will be to show how to run a website off the raspberry pi which will be able to communicate with the GPIO and the serial port so that you will be able to turn things on and off online.

Once this is done I will show how to make the site secure and then some basics on sessions.. the site doesn't have to be a GPIO site, It could just as easily be a blog you want to host on the pi.. I will be using libraries such as Express, Socket.io, node-serialport and then some GPIO libraries I have found.

So let's dive in..

INSTALLING NODE

Pre-installation info

• I am using the latest Raspbian image found here.. (2012-12-16-wheezy-raspbian.zip)
• I am also using the 512MB Version of the pi (overclocked to 1GHz with 16mb GPU RAM), however I have also completed all of this on the 256MB pi so don't worry if that's all you have.
• Everything on my pi is up to date so make sure you run update and upgrade on the pi.

I think the version of node in the raspbian archives is 0.6 but the latest version is 0.8 so we are going to want to install that. It's pretty easy to do so don't worry..

Okay so we are going to need to actually get the file for download, so create a directory on your pi, or just install it wherever in home and once in your directory just enter the following..

So then after that is completed, we need to untar the downloaded file and go into it's directory with the following commands..

After you have untarred the archive, its just a case of installing the thing.. note-this takes a long time (usually about an hour or more) so go make some noodles or something for a while..

Just enter these commands to install the thing, one after the other..

That's it, node.js installed.. to make sure just type in "node -v" into the terminal and it should say 0.8.16..
Please checkout part 2 in this series of tutorials..

Node.js Raspberry Pi Serial Communication using Socket.io, Express and node-serialport

Okay so today I am gonna experiment with Nodes serial port module https://github.com/voodootikigod/node-serialport

It is already installed but the basics of how to get it running are in the github readme.
So my plan is to eventually get all this running with the Modbus protocol and write my own Modbus class, however for now I just want to make sure I have the basics of node-serialport working.
So first of all this is my setup..

Here you can see the raspberry Pi and also a module I have used to connect the serial comms up.
As I am planning on using Modbus for the communication I have used a 3.3V UART to RS485 converter chip wired to a cat 5 socket which then connects to various Modbus devices.
The chip used is a MAX 3483. This could easily have been a 3.3V UART to USB such as Any of these FTDI chips or simply a MAX232 chip to convert the logic up to RS232 levels. Anyway I have used the 3483 for this project.
The module makes a connection to the RX and TX pins on the GPIO header on the Raspberry Pi.
Which are located on GPIO 14 and GPIO 15 as can be seen from the image below.
For more info check out here..

  

All connected.. lets install!

First thing we are going to do is install express, this will take care of creating all the nice directory structure for us and starts up off with a webserver and our routes etc all written for us.
So create a directory on the Pi and make sure Node.js is installed (I might do a blog post on this in the future but at the minute you figure it out!). I am using Node 0.8.12 and NPM 1.1.63 find out your version by typing “node –v” and “npm –v” also I am using Raspbian Wheezy.
So go to the directory you made and type: “npm install express” –if the next step doesn’t work properly for you, maybe try typing “sudo npm install express –g” this will just install it globally on the computer.
Once installed type “express <your app name here>” so I typed “express serial” this will then generate all the relevant directories.
Once it has created them it will tell you to “cd <directory name” and then type npm install  which will make npm install all the relevant modules etc and finalise the installation.
If you then just typed “node app.js” it would start the web server running, but for now were going to install a few more modules.
We are going to want to use node-serialport so in the working directory type “npm install serialport” this will add it to the project.
Finally I am going to want a way to get these serial messages to and from the browser window. For example I am going to want to maybe have a button send out a serial message and then have a textbox getting the value back.. or anything.. a graph? but to get messages to and from a browser is a bitch so the lovely people at socket.io have created this awesome library  (which I will explain in another blog post) to get these messages in and out in a really easy way.
So as a final install type “npm install socket.io”

All Installed..lets code!

First of all open up the folder in a text editor (I use Sublime Text 2 because it is awesome!) and then open up “app.js” (this could be called server.js or something similar)
At the top of the page there are all the require files for express, we want to add our own modules here so make sure to add this line to the end of the requires. (we are going to add socket.io in a different way later on)
After this it’s time to set up our serial port so add the following code straight after the requires.
Express sets up a server for you but we are going to change it slightly to work with our socket.io module, so find the server setting up code and change it in it’s entirety to the following.
This is creating the server and then binding our socket.io module to listen to that server, whenever someone connects to it a socket session will be started between the client and the server so they can happily send and receive data to each other.

The way socket.io works is that on both the server and the client (the website) there will be something called listeners and emitters. A listener will be listening to the socket connection for certain keywords, when it hears it’s keyword it will fire its code and when it’s done it could emit a keyword to start some other code on the client or it could just do nothing.

So the first thing you need to do before you can add any listeners or emitters is to finish setting up the socket server. This is done through listening for “connection”, once a connection is made you can start having fun with emitters etc.

So this is the code for the server, at the minute it is just listening for the connection, once it is connected it will emit “connected”  and it will also send the number 123 to the client. – This bit is not needed it is just an example of how to emit and listen.

Server Code

Above is the sever code, it is now time to setup the client. The client will be our website which we are going to have to build in html. Express likes to use a module called Jade to do its html templating however I don’t like using that so instead of using the default views I create a file in the “public” directory called “index.html” and then in the routes I change the code to render the index file instead of the jade template. So in /routes/index.js I change the code to this.
So in our index.html file we need to listen to our socket server so the script to do that is shown below (the whole html file will be included at the end so don’t worry about where this all fits in the html structure at the moment)

Client Code

Now lets create a function on the server which will listen for the event called “sendSerial” and take some data in and send that data to the serial port.

So add the following code to the server MAKE SURE IT IS ENCASED WITHIN THE IO.SOCKETS.CONNECTED BIT OF CODE.
We are also going to want to send the data to the client when new data is received by the serial port so we will emit the keyword “receiveSerial” when new data arrives so the client can log it.

So underneath the above code, add the following.
There are a few more serial port functions we need to add to the server for it to work so just below that add this.
This finalises our server so now lets setup our client to respond to the receiveSerial and make it emit the sendSerial keyword with the data needed.

Okay so lets move over to our file “index.html”

This is hopefully all straight forward to any html developer, the file is using some basic jquery so please read up on that if you want to make sense of it.

Basically all that is happening is there is a send button and a textbox when the user clicks the send button it will take the data out of the text box and emit the “sendSerial” event. This will be picked up by the server and sent down the serial line.

There is also a read only textbox which just logs the values received by the serial port.

That's it.. Finished files

So here are the final files which you need to make it work.

APP.JS

INDEX.HTML

This is shown above in full..

INDEX.JS(ROUTER)

To be honest there are probably mistakes in those files somewhere but you should be able to see the basics of how all this works and be able to find and correct the mistakes if they are there

Happy trails