Gli argomenti trattati durante il Workshop gratuito sull'ideazione e creazione di Web Applications con AngularJS: - Metodologie innovative di ideazione e creazione di Web Applications; - Sfide e problemi del lavoro in team; - Introduzione ad AngularJS e alle sue componenti principali; - Dimostrazione pratica di una WebApp

1. Ideare e creare Web Applications
Introduzione ad AngularJS
prima giornata

2. Chi siamo?

3. Andrea Milloch

4. Giovanni Buffa

5. Cos’è una Web Application?
Il Web è una Repubblica basata sulle App.

6. Applicativo software, spesso mono-tasking, il quale viene distribuito da un
server remoto ed eseguito via Internet su un Browser.

7. 1. Accesso ai miei dati ovunque.
2. Utilizzo dell’ultima versione disponibile.
3. Funziona su qualsiasi dispositivo munito di browser.
4. Maggiore sicurezza locale.

9. Cos’è AngularJS?
Superheroic JavaScript MVW Framework

10. Come approcciarsi ad un
progetto software?
Metodologie progettuali

11. Lean UX

12. 1. Design Thinking
2. Agile Software Development
3. Lean Manufacturing

13. Design Thinking

14. Processo creativo human-centered, incentrato sui bisogni e sulle
soluzioni che vengono ideate per la persona.
È l’utente a decretare se un prodotto debba esistere o meno.

15. – Herbert Simon, economista e psicologo
“Non ci sono giudizi. Questo fa si che venga eliminata la paura di fallire
aumentando gli input e la partecipazione. Le idee spontanee sono le
benvenute, perché sono quelle che portano alle soluzioni più creative.”.

16. – Tim Brown, founder IDEO
“Il design thinking è il pilastro su cui basare la propria progettazione. È il
tentativo di compiere una rivoluzione ideativa, di non cercare più di fare
oggetti belli, utili e proficui, ma è qualcosa di molto più grande: è il
costruire attorno ad un oggetto un suo significato e una sua storia.
Dare un perché ad ogni oggetto creato”.

17. Chiunque è un designer, e il design thinking è un modo per applicare
le metodologie del design alla vita di tutti i giorni.

18. Agile Software Development

19. Stiamo scoprendo modi migliori di creare software, sviluppandolo e
aiutando gli altri a fare lo stesso.
Grazie a questa attività siamo arrivati a considerare importanti:

20. 1. Gli individui e le interazioni più che i processi e gli strumenti
2. Il software funzionante più che la documentazione esaustiva
3. La collaborazione col cliente più che la negoziazione dei contratti
4. Rispondere al cambiamento più che seguire un piano
Ovvero, fermo restando il valore delle voci a destra, consideriamo più
importanti le voci a sinistra.

21. Lean Manufacturing

22. Filosofia imprenditoriale che mira alla riduzione progressiva degli
sprechi, fino al loro completo annullamento.

23. 1. Seiri: separa ciò che ti serve da ciò che non è funzionale all'attività e quindi
crea disturbo e disordine, quindi spreco di tempo o di risorse - scartare.
2. Seiton: metti a posto tutto quello che è utile - "ogni cosa al suo posto e un
posto per ogni cosa" - sistema.
3. Seiso: tieni tale ordine costante e pulisci, un ambiente pulito ed ordinato è
un ambiente che "non nasconde" le inefficienze - pulisci.
4. Seiketsu: definisci delle metodologie ripetitive e canonizzate da utilizzare
per continuare queste attività di razionalizzazione delle risorse e degli spazi
lavorativi - standardizza.
5. Shitsuke: fai che questo modo di pensare ed agire sia pervasivo per tutte le
attività - diffondi.

24. IDEAS
PRODUCTDATA
BUILD
MEASURE
LEARN

25. Ed ora tocca a voi!

26. Definizione del problema
e dei suoi vincoli

27. Generazione individuale
di idee

28. Presentazioni e critiche

29. Ricomincia e perfeziona

30. Generazione collettiva
delle idee

31. Come continua il processo?
Creazione di un MVP ed esperimenti

32. Se vuoi massimizzare l’apprendimento:
1. Sii chiaro e conciso
2. Datti delle priorità
3. Rimani agile
4. Misura i cambiamenti

33. Se vuoi massimizzare il valore da trasmattere ai tuoi clienti:
1. Sii funzionale
2. Integrati con le statistiche attuali
3. Sii coerente con il resto dell’applicazione

