Top Banner
Cognitive defusion application Developing a single page applica.on for android and iOS
22

Cognitive defusion application - SCG: SCGscg.unibe.ch/download/softwarecomposition/2015-06-02-Zaugg... · Cognitive defusion application ... • Ionic/AngularJS* • Tes.ng*and*calabashBandroid*

Apr 07, 2018

Download

Documents

duongliem
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Cognitive defusion application - SCG: SCGscg.unibe.ch/download/softwarecomposition/2015-06-02-Zaugg... · Cognitive defusion application ... • Ionic/AngularJS* • Tes.ng*and*calabashBandroid*

Cognitive defusion application

Developing  a  single  page  applica.on  for  android  and  iOS  

Page 2: Cognitive defusion application - SCG: SCGscg.unibe.ch/download/softwarecomposition/2015-06-02-Zaugg... · Cognitive defusion application ... • Ionic/AngularJS* • Tes.ng*and*calabashBandroid*

Overview

• Cogni.ve  defusion  in  short  • Bird’s  eye  view  • Cordova  •  Ionic/AngularJS  •  Tes.ng  and  calabash-­‐android  •  Live  presenta.on  

Page 3: Cognitive defusion application - SCG: SCGscg.unibe.ch/download/softwarecomposition/2015-06-02-Zaugg... · Cognitive defusion application ... • Ionic/AngularJS* • Tes.ng*and*calabashBandroid*

Cognitive defusion

 In  very  short    Decouple  thoughts  from  reality  by  puEng  them  into  surreal  situa.ons.    «Imagine  your  mind  is  a  parrot  si4ng  on  your  shoulder  and  squaking  your  thought  in  your  ear  over  and  over  again»  

Page 4: Cognitive defusion application - SCG: SCGscg.unibe.ch/download/softwarecomposition/2015-06-02-Zaugg... · Cognitive defusion application ... • Ionic/AngularJS* • Tes.ng*and*calabashBandroid*

Bird’s eye view

Page 5: Cognitive defusion application - SCG: SCGscg.unibe.ch/download/softwarecomposition/2015-06-02-Zaugg... · Cognitive defusion application ... • Ionic/AngularJS* • Tes.ng*and*calabashBandroid*

-­‐    

Page 6: Cognitive defusion application - SCG: SCGscg.unibe.ch/download/softwarecomposition/2015-06-02-Zaugg... · Cognitive defusion application ... • Ionic/AngularJS* • Tes.ng*and*calabashBandroid*

-­‐    

§ Ionic  § AngularJS    

Page 7: Cognitive defusion application - SCG: SCGscg.unibe.ch/download/softwarecomposition/2015-06-02-Zaugg... · Cognitive defusion application ... • Ionic/AngularJS* • Tes.ng*and*calabashBandroid*

-­‐    

§ Ionic    

Filled  dynamically  

External  libraries  

Model/View/Controller  files  (my  code)  

Page 8: Cognitive defusion application - SCG: SCGscg.unibe.ch/download/softwarecomposition/2015-06-02-Zaugg... · Cognitive defusion application ... • Ionic/AngularJS* • Tes.ng*and*calabashBandroid*

-­‐    

§ Ionic/AngularJS    Look  and  Feel  of  the  app  

Page 9: Cognitive defusion application - SCG: SCGscg.unibe.ch/download/softwarecomposition/2015-06-02-Zaugg... · Cognitive defusion application ... • Ionic/AngularJS* • Tes.ng*and*calabashBandroid*

-­‐    

§ Ionic/AngularJS    Look  and  Feel  for  the  app  Model/View/Controller  

Page 10: Cognitive defusion application - SCG: SCGscg.unibe.ch/download/softwarecomposition/2015-06-02-Zaugg... · Cognitive defusion application ... • Ionic/AngularJS* • Tes.ng*and*calabashBandroid*

-­‐    

State  name  

Url  

Controller  Template  

Page 11: Cognitive defusion application - SCG: SCGscg.unibe.ch/download/softwarecomposition/2015-06-02-Zaugg... · Cognitive defusion application ... • Ionic/AngularJS* • Tes.ng*and*calabashBandroid*

Two ways of changing states

ui-­‐sref        programma.cally    

Page 12: Cognitive defusion application - SCG: SCGscg.unibe.ch/download/softwarecomposition/2015-06-02-Zaugg... · Cognitive defusion application ... • Ionic/AngularJS* • Tes.ng*and*calabashBandroid*

State machine of my application

Page 13: Cognitive defusion application - SCG: SCGscg.unibe.ch/download/softwarecomposition/2015-06-02-Zaugg... · Cognitive defusion application ... • Ionic/AngularJS* • Tes.ng*and*calabashBandroid*

PouchDB

