Localising an AppInventor App
Transcript of Localising an AppInventor App
LRC Summer School 2012
Localising an AppInventor App
Lucía Morado Vázquez – Chris Exton – Aram Morera Mesa
Localising an AppInventor App
LRC Summer School 2012
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
Localising an AppInventor App
LRC Summer School 2012
Purpose
Localise an App Inventor Mobile Application (into another language).
Localising an AppInventor App
LRC Summer School 2012
Roles
Localisation Engineer
Translator
QA Tester
Localising an AppInventor App
LRC Summer School 2012
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.
Localising an AppInventor App
LRC Summer School 2012
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.
Localising an AppInventor App
LRC Summer School 2012
Warning!
Source Code Ahead!!
If you get lost, ask me or Aram.
LRC Summer School 2012
Explore the application
Localising an AppInventor App
LRC Summer School 2012
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
Localising an AppInventor App
LRC Summer School 2012
Identify the localisable content
1. Explore the application
LRC Summer School 2012
Explore the source code
Localising an AppInventor App
LRC Summer School 2012
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
Localising an AppInventor App
LRC Summer School 2012
Unzip the file
2. Explore the source code
Localising an AppInventor App
LRC Summer School 2012
2. Explore the source code
Make a backup copy!!!
Localising an AppInventor App
LRC Summer School 2012
2. Explore the source code
Explore the three folders and their content:
assets it contains the resource files (images, sounds, etc.)
Localising an AppInventor App
LRC Summer School 2012
2. Explore the source code
Explore the three folders and their content:
youngandroidproject
it contains a properties file with the basic information of the project.
Package and class name
Localising an AppInventor App
LRC Summer School 2012
2. Explore the source code
Explore the three folders and their content:
src it contains the source code in two files:
screen1.blk
screen.scm
Localising an AppInventor App
LRC Summer School 2012
Study the source code
screen1.blk
it is a XML file.
Localising an AppInventor App
LRC Summer School 2012
Study the source code
screen1.jsn
it is a JSON file.
LRC Summer School 2012
Evaluate different localisation strategies
Localising an AppInventor App
LRC Summer School 2012
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
Localising an AppInventor App
LRC Summer School 2012
3. Explore localisation strategies
Modify the code in AppInventor
Context No Spellchecker No Translation Memory Monolingual Format
Localising an AppInventor App
LRC Summer School 2012
3. Explore localisation strategies
Modify the code in Notepad++
Easy access No Spellchecker No Translation Memory Monolingual Format Danger of Code Damage!
Localising an AppInventor App
LRC Summer School 2012
3. Explore localisation strategies
Modify the code in a CAT tool
Bilingual Format
Spellchecker
Translation Memory
Protected code
No context L10n Engineering – adhoc filters
LRC Summer School 2012
Extract the localisable text (filters)
Localising an AppInventor App
LRC Summer School 2012
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:
Localising an AppInventor App
LRC Summer School 2012
4. Extract the localisable text
-Introduce the token # before each translatable sentence:
Localising an AppInventor App
LRC Summer School 2012
4. Extract the localisable text
-Save and download again the code.
Localising an AppInventor App
LRC Summer School 2012
4. Extract the localisable text
-Check that the tokens are there with Notepad++
Localising an AppInventor App
LRC Summer School 2012
4. Extract the localisable text
-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.
Localising an AppInventor App
LRC Summer School 2012
4. Extract the localisable text
Filter for the blk file
-Create a new File Type
Localising an AppInventor App
LRC Summer School 2012
4. Extract the localisable text
Filter for the blk file
-Add the following information:
Localising an AppInventor App
LRC Summer School 2012
4. Extract the localisable text
Filter for the blk file
-Select the second option and browse the blk file:
Localising an AppInventor App
LRC Summer School 2012
4. Extract the localisable text
Filter for the blk file
-Edit the element “Label” as “Always Translatable”
-Edit all the other elements as “Not Translatable”
Localising an AppInventor App
LRC Summer School 2012
4. Extract the localisable text
Filter for the blk file
-Click on Next and Finish.
Localising an AppInventor App
LRC Summer School 2012
4. Extract the localisable text
Filter for the scm file
-Create a new File Type
Localising an AppInventor App
LRC Summer School 2012
4. Extract the localisable text
Filter for the scm file
-Select “Regular Expression Delimited Text”.
Localising an AppInventor App
LRC Summer School 2012
4. Extract the localisable text
Filter for the scm file
-Add the following information:
Localising an AppInventor App
LRC Summer School 2012
4. Extract the localisable text
Filter for the scm file
-Click on Next and Finish:
Localising an AppInventor App
LRC Summer School 2012
4. Extract the localisable text
Filter for the scm file
-Click on “Structure patterns” in the “AppScm” Filter.
-Delete the existing pattern.
Localising an AppInventor App
LRC Summer School 2012
4. Extract the localisable text
Filter for the scm file
-Add the following patterns:
LRC Summer School 2012
Translate
Localising an AppInventor App
LRC Summer School 2012
5. Translate
-Create a new Project
-Add a name to your project and choose your source and target languages.
Localising an AppInventor App
LRC Summer School 2012
5. Translate
-Add the two files (Screen1.blk & Screen1.scm).
-Remember to add the modified one with the # tokens.
Localising an AppInventor App
LRC Summer School 2012
5. Translate
-Click on Next.
-Create a Translation Memory.
Localising an AppInventor App
LRC Summer School 2012
5. Translate
-Click on Next, Next and Next.
-Click on Finish.
Localising an AppInventor App
LRC Summer School 2012
5. Translate
-Click on the first file to start translating it.
Localising an AppInventor App
LRC Summer School 2012
5. Translate
-Go to Translation>Copy All Source to Target
Localising an AppInventor App
LRC Summer School 2012
5. Translate
-Go to View>Toolbars>Display Filter
Localising an AppInventor App
LRC Summer School 2012
5. Translate
-Insert the # and click in “In source”
Localising an AppInventor App
LRC Summer School 2012
5. Translate
-Translate!!!
Localising an AppInventor App
LRC Summer School 2012
Translate
CTRL + ENTER Confirm and move to next unconfirmed segment. CTRL + ALT + ENTER Confirm and move to next segment.
Localising an AppInventor App
LRC Summer School 2012
5. Translate
-Translate the scm file.
Localising an AppInventor App
LRC Summer School 2012
5. Translate
-Finalise the process.
Localising an AppInventor App
LRC Summer School 2012
5. Translate
The final touch:
-Open the blk file with Notepad++ and click in Format>Encode in UTF-8 without BOM.
-Save the file.
LRC Summer School 2012
Merge and Compile
Localising an AppInventor App
LRC Summer School 2012
6. Merge and Compile
-Create a backup copy.
-Place the new files in their right place.
Localising an AppInventor App
LRC Summer School 2012
6. Merge and Compile
-Create a zip file with the three folders.
-Give it a different name.
Localising an AppInventor App
LRC Summer School 2012
6. Merge and Compile
-Upload the localised project to AppInventor.
-Cross your fingers!
LRC Summer School 2012
Test the application
Localising an AppInventor App
LRC Summer School 2012
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.
Localising an AppInventor App
LRC Summer School 2012
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/