jueves, 1 de diciembre de 2016

Unity3D and Alexa working together

This post was originally posted on Unity3D and Alexa working together.


Since a long time...I had the idea of making Unity3D and Alexa work together...however...other project kept me away for actually doing it...so...a couple of days ago...a conversation with a friend made me remember that I actually really wanted to do this...so I did :)

At first...I wasn't exactly sure how to do it...but then slowly the main idea came into my mind...what if Unity read a webservice that gets updated by Alexa? When the right command is parsed, then Unity will create the object and problems is solved...seems easy? Well...it actually is...

First things first...we need to create a small NodeJS webserver on Heroku...then...we need to install the Heroku Toolbelt...

Now...create a folder called node_alexa and inside create the following files...

package.json
{
  "dependencies": {
    "express": "4.13.3"
  },
  "engines": {
    "node": "0.12.7"
  }
}

procfile
web: node index.js
index.js
var express = require('express')
    ,app = express()
    ,last_value;

app.set('port', (process.env.PORT || 5000));

app.get('/', function (req, res) {
  if(req.query.command == ""){
 res.send("{ \"command\":\"" + last_value + "\"}");
  }else{
 if(req.query.command == "empty"){
  last_value = "";
  res.send("{}");
 }else{
  res.send("{ \"command\":\"" + req.query.command + "\"}");
  last_value = req.query.command;
 }
  }
})

app.listen(app.get('port'), function () {
  console.log("Node app is running on port', app.get('port')");
})

Once you have that...log into your Heroku Toolbelt and write the following...

Heroku Toolbelt
cd node_alexa
git init .
git add .
git commit -m "Init"
heroku apps:create "yourappname"
git push heroku master
heroku ps:scale = web 0
heroku ps:scale = web 1

Your webservice is ready to rock :) You should be able to find by going to "http://yourappname.herokuapp.com/"

Now...this simple NodeJS powered webservice will serve as a simple Echo server...meaning...whatever you type will be returned as a json response...of course...if you type "empty" then the response will be a empty json...so the main idea here is that we can keep the last entered value...if you pass a command it will be called again when you don't pass any commands at all...so by calling it once...we can cal it multiple times without disrupting its value...
Next in line...will be to create our Unity app...

Create a new app and call it "WebService" or something like that...project name doesn't matter too much...

If the Hierarchy window select "Main Camera" and change the "Tranform" details like this...


Now, create a new "3D Object" -> "Cube" and name it "Platform" with the following "Transform" details...


After that, we might need to create four wall that will go around the platform...so create 4 "3D Object" -> "Cube" and name them "Wall 1", "Wall 2", "Wall 3" and "Wall 4"...





When everything is ready, your workspace should look like this...


Go to the project tab and create a new folder called "plugins" and then create a new C# file called "SimpleJSON"...inside copy the source code from here...this will allow us to use SimpleJSON to parse the JSON...

Now...create another folder called "Script" and inside create a new C# file called "MetaCoding"...or whatever you like...



MetaCoding.cs
using UnityEngine;
using System.Collections;
using System.Net;
using System.IO;
using SimpleJSON;

public class MetaCoding : MonoBehaviour {

    int counter = 1;

    IEnumerator DownloadWebService()
    {
        while (true) { 
            WWW w = new WWW("http://yourapp.herokuapp.com/?command");
            yield return w;

            print("Waiting for webservice\n");

            yield return new WaitForSeconds(1f);

            print("Received webservice\n");
        
            ExtractCommand(w.text);

            print("Extracted information");

            WWW y = new WWW("http://yourapp.herokuapp.com/?command=empty");
            yield return y;

            print("Cleaned webservice");

            yield return new WaitForSeconds(5);
        }
    }

    void ExtractCommand(string json)
    {
        var jsonstring = JSON.Parse(json);
        string command = jsonstring["command"];
        print(command);
        if (command == null) { return;  }
        string[] commands_array = command.Split(" "[0]);
        if(commands_array.Length < 3)
        {
            return;
        }
        if (commands_array[0] == "create")
        {
            CreateObject(commands_array[1], commands_array[2]);
        }
    }

    void CreateObject(string color, string shape)
    {

        string name = "NewObject_" + counter;
        counter += 1;
        GameObject NewObject = new GameObject(name);

        switch (shape)
        {
            case "cube":
                NewObject = GameObject.CreatePrimitive(PrimitiveType.Cube);
                break;
            case "sphere":
                NewObject = GameObject.CreatePrimitive(PrimitiveType.Sphere);
                break;
            case "cylinder":
                NewObject = GameObject.CreatePrimitive(PrimitiveType.Cylinder);
                break;
            case "capsule":
                NewObject = GameObject.CreatePrimitive(PrimitiveType.Capsule);
                break;
        }
        NewObject.transform.position = new Vector3(0, 5, 0);
        NewObject.AddComponent();
        switch (color)
        {
            case "red":
                NewObject.GetComponent().material.color = Color.red;
                break;
            case "yellow":
                NewObject.GetComponent().material.color = Color.yellow;
                break;
            case "green":
                NewObject.GetComponent().material.color = Color.green;
                break;
            case "blue":
                NewObject.GetComponent().material.color = Color.blue;
                break;
            case "black":
                NewObject.GetComponent().material.color = Color.black;
                break;
            case "white":
                NewObject.GetComponent().material.color = Color.white;
                break;
        }
    }

        // Use this for initialization
    void Start () {
        print("Started webservice import...\n");

        StartCoroutine(DownloadWebService());
    }
 
 // Update is called once per frame
 void Update () {
 
 }
}

Once you have the code...simply attach the script to the Main Camera...


The basic concept for this script is pretty simple...We're creating "DownloadWebService" as an IEnumerator method so we can call it as a Coroutine...and that allow us to have a sleep as we want to give some time between calls...

This method will fetch our Heroku WebService looking for a "create" command...once it has it...it will parse the JSON response and split in 3...so we can have..."create", "blue" and "sphere"...this will call CreateObject which will then create a blue sphere...after we have done that...the coroutine will continue as simply send a new command to our WebService to clean the output...to make this work nicely...we want to give 5 seconds after we clean the webservice before trying to see if there's another "create" call...

And this call be will be done by our Alexa skill...so basically when saying "create blue sphere" on Alexa...she will be send the command to the WebService...update the message and our Unity app will grab it...do its work...and clean up the Webservice...the wait for Alexa to provide the next command...
So...to kind of wrap up...we need to create our Alexa skill...

