MQTT in Ember.js

Ember Octane mqtt.js

Less than 2 years ago I started a new project with the company I work for that requires to an Ember Octane app to control several connected IoT devices around the world. We choosed the MQTT publish/subscribe network protocol to interact with our on-field devices for its lightweight message structure and its limited network bandwith requirements.

After googling for a javascript MQTT library I’ve found the MQTT.js client. At the moment of my search the asynchronous version was not yet released, so I had to wrap the event based client into an Ember service and transform it into a Promise based client.

This is a mandatory requirement because I need broker connection before subscribing to a topic or I need topic subscription before publishing on it. Sometimes you had retain messages on a topic for receiving last published value after the subscription. Other times you need publishing an empty value on a topic to request the status of a given device. So you need working subscribtion on a topic before sending a message. That said javascript Promises are the only way to accomplish this tasks.

When I wrote this service I didn’t find an Ember addon ready to do this things. Therefore I decided to dive into the docs and learn how to build an addon. The ember-mqttjs addon is my first Ember addon!

The code

This service extends the Evented Ember object for raising events on new messages as well as connect, disconnect events and many others you can find on its readme. In addition of raising this events it returns a Promise for connect, subscribe, unsubscribe and publish methods.

This is an example of another service that uses the ember-mqttjs service:

import Service, { inject as service } from '@ember/service';
import { bind } from '@ember/runloop';

export default class YourService extends Service {
  @service mqtt;
  constructor() {
    super(...arguments);
    //...
    let _fOnMessage = bind(this, this._onMessage);
    this.mqtt.on('mqtt-message', _fOnMessage); 
  }

  _onMessage(sTopic, sMessage) {
    //code to manage messages received on a certain topic
  }

  async subscribeAndPublish(sTopic, sMessage) {
    try {
      await this.mqtt.connect(HOST, USERNAME, PASSWORD)
    } catch (oError) {
      //code on connection error
    }
    try {
      await this.mqtt.subscribe(sTopic);
    } catch (oError) {
      //code for subscription error
    }
    try {
      await this.mqtt.publish(sTopic, sMessage);
    } catch (oError) {
      //code for message publish error
    }
    return Promise.resolve();
  }
//...
}

I’ve just refactored the addon code to use async/await features and I moved the CI from travis to github action (thanks to this Jeldrik Haschke’s repo).
Many improvements can be done in the future starting from writing more tests to cover other cases.
If you have any suggestions or proposal to improve the code as well as the tests you are welcome!

Contact me or start contributing on GitHub project repo!

Preparare un web server per django su ubuntu server 10.04

Poco tempo fa ho scoperto il favoloso mondo di Django, un web framework che consente di scrivere meno codice e creare applicazioni python davvero molto efficienti.

Oltre ad essere un framework che implementa l’MVC(Model View Controller), la caratteristica che mi ha attratto maggiormente è una fantastica funzionalità di ORM(Object Relational Mapping).. cosa significa? In poche parole nel file che implementa il “Model” (models.py) dovrete dichiarare gli oggetti che verranno trasformati in tabelle del vostro database, al resto penserà django. Infatti una volta collegato un db e scritte le classi del modello, con la funzione syncdb verranno create le tabelle residenti sul db. Vi rimando però al tutorial ufficiale per capire davvero qualcosa in più su questo fantastico framework…

In questo post vi farò vedere i pochi e semplici passi per configurare un web server adatto ad ospitare un’applicazione django. Ovviamente il server linux girerà grazie ad ubuntu server ed in particolare nella versione LTS(long term support) 10.04. Salterò ovviamente i passi dell’installazione vera e propria del sistema operativo (anche perchè ormai è a prova di win-user :-P ).

Partendo da un sistema pulito, su cui non è stato installato nessun componente, dovremo per prima cosa assicurarci che il sistema sia aggiornato:

sudo apt-get update
sudo apt-get dist-upgrade
sudo apt-get upgrade

