Mobile Application Development

Mobile Application

Development

(Android & iOS)

Tutorial Emirates Skills 2015 3/26/2015 1

Toots Needed

• Android Plugin (ADT: Android Development Tools)

 An open source Linux-based operating system intended for mobile computing platforms  Includes a Java API for developing applications

Android SDK

• Once installed open the SDK Manager • Install the desired packages

• Create an Android Virtual Device (AVD)

3

ADT Plugin (1)

• In Eclipse, go to Help -> Install New Software • Click ‘Add’ in top right

• Enter:

• Name: ADT Plugin

• Location: https://dl-ssl.google.com/android/eclipse/

• Click OK, then select ‘Developer Tools’, click Next • Click Next and then Finish

• Afterwards, restart Eclipse

• Specify SDK location (next 3 slides)

• Must do this every time start a new project in a new location (at least in Windows)

5

ADT Plugin (3)

7

Creating a Project (1)

9

Project Components

• src – your source code

• gen – auto-generated code (usually just R.java) • Included libraries

• Resources

• Drawables (like .png images) • Layouts

• Values (like strings)

• Manifest file

11

XML

• Used to define some of the resources

• Layouts (UI) • Strings

• Manifest file

• Shouldn’t usually have to edit it directly, Eclipse can do that for you • Preferred way of creating UIs

R Class

• Auto-generated: you shouldn’t edit it • Contains IDs of the project resources • Enforces good software engineering

• Use findViewById and Resources object to get access to the resources

• Ex. Button b = (Button)findViewById(R.id.button1) • Ex. getResources().getString(R.string.hello));

13

Layouts (1)

• Eclipse has a great UI creator

• Generates the XML for you

• Composed of View objects

• Can be specified for portrait and landscape mode

Layouts (2)

15

Manifest File (1)

• Contains characteristics about your application

• When have more than one Activity in app, NEED to specify it in manifest file

• Go to graphical view of the manifest file • Add an Activity in the bottom right • Browse for the name of the activity

• Need to specify Services and other components too

Manifest File (2) – Adding an Activity

17

Running in Eclipse (1)

• Similar to launching a regular Java app, use the launch configurations • Specify an Android Application and create a new one

• Specify activity to be run

• Can select a manual option, so each time program is run, you are asked whether you want to use the actual phone or the emulator

Running in Eclipse (2)

19

Running in Eclipse (4)

21

USB Debugging

• Should be enabled on phone to use developer features • In the main apps screen select Settings -> Applications ->

Steps to create your first

Hello World Application

23

1. Set Up Your Android Environment

 http://developer.android.com/sdk

 Install Eclipse

 Install Android SDK (Android libraries)

 Install ADT plugin (Android development tools)

2. Create an Android Project in Eclipse

 File → New → Project

 Select “Android Project”

 Fill in Project details...

25

3. Run the Android Application

 Select “Android Application”

 The emulator may take a few minutes to start, so be patient!

 You don't need to restart the emulator when you have a new version of your application

code Auto-generated code UI layout String constants Configuration 29

1 public class HelloAndroid extends Activity {

2 /** Called when the activity is first created. */

3 @Override

1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout 3 xmlns:android="http://schemas.android.com/apk/res/android" 4 android:orientation="vertical" 5 android:layout_width="fill_parent" 6 android:layout_height="fill_parent" 7 > 8 <TextView 9 android:layout_width="fill_parent" 10 android:layout_height="wrap_content" 11 android:text="@string/hello " 12 /> 13 </LinearLayout>

main.xml

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

2 <resources>

3 <string name="hello">Hello World, HelloAndroid! 4 </string>

5 <string name="app_name">Hello, Android</string>

6 </resources>

1 <?xml version="1.0" encoding="utf-8"?> 2 <manifest 3 xmlns:android="http://schemas.android.com/apk/res/android" 4 package="edu.upenn.cis542" 5 android:versionCode="1" 6 android:versionName="1.0">

7 <application android:icon="@drawable/icon"

8 android:label="@string/app_name">

9 <activity android:name=".HelloAndroid"

10 android:label="@string/app_name"> 11 <intent-filter> 12 <action 13 android:name="android.intent.action.MAIN" /> 14 <category 15 android:name="android.intent.category.LAUNCHER"/> 16 </intent-filter> 17 </activity> 18 </application> 19 </manifest>

AndroidManifest.xml

Tools

Online Resources

• (iTunes) Developing iOS 7 Apps for iPhone and iPad • https://www.codeschool.com

Tools Needed

• iOS or Android Phone • Node.js (https://nodejs.org/)

• Text (Web) Editor(e.g. Sublime: http://www.sublimetext.com/2)

• Android SDK tools (http://developer.android.com/sdk/index.html)

• Requires jdk ( http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html)

3/26/2015 65

Frameworks

• Ionic framework

• It uses HTML, CSS and AngularJS (an MVC framework for the web)

• Bootstrap framework

• It uses HTML, CSS and jQuery (JavaScript framework)

• Polymer

Ionic Framework

• Why ionic?

• Uses AngularJS (MVC for the web). • Easy to install cordova in an ionic app.

• Gives the look of a native mobile application.

3/26/2015 67

Starting a project

• Ionic start <Name> <type>

• It is always better not to start a project or an app from nothing. From: http://ionicframework.com/getting-started/#

• use sublime text or any other editing program to edit the page: • Views vs pages

3/26/2015 69

• Follow the next instructions:

• After creating the page from the command window: Ex. “ionic start <name> blank”.

• “cd <name>”.

• “ionic platform add android”.

• Also add ios, wp8, blackberry10, firefox, etc.

• Edit the HTML page • “cordova build”

• Or “cordova build <platformName>” for a specific platform to be built, like ios, android, etc.

• Go to the folder <name> and search for final mobile application project