First, we're going to create a Lambda function...so log in here...

Of course...I have everything already setup...so I'm going to create a dummy function just to show the steps...

Click on "Create Lambda Function" and you will be presented with this...


There's a bunch of course...so type in "Color" in the filter box...


Choose "alexa-skills-kit-color-expert"


Leave this as it is and press "Next"


Choose a name and a description...


Choose an existing role if you have it already...otherwise just create a lambda_basic_execution...then raise up Timeout to 10 seconds and leave everything else as it is...press "Next"...a confirmation window will appear...so just press "Create function"...

You will be presented with a screen where you can upload your source code (which will be doing later on) and an ARN number...which we need for the next step...


The following part deals with create the Alexa skill...so please follow along...and log in here...


Choose "Alexa Skills Kit"...and create a new skill...



Choose a name for you skill and the most important...choose an "Invocation Name"...which is what you're going to use tell Alexa to open you application...something like..."Alexa, open Sandbox"...click next...

On the Interaction Model tab we have two windows...fill this on "Intent Schema"...

Intent Schema
{
  "intents": [
    {
      "intent": "GetUnityIntent",
      "slots": [
        {
          "name": "color",
          "type": "LITERAL"         
        },
        {
          "name": "shape",
          "type": "LITERAL"
        }
      ]
    },
    {
      "intent": "HelpIntent",
      "slots": []
    }
  ]
}

This are basically the parameters that we can use when asking Alexa to do something...

And fill this on "Sample Utterances"...

Sample Utterances
GetUnityIntent create {red|color} {sphere|shape}
GetUnityIntent create {yellow|color} {sphere|shape}
GetUnityIntent create {green|color} {sphere|shape}
GetUnityIntent create {blue|color} {sphere|shape}
GetUnityIntent create {black|color} {sphere|shape}
GetUnityIntent create {white|color} {sphere|shape}

GetUnityIntent create {red|color} {cube|shape}
GetUnityIntent create {yellow|color} {cube|shape}
GetUnityIntent create {green|color} {cube|shape}
GetUnityIntent create {blue|color} {cube|shape}
GetUnityIntent create {black|color} {cube|shape}
GetUnityIntent create {white|color} {cube|shape}

GetUnityIntent create {red|color} {cylinder|shape}
GetUnityIntent create {yellow|color} {cylinder|shape}
GetUnityIntent create {green|color} {cylinder|shape}
GetUnityIntent create {blue|color} {cylinder|shape}
GetUnityIntent create {black|color} {cylinder|shape}
GetUnityIntent create {white|color} {cylinder|shape}

GetUnityIntent create {red|color} {capsule|shape}
GetUnityIntent create {yellow|color} {capsule|shape}
GetUnityIntent create {green|color} {capsule|shape}
GetUnityIntent create {blue|color} {capsule|shape}
GetUnityIntent create {black|color} {capsule|shape}
GetUnityIntent create {white|color} {capsule|shape}

GetUnityIntent {thank you|color}

This are all the commands that Alexa can understand...and yes...we could have used "Custom Slot Types" to make the code shorter...but...I have had the problems of not working pretty well with more than one slot...simply hit next...


Here, choose AWS Lambda ARN...and pick either North America or Europe depending on your physical location...the on the text box...simply copy and paste the ARN that you received from your Lambda function...

This will send you to the "Test" tab...but we don't want to and actually we can't use that yet...so go back to the "Skill Information" tab and you will find that a new field has appeared...

And that should be "Application Id"...copy this number and let's move on to the final step...

Create a folder called "Unity" and inside a folder called "src"...inside that folder copy this file "AlexaSkills.js"

We're going to use the "request" module of NodeJS...so install it locally on the Unity folder like this...

sudo npm install --prefix=~/Unity/src request 

This will create a node_module folder with the request module on it...

Then, create a new file called "index.js"


index.js
var request = require("request")
  , AlexaSkill = require('./AlexaSkill')
    , APP_ID     = 'yourappid';

var error = function (err, response, body) {
    console.log('ERROR [%s]', err);
};

var getJsonFromUnity = function(color, shape, callback){

var command = "create " + color + " " + shape;

if(color == "thank you"){
 callback("thank you");
}
else{
var options = { method: 'GET',
  url: 'http://yourapp.herokuapp.com/',
  qs: { command: command },
  headers: 
   { 'postman-token': '230914f7-c478-4f13-32fd-e6593d8db4d1',
     'cache-control': 'no-cache' } };

var error_log = "";

request(options, function (error, response, body) {
 if (!error) {
  error_log = color + " " + shape;
 }else{
  error_log = "There was a mistake";
 }
  callback(error_log);
    });
}
}

var handleUnityRequest = function(intent, session, response){
  getJsonFromUnity(intent.slots.color.value,intent.slots.shape.value, function(data){
 if(data != "thank you"){
 var text = 'The ' + data + ' has been created';
 var reprompt = 'Which shape would you like?';
    response.ask(text, reprompt);
 }else{
  response.tell("You're welcome");
 }
  });
};

var Unity = function(){
  AlexaSkill.call(this, APP_ID);
};

Unity.prototype = Object.create(AlexaSkill.prototype);
Unity.prototype.constructor = Unity;

Unity.prototype.eventHandlers.onSessionStarted = function(sessionStartedRequest, session){
  console.log("onSessionStarted requestId: " + sessionStartedRequest.requestId
      + ", sessionId: " + session.sessionId);
};

Unity.prototype.eventHandlers.onLaunch = function(launchRequest, session, response){
  // This is when they launch the skill but don't specify what they want.

  var output = 'Welcome to Unity. Create any color shape by saying create and providing a color and a shape';

  var reprompt = 'Which shape would you like?';

  response.ask(output, reprompt);

  console.log("onLaunch requestId: " + launchRequest.requestId
      + ", sessionId: " + session.sessionId);
};

Unity.prototype.intentHandlers = {
  GetUnityIntent: function(intent, session, response){
    handleUnityRequest(intent, session, response);
  },

  HelpIntent: function(intent, session, response){
    var speechOutput = 'Create a new colored shape. Which shape would you like?';
    response.ask(speechOutput);
  }
};

exports.handler = function(event, context) {
    var skill = new Unity();
    skill.execute(event, context);
};

This code is very simple...because it mostly a template...you simply copy it...change a couple of things and you're ready to go...

