- Become familiar with the AJAX and JSON technologies
- Use a combination of HTML5, CSS, Bootstrap, jQuery, AngularJS and PHP
- Get hands-on experience in Google Cloud App Engine or Amazon Web Services
- Get hands-on experience on how to use Bootstrap to enhance the user experience
- Provide an interface to perform congress search using Sunlight Congress APIs
In this exercise, you have to use the AJAX component provided in JQuery.
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, heari ngs.
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/
AWS is Amazon’s implementation of cloud computing. AWS includes 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 can 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/
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 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/
Similar to homework 6, in this exercise you will create a webpage that allows users to search for congress information using the Sunlight Congress API.
The difference being, in this homework you will create a PHP script to return a JSON formatted data stream to the front-end. The client parses the JSON data and renders it in a nicer-looking, responsive UI (using Bootstrap).
A user first opens a page as shown below in Figure 1. The page includes a navigation bar at the left and the legislators’ information table at the right.
At the top of the webpage, there is a page header which contains a stack icon at left and an image link in the center.
The navigation bar should contain 4 items (Legislators, Bills, Committees and Favorites), each item starts with an icon, followed by the text.
When the user clicks on an item in this navigation bar, the corresponding content should be loaded. For example, when the user clicks on Legislators, the legislators’ information table should be loaded to the content part.
To know how to get started with Bootstrap, please refer to the page at http://getbootstrap.com/getting-started/. You need to import the necessary CSS file and JS file provided by Bootstrap.
Bootstrap provides a complete mechanism to make Web pages responsive to different mobile devices. In this exercise you will get hands-on experience with responsive design using the Bootstrap Grid System.
At a minimum, you will need to use Bootstrap Form, Tab, Wells, Carousel and Glyphicons to implement the required functionality.
You can use either host it in Google App Engine or Amazon Web Services. While grading we just need to see the data.
You are allowed only to use browsers local storage. No other way of storing data like cookies, session storage is allowed.
The local storage data should be persistent until the browser is closed. Even if the page is refreshed, the local storage data should not be deleted.
Yes. It is mandatory to use bootstrap carousel.
There are several ways to avoid cross origin issues. You can use CORS. If you like to use
$.ajax() you can use
datatype: jsonp with callback function appended with the URL.Q6. If there is a scroll issue in iPhone or iPad? Use the following style to the parent or
body tag -webkit-overflow-scrolling: touch;