SlideShare a Scribd company logo

Rapid prototyping with Ionic Framework

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

1 of 28
Download to read offline
{{ Alessio Delmonti }} 
Passions: Development, blues, creepy images 
Mail: alessio.d@gmail.com 
Role: wiralist CTO 
@alexintosh 
2014
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
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à)
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
Principi base 
Brainstorming 
I dettagli non sono 
importanti, state 
cercando di stabilire il 
flow 
Testare il 
prototipo 
coding 
feedback 
DATI 
esperienza
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/
Ad

Recommended

AgileIoT, agile meets IoT - MEC 2016
AgileIoT, agile meets IoT - MEC 2016AgileIoT, agile meets IoT - MEC 2016
AgileIoT, agile meets IoT - MEC 2016Felice Pescatore
 
Project manager e sviluppo agile: separati in casa?
Project manager e sviluppo agile: separati in casa?Project manager e sviluppo agile: separati in casa?
Project manager e sviluppo agile: separati in casa?Jacopo Romei
 
Workshop AngularJs, Cordova, Ionic - Politecnico di Milano
Workshop AngularJs, Cordova, Ionic - Politecnico di MilanoWorkshop AngularJs, Cordova, Ionic - Politecnico di Milano
Workshop AngularJs, Cordova, Ionic - Politecnico di MilanoGabriele Gaggi
 
Rapid mobile development with Ionic framework - Voxxdays Ticino 2015
Rapid mobile development with Ionic framework - Voxxdays Ticino 2015Rapid mobile development with Ionic framework - Voxxdays Ticino 2015
Rapid mobile development with Ionic framework - Voxxdays Ticino 2015Alessio Delmonti
 
DDAY2014 - Costruire una app mobile con Ionic, AngularJS ed ovviamente Drupal
DDAY2014 - Costruire una app mobile con Ionic, AngularJS ed ovviamente DrupalDDAY2014 - Costruire una app mobile con Ionic, AngularJS ed ovviamente Drupal
DDAY2014 - Costruire una app mobile con Ionic, AngularJS ed ovviamente DrupalDrupalDay
 

More Related Content

Similar to Rapid prototyping with Ionic Framework

Guarda, senza mani! Automatizzare build e rilasci con Powershell senza farsi ...
Guarda, senza mani! Automatizzare build e rilasci con Powershell senza farsi ...Guarda, senza mani! Automatizzare build e rilasci con Powershell senza farsi ...
Guarda, senza mani! Automatizzare build e rilasci con Powershell senza farsi ...Marco Amendola
 
AgileIoT, da Arduino al Delivery
AgileIoT, da Arduino al DeliveryAgileIoT, da Arduino al Delivery
AgileIoT, da Arduino al DeliveryFelice Pescatore
 
Slide Mulesoft Meetup Milano #10.pdf
Slide Mulesoft Meetup Milano #10.pdfSlide Mulesoft Meetup Milano #10.pdf
Slide Mulesoft Meetup Milano #10.pdfFlorence Consulting
 
TYPESCRIPT, ANGULAR E BOOTSTRAP ASSIEME PER APPLICAZIONI REAL WORLD
TYPESCRIPT, ANGULAR E BOOTSTRAP ASSIEME PER APPLICAZIONI REAL WORLDTYPESCRIPT, ANGULAR E BOOTSTRAP ASSIEME PER APPLICAZIONI REAL WORLD
TYPESCRIPT, ANGULAR E BOOTSTRAP ASSIEME PER APPLICAZIONI REAL WORLDDotNetCampus
 
Slide typescript - net campus
Slide typescript - net campusSlide typescript - net campus
Slide typescript - net campusDotNetCampus
 
Fe05 test drivenjavascriptdevelopment
Fe05   test drivenjavascriptdevelopmentFe05   test drivenjavascriptdevelopment
Fe05 test drivenjavascriptdevelopmentDotNetCampus
 
Accelerazione agile e lean dello sviluppo prodotto
Accelerazione agile e lean dello sviluppo prodottoAccelerazione agile e lean dello sviluppo prodotto
Accelerazione agile e lean dello sviluppo prodottoClaudio Saurin
 
Principi di ingegneria del software
Principi di ingegneria del softwarePrincipi di ingegneria del software
Principi di ingegneria del softwareMarco Liverani
 
Introduzione - Web design
Introduzione - Web designIntroduzione - Web design
Introduzione - Web designgowow
 
Openatrium come backend caprowsky
Openatrium come backend   caprowskyOpenatrium come backend   caprowsky
Openatrium come backend caprowskyAlessandro Capra
 
Introduzione ai Coded UI Tests
Introduzione ai Coded UI TestsIntroduzione ai Coded UI Tests
Introduzione ai Coded UI TestsPietro Libro
 