Fatto ciò possiamo procedere con l’installazione dei componenti necessari a mettere in piedi un server web, il che equivale ovviamente ad installare il buon vecchio Apache:

sudo apt-get install lamp-server^

In questo modo installeremo tutti i pacchetti per avere un server LAMP ovvero con apache come detto, e con mysql per la parte di database (verrà installato anche php5 per poter utilizzare phpmyadmin, l’interfaccia per la gestione da web di mysql)

Attesi i dovuti tempi per lo scaricamento, l’installazione e la configurazione dei vari pacchetti (vi verrà chiesta la password per mysql) dovreste avere il vostro server web funzionante (potete testarlo collegandovi da un qualsiasi browser nella rete all’indirizzo ip del server es: http://192.168.0.1 ).

Bene, ora manca un ultimo componente per avere il server pronto: il mod_wsgi ovvero il modulo apache per l’interpretazione del codice python:

sudo apt-get install libapache2-mod-wsgi

Ora non ci resta che installare il driver per fare comunicare python e mysql, che come detto sarà per comodità il nostro dbms:

sudo apt-get install python-mysqldb

Ora possiamo procedere al download e installazione del framework dal sito ufficiale di django(vi risparmio il “wget”, mi sembrava troppo da nerd, ma si può fare ;-) ). Trasferite il tar.gz sul server se non è già lì, e scompattatelo (tar -xvzf nomefile.tar.gz per i newbie). Ora entrando nella cartella che avete ottenuto dalla scompattazione potete installare django:

sudo python setup.py install

Vi consiglio spassionatamente di installare la release ufficiale di django e non quella dagli archivi ubuntu per un puro fatto di aggiornamento della versione, infatti sul canale ufficiale sarete sicuri di avere l’ultima stable-release mentre ubuntu è sempre più indietro in queste cose…

Bene adesso abbiamo tutto ciò che ci serve(r) (battuta di bassissimo umorismo, non ci fate caso, è l’età :-P ).

Procediamo con la creazione del file python che darà le direttive al mod_wsgi sui percorsi della nostra applicazione, nella cartella del nostro progetto, creiamo il file django.wsgi:

vim /home/user/py-srv/applicazione1/django.wsgi

Ipotizzando che la nostra applicazione risieda in /home/user/py-srv/applicazione1 …

Il file dovrà contenere il seguente codice:

import os
import sys

sys.path.append('/home/user/py-srv/applicazione1')

os.environ['PYTHON_EGG_CACHE'] = '/home/user/py-srv/.python-egg'
os.environ['DJANGO_SETTINGS_MODULE'] = 'settings'

import django.core.handlers.wsgi
application = django.core.handlers.wsgi.WSGIHandler()

Ora dobbiamo solamente dire ad apache quale sarà la cartella della nostra applicazione. Per fare ciò editiamo il file default nella cartella sites-available di apache (prima però facciamo una copia del file per sicurezza ;-) ) :

sudo cp /etc/apache2/sites-available/default /etc/apache2/sites-available/default.old
sudo vim /etc/apache2/sites-available/default

Il file dovrà contenere le seguenti configurazioni:

<VirtualHost *:80>
   DocumentRoot /home/user/py-srv/applicazione1/public_html

   WSGIScriptAlias / /home/user/py-srv/applicazione1/django.wsgi
   <Directory /home/user/py-srv/applicazione1>
      Order allow,deny
      Allow from all
   </Directory>

   Alias /favicon.ico /home/user/py-srv/applicazione1/public_html/favicon.ico
   Alias /images /home/user/py-srv/applicazione1/public_html/images
   Alias /static /home/user/py-srv/applicazione1/public_html/static

   ErrorLog /home/user/py-srv/applicazione1/logs/error.log
   CustomLog /home/user/py-srv/applicazione1/logs/access.log combined
</VirtualHost>

Come potete immaginare la cartella “public_html” sarà quella che conterrà i file html pubblici, ovvero i file del template della vostra applicazione.