Basically when you say "Alexa, open Unity"...she will listen for your requests...so you can say "create green cube"...so will call our Heroku WebService and the wait for another command...if you doesn't speak to her again...she will prompt you to say something...if you say "Thank you" she will politely deactivate herself...

And that's pretty much it...once Alexa send the command to the WebServer...our Unity App will read and act accordingly...creating whatever shape and color you requested...nice, huh?

But of course...you don't believe, don't you? It can't be that simple...well...yes and no...it's simple...but I took all the pain point and provide you with the nice and clean set of instructions...

So...here's how it looks like when you run the Unity app...



And here the action video...


Hope you like it...and stay tuned...because for me this was only a proof of concept...the real thing will become my next full time project...

Greetings,

Blag.
Development Culture.

LED is my new Hello World - Swift (for Linux) time

It took me some time to write this post...mainly because I'm now learning Rust and also because I just finished my latest demo...whose blog is coming later today -;)

This version of my LED Numbers app becomes the 25th language version...so...obviously...it's a pretty nice milestone for me -:D Who knows? Maybe I will do something nice if I can ever reach 50 languages -:D

Anyway...like I love to say..."Enough talk...show me the source code" -;)

LedNumbers.swift
let leds: [Character:String] = [
 "0" : " _  ,| | ,|_| ",
 "1" : "  ,| ,| ",
 "2" : " _  , _| ,|_  ",
 "3" : "_  ,_| ,_| ",
 "4" : "    ,|_| ,  | ",
 "5" : " _  ,|_  , _| ",
 "6" : " _  ,|_  ,|_| ",
 "7" : "_   , |  , |  ",
 "8" : " _  ,|_| ,|_| ",
 "9" : " _  ,|_| , _| "
];

print("Enter a number: ",terminator:"");
let num = readLine(strippingNewline: true);

var line = [String]();
var led = "";

for i in 0...2{
 for character in num!.characters{
  line = String(leds[character]!)!.
                       characters.split(separator: ",").map(String.init);
  print(line[i], terminator:"");
 }
 print("");
}

And here's the picture of it working its magic -:)


Greetings,

Blag.
Development Culture.

lunes, 28 de noviembre de 2016

My first post on Swift (for Linux)


As Apple kindly released Swift for Linux...I had to learn about it -:)

Of course...it's not fully implemented...so most of the things that makes Swift awesome on IOS are not here yet...but still...it's awesome! -:D

Swift is kind of functional...so you can see a lot from Haskell and Erlang...but it's also imperative and Object Oriented...so that makes it a really interesting language...

As usual...here's my Fibonacci numbers little app...

fibonacci.swift
func fib(num:Int,a:Int,b:Int) -> String{
 var result: String = "";
 if a > 0 && num > 1{
  result = result + String(a + b) + " " + 
           fib(num: (num - 1), a: (a + b), b: a);
 }else if a == 0{
  result = String(a) + " " + String(b) + " " + 
           String(a + b) + " " + 
           fib(num: (num - 1), a: (a + b), b: b);
 }
 return result;
}

print("Enter a number: ",terminator:"");
let number = Int(readLine(strippingNewline: true)!);

print(fib(num: number!, a: 0, b: 1));

And here's the result....


I already have the LED Numbers app ready...so just wait for it -;)

Greetings,

Blag.
Development Culture.

martes, 15 de noviembre de 2016

LED is my new Hello World - Perl Time

As promised...here's my LED Numbers a la Perl...and as always...please keep in mind that I'm Perl newbie...I know that there are more efficient, short and concise way of doing this app...but...how good is an introductory code that uses some obscure and arcane code? I don't want to scare people away from Perl...I want people to say "Hey...that doesn't look hard...I want to learn Perl"...

So...here it is...

LedNumbers.pl
#!/usr/bin/perl
use strict;
use warnings;
use diagnostics;

my %leds = (
 0 => ' _  ,| | ,|_| ',
 1 => '  ,| ,| ',
 2 => ' _  , _| ,|_  ',
 3 => '_  ,_| ,_| ',
 4 => '    ,|_| ,  | ',
 5 => ' _  ,|_  , _| ',
 6 => ' _  ,|_  ,|_| ',
 7 => '_   , |  , |  ',
 8 => ' _  ,|_| ,|_| ',
 9 => ' _  ,|_| , _| '
);

print "Enter a number: ";
my $num = <>;
my @numbers = ( $num =~ /\d/g );

for my $i (0 .. 2){
 for my $j (0 .. scalar(@numbers) - 1){
  my @line = split /\,/,$leds{$numbers[$j]};
  print $line[$i];
 }
 print "\n";
}

And here's the output...


And just so you know...this is my 24th version of this code...yep...I have written my LED Numbers app in 24 languages so far -;) What's going to be my end point? Who knows...programming is the limit -;)

Greetings,

Blag.
Development Culture.

My first post on Perl



So yes...I started to learn Perl...why? 3 simple reasons...


  1. I love programming.
  2. For me...Perl belongs to the whole trinity of Scripting Languages along with Ruby and Python (Sorry PHP...you don't make the cut)
  3. Because...it's Perl! Come on!

So...I have been reading Beginning Perl...an awesome book by the way...



If you're using any flavor of Linux or Mac...you should have Perl installed already...if you're using Windows...well...you can always download it and install it -:)

So far...I love Perl...it's pretty amazing...and now I can see why people say that both Python and Ruby heavily borrow stuff from Perl...and sure...PHP too...

I don't have of course much experience...but as always...I start doing a simple and small program to get me into the right track...so here's my Fibonacci numbers app...

fibonacci.pl
#!/usr/bin/perl
use strict;
use warnings;
use diagnostics;

sub fib {
 my ($num,$a,$b) = @_;
 my $result = '';
 if ($a>0 && $num>1){
  $result = $result . ($a+$b) . " " . fib($num-1,$a+$b,$a)
 }elsif($a == 0){
  $result = $a . " " . $b . " " . ($a+$b) . " " . fib($num-1,$a+$b,$b)
 }
 return $result
}

print "Enter a number: ";
my $num = <>;

print(fib($num,0,1));

And here's the nice output...


By now...I already have my classic "LED Numbers" app ready...but that goes into another post -;)

Greetings,

Blag.
Development Culture.

martes, 9 de agosto de 2016

Microsoft HoloLens on SAP’s d-shop

This post was originally posted on Microsoft HoloLens on SAP’s d-shop.


