Why GitHub?

Enterprise Explore Marketplace Pricing Search Sign in Sign up

thinktecture / boardz-cross-platform-sample Watch 27 Star 80 Fork 35

Code Issues 8 Pull requests 1 Projects 0 Insights

Dismiss
Join GitHub today
GitHub is home to over 36 million developers working together to host and
review code, manage projects, and build software together.

Sign up

Sample application for demonstrating various aspects of modern cross-platform applications - using Angular 2, Cordova, Electron & gulp.
With a .NET Web API & SignalR backend.

553 commits 7 branches 1 release 5 contributors MIT

Branch: master New pull request Find File Clone or download

ChristianWeyer Create LICENSE … Downloading...Latest commit a7fe7a6 on Mar 5, 2017

cordova Adding iOS 10 camera support Want to be notified of new releases in 3 years ago
thinktecture/boardz-cross-platform-sample?
electron electron ⚛ tray icon should provide router3.0.0 compatible route 3 years ago

gulpTasks Changing source maps settings Sign in Sign 3upyears ago

resources Larger .ico 3 years ago

src Bumped Electron to 1.4.2 3 years ago

.gitattributes Look at my API, my API will be amazing! 4 years ago

.gitignore bumped to ng2beta6 3 years ago

.nvmrc node bumped to 6.5.0 3 years ago

LICENSE Create LICENSE 2 years ago

README.md README update 3 years ago

gulp.config.js required changes to gulp to get ng2 rc1 build up and running 3 years ago

gulpfile.js bumped electron to 0.36.10 and cleand up gulp files 3 years ago

package.json Fixed versions in package.json 2 years ago

system.config.js Much fun with SystemJS 3 years ago

tsconfig.json remove comments in compiled ts 3 years ago

tslint.json some more polish 💄 3 years ago

typings.json Some cleanup :-) (tm) 3 years ago

README.md

Sample application for various “Cross-Platform HTML5 – in

Action!” workshops

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
Make sure you have the git command line tools installed
Install and install ImageMagick (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 (for executing the Electron Windows build task)
Download and install Atom or another editor of your choice (free: notepad , Visual Studio Code; commercial: Sublime
Text, WebStorm)

Building
The gulp tasks 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 gulp watch-web to start a live server, which is best when developing the app
Run gulp watch-cordova-ios to orchestrate the cordova ios app with live reloading. When this task runs, go to
dist/mobile and use cordova run ios to open a simulator which will live reload.

Run gulp watch-electron to start a live reloading electron 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 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
Leaflet, an open-source JavaScript library for mobile-friendly interactive maps
pNotify UI notification library

Native Wrappers
Cordova for mobile apps
Camera Plugin, allows native camera access
Geolocation Plugin, allows access to geolocation
Statusbar Plugin, allows modifying the statusbar
Electron for desktop applications

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

© 2019 GitHub, Inc. Terms Privacy Security Status Help Contact GitHub Pricing API Training Blog About