1. Social Media Apps Programming Min-Yuh Day, Ph.D. Assistant Professor Department of Information Management Tamkang University http://mail.tku.edu.tw/myday Tamkang University 2015-09-30 1041SMAP03 TLMXM1A (8687) (M2143) (Fall 2015) (MIS MBA) (2 Credits, Elective) [Full English Course] Wed 9,10 (16:10-18:00) B310 Developing Android Native Apps with Java (Android Studio) (MIT App Inventor)

2. Course Schedule (1/3) Week Date Subject/Topics 1 2015/09/16 Course Orientation and Introduction to Social Media and Mobile Apps Programming 2 2015/09/23 Introduction to Android / iOS Apps Programming 3 2015/09/30 Developing Android Native Apps with Java (Android Studio) (MIT App Inventor) 4 2015/10/07 Developing iPhone / iPad Native Apps with Swift (XCode) 5 2015/10/14 Mobile Apps using HTML5/CSS3/JavaScript 6 2015/10/21 jQuery Mobile 2

3. Course Schedule (2/3) Week Date Subject/Topics 7 2015/10/28 Create Hybrid Apps with Phonegap 8 2015/11/04 jQuery Mobile/Phonegap 9 2015/11/11 jQuery Mobile/Phonegap 10 2015/11/18 Midterm Exam Week (Midterm Project Report) 11 2015/11/25 Case Study on Social Media Apps Programming and Marketing in Google Play and App Store 12 2015/12/02 Google Cloud Platform 3

4. Course Schedule (3/3) Week Date Subject/Topics 13 2015/12/09 Google App Engine 14 2015/12/16 Google Map API 15 2015/12/23 Facebook API (Facebook JavaScript SDK) (Integrate Facebook with iOS/Android Apps) 16 2015/12/30 Twitter API 17 2016/01/06 Final Project Presentation 18 2016/01/13 Final Exam Week (Final Project Presentation) 4

5. Android /iOS Apps Programming 5 Native Apps Mobile Web Apps Hybrid Apps

6. App Development Comparison 6 Source: http://www.scribd.com/doc/50805466/Native-Web-or-Hybrid-Mobile-App-Developmenthttp://www.scribd.com/doc/50805466/Native-Web-or-Hybrid-Mobile-App-Development Web Apps Hybrid Apps Native Apps Full Fast Mandatory Expensive Partial Very Fast Available Reasonable Not Available None Reasonable Available Native Speed as Necessary Full Low Overhead Device Access Speed Development Cost App Store Approval Process

7. Outline Developing Android Native Apps with Java – Android Studio – Eclipse – Android Developer Tools (ADT) Bundle – Building Your First Android App MIT App Inventor 7

8. Native App Development 8 Source: http://www.scribd.com/doc/50805466/Native-Web-or-Hybrid-Mobile-App-Developmenthttp://www.scribd.com/doc/50805466/Native-Web-or-Hybrid-Mobile-App-Development

9. Android - Native App Development 9 Source: http://www.scribd.com/doc/50805466/Native-Web-or-Hybrid-Mobile-App-Developmenthttp://www.scribd.com/doc/50805466/Native-Web-or-Hybrid-Mobile-App-Development

10. 10 Native App – Interaction with Mobile Device Source: http://www.scribd.com/doc/50805466/Native-Web-or-Hybrid-Mobile-App-Developmenthttp://www.scribd.com/doc/50805466/Native-Web-or-Hybrid-Mobile-App-Development

11. 11 http://www.android.com/ Android

12. 12 http://www.android.com/ Android

13. Android 5.1 Lollipop 13 Source: http://developer.android.com/about/versions/lollipop.htmlhttp://developer.android.com/about/versions/lollipop.html

14. 14 Android Platform http://developer.android.com/about/dashboards/index.html Data collected during a 7-day period ending on September 7, 2015.

15. Android Platform 15 http://developer.android.com/about/dashboards/index.html Data collected during a 7-day period ending on September 7, 2015.

16. Android Screen Sizes and Densities 16 http://developer.android.com/about/dashboards/index.html Data collected during a 7-day period ending on September 7, 2015.

17. Android Screen Sizes and Densities 17 http://developer.android.com/guide/practices/screens_support.html

18. Android Development Environment 18 Android Native Apps JDK (Java Development Kit) Android Studio http://www.oracle.com/technetwork/java/javase/downloads/index.html http://developer.android.com/sdk/index.html 1 2