One of SAP’s d-shop main goals is to gather, learn and share knowledge on the latest technologies and Microsoft HoloLens haven’t been out of our radar -;)

But…what is HoloLens?


HoloLens is a Mixed reality device…which is basically a mix of Virtual (Oculus Rift) and Augmented (Google Glass) Realities.

One of the most important features on Mixed Reality is that it allows you to create Holograms that can be blended into the real world and interact with them.

HoloLens will map your room and recognize that you have a coffee table, a sofa, a lamp, and so on…when you place your Holograms on a table or sofa, the Hologram will not go through it, but instead sit on it…and this allows to do amazing things like creating a Hologram of a lamp to be placed next the sofa and see how it looks. And that’s just one of the many uses cases that HoloLens can provide.

At the d-shop Silicon Valley, we believe that using and coding the HoloLens is an awesome experience.

So…what you do need to start coding and creating amazing experiences?

In this page you will find all the tools that you need, which includes Visual Studio, a tailor made version of Unity3D and the HoloLens emulator.

Also, it would be really good for you to take a look at the Holographic Academy videos…which guide you through the basics notions of HoloLens coding…

But…with this blog what we really want to show you a video with some of the demos/projects that we have created at the d-shop Silicon Valley.

Word Clock With this app, you can literally read the time -;) This demonstrates text usage in Unity and it was adapted from a Python application.

d-shop Robot This app uses a d-shop robot model built using Blender. This demonstrate Spatial Mapping and simple voice commands.

SAP Puzzle Game This app displays a sliding puzzle game that has two modes…easy and hard…it demonstrates how to clip an image and distributed into multiple cubes, it also demonstrates basic voice commands and physics.

HoloHouse This app is a project built for a bank in Dubai to be used as a real state application. The models were build using 3ds Max by an external company. This app demonstrates how to use Unity scripting to rotate the houses, fade the lights, lift the roof and floors of the houses and display annotations.




Now that you have seen what can be done in a couple of weeks…why don’t you join us at the d-shop and show us what you can do! -:D

Greetings,

Blag.
Development Culture.

domingo, 7 de agosto de 2016

d-shop's very first Hololens Hackaton

This post was originally posted on d-shop's very first Hololens Hackaton.


On August, Wednesday 3 we hosted our d-shop’s very first Hololens Hackaton. People who had never used Unity3D before and of course who had never code for the Hololens before gathered together to have a fun and exciting learning experience.


Thanks to the hard work and organization efforts from my team partners Aaron Williams and Julia Satsuta we had three awesome guys from Microsoft Vlad Kolesnikov, Petri Wihelmsen and Jaime Rodriguez.


The first day was spend with explanations of what Hololens is…a quick introduction to Unity3D and a design thinking / brainstorming part where the teams could develop their ideas.

The second day started with Hololens coding and coaching from our side. People were totally excited and pumped up…trying things out on the Unity3D editor…on the Hololens emulator and on the device itself.

As a way to include more people and leave the teams working without too many distractions, we had a session on Hololens on Building 7…open for anyone to join in…




After that, we went back to keep coaching and helping the teams. They needed to be fully ready by 3:30pm as we had the demo presentation at 4:00pm.

The demo presentation happened at the cafeteria on Building 8.



We had 5 teams presenting their awesome work…

Holoterior

Design your dream room




Mechannotate
Order part on the go...don't waste your time filling sheets




Next Talent

Engage your newly hired talents by immersing them in your culture and history




TripIp

Planning your next trip? Get the seat that it's more comfortable for you




The Wesley Crushers

Is your pipe broken? Check it...measure it and request a replacement




As you can see…all the teams put a lot of effort and created some really awesome demos…but…there’s always need to be only one winner…so the last team to present was the team who won…so…congratulations “The Wesley Crushers” team!

After this really nice experience…I’m sure we’re going to come back for more…Hololens is still a brand new technology, so there’s still a lot to learn, a lot to hack and a lot of possibilities.

If you’re in Palo Alto…come and visit us! Remember that the d-shop is located on the first floor of Building 9 on Deer Creek Road -;)

Greetings,

Blag.
Development Culture.

sábado, 6 de febrero de 2016

There’s a party at Alexa’s place

This post was originally posted on There's a party at Alexa's place.


This is my first blog of the year…so I want it to be something really nice and huge -:) You know how much I love the R Programming Language…but I also love other technologies as well…so taking a bunch of them and hooking them up together is what really brings me joy.

Now…you may be wondering about the blog title…”There’s a party at Alexa’s place”…well…I wanted it to describe the blog in a funny way…so let’s see what we’re going to build -;)


Got any idea? Basically…we’re going to use Amazon Alexa as our UI…when we ask a command…we’re going to call a NodeJS Server on Heroku (Which BTW has a PhantomJS client installed)…this NodeJS will call an R Server on Heroku (Using the Rook Server)…and this R Server is going to call HANA Cloud Platform to get some Flights information and generate nice graphics that are going to be returned to the NodeJS Server which is going to call our web browser to display the graphic generated by the R Server…of course…by using PhantomJS were going to read the generated web page on the browser and this will be sent back to Amazon Alexa so she can read out the response…interesting enough for you? I hope -:) I took me more than two weeks to get all this up and running…so you better like it -:P

So…let’s go in some simple steps…

GET A HANA CLOUD PLATFORM ACCOUNT

You should have one already…if not…just go here to create one…

Then…we need to download the HANA Cloud Platform SDK extract it and modify the file tools/neo.sh on line 57…

Instead of this…

javaExe="$JAVA_HOME/bin/$javaCommand"

Use this…

javaExe="$JAVA_HOME"

Why? Well…it will make sense later on…or maybe it will make sense now  If you have the SAP HANA Client installed…otherwise download it from here take a note that will need to copy the ngdbc.jar file…

GETTING THE DATA THAT WE'RE GOING TO USE

As always…in almost all my blogs…we’re going to use tables from the Flight model…which of course…doesn’t exist on HANA Cloud Platform…

The easiest way (at least for me) was to access an R/3 server…and simply download the tables as XLS files…convert them into CSV files and upload them into HCP…

And BTW…for some weird reason my R/3 didn’t have American Airlines listen on the SCARR table…so I just added it -;)

Now…if you don’t have access to an R/3 system…then you can download the tables in CSV format from here

CREATE THE R SERVER ON HEROKU

If you don’t have the Heroku Tool Belt installed…then go and grab it…

