Category Archives: javascript

Super functions are delicious, just you let me show ya

With the advent of the cloud function it looks like we’re coming towards a new era in web development, where the front end comes totally detached and served by a serverless back-end.

This has its positive aspects and its drawbacks, which I’m not going to get into here.. Instead, I’m going to take a quick (ish) sprint around the current offerings from the various companies out there.

The plan

Our scenario is a super connected industry influencer, just like, mooching around the top art popups and bubble tea establishments. Time is precious when you’re prowling around influencing things, so instead of writing a blog post when something catches my eye (boooooring!), I just want to send an SMS with the latest hash-fashion and have a blog post immediately appear on the now hip and trendsome Blogger platform (Kanye uses it).

Across the street, however, is an evil Ad Conglomerate, lets just call them InterOmnitsu. And they see your influencing, and although BoingBoing is pretty great at keeping their content fresh, they need some of your youthful energy at that next pitch for water based caffienated wet wipes. They want to watch your blog posts, and get a copy of them as soon as you post one.

Its an arms race, rivalling the Cuban Shoe Crisis of 1967.

ahem.

So, to fulfill our scenario, we will be SMSing into Twillio, which will send the message to an Azure Function, which will then query Twitter… Our Azure function will take the results of the twitter query and send it to Google Cloud functions, which will in turn take the content and format it for a post to Blogger and send a message to linkedin notifying my followers of my newest musings.

On the dark side, an Amazon service will monitor the blogger page and when a new post is detected, take a screen grab, save it to cloud storage, then send the screenshot to an email account.

The yoof marketing industry is surely a den of inequity and vice..

To fulfill this task, we will need to set up the following (*cough* this may change)

Microsoft Azure Account

Twillio Demo Account

Twitter Application Account

Google Account

Blogger Account

LinkedIn Account

Amazon AWS account

All the above have 30 day/demo credit offers, and as we’re micro-functioning the whole thing, even if your demo does run out, just create another.

Step One: Twillio to Azure

Note: you will have a lot of API keys and accounts to keep track of, best create a document and keep them safe.

