Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Progressive Web App: Inventory App

1.423 visualizaciones

Publicado el

My presentation from the International Javascript Conference in Munich, October 2017. It shows how we have setup a development environment for a team of 5, created backoffice functionality and finally the frontend with AngularJS.

It is a working app, in use with over 5,700 local outlets and was reproduced for other customers now. It is a hands-on solution that solves decentralized data gathering with smartphones and tablets.

Publicado en: Software
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Progressive Web App: Inventory App

  1. 1. Global Business App (PWA) keeping 5,700 people in sync with Javascript by Ralf Schwoebel (@orgaralf) 10:09
  2. 2. Housekeeping • Nice to meet you! I am Ralf: rs@orga.zone - founder, employer, investor, coder, member of BJDW • We will talk about a live, working project with 5.700+ users in 24+ languages • I need new photos for the website: Please email or tweet to @orgaralf, if you take a nice pic! 10:09
  3. 3. What to expect in 40 slides • We talk about a „customized project“, which spawned 2 children already. We will talk about the mothership and some things are under NDA • App = Frontend + Backend + Processes • #biz, #php, #js JS PHP biz 10:09
  4. 4. #biz – The requirements • Global outlets of car manufacturer (5700+ outlets) • 2 parts for users (aka engineers): • What is there, what needs to be installed (Survey)? • What was installed, where (Report)? • Administration for customer & partner • Handle infos, create site handbook (Word) • Add and remove users, hardware • Budget: limited! 10:09
  5. 5. #biz – The idea CentOS7, PHP7, MariaDB10.2 Apache2.4, Sphinx, PHPOffice, LibreOffice (Word 2 PDF, unoconv) API AngularJS App PHP Backoffice 10:09
  6. 6. #biz – The result • Detailed work descriptions • Work documentation • Localized • Word & PDF generation 10:09
  7. 7. #biz – The features Backoffice • Import XLS • Edit Outlets, Users, Details • Set Default Values (like available hardware) • Create Word Doc • Export Statistics • LIVE App • Work offline • Add X images, free text • 24+ languages • Sync on-demand • never loose data • Any (newer) device, any (modern) browser 10:09
  8. 8. #biz – The plan Team of 3 on our side: Admin / PHP / JS, +2 from Hemmersbach 1. Planning Document with HTML Dummy (20% of total) 2. Server setup with LAMP + tools + replication 3. Backoffice Development (up to alpha release) 4. HTML Dummy > convert to AngularJS pages 5. Test run & Bugfixes (iterate 5-15x) 6. Release 10:09
  9. 9. #biz – The plan At the end: A Word Doc with 120+ pages, detailling the flow, server details and basic infos on the process & 30+ (static) HTML Pages 10:09
  10. 10. #biz – tools and services • CentOS7 servers with Hetzner (2x), LAMP MariaDB 10.2 replication (Master<>Master), lsyncd (Master>Slave) • Cloudflare Web-Termination • Development Server on CentOS7, LAMP + SVN Subversion for a team of 3, same install like above • 2 x Macbooks, 1 Windows Laptop 4 Android Tablets, 2 iPads, 3 iPhones, 2 Android Phones PHPStorm as IDE, browserstack.com to test. 10:09
  11. 11. #biz – 3 take aways 1. Solid Plan: it will take real effort to create it and it will cover less than 70% of what you will do. 2. Development Setup & Servers must be clean. 3. Subversion or git: a necessity! 10:09
  12. 12. PHP – and the backend 10:09
  13. 13. PHP – and the backend Internal approach: Finish the backend first! 10:09
  14. 14. PHP – and the backend
  15. 15. PHP – and the backend • PHPStorm: SVN to dev-Box (CentOS7) and auto-checkout • All files in SVN • Dummy data in local DB, manually entered (JSON), MariaDB 10.2 ("select ... where JSON_VALUE(OZAPPDATA,'$.LOCATION')=" . ($loc) ) • API set of basic functions (insert, update, delete, search, see docs.orga.zone) • rsync script for dev > staging releases 10:09
  16. 16. PHP – and the backend
  17. 17. PHP – tough decisions • What is needed on AngularJS side vs. the server? • Framework or not? We decided: not! • MVC is a good idea!
  18. 18. PHP – Backend & Users You have to filter & check all user input: if(strlen($arrOutletData["oNotes"])>2) $cell2->addText(cleanWordText($arrOutletData["oNotes"])); eg: PHPOffice is not happy with unescaped: & < > but is totally cool with 神戸中央 10:09
  19. 19. PHP (& backend) – 3 take aways 1. Server configuration with all the tools and libs takes longer than you think! 2. Users will input every possible character in the UTF8 range 3. A clean structure (group functions/methods by topic) saves the day 10:09
  20. 20. – and the frontendJS Let‘s talk App & AngularJS 10:09
  21. 21. – and the frontendJS Splitting into 2 states: off- and online: Online: • Download the outlet & default values • Sync the results up Offline: • Go through questions, add images, edit data (50+ MB) • Catch faulty syncs and input 10:09
  22. 22. – and the frontendJS
  23. 23. – and the frontendJS • After download of dataset: App has to work offline 10:09
  24. 24. – and the frontendJS After download of dataset, the App has to work offline... so: Service workers or Manifest (aka appcache) 10:09
  25. 25. – and the frontendJS 10:09
  26. 26. – and the frontendJS
  27. 27. – and the frontendJS • Manifest it is!
  28. 28. – and the frontendJS • 80+ files in Manifest: could combine, but due to (15-20) releases of bug fixes we did not – but you should! 10:09
  29. 29. – and the frontendJS • 3rd Party Code and AngularJS 1.6 10:09
  30. 30. – and the frontendJS • Key for data storage: dexie.js 10:09
  31. 31. – AngularJS data bindingsJS • Image > Data > DB > Server 10:09
  32. 32. – and the frontendJS • Key for data storage: dexie.js 10:09
  33. 33. – Promises, promisesJS 10:09
  34. 34. – Promises, promisesJS if(confirm($translate.instant('MESSAGE.OVERWRITE'))) { modal = modalService.openModal('download', 'lg'); return modal.opened.then(function(){ return $q.when(dexieService.resetOutlet(outlet)); }); } 10:09
  35. 35. – AngularJS, Photo and DB...JS • Trigger Service Example 10:09
  36. 36. – and the frontendJS • Key for server communication: orga.js 10:09
  37. 37. – and the frontendJS • Key for server communication: orga.js 10:09
  38. 38. – AngularJS data bindingsJS • Dynamic pages on dynamic data 10:09
  39. 39. – AngularJS : no problem, but...JS 10:09
  40. 40. – AngularJS : no problem, but...JS • In retrospetive: no (real) problems in coding it • Synchronization can be tricky with 30 images (= 80+ MB data) and thin uplink speeds • Browser settings („BYOD“): privacy mode, storage limits 10:09
  41. 41. – 3 take awaysJS • A „Progressive Web App“ works currently (2017) best, if you use the manifest technique (which is deprecated and a real hassle) • Promises and data bindings will demand the best of you! • Frontend Tools: there are plenty for enterprise-ready deployment you can (re-)use 10:09
  42. 42. 10:09
  43. 43. Summary We promote Javascript in: • Multi-Device environments (aka modern Browsers) • Uncertain states of connection • JSON exchanges with the backend (we used PHP, but you should use what you know best) • Budget tight projects because of the free tools around 10:09
  44. 44. Thank you! Thank you for your time and attention... Have a great conference! Next: • 18:15 - 19:00 EXPO RECEPTION • 19:00 – Casino Night and Talks Ralf Schwoebel, CEO orga.zone AG rs@orga.zone https://orga.zone/ 10:09

×