Linux Microsoft Code NodeJs e Google Starterkit - Introduzione

Prefazione

Sentire parlare di starterkit mi ricorda gli inizi della mia carriera lavorativa. quando giocavo con gli asp.net starterkit per creare i miei primi siti web interattivi.
Da qualche giorno c'è stato un restiling della sezione Google developers. Sotto la voce web, troviamo in beta un nuovo starter kit. Ma di cosa si tratta?

In poche parole, questo starterkit, è un punto di partenza per far vedere come sia possibile visualizzare web application compatibili su tutti i device, dagli smartphone alle tv, garantendo alte performance in termini di leggerezza, responsività e velocità di caricamento. Inoltre è possibile sincronizzare in realtime layout e dati su diversi device e tenere traccia delle metrice di performance, mobile e desktop.

Iniziamo

Lo starterkit è basato sui seguenti componenti:

NodeJs: Possiamo definirlo un framework che permette l'utilizzo server-side di Javascript.
Npm: E' per Node cio che NuGet è per .Net, e cioè un package manager, che permette di produrre e consumare pacchetti di software (addin, frameworks, ecc..)
Sass: Syntactically Awesome Style Sheets, un preprocessore CSS serve a definire fogli di stile con una forma più semplice, completa e potente rispetto ai CSS e a generare file CSS ottimizzati, aggregando le strutture definite anche in modo complesso.

Controlliamo che node sia installato correttamente, da terminal digitate:

node -v

Se non siete all’ultima versione potete aggiornare il tutto tramite Npm con i seguenti comandi:

sudo npm cache clean -f
sudo npm install -g n
sudo n stable

Setup del Google starterkit

Per prima cosa scaricare lo starterkit da qui: download
Decomprimete i file in una nuova cartella ed aggiungervi il componente Glup tramite Npm:

cd my-project
npm install #(mi raccomando è un processo lungo, abbiate pazienza...)
npm install gulp -g

Ora per fare una prova lanciamo il server locale tramite il comando

gulp serve #(si apre il browser Chrome, premte Ctrl-R per attivare reload automatico)

Installare Code

A questo punto abbiamo bisogno di un editor. Google ci consiglia Sublime, ma io ho optato per Microsoft Code perchè mi piace l'idea di vedere girare sotto Linux cose Microsoft e per imparare ad usarlo.

Scaricate Code al seguente indirizzo web: download

Seguite le istruzioni di installazione qui: istruzioni setup

Se volete fare l’update, su windows è abilitato di defaut, su MAC lo includeranno ma non sarà automatico, su Linux non è previsto (anche se nel menu lo ho trovato ma non fa niente), quindi dobbiamo verificare ogni tanto e farlo da soli.

Su Linux mi raccomando di estrarre i file dallo zip, con il comando: unzip VSCode-linux-x64.zip -d /home/rudy/Develop/VSCode
se usate un gestore d’archivi grafico vi può dare errori strani.

Funzionalità

Per compilare il nostro progetto Code supporta Glup (che possiamo definire un compressore di html, javascript, css ed immagini. Unisce più file assieme e rimuove le parti superflue che non incidono sul normale funzionamento).

Connessione di device fisici

Per connettere i nostri device (nel mio caso Nexus 5 e Nexus 9) per prima cosa abilitiamo il debug USB (link ad abilitazione) e colleghiamoli al PC tramite USB.
Apriamo il browser al seguente URL: chrome://inspect
Ed abilitiamo il port forwarding.

Debug dei device in realtime
Ogni device ha il suo modo per eseguire il debug.

Con Android

utilizziamo i Chrome DevTools che possiamo impostare al seguente indirizzo: chrome://inspect per impostare il tuo device leggi qui: debug setup

Con Safari for iOS

Apri Safari su tuo device iOS.
Connettilo via USB.
Apri Safari sul tuo PC.
Nel menu di Safari’s menu vai su Develop e seleziona il nome del tuo dispositivo.
Seleziona quale tab vuoi debuggare.

