Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Global Business App (PWA) keeping 5,700 people in sync with Javascript by Ralf Schwoebel (@orgaralf) 10:09
Housekeeping • Nice to meet you! I am Ralf: rs@orga.zone - founder, employer, investor, coder, member of BJDW • We will ta...
What to expect in 40 slides • We talk about a „customized project“, which spawned 2 children already. We will talk about t...
#biz – The requirements • Global outlets of car manufacturer (5700+ outlets) • 2 parts for users (aka engineers): • What i...
#biz – The idea CentOS7, PHP7, MariaDB10.2 Apache2.4, Sphinx, PHPOffice, LibreOffice (Word 2 PDF, unoconv) API AngularJS A...
#biz – The result • Detailed work descriptions • Work documentation • Localized • Word & PDF generation 10:09
#biz – The features Backoffice • Import XLS • Edit Outlets, Users, Details • Set Default Values (like available hardware) ...
#biz – The plan Team of 3 on our side: Admin / PHP / JS, +2 from Hemmersbach 1. Planning Document with HTML Dummy (20% of ...
#biz – The plan At the end: A Word Doc with 120+ pages, detailling the flow, server details and basic infos on the process...
#biz – tools and services • CentOS7 servers with Hetzner (2x), LAMP MariaDB 10.2 replication (Master<>Master), lsyncd (Mas...
#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 ...
PHP – and the backend 10:09
PHP – and the backend Internal approach: Finish the backend first! 10:09
PHP – and the backend
PHP – and the backend • PHPStorm: SVN to dev-Box (CentOS7) and auto-checkout • All files in SVN • Dummy data in local DB, ...
PHP – and the backend
PHP – tough decisions • What is needed on AngularJS side vs. the server? • Framework or not? We decided: not! • MVC is a g...
PHP – Backend & Users You have to filter & check all user input: if(strlen($arrOutletData["oNotes"])>2) $cell2->addText(cl...
PHP (& backend) – 3 take aways 1. Server configuration with all the tools and libs takes longer than you think! 2. Users w...
– and the frontendJS Let‘s talk App & AngularJS 10:09
– and the frontendJS Splitting into 2 states: off- and online: Online: • Download the outlet & default values • Sync the r...
– and the frontendJS
– and the frontendJS • After download of dataset: App has to work offline 10:09
– and the frontendJS After download of dataset, the App has to work offline... so: Service workers or Manifest (aka appcac...
– and the frontendJS 10:09
– and the frontendJS
– and the frontendJS • Manifest it is!
– and the frontendJS • 80+ files in Manifest: could combine, but due to (15-20) releases of bug fixes we did not – but you...
– and the frontendJS • 3rd Party Code and AngularJS 1.6 10:09
– and the frontendJS • Key for data storage: dexie.js 10:09
– AngularJS data bindingsJS • Image > Data > DB > Server 10:09
– and the frontendJS • Key for data storage: dexie.js 10:09
– Promises, promisesJS 10:09
– Promises, promisesJS if(confirm($translate.instant('MESSAGE.OVERWRITE'))) { modal = modalService.openModal('download', '...
– AngularJS, Photo and DB...JS • Trigger Service Example 10:09
– and the frontendJS • Key for server communication: orga.js 10:09
– and the frontendJS • Key for server communication: orga.js 10:09
– AngularJS data bindingsJS • Dynamic pages on dynamic data 10:09
– AngularJS : no problem, but...JS 10:09
– AngularJS : no problem, but...JS • In retrospetive: no (real) problems in coding it • Synchronization can be tricky with...
– 3 take awaysJS • A „Progressive Web App“ works currently (2017) best, if you use the manifest technique (which is deprec...
10:09
Summary We promote Javascript in: • Multi-Device environments (aka modern Browsers) • Uncertain states of connection • JSO...
Thank you! Thank you for your time and attention... Have a great conference! Next: • 18:15 - 19:00 EXPO RECEPTION • 19:00 ...
Upcoming SlideShare
Loading in …5
×

Progressive Web App: Inventory App

1,386 views

Published on

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.

Published in: Software
License: CC Attribution-ShareAlike License
no profile picture user

  • Be the first to comment

  • Be the first to like this

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

×