Smartphone Programming. Copyright 2017 by Robert M. Dondero, Ph.D. Princeton University

Transcription

1 Smartphone Programming Copyright 2017 by Robert M. Dondero, Ph.D. Princeton University 1

2 Objectives We will cover: Smartphone programming Android smartphone programming Resources Synchronous server interaction Asynchronous server interaction Cloud computing using Heroku 2

3 Agenda 1. Smartphone programming 2. Android virtual devices 3. HelloAndroid app 4. PennyHeroku app 5. PennyAndroid1 app 6. PennyAndroid2 app 3

4 Why Smartphone Pgmming? Question: Why study smartphone programming? Answer: 4

5 Why Smartphone Pgmming? 5

6 SmartPhone Pgmming Options Question: For smartphone programming, what are my options? Answer:

7 Smartphone Pgmming Non-Option Ordinary Web App Smartphone Native OS Browser Web App HTTP Server 7

8 Smartphone Pgmming Non-Option Ordinary web app Runs in smartphone browser Installed on smartphone by setting browser bookmark Usually unacceptable Components too small Must zoom frequently 8

9 Smartphone Pgmming Option 1 Mobile Web App Smartphone Native OS Browser Mobile Web App HTTP Server 9

10 Smartphone Pgmming Option 1 Mobile web app Runs in smartphone browser Installed by setting browser bookmark 10

11 Smartphone Pgmming Option 1 Typically composed using HTML5 Some offline support (local storage) Canvas drawing Some video and audio streaming support GeoLocation API Drag and drop 11

12 Smartphone Pgmming Option 1 Typically composed using a Mobile web app library Handles differing device characteristics: Physical device characteristics (screen sizes, orientations) Browsers, versions of browsers Versions of JavaScript Example: jquery Mobile Not a mobile version of jquery! A UI layer on top of jquery 12

13 Smartphone Pgmming Option 2 Hybrid Mobile App Smartphone Native OS Hybrid Mobile App Embedded Browser Web App App Store 13

14 Smartphone Pgmming Option 2 Hybrid mobile app Native app (platform specific) Which runs an embedded browser Which runs your web app (platform independent) Installed via app store (Google Play, Apple App Store) 14

15 Smartphone Pgmming Option 2 Typically composed using HTML5 Some offline support (local storage) Canvas drawing Some video and audio streaming support GeoLocation API Drag and drop 15

16 Smartphone Pgmming Option 2 Typically composed using a Hybrid mobile app framework Typically handles differing device characteristics (screen sizes, orientations) Typically can access most native platform features Camera, notifications, accelerometer, complex gestures Examples: Ionic (used with AngularJS), Intel XDK, NativeScript, Xamarin, PhoneGap, Framework7 16

17 Smartphone Pgmming Option 3 Native Mobile App Smartphone Native OS Native Mobile App App Store 17

18 Smartphone Pgmming Option 3 Native mobile app Installed through app store (Google Play, Apple App Store) Specific to one platform Android or ios (or Windows Phone, Blackberry, ) Can use all device features GPS, accelerometer, compass, contacts, camera, gestures, notifications, Can work offline 18

19 Smartphone Pgmming Option 3 Composed using a Native mobile app framework For Android: Android SDK For ios: ios SDK Typically composed using a Native mobile app IDE For Android: Android Studio For ios: Xcode 19

20 Aside: React Native React Native Instead of rendering to the browser s DOM, React Native invokes Objective-C APIs to render to ios components, or Java APIs to render to Android components. This sets React Native apart from other cross-platform app development options, which often end up rendering web-based views. 20

21 SmartPhone Pgmming Options Factor Device features (GPS, camera, gestures, notifications) Mobile Web App Hybrid Mobile App Offline functionality Discoverability Speed Installation Maintenance (Multiple) Native Apps 21

22 SmartPhone Pgmming Options Factor Mobile Web App Hybrid Mobile App Platform independence Content restrictions, approval process, fees Development cost User interface (Multiple) Native Apps 22

23 Why Android Pgmming? Question: Why study Android programming? Answer 1: Android programming is in Java Which we know thoroughly So we need not cover another pgmming lang (Objective-C, Swift, ) 23

24 Why Android Pgmming? Answer 2: Worldwide Smartphone Sales to End Users by Operating System OS 1Q17 Units (Thousands) 1Q17 Market Share (%) 1Q16 Units (Thousands) 1Q16 Market Share (%) Android 327, , ios 51, , Other , TOTAL 379, ,

