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

Requirements

• NodeJS NodeJS
• 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
• 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 UWP, Android phone apps as well as desktop apps for Mac OSX, Windows and Linux. To get it working, please do the following:

• After cloning the repo: npm i --no-progress within the root folder of this repository
• Run gulp watch-web to start a live server, which is best when developing the app
• Run gulp to build the web app
• Release Mode: Use the following gulp tasks to build the apps in release mode
  • Run gulp build-all to build all apps in debug mode
  • Run gulp build-web to build the web app
  • Run gulp build-cordova to build all phone related apps
  • Run gulp build-electron to build all desktop related apps

Running

Web

Use gulp watch-web as mentioned above to start the browser version of BoardZ.

Cordova

To run the cordova project, open a terminal and point it to dist/mobile. Use one of the following commands to start:

• cordova run ios: Runs the iOS version of BoardZ. Requires a Mac
• cordova run android: Runs the Android version of BoardZ. Requires Android SDK to be installed and at least a simulator

If a device is connected, the run command will automatically deploy the App to your device, so you can start it directly on your device.

Electron

To start the electron packaged app, go to dist/desktop/build and open one of the directories suiting your current operating system. Then open the executable as used to.

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 GitHub's electron

Android Settings

SDK version

If you want to change Android's SDK version, open cordova/config.xml and search for android-minSdkVersion or android-targetSdkVersion:

• android-minSdkVersion: An integer designating the minimum API Level required for the application to run.
• android-targetSdkVersion: An integer designating the API Level that the application targets. If not set, the default value equals that given to minSdkVersion.

Third-Party Libraries

JavaScript, CSS

• Angular2, JavaScript framework — HTML enhanced for web apps!
• 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
• HammerJS, for touch interactions
• FontAwesome Images powered by font awesome
• 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
• pNotify UI notification library

Native Wrappers

• Cordova
  • Camera Plugin, allows native camera access
  • Geolocation Plugin, allows access to geolocation
  • Statusbar Plugin, allows modifying the statusbar
• Ionic
• Electron

Additional Resources

• Cross-platform 2D and 3D visualizations
• Offline-first architecture for HTML5 apps
• Leightweight architecture with ASP.NET and SignalR