Bene, se avete fatto tutto nel modo giusto, vi basterà collegarvi all’indirizzo ip che avete già usato prima per testare apache, e vedrete come per magia che funzionerà tutto!

(non funziona? non fate come me che avevo lasciato il vecchio path nel file settings.py, e ci ho perso mezz’ora per accorgermene :-P )

Buon divertimento!

Esportare immagini per il web con gimp!

Nonostante non sia un appassionato di grafica, a volte mi trovo a dover fare dei piccoli fotoritocchi.

Usando ubuntu ovviamente non ho a disposizione il dio sceso in terra dei programmi di fotoritocco, per cui mi devo arrangiare.

Checchè se ne dica, trovo che gimp faccia il suo onesto dovere, ma così com’è quando viene installato (su win) o quando ci arriva (insieme ad ubuntu) non permette di salvare immagini ottimizzate per il web.

Ecco che quindi oggi voglio suggerirvi un ottimo plugin per esportare immagini nei più comuni formati, adattate e ottimizzate per essere utilizzate sul web:

Questa è la pagina ufficiale del plugin dove trovare un .tar.bz2 per linux e un .zip per windows (32bit):

http://registry.gimp.org/node/33

Per installarlo dovete andare a copiare il contenuto dell’archivio estratto all’interno della cartella locale di gimp dei plugin path-to-gimp/plug-ins/ e riavviare il programma.

Noterete che è stata aggiunta una voce al menu file (“save for web” appunto) e cliccando qui, potrete scegliere le varie opzioni di esportazione…

Non ancora abbastanza soddisfatto però ho cercato il pacchetto per ubuntu e ovviamente esiste! ;-)

Quindi eccovi il link per scaricare il .deb bello pronto per essere installato sul vostro ubuntu:
http://www.mediafire.com/?yngomdz4hem

Un ultimo consiglio: prima di dire che certe cose si fanno solo con photoshop provate a googleggiare un po’ e vedrete che gran parte delle cose, sono ben spiegate in guide per gimp, nonostante senza ombra di dubbio photoshop è e rimane il miglior software per il fotoritocco. :-)
[ad]

SPDY alias Speedy

SPDY

Tanto per cambiare Google ne ha tirata fuori un’altra… Ora diventano quasi monotoni quelli di Big G a forza di sfornare cose nuove

Questa volta hanno in progetto di rivoluzionare il protocollo HTTP. Come da titolo infatti stanno lavorando a SPDY che si legge SPEEDY. Una nuovo protocollo che dovrebbe continuare a sfruttare HTTP eliminando tutto ciò che fa perdere tempo. Dovrebbe sfruttare un singolo canale e una singola sessione TCP e usando il protocollo sicuro SSL come base per il trasporto dei dati. SPDY utilizzerà tecniche di priorità e di compressione degli header per evitare eccessi di tempo e banda quando i clients contattano i servers.

Gli ingengeri di Mountain View hanno già sviluppato un server web (open source) e una versione ad hoc di chrome per la fase di testing. Dal blog si legge che i primi esperimenti indicano risultati significativi, con le pagine caricate il 55% più rapidamente rispetto allo standard HTTP.

Cosa ne dite? Un’altra rivoluzione nel web, che porterà bandiera googleggiante?

In ogni caso se volete leggere approfondimenti in italiano, vi lascio il link su macitynet, dove io ho letto la notizia.
[ad]

Non ci credi che lavoro a facebook? guarda qui! ora ci credi?

Un’azienda vincente si vede anche dalle piccole cose, e questa è una di quelle piccole cose che rendono grande una società…
Ovviamente sto di nuovo parlando di Facebook e questo video è davvero divertente a mio parere…
Pratica comune dei fratelli minori (anche se non ne ho uno, ma ho amici che lo sono) è quella di raccontare frottole ai loro amichetti per vantarsi… Bene cosa va dicendo il fratello di un certo “Dan Muriello”? “Mio fratello lavora a Facebook!”… nessuno gli crede, perciò decide di intervenire il fratellone, pubblicando questo simpatico video:

Che c’è di strano? Be’ in un’azienda di 900 persone, non vi pare anomalo che il CEO della società “perda” 1 minuto per uno stupido video?

Molto probabilmente è proprio questa propensione alla normalità dei suoi fondatori, che facebook è diventato quello che è oggi…
[ad#ad-1]

jQuery User Interface: interfacce utente in javascript!

Intanto benvenuti a tutti nel mio nuovo-vecchio blog. Ho solamente cambiato indirizzo, mantenendo tutto il vecchio blog e cambiando la veste grafica… Un piccolo aggiornamento contro la noia, insomma! ;-)

Detto ciò in per inaugurare davideferrero.com, voglio portarvi a conoscenza di un tool molto utile, se non lo conoscete ancora.

Come tutti ormai sapete (non lo sapete? sapevatelo :-P ) sono fan e infognato (leggi “addicted” che fa più figo) di jQuery, un javascript framework molto intuitivo, semplice e abbastanza leggero per animare e migliorare le proprio pagine web.

Bene, usando un po’ jQuery noterete subito di aver bisogno di interfacce grafiche per l’utente, ad esempio per una scelta di date (ne avevo già parlato qui) o per creare dei blocchi trascinabili (drag&drop), barre di caricamento, pulsanti “slider” o dei tabs… Ok, con jQuery UI tutto ciò è possibile, potete crearvi il vostro tema personalizzato scegliendo i colori e le caratteristiche dei vari oggetti e scaricarvi i file (javascript, css e immagini), personalizzandovi il pacchetto di download con solo gli oggetti di cui avete bisogno. Per tutte le personalizzazioni dei vari gadget, troverete un’ampia documentazione che vi aiuterà nel caso aveste problemi a farli funzionare.

Appena pubblicheremo il progetto a cui sto ancora lavorando in ufficio, potrete vedere all’opera alcune di queste UI… a presto per i prossimi aggiornamenti su questo argomento!