25 Agenda 1. Smartphone programming 2. Android virtual devices 3. HelloAndroid app 4. PennyHeroku app 5. PennyAndroid1 app 6. PennyAndroid2 app 25

26 Android Virtual Devices To test an Android app Option 1: Use an Android phone Pro: Fast Option 2: Create an Android virtual device Run it using the Android emulator Pro: Convenient 26

27 Installing Android Studio Download and install Android Studio Browse to studio/index.html, and follow instructions Thereby install all required Java libraries 27

28 Creating a Virtual Device Create an Android virtual device Instructions from developer.android.com/training/basics/ firstapp/running-app.html 28

29 Creating a Virtual Device Instructions Launch Android Studio Launch the Android Virtual Device Manager by selecting Tools > Android > AVD Manager In the Your Virtual Devices screen, click Create Virtual Device In the Select Hardware screen, select a phone device and then click Next Suggestion: Choose Pixel 29

30 Creating a Virtual Device In the System Image screen, click Download for one of the recommended system images; agree to the terms to complete the download Suggestion: Choose Marshmallow After the download is complete, select the system image from the list and click Next. On the next screen, leave all the configuration settings as they are and click Finish Exit Android Studio 30

31 Running Android Emulator See AndroidSetupMac See AndroidSetupLinux See AndroidEmulate 31

32 Agenda 1. Smartphone programming 2. Android virtual devices 3. HelloAndroid app 4. PennyHeroku app 5. PennyAndroid1 app 6. PennyAndroid2 app 32

33 HelloAndroid App HelloAndroid app Simplest possible Android app One screen Displays hello, world 33

34 Defining the App HelloAndroid/ AndroidManifest.xml res/ layout/ activity_main.xml values/ values.xml src/ edu/ princeton/ hello/ MainActivity.java 34

35 Defining the App Resources The Android resource system keeps track of all non-code assets associated with an application. 35

36 Defining the App Resources Using application resources makes it easy to update various characteristics of your application without modifying code, and by providing sets of alternative resources enables you to optimize your application for a variety of device configurations (such as for different languages and screen sizes). 36

37 Defining the App values.xml A resource file Factors strings out of Java code Facilitates internationalization 37

38 Defining the App activity_main.xml A resource file The layout for the MainActivity page is a vertical LinearLayout Class LinearLayout A layout that arranges other views either horizontally in a single column or vertically in a single row. The page contains a TextView object Class TextView A user interface element that displays text to the user. To provide user-editable text, see EditText. 38

39 Defining the App MainActivity.java Class Activity An activity is a single, focused thing that the user can do. Almost all activities interact with the user, so the Activity class takes care of creating a window for you in which you can place your UI with setcontentview(view). 39

40 Defining the App Class Bundle A mapping from String keys to various Parcelable values. Interface Parcelable Interface for classes whose instances can be written to and restored from a Parcel. 40

41 Defining the App Class Parcel Container for a message (data and object references) that can be sent through an IBinder. A Parcel can contain both flattened data that will be unflattened on the other side of the IPC (using the various methods here for writing specific types, or the general Parcelable interface), and references to live IBinder objects that will result in the other side receiving a proxy IBinder connected with the original IBinder in the Parcel. 41

42 Defining the App Class Binder Base class for a remotable object, the core part of a lightweight remote procedure call mechanism defined by IBinder. This class is an implementation of IBinder that provides standard local implementation of such an object.???!!! 42

43 Defining the App AndroidManifest.xml The app s name is Hello Note use of resource Name is displayed in the smartphone window The app has one Activity Its name is edu.princeton.hello.mainactivity 43

44 Building the App See convenience scripts AndroidSetupLinux AndroidSetupMac AndroidBuild 44

45 Building the App (1) Use aapt (Android Asset Packaging Tool) to package the resource declarations Creates R.java, R.class, R$attr.class, R$id.class, R$layout.class, R$string.class Java representations of resources 45

46 Building the App (2) Use javac to compile Creates MainActivity.class (3) Use Jill (Jack Intermediate Language Linker) to translate Java bytecode to intermediate bytecode Creates classes.jayce 46

47 Building the App (4) Use Jack (Java Android Compiler Kit) to translate intermediate bytecode to Dalvik bytecode Creates classes.dex Dalvik is the bytecode format that the ART (Android Runtime) understands 47

48 Building the App (5) Use aapt (Android Asset Packaging Tool) to make a partial APK file containing resources, including the manifest Enhances app.apkpart APK (Android Package Kit) is the package file format used for distribution and installation of Android apps 48

