Into The Box Notes: Building Mobile Apps w/ Ionic and ColdBox - Scott Steinbeck

June 18, 2016

(Scott’s talk was very well done, and perfectly timed, as I was giving an Angular/Ionic deep dive the following day at Dev.Objective.  Not only was Scott’s talk well organized and full of useful information, it gave me a chance to sanity check the content for my presentation one last time.  As I did end up using a little of his content in my talk, I (voluntarily and happily) included his name in my slide deck. Thanks again, Scott!)

Project folders -
/www, main code folder
/scss, your (optional) SASS stuff
the rest are boilerplate for PhoneGap and plugins
/resources - cuts down on size/number of splash screens, etc, that you have to build for all the phone resolutions

/www/img - local images for use inside of the app

<ion-view> controller is available anywhere within this tag’s content

$http.get( url ) — returns a promise, so it’s easier to use than a callback

testing —
most can be done in the browser

plugins - camera, file upload, network, etc
need to use emulators
ionic makes it easy
can “ionic emulate iOS” and it brings up the simulator for you and boots the app

syncing between local and web databases
websqlsync.js - mysql specific? (WAS more developed than persistence.js, maybe they’re more even now?)
persistence.js - database agnostic

websqlsync - has init() you run to load all the tables, then it runs the sync update. can use “lastUpdatedDate” column in the tables to figure out which columns are newer and where the sync needs to go. caveat: can’t pass thru a “deleted” row because it’s gone, so need to do “soft deletes” or come up with something else to work around this.

firebase - another nosql option for syncing.

couchDB - also nosql solution

websql - deprecated, w3c is not using it any more

if you want to support older devices, what to do?

phone gap sql lite - good replacement for web sql

lovefield.js - polypill for websql native stuff

(iTerm for OSX terminal replacement)

create app from scratch
ionic start itbl-live-demo sidemenu

driftyco - creators of ionic

#/app/search in URL
matches pattern for router

app.js
angular.module( [ add dependencies here ] )
enables cordova plugins that aren’t there by default

.abstract = true
that URL path doesn’t actually exist, it’s just a placeholder
can put “parent logic” in the controller and then the ‘states’ are where the different “branches” go

backbutton history built-in

all the panes in the app are cached. no jitteriness when going back/forth between them

github.com/jclausen/itb/demo for API server demo code (ColdBox)

ng-resource
to do your REST-esqe API things
$resource
.query = GET
.get = GET
.update = UPDATE
etc

set timeout / scope apply
ascyc eval - the “thing” inside the function has changed, so update it the next time the page renders.