Home > Uncategorized > Changing the language of a Phonegap App.

Changing the language of a Phonegap App.

IMG_0033

All my iOS apps have app store descriptions in multiple languages, the download increase from this simple step alone is enormous. However, I did notice that the increase in downloads doesn’t match the increase in actual app engagement, and it’s pretty obvious why, a Russian user might be tempted to download your app from your description in Russian, but then once downloaded, can’t use the app because he doesn’t speak english.

Earlier in this blog, I listed a way to determine the user’s language by using HTTP headers, however, I thought that it’s not a great solution, since I’m relying on a third party service, which could go offline tomorrow. So, I used a better solution as follows;

function checkLanguage()
{
navigator.globalization.getPreferredLanguage(
function (language)
{
console.log(‘language: ‘ + language.value + ‘\n’);
changelanguage(language.value);
},
function () {
console.log(‘Error getting language\n’);}
);
}

This only works in the context of PhoneGap, and not in the normal web. But that didn’t matter for me. The next trick, is to test this in a real device, not the simulator, since the emulator has a bug that prevents this from happening naturally (there’s a work around via edit-scheme > options > language). But with a real iPhone to hand, it works perfectly.

What I did is created a JSON object like this;

var translations = {
“en” : {
“#line1” : “In order to use this app, you will need to install the print spooler software available for purchase at”,
“#btnBuy” : “Download Software”,
“#line2” : “You can use this app to send photos from your photo gallery to print. To send other types of files, simply email them as an attachment to [username] @printfromipad.com, where [username] is your username that you have previously set up.”,
“#line3” : “If you have any problems using this printing system, please email us at support@openmerchantaccount.com, or phone us on (0044)2871226151”,
“#btnCreateAccount” : “Register”,
“#btnLogin” : “Login”,
“.ui-title” : “Print”,
“.ui-header .ui-btn” : “Help”
},
“fr” : {
“#line1” : “Pour utiliser cette application, vous aurez besoin d’installer le logiciel du gestionnaire d’impression disponible à l’achat au”,
“#btnBuy” : “Télécharger le logiciel”,
“#line2” : “Vous pouvez utiliser cette application pour envoyer des photos de votre galerie de photos à imprimer. Pour envoyer d’autres types de fichiers, il suffit de les envoyer par courriel en pièce jointe à [nom d’utilisateur] @ printfromipad.com, où [nom d’utilisateur] est votre nom d’utilisateur que vous avez précédemment créé.”,
“#line3” : “Si vous avez des problèmes avec ce système d’impression, se il vous plaît écrivez-nous à support@openmerchantaccount.com, ou appelez-nous au (0044) 2871226151”,
“#btnCreateAccount” : “Créer un compte”,
“#btnLogin” : “Connexion”,
“.ui-title” : “Imprimer”,
“.ui-header .ui-btn” : “Aide”
},

Where you can see a JQuery selector, and the localised text; and this is applied like this

function changelanguage(lang)
{
for(var i in translations[lang])
{
var translation = translations[lang][i];
console.log(i + “->” + translation);
$(i).html(translation);
}
}

Really happy with this. The only bug I found was that the element has to be present on-screen when changeLanguage is called, so in the next version, I’ll ensure that this is called on every page load.

Advertisements
Categories: Uncategorized
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: