Tag Archives: Development

Setup SSH on a home linux server for remote Node development

Hello again, today I’m going to run through whats required to get a node server running from home.

This may seem like an odd thing to do, but if you do a lot of remote work/hackathons/contract work you may find that the facilities to perform a internet accessible demo are quite lacking.

Firstly, we take our old laptop/micro pc/old pc and install the latest version of Ubuntu (15.10 at time of writing). However, we don’t need the desktop experience so we’ll just install the server installation. You’ll need to do this in front of the machine (although it is possible to roll a SSH enabled distro, but that is far from Quick ūüėČ ).

After installing Ubuntu and setting a static IP, log in and install openSSH..

Ensure that you follow the instructions in the link below, and alter the listening port to something other than 22 (e.g. 36622)

https://help.ubuntu.com/community/SSH/OpenSSH/Configuring

So, now you should be able to access your ssh prompt via  a local callback:

ssh -v localhost

Lets add node and a simple express application

sudo apt-get install node npm

Once node is installed, create a folder for your server

mkdir nodetest

Then browse to your new folder and initialise node

cd nodetest
npm init

Now add the http module

npm install http -save

(as ever, use sudo if none of this works or chmod/chown your folder)

And add the following code to a new javascript file called quickanddirty.js to create a simple http listener on port 8090

var http = require('http');
var server = http.createServer(function(req,resp){
    resp.end("Welcome to your Node server");
});
server.listen(8090, function(){
    console.log("Your server has started", 8090);
});

Test your server out by running node with the javascript file

node quickanddirty.js

You will see that the server has started, and is listening to port 8090. Leave it on as we move to accessing the box remotely.

Note: you can use cURL to check the response also if you are feeling unstoppable ūüėČ

So, to recap, we have an Ubuntu linux box running openSSH and Node. Happy times, happy times.

At this point, as we already assume you have a home broadband connection, we will connect the box to the outside world.

As broadband supplier software differs I’ll try and explain what you need to do both on and away from the box.

Firstly, you need a way of mapping the often shifting IP address of your router with a static dns entry. This is done using a dynamic DNS service such as dynDNS (there are others available, but will generally require installing perl scripts on your linux box to keep the dynamic dns entry up to date).

So, register an account with DynDNS (others are available) and choose a subdoman. Note: Don’t make the name identifiable to yourself..lets not give hackers an easy ride ūüėČ

Once you have your subdomain, you need to create a mechanism to update the dynamic service so calls to the domain get passed to your router IP address.

Both the SKY and virgin broadband devices have areas to select the Dynamic DNS service. Note: Advanced users can configure the dynamic dns update from the linux box

Once it is selected, you’ll enter your account details for the Dynamic DNS service and your router will periodically let DynDNS (or whoever) know the current IP address of your router. This allows you to ssh in on a domain and always get to your router.

Once the dynamic dns is set up you’ll generally need to set up a port forward via the routers firewall from the entry point of your router to the¬†linux server’s openSSH port number (as chosen¬†previously), 36622.

With the Virgin router, you will need to buy another router and put your Virgin box into modem mode, which will simply pass the connection to your other router for dynamic dns, port forwarding and firewall setup. The full instructions for doing this can be found online “virgin wifi modem mode dynamic dns“.

The Sky router is more friendly, with services to set up the port to listen to, then firewall settings to point it to your box.

As I said previously, you don’t need to use DynDNS through the broadband¬†box, just ensure that the port is available and you have a method of updating the Dynamic DNS entry in your provider with your router IP.

The clevererer of you reading will have realised that you don’t need dynamic dns at all if you know the current IP of your router, so as a last resort, you can use that to connect to SSH.

Which leads us to, connecting to your server.

With your server running, hop onto another network, such as your phones, using a different computer and try to connect to your SSH server.

In terminal type the following, taking “nodeuser” as the user created on your linux box, and “randomchicken47.dyndns.org” as the dynamic dns entry (you could use the router IP instead also),¬†and the port number of 36622 we chose earlier

ssh nodeuser@randomchicken47.dyndns.org -p 36622

You should be able to log in to your server. Verify by browsing to your nodetest folder.

So, we can access your server via openssh, but how can we access the node instance running at 8090. Simples. We tunnel to it.

type “exit” to exit from the openSSH session, then create a new session with added tunneling. To explain how tunneling works in one easy sample, I am going to tunnel into port 8090 on my SSH connection via a local port of 9999.

ssh nodeuser@randomchicken47.dyndns.org -p 36622 -L 9999:randomchicken47.dyndns.org:8090 -N

or, if that seems to not work correctly replace the second dynamic domain with your servers actual name.

ssh nodeuser@randomchicken47.dyndns.org -p 36622 -L 9999:randomchicken47svr:8090 -N

Now you’ll be able to browse to the localhost port of 9999 in a web browser, and see the response from your Node server via tunneling.

We have used tunneling instead of just opening a port direct to your node port¬†as it increases security. If you’re opening ports for multiple services it increases your attack surface, meaning that an attacker has more things to attack to gain access to your network. Its much safer to have a single fortified SSH accesspoint on a non-standard port.

Be careful, you may get addicted to SSH tunneling, as it can enable you to do some amazing things.. But bear in mind, the tunnel uses your home bandwidth allowance if you have one.

Take care,

Neil

Entity Framework – When to use what

In Entity Framework there are three ways of utilising the ORM, one enables you to get straight into coding (code-first), one enables you to rip a database into a new model (database-first) and the final one enables you to create a model independent of the database or your final code (model-first).

But, when should I use each of these methods?

Each method has its pro’s and con’s, and personally, I don’t really use code-first that often as it lends itself to a build where everything has been fully architected beforehand, and all you’re doing is building to spec. Something I rarely encounter, as the initial green field development is often a very agile process, especially if you’re utilising a TDD/BDD development cycle.

So what scenario would you legitimately use Code-First?

Say you have a very small micro-service to build, such as an auditing service, and you already know the database fields, and possibly¬†the service will only know its connection at runtime. Code-First is an ideal solution, as it enables you to quickly knock out the code, leaving the spinning up and implementation of the database to the EF settings in config. The main drawback I find of Code-First is that if you’re database schema is not set in stone, a rebuild of your EF model will necessitate a destruction of the database. You can create a custom upgrade path, but this is rarely done. So, if you have a unchanging¬†model, for a small data footprint, code-first is great.

Code-First is also great for proof-of-concept builds that may be knocked out in a day to show a particular prospect of development.

Database-First is obviously good for where your development is bound to a database schema which already exists and is quite complex. You can just use the EF designer in Visual studio to generate the model and get up and running very quickly. A database schema change will mean that the EF model will need to be recreated, but its generally no big deal as the database will be keeping its data integrity due to it being developed in its own development domain by DBAs or other colleagues.

Model-First would generally be used to map out a logical structure of the data which bridges both the system model and the database model. Say you wish to use a different paradigm of data design in the database to your model (flat-file DB with a relational ORM). It could also be the case that you are tasked with a data-design task where you need to develop a schema that satisfies the requirements of the database team and the architect, utilising a colourful database like Oracle or MySQL to fit.

I hope this helps your decide the approach to use when implementing Entity Framework in your work.

Take care

Quick N Dirty – Oculus Rift 0.7 hijinks

Well, having obtained an Oculus in a hackathon the other month, I looked at how easy it is to start developing Unity games.

Pretty easy, thank the gods! (praise the sun)

So, here goes..

(Make sure your Nvidia drivers are up to date and supported: here )

Firstly download and install the 0.7 sdk from here. Set up your Oculus and verify you have the blue light and can see the demo scene.

Then, install Unity 5+ from here, and download the¬†“Oculus Utilities for Unity 5” from here.

Unzip the utilities and copy the package and project folder into the assets folder in Unity3D.

Start Unity and quickly (or slowly, whatever) create a plane and pop on a couple of cubes.

UnityCapture

Now, go to the Asset menu, and import the Oculus Utilities Package.

importpackage1

Once it has finished, drag a OVR Player Controller prefab onto the scene and position it above your plane. Make sure the green outline is above the plane.

ovrplayerCapture

Capture_scene

Now, build your scene using the File>Build or pressing Ctrl+B.

Note: Previously the Unity integration kit used to build two files and you had to do some jiggery pokery with the monitors. Now, no jiggery pokery required and it only builds one executable, but your Oculus knows when its run.

So, with your headset on, double click your executable and navigate around with your game controller.

Have fun!

screengrab_scene

Using Flash CC (13) as an asset pipeline when developing with CreateJS

Anyone who knows my history will know that one of my strings was Flash developer.  The browser wars (part 1) made me tire of the hoops and loops and misinformation that used to come out of all the browser manufacturers camps. The graphical splendour of flash in web applications lit the fire of the internet and dragged it away from tables and lists to interactive entertainment.

We all know what happened next, and you are welcome to whatever theory fills your proverbial bucket. Needless to say, I hadn’t touched flash for a few years, with it being persona non grata, in the burgeoning mobile space, and by extension the chugging along web space.

I had used it in the past to export sprite sheets and the like, using it in the same fashion as it was originally designed, as an animation tool, but the HTML5 support was sketchy, as Adobe had nothing to replace the Flash engine with.

It seems Adobe is now in cahoots with Interactive Industry  veteran Grant Skinner to embed createJS, which is his management wrapper over Canvas, DOM and  WebGL, into flash by default. Removing all the messy cartesian maths, trigonometry and graphical hoopla in much the same way jquery changed the DOM for javascript developers.

In this mini tutorial I’m going to show a simple pipeline from asset to createJS. This isn’t meant as anything but an example, and not a template for project work, so use at your own risk.

The tools I will be using are Flash CC (flash 13), a web browser, and a text editor. I’ll show how to create an asset in Flash, publish it to createJS, and then how to interact with it indirectly.

In flash, create a new project using the HTML5 canvas template, with a width of 800 and a height of 600. This is just so we have enough space. It doesn’t relate to the size of our finished piece.
Leave the frame rate at 24fps. Note: Make Sure you keep your framerate noted, or planned out before hand, as we will use it with createJS. Mismatched frame rates can cause animations to run at a different speed than expected.

newflashdoc

I’m going to draw a simple sprite, which has several animations. In this case, a balloon.

Firstly, I create a blank movieclip called balloonClip in the library. Then I add some animations and keyframes with labels.

I’m going to give it a looping 24 frame floating animation and a 10 frame pop. I add labels to the animation which we will be using in createJS.

baloon_anim

The balloonClip object will be made available in the createjs script.

Now, we create a simple webpage to hold the clip.

<!DOCTYPE html>
<html>
<body onload="createJSExample();">
<canvas id="createjsexample"></canvas>
<script>
   function createJSExample() {
       var canvas = document.getElementById("createjsexample");
       var stage = new createjs.Stage(canvas);
       createjs.Ticker.setFPS(24);
       createjs.Ticker.addEventListener("tick", drawLoop);
       function drawLoop() {
           stage.update();
       }
   }
</script>
<script src="https://code.createjs.com/createjs-2014.12.12.min.js"></script>
</body>
</html>

This is a very simple createJS template, with a drawLoop to handle stage updates. Every game or interactive piece has some sort of regular drawLoop or interrupt, which handles state changes in objects, such as a bullet, or cloud, and collision detection, etc.

Now we do a customary run of the page to make sure we have no typos. You can add a console.log to the drawLoop if you want to see it being hit by the tick event.

Back to flash!

We should have an empty screen with our balloon in the library.

Animations in flash will always loop, so we will need to put in redirects in the label layer to ensure the balloon doesn’t just run through to pop.

