Rapid prototyping with Ionic Framework
-
Upload
alessio-delmonti -
Category
Software
-
view
1.219 -
download
1
description
Transcript of Rapid prototyping with Ionic Framework
![Page 1: Rapid prototyping with Ionic Framework](https://reader036.fdocuments.net/reader036/viewer/2022081603/559957411a28ab89408b4838/html5/thumbnails/1.jpg)
{{ Alessio Delmonti }}Passions: Development, blues, creepy images
Mail: [email protected]: wiralist CTO
@alexintosh2014
![Page 2: Rapid prototyping with Ionic Framework](https://reader036.fdocuments.net/reader036/viewer/2022081603/559957411a28ab89408b4838/html5/thumbnails/2.jpg)
Summary● Cos'è un prototipo ?● Perché protipizzare ?● Come si prototipizza ? Principi di base● Come realizzare un buon prototipo in 72h - Team● Come realizzare un buon prototipo in 72h - Developers
● Cos'è Ionic framework● Perché ionic ?● I componenti● Come installarlo● Protokit● Dipendenze di protokit● Features
Parte tecnica
![Page 3: Rapid prototyping with Ionic Framework](https://reader036.fdocuments.net/reader036/viewer/2022081603/559957411a28ab89408b4838/html5/thumbnails/3.jpg)
Cos’è un prototipo
Il prototipo è la prima fase del processo produttivo.
Un modello approssimato o parziale del sistema che vogliamo sviluppare che simula o esegue alcune funzioni del sistema finale, realizzato allo scopo di
valutarne le caratteristiche (in particolare, la usabilità)
![Page 4: Rapid prototyping with Ionic Framework](https://reader036.fdocuments.net/reader036/viewer/2022081603/559957411a28ab89408b4838/html5/thumbnails/4.jpg)
Perché prototipizzare● Per tenere il design centrato sull’utente
● Per sperimentare design alternativi
Prototyping is the way to find what doesn’t work early and cheap, and spend your time and money on
solutions that do work
![Page 5: Rapid prototyping with Ionic Framework](https://reader036.fdocuments.net/reader036/viewer/2022081603/559957411a28ab89408b4838/html5/thumbnails/5.jpg)
Principi base
Brainstorming
I dettagli non sono importanti, state
cercando di stabilire il flow
Testare il prototipo
coding
feedb
ack
DATIesperienza
![Page 6: Rapid prototyping with Ionic Framework](https://reader036.fdocuments.net/reader036/viewer/2022081603/559957411a28ab89408b4838/html5/thumbnails/6.jpg)
L’importanza dei test
Testing with 5 users finds 80% of the usability problems
“Jakob Nielsen”http://www.nngroup.com/articles/why-you-only-need-to-test-with-5-users/
![Page 7: Rapid prototyping with Ionic Framework](https://reader036.fdocuments.net/reader036/viewer/2022081603/559957411a28ab89408b4838/html5/thumbnails/7.jpg)
Prototipo in 72h - Team
● Non perdere tempo● Impostare le attività secondo la logica "pull"
e non "push" (realizzare un'attività solo quando il processo a valle lo richieda).● Testare il prototipo direttamente online● Dare potere al team
![Page 8: Rapid prototyping with Ionic Framework](https://reader036.fdocuments.net/reader036/viewer/2022081603/559957411a28ab89408b4838/html5/thumbnails/8.jpg)
Prototipo in 72h - Developers
● Prima cerca SEMPRE su Google● Stack Overflow è tuo amico● Data model document based.● Go open source● Usa Git e committa sempre
![Page 9: Rapid prototyping with Ionic Framework](https://reader036.fdocuments.net/reader036/viewer/2022081603/559957411a28ab89408b4838/html5/thumbnails/9.jpg)
Parte tecnica
![Page 10: Rapid prototyping with Ionic Framework](https://reader036.fdocuments.net/reader036/viewer/2022081603/559957411a28ab89408b4838/html5/thumbnails/10.jpg)
![Page 11: Rapid prototyping with Ionic Framework](https://reader036.fdocuments.net/reader036/viewer/2022081603/559957411a28ab89408b4838/html5/thumbnails/11.jpg)
Perché ionic
● Tecnologia web● Cross-platform● Librerie AngularJs ● Sviluppo più veloce● Faster go-to market strategy● Perfetto tool per arrivare al MVP (Minimum viable product)● Vi permette di testare online
![Page 12: Rapid prototyping with Ionic Framework](https://reader036.fdocuments.net/reader036/viewer/2022081603/559957411a28ab89408b4838/html5/thumbnails/12.jpg)
![Page 13: Rapid prototyping with Ionic Framework](https://reader036.fdocuments.net/reader036/viewer/2022081603/559957411a28ab89408b4838/html5/thumbnails/13.jpg)
![Page 14: Rapid prototyping with Ionic Framework](https://reader036.fdocuments.net/reader036/viewer/2022081603/559957411a28ab89408b4838/html5/thumbnails/14.jpg)
I componentihttp://ionicframework.com/docs/
![Page 15: Rapid prototyping with Ionic Framework](https://reader036.fdocuments.net/reader036/viewer/2022081603/559957411a28ab89408b4838/html5/thumbnails/15.jpg)
![Page 16: Rapid prototyping with Ionic Framework](https://reader036.fdocuments.net/reader036/viewer/2022081603/559957411a28ab89408b4838/html5/thumbnails/16.jpg)
![Page 17: Rapid prototyping with Ionic Framework](https://reader036.fdocuments.net/reader036/viewer/2022081603/559957411a28ab89408b4838/html5/thumbnails/17.jpg)
![Page 18: Rapid prototyping with Ionic Framework](https://reader036.fdocuments.net/reader036/viewer/2022081603/559957411a28ab89408b4838/html5/thumbnails/18.jpg)
![Page 19: Rapid prototyping with Ionic Framework](https://reader036.fdocuments.net/reader036/viewer/2022081603/559957411a28ab89408b4838/html5/thumbnails/19.jpg)
![Page 20: Rapid prototyping with Ionic Framework](https://reader036.fdocuments.net/reader036/viewer/2022081603/559957411a28ab89408b4838/html5/thumbnails/20.jpg)
![Page 21: Rapid prototyping with Ionic Framework](https://reader036.fdocuments.net/reader036/viewer/2022081603/559957411a28ab89408b4838/html5/thumbnails/21.jpg)
![Page 22: Rapid prototyping with Ionic Framework](https://reader036.fdocuments.net/reader036/viewer/2022081603/559957411a28ab89408b4838/html5/thumbnails/22.jpg)
![Page 23: Rapid prototyping with Ionic Framework](https://reader036.fdocuments.net/reader036/viewer/2022081603/559957411a28ab89408b4838/html5/thumbnails/23.jpg)
![Page 24: Rapid prototyping with Ionic Framework](https://reader036.fdocuments.net/reader036/viewer/2022081603/559957411a28ab89408b4838/html5/thumbnails/24.jpg)
Protokithttps://github.com/Alexintosh/Protokit/
A prototype kit for Ionic Framework
![Page 25: Rapid prototyping with Ionic Framework](https://reader036.fdocuments.net/reader036/viewer/2022081603/559957411a28ab89408b4838/html5/thumbnails/25.jpg)
Struttura dei file|-- www |-- css |-- img |-- js |-- lib |-- templates |-- index.html
|-- hooks|-- platforms|-- plugins|-- scss|-- config.xml
![Page 26: Rapid prototyping with Ionic Framework](https://reader036.fdocuments.net/reader036/viewer/2022081603/559957411a28ab89408b4838/html5/thumbnails/26.jpg)
Features
● Splashscreen● Sidemenu● Social login (auth0)● List view / Split view + Detail View● Api calls● Maps
![Page 27: Rapid prototyping with Ionic Framework](https://reader036.fdocuments.net/reader036/viewer/2022081603/559957411a28ab89408b4838/html5/thumbnails/27.jpg)
Risorse
Doc: http://ionicframework.com/docs/Video tutorial: http://learn.ionicframework.com/Snipplet: http://codepen.io/mhartington/tag/ionic/Forum: http://forum.ionicframework.com/Italian community:https://www.facebook.com/groups/380772785422827/
![Page 28: Rapid prototyping with Ionic Framework](https://reader036.fdocuments.net/reader036/viewer/2022081603/559957411a28ab89408b4838/html5/thumbnails/28.jpg)
Grazie dell’attenzione!
Credits:http://thenounproject.com/term/teacher/14888/
http://thenounproject.com/term/brainstorming/76607/
http://thenounproject.com/term/beaker/9665/
http://thenounproject.com/term/code/75686/
http://thenounproject.com/term/team/8185/
http://thenounproject.com/term/console/8571/
http://thenounproject.com/term/folder/25369/
http://thenounproject.com/term/list/59948/
@alexintosh