Were going to take a in depth look at connecting your ColdBox site with a mobile app using ColdBox & Ionic Framework. Ionic is a mobile framework built on Angular JS and comes with a lot of features out of the box. Its very easy to customize, comes with a CLI and a great ecosystem of tools to help get your mobile app up and running on your phone quickly. This talk will walk though the process of setting up a simple REST backend to communicate with our mobile app, and then we will create an app with a slide menu with a list of pages all pulled from the ColdBox REST API dynamically.
4. www.agritrackingsystems.comAGRI TRACKING SYSTEMS
4AND WHERE THEIR MILLIONS
WILL COME FROM
So based on those
metrics you would have
to have a little less than
8000 clicks a day to
bring in 1 million a year.
so better get to
clicking….
13. www.agritrackingsystems.comAGRI TRACKING SYSTEMS
13Cordova: Interacting with the Phone
Camera
Get Image from Camera or Photo
Library
!
Network
Check Strength of Cell Connection
(2G,3G,Wifi)
"
Storage
SQL Lite Database Wrapper for WebSQL
#
Device
Get Information about the Mobile Device$
Geolocation
Get Global Location Once or Watch
Position
%
File
Store and Get Files from Local
or Permanent Storage
&
'( File Transfer
Upload/Download Files to and
from Device
Push Notifications
Send notification to phone or
product local notifications
)
In App Browser
Open web pages without leaving
your app.
*
Content Sync
Update your apps code without
re-submitting to the app store
'
$
Cordova Plugins
(100+)
32. www.agritrackingsystems.comAGRI TRACKING SYSTEMS
32
File structure
Hooks - cordova build hooks
Platforms - where your ios,
android, windows phone, etc.
build projects reside
Plugins - Cordova Plugins
Resources - Generated Icons
and splash screen files
SCSS - your sass styles (used
instead of css)
www - project directory for
web app
33. www.agritrackingsystems.comAGRI TRACKING SYSTEMS
33
Project Structure
CSS - custom css if you don't use
sass
img - image resources
js - app / controllers / services
these are all app logic and
configuration files
lib - angular, ionic, etc. libraries
templates - your html angular
template files
index.html - your default file, with
your master template
35. www.agritrackingsystems.comAGRI TRACKING SYSTEMS
35
Router: Load URL -‐ http://localhost:8100/#app/games
In our routes
Router will find the route based on the name
-‐ Load in the controller: gamesCtrl
-‐ Load in the template: templates/games/list.html
After the controller is loaded in, the router is done
-‐ From here the controller takes over
//games
.state('app.games', {
url: '/games',
views: {
'menuContent': {
templateUrl: 'templates/games/list.html',
controller: 'gamesCtrl'
}
}
})
Game List
Template
with
{{mustache}}
placeholders
{{game.title}}
Angular/Ionic Architecture (Router)
36. www.agritrackingsystems.comAGRI TRACKING SYSTEMS
36
Template: Load URL -‐ templates/games/list.html
Template contains all the “view” logic
Game List
Template
with
{{mustache}}
placeholders
{{game.title}}
<ion-view>
<ion-content>
<ion-list>
<ion-item
ng-repeat="game in gameList"
href="#/app/game/
{{game.id}}">
<h2>{{game.title}}</h2>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
-‐ ion-‐view: wrapper for a template, the it contains, header
(button & title), content, footer (button & title) ion-‐content:
basically its the <body> tag
-‐ ion-‐list: parent container for <ion-‐item> can be used to add
styles, delete & reorder functions
-‐ ion-‐item: a list item
-‐ ng-‐repeat: loop over an array of data and fill in the template
Angular/Ionic Architecture (Template)
37. www.agritrackingsystems.comAGRI TRACKING SYSTEMS
37
Controller: GameCtrl -‐ Load Data into our gameList
Controller contains logic for interacting with the view
-‐ $scope = this
-‐ GameService.getAll() = a method on our service for getting
back all of our data
-‐ .then() = our service returns a promise with the data we
asked for
-‐ $scope.gameList = this is what we are setting our data to
so we can access it in our view
.controller('GameCtrl',
function($scope, GameService) {
GameService.getAll().then(
function(items){
$scope.gameList = items;
}
)
})
Game List
{{game.title}}
Angular/Ionic Architecture (Controller)
38. www.agritrackingsystems.comAGRI TRACKING SYSTEMS
38
Game List
Service: GameService -‐ Get Data from Datasource
Service gets and sets data from the datasource
-‐ $http = angular service to make http calls
-‐ .get = makes a GET request to our server
.service( 'GameService', function() {
return {
getAll: function(){
return $http
.get('http://localhost:3000/api/games');
}
}
})
//[{‘id’: 1, ‘title’:’Battletoads’},{‘id’: 2, ..
Angular/Ionic Architecture (Service)
41. www.agritrackingsystems.comAGRI TRACKING SYSTEMS
Agri Tracking Systems keeps track of your
farms, fields, crops, nutrient samples,
budgets all the way down to your daily
operations. Our purpose is simple, we want
to give you the power to become more
efficient by staying informed.
www.agritrackingsystems.com
Agri Mapping makes its simple to build your
maps without having to read through tons
of help guides. We provide all the
information and tools you need, and none
of the ones you don’t. And the best part is it
is accessible from anywhere!
www.agrimapping.com
OUR PRODUCTS