49 Building the App (6) Use ApkBuilder to make the complete APK file Creates app.apkunalign (7) Use zipalign to optimize the data alignment of the APK file Creates app.apk 49

50 Building the App Resulting directory structure: HelloAndroid/ AndroidManifest.xml app.apk app.apkpart app.apkunalign classes.dex classes.jayce res/ layout/ activity_main.xml values/ values.xml 8 directories 16 files ~64KB src/ edu/ princeton/ hello/ MainActivity.java MainActivity.class R.class R.java R$attr.class R$id.class R$layout.class R$string.class 50

51 Installing/Running the App Either run virtual device on emulator, or plug phone into USB port See convenience scripts AndroidInstall Use adb (Android Debug Bridge) to install the app on the phone or emulator and run the app 51

52 The Result 52

53 Agenda 1. Smartphone programming 2. Android virtual devices 3. HelloAndroid app 4. PennyHeroku app 5. PennyAndroid1 app 6. PennyAndroid2 app 53

54 Why a Cloud Service? PennyAndroid apps must communicate with a server Where should the server run? Courselab? No; firewall CS Dept computer? OK for me, but most undergrad students don t have CS accts Local computer? No; unstable IP address Cloud? Yes! 54

55 Which Cloud Service Type? Cloud service types: Software as a Service (SaaS) The capability provided to the consumer is to use the provider s applications running on a cloud infrastructure. Example: Google Apps 55

56 Which Cloud Service Type? Platform as a Service (PaaS) The capability provided to the consumer is to deploy onto the cloud infrastructure consumercreated or acquired applications created using programming languages, libraries, services, and tools supported by the provider. Examples: Amazon Web Services, Microsoft Azure, Heroku 56

57 Which Cloud Service Type? Infrastructure as a Service (IaaS) The capability provided to the consumer is to provision processing, storage, networks, and other fundamental computing resources where the consumer is able to deploy and run arbitrary software, which can include operating systems and applications. Examples: Amazon Web Services (AWS), Microsoft Azure, Google Compute Engine (GCE) 57

58 Which Cloud Service Type? Which cloud service type for Penny? SaaS: impossible; too narrow IaaS: possible, but too broad PaaS: just right! 58

59 Which PaaS Cloud Service? Which PaaS cloud service for Penny? I chose Heroku Simple Free But beware of pricing model Popular In previous semesters for COS 333 projects In general 59

60 What Comm Protocol? Observations PennyAndroid apps could communicate with Penny server using any protocol For Android apps, common to use HTTP Using HTTP would allow server implementation via Python/Bottle Decisions Use HTTP Design Penny server as Python/Bottle web app 60

61 What Comm Protocol? Observations Penny server must read author name, write book list Book list could be expressed as XML, JSON, plain text, Decisions Keep it simple Express book list as plain text 61

62 Defining the App See PennyHeroku app book.py database.py penny.py Procfile runtime.txt requirements.txt 62

63 Defining the App penny.py Same as previous versions, except The only valid requests are / and /searchresults Delivers plain text, not HTML New paragraph at end 63

64 Defining the App If the APP_LOCATION env var is set to heroku then run the application on: Host , that is, on a heroku server Whatever port is specified by the value of the PORT env var, or port 5000 if there is no PORT env var Otherwise run the application on the local computer on port

65 Defining the App Procfile Tells Heroku the app s process type; it s a web app Tells Heroku the command to start the process runtime.txt Tells Heroku which version of Python it should use requirements.txt Tells Heroku what additional modules the app uses 65

66 Building the App Get a Heroku account Browse to Choose Python as primary dev lang Enter your addr Choose a password 66

67 Building the App Install the Heroku Command Line Interface (CLI) Browse to articles/heroku-cli Follow the instructions 67

68 Log into heroku: Building the App $ heroku login Create a Git repo on Heroku: $ heroku create Git responds with yourappname, which is also the name of your Git repo For me: fast-sands

69 Building the App Create a local Git repo, and specify your Heroku Git repo as its remote: $ cd PennyHeroku # if necessary $ heroku login # if necessary $ git init $ git add. $ git commit m "initial load" $ heroku git:remote a yourappname $ # For me: $ # heroku git:remote a fast-sands (Optional) Confirm that you set the remote repo: $ git remote -v 69

70 Building the App Deploy the app to Heroku: $ cd PennyHeroku # if necessary $ heroku login # if necessary $ git push heroku master Git uploads the app to Heroku repo Heroku builds the app 70

