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.
Right Money Management App For Your Financial Goals
ย
Progressive Web App: Inventory App
1. Global Business App (PWA)
keeping 5,700 people in sync with Javascript
by Ralf Schwoebel (@orgaralf)
10:09
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. 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. #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. #biz โ The idea
CentOS7, PHP7, MariaDB10.2
Apache2.4, Sphinx, PHPOffice,
LibreOffice (Word 2 PDF, unoconv)
API
AngularJS App PHP Backoffice
10:09
6. #biz โ The result
โข Detailed work descriptions
โข Work documentation
โข Localized
โข Word & PDF generation
10:09
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. #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. #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. #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. #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
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
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. 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. 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. โ and the frontendJS
Letโs talk App & AngularJS
10:09
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
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. โ 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
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. 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