Con IE Windows Phone

Al momento non esiste un supporto al debug nativo, ma si può emulare il browser mobile sul desktop con IE 11, vedi qui: win emulator

Debug Nexus 5 e Nexus 9 in realtime

Per prima cosa collego i 2 device alle porte USB del PC e vado all’indirizzo: chrome://inspect su Google Chrome

Otteniamo l’indirizzo ip del PC, nel caso Linux tramite riga di comando “ifconfig”, con windows “ipconfig”.

Sui device apriamo il browser Chrome all’indirizzo ip del PC ottenuto precedentemente e ci colleghiamo alla porta del server Gulp: x.y.z.n:3000 (Es.: 192.168.1.2:3000)

Dal PC all’indirizzo chrome://inspect, vediamo comparire i device collegati e a quale URL.

Editing con Code in realtime

A questo punto da linea di comando raggiungiamo la cartella dello starter kit ed apriamo Code con il comando: “code .”
Clicchiamo sul menu “File” ed abilitiamo il flag “Enable autosave”.

A questo punto possiamo modificare il codice sorgente del programma e vedere in realtime il cambiamento. Inoltre scrollando e navigando sui vari link, da uno device collegati al PC (o dal PC stesso), tutti gli altri lo seguiranno (questo è possibile tramite la funzionalità “browsersync”).

Mono 4.0 e C# 6.0

Mono 4.0 è la prima versione di Mono che contiene codice Microsoft .NET open source. In questa versione sono abilitate per default le nuove funzionalità del C# 6.0.

Queste sono le nuove funzionalità

• Auto property initializers
• Static members
• String interpolation
• Expression-bodied methods
• Expression-bodied properties
• Index initializers
• Null-conditional operators
• The nameof operator
• Exception filters
• Await in catch and finally

E questo un esempio di utilizzo (ho usato MonoDevelop 5.9)

using System;
using Newtonsoft.Json.Linq;
using System.Configuration;

//Con - Static members
using static System.Math;

namespace Azzan.Mono4Sample
{
    public class Point
    {
        /*
        //Prima di - Auto property initializers
        public int X {get; private set;}
        public int Y {get; private set;}

        public Point()
        {
            X = 4;
            Y = 9;
        }
        */

        //Con - Auto property initializers
        public int X {get; } = 4;
        public int Y {get; } = 9;

        public Point(int x, int y) { X = x; Y = y; }

        //Prima di Expression-bodied properties
        /*
        public double Dist
        {
            //Prima di - Static members
            //get { return Math.Sqrt(X * X + Y * Y); }

            //Con - Static members
            get { return Sqrt(X * X + Y * Y); }
        }
        */

        //Con - Expression-bodied properties
        public double Dist => Sqrt(X * X + Y * Y);

        //Prima di - Expression-bodied methods
        /*
        public override string ToString()
        {
            //Prima di - String interpolation
            //return string.Format("[Point: X={0}, Y={1}, Dist={2}]", X, Y, Dist);

            //Con - String interpolation
            return $"[Point: X={X}, Y={Y}, Dist={Dist}]";
        }
        */

        //Con - Expression-bodied methods
        public override string ToString() => $"[Point: X={X}, Y={Y}, Dist={Dist}]"; 

        //Prima di - Index initializers
        /*
        public JObject ToJson()
        {
            var result = new JObject();
            result["x"]  = X;
            result["y"]  = Y;
            return result;
        }
        */

        //Con - Index initializers
        public JObject ToJson() => new JObject() { ["x"]  = X, ["y"]  = Y };

        //Prima di - Null-conditional operators
        /*
        public static Point FromJson(JObject json)
        {
            if(json != null &&
                json["x"] != null &&
                json["x"].Type  == JTokenType.Integer &&
                json["y"] != null &&
                json["y"].Type  == JTokenType.Integer)
            {
                return new Point((int)json["x"], (int)json["y"]);
            }

            return null;
        }
        */