Page 14: Cognitive defusion application - SCG: SCGscg.unibe.ch/download/softwarecomposition/2015-06-02-Zaugg... · Cognitive defusion application ... • Ionic/AngularJS* • Tes.ng*and*calabashBandroid*

Design choice for storage

• No  live  binding  between  model  and  permanent  storage  •  Model  is  loaded  completely  at  the  beginning  from  the  permanent  storage  •  Changes  in  the  model  must  always  be  stored  in  the  model  and    in  the  permanent  storage  separately  

•  Advantages:  fast-­‐access  to  the  model,  simple  manipula.on  in  tests  with  no  need  to  manipulate  permanent  storage,  promises  have  to  be  resolved  only  once  at  the  beginning  of  the  applica.on  (less  error  prone)  

•  Disadvantages:  each  change  has  to  be  stored  twice  (more  error  prone),  with  big  data  it  uses  large  por.ons  of  the  working  memory  

Page 15: Cognitive defusion application - SCG: SCGscg.unibe.ch/download/softwarecomposition/2015-06-02-Zaugg... · Cognitive defusion application ... • Ionic/AngularJS* • Tes.ng*and*calabashBandroid*

Automated Acceptance Testing Gherkin and step definitions in calabash

Slightly  altered  from  Wynne,  M.  &.  (2012).  The  Cucumber  Book.  Raleigh:  Pragma.c  Programmers,  llc.,  page  41  

Page 16: Cognitive defusion application - SCG: SCGscg.unibe.ch/download/softwarecomposition/2015-06-02-Zaugg... · Cognitive defusion application ... • Ionic/AngularJS* • Tes.ng*and*calabashBandroid*

Gherkin and Step Definitions in Calabash

Slightly  altered  from  Wynne,  M.  &.  (2012).  The  Cucumber  Book.  Raleigh:  Pragma.c  Programmers,  llc.,  page  41  

Page 17: Cognitive defusion application - SCG: SCGscg.unibe.ch/download/softwarecomposition/2015-06-02-Zaugg... · Cognitive defusion application ... • Ionic/AngularJS* • Tes.ng*and*calabashBandroid*

Gherkin

Slightly  altered  from  Wynne,  M.  &.  (2012).  The  Cucumber  Book.  Raleigh:  Pragma.c  Programmers,  llc.,  page  41  

Keywords:  feature,  scenario  outline,    scenario,  background,    given,  when,  then,  and.  but  

Page 18: Cognitive defusion application - SCG: SCGscg.unibe.ch/download/softwarecomposition/2015-06-02-Zaugg... · Cognitive defusion application ... • Ionic/AngularJS* • Tes.ng*and*calabashBandroid*

Gherkin

Slightly  altered  from  Wynne,  M.  &.  (2012).  The  Cucumber  Book.  Raleigh:  Pragma.c  Programmers,  llc.,  page  41  

Keywords:  feature,  scenario  outline,    scenario,  background,    given,  when,  then,  and.  but  

Page 19: Cognitive defusion application - SCG: SCGscg.unibe.ch/download/softwarecomposition/2015-06-02-Zaugg... · Cognitive defusion application ... • Ionic/AngularJS* • Tes.ng*and*calabashBandroid*

Step Definitions

Slightly  altered  from  Wynne,  M.  &.  (2012).  The  Cucumber  Book.  Raleigh:  Pragma.c  Programmers,  llc.,  page  41  

Gherkin  step,  may  consist  strong  ruby  pa^ern  matching,  e.g.  (.*?)  

Page 20: Cognitive defusion application - SCG: SCGscg.unibe.ch/download/softwarecomposition/2015-06-02-Zaugg... · Cognitive defusion application ... • Ionic/AngularJS* • Tes.ng*and*calabashBandroid*

Ruby Automation Code

Slightly  altered  from  Wynne,  M.  &.  (2012).  The  Cucumber  Book.  Raleigh:  Pragma.c  Programmers,  llc.,  page  41  

Ruby  automa.on  code  provided  by  calabash  

Ruby  automa.on  code  created  by  me  

Page 21: Cognitive defusion application - SCG: SCGscg.unibe.ch/download/softwarecomposition/2015-06-02-Zaugg... · Cognitive defusion application ... • Ionic/AngularJS* • Tes.ng*and*calabashBandroid*

Live App Demonstration

Page 22: Cognitive defusion application - SCG: SCGscg.unibe.ch/download/softwarecomposition/2015-06-02-Zaugg... · Cognitive defusion application ... • Ionic/AngularJS* • Tes.ng*and*calabashBandroid*

Conclusion

•  Each  framework  fulfilled  a  specific  requirement/solved  a  specific  problem  

•  Tests  (cucumber/calabash)  help  to  communicate  requirements  and  are  a  nice  way  of  documenta.on  

•  Successful  applica.on  which  worked  on  iOS  and  Android