19. 19 http://www.oracle.com/technetwork/java/javase/downloads/index.html JDK (Java Development Kit) 1

20. Android Studio 20 http://developer.android.com/sdk/index.html 2

21. Android Development Environment 21 Android Native Apps JDK (Java Development Kit) ADT Bundle (Android Developer Tools Bundle) (Eclipse + ADT plugin + Android SDK + Android Platform + emulator ) ADT Bundle (Android Developer Tools Bundle) (Eclipse + ADT plugin + Android SDK + Android Platform + emulator ) http://www.oracle.com/technetwork/java/javase/downloads/index.html http://developer.android.com/sdk/index.html 1 2

22. JDK (Java Development Kit) 22 http://www.oracle.com/technetwork/java/javase/downloads/index.html 1

23. ADT Bundle 23 http://developer.android.com/sdk/index.html 2

24. Option 1. Eclipse ADT Bundle Option 2. Android Studio 24 Eclipse ADT Bundle Android Studio

25. Building Your First Android App 1.Download the Android SDK. – http://developer.android.com/sdk/index.html http://developer.android.com/sdk/index.html 2.Install the ADT plugin for Eclipse 3.Download the latest SDK tools and platforms using the SDK Manager. 25 ADT Bundle (Android Developer Tools Bundle) (Eclipse + ADT plugin + Android SDK + Android Platform + emulator ) ADT Bundle (Android Developer Tools Bundle) (Eclipse + ADT plugin + Android SDK + Android Platform + emulator ) http://developer.android.com/training/basics/firstapp/index.html

26. ADT Bundle ADT (Android Developer Tools) With a single download, the ADT Bundle includes everything you need to begin developing apps: 1.Eclipse + ADT plugin 2.Android SDK Tools 3.Android Platform-tools 4.The latest Android platform 5.The latest Android system image for the emulator 26 http://developer.android.com/training/basics/firstapp/index.html

27. ADT 27

28. 28 Get the Android SDK Eclipse ADT Bundle

29. Installing the Eclipse ADT Bundle 1.Unpack the ZIP file (named adt-bundle-.zip) and save it to an appropriate location, such as a "Development" directory in your home directory. 2.Open the adt-bundle- /eclipse/ directory and launch Eclipse. 29 Source: http://developer.android.com/sdk/installing/index.html?pkg=adthttp://developer.android.com/sdk/installing/index.html?pkg=adt

30. Get Android Studio Beta Android Studio is a new IDE powered by IntelliJ that provides new features and improvements over ADT. It's currently in beta but will be the official Android IDE once it's ready. If you're a new Android developer, you should consider starting with Android Studio, because the ADT plugin for Eclipse is no longer in active development. 30 Source: http://developer.android.com/sdk/installing/index.html?pkg=adthttp://developer.android.com/sdk/installing/index.html?pkg=adt

31. 31 Source: http://developer.android.com/sdk/installing/index.html?pkg=adthttp://developer.android.com/sdk/installing/index.html?pkg=adt

32. 32 Source: http://developer.android.com/sdk/installing/adding-packages.htmlhttp://developer.android.com/sdk/installing/adding-packages.html

33. 33 Source: http://developer.android.com/sdk/installing/adding-packages.htmlhttp://developer.android.com/sdk/installing/adding-packages.html

34. 34 Source: http://developer.android.com/sdk/installing/adding-packages.htmlhttp://developer.android.com/sdk/installing/adding-packages.html

35. 35 Source: http://developer.android.com/sdk/installing/adding-packages.htmlhttp://developer.android.com/sdk/installing/adding-packages.html

36. 36 Source: http://developer.android.com/sdk/installing/adding-packages.htmlhttp://developer.android.com/sdk/installing/adding-packages.html

37. 37 Source: http://developer.android.com/sdk/installing/adding-packages.htmlhttp://developer.android.com/sdk/installing/adding-packages.html

38. 38 Source: http://developer.android.com/training/basics/firstapp/index.htmlhttp://developer.android.com/training/basics/firstapp/index.html

39. Android App Building Blocks 39 Source: http://developer.android.com/guide/components/fundamentals.html Activity Service Content Provider Broadcast Receiver 1 2 3 4

40. Android App Building Blocks 40 Source: http://developer.android.com/guide/components/fundamentals.html Activity Service Content Provider Broadcast Receiver Intent 1 2 3 4 activated by an asynchronous message

