Code Monkey home page Code Monkey logo

boardz-cross-platform-sample's Introduction

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!)
  • 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

Native Wrappers

Additional Resources

boardz-cross-platform-sample's People

Contributors

christianliebel avatar christianweyer avatar gingters avatar manuelrauber avatar thorstenhans avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

boardz-cross-platform-sample's Issues

Optimize using and uploading images in Cordova

By using the standard e.g. iPhone camera we get very large photos with the current code. It can tkae ages to upload and ages to download all the photos.

We need to optimize this e.g. on Cordova.

We could create thumbnails on the server as well.

Crosswalk runtime dependency

On a few Android devices we observed at BASTA that they needed to explicitly install a Crosswalk runtime dependency via the Play Store before the BoardZ app was able to run properly.

Need to investigate here.

Clean up folder structure

app/app... ;)

And move cordova as well as nwjs and resources folders out of the (outer) app folder.

Don't start two live servers

All watch tasks have to be renamed to 'livereload' since they all do live reload. Then create new task 'watch' which actually does the same as 'livereload' but without the live reload server. :)

Implement new global spinner

I think the current global loading bar will not be recognized, if you don't know, it will be there. It seems, the app is just doing nothing will the bar is progressing.

Cordova Gulp build task does not work properly on Windows

...

[21:38:36] Starting 'cordova:build'...
cp: missing destination file operand after ‘..\resources" resources/’
Try 'cp --help' for more information.
WARNING: Applications for platform ios can not be built on this OS - win32.
Adding ios project...
iOS project created with [email protected]
cp: no such file or directory: C:\Users\chris\Documents\GitHub\boardz-cross-platform-sample\cordova\resources\ios\icon\icon-60.png

...

Readme-Update

List of things, which has to be changed in the README file:

  • Wine is needed for Win Icon
  • dev:watch is now dev:liveserver

Extremely slow startup time with Cordova on device

There is a long time of a white screen after the splash screen before the actual application shows up.
This can be seen on iOS, but is extremely slow and annoying on e.g. an Android Nexus 7 (2013).

BoardZ1 starts much faster - so this seems related to ng2.
We need to investigate and fix this.

Exception in Cordova app on Windows 8/10

SCRIPT5022: Unhandled exception at line 79, column 13 in ms-appx-web://net.tt.boardz/www/cordova.js
0x800a139e - JavaScript runtime error: module cordova/plugin_list already defined

If we remove the explicit <script src="cordova_plugins.js"></script>
from index.html manually everything works.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.