Homework 9: Congress Search Android App – A Mobile Phone Exercise
1. Objectives
Ø Become familiar with Android Studio, Android App development for Android.
Ø Build a good-looking Android app using the Android SDK.
Ø Build mobile user experience for Congress Search using the Sunlight Congress APIs
2. Background
2.1 Android Studio
Android Studio is the official IDE for Android application development, based on IntelliJ IDEA (https://www.jetbrains.com/idea/). On top of the capabilities you expect from IntelliJ, Android Studio offers:
• Flexible Gradle-based build system
• Build variants and multiple apk file generation
• Code templates to help you build common app features
• Rich layout editor with support for drag and drop theme editing
• Lint tools to catch performance, usability, version compatibility, and other problems
• ProGuard and app-signing capabilities
• Built-in support for Google Cloud Platform, making it easy to integrate Google Cloud
Messaging and App Engine
The home page of the Android Studio is located at:
http://developer.android.com/tools/studio/index.html
2.2. Android
Android is a mobile operating system initially developed by Android Inc., a firm purchased by Google in 2005. Android is based upon a modified version of the Linux kernel. As of December 2013, Android was the number 1 mobile OS, in unit sales, surpassing iOS, while iOS was still the most profitable platform.
The Android operating system software stack consists of Java applications running on a Java based object oriented application framework on top of Java core libraries running on the Dalvik virtual machine featuring JIT compilation.
The Official Android home page is located at:
http://www.android.com/
The Official Android Developer home page is located at:
1
http://developer.android.com/index.html
2.3 Sunlight Congress API
The Sunlight Congress API is a live JSON API for the people and work of Congress, provided by the Sunlight Foundation. With the API you can:
• Look up members of Congress by location or by zip code.
• Obtain the official Twitter, YouTube, and Facebook accounts.
• Look up the daily work of Congress: bills, amendments, nominations.
• Get the live activity of Congress: past and future votes, floor activity, hearings.
In order to make requests to Sunlight Congress API, you need to get an API key:
• Go to http://sunlightfoundation.com/api/
• Click on “Get a Key!
• Fill the sign up form
• You will get a confirm email. Click on the link in the email.
Then login at the Sunlight Foundation website and go to your “Profile Settings”. You will see your API key string right above you name. For information about the Sunlight Congress API, please go to:
https://sunlightlabs.github.io/congress/
and
http://tryit.sunlightfoundation.com/congress
2.4 Amazon Web Services (AWS)
AWS is Amazon’s implementation of cloud computing. Included in AWS is Amazon Elastic Compute Cloud (EC2), which delivers scalable, pay-as-you-go compute capacity in the cloud, and AWS Elastic Beanstalk, an even easier way to quickly deploy and manage applications in the AWS cloud. You simply upload your application, and Elastic Beanstalk automatically handles the deployment details of capacity provisioning, load balancing, auto-scaling, and application health monitoring. Elastic Beanstalk is built using familiar software stacks such as the Apache HTTP Server, PHP, and Python, Passenger for Ruby, IIS 7.5 for .NET, and Apache Tomcat for Java.
The Amazon Web Services homepage is available at: http://aws.amazon.com/
2.5 Google App Engine (GAE)
Google App Engine applications are easy to create, easy to maintain, and easy to scale as your traffic and data storage needs change. With App Engine, there are no servers to maintain. You simply upload your application and it’s ready to go. App Engine applications automatically scale based on incoming traffic. Load balancing, micro services, authorization, SQL and NoSQL
2
databases, memcache, traffic splitting, logging, search, versioning, roll out and roll backs, and security scanning are all supported natively and are highly customizable.
To learn more about GAE support for PHP visit the page:
https://cloud.google.com/appengine/docs/php/
3. Prerequisites
This homework requires the use of the following components:
1. This homework requires the use of the following components:
A. Download and install Android Studio. You may use any other IDE other than Android Studio such as Eclipse, but you will be on your own if problems spring up.
B. First you need to install Java on your local machine. You can download JDK 8 from – http://www.oracle.com/technetwork/java/javase/downloads/index.html. For windows users, after installing the JDK, you need to add environment variables for JDK.
• Properties -> Advanced -> Environment Variables -> System variables -> New Variable
Name: JAVA_HOME, Variable Value:
• Typically, this full path looks something like C:\Program Files\Java\jdk1.8.0.
Then modify the PATH variable as follows on Microsoft Windows: C:\WINDOWS\system32;C:\WINDOWS;C:\Program Files\Java\jdk1.8.0\bin This path may vary depending on your installation.
• Note: The PATH environment variable is a series of directories separated by semicolons (;) and is not case-sensitive. Microsoft Windows looks for programs in the PATH directories in order, from left to right. You should only have one bin directory for a JDK in the path at a time. Those following the first instance are ignored. If you are not sure where to add the path, add it to the right of the value of the PATH variable. The new path takes effect in each new command window you open after setting the PATH variable.
• Reboot your computer and type java version in the terminal to see whether your JDK has been installed correctly.
Set up the Android Studio environment so that you can run any sample android app on your phone/tablet/virtual device from it. Then you can start with this homework app. You will need to enable “Developer Options” and “USB debugging” if you are using an actual device. There are endless resources a simple search away on how to setup your Android Studio.
3
4. High Level Design
In this exercise, you will develop an Android Mobile application, which will have following functionality:
There will be a slide out-menu which will provide access to the different screens such as Legislators, Bills, Committees and Favorites. The content displayed in each of these sections will be similar to Homework 8 but we will go into details later on. The initial screen will be defaulted to Legislators as shown below.
Figure 1. Initial Screens
On successful loading, we would get the legislator details using our PHP script hosted on Amazon Web Services/Google App Engine, which would return the result in JSON format. We would display the legislator details in a ListView component in the ‘By States’ tab. Again, the legislator screen is defaulted to the ‘By States’ tab. It has two other tabs ‘House’ and ‘Senate’ which displays the legislator details according to their Chamber.
5. Implementation
5.1 Legislator Section
You must replicate the Legislators Screen, as shown in Figure 1. The tab names remain the same as in Homework 8.
The interface consists of the following:
• A ‘ListView’ component displaying the list of legislators
4
• A ‘TabHost’ component for hosting screens and data for different tabs
• A ‘LinearLayout’ component to host the side-index on every tab for easy access
based on state or last name
Every element in the list view should contain:
Field Description
Thumbnail
Photo of the legislator (Can be retrieved based on the bio-guide id from https://theunitedstates.io/images/congress/original/bioguide_id.jpg)
Party
Republican or Democrat – Should be in format (R) for Republican and (D) for Democrat
State
The state to which the legislator belongs to – Should be full name of state
District
The district number within the state which he/she represents
Arrow Button
Arrow Image to guide user for viewing details
Each row in the list view should be clickable which will take you to the legislator details screen (explained later). Below is an explanation of the required details in every tab.
• ‘By States’: Ordered list of legislators based on state which they represent. Order the states ascending from A to Z based on the first letter of state. Index should be created based on state name.
• ‘House’: Order legislators based on their last name in ascending order. This tab should contain only legislators from chamber ‘house’. Index should be created based on last name.
• ‘Senate’: Order legislators based on their last name in ascending order. This tab should contain only legislators from chamber ‘senate’. Index should be created based on last name.
Below are screenshots for the House and Senate tabs respectively.
5
Note: Each tab should be darkened or bolded on selection in the way that the active tab should be dark or bold faced and other tab names are greyed out.
5.1.1 Legislator Details:
On clicking a specific row in the Legislator Section, the Legislator details should be displayed in a new screen as shown below. The displayed screen will have the following clickable icons and a set of fields as indicated below.
The fields on this page are described below. The photo and party details are center aligned and each of the labels are left aligned whereas the details are right aligned. On clicking the back arrow button on this details page, the app should go back to tab in the section where the row click was made. This can be any of the ‘By States’, ‘House’ or ‘Senate’ tabs in the Legislators section or even within the Legislators tab in the Favorites section.
Figure 2: Legislator Details
Icons:
• Plain star – Clickable star icon used to add to favorites (explained later on)
• Facebook icon – On click of this icon there should be a browser opened displaying
the legislator’s Facebook page
• Twitter icon – On click of this icon there should be a browser opened displaying
the legislator’s Twitter page
• Earth icon – On click of this icon there should be a browser opened displaying the
legislator’s webpage.
6
Note: If the legislator does not have a webpage, Facebook or Twitter page an error message should be displayed as a toast message. (https://developer.android.com/guide/topics/ui/notifiers/toasts.html)
7
.
Table Field Description
Photo
Displays the photo of the legislator. You should use the base link: https://theunitedstates.io/images/congress/original and the “bioguide_id” to create the image URL.
Party Email
Contact End Term
Office Fax
should not crash or show blank.
5.2 Bills Section
You must replicate the Bills Screen, as shown in Figure 3 below. The tab names remain the same as in Homework 8 and all the bills should be loaded.
The two tabs in this page are:
• ‘Active Bills’: Displays the active bills in descending order with newer bills at the
top. Sort by the introduced date.
• ‘New Bills’: Displays new bills which may or may not be active. These are also
sorted by introduced date in descending order.
There is no index for this screen and just the ListView which is clickable.
The party of the legislator. Format should be: Party image, Party name. The email address of the legislator. The email should be a link, click on the
link to write a new email to this address.
The phone number of the legislator
The start term of the legislator. Format of date should be: Month DD, YYYY The end term of the legislator. Format of date should be: Month DD, YYYY
The office of the legislator
The state the legislator belongs to
Name
Displays the name of the legislator. The format should be Title, Last Name, First Name.
Chamber
Displays the chamber of the legislator. Format should be Chamber: chamber name.
Start Term
Term
A progress bar with percentage showing the term progress. The progress percentage should be (now – start) / (end – start) * 100
State
The fax number
Note: If any of the values are not present, your application should display “N.A” or “None”. It
Birthday
The birthday of the legislator. Format of date should be: Month DD, YYYY
8
Figure 3: Bills Section
Every entry in the bills list should contain the following:
Short title Displays the short title of the bill, if short title is null then display the long title
Arrow Button Arrow Image to guide user for viewing details
Note: You have to highlight the active tab text in black and grey out the other tab
5.3 Bill Details
On clicking a specific row in the Bills Section, the Bill details should be displayed in a new screen as shown below. The displayed screen will have the one clickable icon for adding to favorite and a set of fields as indicated below.
On clicking the back arrow button on this details page, the app should go back to tab in the section where the row click was made. This can be any of the ‘Active Bills or ‘New Bills’ tabs in the Bills section or even within the Bills tab in the Favorites section.
Field Description
Bill ID
Displays the bill id of the bill
Introduced On
Displays the date on which the bill was introduced in Month DD,YYYY format
9
Figure 4: Bill Details
The following details would be displayed:
Table Field Description
Bill ID
ID of the Bill
Bill Type Chamber
Sponsor Introduced On
Version Status
Type of the Bill
Sponsor of the Bill. Format should be: Title, Last Name, First Name
Chamber of the Bill. Start with the image of the Chamber. Then the name of the chamber.
Sponsor of the Bill. Format should be: Title, Last Name, First Name
The date that the bill was introduced. Date format should be: Month DD,YYYY
The link of congress URL
The “version name” field in “last version” field of JSON response
Sponsor
Introduced
The date that the bill was introduced. Date format should be: Month DD,YYYY
Status
The status should be “Active” or “New”, depends on the “active” field in JSON response.
Congress URL
Bill URL
The link to the pdf version of the bill
Note: If any of the values are not present, your application should display “N.A” or “None”. It should not crash or show blank.
10
5.4 Committees Section
You must replicate the Committees Screen, as shown in Figure 5 below. The tab names remain the same as in Homework 8 and all the committees should be loaded.
The three tabs in this page are:
• ‘House’: Displays the house committees in ascending order of committee
names.
• ‘Senate: Displays the senate committees in ascending order of committee
names.
• ‘Joint’: Displays the joint committees in ascending order of committee names.
There is no index for this screen and just the ListView which is clickable.
Figure 5: Committees Section
Every entry in the committee list should contain the following:
Committee Name Displays the name of the committee
Arrow Button Arrow Image to guide user for viewing details
Note: You have to highlight the active tab text in black and grey out the other tab 5.5 Committee Details
Field Description
Committee ID
Displays the committee id of the bill
Chamber
Displays the chamber name of the committee
11
On clicking a specific row in the Committees Section, the Committee details should be displayed in a new screen as shown below. The displayed screen will have the one clickable icon for adding to favorite and a set of fields as indicated below.
On clicking the back arrow button on this details page, the app should go back to tab in the section where the row click was made. This can be any of the ‘Joint’, ‘House’ or ‘Senate’ tabs in the Committees section or even within the Committees tab in the Favorites section.
Figure 6: Committee Details
The details have to be in a tabular format. Each of the entry in the list should display the following details:
Table Field Description
Committee ID
ID of the Committee
Name
Parent Committee
Office
Name of the Committee
Parent Committee of the Committee. If not available, leave empty
Office of the Committee. If not available, display N.A
Chamber
Chamber of the Committee. Start with the image of the Chamber. Then the name of the chamber.
Contact
Phone of the Committee
12
Note: If any of the values are not present, your application should display “N.A” or “None”. It should not crash or show blank.
5.6 Favorites Section
You must replicate the Favorites Screen, as shown in Figure 5 below. The tab names remain the same as in Homework 8 and should remain empty initially.
When the user marks a particular item as favorite, it should appear in the corresponding tab for Legislators, Bills or Committees. Further, when the user unmarks the same item from favorites, the item should disappear. This is the traditional favorite/un-favorite functionality.
When an item is marked as favorite, the star icon which we have described in the different sections should change to yellow/golden color to indicate that it has been marked. Similarly, when a favorite item is unmarked, the golden color should disappear and icon comes back to regular.
You will see this in the demo video.
Figure 8. Favorites
Note: The rest of the details for Legislators, bills and committees are same as the previous sections in terms of what should be displayed in the ListView for each section as well as on click of the row item.
5.7 About me
13
You will also have to implement an additional menu item in the Navigation bar that links to a display screen which displays information about you.
On clicking the back arrow button on this details page, the app should go back to the active tab in the section where the row click was made. For example: If you click About me from the Bills Section and you are currently on New Bills, it should go back to New Bills on the Bills section. It should look as below:
Figure 9. About Me
6. Implementation Hints
See the HW9 Android Clues file.
7. Material You Need to Submit
Unlike other exercises, you will have to “demo” your submission “in person” during a special grading session. Details and logistics for the demo will be provided in class, in the Announcement page and in Piazza.
You should also ZIP your Android source directory and SUBMIT the resulting ZIP file. Make sure that the source path does not include the .apk binary file.
14