Description
Uses: Location Services, Internet, Google APIs, Images, Picasso Library, Implicit Intents, TextView Links App Highlights: • This app will acquire and display an interactive list of political officials that represent the current location (or any specified location) at each level of government. • Android location services will be used to determine the user’s location. • The Google Civic Information API will be used to acquire the government official data (via REST service and JSON results). • You will need to use a different layout for landscape orientation for 2 of the activities in this application. Those details are specified later in the document. • Clicking on an official’s list entry opens a detailed view of that individual government representative. • Clicking on the photo of an official will display a Photo Activity, showing a larger version of the photo. • An “About” activity will show application information (Author, Copyright data & Version) • Your manifest should add permissions for ACCESS_FINE_LOCATION and INTERNET • The application is made up of 4 activities, shown below: 1) Main Activity RecyclerView list of government officials (List scrolls up & down) Display of current location (or user-specified location) Options Menu items for “about” information and manual location entry Click on a government official entry to open a new activity containing detailed information on the selected individual. No separate landscape layout is needed for the Main Activity. CS 442 Mobile Applications Development (Android Section) © Christopher Hield 2 of 18 2) Official Activity Photo of official (where available). NOTE, a default image should be displayed when a photo is not specified. Clicking photo opens Photo Detail Activity Basic official data • Office (i.e., United States Senate) • Name (i.e., John E. Smith) • Party (i.e., Democratic) Contact Information (as available) (all are clickable – implicit intents) • Office Address • Phone Number • Email address • Website Social Media (as available) (all are clickable – implicit intents) • Facebook • Twitter • Google+ • YouTube Placeholder image displayed while photo is loading The background color of this activity is based upon the official’s political party: Republican = RED, Democratic = BLUE, Otherwise use BLACK A ScrollView should be used in case the information does not completely fit on the visible screen. NOTE, a default image should be displayed when a photo is not specified. Clicking photo opens Photo Detail Activity CS 442 Mobile Applications Development (Android Section) © Christopher Hield 3 of 18 3) Photo Detail Activity Full-sized image of official (where available). NOTE: This activity should not open if the representative’s image is not specified. Basic official data • Office (i.e., United States Senate) • Name (i.e., John E. Smith) The background color of this activity is based upon the official’s political party: Republican = RED, Democratic = BLUE, Otherwise use WHITE Placeholder image displayed while photo is loading CS 442 Mobile Applications Development (Android Section) © Christopher Hield 4 of 18 4) About Activity Application information (Author, Copyright data & Version) Full-sized background image No separate landscape layout is needed for the About Activity. Required Landscape Layouts Landscape Layout for Official Activity Landscape Layout for Photo Activity CS 442 Mobile Applications Development (Android Section) © Christopher Hield 5 of 18 Internet Data: Downloading data for the government officials requires a download via the Google Civic Information API. The Civic Information API lets you enter a zip code to look up the corresponding district at each level of government and the names and social media properties for the elected officials in those districts. NOTE: You MUST sign up Google to get an API key. Your API KEY must be supplied with all Google Civic Information API queries. You can get an API key by following the instructions at: https://developers.google.com/civic-information/docs/using_api Follow the instructions for “Acquiring and using an API key”. The type of credential you need to create is “API Key” (not “OAuth client ID” and not “Service account key”). This is a very quick and easy process. The API key will be a long string of characters. The results of Civic Information API calls are returned in JSON format. The content of the returned results is described later in this section. Query Format: https://www.googleapis.com/civicinfo/v2/representatives?key=Your-API-Key&address=zip-code For example, if your API Key was “ABC123xyz” and the zip code was 90001, your full URL would be: https://www.googleapis.com/civicinfo/v2/representatives?key=ABC123xyz&address=90001 Google Civic Information API Results Example: The JSON results you receive contains 4 sections, described in detail below. The normalizedInput section contains location details for the results provided. The divisions section lists political geographic divisions, like a country, state, county, or legislative district (we do not need this section for our application). The offices section lists the political positions governing the specified location. The officials section lists people presently serving in the offices specified in the offices section. High-level view of JSON results: { “kind”: “civicinfo#representativeInfoResponse”, Í We do not need this “normalizedInput”: { Í We need this section, it is accessed as a JSONObject … Í Data will be here }, “divisions”: { Í We do not need this … Í Data will be here, we do not need this section }, “offices”: [ Í We need this section, it is accessed as a JSONArray … Í Data will be here ], “officials”: [ Í We need this section, it is accessed as a JSONArray … Í Data will be here ] } CS 442 Mobile Applications Development (Android Section) © Christopher Hield 6 of 18 JSON Section Detail: The “normalizedInput” JSONObject contains the following: “normalizedInput”: { “line1”: “”, “city”: “Chicago”, Í We want this for the location display in our activities “state”: “IL”, Í We want this for the location display in our activities “zip”: “60654” Í We want this for the location display in our activities }, The “divisions” section comes next, but we do not need this section so it is not described here. The “offices” JSONArray contains multiple instances of the following: “offices”: [ { “name”: “President of the United States”, “divisionId”: “ocd-division/country:us”, “levels”: [ “country” ], “roles”: [ “headOfState”, “headOfGovernment” ], “officialIndices”: [ 0 ] }, { “name”: “United States Senate”, “divisionId”: “ocd-division/country:us/state:il”, “levels”: [ “country” ], “roles”: [ “legislatorUpperBody” ], “officialIndices”: [ 2, 3 ] }, … Í The above sections repeat many times, once per government office ], We want this, the “office” title the representative holds We want this, it is the index into the “officials” JSONArray (see the next section) which contains the details of the person that holds this office. NOTE: There can be more than one index as time offices have multiple representatives. We want this, the “office” title the representative holds We want this, it is the index into the “officials” JSONArray (see the next section) which contains the details of the person that holds this office. NOTE: There can be more than one index as time offices have multiple representatives. CS 442 Mobile Applications Development (Android Section) © Christopher Hield 7 of 18 The “officials” JSONArray contains multiple instances of the following: “officials”: [ { “name”: “Donald J. Trump”, “address”: [ { “line1”: “The White House”, “line2”: “1600 Pennsylvania Avenue NW”, “city”: “Washington”, “state”: “DC”, “zip”: “20500” } ], “party”: “Republican”, “phones”: [ “(202) 456-1111” ], “urls”: [ “http://www.whitehouse.gov/” ], “emails”: [ “email@address.com” ] “photoUrl”: “https://www.whitehouse.gov/sites/whitehouse.gov/files/images/45/PE%20Color.jpg”, “channels”: [ { “type”: “GooglePlus”, “id”: “+whitehouse” }, { “type”: “Facebook”, “id”: “whitehouse” }, { “type”: “Twitter”, “id”: “whitehouse” }, { “type”: “YouTube”, “id”: “whitehouse” } ] }, { … Í The above section repeats many times, once per government official. The second official in this JSONArray is index 1, the third second official in this JSONArray is index 2, and so on. } ] This is the first official (index 0). This index corresponds to the “officialIndices” we found in the “offices” section above. Note: For any text data on this page that is not supplied, use the default String “No Data Provided” This is the name of the person that holds this office. This is the Address (check for line1, line2 & line3 – concatenate them into one String), City, State & Zip Code of this person’s office This is the political party of this person: “Republican”, “Democratic/ Democrat”, or “Unknown”. Note this section might also be skipped – consider that as party “Unknown”. This person’s office phone number. There may be more than one – just use the first entry. Note this section might also be skipped. This person’s office web site. There may be more than one – just use the first entry. Note this section might also be skipped. This person’s office email address. There may be more than one – just use the first entry. Note this section might also be skipped. This is the URL to the person’s photo. Note this section might also be skipped. In this case, use a “place holder” photo. These are the user ids for the related social media channels. There will be up to four entries. Note this section might also be skipped. Possible entries are: • GooglePlus • Facebook • Twitter • YouTube CS 442 Mobile Applications Development (Android Section) © Christopher Hield 8 of 18 Using Picasso for Photo Downloads The downloading of the photos of the officials in the Official Activity and the Photo Activity should use the Picasso library (as was discussed in class). Note that some photo URLs try to use URL forwarding which is done automatically in web browsers. This is not done automatically in our case. So, if the http phot link fails, we should re-try the same url as https. This can be done as follows: if ( != null) { Picasso picasso = new Picasso.Builder(this).listener(new Picasso.Listener() { @Override public void onImageLoadFailed(Picasso picasso, Uri uri, Exception exception) { // Here we try https if the http image attempt failed final String changedUrl = viewOffice.photoUrl.replace(“http:”, “https:”); picasso.load(changedUrl) .error(R.drawable.brokenimage) .placeholder(R.drawable.placeholder) .into(officialImageView); } }).build(); picasso.load(viewOffice.photoUrl) .error(R.drawable.brokenimage) .placeholder(R.drawable.placeholder) .into(officialImageView); } else { Picasso.with(this).load(viewOffice.photoUrl) .error(R.drawable.brokenimage) .placeholder(R.drawable.missing) .into(officialImageView); } CS 442 Mobile Applications Development (Android Section) © Christopher Hield 9 of 18 Social Media Implicit Intents The following are examples of how you should code the 4 social-media implicit intents (three of these have been seen already in earlier examples, but are reproduced here for convenience): Facebook (example onClick method to be associated with the Facebook ImageView icon): public void facebookClicked(View v) { String FACEBOOK_URL = “https://www.facebook.com/” + ; String urlToUse; PackageManager packageManager = getPackageManager(); try { int versionCode = packageManager.getPackageInfo(“com.facebook.katana”, 0).versionCode; if (versionCode >= 3002850) { //newer versions of fb app urlToUse = “fb://facewebmodal/f?href=” + FACEBOOK_URL; } else { //older versions of fb app urlToUse = “fb://page/” + channels.get(“Facebook”); } } catch (PackageManager.NameNotFoundException e) { urlToUse = FACEBOOK_URL; //normal web url } Intent facebookIntent = new Intent(Intent.ACTION_VIEW); facebookIntent.setData(Uri.parse(urlToUse)); startActivity(facebookIntent); } Twitter (example onClick method to be associated with the Twitter ImageView icon): public void twitterClicked(View v) { Intent intent = null; String name = ; try { // get the Twitter app if possible getPackageManager().getPackageInfo(“com.twitter.android”, 0); intent = new Intent(Intent.ACTION_VIEW, Uri.parse(“twitter://user?screen_name=” + name)); intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK); } catch (Exception e) { // no Twitter app, revert to browser intent = new Intent(Intent.ACTION_VIEW, Uri.parse(“https://twitter.com/” + name)); } startActivity(intent); } CS 442 Mobile Applications Development (Android Section) © Christopher Hield 10 of 18 GooglePlus (example onClick method to be associated with the GooglePlus ImageView icon): public void googlePlusClicked(View v) { String name = ; Intent intent = null; try { intent = new Intent(Intent.ACTION_VIEW); intent.setClassName(“com.google.android.apps.plus”, “com.google.android.apps.plus.phone.UrlGatewayActivity”); intent.putExtra(“customAppUri”, name); startActivity(intent); } catch (ActivityNotFoundException e) { startActivity(new Intent(Intent.ACTION_VIEW, Uri.parse(“https://plus.google.com/” + name))); } } YouTube (example onClick method to be associated with the YouTube ImageView icon): public void youTubeClicked(View v) { String name = ; Intent intent = null; try { intent = new Intent(Intent.ACTION_VIEW); intent.setPackage(“com.google.android.youtube”); intent.setData(Uri.parse(“https://www.youtube.com/” + name)); startActivity(intent); } catch (ActivityNotFoundException e) { startActivity(new Intent(Intent.ACTION_VIEW, Uri.parse(“https://www.youtube.com/” + name))); } } CS 442 Mobile Applications Development (Android Section) © Christopher Hield 11 of 18 Provided Icons To insure a consistent and professional appearance of our application, the following image files are being provided to you for use in this assignment. You can simply download them, add them to your Android Studio project, and use them with your ImageViews. Background image for About Activity Image to use for Official’s without an image URL Image to use for bad photo URLs (the background of this image is transparent) Image to use for bad photo URLs (the background of this image is transparent) Separator image to add to the end of your list entry layout Facebook icon GooglePlus icon Twitter icon YouTube icon Launcher Icon CS 442 Mobile Applications Development (Android Section) © Christopher Hield 12 of 18 Application Behavior Diagrams: 1) App MainActivity The “info” options menu item opens the “About” activity. Each political official entry displays the office (upperleft) and the official’s name and political party (lowerright). The political party is in parenthesis. A separator image should be added to the end of each list entry to create a nice break between entries. A scrollbar should be present along the right-hand side The “Location” options menu item opens an alert dialog that allows the user to enter a city/state or zip code manually. Click on an entry to open the individual Representative Activity RecyclerView list entries have their own layout On startup, the application should use the device’s current location zip code to populate the list with officials. Full location information comes from the normalizedInput section of the JSON download. CS 442 Mobile Applications Development (Android Section) © Christopher Hield 13 of 18 2) Manually Setting the location: 3) Opening the About Activity Enter a City, State or a Zip Code: 90001 . CANCEL OK CS 442 Mobile Applications Development (Android Section) © Christopher Hield 14 of 18 4) Viewing an individual Official: 5) Interactive links on the official’s activity: Social media links. Where supplied, the official’s social media links will be displayed using the social media’s icon. If available, the icon is present – if not it is absent (the icon should not be displayed). Click on an entry to open the individual Official Activity Click on the photo (where available) to Click on the address (where open the Photo Activity available) to open the office location in Google Maps Click on the phone number (where available) to open the Phone App with the phone number loaded Click on the Email Address (where available) to open the email app with this address pre-loaded in the new message Click on the Website address (where available) to open the website in a browser. Clicking on these will open the related app (if installed) or will default to opening the site in a web browser. CS 442 Mobile Applications Development (Android Section) © Christopher Hield 15 of 18 6) Viewing an individual Official’s Photo: 7) If no internet connection: Click on an entry to open the individual Representative Activity On StartUp Official Activity Photo Activity Data cannot be accessed/loaded without an internet connection. CS 442 Mobile Applications Development (Android Section) © Christopher Hield 16 of 18 Development Plan 1) Create the base app: a. MainActivity with RecyclerView b. Official Class c. RecyclerView Adapter d. RecyclerView ViewHolder e. Create fake “dummy” officials to populate the list in the MainActivity onCreate. f. Add the onClick methods. The onClick can open a Toast message for now. g. Zip Code options-menu item opens the dialog, on entry you can open a Toast message for now. h. Create the About Activity – opens when MainActivity “About” options menu item is selected. 2) Add the location code. a. Add the location code that determines the device’s zip code (this happens in onCreate). b. Instead of using that zip code to make the Google API call, you can open a Toast message that displays the zip code for now. 3) Add the Official Activity: a. This activity opens when an entry in the list of elected officials is clicked on. b. You can use the data in your test (dummy) official objects to test this activity. c. Any test data you don’t have (i.e., missing data) should be properly handled in your activity. d. The social media ImageView onClick’s should open a Toast message that displays the name of the social media for now. e. Remember to create the separate layout for landscape orientation. 4) Add the Google Civic Information API elements: a. Create the Google Civic Information API AsyncTask. b. Remove the use of dummy data from your app (now you will have real data). c. Remove the location Toast message. Instead, here you use the device’s zip code (or a manually entered location) to make the API call. d. This should result in a populated list of Official objects in your MainActivity that is then displayed in the RecyclerView. e. Add the Photo Activity, opened when an official’s photo is clicked in the Official Activity f. Remember to create the separate layout for landscape orientation. 5) Test the app very thoroughly and review your implementation against all requirements. CS 442 Mobile Applications Development (Android Section) © Christopher Hield 17 of 18 Example Cities & Zip Codes for Testing: New York City, NY / 10002 Chicago, IL / 60601 Boston, MA / 02110 Seattle, WA / 98101 New Orleans, LA / 70032 Las Vegas, NV / 89104 Miami, FL / 33130 Los Angeles, CA/ 90001 Washington, DC / 20001 Honolulu, HI/ 96804 Dallas, TX /75202 Key West, FL /33040 Denver, CO / 80212 Atlanta, GA / 30301 Philadelphia, PA / 19019 Phoenix, AZ / 85001 Portland, OR / 97211 Nome, AK / 99762 Extra Credit Up to 20 points of extra credit will be awarded if you implement Up/Home Navigation (as previously discussed in class) in the Official Activity, the Photo Activity, and the About Activity. Clicking this should bring you back to the Main Activity. Points awarded depend upon the correct implementation of this feature. Assignment Assistance The TAs for our course is available to assist you with your assignment if needed. Questions on assignment requirements and course concepts can be sent to the instructor. Submissions & Grading 1) All submissions will be graded once the due-date arrives. NO resubmission can be made at that point, regardless of the excuse. If you are not ready to be graded, DO NOT SUBMIT. 2) All submissions must conform to all requirements in this document, no exceptions. Please be sure to carefully review this document against your implementation to insure you did not miss anything. 3) Submissions must consist of your zipped project folder (please execute Build =>Clean Project before generating the zip file). 4) Submissions should reflect the concepts and practices we cover in class. 5) Late submissions will be penalized by 10% per week late. (i.e., from one second late to 1 week late: 10% penalty, from one week plus one second late to 2 weeks late: 20% penalty, etc.). 6) Grading will be based upon the presence and proper functionality of all features and behaviors described in this document. CS 442 Mobile Applications Development (Android Section) © Christopher Hield 18 of 18 NOTE This assignment is worth 300 points. This means (for example) that if you get 89% on this assignment, your recorded score will be: (89% * 300 points = 267 points) Note that this also means that the 10% late submission penalty will be 10% * 300 points = 30 points. If you do not understand anything in this handout, please ask. Otherwise the assumption is that you understand the content. Unsure? Ask!
