2. * Who Am I? * What is Cordova? * What are Hooks? * What are Hooks written in? * What problems do they solve? * What Hooks do I use? * Demo – Hooks in Action * Q&A * Resources

3. * Gavin Pickin – developing Web Apps since late 90s * What else do you need to know? * Blog - http://www.gpickin.comhttp://www.gpickin.com * Twitter – http://twitter.com/gpickinhttp://twitter.com/gpickin * GitHub - https://github.com/gpickinhttps://github.com/gpickin * Lets get on with the show.

4. * Apache Cordova is a set of device APIs that allow a mobile app developer to access native device function such as the camera or accelerometer from JavaScript. * Combined with a UI framework such as jQuery Mobile or Dojo Mobile or Sencha Touch, this allows a smartphone app to be developed with just HTML, CSS, and JavaScript. * http://cordova.apache.org/#about

5. * And because these JavaScript APIs are consistent across multiple device platforms and built on web standards, the app should be portable to other device platforms with minimal to no changes. * In 2011 Adobe / Nitobi donated the phonegap codebase to Apache Software Foundation to be managed as an Opensource project. It was eventually renamed Cordova. * http://phonegap.com/2012/03/19/phonegap-cordova- and-what%E2%80%99s-in-a-name/

6. * Cordova includes a CLI that runs on NodeJS, to help you compile your project for different deployment platforms. * Phonegap Build is one service that allows you to build Apps without system dependent tools like Xcode (iOS)

7. * Hooks are scripts that execute when special events are emitted from the plugin, or build process. * There are a lot of hooks you can use, below is a sample * after_build / before_build * After_platform_add / before_platform_add * After_prepare / before_prepare * A full list of hooks can be found here https://github.com/apache/cordova- lib/blob/master/cordova-lib/templates/hooks-README.md

8. * Developing for multiple platforms is easier with Cordova, but there are a lot of repetitive tasks, or build steps that you can automate * Using Hooks you can simply build your own Build Process using the framework provided to you. * They can make you a more efficient developer.

9. * Hooks can be written in any programming language * BUT – Cordova highly recommends writing hooks in NodeJS to ensure the hook are cross platform. Since the Cordova CLI is written in NodeJS, they will always work. * Since your hooks will be NodeJS, you can use the power of NPM to help you write them.

10. * The most common way is to place the script in the /hooks/{event_name}/ folder * Files are executed in their alphabetical order. Since Windows and *nix systems treat aG and ag differently, I recommend prefixing with 001_ etc. * You can also define Application hooks in config.xml * You can define Plugin hooks from /plugins/…/plugin.xml

11. https://github.com/apache/cordova-lib/blob/master/cordova-lib/templates/hooks-README.md

13. * Here are a few of the hooks I use. * JS Hint Hook * Jasmine * Cordova Cleanup * Cordova Uglify

14. * JSHint is a community-driven tool to detect errors and potential problems in JavaScript code and to enforce your team's coding conventions. It is very flexible so you can easily adjust it to your particular coding guidelines and the environment you expect your code to execute in. JSHint is open source and will always stay this way. * http://jshint.com/about/ http://jshint.com/about/ * Hook - https://gist.github.com/gpickin/04a7acfc4907 f3ed27f6

15. * Jasmine is a behavior-driven development framework for testing JavaScript code. It does not depend on any other JavaScript frameworks. It does not require a DOM. And it has a clean, obvious syntax so that you can easily write tests. * http://jasmine.github.io/2.0/introduction.html * Hook - https://gist.github.com/gpickin/e6ce95a1d1bf 7c98da30

16. * Jasmine Hook is built upon the normal npm Jasmine test runner… so you can run them via the command line directly, or in this hook. * npm install jasmine * Jasmine init * Add your specs to the spec folder, and then copy the hook into the before_prepare folder and you are all set

17. * This Cordova Hook cleans up your Cordova www folder, removes those pesky OS files like: * Thumbs.db *.DS_Store. * Hook - https://gist.github.com/gpickin/218068 bf525a8f02d2a0

18. * Cordova hook that allows you to uglify or minify your apps JavaScript and CSS. It is using UglifyJS2 for JavaScript compression and clean-css to minify CSS. * Install from NPM - npm install cordova-uglify * https://github.com/rossmartin/cordova-uglify https://github.com/rossmartin/cordova-uglify * Hook - https://gist.github.com/gpickin/f23a4980b535 9ba570b1

19. * Let me show you how the JS Hint Hook will help save you time testing an app on a device with errors in your code. https://gist.github.com/gpickin/04a7acfc4907f3ed27f6 * Let me show you how to use Jasmine Hook for running your unit tests before building your app https://gist.github.com/gpickin/e6ce95a1d1bf7c98da30

20. * Let me show you how the Cordova Cleanup Hook will remove unneeded files from your platform builds. https://gist.github.com/gpickin/218068bf525a8f02d2a0 * Let me show you how to use Cordova Uglify Hook for when your building to send to the app store. https://gist.github.com/gpickin/f23a4980b5359ba570b1