41. Android App Building Blocks 41 Source: http://developer.android.com/guide/components/fundamentals.html Activity Service Content Provider Broadcast Receiver 1 2 3 4 a single screen with a user interface

42. Android App Building Blocks 42 Source: http://developer.android.com/guide/components/fundamentals.html Activity Service Content Provider Broadcast Receiver 1 2 3 4 runs in the background to perform long- running operations or to perform work for remote processes

43. Android App Building Blocks 43 Source: http://developer.android.com/guide/components/fundamentals.html Activity Service Content Provider Broadcast Receiver 1 2 3 4 responds to system-wide broadcast announcements

44. Android App Building Blocks 44 Source: http://developer.android.com/guide/components/fundamentals.html Activity Service Content Provider Broadcast Receiver 1 2 3 4 manages a shared set of application data

45. Developing Android Apps 1.Screen Layout Design: Views and Layouts – Graphical Layout – activity_main.xml 2.App Components (Activity) Programming – MainActivity.java 45

46. Building a Simple User Interface Create a Linear Layout Add a Text Field Add String Resources Add a Button Make the Input Box Fill in the Screen Width 46 Source: http://developer.android.com/training/basics/firstapp/building-ui.htmlhttp://developer.android.com/training/basics/firstapp/building-ui.html

47. Building a Simple User Interface 47 ViewGroup View ViewGroup Source: http://developer.android.com/training/basics/firstapp/building-ui.htmlhttp://developer.android.com/training/basics/firstapp/building-ui.html

48. Building a Simple User Interface 48 Source: http://developer.android.com/training/basics/firstapp/building-ui.htmlhttp://developer.android.com/training/basics/firstapp/building-ui.html ViewGroup View ViewGroup TextView View Button View

49. Android App Activity Lifecycle 49 Source: http://developer.android.com/reference/android/app/Activity.html http://developer.android.com/reference/android/app/Activity.html

50. The development process for Android applications 50 Source: http://developer.android.com/tools/workflow/index.htmlhttp://developer.android.com/tools/workflow/index.html

51. 51 1. Setup

52. 52 2. Development

53. 53 3. Debugging and Testing

54. 54 4. Publishing

55. Demo: Building Your First Android App with Android Studio 55

56. My First Android App 56

57. Java SE Development Kit (JDK) 57 http://www.oracle.com/technetwork/java/javase/downloads/index.html

58. 58 Java SE Development Kit (JDK)

59. 59 Java SE Development Kit (JDK)

60. 60 Java SE Development Kit (JDK)

61. Java Development Kit 61

62. Install JDK 8 62

63. 63 Install JDK 8

64. 64 Install JDK 8

65. 65 Install JDK 8

66. Android Studio 66 http://developer.android.com/sdk/index.html

67. 67 Android Studio

68. 68 Android Studio

69. 69 Android Studio

70. 70 Installing Android Studio

71. 71

72. Android Studio 72

73. 73

74. 74

75. 75

76. 76

77. 77

78. 78

79. 79

80. 80

81. 81

82. 82

83. 83

84. 84

85. 85

86. 86

87. 87

88. 88

89. 89

90. 90

91. 91

92. 92

93. 93

94. 94

95. 95

96. 96

97. 97

98. 98

99. 99

100. 100

101. 101

102. 102

103. 103

104. 104

105. 105

106. 106

107. 107

108. My First Android App 108

109. Demo: Building Your First Android App with Android Developer Tools (ADT) 109

110. 110

111. 111 http://developer.android.com/training/basics/firstapp/index.html

112. 112

113. 113 http://developer.android.com/training/basics/firstapp/creating-project.html

114. 114

115. 115

116. 116

117. 117

118. 118

119. 119

120. 120

121. 121

122. 122

123. 123

124. 124

125. 125

126. 126

127. 127

128. 128

129. 129

130. 130

131. 131

132. 132

133. 133

134. 134

135. 135

136. 136

137. 137

138. 138 http://developer.android.com/training/basics/firstapp/starting-activity.html

139. 139

140. 140

141. 141

142. 142

143. activity_main.xml 143 <LinearLayout 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:orientation="horizontal"> <EditText android:id="@+id/edit_message" android:layout_weight="1" android:layout_width="0dp" android:layout_height="wrap_content" android:hint="@string/edit_message" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/button_send" android:onClick="sendMessage" />