Steps to install R on Heroku with Graphic Capabilities
mkdkir myproject && cd myproject
mkdir bin
echo “puts ‘OK’ > config.ru
echo “source ‘http://rubygems.org’\n gem ‘rack’” > Gemfile
#Open your project folder and modify the Gemfile to replace the “\n” with an actual break line…
bundle install
git init . && git add . && git commit –m “Init”
heroku apps:create myproject –stack=cedar
git push heroku master
#Copy and paste the content of my installR.sh into the /bin folder of your project
git add . && git commit –am “message” && git push heroku master
heroku ps:scale web=0

installR.sh
#!/bin/bash

function download() {
  if [ ! -f "$2" ]; then
    echo Downloading $2...
    curl $1 -o $2
  else
    echo Got $2...
  fi
}

set -e
 
r_version="${1:-3.2.3}"
r_version_major=${r_version:0:1}
 
if [ -z "$r_version" ]; then
  echo "USAGE: $0 VERSION"
  exit 1
fi
 
basedir="$( cd -P "$( dirname "$0" )" && pwd )"
 
# create output directory
vendordir=/app/vendor
mkdir -p $vendordir

# R
download http://cran.r-project.org/src/base/R-$r_version_major/R-$r_version.tar.gz R-$r_version.tar.gz
tar xzf R-$r_version.tar.gz

# build R
echo ============================================================
echo Building R
echo ============================================================
cd $basedir/R-$r_version/

./configure --prefix=$vendordir/R --with-blas --with-lapack --enable-R-shlib --with-readline=no --with-x=yes
make

cd /app/bin
ln -s R-$r_version/bin/R

rm R-3.2.3.tar.gz
rm -rf erb gem irb rake rdoc ri ruby testrb
rm ruby.exe

cd /app/bin/R-$r_version

rm -rf src
rm Make*
rm -rf doc
rm -rf tests
rm README ChangeLog COPYING INSTALL SVN-REVISION VERSION

Now…we need to do a very important step -:) We need to install the totally awesome heroku-buildpack-multi from ddollar.

heroku buildpacks:set https://github.com/ddollar/heroku-buildpack-multi.git

After that…we need to create a couple of files…one called .buildpacks and the other Aptfile.

.buildpacks
https://github.com/ddollar/heroku-buildpack-apt
https://github.com/heroku/heroku-buildpack-ruby
Aptfile
gfortran
libatlas-base-dev
libatlas-dev
liblapack-dev

Now comes the interesting part…installing R -;)

Finally...installing R...
git add . && git commit –am “message” && git push heroku master
heroku ps:scale web=0
heroku run bash
cd bin/
./installR.sh

With this done…we will have all the missing libraries needed to compile R on the new Cedar Stack on Heroku and also…we will have a nicely installed R instance with Graphic capabilities…but of course…we’re not done yet…

Installing the R Libraries
#This will open R on Heroku…
R
#This will install the libraries with their corresponding dependencies
install.packages("Rook",dependencies=TRUE)
install.packages("Cairo",dependencies=TRUE)
install.packages("maps",dependencies=TRUE)
install.packages("forecast",dependencies=TRUE)
install.packages("plotrix",dependencies=TRUE)
install.packages("ggplot2",dependencies=TRUE)
install.packages("ggmap",dependencies=TRUE)
install.packages("rJava",dependencies=TRUE)
install.packages("RJDBC",dependencies=TRUE)
q()

