TechForum 2014 Ionic - Atos Worldline

A Mobile Application for Worldline TechForum 2014

Service : SDCO - Software Engineering - Web & Mobile Framework

Technology : Cordova - HTML5 - CSS3 - JavaScript - AngularJS

FrameWork : Ionic

Developer : Maxime Gens

It's a mobile app for TechForum 2014 in WorldLine. TechForum eXplore is an internal conference dedicated to topics related to technology, through 2 main lines: technical breakthroughs & achievements, and exploratory works on various topics.

----

Download application

Techforum 2014 Android

Techforum 2014 IOS

To install development and production environments

Install a follow components

Use "sudo" to build with Mac and Linux

Node.js

http://nodejs.org/

Configure NPM proxy

npm config set proxy http://[proxy]:[PORT]
npm config set https-proxy http://[proxy]:[PORT]

Cordova

npm install -g cordova

Bower

npm install -g bower

Configure Bower proxy

Add in .bowerrc

cd techforum-app/dev/
nano .bowerrc
Add this =>
"proxy":"http://[proxy]:[PORT]",
"https-proxy":"http://[proxy]:[PORT]"

Grunt

npm install -g grunt-cli

Then run:

$ cd dev
$ npm install
$ bower install
$ cd ..

The development environment is now installed

---

To install prod environnement

If you use mac or linux

chmod u+x script.sh
perl -i -pe 'y|\r||d' script.sh

$ sh script

Add cordova plugin

For Android and IOS
$ cordova plugin add org.apache.cordova.splashscreen
$ cordova plugin add org.apache.cordova.geolocation
Only for Android
$ cordova plugin add org.apache.cordova.network-information

To build for Android

$ cordova platform add android
Add Splascreen and Icon
$  cp -r dev/res/android/res platforms/android/
$ cordova build android
To launch a emulator (you must have Android ADB and a AVD (Android virtual Device)
$ cordova emulate android
or to launch in your phone
$ cordova run android

To build for IOS

You should run on Mac OX

$ cordova platform add ios
$ cordova build ios
Add Splascreen and Icon
$  cp -r dev/res/ios/icons/ platforms/ios/TechForum\ eXplore\ 2014/Resources/icons
$  cp -r dev/res/ios/splash platforms/ios/TechForum\ eXplore\ 2014/Resources/
To launch a emulator (update xcode before)
$ cordova emulate ios

If you have a problem to install Cordova plugin

Download the git of the plugin using the zip download of git site

• https://github.com/apache/cordova-plugin-splashscreen
• https://github.com/apache/cordova-plugin-geolocation
• https://github.com/apache/cordova-plugin-network-information

Extract the zip to some path

cordova plugin add [pathtotheextractedplugingit]cordova-plugin-geolocation-master
cordova plugin add [pathtotheextractedplugingit]cordova-plugin-splashscreen-master
cordova plugin add [pathtotheextractedplugingit]cordova-plugin-network-information-master

To test in Development Environments

Execute Unit Tests

Install Karma

npm install -g karma-cli

launch tests

cd dev/test
karma start karma.conf.js

Execute Interface Test You must have a adb in your computer

cd dev/test
For fast test
sh test_interface_android_fast
For a complet interface test
sh test_interface_android_complet

Emulate Application on browser

Install Ripple emulator for Google Chrome

https://chrome.google.com/webstore/detail/ripple-emulator-beta/geelfhphabnejjhdalkjhgipohgpdnoc

Launch server

$ cd www
$ node server.js

Application is now running in :

localhost:3000

Training PhoneGap/Cordova and Ionic Framework

It's a training for PhoneGap/Cordova and a exercice to learn Ionic Framework It's in a "techforum_training" folder

Download Presentation Cordova - Ionic