Turned out to be a few relatively simple bugs, but together they caused enough of a hiccup that I was left scratching my head for a bit. So if anyone else out there finds themselves in the same boat, hopefully these tips will help.
- In the original gist of index.html that’s in the tutorial, there’s a missing bracket (‘
<input type="submit" value="Login" onClick="app.loginWithEvernote()"</input>
<input type="submit" value="Login" onClick="app.loginWithEvernote()"></input>
If you’re not seeing a button show up on the startup screen, that this could be why.
- In the original gist of app.success that’s in the tutorial, lines 62-68 are incorrect. There’s an extra ‘
}‘ on line 64. If you see an error message like
Err: Expecting ")"or something like that, then this might be what’s causing it.
- In the original gist of app.success that’s in the tutorial, it shows an
ifloop inside the
loadstarteventlistener that spans lines 25-36. In actuality, there are some extra ‘
}‘ on lines 34 & 35 and there’s a couple of missing ‘
}‘ later on too. When you make the necessary changes, the
ifloop inside the
loadstarteventlistener should actually include lines 25-48. If you see error messages like
Err: Cannot read property '0' of undefined, then this might be what’s causing it. With the original (buggy) version, the
else ifpart was outside of the
forloop, which is where
var ywas defined. Thus when you try to call
yvariable is out of scope and you get that error message.
To make it easier for folks, I’m including a gist of
app.success. I forked it off of Evernote’s buggy gists, so you can compare the two, if you like:
Here’s another tip: if you notice that the
loadstart event is not triggering (which is easy to test by just commenting out the
InAppBrowser plugin to your PhoneGap app. PhoneGap doesn’t make it super obvious that you need to first include this plugin, then build the app (so that your
config.xml is generated correctly). But, by doing so, you’ll have the necessary web hooks and should be able to detect the
loadstart event. You can find more info here. (Note that this links to v3.1.0, which is the version I tested the Evernote’s JS tutorial with.)
cordova plugin add org.apache.cordova.inappbrowser cordova build # generates config.xml cordova emulate android # I'm doing this as a android project
Granted, if I had just started with Evernote’s sample code in GitHub, then maybe I wouldn’t have had to debug these things (since the code in the GitHub repo is correct – I tested it). However, I wanted to use the latest versions of PhoneGap/cordova (the GitHub version is from v2.4.0; I’m using v3.1.0). Plus, I kind of feel that if you’re going to put a tutorial online for your framework and actually want people to use it, then you should make sure your documentation is kept up-to-date!