Creiamo una Web App da zero usando AngulaJS e Firebase

() translation by (you can also view the original English article)

In questa serie useremo AngularJS e Firebase per creare una semplice applicazione web da zero. Sarà una semplice applicazione di blogging dove l'utente potrà registrarsi o loggarsi e pubblicare un post nel blog.

Questo tutorial presume che abbiate un conoscenza di base di AngularJS, ma non dovrebbe essere difficile cogliere i vari argomenti lungo in nostro percorso.

Introduzione a AngularJS

AngularJS è uno dei più ambiti framework MVC in Javascript. È un un framework strutturale per creare applicazioni web dinamiche estendendo le capacità dell'HTML Caratteristiche come il data binding o le dependency injection rendono più facile sviluppare applicazioni con meno codice.

Dalla documentazione di AngularJS:

HTML è magnifico per creare documenti statici, ma vacilla quando proviamo a usarlo per gestire schermate dinamiche nelle applicazioni web. AngularJS ti permette di estendere il vocabolario HTML delle tue applicazioni. L'ambiente risultante è straordinariamente espressivo, leggibile e di rapido sviluppo.

Introduzione a Firebase

Immagina di creare una applicazione web senza doverti preoccupare del lato back-end. Firebase rende questo possibile sincronizzando i dati in tempo reale con la tua applicazione senza preoccuparsi del back-end. Basta fare solo qualche richiamo all'API.

Firebase è una potente API per memorizzare e sincronizzare dati in tempo reale. Combinando la potenza del data binding (aggiornamento UI -> Prorpietà e viceversa) a doppia via di AngualarJS con Firebase il risultato è una sincronizzazione a tre vie decisamente imponente.

Iniziamo con AngularJS

Il progetto angualar-seed è un boilerplate per iniziare la creazione di web app usando AngularJS. Scarica o clona il progetto anguilar-seed dal repository.

1	$ git clone https://github.com/angular/angular-seed.git

Spostati nella cartella del progetto e installa le dipendenze richieste.

1	$ cd angular-seed
2	$ npm install ## Install the dependencies

Avvia il server:

1	$ npm start ## Start the server

Punta con il tuo browser a https://localhost:8000/app/index.html e dovresti vedere l'applicazione di default avviata.

Entra nella cartella app dentro angular-seed . Lì risiede il codice dell'applicazione. All'interno della cartella app troverai app.js che è il nucleo dell'app. Dichiareremo tutti i moduli e percorsi al livello di app all'interno di questo file. Di default, il progetto angular-seed ha due viste , view1 e view2. Cancella le cartelle view1 e view2 dalla cartella dell'applicazione.

Partiamo da zero. Apriamo app.js e rimuoviamo il codice esistente. In app.js andremo a definire i percorsi della nostra applicazione, per esempio come gestire richieste come /home. Per definire i percorsi avremo bisogno di un modulo di AngularJS chiamato ngRoute. Per usare ngRoute dobbiamo prima includerlo o aggiungerlo alla nostra applicazione. Useremo angular.module per aggiungere il modulo ngRoute alla nostra app come mostrato sotto:

1	angular.module('myApp', [
2	'ngRoute'
3	])

Il modulo ngRoute ha un componente chiamato $routeProvider che è utile per configurare i percorsi. Inseriremo $routeProvider nel metodo config di angular.module e definiremo i nostri percorsi nella sua funzione di richiamo come mostrato sotto:

'use strict';

angular.module('myApp', [
  'ngRoute'
]).
config(['$routeProvider', function($routeProvider) {
     // Routes will be here
}]);

In seguito, apriamo index.html e rimuoviamo i riferimenti a view1 e view2. Rimuoviamo ogni cosa dal body di index.html eccetto i riferimenti script e i div mostrati sotto con la direttiva ngView.

1	<div ng-view></div>

ngView è una direttiva che aiuta a renderizzare la vista associata a un particolare percorso all'interno del layout generale, index.html. Ogni qual volta il percorso cambia, il contenuto mostrato sotto il div cambia.

Adesso creiamo una nuova vista per il sign in dell'utente. All'interno della directory app creiamo una cartella chiamata home. All'interno di home creiamo due file chiamati home.html e home.js. Apriamo home.html e includiamo il seguente codice HTML:

