i18n AngularJS provider

July 20, 2015July 21, 2015 ~ Gonzalo Ayuso ~ 8 Comments

There’s more than one way to perform i18n translations within our AngularJS projects. IMHO the best one is https://angular-translate.github.io/, but today I’m going to show you how I’m doing translations in my small AngularJS projects (normally Ionic projects).

I’ve packaged my custom solution and I also create one bower package ready to use via bower command line:

[sourcecode language=”bash”]
bower install ng-i8n –save
[/sourcecode]

First we add our provider

[sourcecode language=”html”]
<script src=’lib/ng-i8n/dist/i8n.min.js’></script>
[/sourcecode]

And now we add our new module (‘gonzalo123.i18n’) to our AngularJS project
[sourcecode language=”js”]
angular.module(‘G’, [‘ionic’, ‘ngCordova’, ‘gonzalo123.i18n’])
[/sourcecode]

Now we’re ready to initialise our provider with the default language and translation data

[sourcecode language=”js”]
.config(function (i18nProvider, Conf) {
i18nProvider.init(Conf.defaultLang, Conf.lang);
})
[/sourcecode]

I like to use constants to store default lang and translation table, but it isn’t necessary. We can just pass the default language and Lang object to our provider

[sourcecode language=”js”]
.constant(‘Conf’, {
defaultLang: ‘es’,
lang: {
HI: {
en: ‘Hello’,
es: ‘Hola’
}
}
})
[/sourcecode]

And that’s all. We can translate key in templates (the project also provides a filter):
[sourcecode language=”html”]
<h1 class="title">{{ ‘HI’ | i18n }}</h1>
[/sourcecode]

And also inside our controllers
[sourcecode language=”js”]
.controller(‘HomeController’, function ($scope, i18n) {
$scope.hi = i18n.traslate(‘HI’);
})
[/sourcecode]

If we need to change user language, we only need to trigger ‘use’ function:
[sourcecode language=”js”]
.controller(‘HomeController’, function ($scope, i18n) {
$scope.changeLang = function(lang) {
i18n.use(lang);
};
})
[/sourcecode]

Here we can see the code of our provider:
[sourcecode language=”js”]
(function () {
"use strict";

angular.module(‘gonzalo123.i8n’, [])
.provider(‘i18n’, function () {
var myLang = {},
userLang = ‘en’,
translate;

translate = function (key) {
if (myLang.hasOwnProperty(key)) {
return myLang[key][userLang] || key;
} else {
return key;
}
};

this.$get = function () {
return {
use: this.use,
translate: translate
};
};

this.use = function (lang) {
userLang = lang;
};

this.init = function (lang, conf) {
userLang = lang;
myLang = conf;
};
})

.filter(‘i18n’, [‘i18n’, function (i18n) {
var i18nFilter = function (key) {
return i18n.translate(key);
};

i8nFilter.$stateful = true;

return i18nFilter;
}])
;
})();
[/sourcecode]

Anyway the project is in my github account

PHP Dumper using Websockets

May 11, 2015 ~ Gonzalo Ayuso ~ 3 Comments

Another crazy idea. I want to dump my backend output in the browser’s console. There’re several PHP dumpers. For example Raul Fraile’s LadyBug. There’re also libraries to do exactly what I want to do, such as Chrome Logger. But I wanted to use Websockets and dump values in real time, without waiting to the end of backend script. Why? The answer is simple: Because I wanted to it 🙂

I’ve written several post about Websockets, Silex, PHP. In this case I’ll use a similar approach than the previous posts. First I’ve created a simple Webscocket server with socket.io. This server also starts a Express server to handle internal messages from the Silex Backend

[sourcecode language=”js”]
var CONF = {
IO: {HOST: ‘0.0.0.0’, PORT: 8888},
EXPRESS: {HOST: ‘0.0.0.0’, PORT: 26300}
},
express = require(‘express’),
expressApp = express(),
server = require(‘http’).Server(expressApp),
io = require(‘socket.io’)(server, {origins: ‘localhost:*’})
;

expressApp.get(‘/:type/:session/:message’, function (req, res) {
console.log(req.params);
var session = req.params.session,
type = req.params.type,
message = req.params.message;

io.sockets.emit(‘dumper.’ + session, {title: type, data: JSON.parse(message)});
res.json(‘OK’);
});

io.sockets.on(‘connection’, function (socket) {
console.log("Socket connected!");
});

expressApp.listen(CONF.EXPRESS.PORT, CONF.EXPRESS.HOST, function () {
console.log(‘Express started’);
});

server.listen(CONF.IO.PORT, CONF.IO.HOST, function () {
console.log(‘IO started’);
});
[/sourcecode]

Now we create a simple Service provider to connect our Silex Backend to our Express server (and send the dumper’s messages using the websocket connection)

[sourcecode language=”php”]
<?php

namespace Dumper\Silex\Provider;

use Silex\Application;
use Silex\ServiceProviderInterface;
use Dumper\Dumper;
use Silex\Provider\SessionServiceProvider;
use GuzzleHttp\Client;

class DumperServiceProvider implements ServiceProviderInterface
{
private $wsConnector;
private $client;

public function __construct(Client $client, $wsConnector)
{
$this->client = $client;
$this->wsConnector = $wsConnector;
}

public function register(Application $app)
{
$app->register(new SessionServiceProvider());

$app[‘dumper’] = function () use ($app) {
return new Dumper($this->client, $this->wsConnector, $app[‘session’]->get(‘uid’));
};

$app[‘dumper.init’] = $app->protect(function ($uid) use ($app) {
$app[‘session’]->set(‘uid’, $uid);
});

$app[‘dumper.uid’] = function () use ($app) {
return $app[‘session’]->get(‘uid’);
};
}

public function boot(Application $app)
{
}
}
[/sourcecode]

Finally our Silex Application looks like that:
[sourcecode language=”php”]
include __DIR__ . ‘/../vendor/autoload.php’;

use Silex\Application;
use Silex\Provider\TwigServiceProvider;
use Dumper\Silex\Provider\DumperServiceProvider;
use GuzzleHttp\Client;

$app = new Application([
‘debug’ => true
]);