Create an Azure demo account and log into the functions area ( https://portal.azure.com/#create/Microsoft.FunctionApp ).

Create an account on Twilio ( https://www.twilio.com/try-twilio )

Get a new number, and create a programmable SMS. Point the Request URL to your Azure Function URL and set the dropdown to POST

SMS the number with a word, and you should see the request come into your function in your Azure log. Thats a big POST!

Add the following code, to the Azure function javascript and we should be able to text a Twilio number and see only the requested word in the log.

 module.exports = function(context, req) {
 var whatWasMessaged=req.query.Body;
 context.log('Search for a tweet for '+whatWasMessaged);
 context.done();
};

Oh yeah, create a Twitter app and make a note of all the api keys..

Next, we start with the following code building on it to connect to Twitter once the call from Twilio comes in (which will enter the function as a JSON POST).

module.exports = function(context, req) {
 var tweets=getTweetsForWord(req.query.Body);
 sendToGoogle(tweets,context);
 context.done();
};

function getTweetsForWord(nam){
 return {tweets:[{message:"HAM:"+nam+"HAM:", from:"neilhighley"},
 {message:"JAM:"+nam+"JAM:", from:"cooldude"}]};
}
 
function sendToGoogle(pak,context){
 for(var i=0;i<pak.tweets.length;i++){
 context.log(pak.tweets[i].message + " from "+pak.tweets[i].from);
 }
}

I’ve just created dummy functions so that I can test the connection from Twilio to my function URL and get the meat of the app done as soon as possible.

 

Create a Twitter App, and note down the APi and customer keys.

We need to use the Twitter API, so we have to have the package installed via node.

Open up the function app settings and navigate to the App Service Editor.

azure-function-advanced

On the left, select the console, so we can install packages, and install the Twitter package.

azure-scm-install-twitter-npm

Add the following to your function and run it.

var Twitter = require('twitter');
var client = new Twitter({
 consumer_key: 'xxxxxxxxxx',
 consumer_secret: 'xxxxxxxxxx',
 access_token_key: 'xxxxxxxxxx',
 access_token_secret: 'xxxxxxxxxx'
});

Add a “console.log(client);”  to the first function (module.exports).
Observe the console.log  in the monitor section on the left of the App service editor. You should see a huge json object with the twitter client. Otherwise, check the other log next to the function code which should say the error coming from Twitter.

Now that we have a connection to Twitter, we can connect our Azure Function to Twilio so that an SMS is sent to the twitter API.

var Twitter = require('twitter');

var client = new Twitter({
 consumer_key: 'xxxxxxxxxx',
 consumer_secret: 'xxxxxxxxxx',
 access_token_key: 'xxxxxxxxxx',
 access_token_secret: 'xxxxxxxxxx'
}); 

var tweet_count=3;
module.exports = function(context, req) {
 var tweets=getTweetsForWord(req.query.Body,context);
 sendToGoogle(tweets,context);
 context.done();
};

function getTweetsForWord(nam, context){
 var tweetsRecieved=[];
 var errorReturned={error:'none'};
 client.get('statuses/user_timeline', { screen_name: 'donaldtrump', count: tweet_count }, 
 function(error, tweets, response) {
     if (!error) {
       for(var i=0;i<tweets.length;i++){
        var thisTweet=tweets[i];
         this.tweetsRecieved.push(    {tweet_text:thisTweet.text,
 date:thisTweet.created_at,
 id:thisTweet.id});
           }
     }
     else {
      context.log("error");
      errorReturned.error=error;
     }
 });
 var ret= {tweets:this.tweetsRecieved};
 return ret;
}
 
function sendToGoogle(pak,context){
   //just gonna test for now
   for(var i=0;i<pak.tweets.length;i++){
      context.log(pak.tweets[i].tweet_text + " from "+pak.tweets[i].id);
   }
}

Now we have Twilio sending a post to Azure Functions, which calls Twitter, and formats a JSON object ready for sending to Google/Blogger..

next time.. hopefully…

Using Visual Studio Code to develop cross platform mobile applications using Apache Cordova

Well, the Microsoft OpenSourceSoftware love-in continues with the latest release from the tools team of TACO for Visual Studio Code. What this means is that you can now create Mobile Apps for Android and Windows (and IOS) using Visual Studio Code.

There are certain pre-requisites of course, having NodeJS installed, then installing Cordova as global.

If you haven’t installed Visual Studio, you may need to install the Windows Phone SDK.

If you want to support IOS, you’ll need an OSX machine, whether it is a Macbook, Macbook Air, or just a Mac Mini, it doesn’t really matter.

If you want to build to Android, ensure you have the Android SDK saved on the same computer you will be developing on. If you want to build for Windows Phone, well done, you’re doing the world a solid #breaktheapplefanboymonopolybydevelopingonawindowsphoneforfunandprofit.

Having said all that, go ahead and create a new folder for your project. Let’s just call it something relevant like “applesux”

Open up Visual Studio Code, and open up your folder.

Next, install the command palette by going via the menu, View>Command Palette or by pressing Ctrl-Shift-P then typing “install” and selecting Extensions. Then when the extension list appears, type “Cordova” and you should see the Cordova Tools by Visual Studio Mobile Tools.

Install the Cordova Extension

Select Cordova Extensions

Restart Visual Studio code, when prompted, then develop a mobile app.

Well, have fun and take care!

Oh, how funny am I!

Anyway, as long as Cordova and NodeJS were installed earlier, you’re ready to add your platforms.

Let’s start with the main platform, Windows Phone.
https://cordova.apache.org/docs/en/latest/guide/platforms/wp8/index.html

Open up a terminal console in the same “applesux” folder, and add a sample app for cordova by entering

cordova create . com.applesux.hello HelloWorld

You should see the Cordova files in the folder, so now it’s time to pick the intelligent platform of choice Windows 10 8 :\

Cordova platform add wp8

You should now be able to build to the windows phone!

To do that, you need to first set up the environment, by clicking on the debug icon on the left, then clicking the cog to get to the settings. Select the Cordova environment and make a cup of tea.

Having drinked the tea, maybe have a biscuit and another cup of tea. You’ll need the bathroom now, so don’t forget to wash those hands.

Being rehydrated, and calm, we can get on to building for windows phone. You’ll notice that in the Cordova config there currently (2016-01) is no support to debug on Windows phone (bet you’re glad you had that nice cup of tea), for that you’ll need Visual Studio (community will do).

No support for windows 10 debug, yet
No support for windows 10 debug, yet

Keep an eye out on the mobile tools blog for Windows Phone appearing. I’m guessing they’re readying up a windows phone 10 package for Cordova and release everything alongside that.

Instead, lets just “totes ship it (citation : needed)” as they say around the Silicon Roundabout.

Go back to the command prompt which you opened in your project folder, and type

Platforms/wp8/cordova run --device --release

You will now have a .xap package (zap) which you can deploy on your development phone in the /platforms/wp8/bin/release folder.

Search Windows for the “Windows Phone Application Deployment” tool by typing it into the windows 10 search box.

Windows Phone deployment

Browse to the release folder and select your xap. Make sure your dev phone is connected and click “deploy”.

Enjoy the fruits of your labour.

The experience for building Android and IOS apps is a bit better as building and debugging can be done through Visual Studio Code, but Windows 10 support won’t be that long coming, and I’ll update this post accordingly.

Until then, take care.

 

 

 

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

 

 

 

 

 

Retrieving records from Apache Cassandra using NodeJS v0.10.35 and ExpressJS v4.0 via a REST interface

The adventures in Cassandra continue, and following on from the last post I’m going to show how to set up a REST interface to retrieve records from Apache Cassandra via Nodejs,

I’ll only set up the GET for a list of items and an individual item, the PUT, POST and DELETE actions I’ll leave to you.

NodeJS is a server based runtime environment for Javascript which uses Googles V8 javascript engine. It has proven to be an extremely fast way of pushing content and has been around for about 5 years now.

It is single threaded, sacrificing session and context specific overheads to maximise throughput.

As with Cassandra it can cope with a great number of requests a second (~ 500rps on 150 concurrent requests), obviously scaling up for processor, and as it is stateless, can be scaled up into round robin farms to cope at massive sizes. (see the Paypal and eBay metrics for more stat-candy).

To achieve a full-javascript stack, node is often used to drive javascript test-runners and compilation programs at the developer side, then used again, alongside a web server, such as ExpressJS to serve server side content back to a javascript application.

NodeJS runs on a variety of flavours of server  and desktop platform, but I’m going to skip the install of nodejs and try to keep this walkthrough as platform agnostic as possible. A common feature of all platforms is the NPM (Node Package Manager), and this is what we’ll be using to install the ExpressJS and Cassandra libraries we will need to serve the content.

Firstly, I’ll create a folder to run this application from, then I’ll open up a command prompt and browse to the folder. Then I install express by entering the following.

npm install express

The folder should now have a node_modules folder, which will contain the express server code and its dependencies.

We will also need to add  a package.json file so that node can verify the app on running.

{
  "name": "nd.neilhighley.com",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "express": "~4.11.1"
  }
}

Next, I create my application folder structure as follows;

>bin
>www
>public
>>javascripts
>routes
>views

Now I add a few javascript files to the following folders;

>www
www.js

adding the following code for the webserver

#!/usr/bin/env node

var app = require('../app');
var http = require('http');

var port = normalizePort(process.env.PORT || '8080');
app.set('port', port);
var server = http.createServer(app);
server.listen(port);
server.on('error', onError);
server.on('listening', onListening);

function normalizePort(val) {
 var port = parseInt(val, 10);

 if (isNaN(port)) {
 // named pipe
 return val;
 }

 if (port >= 0) {
 // port number
 return port;
 }

 return false;
}

function onError(error) {
 if (error.syscall !== 'listen') {
 throw error;
 }

 var bind = typeof port === 'string'
 ? 'Pipe ' + port
 : 'Port ' + port

 // handle specific listen errors with friendly messages
 switch (error.code) {
 case 'EACCES':
 console.error(bind + ' requires elevated privileges');
 process.exit(1);
 break;
 case 'EADDRINUSE':
 console.error(bind + ' is already in use');
 process.exit(1);
 break;
 default:
 throw error;
 }
}

function onListening() {
 var addr = server.address();
 var bind = typeof addr === 'string'
 ? 'pipe ' + addr
 : 'port ' + addr.port;
}

The code above simply sets up the webserver to listen on port 8080,  and sets our application main file as app.js in the folder root.

Before delving into app.js, I need to set up the routes, this will trap any calls to a particular Uri, and pass them to the appropriate codebase.  I’m going to name this after the route I will be using, this is not a requirement, but will help you in future! 😉

>routes
somedata.js
var express = require('express');
var router = express.Router();

/* GET data. */
router.get('/somedata/', function(req, res, next) {
 var jsonToSend={Message:"Here is my resource"};
 res.json(jsonToSend);
});

module.exports = router;

Now, I can set up my app.js file in the folder root to contain the main application logic.

var express = require('express');
var path = require('path');
var routes = require('./routes/somedata');
var app = express();

// view engine setup
//app.set('views', path.join(__dirname, 'views'));
//app.set('view engine', 'jade');

app.use(express.static(path.join(__dirname, 'public')));
app.use('/', routes);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
 var err = new Error('Not Found');
 err.status = 404;
 next(err);
});

