171
Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Embed Size (px)

Citation preview

Page 1: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Mobile App Development & Localisation

Eric ChubbAlchemy Software Development

14th June 2012

Page 2: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Overview

• Introduction To Mobile Development (10am – 11.30am)

• Creating Your First Mobile App (12pm – 1pm)

• Localisation Intro & Concepts (2pm – 3.30pm)

• Localisation Using Alchemy Catalyst (4pm – 5pm)

Page 3: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Introduction • Nice to meet you!

• Developer at Alchemy Software, Dublin for 3 years

• We develop a tool called Catalyst for software localisation

• Allows app developers to translate their software into other languages

• Implemented Catalyst's Android localisation technology

• Apps published on Android Market

Page 4: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Any Mobile Pros here?• Do we have any software developers?

• What programming languages do you know?

• Any experience with mobile development already?

Page 5: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Mobile Development Concepts

• We mean software development for smartphones and tablets, as opposed to desktop computers

• We mean mobile as in fits in your pocket

• Software is distributed in the form of “apps” on smartphones

• Many smartphone platforms, though really a two-horse race (Android, iOS (iPhone))

Page 6: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

What Mobile Platform Do You Use?

• Android?

• iOS?

• BlackBerry

• …

Page 7: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Why Mobile?

Page 8: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Why Mobile?

• Smartphones are powerful, portable computers with interesting hardware capabilities

• Touch screens, gestures, cameras, GPS/Mapping, accelerometry, digital compasses, orientation awareness, wi-fi, NFC

• A whole wealth of new and enhanced functionalities not possible on a PC

• Mapping, photography, fitness, games, music, social, medical / physio monitoring

Page 9: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Why Mobile?• 330 million Android users, 300 million iOS users –

lots of people buying apps!

• Centralised “app stores” make it easy for customers to find your apps

• They have disrupted and cannibalised entire market segments already

• SMS/GSM, Cameras, GPS, MP3 players, electronic timetables, newspapers, games consoles, keys, CCTV

Page 10: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012
Page 11: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012
Page 12: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012
Page 13: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012
Page 14: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Mobile Development Challenges

• Like the PC, mobile development has its own unique hurdles

• Developing on unfamiliar platforms with unfamiliar tools

• Fragmentation – lots of device vendors, screen-sizes, hardware and operating system versions

• Walled Gardens – smartphone platforms are heavily locked down

• Hardware constraints – finite power sources, memory and processing power

Page 15: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Mobile Development Challenges

• Non-technical obstacles to contend with as well

• App gold-rush – everybody’s writing apps - of variable quality

• Low barrier to entry can make it hard for your app to stand out

• To date, Android and iPhone have 500,000+ apps EACH

• Coming up with a novel idea or implementation

Page 16: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Not To Worry• The positives far outweigh the negatives

• Everybody has a phone, now anyone can write their own software for their phone

• If you’re frustrated by an existing app or the lack of one you’d use yourself, DIY!

Page 17: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

You could be like this guy!

Page 18: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Who?• Kevin Systrom, founded Burbn in 2010

• Created Instagram, a social photo sharing app which applies vintage filters/vignettes to digital images

• No formal training in computer science or programming

• Sold Instagram to Facebook for $1 Billion in April 2012, making $400 Million from that transaction

Page 19: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012
Page 20: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012
Page 21: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

We’ll Write An App Today• We will write an app for the Android mobile

operating system

• We’ll get a feel for the concepts and tools involved first

• We will create a basic app that does something useful

• Finally, we’ll load it into an emulator so you can see it running

Page 22: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

A Bit Of Background First• Android is a mobile operating system developed

by Google

• First released in 2008 , latest version is 4.0.3

• The most popular mobile operating system by some distance

• Designed to run on mobile devices of all shapes, sizes and capabilities

Page 23: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012
Page 24: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Why Are We Using Android?• It’s well-documented

• The tools you use to write Android apps are freely obtainable and multi-platform

• Anyone can download and install the Android SDK

