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!

Ng-Cookies e cookies su localhost con AngularJs

AngularJS-largeOggi scrivo di una piccola scoperta fatta giocando con AngularJs e i cookies che potrebbe tornare utile a chi di voi si deve cimentare nell’utilizzo di questa funzionalità javascript con l’ormai noto framework.

Facendo dei test di scrittura/lettura di informazioni all’interno dei cookies sembrava che non fosse consentito utilizzarli da localhost, ossia in locale. Più precisamente il cookie settato in una pagina, spariva letteralmente passando in un’altra pagina (cambiando url).

Dopo aver perso tutte le speranze e mentre vagavo senza meta all’interno delle issues del repository Github di AngularJs mi si è aperto un modo: un utente che si era interessato al problema dei cookies diceva che dopo averne discusso con il team di sviluppo aveva scoperto che per far funzionare a dovere questa funzionalità era necessario impostare il tag html base.

Facciamo un esempio: se il vostro progetto risponde all’url http://localhost/tests/angularjs/cookies sarà necessario impostare il base tag nel seguente modo:

 <base href="http://localhost/tests/angularjs/cookies/"> 

In questo modo i cookies verranno salvati per tutte le url che inizieranno per l’indirizzo specificato nel tag.

Il particolare importante da notare è lo slash finale. Senza quello nulla funzionerà.

Id alfanumerici per le chiavi primarie in django

 

Django web framework

Oggi torno sul blog per scrivere un breve tutorial riguardante il “mondo” Django.

Da buon appassionato di questo framework continuo nei miei esperimenti e in questo articolo spiegherò come modificare le chiavi primarie delle tabelle django da numero intero a stringa alfanumeriche sulla falsa riga degli uuid di PostgreSQL.

Il framework usa come default chiavi primarie di tipo integer che per ovvi limiti di architettura del tipo int possono essere grandi al massimo 32 bit. Con poche righe di codice vedremo come sostituire la chiave primaria con un valore generato tramite il modulo python uuid.

Per prima cosa in genere mi creo un file utils.py nell’app principale, un modulo in cui inserire tutte le funzioni di utilità per l’app. All’interno di questo file andremo a creare la nostra funzione che genererà gli uuid in questo modo:


import uuid

def make_uuid():
   return str(uuid.uuid1())

In questo modo genereremo un id alfanumerico basato sul mac address dell’host da cui viene generato, un numero di sequenza (in questo caso random) e il timestamp corrente. In questo modo non solo avremo id univoci all’interno della tabella, ma addirittura all’interno dell’intero database azzerando di fatto la possibilità di collisioni (l’unica possibilità sarebbe se venissero generati nello stesso istante due id con lo stesso numero di sequenza, non impossibile ma altamente improbabile).

Una volta scritta questa funzione non ci resta che usarla per generare gli id all’interno dei nostri model come nell’esempio sottostante:

from APP_NAME.utils import make_uuid
from django.db import models

class MyModel(models.Model):
   id = models.CharField(max_length = 36, primary_key = True, default = make_uuid, editable = False)
   ... altri campi ...

Come potete vedere si dovrà importare la funzione appena scritta all’interno del file models.py e utilizzarla per specificare il valore di default del campo id (omesso di default in caso di id standard).

Se si volesse evitare di usare il mac address della macchina per generare l’uuid si potrebbe utilizzare una funzione differente. Ad esempio la uuid.uuid4() genera uuid random, ovviamente a discapito di una, seppure remota, possibilità di collisioni.

Template WordPress responsive per il mio blog!

responsive

Come avrete potuto sicuramente notare in questi ultimi giorni, ho finalmente pubblicato la nuova versione del template per il mio blog personale! Siamo arrivati alla versione 4!

Ho deciso di sviluppare un tema WordPress totalmente nuovo, partendo da un foglio bianco ed ispirandomi a “cose” viste qua e là.

La mia esigenza era quella di ottenere, con il minimo sforzo, un template ottimizzato per tutti i dispositivi, da quelli con schermi ad alta risoluzione fino ai “mobile”, sempre più in voga negli ultimi tempi. Ho perciò utilizzato lo standard de facto dei framework CSS: Bootstrap 3! Ed ecco il risultato, un template adatto a desktop, tablet e smartphone!

Mi sono servito di una classe walker scritta ad hoc per utilizzare i menu WordPress con Boostrap, in modo da poter sfruttare la navbar fissata in alto. Per il resto la giusta miscela di codice php e html, qualche file css/js ed ecco qua, il nuovo template!