71 Running the App On Heroku set the value of the APP_LOCATION env var to heroku: $ heroku login # if necessary $ heroku config:set APP_LOCATION=heroku 71

72 Running the App Run the Heroku app Browse to: For me, browse to: 72

73 Agenda 1. Smartphone programming 2. Android virtual devices 3. HelloAndroid app 4. PennyHeroku app 5. PennyAndroid1 app 6. PennyAndroid2 app 73

74 PennyAndroid1 App Android version of Penny Two pages Parallel to searchform and searchresults pages in Penny web apps Communicates with PennyHeroku [Demo] 74

75 Defining the App PennyAndroid1/ AndroidManifest.xml res/ layout/ activity_display_books.xml activity_main.xml values/ values.xml src/ edu/ princeton/ penny/ DisplayBooksActivity.java MainActivity.java 75

76 Defining the App values.xml Defines string resources 76

77 Defining the App activity_main.xml Defines layout of MainActivity page Vertical LinearLayout Contains an EditText object Class EditTex A user interface element for entering and modifying text. Contains a Button object Class Button A user interface element the user can tap or click to perform an action. Button tap causes call of sendmessage method 77

78 Defining the App activity_display_books.xml Defines layout of DisplayBooksActivity page Vertical LinearLayout Contains an TextView object 78

79 Defining the App MainActivity.java Defines sendmessage() Called when user taps Button Defines an Intent object Class Intent An intent is an abstract description of an operation to be performed Its most significant use is in the launching of activities, where it can be thought of as the glue between activities. It is basically a passive data structure holding an abstract description of an action to be performed. Uses Intent object to start DisplayBooksActivity, passing it the author 79

80 Defining the App DisplayBooksActivity.java Android prohibits network access from main (UI) thread, so Main thread spawns a child thread, and waits/ join for completion Child thread uses Java URL class to contact PennyHeroku; passes book string to main thread Main thread updates TextView 80

81 Defining the App AndroidManifest.xml The app s name is Penny The app consists of two Activities The first Activity is named edu.princeton.penny.mainactivity The second Activity is named edu.princeton.penny.displaybooksactivity Its parent is MainActivity The app will use networking 81

82 Building the App Run AndroidBuild 82

83 Installing/Running the App Run AndroidEmulate Run AndroidInstall 83

84 Installing/Running the App 84

85 Installing/Running the App 85

86 Toward PennyAndroid2 Problem? User might prefer a one-screen app User might prefer app to respond to each keystroke (as with AJAX) Solution: PennyAndroid2 86

87 Agenda 1. Smartphone programming 2. Android virtual devices 3. HelloAndroid app 4. PennyHeroku app 5. PennyAndroid1 app 6. PennyAndroid2 app 87

88 PennyAndroid2 App PennyAndroid2 app One-screen app Responds to each keystroke [Demo] 88

89 Defining the App PennyAndroid2/ AndroidManifest.xml res/ layout/ activity_display_books.xml activity_main.xml values/ values.xml src/ edu/ princeton/ penny/ DisplayBooksActivity.java MainActivity.java 89

90 Defining the App values.xml Same, but Removed buttonhint resource Added textviewhint activity_main.xml The MainActivity page consists of a vertical LinearLayout containing a EditText object and a TextView object; no Button object 90

91 Defining the App MainActivity.java Defines inner class MyTextWatcher Creates MyTextWatcher object, and installs it as the listener for the EditText object MyTextWatcher object spawns child thread Child thread communicates with PennyHeroku 91

92 Defining the App MainActivity.java Problem using ordinary thread Android will not allow child thread to update TextView in UI Main thread must join child thread Main thread is unresponsive during the wait!!! Fast typing causes App is unresponsive warnings App is multi-threaded, but synchronous Solution: Use AsyncTask Make app asynchronous, as with AJAX 92

93 Defining the App Class AsyncTask AsyncTask enables proper and easy use of the UI thread. This class allows you to perform background operations and publish results on the UI thread without having to manipulate threads and/ or handlers. Internally uses ordinary Java thread AsyncTask object can update TextView in UI Main thread need not join child thread! UI remains responsive! 93

94 Defining the App AndroidManifest.xml Same, but only one Activity 94

95 Building the App Run AndroidBuild 95

96 Installing/Running the App Run AndroidEmulate Run AndroidInstall 96

97 Installing/Running the App 97

98 Summary We have covered: Smartphone programming Android smartphone programming Resources Synchronous server interaction Asynchronous server interaction Cloud computing using Heroku 98