34. Prototipi

35. Bassa fedeltà:
• Carta e penna
• Wireframe cliccabili
Media ed alta fedeltà:
• Software di prototipazione
• Coded prototypes

36. Feedback e Ricerche

37. • Collaborative discovery
• Continuos discovery
• Testing
• Meetup

38. Grazie a tutti!
Ci vediamo domani!

39. Ideare e creare Web Applications
Introduzione ad AngularJS
seconda giornata

40. Strumenti utili

42. Tutti gli esempi possono essere scaricati da:
https://github.com/gioppy/workshop-angularjs-2015

43. Cos’è AngularJS?
Superheroic JavaScript MVW Framework

44. – Wikipedia
“AngularJS è un framework per applicazioni web open-source gestito da
Google e da una comunità di singoli sviluppatori e aziende, per affrontare
molte delle sfide incontrate nello sviluppo di Single Page Applications.
È mirato a semplificare lo sviluppo e la sperimentazione di tali applicazioni,
fornendo un framework basato sul design pattern MVC, assieme a
componenti comunemente utilizzati nelle Rich Internet Applications”.

45. Design Patterns &
Pattern MVC

46. VIEW CONTROLLER
USER
MODEL
VEDE
U
SA
AGGIORNA MANIPOLA

47. Imperativo
VS
Dichiarativo

48. Directives
Funzioni che agiscono sugli elementi del DOM e ne aggiungono funzionalità.

49. Compile
Viene attraversato il DOM e vengono collezionate tutte le directives.
Il risultato è una funzione di collegamento.
Link
Le directives vengono combinate con uno scope e inserite nella UI.

50. Built-in Directives
ngApp ngBind ngBindHtml ngBindTemplate ngBlur ngChange
ngChecked ngClass ngClassEven ngClassOdd ngClick ngCloak
ngController ngCopy ngCsp ngCut ngDblclick ngDisabled ngFocus
ngForm ngHide ngHref ngIf ngInclude ngInit ngKeydown ngKeypress
ngKeyup ngList ngModel ngMousedown ngMouseenter ngMouseleave
ngMousemove ngMouseover ngMouseup ngNonBindable ngOpen
ngPaste ngPluralize ngReadonly ngRepeat ngSelected ngShow ngSrc
ngSrcset ngStyle ngSubmit ngSwitch ngTransclude ngValue

51. Expressions
Template binding dalle nostre directives.

52. Possono essere inserite ovunque, anche all’interno degli attributi HTML.
Le expressions possono essere formattate/filtrate grazie ai Filters.

53. Data Bindings
Aggiornare la View alle modifiche del Data Model.

54. One-Time data binding
<p>{{::name}}</p>
Model
View

55. Two-Time data binding
Model
View
<p>{{name}}</p>

56. Three-Time data binding
Model
View
Server

57. Modules
Collezione di oggetti che definiscono il set di funzionalità della nostra App.

58. Scopes
Il collante tra la logica e la UI.

59. Esiste uno scope globale - $rootScope - al cui interno
vengono creati degli scope per ogni componente - $scope.
Ogni scope può accedere sia al proprio genitore che ai propri figli.
Esiste un caso in cui lo scope può essere isolato - isolated scope.

60. function MyCtrl($scope){
$scope.action = function(){//do something};
$scope.name = 'Name';
}
{
name: 'Name',
action: function
}
<p>{{name}}</p>
<button ng-click="action">Do Something</button>

61. Dependency Injection
Come gli oggetti devono accedere alle dipendenze di cui hanno bisogno
per poter funzionare.

62. – The Pico Container
“È il modo in cui vengono date le dipendenze ai componenti attraverso
costruttori, metodi o direttamente all’interno dei campi”.

63. Non puoi usare questo
senza quello!

64. Controllers
Definiscono le funzionalità per un singolo aspetto della nostra App.

65. Services
Oggetti singleton che svolgono compiti comuni a più aree della nostra App.

66. https://www.firebase.com/

67. 1. Database in realtime
2. Autenticazione utente
3. Hosting

68. Demo

69. …e se tutto ciò non vi
bastasse…

70. http://ionicframework.com/

71. Grazie a tutti!
Ci sono domande?

72. © 2015 - Giovanni Buffa & Andrea Milloch