$app->register(new DumperServiceProvider(new Client(), ‘http://192.168.1.104:26300’));

$app->register(new TwigServiceProvider(), [
‘twig.path’ => __DIR__ . ‘/../views’,
]);

$app->get("/", function (Application $app) {
$uid = uniqid();

$app[‘dumper.init’]($uid);

return $app[‘twig’]->render(‘index.twig’, [
‘uid’ => $uid
]);
});

$app->get(‘/api/hello’, function (Application $app) {
$app[‘dumper’]->error("Hello world1");
$app[‘dumper’]->info([1,2,3]);

return $app->json(‘OK’);
});

$app->run();
[/sourcecode]

In the client side we have one index.html. I’ve created Twig template to pass uid to the dumper object (the websocket channel to listen to), but we also can fetch this uid from the backend with one ajax call.

[sourcecode language=”html”]
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Dumper example</title>
</head>
<body>

<a href="#" onclick="api(‘hello’)">hello</a>

<!– We use jQuery just for the demo. Library doesn’t need jQuery –>
<script src="assets/jquery/dist/jquery.min.js"></script>
<!– We load the library –>
<script src="js/dumper.js"></script>

I use jQuery to handle ajax request and to connect to the websocket dumper object (it doesn’t deppend on jQuery, only depend on socket.io)

[sourcecode language=”js”]
var dumper = (function () {
var socket, sessionUid, socketUri, init;

init = function () {
if (typeof(io) === ‘undefined’) {
setTimeout(init, 100);
} else {
socket = io(socketUri);

socket.on(‘dumper.’ + sessionUid, function (data) {
console.group(‘Dumper:’, data.title);
switch (data.title) {
case ’emergency’:
case ‘alert’:
case ‘critical’:
case ‘error’:
console.error(data.data);
break;
case ‘warning’:
console.warn(data.data);
break;
case ‘notice’:
case ‘info’:
//case ‘debug’:
console.info(data.data);
break;
default:
console.log(data.data);
}
console.groupEnd();
});
}
};

return {
startSocketIo: function (uid, uri) {
var script = document.createElement(‘script’);
var node = document.getElementsByTagName(‘script’)[0];

sessionUid = uid;
socketUri = uri;
script.src = socketUri + ‘/socket.io/socket.io.js’;
node.parentNode.insertBefore(script, node);

init();
}
};
})();
[/sourcecode]

Source code is available in my github account

Handling private states within AngularJS applications

March 19, 2015June 8, 2015 ~ Gonzalo Ayuso ~ Leave a comment

One typical task when we work with AngularJs application is login, and private states. We can create different states in our application. Something like this:

[sourcecode language=”js”]
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state(‘state1’, {
url: ‘/state1’,
templateUrl: templates/state1.html,
controller: ‘State1Controller’
})
.state(‘state2’, {
url: ‘/state2’,
templateUrl: templates/state2.html,
controller: ‘State2Controller’
})
$urlRouterProvider.otherwise(‘/state1’);
})
[/sourcecode]

One way to create private states is using $stateChangeStart event. We can mark our private states with state parameters:

[sourcecode language=”js”]
.state(‘privateState1’, {
url: ‘/privateState1’,
templateUrl: templates/privateState1.html,
controller: ‘PrivateState1Controller’,
data: {
isPublic: false
}
})
[/sourcecode]

And then we can check out this parameters within $stateChangeStart event, doing one thing or another depending on token is present or not

[sourcecode language=”js”]
.run(function ($rootScope) {
$rootScope.$on("$stateChangeStart", function (event, toState) {
if (toState.data && toState.data.isPublic) {
// do something here with localstorage and auth token
}
});
})
[/sourcecode]

This method works, but last days, reading one project of Aaron K Saunders at github, I just realised that there’s another method. We can listen to $stateChangeError. Let me show you how can we do it.

The idea is to use resolve in our private states. With resolve we can inject objects to our state’s controllers, for example user information. This method is triggered before call to the controller, so that’s a good place to check if token is present. If it isn’t, then we can raise an error. This error will trigger $stateChangeError event, and here we can redirect the user to login state.

It sounds good, but we need to write resolve parameter in every private states, and that’s bored. Especially when all states are private except login state. To by-pass this problem we can use abstract states. The idea is simple, we define one abstract state with “resolve” and then we create our private states under this abstract state.

Here we can see one example: login state isn’t private, but state1 and state2 are private, indeed.

[sourcecode language=”js”]
.config(function ($stateProvider, $urlRouterProvider) {
.state(‘login’, {
url: ‘/login’,
templateUrl: ‘templates/login.html’,
controller: ‘LoginController’
})
.state(‘private’, {
url: "/private",
abstract: true,
template: ‘<ui-view/>’,
resolve: {
user: function (UserService) {
return UserService.init();
}
}
})
.state(‘private.state1’, {
url: ‘/state1’,
templateUrl: ‘templates/state1.html’,
controller: ‘State1Controller’
})

.state(‘private.state2’, {
url: ‘/privateState2’,
templateUrl: ‘templates/state2.html’,
controller: ‘State2Controller’
});

$urlRouterProvider.otherwise(‘/private/privateState1’);
})
[/sourcecode]

Our UserService is a AngularJS service. This service provides three methods: init (the method that raises an error if token isn’t present), login (to perform login and validate credentials), and logout (to remove token from localstorage and redirects to login state)

[sourcecode language=”js”]
.service(‘UserService’, function ($q, $state) {
var user = undefined;

var UserService = {
init: function () {
var deferred = $q.defer();

// do something here to get user from localstorage

setTimeout(function () {
if (user) {
deferred.resolve(user);
} else {
deferred.reject({error: "noUser"});
}
}, 100);

return deferred.promise;
},

logout: function () {
// remove token from localstorage
user = undefined;
$state.go(‘login’, {});
}
};

return UserService
})
[/sourcecode]

And finally the magic in $stateChangeError

[sourcecode language=”js”]
.run(function ($rootScope, $state) {
$rootScope.$on(‘$stateChangeError’,
function (event, toState, toParams, fromState, fromParams, error) {
if (error && error.error === "noUser") {
$state.go(‘login’, {});
}
});
})
[/sourcecode]

And that’s all. IMHO this solution is cleaner than $stateChangeStart method. What do you think?