<!DOCTYPE html>
<html lang="en" ng-app="myApp">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="icon" href="http://getbootstrap.com/favicon.ico">

    <title>AngularJS & Firebase Web App</title>

    <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://getbootstrap.com/examples/signin/signin.css" rel="stylesheet">

    <link href="justified-nav.css" rel="stylesheet">

</head>

<body>

    <div class="container">
        <div class="jumbotron" style="padding-bottom:0px;">
            <h2>AngularJS & Firebase App!</h2>
        </div>
        <form class="form-signin" role="form">
            <input type="email" class="form-control" placeholder="Email address" required="" autofocus="">
            <input type="password" class="form-control" placeholder="Password" required="">
            <label class="checkbox">
                <a href="#"> Sign Up</>
        </label>
        <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
      </form>

    </div>

  

</body></html>

Come si può vedere nel codice sopra, useremo Bootstrap per creare la vista della nostra applicazione.

All'interno di home.js dichiareremo i percorsi per l'accesso della applicazione alla vista home. $routeProvider ha un metodo chiamato when che useremo per creare un percorso per la nostra vista home. Quando dichiariamo un nuovo percorso, configureremo un templateUrl che dovrebbe renderizzare il nostro index.html. Allo stesso modo, configureremo un controller per creare un nuono $scope della vista home. Un controller è un logica che controlla una particolare vista. Ecco come dovrebbe apparire:

'use strict';

angular.module('myApp.home', ['ngRoute'])

// Declared route 
.config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/home', {
        templateUrl: 'home/home.html',
        controller: 'HomeCtrl'
    });
}])

// Home controller
.controller('HomeCtrl', [function() {

}]);

Ora apriamo app.js e includiamo il modulo home myApp.home nell'applicazione. Inoltre dichiariamo il percorso di default della nostra applicazione usando il metodo $routeProvider.otherwise per la nostra vista home.

'use strict';

angular.module('myApp', [
    'ngRoute',
    'myApp.home'           // Newly added home module
]).
config(['$routeProvider', function($routeProvider) {
    // Set defualt view of our app to home
    
    $routeProvider.otherwise({
        redirectTo: '/home'
    });
}]);

Dopo di che, per mostrare la homepage, abbiamo bisogno di includere home.js all'interno del file template HTML principale dell'applicazione. Apriamo index.html e includiamo il seguente codice:

1	<script src="home/home.js"></script>

Riavviamo il server e puntiamo il browser all'indirizzo http://loaclhost:8000/app/index.html e dovremmo vedere la videata di log in.

Iniziamo con Firebase

Prima di tutto per iniziare abbiamo bisogno di registrare un account gratuito su Firebase. Dopo la registrazione ci ritroveremo una schermata come questa:

Prendete nota dell'URL dell'app creata e cliccate sul pulsante Manage App. Useremo questo URL di Firebase per interagire con il database di Firebase.

Useremo Firebase per l'autenticazione della nostra applicazione usando un email e una password. Per farlo funzionare è necessario abilitarlo da Firebase. Dalla Dashboard, cliccate sula scheda Login & Auth nel menù di sinistra. Nella schermata, sotto la scheda Email & Password, spuntate Enable Email & Password Authentication come mostrato:

Aggiungete un nuovo utente con una Email e una Password mediante la quale ci autenticheremo dopo aver implementato la funzione di Sign-in.

Add a new user with an Email and Password

Implementazione della funzionalità di Sign-In.

Per utilizzare Firebase includiamo il seguente script in app/index.html:

<script src="https://cdn.firebase.com/js/client/1.0.18/firebase.js"></script>

<script src="https://cdn.firebase.com/libs/angularfire/0.8.0/angularfire.min.js"></script>

<script src="https://cdn.firebase.com/js/simple-login/1.6.2/firebase-simple-login.js"></script>

Dopo bisogna includere il modulo firebase in home.js. Aggiungiamo il modulo firebase in home.js come mostrato sotto:

1	angular.module('myApp.home', ['ngRoute','firebase'])

