Category: cordova

Child Car Seat Tester Android App

Posted on by John McLear

I came to the conclusion that an App solution for my Child Car Seat problem would be the path of least resistance with the most immediate impact. This app is free, super simple to use and supports different age ranges.

I only spent an hour or so in total developing the app so please forgive me when you encounter bugs. When you do encounter bugs feel free to report & fix them yourself as I uploaded all of the source code and released the project under the Apache 2 license (open source).

Grab the Child Car Seat Angle Tester App on the Play store


Child Seat Angle Tester Download

Adding i18n to a Cordova App

Posted on by John McLear

i18n (Internationalization) in applications roughly means adding support for translations and other languages.  In this blog post I will talk you through a general approach to implementing i18n in Cordova Apps.  If your app isn’t open-source, move along, the 90s is on another website.

As Cordova apps are written in HTML/CSS/JS we can easily leverage existing web platforms and services to provide i18n at break-neck speeds.

TLDR Services/frameworks used:
* Translatewiki to provide translations
* Marcel’s html10n i18n implementation
* Handlebars for templating
* Etherpad implementation of detecting locale/language also written by Marcel

Implementation steps

* Ensure your app fulfills Translatewiki’s requirements (Open source etc)
* Talk to Translate / Internationalization team at Wikimedia foundation before creating Gerrit commit
* Gerrit commit to TranslateWiki adding support for your App.
* Include handlebars and html10n libraries in your app
* Modify your HTML putting markup in handlebar script tags
* Move your text strings into locales files.
* Include a handlebars html10n render helper
* Use the Etherpad implementation of detecting locale/language* Give someone at WMF access to commit to your Repo

Sit back and enjoy..

Once you have completed your implementation and it’s approved by the WMF the WMF translation team will translate all of your strings and commit them back to your repo. You might want to provide the WMF team with the ability to see each of your strings in situ in a browser, this means providing a mechanism to fake Cordova events..

Summary

This implementation is basically a straight copy of how we handle i18n in Etherpad, it’s pretty robust and clean to implement. All in all a complete refactor of the NFC Ring Control App while implementing i18n took about a week of full time commitment, well worth doing as now the larger community can provide translations which if I was to do hans solo would take months 🙂

Cordova Windows Phone 8 Exit Application

Posted on by John McLear

If you have a Phonegap/cordova app that goes from page1.html to page2.html then follows a link back to page1.html the standard backbutton behavior wont exit the app.

Page1 >> Page 2 >> Page 1 — Windows Phone will take you to page 2 instead of exiting the app. It’s expected behavior but it’s kinda poorly documented..

Anyway I searched around for ages but didn’t find a fix that worked for me..

Diff friendly folks see the commit that includes this fix

TLDR of how I fixed this is to use a JS value to track which page I’m on..

IE in page1.html you could have..

var currentPage = "index";

Then in your app.deviceready function include..

if(currentPage == "index"){
  history.go(-(history.length-9999));
  document.addEventListener("backbutton", handleBack, true);
}else{
  document.addEventListener("backbutton", handleBack, false);
}
function handleBack(){
  // handle other logic here such as handling the back events from page2 to page1..
}

The real magic here is history.go(-(history.length-9999)) which basically tells the history stack to reset. Also the true statement on addEventListener allows the original registered event to fire (Native back button)..

Anyway give it a try and let me know if it works for you.

My first Cordova App

Posted on by John McLear



Well it’s been an interesting 30 or so days. Among other things I have been attempting to build a mobile app with Apache Cordova, an open source tool for writing HTML/JS/CSS and deploying to most popular mobile operating systems.

At first development looked like they would take a few hours, mostly because I was using native plugins and building using Phonegap build, a free(for open source) build service provided by Adobe. Yep.. Adobe being the good guys, impressive 🙂 I couldn’t have been more wrong…

PhoneGap Vs Cordova

PhoneGap and Cordova are not the same thing, I’m going to talk about Cordova here. The reason being is that Phonegap Build could not be used as it didn’t have support for the phonegap-nfc plugin. If I was doing a project that didn’t depend on phonegap-nfc development would have been a lot easier and quicker.

