Sample application for various “Cross-Platform HTML5 – in Action!” workshops

Requirements

• NodeJS NodeJS
• npm i -g node-static Installation of a web server
• Git-Client (GitHub for Desktop)
• Postman https://chrome.google.com/webstore/detail/postman/fhbjgbiflinjbdggehcddcbncdddomop
• WebStorm

Setup

• Download and install the platform SDKs and/or emulators for the platform you want to develop for (this might take quite a while… so do this first!)
  • Xcode
  • Android SDK
  • Windows 10 SDK
  • Windows Phone 8.1 SDK
• Download and install node.js
• Download and install Atom or another editor of your choice (free: notepad, Visual Studio Code; commercial: Sublime Text, WebStorm)

Building

The gulp task will build iOS, Windows Phone, Android phone apps as well as desktop apps for Mac OSX, Windows and Linux. To get it working, please do the following:

• Only after cloning the repo: npm i within the root folder of this repository
• Run gulp build:cordova to build all phone related apps
• Run gulp build:nwjs to build all desktop related apps
• Run static within the app/ folder (the first, not the "app/app"-folder) to see the web app when pointing your browser to http://localhost:8080.

Supported platforms

• Any modern web browser (Chrome, Firefox, Edge, Safari) by simply hosting it
• Mobile platforms (iOS, Android, Windows) by packaging the app using Cordova
• Desktop platforms (Windows, Mac OS X, Linux) by packaging the app using NW.js

Third-Party Libraries

JavaScript, CSS

• AngularJS, JavaScript framework — HTML enhanced for web apps!
  • Angular Translate, i18n for AngularJS apps, made easy
  • Angular Translate Static File Loader, loading translation from static json files
  • UI Router, AngularJS routing framework
  • ngSanitize, service for sanitation
  • ngAnimate, service for animatio
  • ngNotify, simple, lightweight module for displaying notifications
  • Angular Loading Bar, an automatic loading bar
• Bootstrap, responsive layout framework
• AdminLTE, free responsive dashboard template
  • Font Awesome, free icon font
  • jQuery, JavaScript library required for AdminLTE
  • winstore-jscompat, fixes jQuery issues with Windows (Phone) 8 and 8.1 platforms
• FastClick, eliminates the infamous 300 ms lag on touch devices
• three.js, JavaScript library for WebGL and 3D content
  • Touch Polyfill, adds touch event support to Internet Explorer 11/Windows (Phone) 8.1
• Leaflet, an open-source JavaScript library for mobile-friendly interactive maps
  • Angular Leaflet Directive, Leaflet directive for AngularJS

Native Wrappers

• Cordova
  • Camera Plugin, allows native camera access
  • Geolocation Plugin, allows access to geolocation
  • Statusbar Plugin, allows modifying the statusbar
• Ionic
• NW.js
  • nw-builder, builds NW.js apps for Mac OS X, Windows and Linux via CLI

Additional Resources

• Cross-platform 2D and 3D visualizations
• Offline-first architecture for HTML5 apps
• Leightweight architecture with ASP.NET and SignalR
• AngularJS/Cordova: Fixing the Windows Phone back button