Merge branch 'prep'

README.md

@@ -1,2 +1,89 @@
-# Angular Connect 2016
-Sample code and presentation for the session 'One code to rule them all: Cross-platform development with Angular 2, Cordova & Electron' at Angular Connect 2016.
+# AngularConnect 2016 - Sample Application
+
+## Notes
+*The sample application uses a Microsoft Azure hosted API [https://boardzapi.azurewebsites.net/swagger](https://boardzapi.azurewebsites.net/swagger).*
+
+**For login, please use same value for username and password ;-)**
+
+## 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](https://developer.apple.com/xcode/download/)
+  * [Android SDK](https://developer.android.com/sdk/index.html)
+  * [Windows 10 SDK](https://dev.windows.com/en-us/downloads/windows-10-sdk)
+* Download and install [node.js](https://nodejs.org/)
+* Make sure you have the [git command line tools](https://git-scm.com/downloads) installed
+* Install and install [ImageMagick](http://www.imagemagick.org/script/binary-releases.php) (base toolkit for image processing, here used for splash screen and icon generation)
+* Install Cordova: `npm install -g cordova`
+* Install gulp: `npm install -g gulp`
+* MacOSX and Linux users need to install [Wine](https://wiki.winehq.org/) (for executing the Electron Windows build task)
+* Download and install [Atom](https://atom.io/) or another editor of your choice (free: `notepad`, [Visual Studio Code](https://code.visualstudio.com/); commercial: [Sublime Text](https://www.sublimetext.com/), [WebStorm](https://www.jetbrains.com/webstorm/))
+
+## Building
+The npm scripts will build iOS, Windows UWP, Android apps as well as desktop applications 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 `npm run watch-web` to start a live server, which is best when developing the app
+* Run `npm run watch-all` to orchestrate the cordova ios app, the electron app and the webapp with live reloading.
+* Run `npm run start-web` to start the webapp without injecting upcoming changes
+* Release Mode: Use the following npm scripts to build the apps in release mode
+    * Run `npm run dist-web` to build the web app
+    * Run `npm run dist-mobile-all` to build all phone related apps
+    * Run `npm run dist-desktop-all` to build all desktop related apps
+
+## Running
+
+### Web
+
+Use `npm run start-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:
+
+* `npm run start-mobile-ios`: Runs the iOS version of BoardZ. Requires a Mac
+* `npm run start-mobile-ios`: Runs the Android version of BoardZ. Requires Android SDK to be installed and at least a simulator
+
+### Electron
+
+To start the electron packaged app, go to `build/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 Electron
+
+### Android Settings
+
+#### SDK version
+
+If you want to change [Android's SDK version](http://developer.android.com/guide/topics/manifest/uses-sdk-element.html), open [cordova/config.xml](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](https://angular.io/), JavaScript framework — HTML enhanced for web apps!
+* [Bootstrap](http://getbootstrap.com/), responsive layout framework
+* [AdminLTE](https://almsaeedstudio.com/preview), free responsive dashboard template
+  * [Font Awesome](https://fortawesome.github.io/Font-Awesome/), free icon font
+  * [jQuery](https://jquery.com/), JavaScript library required for AdminLTE
+  * [winstore-jscompat](https://github.com/MSOpenTech/winstore-jscompat), fixes jQuery issues with Windows (Phone) 8 and 8.1 platforms
+* [FastClick](https://github.com/ftlabs/fastclick), eliminates the [infamous 300 ms lag on touch devices](http://developer.telerik.com/featured/300-ms-click-delay-ios-8/)
+* [HammerJS](http://hammerjs.github.io/), for touch interactions
+* [FontAwesome](http://fontawesome.io) Images powered by font awesome
+* [Leaflet](http://leafletjs.com/), an open-source JavaScript library for mobile-friendly interactive maps
+* [pNotify](http://sciactive.com/pnotify/) UI notification library
+
+### Native Wrappers
+* [Cordova](https://cordova.apache.org/) for mobile apps
+  * [Camera Plugin](https://github.com/apache/cordova-plugin-camera), allows native camera access
+  * [Geolocation Plugin](https://github.com/apache/cordova-plugin-geolocation), allows access to geolocation
+  * [Statusbar Plugin](https://github.com/apache/cordova-plugin-statusbar), allows modifying the statusbar
+* [Electron](http://electron.atom.io/) for desktop applications
+
+## Additional Resources
+* [Cross-platform 2D and 3D visualizations](https://github.com/thinktecture/basta-herbst-2015-2d-3d)
+* [Offline-first architecture for HTML5 apps](https://speakerdeck.com/christianweyer/auch-ohne-netz-offline-first-architekturen-fur-html5-apps)
+* [Leightweight architecture with ASP.NET and SignalR](https://speakerdeck.com/christianweyer/fur-alle-leichtgewichtige-architekturen-mit-asp-dot-net-web-api-and-signalr)

demo/README.md

@@ -0,0 +1,84 @@
+# AngularConnect 2016 - Sample Application
+
+## 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](https://developer.apple.com/xcode/download/)
+  * [Android SDK](https://developer.android.com/sdk/index.html)
+  * [Windows 10 SDK](https://dev.windows.com/en-us/downloads/windows-10-sdk)
+* Download and install [node.js](https://nodejs.org/)
+* Make sure you have the [git command line tools](https://git-scm.com/downloads) installed
+* Install and install [ImageMagick](http://www.imagemagick.org/script/binary-releases.php) (base toolkit for image processing, here used for splash screen and icon generation)
+* Install Cordova: `npm install -g cordova`
+* Install gulp: `npm install -g gulp`
+* MacOSX and Linux users need to install [Wine](https://wiki.winehq.org/) (for executing the Electron Windows build task)
+* Download and install [Atom](https://atom.io/) or another editor of your choice (free: `notepad`, [Visual Studio Code](https://code.visualstudio.com/); commercial: [Sublime Text](https://www.sublimetext.com/), [WebStorm](https://www.jetbrains.com/webstorm/))
+
+## Building
+The npm scripts will build iOS, Windows UWP, Android apps as well as desktop applications 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 `npm run watch-web` to start a live server, which is best when developing the app
+* Run `npm run watch-all` to orchestrate the cordova ios app, the electron app and the webapp with live reloading.
+* Run `npm run start-web` to start the webapp without injecting upcoming changes
+* Release Mode: Use the following npm scripts to build the apps in release mode
+    * Run `npm run dist-web` to build the web app
+    * Run `npm run dist-mobile-all` to build all phone related apps
+    * Run `npm run dist-desktop-all` to build all desktop related apps
+
+## Running
+
+### Web
+
+Use `npm run start-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:
+
+* `npm run start-mobile-ios`: Runs the iOS version of BoardZ. Requires a Mac
+* `npm run start-mobile-ios`: Runs the Android version of BoardZ. Requires Android SDK to be installed and at least a simulator
+
+### Electron
+
+To start the electron packaged app, go to `build/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 Electron
+
+### Android Settings
+
+#### SDK version
+
+If you want to change [Android's SDK version](http://developer.android.com/guide/topics/manifest/uses-sdk-element.html), open [cordova/config.xml](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](https://angular.io/), JavaScript framework — HTML enhanced for web apps!
+* [Bootstrap](http://getbootstrap.com/), responsive layout framework
+* [AdminLTE](https://almsaeedstudio.com/preview), free responsive dashboard template
+  * [Font Awesome](https://fortawesome.github.io/Font-Awesome/), free icon font
+  * [jQuery](https://jquery.com/), JavaScript library required for AdminLTE
+  * [winstore-jscompat](https://github.com/MSOpenTech/winstore-jscompat), fixes jQuery issues with Windows (Phone) 8 and 8.1 platforms
+* [FastClick](https://github.com/ftlabs/fastclick), eliminates the [infamous 300 ms lag on touch devices](http://developer.telerik.com/featured/300-ms-click-delay-ios-8/)
+* [HammerJS](http://hammerjs.github.io/), for touch interactions
+* [FontAwesome](http://fontawesome.io) Images powered by font awesome
+* [Leaflet](http://leafletjs.com/), an open-source JavaScript library for mobile-friendly interactive maps
+* [pNotify](http://sciactive.com/pnotify/) UI notification library
+
+### Native Wrappers
+* [Cordova](https://cordova.apache.org/) for mobile apps
+  * [Camera Plugin](https://github.com/apache/cordova-plugin-camera), allows native camera access
+  * [Geolocation Plugin](https://github.com/apache/cordova-plugin-geolocation), allows access to geolocation
+  * [Statusbar Plugin](https://github.com/apache/cordova-plugin-statusbar), allows modifying the statusbar
+* [Electron](http://electron.atom.io/) for desktop applications
+
+## Additional Resources
+* [Cross-platform 2D and 3D visualizations](https://github.com/thinktecture/basta-herbst-2015-2d-3d)
+* [Offline-first architecture for HTML5 apps](https://speakerdeck.com/christianweyer/auch-ohne-netz-offline-first-architekturen-fur-html5-apps)
+* [Leightweight architecture with ASP.NET and SignalR](https://speakerdeck.com/christianweyer/fur-alle-leichtgewichtige-architekturen-mit-asp-dot-net-web-api-and-signalr)

demo/configs/dev/browserSync.js

@@ -0,0 +1,10 @@
+module.exports = {
+    port: 8000,
+    files: ['./build/web/**/*.{html,css,js,map}'],
+    server: {
+        baseDir: './build/web',
+        middleware: { 0: null }
+    },
+    open: true,
+    injectChanges: true
+};

demo/cordova.dev.config.xml

@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
+<widget id="net.tt.boardz.v2" version="0.1.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
+    <name>BoardZ2</name>
+    <description>
+        Small demo app.
+    </description>
+    <author email="office@thinktecture.com" href="http://www.thinktecture.com">
+        Thinktecture AG
+    </author>
+
+    <content src="http://${hostname}:8000/index.html"/>
+
+    <plugin name="cordova-plugin-whitelist" version="1.2.2"/>
+    <plugin name="cordova-plugin-statusbar" spec="2.1.3"/>
+    <plugin name="cordova-plugin-splashscreen" spec="3.2.2"/>
+    <plugin name="cordova-plugin-geolocation" spec="2.2.0"/>
+    <plugin name="cordova-plugin-camera" spec="2.2.0"/>
+
+    <platform name="ios">
+    </platform>
+
+    <platform name="android">
+        <hook type="after_platform_add" src="hooks/android/after_platform_add_add_plugins.js" />
+    </platform>
+
+    <access origin="*"/>
+
+    <allow-intent href="http://*/*"/>
+    <allow-intent href="https://*/*"/>
+    <allow-intent href="tel:*"/>
+    <allow-intent href="sms:*"/>
+    <allow-intent href="mailto:*"/>
+    <allow-intent href="geo:*"/>
+    <allow-navigation href="http://${hostname}:8000/*" />
+
+    <platform name="android">
+        <allow-intent href="market:*"/>
+    </platform>
+    <platform name="ios">
+        <allow-intent href="itms:*"/>
+        <allow-intent href="itms-apps:*"/>
+    </platform>
+
+    <preference name="StatusBarOverlaysWebView" value="false"/>
+    <preference name="StatusBarBackgroundColor" value="#367fa9"/>
+    <preference name="StatusBarStyle" value="lightcontent"/>
+    <preference name="DisallowOverscroll" value="true"/>
+    <preference name="SplashScreen" value="screen"/>
+    <preference name="SplashScreenDelay" value="3000"/>
+    <preference name="SplashMaintainAspectRatio" value="true" />
+    <preference name="SplashScreenBackgroundColor" value="white" />
+    <preference name="android-minSdkVersion" value="19" />
+    <preference name="android-targetSdkVersion" value="19" />
+    <preference name="xwalkCommandLine" value="--disable-pull-to-refresh-effect"/>
+    <preference name="xwalkMode" value="embedded"/>
+    <platform name="ios">
+        <preference name="Orientation" value="all" />
+    </platform>
+
+    <engine name="ios" spec="4.2.0"/>
+    <engine name="android" spec="5.1.1"/>
+    <engine name="windows" spec="4.4.0"/>
+</widget>

demo/cordova/config.xml

@@ -0,0 +1,72 @@
+<?xml version='1.0' encoding='utf-8'?>
+<widget id="net.tt.boardz" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
+    <name>BoardZ</name>
+    <description>
+        A sample Apache Cordova application that responds to the deviceready event.
+    </description>
+    <author email="dev@cordova.apache.org" href="http://cordova.io">
+        Apache Cordova Team
+    </author>
+    <content src="index.html" />
+    <access origin="*" />
+    <allow-intent href="http://*/*" />
+    <allow-intent href="https://*/*" />
+    <allow-intent href="tel:*" />
+    <allow-intent href="sms:*" />
+    <allow-intent href="mailto:*" />
+    <allow-intent href="geo:*" />
+    <platform name="android">
+        <allow-intent href="market:*" />
+    </platform>
+    <platform name="ios">
+        <allow-intent href="itms:*" />
+        <allow-intent href="itms-apps:*" />
+    </platform>
+    <engine name="ios" spec="~4.2.1" />
+    <engine name="windows" spec="~4.4.2" />
+    <engine name="android" spec="~5.2.2" />
+    <plugin name="cordova-plugin-camera" spec="~2.3.0">
+        <variable name="CAMERA_USAGE_DESCRIPTION" value=" " />
+        <variable name="PHOTOLIBRARY_USAGE_DESCRIPTION" value=" " />
+    </plugin>
+    <plugin name="cordova-plugin-whitelist" spec="~1.3.0">
+        <variable name="CAMERA_USAGE_DESCRIPTION" value=" " />
+        <variable name="PHOTOLIBRARY_USAGE_DESCRIPTION" value=" " />
+    </plugin>
+    <plugin name="cordova-plugin-statusbar" spec="~2.2.0">
+        <variable name="CAMERA_USAGE_DESCRIPTION" value=" " />
+        <variable name="PHOTOLIBRARY_USAGE_DESCRIPTION" value=" " />
+    </plugin>
+    <plugin name="cordova-plugin-splashscreen" spec="~4.0.0">
+        <variable name="CAMERA_USAGE_DESCRIPTION" value=" " />
+        <variable name="PHOTOLIBRARY_USAGE_DESCRIPTION" value=" " />
+    </plugin>
+    <plugin name="cordova-plugin-crosswalk-webview" spec="~2.1.0">
+        <variable name="CAMERA_USAGE_DESCRIPTION" value=" " />
+        <variable name="PHOTOLIBRARY_USAGE_DESCRIPTION" value=" " />
+        <variable name="XWALK_VERSION" value="21+" />
+        <variable name="XWALK_LITEVERSION" value="xwalk_core_library_canary:17+" />
+        <variable name="XWALK_COMMANDLINE" value="--disable-pull-to-refresh-effect" />
+        <variable name="XWALK_MODE" value="embedded" />
+        <variable name="XWALK_MULTIPLEAPK" value="true" />
+    </plugin>
+    <plugin name="cordova-plugin-geolocation" spec="~2.3.0">
+        <variable name="CAMERA_USAGE_DESCRIPTION" value=" " />
+        <variable name="PHOTOLIBRARY_USAGE_DESCRIPTION" value=" " />
+        <variable name="XWALK_VERSION" value="21+" />
+        <variable name="XWALK_LITEVERSION" value="xwalk_core_library_canary:17+" />
+        <variable name="XWALK_COMMANDLINE" value="--disable-pull-to-refresh-effect" />
+        <variable name="XWALK_MODE" value="embedded" />
+        <variable name="XWALK_MULTIPLEAPK" value="true" />
+    </plugin>
+    <preference name="StatusBarOverlaysWebView" value="false"/>
+    <preference name="StatusBarBackgroundColor" value="#367fa9"/>
+    <preference name="StatusBarStyle" value="lightcontent"/>
+    <preference name="DisallowOverscroll" value="true"/>
+    <preference name="SplashScreen" value="screen"/>
+    <preference name="SplashScreenDelay" value="3000"/>
+    <preference name="SplashMaintainAspectRatio" value="true" />
+    <preference name="SplashScreenBackgroundColor" value="white" />
+    <preference name="android-minSdkVersion" value="19" />
+    <preference name="android-targetSdkVersion" value="19" />
+</widget>

demo/cordova/hooks/README.md

@@ -0,0 +1,23 @@
+<!--
+#
+# Licensed to the Apache Software Foundation (ASF) under one
+# or more contributor license agreements.  See the NOTICE file
+# distributed with this work for additional information
+# regarding copyright ownership.  The ASF licenses this file
+# to you under the Apache License, Version 2.0 (the
+# "License"); you may not use this file except in compliance
+# with the License.  You may obtain a copy of the License at
+#
+# http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing,
+# software distributed under the License is distributed on an
+# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+#  KIND, either express or implied.  See the License for the
+# specific language governing permissions and limitations
+# under the License.
+#
+-->
+# Cordova Hooks
+
+Cordova Hooks represent special scripts which could be added by application and plugin developers or even by your own build system  to customize cordova commands. See Hooks Guide for more details:  http://cordova.apache.org/docs/en/edge/guide_appdev_hooks_index.md.html#Hooks%20Guide.