All right…we’re almost there -;) The problem with Heroku is that is not writable…meaning that once you get disconnected…you will lost all your work -:(

So…we need to back it up and sent it somewhere else…I used my R Server on Amazon WebServices for this…

First…we need to compress the bin folder like this…

tar -cvzf bin.tar.gz bin

and then we need to save this file in our external server…

scp -i XXX.pem bin.tar.gz ec2-user@X.X.X.X:~/Blag/bin.tar.gz

and of course after that we need it on our project folder…so we need to send it from our external server to our project folder, where will simply would need to uncompressed it…

scp -i XXX.pem ec2-user@X.X.X.X:~/Blag/bin.tar.gz bin.tar.gz

Once this is done…we need to something real quick…

If you’re still inside the Heroku bash…simply run

which java

and take note of the location…

Now…we can close Heroku and keep going…copy the bin.tar.gz file into your project folder and extract it…then…create the following files…

config.ru
`/app/bin/R-3.2.3/bin/R –e “source(‘/app/demo.R’)”`
demo.R
library("Rook")
library("ggmap")
library("maptools")
library("maps")
library("Cairo")
library("RJDBC")

myPort <- as.numeric(Sys.getenv("PORT"))
#myPort <- 8000
myInterface <- "0.0.0.0"
status <- .Call(tools:::startHTTPD, myInterface, myPort)

newapp<-function(env){
  req<-Rook::Request$new(env)
  res<-Rook::Response$new()

  pass<-system('./hcp.sh',intern=T)
  jdbcDriver <- JDBC("com.sap.db.jdbc.Driver","ngdbc.jar", identifier.quote="`")
  conn_server <- dbConnect(jdbcDriver, "jdbc:sap://localhost:30015", "DEV_6O3Q8EAM96G64Q8M0P5KLA1A3",pass[1])
  airports_param<- dbGetQuery(conn_server, "SELECT ID FROM NEO_BLR8NOQVY6TG8KXKQJ003WVOJ.SAIRPORT")
  sairport<-data.frame(IATA=airports_param$ID)
  airports<-read.csv("airports.dat", header = FALSE)
  colnames(airports)<-c("ID", "name", "city", "country", "IATA", "ICAO", "lat", "lon")
  airports<-subset(airports, IATA %in% sairport$IATA)
  keeps <- c("city","country","IATA","lat","lon")
  airports<-airports[keeps]    
  
  if(req$params()$airports != '')
  {
    count_sairport<-nrow(airports)
    mp <- NULL
    mapWorld <- borders("world", colour="gray50")
    mp <- ggplot() + mapWorld
    CairoJPEG(filename = "R_Plot.jpg", width = 680, height = 680)
    mp <- mp+ geom_point(aes(x=airports$lon, y=airports$lat) ,color="red", size=3) 
    show(mp)
    dev.off()
  }else if(req$params()$us_airports != '')
  {
    US_Airports<-airports[airports$country == "United States", ]
    count_sairport<-nrow(US_Airports)
    mp <- NULL
    mapWorld <- borders("state", colour="gray50")
    mp <- ggplot() +  mapWorld
    mp <- mp+geom_point(aes(x=US_Airports$lon, y=US_Airports$lat) ,color="red", size=3)+
           geom_text(data=US_Airports, aes(US_Airports$lon, US_Airports$lat, label = US_Airports$city), size=6)
    CairoJPEG(filename = "R_Plot.jpg", width = 680, height = 680)
    show(mp)
    dev.off()
  }else if(req$params()$carriers != '')
  {
    US_Airports<-airports[airports$country == "United States", ]
    US_Airports<-as.vector(t(US_Airports))
    US_Airports<-paste(shQuote(US_Airports), collapse=", ")
    #query<-paste("SELECT CARRID, DISTANCE FROM NEO_BLR8NOQVY6TG8KXKQJ003WVOJ.SPFLI WHERE AIRPFROM IN (",US_Airports,")")
    query<-paste("SELECT SPFLI.CARRID,CARRNAME,DISTANCE FROM NEO_BLR8NOQVY6TG8KXKQJ003WVOJ.SPFLI 
             INNER JOIN NEO_BLR8NOQVY6TG8KXKQJ003WVOJ.SCARR ON SPFLI.CARRID = SCARR.CARRID
             WHERE AIRPFROM IN (",US_Airports,")")
    result<-dbGetQuery(conn_server,query)
    result$DISTANCE<-sub(",\\d+","",result$DISTANCE)
    result$DISTANCE<-sub("\\.","",result$DISTANCE)
    carriers<-data.frame(CARRID=result$CARRID,CARRNAME=result$CARRNAME,
                         DISTANCE=as.numeric(result$DISTANCE),stringsAsFactors = FALSE)
    carriers_sum<-aggregate(DISTANCE~CARRID + CARRNAME,data=carriers,FUN=sum)
    cols<-c('CARRNAME','DISTANCE')
    data <- apply( carriers_sum[ , cols ] , 1 , paste , collapse = " " )
    count_sairport<-paste(shQuote(data), collapse=", ")
    mp <- NULL
    CairoJPEG(filename = "R_Plot.jpg", width = 680, height = 680)
    mp<-ggplot(carriers_sum,aes(x=CARRID,y=DISTANCE,fill=CARRID))+
        geom_bar(position="dodge",stat="identity")
    show(mp)
    dev.off()
  }
  
  size <- as.integer(system("stat --format %s R_Plot.jpg", intern=T))
  to.read = file("R_Plot.jpg", "rb")
  #x<-readBin(to.read, raw(),n=18674)
  x<-readBin(to.read, raw(),n=size)
  hex<-paste(x, collapse = "")
  hex<-paste(hex,count_sairport,sep = "/")
  close(to.read)
  
  res$write(hex)
  res$finish()
}

unlockBinding("httpdPort", environment(tools:::startDynamicHelp))
assign("httpdPort", myPort, environment(tools:::startDynamicHelp))

server = Rhttpd$new()
server$listenAddr <- myInterface
server$listenPort <- myPort
server$add(app = newapp, name = "summarize")

while(T) {
  Sys.sleep(10000)
}

So…let’s take some time to understand what’s going on with this code…we’re going to create a Rook server…which will allow us to host webpages from R…then, we’re going to use our hcp.sh script to get the password for our HANA Cloud Platform bridge…so we can get an JDBC connection to the database…from there we want to get a list of all the airports and also read the airports from a file detailed later (this airports file contains the geolocation of the airports). With this…we want to filter out the airports from HANA with the airports from the flight…so we don’t have any extra data…now…we have three choices…airports, US airports or carriers…the first one will generate a map of the world with all the airports as little red dots…the second one will generate a map of the US with the airports as little red dots but also showing the name of the cities…the last one will generate a geometric histogram with the details of the flights distance according to their carriers…later on…we’re going to read the information of the generated graphic to create a hexadecimal string of the graphic along with some information that Alexa should spell out…easy as cake, huh?

Procfile
web: bundle exec rackup config.ru

We want this R Server to be able to access HANA Cloud Platform…so let’s do that before we keep going…

With the location of Java…apply this command…

heroku config:set JAVA_HOME='/usr/bin/java'

Now…Copy the following files into your project folder…

“tools” folder from the HANA Cloud Platform SDK
ngdbc.jar from SAP HANA Client

Also…create this little script which is going to allow us to connect to HCP…

hcp.sh
#!/bin/bash -e

user=YourUserName
account=YourAccount
HCP_PASSWORD=YourPassword

json=$(tools/./neo.sh open-db-tunnel -i blaghanax -h hanatrial.ondemand.com -a 
       "$account" -u "$user" -p "$HCP_PASSWORD" --background --output json)
regex='.*"host":"([^"]*)".*"port":([^,]*),.*"instanceNumber":"([^"]*)".
        *"dbUser":"([^"]*)".*"dbUserPassword":"([^"]*)".*"sessionId":"([^"]*)".*'
[[ $json =~ $regex ]]
dbHost=${BASH_REMATCH[1]}
dbPort=${BASH_REMATCH[2]}
dbInstance=${BASH_REMATCH[3]}
dbUser=${BASH_REMATCH[4]}
dbPassword=${BASH_REMATCH[5]}
tunnelSessionId=${BASH_REMATCH[6]}

echo $dbPassword

Awesome…we’re almost there…please download this airports file and place it on your project folder…

Finally…with all files in place we can send everything back to heroku…so log into your Heroku tool belt and do the following…

Getting everything in place
git add .
git commit –am “message”
git push heroku master
heroku ps:scale web=1

R should be installed and ready to go -;) So we should move on and continue with our NodeJS server on Heroku…

Creating NodeJS on Heroku with PhantomJS

Create a folder called mynodeproject and inside create the following files…

package.json
{
  "dependencies": {
    "ws": "1.0.1",
    "request": "2.67.0",
    "express": "4.13.3",
    "phantomjs-prebuilt": "2.1.3"
  },
  "engines": {
    "node": "0.12.7"
  }
}
Procfile
web: node index.js
index.js
var WebSocketServer = require("ws").Server
  , http = require("http")
  , express = require("express")
  , request = require('request')
  , fs = require('fs')
  , app = express()
  , arr = []
  , msg = ""
  , port = process.env.PORT || 5000
  , childProcess = require('child_process')
  , phantomjs = require('phantomjs-prebuilt')
  , path = require('path')
  , binPath = phantomjs.path;

