Gruntify your Titanium Workflow

Ti Meetup Talk 20014-11-05 (http://www.meetup.com/TitaniumNL/events/192330442/)

This presentation explains the way I personally automated my Titanium build workflow for branding white label apps using Grunt.

For sample code see: https://github.com/karaoak/TiGrunt.Sample

Transcript

1. Gruntify your Titanium Workflow
2. working @medianique @karaoak frankeijking About me
3. Working mainly with… • Laravel, MySQL, Oracle • Backbone, SASS and alotta’ JS • Titanium (since 1.6.x), Alloy (since 2013)
4. Clients we work for • SkyRadio Group
 (Titanium, Backbone, HTML5)
 SkyRadio, Radio Veronica, MyRadio • AladinFM narrowcasting 
 (Laravel, HTML5, Backbone)
 ESA, Bayer • Thieme-Meulenhoff 
 (Laravel, Backbone, Mocha, Should, Redis, socket.io)
 (+ Ant + Grunt on Jenkins CI server)
5. Why I use Grunt • Already using it in web projects • Independent of an IDE • No more tedious tasks • Less or no errors • To appcelerate my workflow • It’s JavaScript !
6. OK, but really? • Automatic ‘branding’ of white label apps • Consistent (test) APK signing • Automatic version tagging • Automatic deployments (OTA or Installr)
7. Setup Grunt • gruntjs.com/getting-started • Install node and npm via Homebrew (brew.sh) or via the new node package installer (nodejs.org/download) $ sudo npm update -g npm $ sudo npm install -g grunt-cli
8. Grunt modules I use • grunt-titanium • grunt-contrib-clean • grunt-contrib-copy • grunt-shell • grunt-template * • load-grunt-config • load-grunt-tasks • tiapp.xml • time-grunt • grunt-ftp ti-app$ npm install grunt —save-dev ti-app$ npm install grunt-titanium —save-dev
9. package.json {
 "name": "myapp",
 "version": "0.1.0",
 "description": "My Gruntified Titanium App",
 "private": true,
 "author": "Karaoak",
 "devDependencies": {
 "grunt": "~0.4.5",
 "grunt-contrib-clean": "~0.5.0",
 "grunt-contrib-copy": "~0.5.0",
 "grunt-shell": "~0.7.0",
 "grunt-template": "~0.2.3",
 "grunt-titanium": "~0.2.2",
 "load-grunt-config": "~0.10.0",
 "load-grunt-tasks": "~0.6.0",
 "tiapp.xml": "^0.2.0",
 "time-grunt": “~0.3.2”, "grunt-ftp": “~1.0.1”, "jit-grunt": "^0.8.0", "ticons": "0.10.2"
 }
 }
10. Principles • Keep app configurations DRY and in one(!) place • Keep configurations + keystores under version mgmt. • App ids and Ti SDKs should be able to differ between platforms • Enable theming of Classic Ti Apps • Automate app signing per deployType easily • Setup should be simple with little dependencies (personal flavours disclaimer)
11. How it’s set up • _builds/
 build.options.json • _config/ 
 json configurations + templates + keystores • _grunt/
 commonjs default Grunt tasks • Gruntfile.js
 jit loaded grunt config
 app context read/store (to build.options.json)
 custom tasks using: 
 stored grunt options + app context config (personal flavours disclaimer)
12. App configurations
13. Templates
14. Gruntfile.js + _grunt/
15. Gruntfile.js + custom tasks
16. developers.default.json $ ti info Fill these using the above or via iPhone Configuration Utility app
17. Custom tasks • Set the app (brand) context 
 (custom tiapp.xml, app/config.json, etc.) • Kick off iOS Simulator + Genymotion for different devices easily • Create iOS Adhoc builds and distribute these automatically • Create production IPAs + APKs
 Jarsign and zipalign by hand using Android tools 
 (via grunt-shell)
18. grunt-titanium
19. http://docs.appcelerator.com/titanium/3.0/#!/guide/ Titanium_Command-Line_Interface_Reference
20. Demo!
21. Demo #1 $ grunt tiapp —app skyradio —p ios $ grunt sim $ grunt tiapp —app veronica —p ios $ grunt sim $ grunt test —device 5 $ grunt adhoc $ grunt release $ grunt tiapp —app skyradio —p android $ grunt geny —device s4 $ grunt test —device s4 $ grunt release
22. Demo #2 $ grunt tiapp —app memory —p ios $ grunt sim —device 5s $ grunt sim —device ipad-2 $ grunt tiapp —app quiz —p ios $ grunt sim —device 5s $ grunt test —device 5 $ grunt adhoc $ grunt release $ grunt tiapp —app match —p android $ grunt geny —device s4 $ grunt test —device s4 $ grunt release
23. Alternatives • Create build recipes using Fokke’s TiNy CLI • Tony’s tiapp.xml can do more every version var ts = new Date().getTime();
 var tiapp = require('tiapp.xml').load('./tiapp.xml');
 tiapp.setProperty('build.timestamp', ts, 'string');
 tiapp.write(); Example (you add this to custom grunt taks or methods) • Use SublimeText with MattTuttle/sublime-ti-build • Use TitaniumStudio :)
24. Personal thoughts • Just like your app, your Gruntfile.js is a WiP • I don’t think there’s a BEST Grunt setup • Find and create the Grunt tasks that work for you! • You can solve any workflow issue. There is an awesome amount of npm modules available • It’s a Means, not an End
25. Questions?