Integrazione Continua su Azure con git e azure-cli (parte II)

Continuiamo la precedente nota su Integrazione Continua su Azure con git e azure-cli, nella quale ho illustrato una possibile procedura per l’implementazione di un ambiente di sviluppo per l’integrazione continua su Microsoft Azure. In quell’occasione il progetto pubblicato implementava sia la gestione del front-end (sviluppato in quell’occasione con un’applicazione Angular 2), che il back-end (implementato con ASP.NET Core) implementata su host IIS.

In questo post concentreremo la nostra attenzione solo sulla pubblicazione di una Web App Angular 2 implementata con Node.js. A tal fine ci avvarremo di angular-cli, un set di strumenti in linea di comando per lo sviluppo di un'app Angular 2.

Creazione della Web App

Seguendo le istruzioni riportate dal sito creiamo una Web App Angular 2 con angular-cli.

1. In primo luogo installiamo sul nostro sistema angular-cli:

$ npm install -g angular-cli

2. Quindi creiamo la nostra Web App:

$ ng new my-a2-app

3. Personalizziamone il contenuto, modificando:
   
   • il file app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'my angular 2 app!';
  sign = 'Maurizio Attanasi';
  year = '2016';
}

• il file app.component.html
  
4. Avviamo il server in locale con il comando

$ ng serve


.
5. Aggiungiamo nella directory root del progetto il file .deployment che configurerà la directory di avvio del progetto, e contenente le righ che seguono:

[config]

project = dist

Preparazione e pubblicazione della Web App su azure

1. Utilizzando le funzionalità di azure-cli viste nel post precedente, creiamo la Web App

$ azure site create my-a2-app --git --gitusername ***

2. Aggiorniamo le modifiche del repository locale, eseguiamo il commit ed infine eseguiamo il push verso il repository remoto di azure

$ git add .

$ git commit -m "Initial commit"

$ git push azure master

Se la è andata a buon fine, la nostra shell di comando sarà simile a quella seguente

Ulteriore conferma dell’avvenuta pubblicazione possiamo averla navigando il portale di azure al percoso my-a2-app > Deployment options

Ed infine, raggiungendo l’indirizzo http://my-a2-app.azurewebsites.net/

Enjoy

Integrazione Continua su Azure con git e azure-cli

In un precedente post (Integrazione Continua con Visual Studio Team Service) avevo condiviso il link ad un tutorial che illustrava il servizio di Continuous Integration offerto da Visual Studio Team Services. In questa nota riporterò gli step necessari ad ottenere un risultato analogo
per la pubblicazione su una Web Application su Azure sfruttando git come sistema di versioning, e azure-cli, un’interfaccia della riga di comando di Azure.
Gli strumenti necessari per raggiungere il nostro fine sono:

• node.js (del quale utilizzeremo il gestore dei pacchetti, npm, per l’installazione, tra l’altro, di angular-cli);
• git;
• azure-cli;
• un account Azure valido (anche un free trial);

Data la natura degli strumenti sopra elencati, la procedura che andremo a descrivere vale per tutti i sistemi operativi per i quali tali strumenti sono disponibili, e quindi Windows, Linux e osX/macOS.
In primo luogo verifichiamo che sul sistema sia installato Node.js eseguendo su una shell di comando

bash-3.2$ node --version
v7.2.0

Nel caso in cui Node.js non sia presente sul sistema procederemo alla sua installazione seguendo le istruzioni presenti sul sito.
Allo stesso modo verifichiamo la presenza sul nostro sistema di git

bash-3.2$ git --version
git version 2.9.3 (Apple Git-75)

e azure-cli

bash-3.2$ azure --version
0.10.7 (node: 7.2.0)

Nel caso in cui questo pacchetto non sia presente sul sistema, utilizzeremo npm per la sua installazione

npm install -g azure-cli

Preparati gli strumenti necessari, procediamo alla realizzazione di una Web Application ed alla sua pubblicazione su Azure.

1. Login
   Per eseguire il login dalla linea di comando di azure, eseguiamo:

$ azure login

e seguiamo le istruzioni riportate nella risposta

2. Impostazione Gestione servizi di Azure (asm)
Per abilitare i comandi della modalità Service Management dell’interfaccia della riga di comando di Azure, eseguire il comando.

bash-3.2$ azure config mode asm

1. Impostazione dell’utente per la pubblicazione
   Per impostare nome utente e password per la pubblicazione della Web Application, eseguire il comando:

azure site deployment user set --username <username> --pass <password>

Creazione della Web Application

Tra le varie possibilità disponibili, (html, asp.net, Node.js, …), realizzeremo una Web Application faremo con l’ultima nata delle tecnologie ASP.NET:
ASP.NET Core.
Verifichiamo la presenza dell’sdk sul nostro sistema con il comando

bash-3.2$ dotnet --version
1.0.0-preview2-1-003177

Nel caso in cui .net non sia presente, seguiamo le istruzioni
relative al sistema operativo di nostro interesse.

Yeoman

Per semplificare l’implementazione della web app utilizzeremo Yeoman, il set di strumenti per la creazione di progetti web già visto in un precedente post.
In primo luogo procederemo all’installazione del generator necessario alla realizzazione di un progetto .net Core con il comando

$ sudo npm install -g generator-aspnet

Procediamo quindi alla creazione del nostro progetto creando la seguente gerarchia di directories:

$ mkdir CloudWorkbenchWebApplication
$ mkdir CloudWorkbenchWebApplication/src
$ mkdir CloudWorkbenchWebApplication/test
$ cd CloudWorkbenchWebApplication/

Nella cartella root del nostro progetto, creiamo il file global.json
che conterrà il seguente oggetto json

{
  "projects": [ "src", "test" ],
  "sdk": {
    "version": "1.0.0-preview2-1-003177"
  }
}

Spostandoci nella cartella src, eseguiamo il comando

$ yo aspnet

in risposta al quale verrà avviata una procedura guidata per la creazione del nostro progetto

Selezionando la voce Empty Web Application, e, in seguito assegnando il nome CloudWorkbenchWebApplication,
verrà creata l’infrastruttura di una semplice Web Application ASP.NET Core.
Spostandoci nella cartella appena creata (CloudWorkbenchWebApplication), eseguiamo in sequenza i comandi

dotnet restore
dotnet run

