localising an appinventor app

LRC Summer School 2012

Localising an AppInventor App

Lucía Morado Vázquez – Chris Exton – Aram Morera Mesa



Overview

Introduction

Hands-on Session

Note: This session builds on a previous session, where an application was developed using the MIT AppInventor Platform. Although instructions are given so you can carry out this activity standalone, we highly recommend you to take one of the AppInventor beginners tutorials to get familiar with the platform prior to the commencement of this course. Tutorials can be found here: http://beta.appinventor.mit.edu/learn/tutorials/index.html

http://beta.appinventor.mit.edu/learn/tutorials/index.html













Purpose

Localise an App Inventor Mobile Application (into another language).



Roles

Localisation Engineer

Translator

QA Tester



Tools

Notepad++

To explore the source code.

To introduce some minor changes.

SDL Trados Studio 2009

To extract the localisable text.

To translate the text.

AppInventor Platform

To internationalise the code.

To compile the resulting source code.

To test the application.



Workflow

1. Explore the application.

2. Explore the source code.

3. Evaluate different localisation strategies.

4. Extract the localisable text (filters).

5. Translate.

6. Merge and compile the new source code.

7. Test the application.



Warning!

Source Code Ahead!!

If you get lost, ask me or Aram.


Explore the application



If you have not finished the previous section activity or if you start this session from scratch you will need to:

-Download the code of the application from www.localisation.ie/lrcsummer/lrcquiz.zip.

-Upload it to the AppInventor platform, open the Blocks Editor and create an Emulator to explore the application.

1. Download the application

http://www.localisation.ie/lrcsummer/lrcquiz.zip




Identify the localisable content

1. Explore the application


Explore the source code



2. Explore the source code

-Download the source code of the application (you might skip this step if you have already get the code from the LRC

website). My Projects>More Actions>Download Source



Unzip the file





Make a backup copy!!!




Explore the three folders and their content:

assets it contains the resource files (images, sounds, etc.)





youngandroidproject

it contains a properties file with the basic information of the project.

Package and class name





src it contains the source code in two files:

screen1.blk

screen.scm



Study the source code

screen1.blk

it is a XML file.



Study the source code

screen1.jsn

it is a JSON file.


Evaluate different localisation strategies



3. Explore localisation strategies

Modify the code in AppInventor

Modify the code in an advanced text editor (Notepad++)

Modify the code in a CAT Tool




Modify the code in AppInventor

Context No Spellchecker No Translation Memory Monolingual Format




Modify the code in Notepad++

Easy access No Spellchecker No Translation Memory Monolingual Format Danger of Code Damage!




Modify the code in a CAT tool

Bilingual Format

Spellchecker

Translation Memory

Protected code

No context L10n Engineering – adhoc filters


Extract the localisable text (filters)



4. Extract the localisable text

In the XML file, the localisable text is in the same label of other internal code. We need to internationalise the code first to protect the internal code.

-Open the Blocks Editor in AppInventor:




-Introduce the token # before each translatable sentence:




-Save and download again the code.




-Check that the tokens are there with Notepad++




-Open SDL Trados Studio 2009.

SDL Trados does not recognise our file types. We have to create special filters for them.

-Go to Tools>Options.




Filter for the blk file

-Create a new File Type





-Add the following information:





-Select the second option and browse the blk file:





-Edit the element “Label” as “Always Translatable”

-Edit all the other elements as “Not Translatable”





-Click on Next and Finish.




Filter for the scm file

-Create a new File Type





-Select “Regular Expression Delimited Text”.





-Add the following information:





-Click on Next and Finish:





-Click on “Structure patterns” in the “AppScm” Filter.

-Delete the existing pattern.





-Add the following patterns:


Translate



5. Translate

-Create a new Project

-Add a name to your project and choose your source and target languages.



5. Translate

-Add the two files (Screen1.blk & Screen1.scm).

-Remember to add the modified one with the # tokens.



5. Translate

-Click on Next.

-Create a Translation Memory.



5. Translate

-Click on Next, Next and Next.

-Click on Finish.



5. Translate

-Click on the first file to start translating it.



5. Translate

-Go to Translation>Copy All Source to Target



5. Translate

-Go to View>Toolbars>Display Filter



5. Translate

-Insert the # and click in “In source”



5. Translate

-Translate!!!



Translate

CTRL + ENTER Confirm and move to next unconfirmed segment. CTRL + ALT + ENTER Confirm and move to next segment.



5. Translate

-Translate the scm file.



5. Translate

-Finalise the process.



5. Translate

The final touch:

-Open the blk file with Notepad++ and click in Format>Encode in UTF-8 without BOM.

-Save the file.


Merge and Compile



6. Merge and Compile

-Create a backup copy.

-Place the new files in their right place.




-Create a zip file with the three folders.

-Give it a different name.




-Upload the localised project to AppInventor.

-Cross your fingers!


Test the application



6. Test the application

-Open your new project.

-Open the Blocks Editor and create a new Emulator (or in your phone).

-Test that everything works and it is in its place.



Aknowlegments

Special thanks to Asanka Wasala and Emilio Rodríguez Vázquez de Aldana for their help.

References:

MIT AppInventor Tutorials: http://beta.appinventor.mit.edu/learn/tutorials/index.html

Images: Helmet: http://www.flickr.com/photos/toolstop/4420180838/sizes/z/in/photostream/ Lego Rescue: http://www.flickr.com/photos/mac_filko/5490943037/sizes/z/in/photostream/ Lego Engineer: http://www.flickr.com/photos/mac_filko/5490950267/sizes/z/in/photostream/ Lego Translator: http://www.flickr.com/photos/mac_filko/5491550078/sizes/z/in/photostream/ Lego Caution: http://www.flickr.com/photos/henriquev/5415139520/sizes/z/in/photostream/

Android Logo: http://www.flickr.com/photos/incredibleguy/5979551591/lightbox/


Thank you!!

[email protected] – [email protected] – [email protected]

localising an appinventor app

Documents