MobileCaddy Shell App - Angular/Ionic

Overview

This is the basic shell application built with Angular JS and the Ionic Framework. The idea of the MobileCaddy shell applications are to give developers a barebones starting block in getting building hybrid mobile applications with MobileCaddy.

Getting Started

• Get the code and the supporting node and packages. The following depencies are needed (For detailed instructions see the Getting Started Guide);
• npm (Version 3+ is supported by default - See the guides for assitance with lower versions)
• grunt-cli
• ruby
• sass

The code inlcudes a couple of dummy tables in the sync.service. These help with unit testing passing (for us) and give the dev something to base their code on. Other chunks of potentially useful code have been included and commented out to help the dev get started.

• Download the zip and unzip

mv shell-ionic-master shell-ionic
cd shell-ionic

What you get (prior to running any installs/grunt tasks)

├── apex-templates		## Templates for the platform's startpage and cache manifest
├── Gruntfile.js      ## Defines our task automation
├── mock              ## Platform mock responses can go in here
├── package.json      ## The node package file and core app configuration
├── README.md         ## This file
├── scss              ## Where you do your SCSS
├── tests             ## unit tests etc
└── www               ## Where you do your coding
    ├── css
    ├── img
    ├── index.html    ## This is used locally only
    ├── js
    ├── lib
    └── templates

• Install the required packages and dependencies (note: you might need sudo npm install below)

npm install
grunt devsetup

• Set the "sf_mobile_application" value in packag.json to match that as per the Mobile Application value for the app defined on Salesforce.com. This will be a value such as "MAP-0000002"

The app can be started using this command (that uses the Mobilecaddy CLI) and should be accessible on http://localhost:3030/www/, though a browser tab should be opened automagically for you.

mobilecaddy serve

The Codeflow control panel for your application should be availble on http://localhost:3030/codeflow/.

Task automation

The Grunt config (out of the box) offers the following commands

• grunt devsetup : This should be run once following npm install command. It will copy dependency files over into the correct place in your app
• grunt serve : This runs the connect and watch tasks below.
• grunt connect : This will start a server up so you can run your app in the browser
• grunt watch : This will watch your template files, JS and SCSS files for changes. And will run will depending on the type of file that changed, run JSHint, SASS compilation and will create a .zip file containing your app. You JS will be unminified in this archive to aid debugging. Any SCSS changes will prompt new CSS and cause live reload of these into your browser.
• grunt unit-test : run the karma unit tests
• grunt dev : This runs JSHint, SASS compilation and will create a .zip file containing your app. You JS will be unminified in this archive to aid debugging.
• grunt prod : This will do the same as grunt dev but your JS will be minified in the output archive.

Testing

Unit Tests

Unit tests should be in tests/<Controllers | Services>* and can be run with this

grunt karma

Test code coverage is handled by karma-coverage, results are in the tests/coverage directory.

End2End Tests

e2e tests can be run with protractor. This may need to be installed if you haven't got it already;

npm install -g protractor

You may also need to install/update the webdriver

webdriver-manager update --standaloneUpdating selenium standalone

To run the tests;

webdriver-manager start

... and in another prompt

protractor tests/protractor.config.js

Deploying for Production

• Uncomment the line $compileProvider.debugInfoEnabled(false); in the www/js/app.js file
• Run grunt prod from the command prompt. This creates a minified version
• Without saving anymore files run the "Deply to Salesforce" from within the app.