Page 25: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Many Flavours Of Android• Since 2008, 11 different iterations of Android

released

• Unlike iPhone, multiple phone manufacturers use Android

• HTC, LG, Samsung, ZTE, Motorola, Sony Ericsson…

• Phone manufacturers then usually customise Android

• Sony Ericsson used Alchemy Catalyst in their customisation toolkit

Page 26: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Android Is Based On Linux• Optimised for mobile devices (low memory /

power footprint)

• Provides a large set of frameworks and libraries

• Abstracts away device-specific details (most of the time)

• Open-Source

Page 27: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

The Android Stack

Page 28: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Android Apps Use Java• Android provides a special Java virtual machine

called Dalvik

• Java code is compiled into .dex (Dalvik Executable) bytecode

• .dex is optimised for minimal memory consumption

• An app’s code, data and resources are packaged inside an .apk file

Page 29: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Applications Run In Isolation• An Android application has its own Dalvik Virtual

Machine

• Every application runs inside its own allocated Linux Process

• Therefore they are sandboxed and isolated from every other app on the system

Page 30: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

What Will We Be Doing?• We will develop a text editor app

• It will allow you to create, edit and save text files

• We will go through the various steps involved

• Finally, we will load it onto the emulator provide with the SDK

Page 31: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Before We Continue…

• Any Questions?

Page 32: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

What will we be using?

• The Android SDK (software development kit)

• The Eclipse development environment

• The Java Development Kit

• The Android Development Toolkit (ADT) plugin for Eclipse

• These should be preinstalled on your computers

Page 33: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Android Development 101

• Before we start, we need to know how Android apps are structured

• They are largely event-driven

• Spend most of their time responding to system / user events

• The system traps the event - you decide how to handle it

Page 34: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Android App Components• Android applications comprise Activities,

Services, Content Providers and Broadcast Receivers

• These serve as the building blocks for your applications

• Every Android App will use a different combination of the above

Page 35: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Activities

Page 36: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Activities• An Activity represents a single window in your application

• The UI for that activity is described using a “Layout” which is an XML document describing a single screen and its controls

• A SMS app would have an activity for sending texts and an activity for checking your inbox/outbox

• Activities can be launched from outside your application if it permits it

• Activities can also be launched from other activities, when a user clicks a button for instance in a different activity

Page 37: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Activities• When an activity is started, it is added to a “back-

stack” and takes focus

• If the user launches another activity from the current one, it is halted but its state is preserved in the back-stack

• Activities are notified when they are being halted or paused and can act accordingly

• When a user hits the back button, the current activity is removed from the back-stack, destroyed and the previous activity resumes

Page 38: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Services• A service is a component that runs in the

background for long periods of time

• It does not have a user interface

• An example would be the connectivity service, for supplying apps with network connections, or the clip-board service for copy and paste

• Services can be launched from Activities

Page 39: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Content Providers• A content provider is a mechanism to allow

applications to use shared data

• You can implement your own to share your app’s data with other apps

• Android providers a number of content providers for retrieving contacts, phone call logs, SMS inboxes etc.

• They are queried using an SQL-like syntax

Page 40: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Broadcast Receivers• The final component type is the broadcast

receiver

• They respond to system-wide announcements (broadcasts)

• Low battery, photo captured etc. will initiate broadcasts

• Broadcast receivers allow apps to react to system events

Page 41: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Intents• Activities, services and broadcast receivers are all

initiated by intents

• An intent is a message which requests an action to be performed

• Intents are asynchronous (can send at any moment in time)

• Intents contain both the action to be performed, and the type of data the recipient needs to be able to handle, as a URI

Page 42: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Intents• Two types of Intent – explicit and implicit

• Explicit intents name the Java class or component to launch

• Implicit intents name the action to be performed and the system figures out the rest

• Explicit intents are usually used to launch activities contained within the same app that launches them

• Implicit intents are usually used to launch activities in a different app

Page 43: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

The Manifest File• A special XML file inside every APK which lists several

things:

• The names of components implemented in the app

• What hardware, libraries, services and permissions an app requires to run

• The oldest version of Android that the app is compatible with

• What intents the app responds to specifically, using intent filters

Page 44: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012
Page 45: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

The Manifest File• If an app uses a specific feature, it must list it in

the manifest

• Devices that don’t have a listed feature won’t install the app

• Users can see what features an app will use & decide if they want to install the app

• Failing to declare will cause your app to crash when your code tries to use the feature

Page 46: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Writing Our App• We’ll create a very basic text editor

• It can edit, save and re-open files, and copy and paste

• It will show us how activities, intents and services work

• We’ll manage data storage & handle certain user events

• We’ll also get to see how the Android Manifest file works

Page 47: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Writing Our App• Recall that an activity is a screen in our app

• Our app will have two activities – one for editing, another for opening files

• The editing activity will have an open button & a save button

• The “file open” activity will show a list of file names to open

• Holding a filename in this screen will prompt you to delete it

Page 48: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Tune In After The Break

• See you back here at 12pm

Page 49: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Eclipse• Eclipse is an integrated development

environment for Java

• We can create, edit and debug Android apps using it

• To start it, launch c:\eclipse\eclipse.exe

• It can take a little while to get going!

Page 50: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Let’s Begin• When Eclipse has loaded, click File->New-

>Other..>Android>Android Project

• In the “Project Name” field, type “Text Editor”

• Check “Create new project in workspace”

• Click “Next”

Page 51: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012
Page 52: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Selecting A Build Target• Here we select the oldest version of Android our

app is compatible with

• Select Android 2.1 (97% of Android phones support)

• Click “Next”

Page 53: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012
Page 54: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Application Info• Now we’ll enter some final app information

• Type “Text Editor” as the application name

• Type “com.firstapp.texteditor” as the package name

• Make sure “Minimum SDK” is 7 (Android 2.1)

• Check “Create activity” & call it TextEditorActivity

Page 55: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012
Page 56: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

We Should Now Have An App

• If all went well, you should see the “Text Editor” project in the left hand side

• Expand the “+” beside the project name to see its contents

• You should see several folders and some files

• We’ll only focus on some of these files today

• Click on the “src” folder and then on “com.firstapp.texteditor”

Page 57: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012
Page 58: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

What Are We Looking At?• You can see “TextEditorActivity.java”

• This contains the code for the main activity in the app

• A bit further down you can see “AndroidManifest.xml”

• This is (you guessed it!) our Android Manifest file

Page 59: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Let’s Start With Our Activity• Double click on “TextEditorActivity.Java” to see it

in the editor

• Right now, it doesn’t do very much

• We can see it’s a Java class called TextEditorActivity

• It inherits from the “Activity” class provided by the SDK

Page 60: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Adding Imports• The first thing to do is add references to packages we will use

• Packages are just groups of related code for providing different functions

• Android provides packages for displaying dialog boxes, opening files etc

• We need to add code to load those packages or our code will cause errors

• Browse to “imports.txt” and copy the content to the clipboard

Page 61: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Adding Imports• In the code for our activity, delete everything

above the line public class TextEditorActivity extends Activity {

• Then paste the code you copied from imports.txt

• As you can see, we’ll be using quite a few of them

Page 62: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012
Page 63: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

onCreate()• onCreate is the entry point for your Activity’s

code

• In this case, we only have one activity, so it’s our entry point for the entire app

• It takes a “bundle” object as a parameter

• This is just a piece of state that isn’t important to us right now

Page 64: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

onCreate()• The code in onCreate calls the onCreate method of Activity, our

activity’s parent class

• When we created the app, a default layout was created for our activity too

• Recall that a layout defines the user interface for an activity

• This includes what controls it contains, their position, and so forth

• The call to “setContentView applies the default layout to this activity”

Page 65: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Our Layout• Let’s see how our app would look if we ran it now

• In the package explorer, double click on the “res” folder

• Then double click on the “layout” subfolder

• You should see a file called “main.xml” – double click on it

Page 66: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012
Page 67: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Our Layout• As you can see, it’s just an empty screen with a label

on it

• We’re going to some controls to it

• To the left of the activity view you should see some controls

• If you look inside the different control groups, you can see there are a lot to choose from

Page 68: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Adding A Text Field• For now, click on the “text fields” group

• Drag the first control containing “abc” onto the layout

• We now have an editable text field for users to type into

• On the right hand side in the “outline” section you can see it has an id called “editText1” – we’ll need this ID later on

Page 69: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012
Page 70: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Adding Buttons• Next, we’ll add two buttons, one for opening

text files and one for saving

• Back on the left hand side of the activity view, click “form widgets”

• Drag the button with the text “button” onto the layout

• Then do it again

Page 71: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Adding Buttons• You’ll notice that the controls are being added below

each other

• This is because the specific type of layout we’re using is a “linear layout”

• There are other types of layout that position controls differently

• Now, click on each button and resize them so they are as wide as the activity

Page 72: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012
Page 73: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Editing Button IDs• In the outline pane we can see our button IDs with the

button text beside them

• IDs provide a way for application code to reference buttons

• We need more meaningful IDs for our code to work with

• Select “button1” in the outline pane

• You should see a blue rectangle around the top button in the activity view

Page 74: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Editing Button Text• Right now the buttons just have the text “button” on

them – let’s change it

• On “button1” outline pane, right click “Edit Text” and in the field under the “New String” button, delete the content and type a space

• Do the same for “button2”

Page 75: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Editing Button IDs• Right click “button1” and click “Edit IDs”

• Type “openButton” , using the same case lettering

• Do the same for “button2”, only change the id to “saveButton”

• Click Ctrl-s to save your changes

Page 76: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012
Page 77: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Adding Button Functionality• Right now, we have two buttons and a text field

that do nothing

• We need to write some code to give them functionality

• Switch back to “TextEditorActivity.java” in the tab list above the activity view

Page 78: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

So What Will We Do?• We will add two new “OnClickListener”s

• These are pieces of code that are triggered when a user presses a button

• They specify how an app should react to button presses

Page 79: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Browse to clickListener.txt• Copy the code in the file and paste it between the last

and second last “}” in TextEditorActivity.Java

• When pasting code, be careful that it is in exactly the right location

• Otherwise you’ll end up with lots of syntax errors in your code

Page 80: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012
Page 81: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Binding the onClickListeners

• We need to associate the onClickListeners with the buttons

• Browse to buttonBind.txt and copy the code

• Paste it under the line “setContentView(R.layout.main);”

• Now, clicking a button will invoke its associated onClickListener

• You’ll notice we also have code to set the text of the buttons…

Page 82: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012
Page 83: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Saving A File • Our onClickListeners don’t do anything right now

• We’ll add code so that one of them will save the contents of our text field

• Browse to saveFile.txt and copy the code to the clipboard

• Paste it under the lines:View.OnClickListener saveButtonHandler = new View.OnClickListener() {

public void onClick(View v) {

Page 84: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

What Does The Code Do?• If you look at the comments..

• We generate a random number

• We get the text in the text field in our activity

• We turn that text into a stream of bytes

• We write that stream to a file whose name is the random number

Page 85: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012
Page 86: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Opening Files• Now that we can save files, it would be useful if we

could re-open them!

• Browse to openFile.txt and copy the code

• Paste it under the lines

View.OnClickListener openButtonHandler newView.OnClickListener() { public void onClick(View v) {

Page 87: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

What Does The Code Do?• It gets the filenames of previously saved files using

fileList();

• This is a method provided by the Android SDK

• If the list is empty, we pop up a warning and quit

• Otherwise, we create a pop up containing available filenames

• When the user selects a file name, we read in that file and display the text

Page 88: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

That’s The Hard Bit Done !• For the sake of simplicity, we omitted some details

(checks for existing files)

• The file save would also be performed in a separate thread

• However, the app does do what it says on the tin

• Now we want to run it and see it in action!

Page 89: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Running Your App• To debug your app and see it running, we’ll load it

into an emulator

• The Android Emulator is a piece of software which simulates a real phone

• It allows you to interact with your app on your development machine

• We can step through code, line-by-line as it executes and see its effect

Page 90: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Configuring The Emulator

• To begin, we need to create an emulator image

• This is a virtual phone on to which your app will be loaded

• It allows you to interact with your app on your development machine

• We can step through code, line-by-line as it executes and see its effect

Page 91: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Configuring The Emulator• On the toolbar above the code editor you should see:

• Click the icon with the red circle to launch the AVD manager

• It’s here that we create an emulator

• In the dialog that pops up, click “New”

Page 92: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Configuring The Emulator• A configuration dialog will appear – in “name” just

type 2.1

• In the “target” dropdown, select “Android 2.1 – API Level 7”

• We’ve just created a virtual phone running Android 2.1!

• Now, let’s run our app!

Page 93: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Debugging• To launch your app, in the toolbar click:

• In the pop-up menu, that appears, click “Android Application”

• If all is well, the emulator should now launch

• After a few seconds, it will launch and you will see the following:

Page 94: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012
Page 95: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Play Around With It• If you click the open button you’ll be told no files are

saved yet

• Type some text into the text field and click save

• Then delete everything in the text field and click “open”

• A pop-up menu will appear and let you select the file you just saved

• When you click the filename, the contents of the file are loaded in

Page 96: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Lunchtime!

– Leave Eclipse running, we’ll be using it in the afternoon!

– See you back at 2pm

Page 97: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Localising Apps with Alchemy Catalyst

– We will cover software localisation and the rationale behind it

– Some of the pitfalls of software localisation

– I’ll discuss Alchemy Catalyst, the tool I work on day-to-day.

– The benefits of using Catalyst

Page 98: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

What Is Software Localisation?• The process of adapting software for different languages /

regions

• More than just translating text

• It comprises a complete workflow – Costing– Preparation– Translation – Review /QA – Product sign off

• It can range from trivial projects with a few words to entire operating systems

Page 99: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

What are the benefits?• Allows you to deploy your software globally

• Gives access to more markets and revenue streams

• Microsoft want to sell outside of North America

Page 100: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

What Are The Challenges?• Ensuring translations themselves are correct!

• Translating software without introducing issues (layout problems, crashes!)

• Cost minimisation

• Internationalisation (localisation-friendly development)

• Workflow management – scheduling, completeness

Page 101: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Translation Challenges• Ensuring translation quality

• Knowledge of software domain

• Translating content without changing / damaging source document

• Using correct terminology

• Managing sheer volume of translation to be performed

Page 102: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Post-Translation Issues• Text expansion / truncation

• Different writing directions – left to right, right-to-left

• Different character encodings

Page 103: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Cost Minimisation Challenges

• Few software companies have resources to localise alone

• Translation is usually performed externally

• Jobs priced per word – I want to know cost up front

• Reusing translations if possible is desirable

Page 104: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Internationalisation• Quality of localisation is greatly affected by how

software is made

• Have the developers taken time to expose text for localisation?

• Or are strings hard-coded into source code?

• Has development made assumptions about text length, position within sentences?

Page 105: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Localisation Workflow Management

• Ensuring project finishes on time and under budget and is of high quality

• Making best use of localisation resources available to you

• Localising in a way that scales from tiny projects to huge ones

• Using the best tools for the job

Page 106: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012
Page 107: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

What Is Catalyst?• A Computer-Assisted-Translation (CAT) tool

• Used to localise software, web sites and online help systems

• Designed to fit in to all stages of localisation workflow

• Automates as much of the process as possible

• Catalyst addresses all of the challenges outlined previously

Page 108: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

How Does It Work• Catalyst accepts 180+ file formats for translation

• Files are organised inside a project file called a TTK

• It breaks content down into translatable units called “segments”

• A segment can be a word, heading, sentence or paragraph

• When complete, content is output in format originally created in

Page 109: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012
Page 110: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Why Would I Use Catalyst?

• Ensures quality of translations

• Reduces the cost of localisation

• Assists in preparation of material for localisation

• Automates as much of the localisation workflow as possible

• Breaks the localisation process into more manageable units

Page 111: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Ensuring Translation Quality• Catalyst exposes only localisable content for translation

• Surrounding document / file structure is preserved

• Built-in tests to check for issues introduced by translation

• Glossary function allows client to use consistent terminology

Page 112: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Ensuring Translation Quality• Catalyst can enforce length limits on translations for

graphical applications

• Allows locking of content via keywords and segment locking

• Content can be contextualised with notes (memos) and reference material

• Status indicators for translations (signed off, for review, untranslated)

Page 113: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Locks

Page 114: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Keywords

Page 115: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Translation Memory• Central to Catalyst is the idea of a translation

memory

• A database of previously translated content

• Using a TM, Catalyst can suggest translations for content

• Catalyst can also generate TMs from existing translations

Page 116: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Translation Memory – How It Works

• Catalyst checks TMs for translated instances of text also in untranslated material

• Using a scoring algorithm, it suggests translations

• If multiple candidate translations are found, ranked by score

• TMs can be other TTKs, online services, text files, databases

Page 117: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012
Page 118: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Translation Memory - Benefits

• This lowers the cost of localisation through translation reuse

• It accelerates the localisation process

• It ensures consistency of translation, especially with multiple translators

• Assists in initial costing of localisation project

Page 119: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Preparing Material• Catalyst assists in the pre-translation prep of

material

• Calculates the size/cost of localisation project

• Determines amount of translation reuse possible with TMs

• It can “pseudotranslate” to preview the effects of localisation

• Pseudotranslation will highlight any unexposed resources

Page 120: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Project Management• Rather than use 10 tools for 10 file formats, use

1 for all of them

• TTKs organise localisation projects into manageable units

• They can be divided up and distributed to translators

• Translators can work without the tool that created content originally

Page 121: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Catalyst & Android• Catalyst is a complete localisation environment

for Android

• It is able to open, translate, visualise and recompile APK files

• Today we will localise the app you built using Catalyst 10

• We will then load it into the emulator and see it running, translated

Page 122: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Launch Catalyst• Browse to Start->All Programs/Program Files-

>Alchemy Catalyst

• You’ll be presented with a dialog box – choose “Create New Project”

Page 123: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Create A New Project

Page 124: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

The Workspace• You’ve just created your first Catalyst project!

• You’re now presented with the Catalyst workspace, made up of several parts

• The navigator on the left shows your project structure

• The translator toolbar on the bottom displays the current segment

• The results pane on the right shows any user messages

Page 125: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012
Page 126: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Inserting The Text Editor App

• Right now our project is empty, so let‘s put something in it

• We will load the text editor app we created earlier

• First we need to export our app’s compiled APK to disk in Eclipse

Page 127: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Exporting The APK• Re-open Eclipse if you closed it earlier

• The Text Editor project should still be in the “package explorer”

• Right click the “Text Editor” project at the top of the explorer

• Click “Android tools” in the menu that appears and select “export unsigned application package”

Page 128: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012
Page 129: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Exporting The APK• You’ll be prompted to export the APK file; name

the file “TextEditor.apk” with no space and choose the C:\ drive as the export location

• Now, switch back to Catalyst

• In the “navigator” pane on the left hand side, right click on “text editor” and click “insert files”

Page 130: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012
Page 131: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Inserting Your APK file• Choose insert files and a file selection dialog

will appear

• Browse to your C:\ drive (there should be a shortcut in the file selection dialog”

• Make sure you’ve selected “Android application packages” in the file extension dropdown box

Page 132: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012
Page 133: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Inserting Your APK file• Double click on the apk file to insert it

• You’ll be presented with a dialog asking you to “Select Rule”

• For now, just check “apply to all” and click “Standard” in the parsing rule list

Page 134: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012
Page 135: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Your Project• As you can see, Catalyst has identified the

localisable content in your app

• There are two folders; “layout” containing your app’s XML layout

• The second folder, “values” contains string resources

• Inside “layout” there is a file, “main.xml” – click on it to see its contents

Page 136: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012
Page 137: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

The String View• You’ll notice that the centre pane is now populated

• This is the string view and shows each segment in the file selected in the navigator

• The first segment is the text in the label above the edit field

• The second are the segments for our buttons, containing a space

• But where is our text “open” and “save” that we saw in the emulator?

Page 138: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012
Page 139: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

The Visual View• We can preview our layout visually by

switching to visual view

Page 140: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012
Page 141: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Our Strings Are Missing• The problem is that we hard-coded our strings

• This is a big no-no from a localisation point of view

• It means that any changes we make to the file here will be overridden by our code

• All strings should be externalised into a string file – Android already provides one!

Page 142: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Strings.xml• If you look in the navigator, you’ll see a folder,

“values”

• That folder in turn contains a file called “strings.xml”

• We can view the file by switching into String view again and clicking on it in the navigator

Page 143: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012
Page 144: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Strings.xml• We can see two segments, the text for the label in our layout

and the title of our app

• Select the string “Hello World, TextEditorActivity” in the string viewer

• In the translator toolbar below, the string text will appear

• Edit the string in the toolbar, click back on “main.xml” in the navigator and switch to visual view

• The eye icon appears beside the string once you edit is the “for review” status icon, which tells translators the string is translated but not yet approved

Page 145: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012
Page 146: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

All App Text Should Be In Strings.xml

• You can see our edits worked because the label text’s value is stored in Strings.xml rather than being hard-coded

• However, any edits we make to the buttons on our layout in Catalyst will disappear once we run the app

• The code to set the button text will override any translations we make

Page 147: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

How Do We Fix It?• We need to make some changes in Eclipse - Re-

open it if you closed it earlier

• Your project should still be visible in the package explorer on the left

• In the src folder, expand com.firstapp.texteditor and click on TextEditorActivity.Java

• Delete these two lines

Page 148: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Externalising Strings• Now that we’ve removed the dodgy code, we

need to add the strings for our buttons to Strings.xml

• In Eclipse’s package explorer, expand the “res” folder

• You’ll see a subfolder called “values”,

• Expand it and you’ll see Strings.xml – click on it

• You’re now presented with a view of strings already in it

Page 149: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012
Page 150: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Let’s Add Our Strings• Click the “add” button and “select” string in the

pop-up that appears

• A new field will appear beside the string list, asking for the string name and value

• Type “open” in the string name and “Open” with a capital O in the value field

Page 151: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Let’s Add Our Strings• Click Add again, selecting “String” once more in the pop-up

• You’ll notice, the string “open” has been added to our string list

• In the fields for the new string, type “save” as the name and “Save” with capital S as the value

• Click onto the string list and you’ll see the second string being added

• Press ctrl-s to save the new strings to the xml file

Page 152: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Binding Strings To Buttons• Now that we have externalised our button text,

we have to bind it to the buttons

• Above the “values” folder in the package explorer, you’ll see the “layout folder” – click on main.xml inside it

Page 153: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Binding Strings To Buttons• You’ll be presented with the graphical view of the layout as

before

• Right-click “openButton” in the outline pane on the right of the screen and click “Edit text”

• You’re presented with a “resource chooser” – our two new strings are in the list – double click “open”

• Right-click “saveButton” in the outline and click “Edit Text”, select “save” from the list

• Press ctrl-S to save the changes

Page 154: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Exporting The APK (again)• We need to re-export our APK with the changes

we made

• Right click the “Text Editor” project at the top of the explorer

• Click “Android tools” in the menu that appears and select “export unsigned application package”

• Save it to your C:\ drive once more, calling it “TextEditor.apk”

Page 155: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012
Page 156: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Re-inserting The APK• Switch back to Catalyst, and select “TextEditor.apk”

• Click the delete keyboard to remove it from your project

• Now, right-click on the “Text Editor” folder and click “insert files”

• Browse to your C:\ drive and select the “TextEditor” apk file

• Remember to check “apply to all” and select “standard” in the pop up dialog that appears

Page 157: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Translating Our Layout• Expand the APK file’s contents and browse to

“strings.xml” inside the “values” folder

• You can now see the text for our buttons

• This is because we correctly externalised our text, making it easier to localise

• Select one (or both) of the strings in the string viewer and edit it with some text in the translator toolbar at the bottom

Page 158: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Translating Our Layout• You’ll notice that in the navigator, strings.xml

AND main.xml have “for review” icons beside them

• This is because Catalyst has detected that the buttons in main.xml use text stored in strings.xml

• Click on main.xml, and switch to visual view

Page 159: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Our Translations Now Appear

• You’ll see the edits we made to Strings.xml have changed the text in the buttons

Page 160: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Exporting Our Translated App

• Now that our app is translated, we’re ready to create a translated APK

• Right click on “TextEditor.apk” in the navigator and click “extract file” in the pop up menu

• Save it to your C:\ drive, calling it “TextEditorTranslated.apk”

Page 161: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Signing Our App• Before we can install the app, in the emulator, we need to

sign it

• This means adding a cryptographic signature to the APK file

• An Android device will not install an app that hasn’t been signed

• To sign the app, open a command prompt by clicking the Windows “start” button and typing “cmd” inside the “search programs and files” box, then press enter

• Type the following into the black box that appears:

Page 162: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Signing Our App• "C:\Program Files\Java\jdk1.6.0_32\bin\jarsigner.exe" -

keystore "C:\my-release-key.keystore" C:\TextEditorTranslated.apk alias_name

• You will be prompted to provide a password to sign the key, which is simply “password” without quotes

• If all goes well, the command should proceed silently

Page 163: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Running Our Translated App• We’re going to launch an emulator from outside Eclipse and install

our translated app manually

• Launching it inside Eclipse will load the untranslated version

• Open a command prompt by clicking the Windows “start” button and typing “cmd” inside the “search programs and files” box, then press enter

• In the box that appears, type this: "C:\Program Files\Android\android-sdk\tools\emulator.exe" @2.1

• This command starts the emulator and loads the AVD we created

Page 164: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Running Our Translated App• If all goes to plan, your emulator should display

the Android home screen

Page 165: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012
Page 166: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Uninstalling Previous Versions

• We need to remove any previous installations of our app before we install a new one – Android doesn’t allow overwrites

• In a new command prompt , type• "C:\Program Files\Android\android-sdk\

platform-tools\adb.exe" uninstall com.firstapp.texteditor

• This will uninstall any previous instances of our text editor

Page 167: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Installing Our Translated App

• In the command prompt, type:

• "C:\Program Files\Android\android-sdk\platform-tools\adb.exe" install C:\TextEditorTranslated.Apk"

• This will install our new, translated app

Page 168: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Running Our Translated App• Click And Drag the bar with the open padlock icon

to the right

• Next, drag the tab with the arrow up from the bottom

• You’ll be presented with a list of apps, scroll down to the bottom to find “Text Editor”

• Click on “Text Editor” to launch

Page 169: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012
Page 170: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

We’ve Successfully Localised our App

• You can clearly see the buttons have been successfully translated

• The app’s functionality remains unchanged, as it should:

• Type some text into the edit field and save it

• Then open it again – the app still behaves as normal

Page 171: Mobile App Development & Localisation Eric Chubb Alchemy Software Development 14 th June 2012

Any Questions?

• This is just a very high-level overview of Android development and localisation

• I’ll give the complete source code to Karl and he can pass it on to you, along with this presentation

• Alchemy’s Android Localisation tutorial: http://youtu.be/nNT00ck5iP4

• You can contact me at [email protected]

• Thanks for coming!