1. SE 390: Software Engineering for Mobile Devices Week 2: Mobile Design Environment Copyright © Steven W. Johnson February 1, 2013

2. Proprietary – Open Source – Licensed Apple: Computers and world view Mobile device architectures Apple versus Android Color primer Install software First Android program Week 2 2

3. Marco Polo: (1254 -1324) traveler, explorer, merchant chronicled travels to China writings started Age of Discovery Inspirational thought for the week: 3 http://en.wikipedia.org/wiki/Marco_Polo

4. Had a general idea of where he was going Knows two facts: if you don’t start walking, you can’t get there if you walk, you’ll get there sooner or later 4 Inspirational thought for the week:

5. Marco Polo’s journey: (1271-1295) 5 http://en.wikipedia.org/wiki/Marco_Polo Inspirational thought for the week:

6. The point: all journeys begin with a single step lots of mistakes along the way second time is always easier than the first if it was easy to do, it would already be done You are Marco Polo: software engineer 6 Inspirational thought for the week:

7. Proprietary (tescilli): designed by company for their use BlackBerry, Apple (hardware, OS) Open source: cooperatively designed for all to use Android and Webkit Licensed (imtiyazlı): purchase a right to use from another party Java, Windows Important terms: 7

8. Research in Motion (RIM), now Blackberry, Ltd. BlackBerry pager: 1999 BlackBerry 957: first smartphone (2000) Went from 43% of US market to 4% (2010 – 2013) ½ of company worth: patents Different phone platforms (OS): 8

9. Devices: 9 http://ca.blackberry.com/software/smartphones.html

10. “iPhone or not iPhone?” iPhone/Apple is versus Android: open system standards-based system: computers: Apple versus PC browsers: IE versus Firefox/others mobile devices: Apple versus Android First big question: What platform? 10

11. Apple, the computer company 11 Apple: system software hardware Consumer applications Manufacturer http://www.macrumors.com/2011/04/10/steve-jobs-authorized-biography-coming-in-2012/

12. Apple didn’t invent computing; they defined personal computing Apple was early leader 12 Apple:

13. Beginning of the end: Windows 3/Win95 13 Apple: http://www.macrumors.com/2011/04/10/steve-jobs-authorized-biography-coming-in-2012/

14. “PC” computer systems: hardware built by many manufacturers ISO standardized components OS: Windows CPU: Intel Applications: many 14 hardware Consumer applications Manufacturer Apple:

15. Apple, the computer company Apple’s new success: iMac iPod iTunes iPad iPhone iStore App Store 15 technology company Apple:

16. Vertical integration: guarantees the system anti-competitive Apple: 16 system software hardware iTunes iStore Consumer applications embedded applications

17. Touch mobile phones: 2007 Merges computing, telecommunications iPhone: a ‘game changer’ 17 Apple: http://appleinsider.com/articles/13/10/04/behind-the-scenes-details-reveal-steve-jobs-first-iphone-announcement

18. 18 déjà vu all over again: Mobile: a new technology Same issue treated the same way

19. Lawrence Peter “Yogi” Berra: déjà vu: already experienced; seen this before déjà vu all over again: 19 In theory there is no difference between theory and practice. In practice there is. Baseball is ninety percent mental and the other half is physical. You better cut the pizza in four pieces because I'm not hungry enough to eat six. Always go to other people's funerals, otherwise they won't come to yours. You can observe a lot by just watching. If you come to a fork in the road, take it. I really didn't say everything I said http://deadspin.com/tag/yogi-berra

20. Main components the same: HD RAM CPU OS Main components are also very different Mobile device architectures: 20

21. Size, power of CPU Massive number of mobile web browsers Support varies wildly Runs on batteries Bandwidth limited Monitor resolution; pixel density Touch (no mouse, no keyboard) Mobile device architectures: 21

22. “Thoughts on Flash” (Jobs: 2010) Mobile content needs to be: ‘full web’ (can be used by everyone) ‘open’ technologies (accessible data/content) reliability, security, performance battery life touch Mobile issues: 22 Jobs, S. (2010, April). Thoughts on Flash. Retrieved from http://www.apple.com/hotnews/thoughts-on-flash/

23. Apple versus Android: Apple uses Cocoa: Objective-C (iOS SDK) Swift Android uses Java, XML Apple versus Android: 23