In questo modo abbiamo avviato, sulla nostra macchina un Web Server che risponderà all’indirizzo riportato (nel nostro caso http://localhost:5000/).
Avviando un browser e puntando all’indirizzo di cui sopra avremo:

Et voilà, abbiamo la nostra Web Application!

Creazione del repository git

Tornando nella directory root del nostro progetto (quella contenente la cartelle src e test ed il file global.json),
1. creiamo il repository git

$ git init

1. aggiungiamo tutti i files e le cartelle create

$ git add .

1. eseguiamo il primo commit

$ git commit -m "Initial commit"

Creazione della Web Application su Azure

Mediante la linea di comando di azure, creiamo la nostra web application

 azure site create <app_name> --git --gitusername <username>

dove app_name è il nome che assegneremo alla web application, e username è il nome utente impostato nel passaggio precedente.

Selezioniamo il server sul quale pubblicheremo la nostra applicazione (nel nostro caso 3. West Europe).
Al termine dell’operazione, accedendo al portale di Azure, avremo, tra le risorse disponibili, quella appena creata

Visualizzando i dettagli della nostra App, abbiamo

e, selezionando il pulsante Browse siamo in grado di visualizzare la web app appena creata (anche se vuota).

Pubblicazione della web application

Siamo pronti per eseguire il primo push verso il repository azure creato in precedenza.
A tal fine eseguiamo il comando

$ git push azure master

Oltre che copiare i file dal nostro repository locale al site di azure, il processo avvierà le operazioni di restore e build dell’applicazione, ed infine alla pubblicazione dell’app.
Se l’operazione è andata a buon fine, ricaricando il browser all’indirizzo precedente, abbiamo:

Et voilà ancora!!! Abbiamo ottenuto il risultato voluto, ovvero siamo riusciti a pubblicare la nostra web application raggiungibile all'indirizzo http://cloud-workbench.azurewebsites.net/ utilizzando git e la linea di comando di azure.

Configurazione versione di Node.js

Poiché la web application che abbiamo appena creato sarà il punto di partenza per una serie prove per verificare le potenzialità di Azure per le applicazioni IoT, per provare Angular 2 in combinazione con .net core, ed altro ancora, facciamo un ulteriore passaggio per aggiornare la versione di Node.js di della nostra app azure con quella installata sul nostro sistema di sviluppo (la 7.2.0, come abbiamo visto all’inizio del post).
Tra gli Application Settings della nostra Web App individuiamo la chiave WEBSITE_NODE_DEFAULT_VERSION e modifichiamone il valore a 7.2.0, come illustrato nell’immagine seguente.
.
Salvando le modifiche effettuate il sito verrà riavviato e, se non ci sono problemi, ricaricando la pagina otterremo ancora il nostro Hello World.

Enjoy

Visual Studio Dev Essentials

Per chi come me è costantemente alla ricerca di nuovi stimoli per migliorare le proprie conoscenze e di tenersi al passo con lo stato dell’arte, voglio condividere un suggerimento utile a chi vuole implementare soluzioni con il meglio delle tecnologie Microsoft.
Visual Studio Dev Essentials, il cui claim è Everything you need all in one place, ed effettivamente è un po’ un *santo graal* dal quale attingere strumenti di sviluppo, formazione di livello altissimo, e *last but not least*, un credito mensile di 25€ da spendere in servizi Microsoft Azure.

Tra le risorse messe a disposizione, quella, a mio avviso, più preziosa, è proprio l’accesso temporaneo o a tempo indeterminato ai corsi, del quale ho già cominciato ad usufruire, approfondendo gli argomenti relativi allo stato dell’arte del nuovo stack per applicazioni web di Microsoft ASP.Net Core con il corso Building a Web App with ASP.NET Core, MVC 6, EF Core, and Angular.

Enjoy

Internet of Things & M.E.A.N Stack - (Part IV)

Continuiamo con l'esplorazione delle varie tecnologie legate al mondo dell'Internet Of Things, valutando un altro dei protocolli utilizzati nella comunicazione M2M, il protocollo CoAP. Come al solito, ho seguito un approccio hand-on, la cui implementazione è disponibile su GitHub al link.

Enjoy

Integrazione Continua con Visual Studio Team Service

Nel video che segue viene proposta un'interessante dissertazione su una delle nuove features introdotte da Visual Studio Team Services, l'Integrazione Continua, o CI (Continuous Integration), ovvero la pratica che prevede l'utilizzo "intensivo" di un sistema di versioning, spesso con il supporto di un tool di Build automatico.



Have fun

Internet of Things & M.E.A.N Stack - (Part III)

Finalmente siamo arrivati al momento in cui tenteremo di togliere parte della simulazione dai nostri test. A tal fine torna utile un Arduino Due che riposava in un cassetto da troppo tempo.

L’approccio ufficiale per la programmazione di questo giocattolo, passa per l’utilizzo dell’IDE ufficiale scaricabile dal link,

che, sebbene sia un ottimo strumento per far approcciare chi non ha grandi esperienze di programmazione al mondo del DIY, per la realizzazione di questo esempio, abbiamo utilizzato Atom, un ottimo editor di testo disponibile gratuitamente per i maggiori sistemi operativi, unitamente al plugin PlatformIO.

Come al solito, per la descrizione dettagliata dell’implementazione di questo nuovo step, si rimanda al repository GitHub creato per questa serie di note, raggiungibile dal link.

Nel video seguente viene data una dimostrazione riassuntiva dei risultati ottenuti in questa serie di note su IoT e M.E.A.N. Stack.

Have Fun.

Internet of Things & M.E.A.N Stack - (Part II)

Continuiamo il discorso iniziato con la nota precedente, Internet of Things & M.E.A.N Stack, nel quale abbiamo esplorato alcune opzioni per implementare un web server che fornisse il nostro sistema delle funzionalità C.R.U.D necessarie per interfacciarci al database NoSQL mongoDB.
Lo step successivo è quello di utilizzare il framework M.E.A.N. per creare una Single Page Application che ci consenta di visualizzare i dati storici e real-time prodotti dal nostro sistema IoT.
Per i dettagli relativi all’implementazione, rimandiamo al repository GitHub, nel quale sono disponibili sia i sorgenti che la descrizione degli strumenti utilizzati e dei passi seguiti.
La web app realizzata si compone di una home page che si presenta come:

La seconda pagina, dedicata alla visualizzazione dei dati storici salvati dal client mqtt realizzato in precedenza mediante il servizio REST, ha una visualizzazione tabellare dei dati

ed una grafica

Infine, last but not least, abbiamo una vista nella quale i dati provenienti dal campo, vengono visualizzati in tempo reale.

Il prossimo obiettivo, è quello di realizzare un caso non simulato di dispositivo IoT. A tal fine proveremo ad utilizzare l’implementazione Embedded C++ del progetto paho,

in abbinamento ad un controller Arduino Due.


Have Fun