Offline Mobile Apps

With Ionic, MobileCaddy & Salesforce

Todd Halfpenny - @toddhalfpenny

Only the Paranoid Apps Survive

MORE(s) Design

Mobile Users

Offline first

Robust

Efficient

Shared / Seperated

Our App

JavaScript Ionic SPA

Accounts & Contacts

MobileCaddy

Our Process

Define our app on Salesforce

Create our JS project

List our Accounts

Account Detail Page

List our Contacts

Deploy

Run on a device

Platform Config

Define our Application

Mobilise our Tables

Initiate our JS Project

Create our JS Project


						mobilecaddy new ionic-shell myApp

Run it up locally


						mobilecaddy serve

List our Accounts

MVC

Encrypted SmartStore

HTML/CSS

JavaScript

List our Accounts

MVC

Template





  

    

      
        {{::account.Name}}

List our Accounts

MVC

Template

Tab

List our Accounts

MVC

Template

Tab

Routing


// app.js

.state('tab.accounts', {
  url: '/accounts',
  views: {
    'accounts-tab': {
      templateUrl: RESOURCE_ROOT +  'templates/accounts.html',
      controller: 'AccountsCtrl',
      controllerAs: 'vm'
    }
  }
})

List our Accounts

MVC

Template

Tab

Routing

Controller


// account.controller.js

$ionicLoading.show(...);

AccountService.all().then(function(accounts) {
  	vm.accounts = accounts;
  	if (accounts.length > 0) $ionicLoading.hide();
}).catch(function(e) {
  	$ionicLoading.hide();
  	logger.error('error', e);
});

List our Accounts

MVC

Template

Tab

Routing

Controller

Service


// accounts.service.js

/**
 * @return {promise} Resolves to an array of accounts
 */
function all() {
  return new Promise(function(resolve, reject) {
    devUtils.readRecords('Account__ap', []).then(function(resObject) {
        resolve(resObject.records);
    }).catch(function(resObject){
        reject(resObject);
    });
  });
}

List our Accounts

MVC

Template

Tab

Routing

Controller

Service

initialSync


// app.js

SyncService.initialSync();


// sync.service.js

var appTables = [ 'Account__ap', 'Contact__ap' ];

function initialSync() {
  devUtils.initialSync(appTables).then(function(res){
    $rootScope.$emit('syncTables', {result : "InitialLoadComplete"});
    resolve(res);
  });
}

Accounts Details Page

Account Details





  	
    	{{::vm.account.Name}} Contacts

Accounts Details Page

Account Details


// account.controller.js

AccountService.get(id).then(function(account) {
		vm.account = account;
}, function(e) {
		console.error('error', e);
});


// accounts.service.js

function get(id){
	return new Promise(function(resolve, reject) {
	  var smartSql = "SELECT * from {Account__ap}
	  	WHERE {Account__ap:Id} = '" + id + "'";
	  devUtils.smartSql(smartSql).then(function(resObject) {
	    resolve(resObject.records[0]);
	  });
	});
}

List our Contacts

Account Details

Contact List






  
    {{::contact.Name}}
    {{::contact.Title}}
    
    
    
      Edit

Plus add our controller and our service

Edit our Contacts

Account Details

Contact List

Edit


// account.controller.js

var updatedContact = {
		'Id': contact.Id};
		'Email': contact.Email
	};

ContactsService.update(updatedContact).then(function(res) {
  	$ionicListDelegate.closeOptionButtons();
  	SyncService.syncTables(['Contact__ap']);
})