So the first takeaway is if you are building a simple app that will use phonegap build supported plugins then use phonegap build, you will have way more fun.

Cordova is horribly fragmented

The plugin system is broken, badly. I had some majorly catastrophic few weeks just trying to bring the phonegap-nfc plugin into my project using cordova-cli. I “solved” this by getting someone else to build using cordova-cli 2.7.0. Various things were to blame here but eventually I settled on using Eclipse (an IDE I really dislike) and things got relatively stable to the point where I was able to use a modified BarcodeScanner branch to introduce new plugin functionality.

I want to be clear about how badly broken things are here though.. The plugin spec/documentation is near non existent, in fact only Adobe internal guys have it at the point of me writing this. Thankfully the Adobe guys took a little time out to help me get things working.. Good guy Adobe!

Debug tools

Debugging Cordova is horrible assuming you actually get past the 50 or so barriers to installation most of the errors messages are ambiguous, that’s if you get one.. Expect to see a lot of “Error is Null” or “File cannot be found” Exception errors.. To get around these you will basically need to do lots of going forward/backward and iterating in small steps, testing / compiling each time you make a change..

I ended up using Weinre for improving styling and issuing debug commands and I used logcat/eclipse console for compile / JS errors. Weinre has a weird issue where if an error happens it blocks future JS execution so never actually reports the error back to your remote console, pretty insane and creates a fair amount of pain until you are used to it. logcat’s filtering functionality is really broken and as my crappy LG phone throws an error every few MS that ends up spamming my logcat which makes spotting application errors pretty difficult.

An amazing community

The Cordova community and guys on IRC were amazing, really pulling me through some really challenging times.

Starting to hate Eclipse less

Using eclipse is horrible but it gets less bad once you get used to it. If you are familiar, using git behind your file structure but .gitignoring your bin folders will save you a fair amount of pointless data. In general git will save you a lot of pain though, see what I mentioned above about doing lots of small iterations and testing each one..

Mobile Dev is slow until it works

Until you have Cordova setup and your plugins working correctly things will be an uphill struggle but once you get everything setup you can quickly use your favorite JS development tools to quickly integrate new modules/functionality and that’s really when things start to make a lot of sense with cordova. I actually found myself enjoying the last 2 days of this project (yep ~28 days getting a working Android platform and 2 days actually building the app), I’m not looking forward to doing other platforms though..

Cordova in the future

Cordova 3 is going to be exciting, the move away from plugins and towards features should ensure plugin developers actively maintain their code meaning that more plugin should install with very little friction. I’m certainly going to be sticking with Cordova and will use it again in future projects. I think July/August time we can see plugin support stabilizing and that’s when things should get really interesting 🙂



Your system does not meet the requirements to create android projects: undefined

Posted on by John McLear

Cordova platform add android errors with

Your system does not meet the requirements to create android projects: undefined

Did you remember to

chown -R YOURUSERNAMEHERE /usr/local/lib/node_modules/cordova

You can check with..

ls -lsh /usr/local/lib/node_modules/cordova

You should see your username, not root..

If so..
Let’s do a quick update of Cordova:

cordova -v
# review the version you are at 
npm update cordova
cordova -v
# review the new version

Let’s make sure android works and the path is set to the android binary:

android

This brings up the Android SDK Manager.

Test an emulator by hitting up:
Tools > Manage AVDS, creating an image then hit Start. If your Android emulator works then continue, else something is up with your ADT/SDK deployment

Open up a CLI, type:

export | grep PATH

Make sure your Android SDK platform-tools and tools folders are available in the PATH variable.

Going okay? Let’s update the Android SDK

android update sdk

Now try visit your cordova app folder and try

cordova platform add android

Still no luck?
Try using the master2 branch of the cordova-cli repo *Warning, this is dangerous.

cd ~
git://github.com/apache/cordova-cli.git
cd ~/cordova-cli
git checkout master2
sudo npm install -g
exit
cordova -v

The above should output a new cordova version #

Post a comment! 🙂