24. Apple: based in Objective-C or Swift uses iOS SDK historically: about design and usability distribution: App Store Apple versus Android: 24 http://www.devworx.in/news/ios/apples-app-store-has-generated-300000-jobs-till-date-138711.html

25. Apple apps made using Xcode Xcode is iOS only** Apple versus Android: 25 http://www.chuquimianproductions.com/about

26. Objective-C: Smalltalk on top of C C compiles in Objective-C, not reverse Apple versus Android: 26 hello.m #import int main( int argc, const char *argv[] ) { printf( "hello world\n" ); return 0; } You use #import instead of #include in Objective-C The default file extention for Objective-C is.m http://www.appcoda.com/hello-world-app-using-xcode-5-xib/

27. Combines: power and portability of Linux reliability/portability of high-level language Apple versus Android: 27

28. Lots of ways to make Android applications: Android Development Kit (command line tool) Android IDE (AIDE) Eclipse Maven (plugin from Apache) Visual Studio (in C/C#) Apple versus Android: 28

29. Android: uses Eclipse + Android SDK based in Java + XML descriptions historically: x-platform inter-operability Apple versus Android: 29

30. Android Studio: Eclipse-based IntelliJ IDEA (Java-based IDE) + XML Gradle-based build support offers support for wearable devices Apple versus Android: 30

31. Android Studio issues: very new software it is the future, but maybe not present version used: 1.01 missing wizards, help of Android SDK Apple versus Android: 31

32. Apple contains issues by: apple has limited products control iOS, software centrally managed Android’s problems uncontained: updates to the OS device incompatibilities driven by innovation, marketplace 32 Apple versus Android:

33. Open source: ‘pure capitalism’ Apple: ‘pure socialism’ Google/Nexus: “Blended approach” 33 Apple versus Android:

34. Example: iPhone App Store iPhone apps rigorously tested takes months, if not years to approve an effective monopoly 34 Jackson, W (2011). Android apps for absolute beginners. Apress: New York, NY. Apple versus Android:

35. Much easier to get Android app published Google: pay $25 upload.apk file specify free or paid download Double-edged sword 35 Jackson, W (2011). Android apps for absolute beginners. Apress: New York, NY. Apple versus Android:

36. Break 36

37. Install the fonts for the slides Install fonts: 37

38. Coral_8_9_2 is a web server (database) Most likely already installed… Used in Week 11, install then if needed Install fonts: 38

39. Eclipse installed Week 12 with mobile Install fonts: 39

40. Old software was ‘ADT’ (Development Tools) Used Eclipse as IDE Android: 40

41. New software is Android Studio (May 2013) Google’s platform to make Android apps Versions: 0.1 (May 2013) 0.8 (June 2014) 1.0 (December 2014) 1.01 (today) Android: 41

42. Based in: IntelliJ IDEA (Java-based IDE) Gradle-based build support offers support for wearable devices Android Studio: 42

43. Android requires Java JDK JDK 6: 1.6 (very dated) JDK 7: 1.7 (needed for Android 5.0 & higher) JDK 8: 1.8 Test for Java: Start – cmd: ‘java -version’ Java JDK (Java SE Development Kit): 43

44. If Java JDK not found look in ‘Program Files/Java’ Android Studio: 44

45. If Java, but no version – set Environment variable Start – Computer – rt. Click - Properties Android Studio: 45

46. Type in your path as it shows on your computer Android Studio: 46

47. Install Java JDK 8: double-click on ‘jxpiinstall.exe’ http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html jdk-8u31-windows-x64.exe 47 Java JDK (Java SE Development Kit):

48. Install Android Studio Double-click on executable Android Studio: 48

49. Install Android Studio Double-click on executable Android Studio: 49

50. Install SDK Packages Software this week: 50

51. Android Studio (open if needed) Software this week: 51

52. Install emulators (accept license) Software this week: 52

53. Install Google Play Services (accept license) Software this week: 53

54. Close SDK manager when installation complete Close Android Studio To open Android Studio: Android Studio folder other shortcuts based on your settings Getting Started: 54

55. Open Android Studio Installing software: 55

56. Open Android Studio 56 Lab: Hello You in Eclipse

58. Package name: unique identifier cannot change once defined not publicly shown Purpose: multiple versions of same app ‘the same’ Default: domain name reverse plus app identifiers com.example.hellosteve is placeholder Lab: Hello You in Eclipse 58

59. Lab: Hello You in Eclipse

60. Compilation settings: Allows you to set backwards compatibility Target SDK: highest supported version Minimum SDK: lowest supported version Compile with: Target SDK associated API is shown choices: 1.0 – 4.2 Theme: main color scheme Lab: Hello You in Eclipse 60

61. Compilation settings: Authors: 1.5 IDE: 2.2 All features used must be defined in both Lab: Hello You in Eclipse 61 1.02.03.04.0 4.2 Current Standard “Sweet Spot” 1.5 “Sweet Spot” 2.2

62. Trade-off using a low version number: increases number of devices increases backwards compatibility decreases features/tools decreases forward compatibility Lab: Hello You in Eclipse 62 1.03.04.0 4.2 Current Standard 1.52.2

63. Lab: Hello You in Eclipse

64. Activity: a single, focused thing Activity as a whole: a user interface screen Activity: moral equal to a web page ‘Sourcecode.java’ (logic) ‘screen.xml’ (also called a layout) Activity class: ‘Sourcecode’ Activity layout: ‘screen’ Lab: Hello You in Eclipse 64 http://developer.android.com/reference/android/app/Activity.html

65. Turn on Android; File – New – Android App. Building can take a long time (watch ‘indexing’) Lab: Hello You in Eclipse 65

66. Basic file with ‘Hello world’ text: 66 Lab: Hello You in Eclipse

67. Created files: 67 Structure of page: locates ‘TextView’ Lab: Hello You in Eclipse

68. 68 Lab: Hello You in Eclipse

69. Layout holds definitions of content Green text is values of variables placed there Lab: Hello You in Eclipse 69 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".Sourcecode"> <TextView android:text="@string/hello_world" android:layout_width="wrap_content" android:layout_height="wrap_content" />

70. ‘Hello world’ can be edited in ‘strings.xml’ Lab: Hello You in Eclipse 70

71. ‘Hello world’ can be edited in ‘strings.xml’ Lab: Hello You in Eclipse 71

72. strings.xml Lab: Hello You in Eclipse 72 HelloSteve Settings Hello world! android:text="@string/hello_world"

73. Created files: 73 Structure of page: locates ‘TextView’ Coding for page: ‘programming’ Lab: Hello You in Eclipse

74. 74 Lab: Hello You in Eclipse

75. Created files: 75 Structure of page: locates ‘TextView’ Coding for page: ‘programming’ Manifest: main parts of the application Lab: Hello You in Eclipse

76. 76 Lab: Hello You in Eclipse

77. Created files: 77 Structure of page: locates ‘TextView’ Coding for page: ‘programming’ Manifest: main parts of the application Compiles and builds app Lab: Hello You in Eclipse

78. Created files: 78 Structure of page: locates ‘TextView’ Coding for page: ‘programming’ Manifest: main parts of the application Compiles and builds app Defines text ‘Hello world’ Lab: Hello You in Eclipse

79. 79 Lab: Hello You in Eclipse

80. Run on your own device Create an emulator (Android Virtual Device) Lab: emulators 80

81. Run on your own device: Big advantage: escape the emulator plug device into computer using USB enable USB debugging: Settings – Applications – Development 3.2: Settings – Applications - Development 4.0: Settings – Developer options 4.2: Settings – About Phone tap ‘Build Number’ 7 times 81 Lab: emulators

82. Plug computer/device by USB Run on your own device: open ‘Developer options’ turn on ‘USB debugging’ 82 Lab: emulators www.phonearena.com

83. May need to install driver on computer: http://developer.android.com/tools/extras/oem-usb.html#Drivers find manufacturer from list find product at manufacturer’s site download the USB driver install on your computer 83 Lab: emulators

84. 84 Lab: emulators

85. Run on your own device: ‘Choose a running device’ select your device from list 85 Lab: emulators

86. Application now displays on mobile device 86 Lab: emulators

87. Create an emulator (Android Virtual Device) Tools – Android – AVD Manager or AVD icon 87 Lab: emulators

88. Currently have two emulators: Nexus 5: huge (HD-sized) Phone (missing API 17 package,.ini corrupt) Delete ‘Phone’ (rt. Click – Delete) Add two emulators: Nexus One API 17 Tablet 10.1in 800 x 1280 API 21 88 Lab: emulators

89. Click ‘Create Virtual Device’ Lab: emulators 89

90. Add the small phone 90 Lab: emulators

91. Click on ‘Download’ for ‘Jelly Bean’ 91 Lab: emulators

92. Select ‘Jelly Bean 17 x86’ 92 Lab: emulators

93. View configuration 93 Lab: emulators

94. Emulator for tablet: ‘Create Virtual Device…’ 94 Lab: emulators

95. Emulator for tablet: ‘Create Virtual Device…’ 95 Lab: emulators

96. Emulator for tablet: ‘Create Virtual Device…’ 96 Lab: emulators

97. Fix AVD Name (remove ” ) 97 Lab: emulators

98. Three emulators when done 98 Lab: emulators

99. SE 390: Software Engineering for Mobile Devices Week 2: Mobile Design Environment Copyright © Steven W. Johnson February 1, 2013

100. Install software Labs: hello you emulators multi-line Assignment: list Week 2 100

101. The number of transistors in a CPU doubles every 18 to 24 months Technology grows at an exponential rate Moore’s Law: 101 http://www.intel.com/pressroom/kits/events/moores_law_40th/ www.loveaquote.com

102. Value of a network is proportional to the square of the number of connected users of the system Value is based in the square of use Apply this to “more cell phones than toothbrushes” Metcalfe’s Law: 102 www.tri-tel.com

103. Growth of mobile and desktop hardware: CPU cycles size of RAM/HD speed of data display size display color density Hardware/software issues are similar déjà vu all over again: 103

104. Growth of mobile hardware: “desktop generation” (80’s-2010) “mobile generation” (2000 - ?) déjà vu all over again: 104

105. Monitors and color: 1980s: 2-bit color: ‘monochrome’ One color (usually white) against black Hardware progression: 105

106. Monitors and color: 8-bit color: ‘hundreds’ (256 possible colors) 16-bit color: ‘thousands’ (high color) 5 bits (32 choices) for each primary color 106 Macintosh: 1984 Hardware progression:

107. Monitors and color: 24-bit color: ‘millions’ (true) 32-bit color: ‘millions’ (added alpha channel) 107 Hardware progression:

108. Mobile devices: 2-bit 12-bit colorNokia 6800 16-bit colorBlackBerry Bold 9000 18-bit colorSamsung Alias 24-bit coloriPhone, Palm Pre 108 Hardware progression:

109. 00 33 66 99 CC FF. color: #. col 109.classSelector { color: # |CC|CC; ‘Web safe colors’ are same in 16 or 24-bit “Same”: no dithering Color primer:

110. Hexadecimal color has 3 (or 4) color channels: red FA (250) green 93 (147) blue CF (207) alpha.4 (40% opaque) Color primer: 110.classSelector { color: #FA93CF; } 0255

111. Allowable color models in Android: #AARRGGBB #ARGB #RRGGBB #RGB Alpha (color masks) Color primer: 111

112. Performance in rendering (ms): Color primer: 112 Model16-bit16-bit dithered32-bit #ARGB_86.07.52.0 #ARGB_44.05.03.5 #RGB_60.5 6.0 Romain Guy and Chet Haase (Google), “Android Graphics and Animations”

113. Week 2 in-class files colors.html Test swatch Color primer: 113

114. Screen resolutions of Android: QVGA (Quarter VGA: 240 x 320px) HVGA (Half VGA: 320 x 480px) WVGA (Wide VGA: 800 x 480px) WXGA (800 x 1280px) XXHDPI (1920 x 1080px) Other resolutions can be defined Screen resolutions 114

115. Capitalization of ‘TextView’: appears to not be important for Android TextView, Textview, textview are all the same TextView is the control/widget in ‘screen’ textView is the Java variable name Java is case sensitive Android.Developer uses ‘TextView’, ‘Button’, etc Java and Android naming 115

116. Package names: backwards domain, lower case Classes: use nouns, first letter capital: ‘Banks’ Methods: verbs, first letter small: runFast(); Variables: first letter lowercase: iTunes Constants: ALL_CAPS Java and Android naming 116

117. XML resource names are your business: be consistent; use descriptive names don’t repeat yourself ids: Java variable: theVariable Java and Android naming 117 8dp

118. What’s new with this lab? multiple lines within a TextView change the app icon (‘logo.png’) use ‘gravity’ (positioning) Lab: multi-line 118

119. Create 4 lines of text centered on screen Lab: multi-line 119

120. HTML: and for text Android: ‘textView’ HTML: Android: ‘editText’ Lab: multi-line 120

121. Default project generates one ‘textView’ Widgets/controls added to layout (screen.xml): drag and drop copy/paste Lab: multi-line 121

122. Lab: multi-line 122 Drag-and-drop a textView

123. textView holds undefined “New Text” Create a string in ‘strings.xml’ and add Lab: multi-line <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" <TextView android:text="@string/hello_world" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/textView" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="New Text" android:id="@+id/textView" android:layout_below="@+id/textView" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" android:layout_marginTop="37dp" />

124. Like HTML: each element has unique id Double-click on element to change text, id Lab: multi-line

125. Gravity = alignment Lab: multi-line 125 left center right top bottom center-vertical center-horizontal

126. android:gravity="center" Gravity applied to perspective of element layout: android:gravity (center on the page) TextView: android:gravity (center within the TextView) Lab: multi-line 126

127. layout_gravity: places element inside its parent (page-based) places the TextView on the page gravity: places content inside view (widget-based) Lab: multi-line 127 text android:gravity="center"

128. Modify code directly Lab: multi-line 128

129. Fill: contents fills container (horizontal + vertical) Like ‘width: 100%’ in CSS Lab: multi-line 129

130. Multi-line text entries (gravity set to ‘center’) 130 Lab: multi-line

131. Multi-line text entries (gravity set to ‘center’): 131 Lab: multi-line

132. Collapse ‘HelloYou’ project; close all files File – New Project … 132 Lab: multi-line

133. 133 Lab: multi-line

134. 134 Lab: multi-line

135. Change the icon name of icon: ic_launcher location: drawable New icon: ‘logo.png’ (Week 2 in-class files) On import: 4 different-sized copies made Change icon: right-click on ‘res’ – New – Image Asset browse in ‘logo.png’ 135 Lab: multi-line

136. 136 Lab: multi-line right-click on ‘res’ – New – Image Asset

137. 137 Lab: multi-line

138. So far: 138 Lab: multi-line

139. Use one TextView with one string Use one TextView with 4 strings Use 4 TextViews 139 Lab: multi-line android:text=“one\ntwo\nthree\nfour” android:text=“one” android:text=“two” android:text=“three” android:text=“four” <TextView android:text=“one” /> <TextView android:text=“two” /> <TextView android:text=“three” /> <TextView android:text=“four” />

140. ‘strings.xml’: Change the string to ‘One\nTwo\nThree\nFour’ Save ‘strings.xml’ and ‘screen.xml’ 140 Lab: multi-line Multi-Line Settings One\nTwo\nThree\nFour

141. Change gravity to ‘Center’ 141 Lab: multi-line

142. Change gravity to ‘Center’ 142 Lab: multi-line <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context=".Sourcecode" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/hello_world" />

143. 143 Lab: multi-line

144. 1. Proprietary means: A.Has exclusive (özel) rights; owns what they use B.A collaborative (işbirlikçi) effort; used without payment C.Developed by one company for use by another company Quiz: 144

145. 2. Mobile devices differ from desktop/laptop devices in that : A.They have a different architecture (for example, no CPU) B.Their components are not as powerful/large/robust C.They don’t use the same application software D.Their operating systems are fundamentally different E.Mobile devices use touch instead of a mouse F.Mobile devices depend solely on batteries for power Quiz: 145

146. 3. Two important systems for smartphones and tablets are: A.Windows and Apple B.Apple and Blackberry C.Windows and Nokia D.Android and Windows E.Apple and Android Quiz: 146

147. 4. The use of mobile devices such as smartphones is an example of: A.Metcalf’s Law B.Gilder’s Law C.Moore’s Law D.Smith’s Law Quiz: 147

148. 5. Android is based in this operating system : A.Windows B.iOS C.Linux Quiz: 148

149. 6. Android (as done in this course) combines: A.C or C# B.Java C.PHP D.HTML E.XML F.CSS G.JS Quiz: 149

150. Make five TextViews: Drag-and-drop from Palette copy/paste TextView give unique id to each Assignment: List 150

151. New string: use ‘Open Editor’ or manually choose ‘String’ has: unique name unique food Assignment: List 151

152. Create an Android app Application name: 5Foods Project name: 5Foods Package name: (ex: com.yourname.lastname.5Foods) Text: your 5 favorite foods, one per TextView Position text in Upper Left, Upper Right, Center, Lower Left, and Lower Right. One food in each Location. Assignment: List 152

153. Completed assignment Assignment: List 153

154. SE 390: Software Engineering for Mobile Devices Week 2: Mobile Design Environment Copyright © Steven W. Johnson February 1, 2013