Add a gotoAndPlay(“float_start”) to the end frame of your floating animation. I’m not going to get into flash development here, I’m going to assume you know what I am talking about when it comes to using flash..

That script will tell flash to go back to the start of the animation and keep looping. We can test it by doing a quick publish.

Flash will convert your animation into createJS and save it in the same folder as your FLA file.

If your animation wasn’t dragged onto the main scene prior to publishing the corresponding javascript file will be fairly empty. If it was on the scene then your code will contain lines similar to this.

// Layer 2
 this.shape = new cjs.Shape();
 this.shape.graphics.f("#FFCC00").s().p("AiTCiQg9hDgBhfQABheA9hDQA+hDBVgBQBXABA9BDQA+BDAABeQAABfg+BDQg9BDhXAAQhVAAg+hDg");
 this.shape.setTransform(-18,-155);

 this.shape_1 = new cjs.Shape();
 this.shape_1.graphics.f("#FFCC00").s().p("AiTCiQg+hDAAhfQAAheA+hEQA9hCBWAAQBWAAA+BCQA9BEABBeQgBBfg9BDQg+BEhWAAQhWAAg9hEg");
 this.shape_1.setTransform(-19.2,-154.3);

The numbers and letters are simply compressed representations of your movieclip’s vectors.

Let’s take the JS file created and place it next to the web page created earlier, then reference it with a script tag.

Now lets add the code to show the balloon to our webpage.

var balloon=new lib.balloonClip();
stage.add(balloon);

The name in the lib object will be the same as what you called your clip in the library in flash.

Add the clip, and the createJS movieclip script to the HTML, so we can see the balloon in all its marvellous glory! ūüôā

<!DOCTYPE html>
<html>
<body onload="createJSExample();">
<canvas id="createjsexample"></canvas>
<script>
   function createJSExample() {
       var canvas = document.getElementById("createjsexample");
       canvas.width=800;
       canvas.height=600;
       var stage = new createjs.Stage(canvas);

       var balloon=new lib.balloonClip();
       balloon.x=200;
       balloon.y=250;
       stage.addChild(balloon);

       createjs.Ticker.setFPS(24);
       createjs.Ticker.addEventListener("tick", drawLoop);


       function drawLoop() {
           stage.update();
       }
   }
</script>
<script src="https://code.createjs.com/createjs-2014.12.12.min.js"></script>
<script src="http://code.createjs.com/movieclip-0.7.0.min.js"></script>
<script src="balloonAnimation.js"></script>
</body>
</html>

If all went to plan, you should see your balloon bouncing around on the screen, rendered in canvas by createJS.

Now, we can add a button to pop the balloon.

Add the following code to the web page, just under where you declare the x and y position of the balloon.

var circle = new createjs.Shape();
circle.graphics.beginFill("red").drawCircle(0, 0, 10);
circle.x = circle.y = 10;
circle.name = "circle";
stage.addChild(circle);
//pop you!
circle.on("click",mouseEventHandler);

Now add the listener, under the drawLoop function. This will check to see what frame the movieclip is on, and act accordingly.

function mouseEventHandler(evt){
    if(evt.type=="click"){
        if(balloon.getCurrentLabel()=="pop_end"){
            balloon.gotoAndPlay("float_start");
        }else {
            balloon.gotoAndPlay("pop");
        }
    }
}

If all went well, you should be able to pop, and recreate the balloon using the red dot.

It’s great to see Grant Skinner flying the flag for flash, and taking the best features of Actionscript to create a much better transition to Javascript, and the support for WebGL will only add to the fun times ahead.

Javascript is still nowhere near as fast as flash, but we’re getting there! ūüôā

Code is available on my git:

https://github.com/neilhighley/nh-examplecreatejs

 

 

 

 

 

Connecting Apache Cassandra v2.011 to Windows Communication Foundation

