Workshop Ideare e creare Web Applications, Introduzione ad AngularJS
3 likes628 views
Il documento introduce AngularJS come un framework per lo sviluppo di web applications, enfatizzando l'importanza delle metodologie progettuali come il design thinking e l'agile software development. Vengono esplorati i principi fondamentali di AngularJS, comprese le direttive, il data binding, e la dependency injection, per facilitare lo sviluppo di applicazioni interattive. La filosofia lean manufacturing viene presentata come un approccio per ottimizzare le risorse e ridurre gli sprechi nel processo di sviluppo software.
Workshop Ideare e creare Web Applications, Introduzione ad AngularJS
- 1. Ideare e creare Web Applications Introduzione ad AngularJS prima giornata
- 2. Chi siamo?
- 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.
- 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.
- 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.
- 25. Ed ora tocca a voi!
- 26. Definizione del problema e dei suoi vincoli
- 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
- 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
- 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.
- 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.
- 67. 1. Database in realtime 2. Autenticazione utente 3. Hosting
- 68. Demo
- 69. …e se tutto ciò non vi bastasse…
- 71. Grazie a tutti! Ci sono domande?
- 72. © 2015 - Giovanni Buffa & Andrea Milloch