Mobile Worshop Lab guide

Workshop Lab Guide

Alex HungCrossover International Co. Ltd.www.crossover-int.com

http://www.crossover-int.com/

Lab Guide

Lab 1: Setup of Development Environment

Lab 2: Basic Development of Mobile App

Lab 3: Example Coding

Lab 4: Submission of Mobile App to Application Store

Lab 5: Reporting and Statistics Collection

Course Agenda

Page 2

Lab Guide

• Objective:

– Download and Setup the Android Development Platform

• Task:

– Refer to Lab 1 instruction– Download and install Java Developer Toolkit

(JDK)– Download and setup the Android SDK– Start the Eclipse IDE and setup up the Android

Virtual Device (AVD) for testing– Create a simple app and test the Emulator

Lab 1: Setup Android SDK

Page 3

Lab Guide

SYSTEM REQUIREMENTS

• Operating Systems

– Windows XP (32-bit), Vista (32- or 64-bit), or Windows 7 (32- or 64-bit)

– Mac OS X 10.5.8 or later (x86 only)– Linux (tested on Ubuntu Linux, Lucid Lynx)

• GNU C Library (glibc) 2.7 or later is required.• On Ubuntu Linux, version 8.04 or later is required.• 64-bit distributions must be capable of running 32-bit

applications.


Page 4

Lab Guide

SYSTEM REQUIREMENTS

• Eclipse IDE

– Eclipse 3.6.2 (Helios) or greater– Eclipse JDT plugin (included in most Eclipse IDE

packages)– JDK 6 (JRE alone is not sufficient)– Android Development Tools plugin


Page 5

Lab Guide

• Download the SDK (ADT bundle for Windows) from:

– http://developer.android.com/sdk/index.html • With a single download, the ADT Bundle includes

everything you need to begin developing apps:

– Eclipse + ADT plugin– Android SDK Tools– Android Platform-tools– The latest Android platform– The latest Android system image for the

emulator


Page 6

http://developer.android.com/sdk/index.html



Lab Guide

• Make sure your development environment has JDK installed

• Download JDK– http://

www.oracle.com/technetwork/java/javase/downloads/index.html

• Install JDK


Page 7

http://www.oracle.com/technetwork/java/javase/downloads/index.html





Lab Guide

Install the SDK and Eclipse IDE

• Unpack the ZIP file and save it to an appropriate location

• Open the adt-bundle-<os_platform>/eclipse/ directory and launch eclipse.

• Done!


Page 8

Lab Guide


Page 9

Lab Guide

Android SDK Manager

• You can install the SDK packages and tool needed from the SDK Manager

• The latest API is included in the ADT Bundle


Page 10

Lab Guide

Android Virtual Device (AVD) Manager

• Create a new Virtual Device for testing in the Emulator


Page 11

Lab Guide

Android Virtual Device (AVD) Manager

• Device: you can choose one of the default device in the list OR add a new type in the Device Definition tap from the AVD Manager

• Target: you can only find the version install from the SDK Manager


Page 12

Lab Guide

Emulator

• Select the Device from the list and click Start


Page 13

Lab Guide

Create a New App and Test the Emulator


Page 14

Lab Guide

Run the App in Emulator

• Select the App in Package Explorer, click Run


Page 15

Lab Guide

Testing with real Android device

• You need to first enable USB debugging on your device

– On most devices running Android 3.2 or older, Settings > Applications > Development

– On Android 4.0 and newer, Settings > Developer options

– On Android 4.2 and newer, Developer options is hidden by default. Go to Settings > About phone and tap Build number seven times. Return to the previous screen to find Developer options.


Page 16

Lab Guide

Testing with real Android device

• If you're developing on Windows, you need to install the USB driver

• Then run your application as usual. A Device Chooser dialog will be shown


Page 17

Lab Guide

• Objective:

– Develop a simple BMI calculator program in Android Platform

• Task:

– Refer to Lab 2 instruction– Create a new Android Project– Use the built-in object to develop the user

interface– Write the simple Android program to

communicate with the user interface– Test the Android program by emulator

Lab 2: Develop of Simple Android Mobile App

Page 18

Lab Guide

• Create a new Android Project– Package Name have to be unique (e.g. com.crossover.XXXX)


Page 19

Lab Guide

Use the built-in object to develop the user interface

• You can do that by simply drag and drop of widgets like text box, buttons into the form in the WYSIWYG editor in Eclipse.

• Open the res/activity_main.xml file under your project from Package Explorer window.


Page 20

Lab Guide


• Open the xml file, you will get to the Graphical Layout editor.

• There is a hello world greeting has been added by default.

• Just select the "Hello World" label and delete.


Page 21

Lab Guide


• Drag a medium text widgets from the Palette to the form

• Right click on the text and select “Edit Text...”

• Select “New String…”


Page 22

Lab Guide


• Enter

– “Your Weight (kg)” in String

– “weightLabel” in New R.string

• Click OK


Page 23

Lab Guide

• Next Drag a text field to allow user to input the weight.

• That should be a text field that allow user type decimal numbers


Page 24

Lab Guide

• Right click on the newly added text field and click "Edit ID".

• Provide a meaningful name to the text field, i.e. "weightText" and click "OK".


Page 25

Lab Guide

• Now add the following widgets to the form:

• A "Medium size label"

– string value "Your Height (m)" and R.String as “heightLabel"• A text field with decimal numbers.

– id "heightText". • A Button.

– Right click and select "Other Properties" > "All By Name" > "Text" and add a new String Resource • String: Calculate and R.String: calculateButton

– Similarly set the "onClick" property to "calculateClickHandler". – Set the button's id as "calculateButton".

• A Large Label.

– Give it the id "resultLabel". Set the text property of the label to a empty string. (with the R.String: emptyString)


Page 26

Lab Guide

• Final UI


Page 27

Lab Guide

• If you click the activity_main.xml tab in the bottom of the window, you can review or edit the strings and IDs you have associated with widgets


Page 28

Lab Guide

Write the simple Android program to communicate with the user interface

• After designing the UI, we have to write a simple program that trigger BMI calculation when user click the "Calculate" button.

• This is written in the src/com.crossover.bmi/MainActivity.java file.


Page 29

Lab Guide

Write the simple Android program to communicate with the user interface

Program Code:package com.crossover.bmi; import android.app.Activity;import android.os.Bundle;import android.view.View; import android.widget.EditText;import android.widget.TextView;


Page 30

Lab Guide

public class MainActivity extends Activity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); } public void calculateClickHandler(View view) { // make sure we handle the click of the calculator button if (view.getId() == R.id.calculateButton) { // get the references to the widgets EditText weightText = (EditText)findViewById(R.id.weightText); EditText heightText = (EditText)findViewById(R.id.heightText); TextView resultText = (TextView)findViewById(R.id.resultLabel); // get the users values from the widget references float weight = Float.parseFloat(weightText.getText().toString()); float height = Float.parseFloat(heightText.getText().toString());


Page 31

Lab Guide

// interpret the meaning of the bmi value String bmiInterpretation = interpretBMI(bmiValue); // now set the value in the result text resultText.setText(bmiValue + "-" + bmiInterpretation); } } // the formula to calculate the BMI index // check for http://en.wikipedia.org/wiki/Body_mass_index private float calculateBMI (float weight, float height) { return (float) (weight / (height * height)); } // interpret what BMI means private String interpretBMI(float bmiValue) { if (bmiValue < 16) { return "Severely underweight"; } else if (bmiValue < 18.5) { return "Underweight"; } else if (bmiValue < 25) { return "Normal"; } else if (bmiValue < 30) { return "Overweight"; } else { return "Obese"; } }}


Page 32

Lab Guide

• Test the Android program by emulator


Page 33

Lab Guide

• Objective:

– Try to run the sample coding on Camera & GPS integration, accessibility feature, embedded web content and soliciting feedback from users

• Task:

– Integration with camera, GPS– Coding with accessibility feature– Coding including embedded web content– Coding for soliciting feedback from users


Page 34

Lab Guide

• To run an application with the feature of camera, GPS location, changing font size, embedded web content and soliciting feedback from users


Page 35

Home Functions Menu

Lab Guide

• Step 1: Create a new project with Package name: com.crossover.labdemo

• Step 2: To create the layout of Home Screen (activity_home.xml)

– The Home screen should contain an ImageView or Button (with ID: imageView1)


Page 36

Lab Guide

• Step 3: Create an activity named HomeActivity.java

– Use the code provided

– This is the home page of the app

– Click on the ImageView then go to the Camera page


Page 37

Lab Guide

• Camera preview screen is on the top of the screen

• Tap on the preview screen and a photo will be taken

• Photo taken will be shown at the bottom left

Lab 3.1: Integration with camera, GPS

Page 38

Lab Guide

Integration with camera:

• First, create a layout (named: activity_camera.xml)

• As shown on the right, the layout should at least include:

– a SurfaceView – an ImageView– an ImageView with

an arrow image


Page 39

Lab Guide

• SurfaceView

– named: “surfaceView1” for the camera preview)

• ImageView

– named: “imageView1” for the display of the photo taken)

• ImageView with an arrow image

– named: “camera_next” for going to the next function)


Page 40

surfaceView1

imageView1

Camera_next

Lab Guide

Create a new activity “CameraActivity.java”:

• Use the code provided


Page 41

Lab Guide

Updating AndroidManifest.xml

• Update your AndroidManifest.xml file by adding the following permissions to access camera:

<uses-permission android:name="android.permission.CAMERA" />

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

<uses-feature android:name="android.hardware.camera" />

<uses-feature android:name="android.hardware.camera.autofocus" />


Page 42

Lab Guide


Page 43

Lab Guide

• Tap the icon and the device will start getting you GPS location

– Latitude– Longitude

• Keep updating the location


Page 44

Lab Guide

Integration with GPS:

• First, define the layout (named: activity_gps.xml)


– an ImageView – Four TextView in a LinearLayout

with ID: “gps_info_layout” and the visibility set as “gone”

– Two arrow ImageView (IDs: gps_btn_left & gps_btn_right)


Page 45

Lab Guide

• ImageView

– ID: “gps_location_btn” act as a button to start getting the location)

• Four TextView

– ID: “gps_location_lat” to display the latitude)– ID: “gps_location_lng” to display the

longitude)– ID: “gps_location_accu” to display the

accuracy)– ID: “gps_location_count” to display the

number of updates)


Page 46

Lab Guide

Create a new activity “GPSActivity.java”:



Page 47

Lab Guide


• Update your AndroidManifest.xml file by adding the following permissions to access location:

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>


Page 48

Lab Guide


Page 49

Lab Guide

• Able to change the font size of the words on the screen

Lab 3.2: Accessibility Feature

Page 50

Lab Guide

Change font size:

• First, define the layout (named: activity_access.xml)


– a TextView – a spinner– Two arrow ImageView (IDs:

access_left & access_right)


Page 51

Lab Guide

• TextView

– ID: “access_text” – The font size of these words to be changed

• Spinner

– ID: “spinner1” – For the user to choose the font size


Page 52

Lab Guide

Create a new activity “AccessActivity.java”:



Page 53

Lab Guide

• Example:

• Embed www.google.com.hk inside the application

Lab 3.3: Embedded Web Content

Page 54

http://www.google.com.hk/

Lab Guide

Embedded Web Content :

• First, define the layout (named: activity_web.xml)


– a WebView – Two arrow ImageView

(IDs: web_left & web_right)


Page 55

Lab Guide

• WebView

– ID: “mybrowser” – To display the website in this view


Page 56

Lab Guide

Create a new activity “AccessActivity.java”:



Page 57

Lab Guide


• Update your AndroidManifest.xml file by adding the following permissions to access internet:

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>


Page 58

Lab Guide


Page 59

Lab Guide

• A form is included in the application for the users to submit comment

• The comment will be sent by email

Lab 3.4: Soliciting Feedback from Users

Page 60

Lab Guide


• First, create a new layout (named: activity_form.xml)


– Two Test Fields – a TextView – Two ImageView– a arrow ImageView with

ID: form_left)


Page 61

Lab Guide

• Test Field

– ID: “form_name” – For user to fill in the name

• TestView

– ID: “form_date” – For user to select the date, and display the selected date

• Test Field

– ID: “form_comment” – For user to fill in the comment

• ImageView

– ID: “form_submit” – For user to submit the form

• ImageView

– ID: “form_clear” – For user to clear the form


Page 62

Lab Guide


• Then create another new layout (named: date_time_dialog.xml)

• This is used for the date time picker dialog


– a DatePicker (ID: “date_picker”)

– a TimePicker (ID: “time_picker”)


Page 63

Lab Guide

Create a new activity “FormActivity.java”:



Page 64

Lab Guide

• Objective:

– Register the Android Developer account and publish the App

• Task:

– Refer to Lab 4 instruction– Digitally sign the application– Register the Android Developer account– Prepare the image and document for mobile

app– Publish the app to Google Play


Page 65

Lab Guide

• Set up to start publishing on Google Play:

1. Register for a Google Play publisher account2. If you will sell apps, set up a Google Wallet

Merchant Account3. Explore the Google Play Developer Console

and learn about the tools for publishing


Page 66

Lab Guide

Register for a publisher account

• Visit the Google Play Developer Console at https://play.google.com/apps/publish/.

• Enter basic information about your developer identity

• Read and accept the Developer Distribution Agreement.

• Pay a $25 USD registration fee using Google Wallet.

– If you don't have a Google Wallet account, you can quickly set one up during the process.


Page 67

https://play.google.com/apps/publish/

https://play.google.com/apps/publish/

Lab Guide

Register for a publisher account

• Tips

– You need a Google account to register. • You can create one during the process.

– If you are an organization, consider registering a new Google account rather than using a personal account.


Page 68

Lab Guide

Set up a Google Wallet Merchant account

• If you want to sell products on Google Play you will also need to set up a Google Wallet Merchant Account.

– Include priced apps, in-app products, or subscriptions• To set up a Merchant account from the Developer Console:

– Sign in to your Google Play Developer Console – Open Financial reports on the side navigation.– Click Setup a Merchant Account now.– This takes you to the Google Wallet site to sign up as a

Merchant• you'll need information about your business available to

complete this step.


Page 69

Lab Guide

• Developer Console


All applications page: A quick overview of your apps, lets you jump to stats, reviews, and product details, or upload a new app.

Page 70

Lab Guide

Multiple user accounts

• If you are working with a team, you can set up multiple user accounts to access different parts of your Developer Console.

• The first account registered is the account owner, with full access to all parts of the Console.

• The owner can add user accounts and manage what parts of the Console they have access to.

– For example, grant users access to publishing and app configuration, but not access to financial reports.


Page 71

Lab Guide

• Preparation for submitting a new App:

– Digitally signed package file (.apk file)– App icon (512 x 512 pixels, 32-bit PNG)– Promotional materials

• Screenshots (for Phone, 7-inch tablet, 10-inch tablet)• Feature Graphic• Promo Graphic• Promo Video

– App Description


Page 72

Lab Guide

Export Signed Application Package

• Before submitting to the Google Play, you need to sign the application by a unique Keystore

• Right click the application package in eclipse > Android Tools > Export Signed Application Package…


Page 73

Lab Guide

• Confirm the project to be signed > Next

• Create new keystore > choose save location > enter the password twice > Next


Page 74

Lab Guide

• Enter the information for the key and choose the destination to save the exported APK

• Done! Keep the keystore file for future update and memorize the passwords