144. activity_display_message.xml 144 <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: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=".DisplayMessageActivity" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/hello_world" />

145. strings.xml 145 My First App Settings Hello world! Enter a message Send MainActivity My Message

146. AndroidManifest.xml 146 <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="tw.edu.tku.im.smap2013.imyday.myfirstapp" android:versionCode="1" android:versionName="1.0" > <uses-sdk android:minSdkVersion="8" android:targetSdkVersion="18" /> <application android:allowBackup="true" android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:theme="@style/AppTheme" > <activity android:name="tw.edu.tku.im.smap2013.imyday.myfirstapp.MainActivity" android:label="@string/app_name" > <activity android:name="tw.edu.tku.im.smap2013.imyday.myfirstapp.DisplayMessageActivity" android:label="@string/title_activity_display_message" android:parentActivityName="tw.edu.tku.im.smap2013.imyday.myfirstapp" > <meta-data android:name="android.support.PARENT_ACTIVITY" android:value="tw.edu.tku.im.smap2013.imyday.myfirstapp" />

147. DisplayMessageActivity.java 147 package tw.edu.tku.im.smap2013.imyday.myfirstapp; import android.os.Bundle; import android.app.Activity; import android.view.Menu; import android.view.MenuItem; import android.support.v4.app.NavUtils; import android.annotation.SuppressLint; import android.annotation.TargetApi; import android.os.Build; import android.content.Intent; import android.widget.TextView; public class DisplayMessageActivity extends Activity { @SuppressLint("NewApi") @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_display_message); // Show the Up button in the action bar. setupActionBar(); //Get the message from the intent Intent intent = getIntent(); String message = intent.getStringExtra(MainActivity.EXTRA_MESSAGE); //Great the text view TextView textView = new TextView(this); textView.setTextSize(40); textView.setText(message); setContentView(textView); } …

148. MainActivity.java 148 package tw.edu.tku.im.smap2013.imyday.myfirstapp; import android.os.Bundle; import android.app.Activity; import android.view.Menu; import android.view.View; import android.content.Intent; import android.widget.EditText; public class MainActivity extends Activity { public final static String EXTRA_MESSAGE = "tw.edu.tku.im.smap2013.imyday.myfirstapp.MESSAGE"; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.main, menu); return true; } /** Called when the user clicks the Send button */ public void sendMessage(View view) { Intent intent = new Intent(this, DisplayMessageActivity.class); EditText editText = (EditText) findViewById(R.id.edit_message); String message = editText.getText().toString(); intent.putExtra(EXTRA_MESSAGE, message); startActivity(intent); }

149. 149 /** * Set up the {@link android.app.ActionBar}, if the API is available. */ @TargetApi(Build.VERSION_CODES.HONEYCOMB) private void setupActionBar() { if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) { getActionBar().setDisplayHomeAsUpEnabled(true); } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.display_message, menu); return true; } @Override public boolean onOptionsItemSelected(MenuItem item) { switch (item.getItemId()) { case android.R.id.home: // This ID represents the Home or Up button. In the case of this // activity, the Up button is shown. Use NavUtils to allow users // to navigate up one level in the application structure. For // more details, see the Navigation pattern on Android Design: // // http://developer.android.com/design/patterns/navigation.html#up-vs-back // NavUtils.navigateUpFromSameTask(this); return true; } return super.onOptionsItemSelected(item); } DisplayMessageActivity.java

150. Alternatives for Developing Android Apps MIT App Inventor – drag-and-drop Android app development tool. – http://appinventor.mit.edu/ http://appinventor.mit.edu/ Appery.io – develop apps for Android (iOS / Windows Phone). – http://appery.io http://appery.io Appnotch – drag-and-drop service that allows you to develop apps for Android (iOS). – http://www.appnotch.com/ http://www.appnotch.com/ 150

151. 151 http://appinventor.mit.edu/ MIT App Inventor

152. appery.io 152 http://appery.io/

153. 153 appery.io http://appery.io/

154. 154 http://www.appnotch.com/ Appnotch

155. References Android Developer: http://developer.android.com/http://developer.android.com/ MIT App Inventor: http://appinventor.mit.edu/http://appinventor.mit.edu/ Native, Web or Hybrid Mobile Apps?, https://www.youtube.com/watch?v=Ns-JS4amlTc https://www.youtube.com/watch?v=Ns-JS4amlTc 155