app.use(function(err, req, res, next) {
 res.status(err.status || 500);
 res.render('error', {
 message: err.message,
 error: err
 });
});

module.exports = app;

Lets do a quick test by starting the application

npm start

Then browsing to

http://localhost:8080/somedata

If all goes well, we will receive a JSON file as a response.

Now I can alter the routes file to mirror a typical REST interface.

Replace the previous single GET function above with the following

/* GET data. */
router.get('/somedata/', function(req, res, next) {
 var jsonToSend={Message:"Here is my resource"};
 res.json(jsonToSend);
});

router.get('/somedata/:item_id', function(req, res, next) {
 var jsonToSend={Message:"Here is my resource of item "+req.params.item_id};
 res.json(jsonToSend);
});

Confirm the above by calling the following urls and checking the content;

http://localhost:8080/somedata/
http://localhost:8080/somedata/12

The second url should return with the message which has the item_id in it.

Now I have confirmed the framework running, I’ll connect to cassandra and retrieve the records. To do that we just need to replace the jsonToSend with the cassandra response.

So, install the cassandra node client, as follows, in the root of your application.

npm install cassandra-driver

Then to update the package.json, add the cassandra-driver, as installed, so package.json now looks like;

{
 "name": "nd.neilhighley.com",
 "version": "1.0.0",
 "private": true,
 "scripts": {
 "start": "node ./bin/www"
 },
 "dependencies": {
 "express": "~4.11.1",
 "cassandra-driver":"~1.0.2"
 }
}