        //Con - Null-conditional operators
        public static Point FromJson(JObject json)
        {
            if(json?["x"]?.Type == JTokenType.Integer &&
               json?["y"]?.Type == JTokenType.Integer)
            {
                return new Point((int)json["x"], (int)json["y"]);
            }

            return null;
        }
            
        public Point Add(Point point)
        {
            if(point == null)
            {
                //Prima di - The nameof operator
                //throw new ArgumentNullException("point");

                //Con - The nameof operator
                throw new ArgumentNullException(nameof(point));
            }

            return point;
        }

        public void DoSomething()
        {
            //Prima di - Exception filters
            try
            {
                
            }                                //Con - Exception filters
            catch(ConfigurationException ex) //when (ex.IsSevere)
            {
                //Con - Await in catch and finally
                //await LogAsync(ex);
            }
            finally 
            {
                //Con - Await in catch and finally
                //await CloseAsync();
            }
        }
    }
}

Qui trovate i sorgenti dell'esempio creati con MonoDevelop 5.9: Download esempio

Purtroppo ho notato però che l'editor di MonoDevelop 5.9 ha ancora qualche problema nel riconoscere la sintassi C# 6.0 ma non sono cose gravi.
Invece gli "Exception filters" proprio non funzionano, se de-commentate il codice del mio esempio il compilatore vi da errore.

Che versione di Mono è installata?

Questo è un comando che potete lanciare tramite shell Linux, per vedere i dettagli della versione che avete installato:

mono --version

Lista comandi Google Now

Oggi mi è arrivato l'orologio di LG con Android Wear. Per l'occasione e perché ne avrò bisogno ecco la lista dei comandi Google Now che ho trovato qua e la su internet:

Inizia nuova telefonata

• chiama [nome persona] [cognome] [tipo: cellulare, lavoro, casa, ecc..]

Invia messaggio di testo

• invia messaggio a [nome persona] [cognome] [tipo: cellulare, lavoro, casa, ecc..] [messaggio] 
• email a [nome persona] [cognome] [messaggio] 

Foto online di qualcosa

• foto [soggetto: luogo, persona, oggetto, ecc..] [quando? Momento temporale o condizione ]
  Es.: foto di Roma al tramonto

Navigazione web

• apri [indirizzo web]
• accedi a [sito web] 

Cose nei paraggi

• ristorante, pizzeria, pub, ecc.. vicino a me

Informazioni turistiche