WARNING!
Before publishing this post I realize that this technique doesn’t work 100% correctly. Maybe is my implementation but I tried to use it with an ionic application and it doesn’t work with android. Something kinda weird. It works with web applications, it works with IOS, but it doesn’t work with Android. It looks like a bug (not sure about it). Blank screen instead of showing the template (but controller is loaded). We can see this anomalous situation using “ionic serve -l” (IOS ok and Android Not Ok)

To bypass this problem I tried a workaround. instead of using abstract states I create normal states, but to avoid to write again and again the resolve function to mark private states, I create a privateState provider

[sourcecode language=”js”]
.provider(‘privateState’, function () {
this.$get = function () {
return {};
};

this.get = function(obj) {
return angular.extend({
resolve: {
user: function (UserService) {
return UserService.init();
}
}
}, obj);
}
})
[/sourcecode]

Now I can easily create private states without writing ‘resolve’ function.

[sourcecode language=”js”]
.config(function ($stateProvider, $urlRouterProvider, privateStateProvider) {
$urlRouterProvider.otherwise(‘/home’);

$stateProvider
.state(‘home’, privateStateProvider.get({
url: ‘/home’,
templateUrl: ‘templates/home.html’,
controller: ‘HomeController’
}))
;
})
[/sourcecode]

Building a AngularJS provider for hello.js library

March 2, 2015 ~ Gonzalo Ayuso ~ 4 Comments

This days I’ve been playing with hello.js. Hello is a A client-side Javascript SDK for authenticating with OAuth2 web services. It’s pretty straightforward to use and well explained at documentation. I want to use it within AngularJS projects. OK, I can include the library and use the global variable “hello”, but it isn’t cool. I want to create a reusable module and available with Bower. Let’s start.

Imagine one simple AngularJS application

[sourcecode language=”js”]
(function () {
angular.module(‘G’, [])
.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/");
$stateProvider
.state(‘login’, {
url: "/",
templateUrl: "partials/home.html",
controller: "LoginController"
})
.state(‘home’, {
url: "/login",
template: "partials/home.html"
});
})

.controller(‘LoginController’, function ($scope) {
$scope.login = function () {
};
})
})();
[/sourcecode]

Now we can include our references within our bower.json file

[sourcecode language=”js”]
"dependencies": {
"hello": "~1.4.1",
"ng-hello": "*"
}
[/sourcecode]

and append those references to our index.html

[sourcecode language=”html”]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>G</title>

</body>
</html>
[/sourcecode]

Our ng-hello is just a service provider that wraps hello.js
[sourcecode language=”js”]
(function (hello) {
angular.module(‘ngHello’, [])
.provider(‘hello’, function () {
this.$get = function () {
return hello;
};

this.init = function (services, options) {
hello.init(services, options);
};
});
})(hello);
[/sourcecode]

That’s means that we configure the service in config callback and in our run callback we can set up events

[sourcecode language=”js”]
(function () {
angular.module(‘G’, [‘ngHello’])
.config(function ($stateProvider, $urlRouterProvider, helloProvider) {
helloProvider.init({
twitter: ‘myTwitterToken’
});

$urlRouterProvider.otherwise("/");
$stateProvider
.state(‘login’, {
url: "/",
templateUrl: "partials/home.html",
controller: "LoginController"
})
.state(‘home’, {
url: "/login",
template: "partials/home.html"
});
})

.run(function ($ionicPlatform, $log, hello) {
hello.on("auth.login", function (r) {
$log.log(r.authResponse);
});
});
})();
[/sourcecode]

And finally we can perform a twitter login within our controller

[sourcecode language=”js”]
(function () {
angular.module(‘G’)
.controller(‘LoginController’, function ($scope, hello) {
$scope.login = function () {
hello(‘twitter’).login();
};
})
;
})();
[/sourcecode]

And that’s all. You can see the whole library in my github account here

Using OpenUI5 table and Angularjs

January 12, 2015January 12, 2015 ~ Gonzalo Ayuso ~ 2 Comments

Last days I’ve been playing with OpenUI5. OpenUI5 is a web toolkit that SAP people has released as an open source project. I’ve read several good reviews about this framework, and because of that I started to hack a little bit with it. OpenUI5 came with a very complete set of controls. In this small example I want to use the “table” control. It’s just a datagrid. This days I playing a lot with Angular.js so I wanted to use together OpenUI5’s table control and Angularjs.

I’m not quite sure if it’s a good decision to use together both frameworks. In fact we don’t need Angular.js to create web applications using OpenUI5. OpenUI5 uses internally jQuery, but I wanted to hack a little bit and create one Angularjs directive to enclose one OpenUI5 datagrid.

First of all, we create one index.html. It’s just a boilerplate with angular + ui-router + ui-bootstrap. We also start our OpenUi5 environment with de default theme and including the table library

[sourcecode language=”html”]
<!doctype html>
<html ng-app="G">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

</body>
</html>
[/sourcecode]

Then we create a directive enclosing the OpenUI5 needed code within a Angular module

[sourcecode language=”js”]
(function () {
‘use strict’;

angular.module(‘ng.openui5’, [])
.directive(‘openui5Table’, function () {

function renderColumns(columns, oTable) {
for (var i = 0; i <= columns.length; i++) {
oTable.addColumn(new sap.ui.table.Column(columns[i]));
}
}

var link = function (scope, element) {

var oData = scope.model.data,
oTable = new sap.ui.table.Table(scope.model.conf),
oModel = new sap.ui.model.json.JSONModel();

oModel.setData({modelData: oData});
renderColumns(scope.model.columns, oTable);

oTable.setModel(oModel);
oTable.bindRows("/modelData");
oTable.sort(oTable.getColumns()[0]);

oTable.placeAt(element);

scope.$watch(‘model.data’, function (data) {
if (data) {
oModel.setData({modelData: data});
oModel.refresh();
}
}, true);

};

return {
restrict: ‘E’,
scope: {model: ‘=ngModel’},
link: link
};
});
}());
[/sourcecode]

And now we can create a simple Angular.js using the ng.openui5 module. In this application we configure the table and fetch the data from an externar API server

