AGRIHACK TALENT CHALLENGE

Durban, September 2015

Presentation GoalsPart 1: •How & why Hybrid Apps•The true power behind appsPart 2:•CTA Shared Content Repository•Prepared tools Hackathon (Spore)

IT DEPENDS…

2014 (GSMAINTELLIGENCE.COM)

HYBRID APPS

NATIVE HYBRID WEB

NATIVE APPS

WEB APPS

WIKIPEDIA FEEDLYKHAN

ACADEMY AMAZON

SOME TOP SELLING HYBRID APPS

FLEXIBILITY

BROWSERS MOBILE APPS

SERVER APPLICATIONS DESKTOP APPS

ONE TRANSPORT

ONE (BIG) COMMUNITY

IONIC ANGULAR REACT

JQUERYFOUNDATIONBOOTSTRAP

POWER OF SCAFFOLDING

POWER IS NICE……but what will power your App?

•High on features•Low on resources•Low bandwidth•Software updates hard to control

MOBILE DEVICES

•High on resources•Scalable•High bandwidth•Managed software updates

SERVER

•Exposes features•Re-usable•Controlled & managed•Integration

API

CONTENT

CTA’S SHARED CONTENT REPOSITOY

Presentation GoalsPart 1:•How & why Hybrid Apps•The true power behind appsPart 2: •CTA Shared Content Repository•Prepared tools Hackathon (Spore)

UTILIZE SEMANTIC WEB TECHNOLOGIES

ANALISYS

LINKING

Concept

Concept

Country

Organisation

Author Related

DISCOVERY

SOFTWARE DEVELOPMENT KIT

HACKATON TOOLS

REPOSITORIES

BUILD TOOLS

POWER OF SCAFFOLDING

VIRTUALIZATION

Additional references & resources:

NPM documentation:

http://browsenpm.org/help

Ionic documentation:

http://ionicframework.com/docs/

Ionic Icons:

http://ionicons.com/

Cordova documentation:

https://cordova.apache.org/docs/en/5.0.0/

Angular documentation:

https://docs.angularjs.org/api

Yeoman documentation:

http://yeoman.io/learning/index.html

Scaffold your mobile app project

Scaffolding is a subject that will be explained during the presentation given in Durban. In

short it is a way to use a ready­made project instead of starting from scratch.

We will be using the following yeoman generator in our setup:

https://github.com/tmaximini/generator­ionic­gulp

If you haven’t installed it yet you can do so with npm:

npm i ­g generator­ionic­gulp

To use the generator create a new folder for you project, change the working directory to the

new folder and run:

yo ionic­gulp

A set of questions will guide you in creating your Ionic project. More details about scaffolding

and ionic development will be given during (or before) the hackathon.

Container / Virtual Machine installation

Using a virtual machine or container image will isolate the development environment used

for the hackathon from your own OS. The advantage of this approach is that you won’t

conflict with any locally installed software and it will be easier to remove from your system

afterwards. Installing Vagrant

You will need to install vagrant which relies on VirtualBox for its virtual machines

https://www.vagrantup.com/

https://www.virtualbox.org/

Please install the version appropriate for your Operating System

Creating the Virtual Machine

We have prepared a Vagrantfile you can download (or clone) from github:

https://github.com/SpringTree/vagrant­ionic­cordova­development

Create a folder where you want to install the development image and place the VagrantFile

from the above repository there. You will want to edit the VagrantFile to link a folder on your

local filesystem to a folder inside the VM. The default assumes a folder named ‘Projects’ in

your home directory.

Look for the following line in the VagrantFile and adjust as needed:

config.vm.synced_folder "~/Projects", "/home/vagrant/vagrant_projects"

If you installed and verified VirtualBox is working you can let Vagrant build your environment

using the following command:

vagrant up NOTE: This will take quite a while and it will download a large virtual machine image

When everything is installed you can get shell access to the VM using the following

command:

vagrant ssh

Manual installation

If you are somewhat familiar with development using node.js and have it installed on your

system you can install the required software with the following command:

npm i ­g gulp grunt­cli bower ionic cordova yo generator­ionic­gulp

NOTE: You may need administrator (sudo) permission depending on your system setup

You can use the detailed installation instructions below for each piece of software if you

don’t have node.js installed or are unfamiliar with it.

Install Node.js and NPM (v0.12.x)

https://nodejs.org/download/release/v0.12.7/

Install Bower http://bower.io/

Install Ionic and Cordova

http://ionicframework.com/docs/guide/installation.html

Install gulp http://gulpjs.com/

Optionally; setup Android development environment

We will not be focussing on deploying to actual devices during the session. Should you wish

to do so you will need to setup the Android SDK

https://cordova.apache.org/docs/en/5.0.0/guide/platforms/android/

Optionally; setup iOS development environment

We will not be focussing on deploying to actual devices during the session. Should you wish

to do so you will need to setup the iOS SDK. This will only work on Apple hardware running

OSX with XCode installed

https://cordova.apache.org/docs/en/5.0.0/guide/platforms/ios/

Hybrid App Development Instructions

Goal We have prepared a set of instructions for setting up a development environment for the

upcoming AgriHack Talent challenge 2015 in Durban. Using the technology and approach

described here is optional but will allow you save valuable time and ‘hit the ground running’

during the hackathon.

Depending on your level of familiarity with the tools used you have 2 options:

Manual installation on your own OS

Using a pre­made container (Vagrant or Docker)

Used technology

A presentation about what hybrid app development is and its benefits and pitfalls will be

given in Durban. There are a number of options for hybrid module App development. The

focus for the hackathon is to use Ionic (which is based on angular) within a Cordova

container. They both depend on node.js to function.

At the time of writing the following versions of the software are in use:

node.js: v0.12.7

ionic: 1.1.0

angular: 1.4.3

cordova: 5.4.0

gulp: 3.9.0

The primary development language used will be javascript.

If you are going to use the container approach to installing you will also need:

virtualbox: 5.0.10

vagrant:1.7.4

NOTE: VirtualBox will need to install an extension specific to your host operating system

after installing itself. Run virtualbox at least once before getting started with vagrant

SCR SPORE CONTENT

AGROVOC

AGROVOC≈

Policies

EconomicPolicies

Trade policies

TradePolicy

ExportInsurance

≈

AGROVOC≈Export

policies

ExportInsurance

Policies

EconomicPolicies

Trade policies

GEONAMES

JSON SCHEMA

DEMO