Tweet
Tweet

Slide 1

Slide 1 text

Accessopolis Image by SOZIALHELDEN A social experiment for developers

Slide 2

Slide 2 text

About

Slide 3

Slide 3 text

about me Federico Yankelevich Software Engineer since 2000 Software Architect at Post CH SA Co-Organizer of Voxxed Days CH Co-Founder ated4kids Father of 3 Dreamer about the future

Slide 4

Slide 4 text

per l’inclusione sociale dei disabili senza se e senza ma, basta che... Salute Copertura costi terapie non riconosciute Cultura e Formazione Borse di studio Casa Editrice Turismo Accessibile Gite con disabili Accessopolis Sport GC inSuperabile AS Jogaleros about customer

Slide 5

Slide 5 text

Try it NOW on your phone: http://accessopolis.ch Censimento POI Catalogo multimediale POI Per categorie e sottocagorie Voto accessibilità Doppio voto accessibilità POI (pubblico ed esperti) Excellence ribbon Labeling dei POI più accessibili Segnalazioni Commenti/segnalazioni utenti accessibilità POI about the project

Slide 6

Slide 6 text

Preface

Slide 7

Slide 7 text

1 year old idea Promise to a friend New technologies Community driven my starting point

Slide 8

Slide 8 text

1. share & learn 2. create a community goals of this presentation

Slide 9

Slide 9 text

Speedy Sprint

Slide 10

Slide 10 text

48h hackaton 2 friends + Giulia 1 goal: production ready HackTheCity

Slide 11

Slide 11 text

Start from scratch Learn new technologies UX (responsive, accessible) Aim for reuse Dev Rules

Slide 12

Slide 12 text

Since Day 1

Slide 13

Slide 13 text

Architecture

Slide 14

Slide 14 text

Image credits: techtach.com, blog.hartleybrody.com Serverless

Slide 15

Slide 15 text

Smart Clients Firebase Sync

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

Implementation

Slide 18

Slide 18 text

Angular Celestino Firebase Federico Mobile Giulia User Experience Aldo

Slide 19

Slide 19 text

What is Angular? ● (Opin.) Single Page Apps ● 2 way binding & Templates ● Dep. Inj. & Testable ● Directives (Components) ● A lot of good resources ● Incremental Revolution

Slide 20

Slide 20 text

What is Firebase? ● Realtime DB in the cloud ● Serverless ● Oauth2 & First Class Data Security ● Offline support ● Great scalability ● Low operational costs

Slide 21

Slide 21 text

Database RAM
  • Slide from keynote presentation of ng-conf 2014

Slide 22

Slide 22 text

How to do User Experience? ● Lean UX ● Sketch / Wireframe / Personas ● Responsive Design with Bootstrap ● Accessibility with ng-aria ● First iteration, requires a couple more ?

Slide 23

Slide 23 text

And the Mobile App? ● A lot of problems to setup the environment ● Old laptop and hot weather …. BANG! ● Environment was not yet working on sat. morning ● We tried to switch to Ionic but we needed to prepare the environment ● On Saturday night app was working with Firebase ● But we could not re-use angular code because for v1. 4 and Ionic used 1.2

Slide 24

Slide 24 text

End of the hackaton What we achieved: ● All basic functionalities implemented ● Deployed in PROD ● Mobile app postponed ● Quickly prepared for 1 min presentation We did NOT won 8’000 CHF :-( But we were happy anyhow for the goals reached!

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

Customer said “Not yet MVP!”

Slide 27

Slide 27 text

Customer test results ● Not working on all phones ● Cannot upload videos ● Missing Admin console (minimal) ● Needs some graphic improvements

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

Hack Day by Celestino ● Tasks planned by Customer in GitHub ● Sylvain joins the project ● Videos can now be uploaded ● Many small improvements and bug fixed

Slide 30

Slide 30 text

Customer said “Not yet MVP!”

Slide 31

Slide 31 text

We found it complex to enhance!

Slide 32

Slide 32 text

We need to refactor! ● Many hands touching the code ● Working in a hurry with different styles ● Fragile, not well tested ● Layers not clearly separated ● Mixed business logic

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

AngularJS 1.5 is out ● Sylvain is interested to test it ● It enables new syntax for creating components ● Let’s clean up, starting from scratch ● Port existing features in the new code ● Introduce testing … really? ● Done!, before it was too late!

Slide 35

Slide 35 text

Code time

Slide 36

Slide 36 text

Security Check you cannot overwrite comments of somebody else Push-To-Clients Write a comment while somebody else is on the same page Responsiveness Resize screen Frontenders: You know it!

Slide 37

Slide 37 text

Status & Lessons Learnt

Slide 38

Slide 38 text

Real world usage ● still in private mode (not MVP) ● doesn't work on every device ● needs to be easy for experts in accessibility business (architects, fondazione) ● we don't have ready-to-import dataset

Slide 39

Slide 39 text

Lessons learnt (the bad) ● analysis is important (user stories) ● 48h for a prototype can be too short ● a prototype needs cleanup ● business commitment and deadlines would help ● project lead should spend more time on the project ● we were not ready for the mobile part

Slide 40

Slide 40 text

Lessons learnt (the good) ● working together we all learnt a lot ● short time investment is a good approach to start a new project (maybe sleeping a little bit more) ● Firebase is amazing ● Angular made it easy to split the work between gui/ux and business logic

Slide 41

Slide 41 text

Future

Slide 42

Slide 42 text

1° gruppo esperti Costituzione gruppo esperti 4-5 disabili Censimento capillare POI LVGA Edifici pubblici in primis Campagna informativa Associazioni disabili e altri stakeholders Attivazione socials FB, Twitter, G+ about the project

Slide 43

Slide 43 text

Next steps (technical) ● Maintained by multiple people ● Community driven ● A strong leader (with weekly reserved time) ● Playground for junior developers ● Reference Application for other similar use cases ● Business Driven Development (when paid) ● Open Data Initiative (?)

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

Everybody can contribute ● Take the chance to learn and try new technologies ● Contribute to an open-source project ● Help people that need some help

Slide 46

Slide 46 text

Would you come to an Accessopolis Hackergarten?

Slide 47

Slide 47 text

Q&A