[sourcecode language=”js”]
(function () {
‘use strict’;

angular.module(‘G’, [‘ui.bootstrap’, ‘ui.router’, ‘ng.openui5’])

.value(‘config’, {
apiUrl: ‘/api’
})

.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/");
$stateProvider
.state(‘home’, {
url: "/",
templateUrl: "partials/home.html",
controller: ‘HomeController’
});
})

.controller(‘HomeController’, function ($scope, $http, $log, config) {
$scope.refresh = function () {
$http.get(config.apiUrl + ‘/gridData’).success(function (data) {
$scope.datagrid.data = data;
});
};

$scope.datagrid = {
conf: {
title: "Table example",
navigationMode: sap.ui.table.NavigationMode.Paginator
},
columns: [
{
label: new sap.ui.commons.Label({text: "Last Name"}),
template: new sap.ui.commons.TextView().bindProperty("text", "lastName"),
sortProperty: "lastName",
filterProperty: "lastName",
width: "200px"
}, {
label: new sap.ui.commons.Label({text: "First Name"}),
template: new sap.ui.commons.TextField().bindProperty("value", "name"),
sortProperty: "name",
filterProperty: "name",
width: "100px"
}, {
label: new sap.ui.commons.Label({text: "Checked"}),
template: new sap.ui.commons.CheckBox().bindProperty("checked", "checked"),
sortProperty: "checked",
filterProperty: "checked",
width: "75px",
hAlign: "Center"
}, {
label: new sap.ui.commons.Label({text: "Web Site"}),
template: new sap.ui.commons.Link().bindProperty("text", "linkText").bindProperty("href", "href"),
sortProperty: "linkText",
filterProperty: "linkText"
}, {
label: new sap.ui.commons.Label({text: "Image"}),
template: new sap.ui.commons.Image().bindProperty("src", "src"),
width: "75px",
hAlign: "Center"
}, {
label: new sap.ui.commons.Label({text: "Gender"}),
template: new sap.ui.commons.ComboBox({
items: [
new sap.ui.core.ListItem({text: "female"}),
new sap.ui.core.ListItem({text: "male"})
]
}).bindProperty("value", "gender"),
sortProperty: "gender",
filterProperty: "gender"
}, {
label: new sap.ui.commons.Label({text: "Rating"}),
template: new sap.ui.commons.RatingIndicator().bindProperty("value", "rating"),
sortProperty: "rating",
filterProperty: "rating"
}

]
};
})
;
}());
[/sourcecode]

The API server is a simple Silex server

[sourcecode language=”php”]
<?php
include __DIR__ . ‘/../../vendor/autoload.php’;
use Silex\Application;

