Mobile Application Development

Transcription

1 Mobile Application Development (Android & ios) Tutorial Emirates Skills /26/ 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 ( ) Android Plugin (ADT: Android Development Tools) Android SDK ( ) Install everything except Additional SDK Platforms, unless you want to 2 1

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

3 ADT Plugin (1) In Eclipse, go to Help -> Install New Software Click Add in top right Enter: Name: ADT Plugin Location: 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

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

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

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 6

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 7

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 8

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 9

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

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 11

12 Steps to create your first Hello World Application Set Up Your Android Environment Install Eclipse Install Android SDK (Android libraries) Install ADT plugin (Android development tools) Create AVD (Android virtual device) 24 12

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

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

15 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. */ 4 public void oncreate(bundle savedinstancestate) 5 { 6 super.oncreate(savedinstancestate); 7 setcontentview(r.layout.main); 8 } 9 } 30 15

16 main.xml 1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout 3 xmlns: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

17 AndroidManifest.xml 1 <?xml version="1.0" encoding="utf-8"?> 2 <manifest 3 xmlns: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

18 3/26/ /26/

19 3/26/

20 3/26/ /26/

21 3/26/ /26/

22 3/26/ /26/

23 3/26/ /26/

24 3/26/ /26/

25 3/26/ /26/

26 3/26/ /26/

27 3/26/ /26/

28 3/26/ /26/

29 3/26/ /26/

30 3/26/ /26/

31 3/26/ /26/

32 Online Resources (itunes) Developing ios 7 Apps for iphone and ipad Native applications developed using web technologies (HTML, CSS, JavaScript) 3/26/

33 Tools Needed ios or Android Phone Node.js ( Text (Web) Editor(e.g. Sublime: Android SDK tools ( Requires jdk ( html) 3/26/ 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/

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/ To install cordova 3/26/

35 Starting a project Ionic start <Name> <type> It is always better not to start a project or an app from nothing. From: use sublime text or any other editing program to edit the page: Views vs pages 3/26/ 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: ml 3/26/