The UI package for the Leerstandsmelder service based on AngularJS and Angular Material for the browser and mobile devices.
You can find the accompanying API server and client in the Leerstandsmelder GitHub repositories.
The app consists of static code only so you can just clone the repo, build the app (see below), set the dist/web folder as the document root and it should work.
Since the app uses Angular in HTML5 mode, you need to make sure that every 404 not found error gets redirected to index.html.
For Apache add the following line to either an existing .htaccess configuration in the app's document root or create a new one:
ErrorDocument 404 /index.html
Alternatively, you can just run sh/server from the repo root and the frontend will be served at http://localhost:9090. Important: This server is not multithreaded thus introducing a bottleneck should it be used in production without something like PM2.
The mobile UI is built on Apache Cordova and is supported for Android and iOS.
NodeJS and Gulp need to be installed. In order to build the mobile app you additionally need to install the Cordova CLI tool. To be able to work on the mobile UI in the browser you can install the Ripple Emulator for Google Chrome (see below).
Clone the repo and run:
npm installYou can build both the browser and mobile user interfaces in dist/ by running gulp build.
Copy config.default.json to config.json and update if needed.
To build only one of both platforms run npm run build-web or npm run build-mobile. Using npm run release does a clean build and is recommended before deployment.
The app packages for the mobile platform can be built running gulp build:android and gulp build:ios. The Android build creates .apk files in dist/android/, while the iOS build generates an XCode project in dist/cordova/plaforms/ios/.
The source code is comprised of JavaScript (ES5), LESS to generate CSS and Pug (formerly Jade) to generate HTML.
Dependencies are managed using NPM and Bower. With Gulp as a build system, everything build-related happens in gulpfile.js. This means building the source as well as copying static assets and dependencies to the dist directories.
The project uses the following directory structure:
assets # static assets
src
| mobile # mobile-specific sources
| | js
| | less
| | pug
| shared # sources shared between web and mobile
| | js
| | less
| | pug
| web # web-specific sources
| | js
| | less
| | pug
While working on the project you can run gulp dev to watch and automatically update your source files and start serving the Web App at http://localhost:8080 and the Mobile App (not the Cordova version!) at http://localhost:7070. You can also use the --env= option to choose only one enviroment.
We use JSHint as a linter to determine if the code is fit to be published. The continuous integration server at Travis CI runs the gulp lint task along with gulp build to determine if the "build" succeeds. You can do so yourself to check if your code is OK. While you can always commit and push code not passing the linter, this will result in the "Build passing" badge switching to "failed". As of now we only lint the JavaScript source files and no Unit Tests are present. Click on the "Build" badge at the top of this page to see details about a build.
You can simulate the Cordova environment in the Browser using the Ripple Chrome Extension. Install it and run gulp serve:cordova to start the local server.
Then navigate to http://emulate.phonegap.com?url=localhost:8090&platform=cordova to start the simulator and click on the www folder. To update the source run gulp build:android.
To import the project to Android Studio select "New > Import project..." and choose the dist/cordova/platforms/android/ folder.