The Slides from my presentation at the Durban AgriHack 2015. They cover hybrid mobile development and the Spore magazine assignment details.

1. AGRIHACK TALENT
CHALLENGE
Durban, September 2015

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

3. IT DEPENDS…

5. 2014 (GSMAINTELLIGENCE.COM)

7. HYBRID APPS

8. NATIVE HYBRID WEB

9. NATIVE APPS

10. WEB APPS

11. WIKIPEDIA FEEDLY
KHAN
ACADEMY AMAZON
SOMETOP SELLING
HYBRID APPS

15. FLEXIBILITY

16. BROWSERS MOBILE APPS
SERVER APPLICATIONS DESKTOP APPS

17. ONE TRANSPORT

18. ONE (BIG) COMMUNITY

19. IONIC ANGULAR REACT
JQUERYFOUNDATIONBOOTSTRAP

21. POWER OF
SCAFFOLDING

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

23. •High on features
•Low on resources
•Low bandwidth
•Software updates
hard to control
MOBILE DEVICES

24. •High on resources
•Scalable
•High bandwidth
•Managed software
updates
SERVER

25. •Exposes features
•Re-usable
•Controlled & managed
•Integration
API

29. CONTENT

30. CTA’S SHARED
CONTENT REPOSITOY

31. Presentation Goals
Part 1:
•How & why Hybrid Apps
•The true power behind apps
Part 2:
•CTA Shared Content Repository
•Prepared tools Hackathon (Spore)

35. UTILIZE SEMANTIC WEB
TECHNOLOGIES

36. ANALISYS

37. LINKING
Concept
Concept
Country
Organisation
Author
Related

38. DISCOVERY

39. SOFTWARE
DEVELOPMENT KIT

40. HACKATONTOOLS

41. REPOSITORIES

42. BUILDTOOLS

43. POWER OF
SCAFFOLDING

46. VIRTUALIZATION

47.
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

49. SCR SPORE CONTENT

50. AGROVOC

51. AGROVOC
≈
Policies
Economic
Policies
Trade
policies

52. Trade
Policy

53. Export
Insurance

54. ≈
AGROVOC
≈
Export
policies
Export
Insurance
Policies
Economic
Policies
Trade
policies

55. GEONAMES

56. JSON SCHEMA

57. DEMO