Adesso siamo pronti per interagire con Firebase. Apriamo home.js e dentro HomeCTRL, creiamo una nuova funzione chiamata SingIn per l'autenticazione dell'utente. Useremo $scope per create la nuova funzione. $scope è un oggetto che fa riferimento al modello dell'applicazione, e funge anche da collante tra il controller e la vista dell'applicazione. Da qui noi inseriremo l'oggetto $scope nella funzione SignIn così che il modello oggetto dalla vista sia accessibile all'interno della fuznione SignIn.

$scope.SignIn = function($scope) {
    var username = $scope.user.email;
    var password = $scope.user.password;
    
    // Auth Logic will be here
}

Dopo di che, all'interno di HomeCtrl creiamo un istanza di Firebase usando l'URL di Firebase come mostrato:

1	var firebaseObj = new Firebase("https://blistering-heat-2473.firebaseio.com");

Il modulo $firebaseSimpleLogin viene utilizzato per l'autenticazione a Firebase utilizzando un ID di posta elettronica e una password. Per usarlo, abbiamo bisogno di iserire il modulo $firebaseSimpleLogin in HomeCtrl come indicato:

1	.controller('HomeCtrl', ['$scope','$firebaseSimpleLogin',function($scope,$firebaseSimpleLogin) {

Usando firebaseObj create un'istanza $firebaseSimpleLogin come mostrato:

1	var loginObj = $firebaseSimpleLogin(firebaseObj);

Ora usando l'API $login autenticheremo l'email di ID e la password tramite Firebase loginObj.$login prende email e password come parametri. A seguito di un'autenticazione corretta, avremmo un callback positivo oppure a seguito di una non corretta autenticazione un callback di errore.

$scope.SignIn = function(event) {
    event.preventDefault();  // To prevent form refresh
    var username = $scope.user.email;
    var password = $scope.user.password;
    
    loginObj.$login('password', {
            email: username,
            password: password
        })
        .then(function(user) {
            // Success callback
            console.log('Authentication successful');
        }, function(error) {
            // Failure callback
            console.log('Authentication failure');
        });
}

Adesso, affinché il codice di controllo funzioni, abbiamo bisogno di collegare il controller alla vista. AngularJS fornisce una direttiva chiamata ngController per collegare un controller ad una vista. Apriamo home.html e aggiungiamo la direttiva ngController all'elemento body per collegarlo a HomeCtrl.

Abbiamo bisogno di una email e di una password per accedere all'interno della funzione di Controllo SingIn. AngularJS fornisce una direttiva chiamata ngModel per legare il suo valore a $scope in modo che sia accessibile all'interno della funzione SignIn. Includiamo la direttiva ngModel all'elemento input dell'email e della password come mostrato:

<body ng-controller="HomeCtrl">

    <div class="container">
        <div class="jumbotron" style="padding-bottom:0px;">
            <h2>AngularJS & Firebase App!</h2>
        </div>
        <form class="form-signin" role="form">
            <input ng-model="user.email" type="email" class="form-control" placeholder="Email address" required="" autofocus="">
            <input ng-model="user.password" type="password" class="form-control" placeholder="Password" required="">
            <label class="checkbox">
                <a href="#"> Sign Up</>
        </label>
        <button type="button" class="btn btn-lg btn-primary btn-block">SignIn</button>
      </form>

    </div>

  

</body>

In fine aggiungiamo la direttiva ngClick al pulsante Sign-in per richiamare la funzione SignIn:

1	<button type="button" ng-click="SignIn($event)" class="btn btn-lg btn-primary btn-block">SignIn</button>

Salviamo tutti i cambiamenti e riavviamo il server. Puntiamo il browser all'indirizzo http://localhost:8000/app/index.html#/home e proviamo a loggarci usando ID email jay3dec@gmail.com e password jay. Su una corretta autenticazione dovremmo visualizzare il messaggio Authentication successful nella console del browser.

Conclusioni

In questo tutorial abbiamo visto come iniziare a creare un'applicazione web basata su AngularJS Abbiamo implementato la funzionalità di accesso e di autenticazione corretta dell'utente tramite il database di Firebase.

Nella seconda parte di questo tutorial, porteremo il tutto al livello successivo implementando la validazione e la funzionalità di registrazione e qualche altra funzionalità. Il codice del tutorial di sopra è disponibile su GitHub.

Fateci conoscere le vostre opinioni nei commenti qui sotto.