Mobile Application Development

Mobile Application Development (Android & ios) Tutorial Emirates Skills 2015 3/26/2015 1 What is Android? An open source Linux-based operating system intended for mobile computing platforms Includes a Java API for developing applications 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 2 1

Android SDK Once installed open the SDK Manager Install the desired packages Create an Android Virtual Device (AVD) 3 AVD 4 2

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

ADT Plugin (3) 7 ADT Plugin (4) 8 4

Creating a Project (1) 9 Creating a Project (2) 10 5

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 6

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 7

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 8

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 9

Running in Eclipse (2) 19 Running in Eclipse (3) 20 10

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 11

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 12

2. Create an Android Project in Eclipse File New Project Select Android Project Fill in Project details... 25 Directory name Android version Name that appears on device Java package Class to automatically create 26 13

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 14

Source code Auto-generated code String constants UI layout Configuration 29 HelloAndroid.java 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 } 30 15

main.xml 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> 31 strings.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> 32 16

AndroidManifest.xml 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> 33 Tools Xcode (on OS X) iphone device (optional) 17

3/26/2015 35 3/26/2015 36 18

3/26/2015 37 19

3/26/2015 39 3/26/2015 40 20

3/26/2015 41 3/26/2015 42 21

3/26/2015 43 3/26/2015 44 22

3/26/2015 45 3/26/2015 46 23

3/26/2015 47 3/26/2015 48 24

3/26/2015 49 3/26/2015 50 25

3/26/2015 51 3/26/2015 52 26

3/26/2015 53 3/26/2015 54 27

3/26/2015 55 3/26/2015 56 28

3/26/2015 57 3/26/2015 58 29

3/26/2015 59 3/26/2015 60 30

3/26/2015 61 3/26/2015 62 31

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 32

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 33

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 34

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.ht ml 3/26/2015 70 35