PS: aggiornate il feed rss facendolo puntare al nuovo indirizzo se non lo avete ancora fatto, ma soprattutto se vi eravate abbonati a quello vecchio… Se invece non lo avevate aggiunto tra i vostri preferiti, avete un motivo in più per farlo ora! ;-)
[ad#ad-1]

Facebook developer garage a Venezia!


Facebook ha da poco raggiunto i 300 Milioni di utenti e proprio oggi è stata resa nota la presentazione che il VP of Technology, Jeff Rothschild ha tenuto e in cui spiega la tecnologia che sta dietro al social network dai grandi numeri. Una delle cose che più mi mette in imbarazzo sono i dati forniti in questa presentazione: 25 Terabyte di log salvati da facebook ogni giorno, 1miliardo di messaggi di chat inviati ogni giorno, 200 miliardi di pagine viste al mese… Tutto ciò è permesso da un’infrastruttura (i software utilizzati li ho già discussi in questo post) che conta circa 30000 servers….. eeeeeeeh?? Ebbene sì 30mila servers e qui sotto potete notare una foto scattata in uno dei Fb data center…

Cioè…. ma avete idea di cosa vuol dire?

Tutto ciò per fare venire l’acquolina in bocca a chi leggerà questo articolo e far sapere che venerdì 23 ottobre a Venezia ci sarà il Facebook developer garage, un incontro dove verranno spiegate le caratteristiche principali del social network, le peculiarità delle sue API e come utilizzare queste ultime per integrarle nei propri siti web o creare fb application. Come ultimo appuntamento della giornata ci sarà l’intervento di un “facebook engineer” direttamente da Palo Alto (CA, U.S.A)
Buon divertimento! (se pensate di andarci!)
[ad]

Web & Flash: risolvere tutti i problemi di compatibilità

Come spiega il titolo, in questi giorni, ho avuto qualche piccolo problema nell’embedding di oggetti flash in alcune pagine web a cui stavo lavorando.

Chiunque si sia cimentato, anche solo per poco, nel mestiere del web developer, avrà certamente incontrato problemi nel rendere uguale per tutti i browser le pagine web. Con quasi tutti i browser, le pagine vengono renderizzate in un certo modo, mentre con altri browser no (notare, non c’è la “s” del plurale :-P ). E così è anche per gli oggetti flash. Il browser appena linkato pensa bene di riconoscere l’embedd come controllo Active X, e non lo visualizza (a meno che… ma la storia si fa lunga e tortuosa). Googleggiando, ci si imbatte quasi subito in swfobject, un oggetto javascript che ci toglie le castagne dal fuoco e mette in pista in un attimo il nostro lavoro. Il codice da scrivere è veramente ridotto all’osso, vi riporto l’esempio che faceva al caso mio con l’embedd del player flash di livestream.com (una piattaforma di streaming video):

  1. Includere la libreria nel tag <head>:
    <script type="text/javascript" src="swfobject.js"></script>
  2. Creare il div che ospiterà l’oggetto flash:
    <div id="livestreamPlayer"></div>
  3. Creare l’oggetto con il codice javascript:
    <script type="text/javascript">
    	flashvars = { channel: 'livestreamearth' };
    	params = { AllowScriptAccess: 'always' };
    	swfobject.embedSWF("http://cdn.livestream.com/chromelessPlayer/wrappers/
    SPlayer.swf","livestreamPlayer", "400", "300", "9.0.0", "expressInstall.swf",
    flashvars, params);
    </script>

Come si può intuire la variabile flashvars conterrà le variabili di cui l’oggetto flash necessita per funzionare mentre params conterrà i settaggi flash per l’oggetto. Il primo parametro è invece il path dell’oggetto flash da embeddare, il secondo è l’id del div che lo conterrà nella nostra pagina, seguito da width e height, versione di flash richiesta e oggetto flash(fornito insieme ad swfobject) che consente di aggiornare la propria versione di flash installata sul pc.

Con questi semplici passi si otterrà il caricamente dell’oggetto flash tramite javascript, che consentirà di bypassare il blocco di alcuni browser e di eseguirlo senza problemi in tutti gli altri ;-).

Eccovi il link per scaricare lo zip contenente swfobject: http://bit.ly/3GWdi6

<script type="text/javascript" src="swfobject.js"></script>

[ad]

Librerie Jquery…for programmers only!

Librerie JQuery

Da qualche giorno sul lavoro ho dovuto realizzare un’applicazione in jsp che permettesse, al click su un link, di far comparire dei dati aggiuntivi… Appena ho sentito cosa dovevo fare, lo stack-trace della mia memoria era all’incirca questo:

AJAX…AJAX…AJAX…AJAX…AJAX…AJAX…AJAX…AJAX…AJAX…AJAX…AJAX…AJAX

Mi sono quindi sbattuto altamente… per cercare qualcosa che mi semplificasse il lavoro…:-P.

Dopo breve googleggiamento mi sono imbattuto in una libreria Javascript che dopo poco ho scoperto essere molto sciccosa… JQuery mette a disposizione infatti molti strumenti, sia per creare effetti grafici con javascript, sia per gestire gli eventi sui vari oggetti presenti nella pagina  e non ultimo di utilizzare AJAX in modo molto semplice…

Bè ora potete spassarvela con queste librerie… Ah dimenticavo, vengono utilizzate da Google, Dell e molti altri ancora, anche per questo credo che siano davvero un ottimo strumento…

Se le volete provarle, il link per scaricarle è questo:  http://docs.jquery.com/Downloading_jQuery

Se non avete idea di metterci le mani dentro, vi basterà scaricare il minified, dovrebbe essere la versione compressa che funziona allo stesso modo del .js… Buon lavoro![ad]