Alexa and Raspberry Pi demo (Part 2). Listening to external events

Today I want to keep on with the previous example. This time I want to create one Alexa skill that listen to external events. The example that I’ve build is the following one:

I’ve got one ESP32 with a proximity sensor (one HC-SR04) that is sending the distance captured each 500ms to a MQTT broker (a mosquitto server).

I say “Alexa, use event demo” then Alexa tell me to put my hand close to the sensor and it will tell me the distance.

That’s the ESP32 code

#include <WiFi.h>
#include <PubSubClient.h>

const char* ssid = "MY_SSID";
const char* password = "MY_PASSWORD";
const char* server = "mqtt.server.ip";
const char* topic = "/alert";
const char* clientName = "com.gonzalo123.esp32";

WiFiClient wifiClient;
PubSubClient client(wifiClient);

int trigPin = 13;
int echoPin = 12;
int alert = 0;
int alertThreshold = 100;
long duration, distance_cm;

void wifiConnect() {
  Serial.print("Connecting to ");

  WiFi.begin(ssid, password);

  while (WiFi.status() != WL_CONNECTED) {

  Serial.print("WiFi connected: ");

void mqttReConnect() {
  while (!client.connected()) {
    Serial.print("Attempting MQTT connection...");
    if (client.connect(clientName)) {
    } else {
      Serial.print("failed, rc=");
      Serial.println(" try again in 5 seconds");

void mqttEmit(String topic, String value)
  client.publish((char*) topic.c_str(), (char*) value.c_str());

void setup() {
  pinMode(trigPin, OUTPUT);
  pinMode(echoPin, INPUT);

  client.setServer(server, 1883);


void loop() {
  if (!client.connected()) {


  digitalWrite(trigPin, HIGH);
  digitalWrite(trigPin, LOW);

  duration = pulseIn(echoPin, HIGH) / 2;
  distance_cm = duration / 29;

  if (distance_cm <= alertThreshold && alert == 0) {
      alert = 1;
      mqttEmit("/alert", (String) distance_cm);
  } else if(distance_cm > alertThreshold && alert == 1) {
    alert = 0;
    Serial.println("No alert");

  Serial.print("Distance: ");
  Serial.println(" cm ");


And this is my alexa skill:

'use strict'

const Alexa = require('ask-sdk-core')

const RequestInterceptor = require('./interceptors/RequestInterceptor')
const ResponseInterceptor = require('./interceptors/ResponseInterceptor')
const LocalizationInterceptor = require('./interceptors/LocalizationInterceptor')
const GadgetInterceptor = require('./interceptors/GadgetInterceptor')

const YesIntentHandler = require('./handlers/YesIntentHandler')
const NoIntentHandler = require('./handlers/NoIntentHandler')
const LaunchRequestHandler = require('./handlers/LaunchRequestHandler')
const CancelAndStopIntentHandler = require('./handlers/CancelAndStopIntentHandler')
const SessionEndedRequestHandler = require('./handlers/SessionEndedRequestHandler')
const CustomInterfaceEventHandler = require('./handlers/CustomInterfaceEventHandler')
const CustomInterfaceExpirationHandler = require('./handlers/CustomInterfaceExpirationHandler')

const FallbackHandler = require('./handlers/FallbackHandler')
const ErrorHandler = require('./handlers/ErrorHandler')

let skill
exports.handler = function (event, context) {
  if (!skill) {
    skill = Alexa.SkillBuilders.custom().
  return skill.invoke(event, context)

The process is similar to the previous example. There’s a GadgetInterceptor to find the endpointId of my Raspberry Pi. But now the Raspberry Pi must emit to the event to the skill, not the skill to the event. Now my rpi’s python script is a little bit more complicated. We need to start the main loop for the Alexa Gadget SDK but also we need to start another loop listening to a mqtt event. We need to use threads as we see in a previous post. That’s the script that I’m using.

from queue import Queue, Empty
import threading
import logging
import sys
import paho.mqtt.client as mqtt
from agt import AlexaGadget

logging.basicConfig(stream=sys.stdout, level=logging.DEBUG)
logger = logging.getLogger(__name__)

class Listener(threading.Thread):
    def __init__(self, queue=Queue()):
        super(Listener, self).__init__()
        self.queue = queue
        self.daemon = True

    def on_connect(self, client, userdata, flags, rc):

    def on_message(self, client, userdata, msg):

    def on_event(self, cm):

    def run(self):
        client = mqtt.Client()
        client.on_connect = self.on_connect
        client.on_message = self.on_message

        client.connect('', 1883, 60)

class Gadget(AlexaGadget):
    def __init__(self):
        Listener.on_event = self._emit_event

    def _emit_event(self, cm):"_emit_event {}".format(cm))
        payload = {'cm': cm}
        self.send_custom_event('Custom.gonzalo123', 'sensor', payload)

l = Listener()

def main():
    gadget = Gadget()

if __name__ == '__main__':

And that’s all. It’d be good if I could wake up my skill directly from my iot device, instead of waking up manually, but AFAIK that’s not possible.

Source code in my github


Book review: Socket.IO Cookbook

Last summer I collaborated as a technical reviewer in the book “Socket.IO Cookbook” written by Tyson Cadenhead and finally I’ve got the book in my hands

I’m a big fan of real time technologies and I’m normally user. Because of that, when people of Packt Publishing contacted me to join to the project as technical reviewer my answer was yes. I’ve got serious problems nowadays to find time to pet projects and extra activities, but if there’re WebSockets inside I cannot resists.

The book is correct and it’s a good starting point to event-based communication with JavaScript. I normally don’t like beginners books (even if I’m a beginner in the technology). I don’t like the books where author explains how to do one thing that I can see how to do it within the website of the. OK. This book isn’t one of those of books. The writer don’t assume reader is a totally newbie. Because of that newbies sometimes can be lost in some chapters, but this exactly the way we all learn new technologies. I like the way Tyson introduces concepts about

The book is focused in JavaScript and also uses JavaScript to the backend (with node). Maybe I miss the integration with non-JavaScript environments, but as is a javascript library I understand that the usage of JavaScript in all application lifecycle is a good approach.


Also those days I was reading and playing a little bit with WebRTC and the book has one chapter about it! #cool

Handling private states within AngularJS applications

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:

    .config(function ($stateProvider, $urlRouterProvider) {
            .state('state1', {
                url: '/state1',
                templateUrl: templates/state1.html,
                controller: 'State1Controller'
            .state('state2', {
                url: '/state2',
                templateUrl: templates/state2.html,
                controller: 'State2Controller'

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

    .state('privateState1', {
            url: '/privateState1',
            templateUrl: templates/privateState1.html,
            controller: 'PrivateState1Controller',
            data: {
                isPublic: false

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

    .run(function ($rootScope) {
        $rootScope.$on("$stateChangeStart", function (event, toState) {
            if ( && {
                // do something here with localstorage and auth token

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.

    .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'

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)

    .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) {
                    } else {
                        deferred.reject({error: "noUser"});
                }, 100);

                return deferred.promise;

            login: function (userName, password) {
                // validate user and password here

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

        return UserService

And finally the magic in $stateChangeError

    .run(function ($rootScope, $state) {
            function (event, toState, toParams, fromState, fromParams, error) {
                if (error && error.error === "noUser") {
                    $state.go('login', {});

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

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

    .provider('privateState', function () {
        this.$get = function () {
            return {};
        this.get = function(obj) {
            return angular.extend({
                resolve: {
                    user: function (UserService) {
                        return UserService.init();
            }, obj);

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

    .config(function ($stateProvider, $urlRouterProvider, privateStateProvider) {

            .state('home', privateStateProvider.get({
                url: '/home',
                templateUrl: 'templates/home.html',
                controller: 'HomeController'

Building a AngularJS provider for hello.js library

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

(function () {
    angular.module('G', [])
        .config(function ($stateProvider, $urlRouterProvider) {
                .state('login', {
                    url: "/",
                    templateUrl: "partials/home.html",
                    controller: "LoginController"
                .state('home', {
                    url: "/login",
                    template: "partials/home.html"

        .controller('LoginController', function ($scope) {
            $scope.login = function () {

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

"dependencies": {
    "hello": "~1.4.1",
    "ng-hello": "*"

and append those references to our index.html

<!DOCTYPE html>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <script type="text/javascript" src="assets/hello/dist/hello.all.js"></script>
    <script type="text/javascript" src="assets/ng-hello/dist/ng-hello.js"></script>
    <script src="js/app.js"></script>
<body ng-app="G">
<div ui-view></div>


Our ng-hello is just a service provider that wraps hello.js

(function (hello) {
    angular.module('ngHello', [])
        .provider('hello', function () {
            this.$get = function () {
                return hello;

            this.init = function (services, options) {
                hello.init(services, options);

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

(function () {
    angular.module('G', ['ngHello'])
        .config(function ($stateProvider, $urlRouterProvider, helloProvider) {
                twitter: 'myTwitterToken'

                .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) {

And finally we can perform a twitter login within our controller

(function () {
        .controller('LoginController', function ($scope, hello) {
            $scope.login = function () {

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

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

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!