app.use(express.static(__dirname + "/"))

var server = http.createServer(app)
server.listen(port)

var wss = new WebSocketServer({server: server})

var childArgs = [path.join(__dirname, 'phantom.js')]
var childStats = [path.join(__dirname, 'readphantom.js')]

app.get('/path', function (req, res) {
 if(req.query.command == 'map'){
  URL = "http://blagrookheroku.herokuapp.com/custom/summarize?airports=xyz&us_airports=&carriers=";
  request(URL, function (error, response, body) {
   if (!error) {
    arr = body.split("/");
    msg = "There are " + arr[1] + " airports around the world";
    var bitmap = new Buffer(arr[0], 'hex');
    var jpeg = new Buffer(bitmap,'base64');
    fs.writeFileSync('Graph.jpg', jpeg);
    res.redirect('/');
   };
  });
 }else if(req.query.command == 'usmap'){
  URL = "http://blagrookheroku.herokuapp.com/custom/summarize?airports=&us_airports=xyz&carriers=";
  request(URL, function (error, response, body) {
   if (!error) {
    arr = body.split("/");
    msg = "There are " + arr[1] + " airports in the US";
    var bitmap = new Buffer(arr[0], 'hex');
    var jpeg = new Buffer(bitmap,'base64');
    fs.writeFileSync('Graph.jpg', jpeg);
    res.redirect('/');
   };
  });
 }else if(req.query.command == 'carriers'){
  URL = "http://blagrookheroku.herokuapp.com/custom/summarize?airports=&us_airports=&carriers=xyz";
  request(URL, function (error, response, body) {
   if (!error) {
    arr = body.split("/");
    msg = "" + arr[1];
    var bitmap = new Buffer(arr[0], 'hex');
    var jpeg = new Buffer(bitmap,'base64');
    fs.writeFileSync('Graph.jpg', jpeg);
    res.redirect('/');
   };
  });
 }else if(req.query.command == 'stat') {
  childProcess.execFile(binPath, childArgs, function(err, stdout, stderr){
   if(!err){
    res.redirect('/');
   };
  });
 }else if(req.query.command == 'readstat') {
  childProcess.execFile(binPath, childStats, function(err, stdout, stderr){
   if(!err){
    res.write(stdout);
    res.end();
   };
  });  
 }else if(req.query.command == 'bye'){
  if(fs.existsSync('Graph.jpg')){
   fs.unlink('Graph.jpg');
  }
  res.redirect('/');
 }
});

wss.on("connection", function(ws) {
  var id = setInterval(function() {
   
  fs.readFile('Graph.jpg', function(err, data) {
    if(!err){
    ws.send(JSON.stringify("Graph.jpg/" + msg), function() {  })
 }else{
    ws.send(JSON.stringify("Gandalf.jpg/No problem...I'm crunching your data..."), function() {  })
 }
  });
  }, 3000)

  ws.on("close", function() {
    clearInterval(id)
  })
})

Let’s explain the code for a little bit and believe me…I’m far from being a NodeJS expert…this is really the first time I develop something this complex…and it took me a really long time and tons of research…so please try not to criticize me too much -:(

We’re going to create a express application that uses Web Sockets in order to refresh the browser in order to show the graphics generated by our R Server…it will also call PhantomJS to both create and read the generated web page so we can send it back to Alexa…

Here…we have six choices…map, usmap and carriers…the first three are going to call our R Server passing all parameters but leaving the ones that we don’t need empty…and just passing “xyz” as parameter…

When we got the response from R it’s going to be a long string separated by an “/”…which is going to be the hexadecimal string for the graphic along with the text intended for Alexa…Node will read the graphic…generated it and then refresh the browser in order to show it on the screen…

The stats option will call our PhantomJS script to simply read the page and create a new file with the Javascript part already executed…the readstat will read this information and extract the text that we need for Alexa…finally…bye will delete the graphic and the web socket will call the main graphic to be displayed on the screen.

Finally…the web socket is going to constantly check…every 3 seconds to see if there’s a graphic or not…and the display the related image…

index.html
<html>
  <head>
 <title>I'm a NodeJS Page!</title> 
 <div id="container" align="center"/>
    <script>
      var host = location.origin.replace(/^http/, 'ws')
      var ws = new WebSocket(host);
      ws.onmessage = function (event) {
    var container = document.getElementById('container');
          var data = JSON.parse(event.data);
          data = data.split("/");
          var url = data[0];
          var msg = data[1];
          
          container.innerHTML = '<img src="' + url + '"></br><p><b>' + msg + '</b></p>';
      };
    </script>
  </head>
  <body>
  </body>
</html>

This one is going to be called by our express application and it will simply call the web socket to determine what it needs to display…it has some Javascript…that’s why we need PhantomJS to interact with it…

phantom.js
var page = require('webpage').create();
var fs = require('fs');
page.open('http://blagnodeheroku.herokuapp.com/', function () {
 window.setTimeout(function () {
    page.evaluate(function(){

    });

    fs.write('stats.html', page.content, 'w');
    phantom.exit();
},4000);
});

Not the best and most describing name…but who cares -:P Anyway…this script will load the page…that is the express application…wait for 4 seconds for the Javascript to get generated and then create a web page called stats.html


readphantom.js
var page = require('webpage').create(),
    address = "stats.html";

    page.open(address, function (status) {
        if (status == 'success') {
                var results = page.evaluate(function() {
                    return document.querySelector('p').innerText.trim();
                });
 console.log(results);
 phantom.exit();
 }
    });

This script will simply read the stats.html page and return the text that it’s located inside the “p” tag…dead simple…

SETTING UP ALEXA

Creating the Lambda function


Now…we need to setup Alexa…so we can control everything via voice commands -:)

First…we need to go to Amazon Lambda and log in if you have an account…otherwise…please create one…and make sure you’re on the West Virginia region…


In the list of functions…look for color…


Choose the NodeJS one…Python has been included as well…but wasn’t when I started to work on this blog -:)


Here, just click next....


I already create the function…but you shouldn’t have a problem...


Basic execution role is more than enough…


This will provide a pop up window…simply press the “Allow” button and then “Create function”…we will include the source code later on…but notice the ARN generated number…because we’re going to need it on the next step…

Creating the Skill

Go to http://developer.amazon.com and log in…then choose Apps & Services --> Alexa --> Alexa Skills Set



Choose Alexa Skills Kit and fill the blanks...