Be01 web devclientvsserver
Be01   web devclientvsserverBe01   web devclientvsserver
Be01 web devclientvsserverDotNetCampus
 
Front-end First: sopravvivere con il testing in JavaScript
Front-end First: sopravvivere con il testing in JavaScriptFront-end First: sopravvivere con il testing in JavaScript
Front-end First: sopravvivere con il testing in JavaScriptCodemotion
 
Prototipazione Low-Code con AWS Step Functions
Prototipazione Low-Code con AWS Step FunctionsPrototipazione Low-Code con AWS Step Functions
Prototipazione Low-Code con AWS Step FunctionsCommit University
 
Enabling DevOps for Machine Learning with Azure Pipelines
Enabling DevOps for Machine Learning with Azure PipelinesEnabling DevOps for Machine Learning with Azure Pipelines
Enabling DevOps for Machine Learning with Azure PipelinesLuca Milan
 

Similar to Rapid prototyping with Ionic Framework (20)

Microsoft Fast - Overview
Microsoft Fast - OverviewMicrosoft Fast - Overview
Microsoft Fast - Overview
 
Guarda, senza mani! Automatizzare build e rilasci con Powershell senza farsi ...
Guarda, senza mani! Automatizzare build e rilasci con Powershell senza farsi ...Guarda, senza mani! Automatizzare build e rilasci con Powershell senza farsi ...
Guarda, senza mani! Automatizzare build e rilasci con Powershell senza farsi ...
 
App Engine + Python
App Engine + PythonApp Engine + Python
App Engine + Python
 
AgileIoT, da Arduino al Delivery
AgileIoT, da Arduino al DeliveryAgileIoT, da Arduino al Delivery
AgileIoT, da Arduino al Delivery
 
Slide Mulesoft Meetup Milano #10.pdf
Slide Mulesoft Meetup Milano #10.pdfSlide Mulesoft Meetup Milano #10.pdf
Slide Mulesoft Meetup Milano #10.pdf
 
TYPESCRIPT, ANGULAR E BOOTSTRAP ASSIEME PER APPLICAZIONI REAL WORLD
TYPESCRIPT, ANGULAR E BOOTSTRAP ASSIEME PER APPLICAZIONI REAL WORLDTYPESCRIPT, ANGULAR E BOOTSTRAP ASSIEME PER APPLICAZIONI REAL WORLD
TYPESCRIPT, ANGULAR E BOOTSTRAP ASSIEME PER APPLICAZIONI REAL WORLD
 
Slide typescript - net campus
Slide typescript - net campusSlide typescript - net campus
Slide typescript - net campus
 
Fe05 test drivenjavascriptdevelopment
Fe05   test drivenjavascriptdevelopmentFe05   test drivenjavascriptdevelopment
Fe05 test drivenjavascriptdevelopment
 
Accelerazione agile e lean dello sviluppo prodotto
Accelerazione agile e lean dello sviluppo prodottoAccelerazione agile e lean dello sviluppo prodotto
Accelerazione agile e lean dello sviluppo prodotto
 
Prototyping con typo3
Prototyping con typo3Prototyping con typo3
Prototyping con typo3
 
Linux Day 2017 - Italia
Linux Day 2017 - ItaliaLinux Day 2017 - Italia
Linux Day 2017 - Italia
 
Principi di ingegneria del software
Principi di ingegneria del softwarePrincipi di ingegneria del software
Principi di ingegneria del software
 
Introduzione - Web design
Introduzione - Web designIntroduzione - Web design
Introduzione - Web design
 
Openatrium come backend caprowsky
Openatrium come backend   caprowskyOpenatrium come backend   caprowsky
Openatrium come backend caprowsky
 
Introduzione ai Coded UI Tests
Introduzione ai Coded UI TestsIntroduzione ai Coded UI Tests
Introduzione ai Coded UI Tests
 
Be01 web devclientvsserver
Be01   web devclientvsserverBe01   web devclientvsserver
Be01 web devclientvsserver
 
Front-end First: sopravvivere con il testing in JavaScript
Front-end First: sopravvivere con il testing in JavaScriptFront-end First: sopravvivere con il testing in JavaScript
Front-end First: sopravvivere con il testing in JavaScript
 
Pro php refactoring
Pro php refactoringPro php refactoring
Pro php refactoring
 
Prototipazione Low-Code con AWS Step Functions
Prototipazione Low-Code con AWS Step FunctionsPrototipazione Low-Code con AWS Step Functions
Prototipazione Low-Code con AWS Step Functions
 
Enabling DevOps for Machine Learning with Azure Pipelines
Enabling DevOps for Machine Learning with Azure PipelinesEnabling DevOps for Machine Learning with Azure Pipelines
Enabling DevOps for Machine Learning with Azure Pipelines
 

Rapid 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
  • 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
  • 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/