logo_thumb_firebase

Realtime web applications con AngularJS e Firebase

LIVELLO:

INTERMEDIO

DURATA:

8 ore

PREREQUISITI:

Il partecipante dovrà possedere una certà familiarità con l’uso di HTML, Javascript (variabili, manipolazione array e oggetti, cicli) e aver già utilizzato in precedenza AngularJS.

OVERVIEW:

Firebase è una piattaforma cloud di Google che semplifica notevolmente il salvataggio remoto di dati in strutture JSON e semplifica notevolmente il processo di sincronizzazione realtime tra diversi utenti e dispositivi (eliminando la necesssità di creare complesse strutture con socket o strumenti analoghi).
Per utilizzare Firebase non è necessario avere alcuna competenza back-end e in pochi minuti qualunque sviluppatore front-end sarà in grado di creare applicazioni CRUD (salvataggio e lettura dati su server), creare applicazioni realtime e multiutente, e gestire facilmente tutto il processo di autenticazione e creazione utenti.

Alcuni esempi di utilizzo: giochi online multiuser, strumenti di collaborazione multiutente e multistanza, applicazioni varie nell’ambito della domotica e dell’Internet of Things, aste online, social network, software per il controllo remoto e molto altro.

OBIETTIVI FORMATIVI:

Questo corso fornisce gli strumenti e le nozioni necessarie per la creazione di applicazioni HTML5 realtime e multi-utente in Firebase e AngularJS, uno dei framework front-end più apprezzati per lo sviluppo di applicazioni web.
In alcuni esempi, sfrutteremo le potenzialità di Firebase utilizzando semplice HTML e plain Javascript, e di conseguenza le nozioni potranno essere utilizzate anche nel caso in cui il partecipante utilizzi qualunque altra libreria o framework Javascript.

CONOSCENZE IN USCITA:

Il partecipante sarà in grado di utilizzare Firebase per realizzare applicazioni web protette da login, salvare, validare e acquisire dati dal server e creare sistemi di comunicazione client-server asincroni (REST) e sincroni (realtime).

MATERIALE DIDATTICO:

Ad ogni partecipante sarà consegnato il codice sorgente di tutti gli esercizi affrontati durante il corso.

IL PROGRAMMA:

Durante il corso saranno descritte le principali funzionalità dell’SDK Javascript di Firebase, fornendo nozioni teoriche e moltissimi esempi pratici sull’utilizzo della piattaforma.
Gli argomenti trattati:

  • Introduzione all’SDK Javascript di Firebase
  • Configurazione e utilizzo della dashboard di Firebase
  • Storage dati su server e operazioni CRUD
  • Integrazione con AngularJS
  • AngularFire e 3-way binding
  • Gestione e creazione utenti
  • Custom Login e gestione ruoli
  • Login Social (Twitter, Facebook, GitHub)
  • Introduzione alle regole di sicurezza di Firebase

Oltre a diversi snippet di codice e nozioni teoriche, durante la giornata saranno inoltre realizzati diversi esercizi completi:

To-do list realtime e multiuser (AngularJS, AngularFire)

Una todo list multi utente per apprendere le basi di una corretta gestione delle operazioni CRUD (lettura, inserimento, rimozione, modifica).
L’esercizio sarà inoltre utilizzato per dimostrare l’utilizzo di direttive custom all’interno di progetti AngularJS.

Real Time Presenter tool (AngularJS e AngularFire)

Un tool per il controllo remoto di presentazioni desktop tramite dispositivi mobile.
E’ composto da due applicazioni:

  • remote controller: una web application mobile che funge da telecomando
  • viewer: per visualizzare le presentazioni in formato fullscreen con animazioni personalizzate.

Real Time ReMark Presentations (Javascript)
In questo esercizio, Firebase sarò integrato in Remark, un tool per la creazione di presentazioni e slide tramite sintassi markdown.
Sarà quindi creato un tool addizionale di presentazione per controlllare da remoto le slide, utilizzando esclusivamente Javascript (senza il supporto di AngularJS).

Sito Web dinamico e CMS (AngularJS e AngularFire)
Sarò creato un sito web in Bootstrap i cui contenuti saranno inseriti attraverso un semplice CMS sviluppato in AngularJS e Firebase e che permetterà di gestire le classiche operazioni CRUD di scrittura, modifica e cancellazione in tre modalità: sfruttando le API javascript di Firebase, utilizzando AngularFire e tramite API Rest.

TECNOLOGIE e LIBRERIE UTILIZZATE DURANTE IL CORSO:

Firebase, AngularJS, AngularFire, HTML5, CSS, Javascript, jQuery, Bootstrap, npm, Bower