Page 75

Lab Guide


Page 76

Lab Guide


Remarks: • If you publish your app

as free, it must remain free.

• If you publish it as priced, you can later change it to free.

Page 77

Lab Guide

• Upload the Signed APK file and publish your app

• Wait for a few hours, and your app will be found in the Google play


Page 78

Lab Guide

• Objective:

– Reporting and Statistics Collection • Task:

– Refer to Lab 5 instruction– Setup the Google Analytics account– Register the app for usage collection– Add the Google Analytics Code to the

application done in Lab 2


Page 79

Lab Guide

User reviews and crash reports

• Google Play makes it easy for users to submit reviews of your app.

• Give you usability feedback, support requests, and important functionality issues direct from your customers.

• In the Developer Console, you can also see the crash reports submitted automatically from Android devices, for debugging and improving your app.


Page 80

Lab Guide

App statistics

• The Developer Console gives you detailed statistics of your app.

• You can view installations of your app measured by unique users and unique devices.

• For user installations, you can view active installs, total installs, daily installs and uninstalls, and metrics about user ratings.

• For devices, you can see active installs as well as daily installs, uninstalls, and upgrades.

• You can zoom into the installation numbers along several dimensions, including Android platform version, device, country, language, app version, and carrier (mobile operator).


Page 81

Lab Guide

Google Analytics SDK for Android

• Makes it easy for developers to collect user engagement data from their apps.

• Before implementing the SDK, make sure you have the following:

– Google Analytics SDK for Android v3 – An Android app that you can use to implement the

Google Analytics– A new Google Analytics app property and view.

• Download SDK:

– https://developers.google.com/analytics/devguides/collection/android/resources


Page 82

https://developers.google.com/analytics/devguides/collection/android/resources

https://developers.google.com/analytics/devguides/collection/android/resources

Lab Guide

• After downloading the SDK, Add the library to your project by right click your project in the Package Explorer and select “Properties”


Page 83

Lab Guide

• In the Properties window, go to the “Java Build Path” page and select the “Libraries” Tab

• Click “Add External JARs…” and select the .jar file in the SDK you have just downloaded


Page 84

Lab Guide

Create a new Google Analytics app property

• https://www.google.com/analytics/

• Create a new Google Analytics account and login

• Create a new application to get a new tracking ID


Page 85

https://www.google.com/analytics/

https://www.google.com/analytics/

Lab Guide

• There are three steps to getting started with the SDK:

– Update AndroidManifest.xml– Add EasyTracker methods– Create your analytics.xml file


Page 86

Lab Guide


• Update your AndroidManifest.xml file by adding the following permissions:

<uses-permission android:name="android.permission.INTERNET" /><uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />


Page 87

Lab Guide

Adding EasyTracker methods

• Add the send methods to the onStart() and onStop() methods of each of your Activities


Page 88

Lab Guide

package com.example.app;

import android.app.Activity;import com.google.analytics.tracking.android.EasyTracker;

/** * An example Activity using Google Analytics and EasyTracker. */public class myTrackedActivity extends Activity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); } @Override public void onStart() { super.onStart(); ... // The rest of your onStart() code. EasyTracker.getInstance(this).activityStart(this); // Add this method. } @Override public void onStop() { super.onStop(); ... // The rest of your onStop() code. EasyTracker.getInstance(this).activityStop(this); // Add this method. }}


Page 89

Lab Guide

Creating your analytics.xml file

• When you use EasyTracker, global configuration settings are managed using resources defined in XML.

• Create a file called analytics.xml in your project's res/values directory and add the following resources:


Page 90

Lab Guide

<?xml version="1.0" encoding="utf-8" ?>

<resources>  <string name="ga_trackingId">UA-XXXX-Y</string>

 <bool name="ga_autoActivityTracking">true</bool>

 <bool name="ga_reportUncaughtExceptions">true</bool></resources>


Page 91

- End -

Technology

Mobile Worshop Lab guide