21. $ cordova build ios Running command: /Users/gavinpickin/Dropbox/Apps/cstctraining/hooks/before_prepare/02_jshint.js /Users/gavinpickin/Dropbox/Apps/cstctraining Linting www/js/services/attendeeDAO.js Linting www/js/index.js File www/js/services/attendeeDAO.js has no errors. ----------------------------------------- Linting www/js/services/attendeeService.js File www/js/index.js has no errors. ----------------------------------------- File www/js/services/attendeeService.js has no errors. ----------------------------------------- Linting www/js/services/attendeeSyncService.js File www/js/services/attendeeSyncService.js has no errors. ----------------------------------------- Linting www/js/services/auditDAO.js File www/js/services/auditDAO.js has no errors.

22. $ cordova build ios Running command: /Users/gavinpickin/Dropbox/Apps/cstctraining/hooks/before_prepare/02_jshint.js /Users/gavinpickin/Dropbox/Apps/cstctraining Linting www/js/services/attendeeDAO.js Linting www/js/index.js Errors in file www/js/services/attendeeDAO.js 1:1 -> Expected an assignment or function call and instead saw an expression. -> funct ion newAttendeeDAO() { 1:6 -> Missing semicolon. -> funct ion newAttendeeDAO() { 1:7 -> Expected an assignment or function call and instead saw an expression. -> funct ion newAttendeeDAO() { 1:10 -> Missing semicolon. -> funct ion newAttendeeDAO() { 1:27 -> Missing semicolon. -> funct ion newAttendeeDAO() { ----------------------------------------- File www/js/index.js has no errors.

23. Running command: /Users/gavinpickin/Dropbox/Apps/cstctraining/hooks/before_pr epare/05_jasmine.js /Users/gavinpickin/Dropbox/Apps/cstctraining /Users/gavinpickin/Dropbox/Apps/cstctraining/www Running Jasmine Tests /Users/gavinpickin/Dropbox/Apps/cstctraining/www/spec/atte ndeeServiceSpec.js Started FFFFF Failures: 1) Player should be able to play a SongeServiceSpec.js:10:5)

24. Failures: 1) Player should be able to play a Song Message: ReferenceError: newAttendeeService is not defined Stack: ReferenceError: newAttendeeService is not defined at Object. (/Users/gavinpickin/Dropbox/Apps/cstctraining/www/spec/att endeeServiceSpec.js:6:23) Message: ReferenceError: player is not defined Stack: ReferenceError: player is not defined

25. Running command: /Users/gavinpickin/Dropbox/Apps/cstctraining/hooks/before_pr epare/05_jasmine.js /Users/gavinpickin/Dropbox/Apps/cstctraining /Users/gavinpickin/Dropbox/Apps/cstctraining/www Running Jasmine Tests /Users/gavinpickin/Dropbox/Apps/cstctraining/www/spec/login ServiceSpec.js Started … 3 specs, 0 failures Finished in 0.006 seconds

26. Running command: /Users/gavinpickin/Dropbox/Apps/cstctraining/ hooks/before_prepare/01_cordovacleanup.js /Users/gavinpickin/Dropbox/Apps/cstctraining ----------------------------------------- Cordova Cleanup Starting

27. Running command: /Users/gavinpickin/Dropbox/Apps/cstctraining/ hooks/before_prepare/01_cordovacleanup.js /Users/gavinpickin/Dropbox/Apps/cstctraining ----------------------------------------- Cordova Cleanup Starting Removed file www/js/.DS_Store

28. Running command: /Users/gavinpickin/Dropbox/Apps/cstctraining/hooks/after_prepare/uglify.js /Users/gavinpickin/Dropbox/Apps/cstctraining cordova-uglify will always run by default, uncomment the line checking for the release flag otherwise uglifying js file /Users/gavinpickin/Dropbox/Apps/cstctraining/platforms/ios/www/js/index.js minifying css file /Users/gavinpickin/Dropbox/Apps/cstctraining/platforms/ios/www/css/index.css minifying css file /Users/gavinpickin/Dropbox/Apps/cstctraining/platforms/ios/www/css/jquery.mo bile-1.4.2.min.css minifying css file /Users/gavinpickin/Dropbox/Apps/cstctraining/platforms/ios/www/css/jquery.mo bile.external-png-1.4.2.min.css minifying css file /Users/gavinpickin/Dropbox/Apps/cstctraining/platforms/ios/www/css/jquery.mo bile.icons-1.4.2.min.css encountered a.png file, not compressing it encountered a.svg file, not compressing it

29. What are some other good ideas for making cordova hooks?

30. * Any questions?

31. * Copy Icons / Splashscreens, Replace Text Depending on Environment, Add Plugins Source: Holly Schinsky – DevGirl – Adobe Evangelist http://devgirl.org/2013/11/12/three-hooks-your-cordovaphonegap- project-needs/ http://devgirl.org/2013/11/12/three-hooks-your-cordovaphonegap- project-needs/ * JS Hint, Cordova Uglify Source: Nic Raboy http://ionicframework.com/blog/minifying-your-source-code/ http://ionicframework.com/blog/minifying-your-source-code/ * Dan Moore - Hooks and Cordova http://www.mooreds.com/wordpress/archives/1197 http://www.mooreds.com/wordpress/archives/1197 * Build Configurations in Cordova using Hooks http://intown.biz/2014/05/13/build-configurations-in-cordova-using- hooks/ http://intown.biz/2014/05/13/build-configurations-in-cordova-using- hooks/