Cassandra is the current de facto standard in flat, scalable, cloud based database applications and as such usually only exists in AWS or linux clusters.
Fortunately, you can install Cassandra on windows in a single node configuration. For more info on the configurations available in a distributed install, see Planet Cassandra.
Previously I have worked on SOLR, which struck me as a similar construct to the node structure of Cassandra, specifically with the lack of master slave that you would normally have found in traditional clusters.

By avoiding a master slave format, Cassandra allows an elastic structure to cover the database records, akin to a RAID striping,  and does a great job when you have geo-spaced clusters allowing for quick responses from the database at a global scale.

Cassandra has several connectors,  covering all the major server side languages, including Javascript(nodejs), Java, Python, Ruby, C#.

Here I will show you how to connect a C# WCF service to Cassandra to retrieve records.

Firstly, install Cassandra, taking special care with prerequisites.
Go into the cassandra query language shell(CQL, and it probably has a python icon on it)..

Create a new keyspace, which allows you to add tables.

create keyspace casswcfexample with replication={'class':'SimpleStrategy', 'replication_factor':1};

Add a new table to your keyspace.

use casswcfexample;
create table exampletable(tid int primary key, title varchar, description varchar);

You can press enter for a new line in CQL, and it will continue,¬†and won’t submit the statement until you add a semicolon

Add data to your keyspace’s exampletable

insert into exampletable(tid, title, description) values(1,'first title', 'description');
insert into exampletable(tid, title, description) values(2,'second title', 'another description');

Verify the data in your keyspace:table

select * from exampletable;

OK, now we have a running cassandra instance with data in it, let’s hook it up to a new, empty, WCF project.

 

As a rule, I always have my data layer as a separate project, to allow me to reuse it.
Create a new Solution, and add a WCF Application, leave it named as WCFService1.
Create a new Class library project and , call it CassLibrary.

In the CassLibrary project, import the DataStax nuget package for the cassandra connector.

Create an object to hold our result rows

namespace CassLibrary
{
 public class DTOExampleTable
 {
 public int Id { get; set; }
 public string Title { get; set; }
 public string Description { get; set; }
 }
}

Create an Extension to convert row to object

namespace CassLibrary
{
 public static class DataExtensions
 {
 public static IEnumerable<DTOExampleTable> ToExampleTables(this RowSet rows)
 {
 return rows.Select(r => new DTOExampleTable()
 {
     Id = int.Parse(r["tid"].ToString()),
     Title = r["title"].ToString(),
     Description = r["description"].ToString()
 });
 } 

 }
}

Create a Simple Data class to hold the session connection and the retrieval of our data

namespace CassLibrary
{
 public class Data
 {
 private string _ks;
 private string _cp;

 public Data(string contactPoint, string keyspace)
 {
 _cp = contactPoint;
 _ks = keyspace;
 }

 private ISession GetSession()
 {
 Cluster cluster = Cluster.Builder().AddContactPoint(_cp).Build();
 ISession session = cluster.Connect(_ks);
 return session;
 }

 public IEnumerable<DTOExampleTable> GetExampleRows()
 {
 var s = GetSession();
 RowSet result = s.Execute("select * from exampletable");
 return result.ToExampleTables();
 }

 }
}

This is just a simple way of showing the data access. The cassandra plugin has a representation of LINQ also, but I’ll not go into it here.

Now, go back to the WCFService1 project, and add a new method to the Service Contract interface.

[ServiceContract]
 public interface IService1
 {
 [OperationContract]
 IEnumerable<DTOExampleTable> GetExampleData();
 }

And in the actual service, add the corresponding method. We’ll add some test data, then verify the service is set up correctly first.

 public class Service1 : IService1
 {
 public IEnumerable<DTOExampleTable> GetExampleData()
 {
 var dto = new List<DTOExampleTable>();

 dto = new List<DTOExampleTable>()
 {
 new DTOExampleTable()
 {
 Id = 999,
 Title = "Just a test for WCF",
 Description = "WCF Desc test"
 },
 new DTOExampleTable()
 {
 Id = 99,
 Title = "Just another test for WCF",
 Description = "WCF Desc test 2"
 },

 };

 return dto;

 } 
 }

