Localising an AppInventor App

LRC Summer School 2012

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

Purpose

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

Localisation Engineer

Translator

QA Tester

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

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!!

lucia.morado@ul.ie – chris.exton@ul.ie – aram.morera-mesa@ul.ie

Localising an AppInventor App

Documents

Transcript of Localising an AppInventor App

Android Programming “Family Fun Day” using AppInventor

Android Programming “Family Fun Day” using AppInventorhannahdee.eu/appinventor/appinventor_handout2.0.pdfcomplete app. The MIT AI Companion app can be a bit buggy too, it somethings

Localising Agenda 2030 - cepal.org

Starting AppInventor

App Inventor tutorial (V2) Mapping with Web services ...onvaessayer.org/appinventor/apps/mapping/mappingTutorialV2/mappi… · 4 ways to map with App Inventor : Web viewer, Start

Localising Vulnerability & Adaptation Assessments

Games in AppInventor

AppInventor€¦ · MIT App Inventor is a visual programming environment that allows everyone, even kids, to build apps for smartphones and tablets. Those new to App Inventor can

Localising Neo Paganism Rountree

Starting AppInventor in the Classroom

Localising vulnerability assessments

AppInventor listas

Image and maps display Tutorial with App Inventoronvaessayer.org/appinventor/otherApps/ImageryLocationAndMapping... · Pierre Huguet App Inventor tutorial project page 2 Image and

Introduction to AppInventor · 2020-03-27 · Introduction to AppInventor Alark Joshi, Amit Jain, Sydney Crabtree ... •AppInventor is a visual “blocks” programming language

Localising the lesion

Localising Sounds in Space

Localising sd gs paula lucci

Localising your site

Introduction to the Android Platform and AppInventor

Communication appinventor arduino