mobile application development - khalifa...

3/26/2015

1

Mobile Application Development

(Android & iOS)

Tutorial

Emirates Skills 2015

3/26/2015 1

Toots Needed • Android-based Phone

• Eclipse ( http://www.eclipse.org/downloads/ )

• Android Plugin (ADT: Android Development Tools)

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

• Install everything except Additional SDK Platforms, unless you want to

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

What is Android?

2

http://www.eclipse.org/downloads/

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

3/26/2015

2

Android SDK

• Once installed open the SDK Manager

• Install the desired packages

• Create an Android Virtual Device (AVD)

3

AVD

4

3/26/2015

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 (2)

6

3/26/2015

4

ADT Plugin (3)

7

ADT Plugin (4)

8

3/26/2015

5

Creating a Project (1)

9

Creating a Project (2)

10

3/26/2015

6

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 • Separates the description of the layout from any actual code that controls it

• Can easily take a UI from one platform to another

12

3/26/2015

7

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 • Use same file name, so can make completely different UIs for the orientations

without modifying any code

14

3/26/2015

8

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

• Also important to define permissions and external libraries, like Google Maps API

16

3/26/2015

9

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 • Otherwise, it should be smart and use whichever one is available

18

3/26/2015

10


19


20

3/26/2015

11


21

USB Debugging

• Should be enabled on phone to use developer features

• In the main apps screen select Settings -> Applications -> Development -> USB debugging (it needs to be checked)

22

3/26/2015

12

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)

Create AVD (Android virtual device)

24

3/26/2015

13

2. Create an Android Project in Eclipse

File → New → Project

Select “Android Project”

Fill in Project details...

25

Name that appears

on device

Directory

name

Class to

automatically

create

Java package

Android

version

26

3/26/2015

14

3. Run the Android Application

Run → Run (or click the “Run” button)

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

27

28

3/26/2015

15

Source

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

4 public void onCreate(Bundle savedInstanceState)

5 {

6 super.onCreate(savedInstanceState);

7 setContentView(R.layout.main);

8 }

9 }

HelloAndroid.java

30

3/26/2015

16

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

31


2 <resources>

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

4 </string>

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

6 </resources>

strings.xml

32

3/26/2015

17


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

33

Tools

• Xcode (on OS X)

• iPhone device (optional)

3/26/2015

18

3/26/2015 35

3/26/2015 36

3/26/2015

19

3/26/2015 37

3/26/2015

20

3/26/2015 39

3/26/2015 40

3/26/2015

21

3/26/2015 41

3/26/2015 42

3/26/2015

22

3/26/2015 43

3/26/2015 44

3/26/2015

23

3/26/2015 45

3/26/2015 46

3/26/2015

24

3/26/2015 47

3/26/2015 48

3/26/2015

25

3/26/2015 49

3/26/2015 50

3/26/2015

26

3/26/2015 51

3/26/2015 52

3/26/2015

27

3/26/2015 53

3/26/2015 54

3/26/2015

28

3/26/2015 55

3/26/2015 56

3/26/2015

29

3/26/2015 57

3/26/2015 58

3/26/2015

30

3/26/2015 59

3/26/2015 60

3/26/2015

31

3/26/2015 61

3/26/2015 62

3/26/2015

32

Online Resources

• http://www.raywenderlich.com/

• (iTunes) Developing iOS 7 Apps for iPhone and iPad

• https://www.codeschool.com

Native applications developed using web technologies (HTML, CSS, JavaScript)

3/26/2015 64

3/26/2015

33

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 • Only HTML and CSS

3/26/2015 66

https://nodejs.org/

http://www.sublimetext.com/2

http://www.sublimetext.com/2

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

http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html





3/26/2015

34

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

To install cordova

3/26/2015 68

3/26/2015

35

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

• For Android, search for apk file, which is the android application of the web app.

• Complete tutorial at: “https://cordova.apache.org/docs/en/4.0.0/guide_cli_index.md.html”

3/26/2015 70

http://ionicframework.com/getting-started/




mobile application development - khalifa...

Documents