As soon as we hit next an application number will be generated on a new field called Application ID. Grab this number as we’re going to need it for our application code.

The Interaction Model section is very important as here we’re going to define the “Intent Schema” and “Sample Utterances”…the first will define the parameters that we’re going to send to Alexa and the second is how we are going to call our application.

Intent Schema
{
  "intents": [
    {
      "intent": "GetFlightsIntent",
      "slots": [
        {
          "name": "command",
          "type": "LITERAL"
        }
      ]
    },
    {
      "intent": "HelpIntent",
      "slots": []
    }
  ]
}

Our variable is going to be called “command” and it’s going to be a LITERAL…other types are NUMBER, DATE, TIME and DURATION. The intent is the method that we’re going to call in our code…

Sample Utterances
GetFlightsIntent airports from {around the world|command}
GetFlightsIntent airports from {united states|command}
GetFlightsIntent flight distance from {carriers|command}
GetFlightsIntent {thank you|command}

The test section help us to say commands and see how Alexa responds…but we’re not going to do that here…we’re going to test it using a real Alexa device -;)

Forget about the Publishing Information section unless you really want to publish your application…
Create a folder call Flights…Alexa_Party…or whatever you fancy…then create a folder call src and copy this file in there…calling it AlexaSkills.js

We’re going to need to install only one library….”request”…

sudo npm install --prefix=~/Flights/src request

This will create a folder called “node_modules” with the package in our project folder…then create a file called “index.js” and copy and paste the following code…

index.js
var request = require("request")
  , AlexaSkill = require('./AlexaSkill')
  , APP_ID     = 'amzn1.echo-sdk-ams.app.8c0bd993-723f-4ab2-80b5-84402a7a59ce';

var error = function (err, response, body) {
    console.log('ERROR [%s]', err);
};

var getJsonFromFlights = function(command, callback){
 var msg = "";
 if(command == "thank you"){
 request("http://blagnodeheroku.herokuapp.com/path/?command=bye", function (error, response, body) {
  if (!error) {
   console.log("Done");
  };
 });
 setTimeout(function() {
  callback("thank you");
 },2000);
}else if (command == "around the world"){
 request("http://blagnodeheroku.herokuapp.com/path/?command=bye", function (error, response, body) {
 if (!error) {
 request("http://blagnodeheroku.herokuapp.com/path/?command=map", function (error, response, body) {
 if (!error) {
 request("http://blagnodeheroku.herokuapp.com/path/?command=stat", function (error, response, body) {
 if (!error) {
 request("http://blagnodeheroku.herokuapp.com/path/?command=readstat", function (error, response, body) {
 if (!error) {
 msg = body;
 };
 });
 };
 }); 
 };
 });
 }
 }); 
 setTimeout(function() {
  callback(msg.trim());
 },15000);
}else if (command == "united states"){
 request("http://blagnodeheroku.herokuapp.com/path/?command=bye", function (error, response, body) {
 if (!error) {
 request("http://blagnodeheroku.herokuapp.com/path/?command=usmap", function (error, response, body) {
 if (!error) {
 request("http://blagnodeheroku.herokuapp.com/path/?command=stat", function (error, response, body) {
 if (!error) {
 request("http://blagnodeheroku.herokuapp.com/path/?command=readstat", function (error, response, body) {
 if (!error) {
 msg = body;
 };
 });
 };
 }); 
 };
 });
 }
 }); 
 setTimeout(function() {
  callback(msg.trim());
 },15000);
}else if (command == "carriers"){
 request("http://blagnodeheroku.herokuapp.com/path/?command=bye", function (error, response, body) {
 if (!error) {
 request("http://blagnodeheroku.herokuapp.com/path/?command=carriers", function (error, response, body) {
 if (!error) {
 request("http://blagnodeheroku.herokuapp.com/path/?command=stat", function (error, response, body) {
 if (!error) {
 request("http://blagnodeheroku.herokuapp.com/path/?command=readstat", function (error, response, body) {
 if (!error) {
 msg = body;
 };
 });
 };
 }); 
 };
 });
 }
 }); 
 setTimeout(function() {
  callback(msg.trim());
 },15000);
 }
};
var handleFlightsRequest = function(intent, session, response){
  getJsonFromFlights(intent.slots.command.value, function(data){
 if(data != "thank you"){
  var text = data;
  var reprompt = 'Please say a command?';
  response.ask(text, reprompt);
 }else{
  response.tell("You're welcome");
 }
  });
};

var Flights = function(){
  AlexaSkill.call(this, APP_ID);
};

Flights.prototype = Object.create(AlexaSkill.prototype);
Flights.prototype.constructor = Flights;

Flights.prototype.eventHandlers.onSessionStarted = function(sessionStartedRequest, session){
  console.log("onSessionStarted requestId: " + sessionStartedRequest.requestId
      + ", sessionId: " + session.sessionId);
};

Flights.prototype.eventHandlers.onLaunch = function(launchRequest, session, response){
  // This is when they launch the skill but don't specify what they want.
  var output = 'Welcome to Flights. ' +
    'Please, say a command.';

  var reprompt = 'Please, say a command?';

  response.ask(output, reprompt);

  console.log("onLaunch requestId: " + launchRequest.requestId
      + ", sessionId: " + session.sessionId);
};

Flights.prototype.intentHandlers = {
  GetFlightsIntent: function(intent, session, response){
    handleFlightsRequest(intent, session, response);
  },

  HelpIntent: function(intent, session, response){
    var speechOutput = 'Get the information for airports and flights. ' +
      'Please say a command?';
    response.ask(speechOutput);
  }
};

exports.handler = function(event, context) {
    var skill = new Flights();
    skill.execute(event, context);
};

Time to explain what I was trying to do here -:P

The handleFlightsRequest method will manage the response that Alexa will spell out for us…and inside this method we can find getJsonFromFlights which will take the command defined in the our Intent Schema. This function will call our NodeJS server for the following commands…”thank you” will simply call the bye command….”around the world” will call the bye, map, stat and readstat commands…”united states” will call the bye, usmap, stat and readstat commands…finally carriers will call the bye, carriers, stat and readstat commands…

After 15 seconds (Yep…I know it’s too much but there are a lot of processes going on) Alexa will get the response message and simply speak it to us -;)

That’s pretty much it…now…I can show some images before we jump into the video…





Ok…enough…let’s watch this in real live action ;)





Greetings,

Blag.
Development Culture.