Il font che ho scelto è l’Open Sans, uno dei più utilizzati ultimamente sul web, e mi viene servito direttamente da Google Fonts.

Spero di essere riuscito nell’intento di fornire una navigazione più piacevole e al tempo stesso più completa. Presto cercherò di rendere disponibile gratuitamente e sotto licenza open source questo tema nel repository di WordPress. Nel frattempo se avete domande/curiosità non esitate a commentare l’articolo o a scrivermi tramite la solita pagina dei contatti.

Invece il prossimo passo che ho in mente per il blog sarà qualche cambiamento “sotto il cofano”, ma non voglio svelarvi niente e mi tengo un po’ di tempo per fare ancora qualche test!

A presto!

Installare Django 1.3 su Mac OS X 10.7 Lion e XAMPP 1.7.3

Se anche voi come me siete curiosi utilizzatori di mac, in questi giorni sarete sicuramente stati tentati di installare l’ultima versione di OS X, ovvero la major release 10.7 denominata “Lion”.

Se non avete ancora provveduto all’aggiornamento, ma siete in procinto di farlo, vi consiglio quest’ottima guida di macitynet (onde evitare problemi al primo avvio di Lion).

Terminato l’aggiornamento sembrava tutto apparentemente funzionante, fino a quando non ho tentato di avviare il server di sviluppo di django. Non ricordo con precisione l’errore ma il succo era che il driver per la connessione al db non era più funzionante. Ingenuamente ho disinstallato mysql-python(conosciuto anche come mysqldb) credendo fosse sufficiente una reinstallazione…. ripeto: ingenuo. ;-)

Lanciando il comando:

sudo python setup.py build

ottenevo una sbrodolata di errori relativi a librerie gcc. A fiuto ho quindi reinstallato xcode (scaricabile gratuitamente dall’app store) e rilanciato la build di mysql-python… ancora errori, ma quelli precedenti sembravano risolti. Ora le rogne venivano dal mysql_config mancante… Ho scoperto che nella cartella di installazione di mysql-python c’è un file site.cfg che contiene questa famosa variabile mysql_config, la quale deve contenere il path al file mysql_config (file di configurazione di mysql). Per me che uso XAMPP 1.7.3 su mac questo file si trova in “/Applications/XAMPP/xamppfiles/bin”.

Lanciando la build del driver ottengo errori dovuti alla mancanza degli headers di mysql, errore che avevo già riscontrato nell’installazione di Imagick su XAMPP per Mac, vado per cui diretto sul sito di XAMPP 1.7.3, scarico il development package e lo installo.

Sperando nella buona sorte rilancio per l’ennesima volta la build di mysql-python e incappo nell’ennesimo errore. Questa volta sembra che sia dovuto ad una errata versione di XCode, ma leggendo più approfonditamente noto che il problema è dovuto al mancato supporto power-pc (ppc) a partire da XCode 4. Per risolvere questo ennesimo problema si deve editare il famoso mysql_config (in “/Applications/XAMPP/xamppfiles/bin” per chi usa XAMPP) nel seguente modo.

Alla riga 97 sostituite la versione minima di mac osx, io ho modificato da 10.4 a 10.6 (vedete voi), la mia riga ora è così:

ldflags='-L/Applications/XAMPP/xamppfiles/lib -I/Applications/XAMPP/xamppfiles/include -mmacosx-version-min=10.6 '

Alla riga 122 riportate la versione di mac appena modificata e inoltre eliminate la voce -arch ppc, la mia riga ora si presenta così:

cflags="-I$pkgincludedir  -I/Applications/XAMPP/xamppfiles/include -L/Applications/XAMPP/xamppfiles/lib -mmacosx-version-min=10.6 -arch i386 -D_P1003_1B_VISIBLE -DSIGNAL_WITH_VIO_CLOSE -DSIGNALS_DONT_BREAK_READ -DIGNORE_SIGHUP_SIGQUIT  -DDONT_DECLARE_CXA_PURE_VIRTUAL " #note: end space!

A questo punto lanciate la build e per magia arriverà fino al termine senza più errori. Potete quindi installare il pacchetto lanciando il comando:

sudo python setup.py install

A questo punto django sarà tornato alla normalità (a meno che voi utilizzaste le python image library, PIL, per cui dovrete reinstallare anche quelle, ma io non ho riscontrato problemi nel farlo).