Presented at dev.Objective() http://www.devobjective.com May 15, 2015 1:45 PM - 2:45 PM More info and resources related to presentation available here http://www.gpickin.com/devobj2015/cordovahooks/ Working in the web world, we have workflows and tools we are used to. We edit, save f5 reload to test our work as we go. Working with mobile, even Hybrid Mobile, is a very different workflow. Cordova lets us build hybrid apps but how do you test them, how do you interface with the Cordova build process, how do you debug. This session helps you go from "hello world" demo, to a professionally built app. Attendees will get the following out of the session: Learn about Cordova hooks and how to use them Integrate js-hint into prepare / build process for code validity Integrate testing into prepare / build process Learn to debug a Cordova Hybrid Mobile app Look at some other hooks and tools useful for your Cordova app. Gotchas from real world experience It would be useful if you have looked at, or built a hello world demo, with Cordova or PhoneGap.

1. *

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.com
* Twitter – http://twitter.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 yu 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. *
<hook type="before_build" src="scripts/appBeforeBuild.bat" />
<hook type="before_build" src="scripts/appBeforeBuild.js" />
<hook type="before_plugin_install" src="scripts/appBeforePluginInstall.js" />
<platform name="wp8">
<hook type="before_build" src="scripts/wp8/appWP8BeforeBuild.bat" />
<hook type="before_build" src="scripts/wp8/appWP8BeforeBuild.js" />
<hook type="before_plugin_install" src="scripts/wp8/appWP8BeforePluginInstall.js" />
</platform>
<platform name="windows8">
<hook type="before_build" src="scripts/windows8/appWin8BeforeBuild.bat" />
<hook type="before_build" src="scripts/windows8/appWin8BeforeBuild.js" />
<hook type="before_plugin_install" src="scripts/windows8/
appWin8BeforePluginInstall.js" />
</platform>
https://github.com/apache/cordova-lib/blob/master/cordova-lib/templates/hooks-README.md

12. *
<hook type="before_plugin_install" src="scripts/beforeInstall.js" />
<hook type="after_build" src="scripts/afterBuild.js" />
<platform name="wp8">
<hook type="before_plugin_install" src="scripts/
wp8BeforeInstall.js" />
<hook type="before_build" src="scripts/wp8BeforeBuild.js" />
</platform>

13. *
* Being new to NodeJS most of the hooks I use
currently are ones I have found online… with minor
tweaks.
* JS Hint Hook
* Cordova Uglify
* Work In Progress
* Jasmine for Unit Testing
* Hook for Splash and Icon Creation

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/
* Hook - https://gist.github.com/gpickin/
04a7acfc4907f3ed27f6

15. *
* 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
* Hook - https://gist.github.com/gpickin/
f23a4980b5359ba570b1

16. *
* 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 Cordova Uglify Hook
for when your building to send to the app store.
https://gist.github.com/gpickin/f23a4980b5359ba570b1

17. *
$ 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.

18. *
$ 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.

19. *
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.mobile-1.4.2.min.css
minifying css file /Users/gavinpickin/Dropbox/Apps/cstctraining/platforms/ios/
www/css/jquery.mobile.external-png-1.4.2.min.css
minifying css file /Users/gavinpickin/Dropbox/Apps/cstctraining/platforms/ios/
www/css/jquery.mobile.icons-1.4.2.min.css
encountered a .png file, not compressing it
encountered a .svg file, not compressing it

20. *
* Any questions?
* Any recommendations for improving this talk?

21. *
* 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/
* JS Hint, Cordova Uglify
Source: Nic Raboy
http://ionicframework.com/blog/minifying-your-source-code/
* Dan Moore - Hooks and Cordova
http://www.mooreds.com/wordpress/archives/1197