mobile application development - khalifa...
TRANSCRIPT
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
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
Running in Eclipse (2)
19
Running in Eclipse (3)
20
3/26/2015
11
Running in Eclipse (4)
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
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>
strings.xml
32
3/26/2015
17
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
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
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