Slides of the bootcamp made for Start up weekend Palermo, about prototyping with Ionic framework

1. {{ Alessio Delmonti }}
Passions: Development, blues, creepy images
Mail: alessio.d@gmail.com
Role: wiralist CTO
@alexintosh
2014

2. 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
Parte tecnica
● Cos'è Ionic framework
● Perché ionic ?
● I componenti
● Come installarlo
● Protokit
● Dipendenze di protokit
● Features

3. 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à)

4. 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

5. Principi base
Brainstorming
I dettagli non sono
importanti, state
cercando di stabilire il
flow
Testare il
prototipo
coding
feedback
DATI
esperienza

6. 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/

7. 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

8. 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

9. Parte tecnica

11. 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

14. I componenti
http://ionicframework.com/docs/

24. Protokit https://github.com/Alexintosh/Protokit/
A prototype kit for
Ionic Framework

25. Struttura dei file
|-- www
|-- css
|-- img
|-- js
|-- lib
|-- templates
|-- index.html
|-- hooks
|-- platforms
|-- plugins
|-- scss
|-- config.xml

26. Features
● Splashscreen
● Sidemenu
● Social login (auth0)
● List view / Split view + Detail View
● Api calls
● Maps

27. 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/

28. Grazie dell’attenzione!
@alexintosh
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/