$app = new Application();
$app->get("/", function (Application $app) {

$app->get(‘gridData’, function (Application $app) {
return $app->json([
[‘lastName’ => uniqid(), ‘name’ => "Al", ‘checked’ => true, ‘linkText’ => "www.sap.com", ‘href’ => "http://www.sap.com", ‘gender’ => "male", ‘rating’ => 4, ‘src’ => "images/person1.gif"],
[‘lastName’ => "Friese", ‘name’ => "Andy", ‘checked’ => true, ‘linkText’ => "www.sap.com", ‘href’ => "http://www.sap.com", ‘gender’ => "male", ‘rating’ => 2, ‘src’ => "images/person1.gif"],
[‘lastName’ => "Mann", ‘name’ => "Anita", ‘checked’ => false, ‘linkText’ => "www.sap.com", ‘href’ => "http://www.sap.com", ‘gender’ => "female", ‘rating’ => 3, ‘src’ => "images/person1.gif"],
[‘lastName’ => "Schutt", ‘name’ => "Doris", ‘checked’ => true, ‘linkText’ => "www.sap.com", ‘href’ => "http://www.sap.com", ‘gender’ => "female", ‘rating’ => 4, ‘src’ => "images/person1.gif"],
[‘lastName’ => "Open", ‘name’ => "Doris", ‘checked’ => true, ‘linkText’ => "www.sap.com", ‘href’ => "http://www.sap.com", ‘gender’ => "female", ‘rating’ => 2, ‘src’ => "images/person1.gif"],
[‘lastName’ => "Dewit", ‘name’ => "Kenya", ‘checked’ => false, ‘linkText’ => "www.sap.com", ‘href’ => "http://www.sap.com", ‘gender’ => "female", ‘rating’ => 3, ‘src’ => "images/person1.gif"],
[‘lastName’ => "Zar", ‘name’ => "Lou", ‘checked’ => true, ‘linkText’ => "www.sap.com", ‘href’ => "http://www.sap.com", ‘gender’ => "male", ‘rating’ => 1, ‘src’ => "images/person1.gif"],
[‘lastName’ => "Burr", ‘name’ => "Tim", ‘checked’ => true, ‘linkText’ => "www.sap.com", ‘href’ => "http://www.sap.com", ‘gender’ => "male", ‘rating’ => 2, ‘src’ => "images/person1.gif"],
[‘lastName’ => "Hughes", ‘name’ => "Tish", ‘checked’ => true, ‘linkText’ => "www.sap.com", ‘href’ => "http://www.sap.com", ‘gender’ => "male", ‘rating’ => 5, ‘src’ => "images/person1.gif"],
[‘lastName’ => "Lester", ‘name’ => "Mo", ‘checked’ => true, ‘linkText’ => "www.sap.com", ‘href’ => "http://www.sap.com", ‘gender’ => "male", ‘rating’ => 3, ‘src’ => "images/person1.gif"],
[‘lastName’ => "Case", ‘name’ => "Justin", ‘checked’ => false, ‘linkText’ => "www.sap.com", ‘href’ => "http://www.sap.com", ‘gender’ => "male", ‘rating’ => 3, ‘src’ => "images/person1.gif"],
[‘lastName’ => "Time", ‘name’ => "Justin", ‘checked’ => true, ‘linkText’ => "www.sap.com", ‘href’ => "http://www.sap.com", ‘gender’ => "male", ‘rating’ => 4, ‘src’ => "images/person1.gif"],
[‘lastName’ => "Barr", ‘name’ => "Gaye", ‘checked’ => true, ‘linkText’ => "www.sap.com", ‘href’ => "http://www.sap.com", ‘gender’ => "male", ‘rating’ => 2, ‘src’ => "images/person1.gif"],
[‘lastName’ => "Poole", ‘name’ => "Gene", ‘checked’ => true, ‘linkText’ => "www.sap.com", ‘href’ => "http://www.sap.com", ‘gender’ => "male", ‘rating’ => 1, ‘src’ => "images/person1.gif"],
[‘lastName’ => "Ander", ‘name’ => "Corey", ‘checked’ => false, ‘linkText’ => "www.sap.com", ‘href’ => "http://www.sap.com", ‘gender’ => "male", ‘rating’ => 5, ‘src’ => "images/person1.gif"],
[‘lastName’ => "Early", ‘name’ => "Brighton", ‘checked’ => true, ‘linkText’ => "www.sap.com", ‘href’ => "http://www.sap.com", ‘gender’ => "male", ‘rating’ => 3, ‘src’ => "images/person1.gif"],
[‘lastName’ => "Noring", ‘name’ => "Constance", ‘checked’ => true, ‘linkText’ => "www.sap.com", ‘href’ => "http://www.sap.com", ‘gender’ => "female", ‘rating’ => 4, ‘src’ => "images/person1.gif"],
[‘lastName’ => "Haas", ‘name’ => "Jack", ‘checked’ => true, ‘linkText’ => "www.sap.com", ‘href’ => "http://www.sap.com", ‘gender’ => "male", ‘rating’ => 2, ‘src’ => "images/person1.gif"],
[‘lastName’ => "Tress", ‘name’ => "Matt", ‘checked’ => true, ‘linkText’ => "www.sap.com", ‘href’ => "http://www.sap.com", ‘gender’ => "male", ‘rating’ => 4, ‘src’ => "images/person1.gif"],
[‘lastName’ => "Turner", ‘name’ => "Paige", ‘checked’ => true, ‘linkText’ => "www.sap.com", ‘href’ => "http://www.sap.com", ‘gender’ => "female", ‘rating’ => 3, ‘src’ => "images/person1.gif"]
]);
});
$app->run();
[/sourcecode]

And basically that’s all. You can see the whole project within my github account.

Why did this year has passed so swiftly? My 2014 Retrospective.

December 29, 2014 ~ Gonzalo Ayuso ~ Leave a comment

Today an original post. Maybe I’m the only one doing this, I know. 2014 is close to finish and I want to review how it went the year. Let’s start.

The bad parts:

My book about SOLID principles (in Spanish) isn’t released yet. It’s almost finished. It only needs a few reviews, but because one thing or another it looks like it isn’t be released this year. Lesson learned: Those kind of side projects must have a release date. If they haven’t, another side projects can grab our attention and they can be frozen.
No new languages learned this year. There was a good chance with Swift. A new language, but it didn’t attract my attention. Erlang books are still in my desk and also my aim to improve my Java skills didn’t success. I found nothing where apply my Java learning.

The good parts:

Finally I can say JavaScript is a first class language within my personal software stack. Various projects with JS this year and I feel very comfortable writing JavaScript code. That’s also the year of Angular.js (for me and probably a lot of people).
This year has been the year of mobile development for me. I’ve been involved with several projects using Cordova/Phonegap framework. I the beginning to install Cordova environment, compile, deploy the application into the device was something “heroic” but now it turns into trivial operations. I still remember my beginning with jQuery Mobile. Horrible. Then I started using Angular.js and Topcoat. Much better, but still problems when switching between Android and IOs. Finally I re-discover Ionic framework. Incredible project. Hybrid applications with angular.js with very complete toolkit. This year has been crowed by push notifications, camera plugins, barcode scanners, token based authorisations, Websockets and things like that. Now hybrid applications with Phonegap/Cordova live in my comfort zone along with Silex, Angular, PHP… (that’s means I need to find other places outside it)
The last part of the year I’ve been working a lot with automation tools: Bower and Grunt mainly. I also started to work with JavaScript testing with Karma and Jasmine
This year I’ve been a proud speaker at DeSymfony Day in Barcelona. On incredible weekend. Meeting with colleagues, speaker dinner, great conversations, and tourism in a great city. Definitely the most beautiful room for a conference that I ever been
Katayunos The coding dojo where we play with TDD and Pair Programming is still alive. Maybe not as continuous as I’d like, but we still meet together 20-25 people one Saturday morning to improve our programming skill, from time to time
My personal blog is still alive too. It’s close to be 5 years old (OK, technically speaking 6, but first year it wasn’t a serious one). More than 20k views per month and sometimes close to 30k (Hey, thank you for reading!)

And that’s all. It was a good year. Hopefully it will be worse than 2015 🙂

See you!

Enclosing socket.io Websocket connection inside a HTML5 SharedWorker

December 1, 2014 ~ Gonzalo Ayuso ~ 4 Comments

I really like WebSockets. I’ve written several posts about them. Today we’re going to speak about something related to WebSockets. Let me explain it a little bit.

Imagine that we build a Web Application with WebSockets. That’s means that when we start the application, we need to connect to the WebSockets server. If our application is a Single-page application, we’ll create one socket per application, but: What happens if we open three tabs with the application within the browser? The answer is simple, we’ll create three sockets. Also, if we reload one tab (a full refresh) we’ll disconnect our socket and reconnect again. Maybe we can handle this situation, but we can easily bypass this disconnect-connect situation with a HTML5 feature called SharedWorkers.

Web Workers allows us to run JavaScript process in background. We also can create Shared Workers. SharedWorkers can be shared within our browser session. That’s means that we can enclose our WebSocket server inside s SharedWorker, and if we open various tabs with our browser we only need one Socket (one socket per session instead one socket per tab).

I’ve written a simple library called gio to perform this operation. gio uses socket.io to create WebSockets. WebWorker is a new HTML5 feature and it needs a modern browser. Socket.io works also with old browsers. It checks if WebWorkers are available and if they isn’t, then gio creates a WebSocket connection instead of using a WebWorker to enclose the WebSockets.

We can see one simple video to see how it works. In the video we can see how sockets are created. Only one socket is created even if we open more than one tab in our browser. But if we open a new session (one incognito session for example), a new socket is created

Here we can see the SharedWorker code:
[sourcecode language=”js”]
"use strict";

importScripts(‘socket.io.js’);

var socket = io(self.name),
ports = [];

addEventListener(‘connect’, function (event) {
var port = event.ports[0];
ports.push(port);
port.start();

port.addEventListener("message", function (event) {
for (var i = 0; i < event.data.events.length; ++i) {
var eventName = event.data.events[i];

socket.on(event.data.events[i], function (e) {
port.postMessage({type: eventName, message: e});
});
}
});
});

socket.on(‘connect’, function () {
for (var i = 0; i < ports.length; i++) {
ports[i].postMessage({type: ‘_connect’});
}
});

socket.on(‘disconnect’, function () {
for (var i = 0; i < ports.length; i++) {
ports[i].postMessage({type: ‘_disconnect’});
}
});
[/sourcecode]

And here we can see the gio source code:

[sourcecode language=”js”]
var gio = function (uri, onConnect, onDisConnect) {
"use strict";
var worker, onError, workerUri, events = {};

function getKeys(obj) {
var keys = [];

for (var i in obj) {
if (obj.hasOwnProperty(i)) {
keys.push(i);
}
}

return keys;
}

function onMessage(type, message) {
switch (type) {
case ‘_connect’:
if (onConnect) onConnect();
break;
case ‘_disconnect’:
if (onDisConnect) onDisConnect();
break;
default:
if (events[type]) events[type](message);
}
}

function startWorker() {
worker = new SharedWorker(workerUri, uri);
worker.port.addEventListener("message", function (event) {
onMessage(event.data.type, event.data.message);

}, false);

worker.onerror = function (evt) {
if (onError) onError(evt);
};

worker.port.start();
worker.port.postMessage({events: getKeys(events)});
}

function startSocketIo() {
var socket = io(uri);
socket.on(‘connect’, function () {
if (onConnect) onConnect();
});

socket.on(‘disconnect’, function () {
if (onDisConnect) onDisConnect();
});

for (var eventName in events) {
if (events.hasOwnProperty(eventName)) {
socket.on(eventName, socketOnEventHandler(eventName));
}
}
}

function socketOnEventHandler(eventName) {
return function (e) {
onMessage(eventName, e);
};
}

return {
registerEvent: function (eventName, callback) {
events[eventName] = callback;
},

start: function () {
if (!SharedWorker) {
startSocketIo();
} else {
startWorker();
}
},

onError: function (cbk) {
onError = cbk;
},

setWorker: function (uri) {
workerUri = uri;
}
};
};
[/sourcecode]

And here the application code:

[sourcecode language=”js”]
(function (gio) {
"use strict";

var onConnect = function () {
console.log("connected!");
};

var onDisConnect = function () {
console.log("disconnect!");
};

var ws = gio("http://localhost:8080", onConnect, onDisConnect);
ws.setWorker("sharedWorker.js");

ws.registerEvent("message", function (data) {
console.log("message", data);
});

ws.onError(function (data) {
console.log("error", data);
});

ws.start();
}(gio));
[/sourcecode]

I’ve also created a simple webSocket server with socket.io. In this small server there’s a setInterval function broadcasting one message to all clients per second to see the application working

[sourcecode language=”js”]
var io, connectedSockets;

io = require(‘socket.io’).listen(8080);
connectedSockets = 0;

io.sockets.on(‘connection’, function (socket) {
connectedSockets++;
console.log("Socket connected! Conected sockets:", connectedSockets);

socket.on(‘disconnect’, function () {
connectedSockets–;
console.log("Socket disconnect! Conected sockets:", connectedSockets);
});
});

setInterval(function() {
io.emit("message", "Hola " + new Date().getTime());
}, 1000);
[/sourcecode]

Source code is available in my github account.

Yet Another example of WebSockets, socket.io and AngularJs working with a Silex backend

October 27, 2014October 27, 2014 ~ Gonzalo Ayuso ~ 1 Comment

Remember my last post about WebSockets and AngularJs? Today we’re going to play with something similar. I want to create a key-value interface to play with websockets. Let me explain it a little bit.

First we’re going to see the backend. One Silex application with two routes: a get one and a post one:

[sourcecode language=”php”]
<?php

include __DIR__ . ‘/../../vendor/autoload.php’;
include __DIR__ . ‘/SqlLiteStorage.php’;

use Silex\Application;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;
use Silex\Provider\DoctrineServiceProvider;

$app = new Application([
‘debug’ => true,
‘ioServer’ => ‘http://localhost:3000’,
‘httpServer’ => ‘http://localhost:3001’,
]);

$app->after(function (Request $request, Response $response) {
$response->headers->set(‘Access-Control-Allow-Origin’, ‘*’);
});

$app->register(new G\Io\EmitterServiceProvider($app[‘httpServer’]));
$app->register(new DoctrineServiceProvider(), [
‘db.options’ => [
‘driver’ => ‘pdo_sqlite’,
‘path’ => __DIR__ . ‘/../../db/app.db.sqlite’,
],
]);
$app->register(new G\Io\Storage\Provider(new SqlLiteStorage($app[‘db’])));

$app->get(‘conf’, function (Application $app, Request $request) {
$chanel = $request->get(‘token’);
return $app->json([
‘ioServer’ => $app[‘ioServer’],
‘chanel’ => $chanel
]);
});

$app->get(‘/{key}’, function (Application $app, $key) {
return $app->json($app[‘gdb.get’]($key));
});

$app->post(‘/{key}’, function (Application $app, Request $request, $key) {
$content = json_decode($request->getContent(), true);

$chanel = $content[‘token’];
$app->json($app[‘gdb.post’]($key, $content[‘value’]));

$app[‘io.emit’]($chanel, [
‘key’ => $key,
‘value’ => $content[‘value’]
]);

return $app->json(true);
});

$app->run();
[/sourcecode]

As we can see we register one service provider:

[sourcecode language=”php”]
$app->register(new G\Io\Storage\Provider(new SqlLiteStorage($app[‘db’])));
[/sourcecode]

This provider needs an instance of StorageIface

[sourcecode language=”php”]
namespace G\Io\Storage;

interface StorageIface
{
public function get($key);

public function post($key, $value);
}
[/sourcecode]

Our implementation uses SqlLite, but it’s pretty straightforward to change to another Database Storage or even a NoSql Database.

[sourcecode language=”php”]
use Doctrine\DBAL\Connection;
use G\Io\Storage\StorageIface;

class SqlLiteStorage implements StorageIface
{
private $db;

public function __construct(Connection $db)
{
$this->db = $db;
}

public function get($key)
{
$statement = $this->db->executeQuery(‘select value from storage where key = :KEY’, [‘KEY’ => $key]);
$data = $statement->fetchAll();

return isset($data[0][‘value’]) ? $data[0][‘value’] : null;
}

public function post($key, $value)
{
$this->db->beginTransaction();

$statement = $this->db->executeQuery(‘select value from storage where key = :KEY’, [‘KEY’ =>; $key]);
$data = $statement->fetchAll();

if (count($data) > 0) {
$this->db->update(‘storage’, [‘value’ => $value], [‘key’ => $key]);
} else {
$this->db->insert(‘storage’, [‘key’ => $key, ‘value’ => $value]);
}

$this->db->commit();

return $value;
}
}
[/sourcecode]

We also register another Service provider:

[sourcecode language=”php”]
$app->register(new G\Io\EmitterServiceProvider($app[‘httpServer’]));
[/sourcecode]

This provider’s responsibility is to notify to the websocket’s server when anything changes within the storage:

[sourcecode language=”php”]
namespace G\Io;

use Pimple\Container;
use Pimple\ServiceProviderInterface;

class EmitterServiceProvider implements ServiceProviderInterface
{
private $server;

public function __construct($url)
{
$this->server = $url;
}

public function register(Container $app)
{
$app[‘io.emit’] = $app->protect(function ($chanel, $params) use ($app) {
$s = curl_init();
curl_setopt($s, CURLOPT_URL, ‘{$this->server}/emit/?’ . http_build_query($params) . ‘&_chanel=’ . $chanel);
curl_setopt($s, CURLOPT_RETURNTRANSFER, true);
$content = curl_exec($s);
$status = curl_getinfo($s, CURLINFO_HTTP_CODE);
curl_close($s);

if ($status != 200) throw new \Exception();

return $content;
});
}
}
[/sourcecode]

The Websocket server is a simple socket.io server as well as a Express server to handle the backend’s triggers.

[sourcecode language=”js”]
var
express = require(‘express’),
expressApp = express(),
server = require(‘http’).Server(expressApp),
io = require(‘socket.io’)(server, {origins: ‘localhost:*’})
;

expressApp.get(‘/emit’, function (req, res) {
io.sockets.emit(req.query._chanel, req.query);
res.json(‘OK’);
});

expressApp.listen(3001);

server.listen(3000);
[/sourcecode]

Our client application is an AngularJs application:

[sourcecode language=”html”]
<!doctype html>
<html ng-app="app">
<head>
<script src="//localhost:3000/socket.io/socket.io.js"></script>
<script src="assets/angularjs/angular.js"></script>
<script src="js/app.js"></script>
<script src="js/gdb.js"></script>
</head>
<body>

<div ng-controller="MainController">
<input type="text" ng-model="key">
<button ng-click="change()">change</button>
</div>

</body>
</html>
[/sourcecode]

[sourcecode language=”js”]
angular.module(‘app’, [‘Gdb’])

.run(function (Gdb) {
Gdb.init({
server: ‘http://localhost:8080/gdb’,
token: ‘4b96716bcb3d42fc01ff421ea2cfd757’
});
})

.controller(‘MainController’, function ($scope, Gdb) {
$scope.change = function () {
Gdb.set(‘key’, $scope.key).then(function() {
console.log("Value set");
});
};

Gdb.get(‘key’).then(function (data) {
$scope.key = data;
});

Gdb.watch(‘key’, function (value) {
console.log("Value updated");
$scope.key = value;
});
})
;
[/sourcecode]

As we can see the AngularJs application uses one small library called Gdb to handle the communications with the backend and WebSockets:

[sourcecode language=”js”]
angular.module(‘Gdb’, [])
.factory(‘Gdb’, function ($http, $q, $rootScope) {

var socket,
gdbServer,
token,
watches = {};

var Gdb = {
init: function (conf) {
gdbServer = conf.server;
token = conf.token;

$http.get(gdbServer + ‘/conf’, {params: {token: token}}).success(function (data) {
socket = io.connect(data.ioServer);
socket.on(data.chanel, function (data) {
watches.hasOwnProperty(data.key) ? watches[data.key](data.value) : null;
$rootScope.$apply();
});
});
},

set: function (key, value) {
var deferred = $q.defer();

$http.post(gdbServer + ‘/’ + key, {value: value, token: token}).success(function (data) {
deferred.resolve(data);
});

return deferred.promise;
},

get: function (key) {
var deferred = $q.defer();

$http.get(gdbServer + ‘/’ + key, {params: {token: token}}).success(function (data) {
deferred.resolve(JSON.parse(data));
});

return deferred.promise;
},

watch: function (key, closure) {
watches[key] = closure;
}
};

return Gdb;
});
[/sourcecode]

And that’s all. You can see the whole project at github.

Sharing $scope between controllers with AngularJs

September 8, 2014 ~ Gonzalo Ayuso ~ 19 Comments

Angular creates one $scope object for each controller. We also have a $rootScope accesible from every controllers. But, can we access to one controller’s $scope from another controller? The sort answer is no. Also if our application needs to access to another controller’s $scope, we probably are doing something wrong and we need to re-think our problem. But anyway it’s possible to access to another controller’s $scope if we store it within a service. Let me show you and example.

Imagine this little example:

[sourcecode language=”html”]
<!doctype html>
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.18/angular.js"></script>
<script src="app.js"></script>
</head>
<body>

<div ng-controller="OneController">
<h2>OneController</h2>
<button ng-click="buttonClick()">
buttonClick on current scope
</button>
</div>

<div ng-controller="TwoController">
<h2>TwoController</h2>
<button ng-click="buttonClick()">
buttonClick on current scope
</button>
</div>
</body>
</html>
[/sourcecode]

As we can see we define two controllers: “OneController” and “TwoController”.

That’s the application:

[sourcecode language=”js”]
var app = angular.module(‘app’, []);

app.controller(‘OneController’, function ($scope) {
$scope.variable1 = "One";

$scope.buttonClick = function () {
console.log("OneController");
console.log("$scope::variable1", $scope.variable1);
};
});

app.controller(‘TwoController’, function ($scope) {
$scope.variable1 = "Two";

$scope.buttonClick = function () {
console.log("TwoController");
console.log("$scope::variable1", $scope.variable1);
};
});
[/sourcecode]

If we need to access to another controller’s $scope we need to store those scopes within a service. For example with this minimal service:

[sourcecode language=”js”]
app.factory(‘Scopes’, function ($rootScope) {
var mem = {};

return {
store: function (key, value) {
mem[key] = value;
},
get: function (key) {
return mem[key];
}
};
});
[/sourcecode]

And now we need to store the $scope in the service:
[sourcecode language=”js”]
app.controller(‘OneController’, function ($scope, Scopes) {
Scopes.store(‘OneController’, $scope);
…
});
app.controller(‘TwoController’, function ($scope, Scopes) {
Scopes.store(‘TwoController’, $scope);
…
});
[/sourcecode]

And now we can access to another’s $scope

Here the full example:

<div ng-controller="OneController">
<h2>OneController</h2>
<button ng-click="buttonClick()">
buttonClick on current scope
</button>
<button ng-click="buttonClickOnTwoController()">
buttonClick on TwoController’s scope
</button>
</div>

<div ng-controller="TwoController">
<h2>TwoController</h2>
<button ng-click="buttonClick()">
buttonClick on current scope
</button>
<button ng-click="buttonClickOnOneController()">
buttonClick on OneController’s scope
</button>
</div>
</body>
</html>
[/sourcecode]

and app.js
[sourcecode language=”js”]
var app = angular.module(‘app’, []);

app.run(function ($rootScope) {
$rootScope.$on(‘scope.stored’, function (event, data) {
console.log("scope.stored", data);
});
});
app.controller(‘OneController’, function ($scope, Scopes) {

Scopes.store(‘OneController’, $scope);

$scope.variable1 = "One";

$scope.buttonClick = function () {
console.log("OneController");
console.log("OneController::variable1", Scopes.get(‘OneController’).variable1);
console.log("TwoController::variable1", Scopes.get(‘TwoController’).variable1);
console.log("$scope::variable1", $scope.variable1);
};

$scope.buttonClickOnTwoController = function () {
Scopes.get(‘TwoController’).buttonClick();
};
});
app.controller(‘TwoController’, function ($scope, Scopes) {

Scopes.store(‘TwoController’, $scope);

$scope.variable1 = "Two";

$scope.buttonClick = function () {
console.log("TwoController");
console.log("OneController::variable1", Scopes.get(‘OneController’).variable1);
console.log("TwoController::variable1", Scopes.get(‘TwoController’).variable1);
console.log("$scope::variable1", $scope.variable1);
};

$scope.buttonClickOnOneController = function () {
Scopes.get(‘OneController’).buttonClick();
};
});
app.factory(‘Scopes’, function ($rootScope) {
var mem = {};

return {
store: function (key, value) {
$rootScope.$emit(‘scope.stored’, key);
mem[key] = value;
},
get: function (key) {
return mem[key];
}
};
});
[/sourcecode]

You can also see it running here

Playing with websockets, angularjs and socket.io

August 25, 2014 ~ Gonzalo Ayuso ~ 7 Comments

I’m a big fan of websockets. I’ve got various post about them (here, here). Last months I’m working with angularjs projects and because of that I wanna play a little bit with websockets (with socket.io) and angularjs.

I want to build one angular service.
[sourcecode language=”js”]
angular.module(‘io.service’, []).
factory(‘io’, function ($http) {
var socket,
apiServer,
ioEvent,
watches = {};

return {
init: function (conf) {
apiServer = conf.apiServer;
ioEvent = conf.ioEvent;

socket = io.connect(conf.ioServer);
socket.on(ioEvent, function (data) {
return watches.hasOwnProperty(data.item) ? watches[data.item](data) : null;
});
},

emit: function (arguments) {
return $http.get(apiServer + ‘/request’, {params: arguments});
},

watch: function (item, closure) {
watches[item] = closure;
},

unWatch: function (item) {
delete watches[item];
}
};
});
[/sourcecode]

And now we can build the application
[sourcecode language=”js”]
angular.module(‘myApp’, [‘io.service’]).

run(function (io) {
io.init({
ioServer: ‘http://localhost:3000’,
apiServer: ‘http://localhost:8080/api’,
ioEvent: ‘io.response’
});
}).

controller(‘MainController’, function ($scope, io) {
$scope.$watch(‘question’, function (newValue, oldValue) {
if (newValue != oldValue) {
io.emit({item: ‘question’, newValue: newValue, oldValue: oldValue});
}
});

io.watch(‘answer’, function (data) {
$scope.answer = data.value;
$scope.$apply();
});
});
[/sourcecode]

And this’s the html
[sourcecode language=”html”]
<!doctype html>
<html>

<head>
<title>ws experiment</title>
</head>

<input type="text" ng-model="question">
<hr>
<h1>Hello {{answer}}!</h1>
</div>

</body>
</html>
[/sourcecode]

The idea of the application is to watch one model’s variable (‘question’ in this example) and each time it changes we will send the value to the websocket server and we’ll so something (we will convert the string to upper case in our example)

As you can read in one of my previous post I don’t like to send messages from the web browser to the websocket server directly (due do to authentication issues commented here). I prefer to use one server (a Silex server in this example)

[sourcecode language=”php”]
include __DIR__ . ‘/../../vendor/autoload.php’;

use Silex\Application;
use Symfony\Component\HttpFoundation\Request;

$app = new Application([‘debug’ => true]);
$app->register(new G\Io\EmitterServiceProvider());

$app->get(‘/request’, function (Application $app, Request $request) {

$params = [
‘item’ => $request->get(‘item’),
‘newValue’ => strtoupper($request->get(‘newValue’)),
‘oldValue’ => $request->get(‘oldValue’),
];

try {
$app[‘io.emit’]($params);
$params[‘status’] = true;
} catch (\Exception $e) {
$params[‘status’] = false;
}

return $app->json($params);
});

$app->run();
[/sourcecode]

You can see the code within my github account.