• chiesa, monumento, teatro, ecc.. [nome dell'oggetto della ricerca]

Informazioni generiche

• quando, quanto, quanti, dove, ecc..  [richiesta]
  Es.: quando sorge il sole
• che cos'è [oggetto] 
• chi ha inventato [oggetto]
• quale è il significato di [parola] 
• chi è [nome di personaggio famoso] 
• l'autore di [nome libro]
• orario a [nome luogo]
• che ore sono a [nome luogo]
• fuso orario [nazione] 

Musica

• ascolta [titolo canzone] 
• come si intitola questo brano? 
• ... (lui ascolta e ti dice che brano stai sentendo)

Informazioni meteo specifiche

• che tempo fa [oggi, domani] [a: nome luogo]
• [domanda] [periodo temporale]
  Es.: pioverà domani? 

Informazioni meteo generiche

• meteo [luogo] 

Calcoli matematici somma

• numero più numero

Calcoli matematici sottrazione

• numero meno numero

Calcoli matematici divisione

• numero diviso numero

Calcoli matematici moltiplicazione

• numero moltiplicato per numero
• numero X numero

Calcoli matematici percentuale

• numero percento di numero

Calcoli matematici modulo

• numero modulo numero

Calcoli matematici radice

• radice quadrata di [numero] 

Conversioni di unità

• numero [unità] in [unità]
  Es.: 3 litri in ettolitri

Sport classifiche

• classifica [serie: A, B, ecc..]

Sport eventi

• quando giocherà [nome squadra]

Sport risultati

• chi ha vinto tra [squadra] e [squadra]

Sport domanda risultato

• [squadra]  ha [vinto, perso] 

Programmazione di un film

• cinema, film [nome del film] 

Film con un certo attore

• film [nome cognome attore] 

Serie tv

• serie tv [nome serie, attore] 

Appunti

• ricordami di [cosa da ricordare] alle [ora e minuto] di [giorno] (oppure si può specificare: mattina, pomeriggio, sera, notte) 
• scrivi nota [nota da scrivere]

Sveglia programmata

• sveglia [giorno] alle [ora e minuto]
• svegliami tra [numero] minuti

Appuntamento su calendario

• appuntamento [giorno] alle [ora e minuto] [descrizione] 

Avvio applicazioni

• avvia, lancia [nome applicazione] 

Voli aerei

• volo [partenza] [destinazione] 

Pubblicazione social

• pubblica su [google plus, twitter, facebook] [descrizione]

Navigatore

• naviga fino a [nome città] 
• mappa di [nome città] 
• foto di [nome città]
• vai a [nome città] 
• quanto è lontano [luogo] 
• portami a [luogo] 
• traffico [località, nome autostrada]

Man mano che scopro nuovi comandi vocali li aggiungerò a questa lista.

From C# to Qt: Thread sleep

Eccomi alla prima parte della rubrica dedicata al confronto fra C# e Qt. In C# quando vogliamo mettere in pausa il thread corrente in cui ci troviamo per tot millisecondi usiamo la funzione statica: Thread.Sleep([numero di millisecondi]).
In Qt invece ci sono almeno 3 possibilità diverse:

//METODO 1:
//Usare la classe QTest
QTest::qSleep(100); // blocca l' event processing
QTest::qWait(100);  // non blocca l' event processing

//METODO 2:
//Usare QWaitCondition / QMutex
QWaitCondition waitCondition;
QMutex mutex;

waitCondition.wait(&mutex, 100);

//METODO 3:
//Oppure fare derivare la nostra classe da QThread.
class Thread : public QThread
{
public:
    static void msleep(int ms)
    {
        QThread::msleep(ms);
    }
};

Thread::msleep(100);

The operation cannot be completed. “Puntatore non valido”

Se per caso vi dovesse capitare con Visual Studio 2012 di ricevere il messaggio: The operation cannot be completed. “Puntatore non valido”, quando state tentando di visualizzare un file di risorse .resx, per ripristinarlo, vi basta aprire il file incriminato con un editor di testo e rimuovere tutti gli elementi “data”, dell’xml che contengono l’attributo type="System.Resources.ResXNullRef, System.Windows.Forms".
Es. va eliminato:

<data name="lblLavoroSuLinea.Image" type="System.Resources.ResXNullRef, System.Windows.Forms">
    <value />
</data>

Rimuovere elementi da una lista in maniera intelligente

Di solito quando vogliamo fare eseguire un operazione e poi rimuovere degli elementi da una lista, come facciamo?

Verrebbe naturale di fare un ciclo su ogni elemento della lista, eseguire l’operazione e rimuovere l’elemento:

foreach (Command c in itsCommands)
{        
    c.Execute();
    itsCommands.Remove(c);
}

Purtroppo però così facendo otteniamo un eccezione che ci avvisa che la collezione è stata modificata (in effetti abbiamo rimosso un elemento) e quindi l’operazione di ciclo sulla collezione non è più valida.

Come soluzione al problema si potrebbe crea un altra collezione con gli elementi da rimuovere ed eseguire un altro ciclo per eliminare i comandi eseguiti:

Commands itsCommandsForDelete = new Commands();

foreach (Command c in itsCommands)
{
    c.Execute();
    itsCommandsForDelete.Add(c);
}

foreach (Command c in itsCommandsForDelete)
{
    itsCommands.Remove(c);
}

Questa soluzione non è molto performante perchè ci obbliga ad eseguire il ciclo su ogni elemento per due volte.

Ecco una soluzione alternativa per eseguire il tutto in un solo ciclo:

while (itsCommands.Count > 0)
{
    Command c = (Command) itsCommands[0];
    itsCommands.RemoveAt(0);
    c.Execute();
}

Carta di credito su internet

Spesso le informazioni che ci arrivano dai media e soprattutto dai telegiornali, sono storie sentite raccontare da altri, gonfiate e mal capite ed esposte che incutono paura al consumatore. Ad esempio:

E'sicuro usare la carta di credito su internet?

Il giorno prima di Pasqua ho avuto una discussione con amici di mio padre, i quali, non si fidano ad usare la carta di credito su web, perché hanno sentito al tg che non va bene e che si viene spesso e volentieri truffati.

La mia prima reazione è stata quella di tentare di rassicurarli spiegando che in realtà, esitono anche siti famosi e sicuri, nei quali si hanno vantaggi economici e si trovano prodotti altrimenti introvabili.

Un altro aspetto negativo è che questa mancanza di fiducia è alimentata dall'idea di voler tastare con mano il prodotto, prima di comprarlo.

Inoltre si ha il timore che una volta effettuato l'acquisto non ci siano garanazie nel caso arrivasse rotto o difettoso.

Per esperienza, sono anni ormai che faccio acquisti su internet e non ho mai avuto problemi. Per prima cosa se mi piace un prodotto, mi reco al primo centro commerciale per tastarmelo e provarlo. Nel caso non fosse disponibile, cerco eventuali video ed informazioni su YouTube o nei blog del settore di competenza.
Se decido di effettuare l'acquisto ci sono due strade da percorrere:

La prima è l'acquisto da siti più famosi tipo Amazon. Qui mi sento sicuro al 100% perché non ho mai avuto problemi ed inoltre quasi sempre il prezzo è nettamente inferiore rispetto ai comuni centri commerciali (per alcuni prodotti ho risparmiato anche 200 euro). Su amazon inoltre il prezzo di un prodotto è molto variabile di giorno in giorno.

E tutto semplicissimo. Mi basta accede al sito con le mie credenziali, guardare i prodotti, metterli nel carrello virtuale, completare l'acquisto fornendo il numero della carta di credito (la prima volta, poi viene memorizzata sul sito), e attendere il pacco comodo a casa in poltrona.

In caso di prodotto rotto o difettoso si hanno 30 giorni per restituirlo e farselo rimborsare. Passati i 30 giorni (ed entro 2 anni dati dalla garanzia e come qualsiasi altro prodotto acquistato in un normale negozio) bisogna cercare il più vicino centro di assistenza che si occupa della marca del prodotto acquistato (basta una piccola ricerca su Google per trovarlo).

Nel secondo caso cioè quello di siti sconosciuti ci sono un paio di regole da seguire ma niente di complicato:

- Prima di tutto dobbiamo fare una ricerca, per capire l'opinione della gente riguardo al negozio, se si sono trovati bene, in quanto tempo la merce ordinata è arrivata, se hanno avuto esperienze negative, se c'è e se è buona l'assistenza post vendita. Riassumendo è importante conoscere la reputazione online del negozio (feedback positivi e negativi).

- Bisogna confrontare l'offerta con quella di altri negozi e se è eccessivamente bassa stare molto attenti perché si tratta di una provabile trappola, o ci sono delle clausole nascoste. Molte volte ad esempio la tecnica di marketing usata è proporre un prezzo molto basso rispetto alla concorrenza, ma prima di terminare l'acquisto vi vengono richieste spese di spedizione molto alte che riportano la spesa totale allo stesso livello o superiore a quella dei concorrenti.

- Controllate che sia presente un servizio post vendita e che i numeri di telefono esitano veramente (si può contollare sul sito delle pagine bianche).

Una volta che avete appreso abbastanza informazioni e vi fidate, effettuate l'acquisto.

Se proprio vi va male denunciate l'accaduto alla polizia postale.