Right click the WCF project and start debugging

If the WCFTestClient doesn’t fire up, go to the Visual studio command prompt and type in

WCFTestClient.exe

Then attach your service URL to the client.

Once attached, select the GetExampleData Method in your service and invoke. You should see the two test items we added above.

Now that we know the service is fine, remove the test items from the service method, replacing them with the Data class in your CassLibrary.

 public class Service1 : IService1
 {
 public IEnumerable<DTOExampleTable> GetExampleData()
 {
 return new Data("127.0.0.1", "casswcfexample").GetExampleRows();
 } 
 }

Rebuild your service, and re-invoke it through WCFTestClient. You should see your Cassandra data.

The Cassandra client has DBContext and LINQ built in, so the example above should in no way be utilised in a real-life programming situation.

If i get a few hits on this page, I’ll post a more complete example, showing off the actual speed of Cassandra (a large cluster can serve¬†hundreds of thousand¬†of records a second). Cassandras only real competitor is MongoDB, which seemingly tops out at 20 nodes in a cluster.
e.g.

Its this throughput and stability in scaling that enabled Cassandra to be used in the Large Hadron Collider to store data as it came into one of the detectors.

Planet Cassandra : Companies Using Cassandra

 

 

Quick n dirty – Angular Directives

Going to be doing a few of these Quick n Dirty tutorials over the coming weeks, showcasing bite size quick how-to’s on useful web tech and IT.

First up, some Angular click bait help for those who want to get stuck into the popular Javascript framework.

The Angular mantra is all about not touching that DOM with your controller, and the best way of following that rule (and create re-usable controls) is by separating as much as you can in Directives.

Directives are components which have their own scope and can be slotted into any page to show content, either by using your very own tag, or including them as an attribute.

Firstly, create an angular app.

<html ng-app="QADApp">
<head><title>QAD Angular directives</title></head>
<body>
<!-- (A) html goes here -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/angular.js"></script>
<script>
var QADApp=angular.module("QADApp",[]);
// (B) your directive script goes here

</script>
</body></html>

Now, lets plan our Directive quickly.

It will show a message, based on a value.  Done.
ūüôā

We will use the Element style of directive by using the following HTML. note how we separate our name by the camel case in the directive configuration.

<my-message-is-shown value="bye"></my-message-is-shown>

..alongside an “E” setting in the directive’s restrict object parameter..

<script>
var QADApp=angular.module("QADApp",[]);
QADApp.directive("myMessageIsShown",[function(){
return{
   restrict:"E",
   scope:{
          value:"@"
   },
   template:"<div ng-if=\"value=='hello'\">Howde</div> <div ng-if=\"value=='bye'\">See ya</div>"
 }
}]);
</script>

I generally place the template text in a function, so the code’s readable, but that isn’t quick, or dirty!

The full page, just to show you don’t need a controller either.

<html ng-app="QADApp">
<head><title>QAD Angular directives</title></head>
<body>
<!-- stuff goes here -->
<my-message-is-shown value="bye"></my-message-is-shown>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/angular.js"></script>
<script>
var QADApp=angular.module("QADApp",[]);

QADApp.directive("myMessageIsShown",[function(){
 return{
   restrict:"E",
   scope:{
     value:"@"
   },
 template:"<div ng-if=\"value=='hello'\">Howde</div> <div ng-if=\"value=='bye'\">See ya</div>"
 }
 
}]);

</script>
</body></html>

The value attribute can be called anything as it is in its own scope, so I could have done the following;

scope:{ value:"@greeting"}

and changed the attribute name to greeting and it still would work.

Have a look at the Angular directives guide for more information.

Angular Directives

You can create a directive in¬†a separate module and then inject it into the original module like below. I won’t show the whole script, you should be able to work it out. ūüôā

var QADApp=angular.module("QADApp",["QADDirectives"]);

See you next time!