I’ll use the same keyspace as the last blog post, so have a look there for details on setting up cassandra.

casswcfexample

Update the somedata.json file to the following

var express = require('express');
var router = express.Router();

var cassandra = require('cassandra-driver');
var async = require('async');

var client = new cassandra.Client({contactPoints: ['127.0.0.1'], keyspace: 'casswcfexample'});

function GetRecordsFromDatabase(callback) {
 client.execute("select tid,description,title from exampletable", function (err, result) {
 if (!err){
 if ( result.rows.length > 0 ) {
 var records = result.rows[0];
 callback(1,result.rows);
 } else {
 callback(1,{});
 }
 }else{
 callback(0,{});
 }

 });
 }

function GetRecords(res){
 var callback=function(status,recs){
 if(status!=1){
 res.json({Error:"Error"});
 }else{
 var jsonToSend={Results:recs};
 res.json(jsonToSend);
 }
 };

 GetRecordsFromDatabase(callback);
}

/* GET data. */
router.get('/somedata/', function(req, res, next) {
 GetRecords(res);
});

router.get('/somedata/:item_id', function(req, res, next) {
 var jsonToSend={Message:"Here is my resource from "+req.params.item_id};
 res.json(jsonToSend);
});

module.exports = router;

Now when we call the following url

http://localhost:8080/somedata/

We should receive the following (or similar).

{"Results":[{"tid":1,"description":"description","title":"first title"},{"tid":2,"description":"another description","title":"second title"}]}

If you get an error, it may mean that async and long may need to be installed in your application root also. Install them with the npm.

We can format the JSON returned by altering  the GetRecords function.

The GetRecord function will be almost identical to the GetRecords function, just passing in the Id and changing the CQL.

function GetRecordFromDatabase(passed_item_id,callback) {
 client.execute("select tid,description,title from exampletable where tid="+passed_item_id, function (err, result) {
 if (!err){
 if ( result.rows.length > 0 ) {
 var record = result.rows[0];
 callback(1,record);
 } else {
 callback(1,{});
 }
 }else{
 callback(0,{});
 }

 });
 }

function GetRecord(r_item_id,res){
 var callback=function(status,recs){
 if(status!=1){
 res.json({Error:"Error"});
 }else{
 var jsonToSend={Results:recs};
 res.json(jsonToSend);
 }
 };

 GetRecordFromDatabase(r_item_id,callback);
}

There are a few things that can be done to the above code, including;

– Place all CRUD operations in standard library
– Have middleware fulfill requests to enable client side error catching and cleaner implementation

Hope you have enjoyed the example above. Apologies for any typos, etc. 🙂

Until next time.