Warning: Outdated Content
This lab is from a previous version of CS 125. Click here to access the latest version.
Web and Web APIs
The internet is one of the most—if not the most—impressive pieces of technology ever created. A reliable system connecting 4 billion machines, it has also served as a platform enabling enormous amounts of innovation. Today we’ll look at the web in two ways: both as a provider of services or API that we can utilize when we create our own applications, and as a medium for self-expression through a personal website.
Note that there is no written part of this lab. Instead, we’ll expect you to find any required information using the internet itself. However, there are two separate programming components.
1. Picking a Project Partner
You’ll work in pairs on today’s activity. So you may want to think about finding someone that you will also work on for the final project, which will start later this week. Obviously you want to find someone to work with that you enjoy working with and think that you can do an awesome project with—since we will be giving extra credit for some of the best projects. Another consideration is ensuring that at least one of you has a laptop that can smoothly run Android Studio and the emulator, or an Android phone for demoing your new application.
You don’t have to officially pick a partner until next week, but perhaps today’s lab is a good trial run.
2. Exploring Web APIs (60 Minutes)
Web interfaces make it possible for us to easily incorporate powerful services and enormous amounts of information into our Android apps. Many of these interfaces are publicly-available, and in other cases free API keys are provided for experimentation and limited use.
2.1. Forking and Cloning the Lab11 Android Studio Project
We’ve set up an GitHub repository for the Android component of Lab11. It contains an Android Studio project that’s correctly configured for this part of Lab 11. Getting access to it is similar to how you imported MP0. But you have to fork our repository first. If it’s not obvious how to do that, try following these instructions.
Note that you should import this using Android Studio, not IntelliJ. You’ll use IntelliJ for the next part of the lab.
2.2. Understanding Volley
Our starter code uses Google’s Volley library to make API requests. You may want to review its documentation as you examine our starter code.
Similar to MP6, the Lab 11 code base uses a button to initiate a web API call. You should finish the web UI so that it displays the results in the text box provided and uses the progress bar appropriately.
Here’s the key bit of code that is making the web API request:
JsonObjectRequest jsonObjectRequest = new JsonObjectRequest(
Request.Method.GET,
"",
null,
new Response.Listener<JSONObject>() {
@Override
public void onResponse(final JSONObject response) {
Log.d(TAG, response.toString());
}
}, new Response.ErrorListener() {
@Override
public void onErrorResponse(final VolleyError error) {
Log.w(TAG, error.toString());
}
});Answer the following questions about the code above:
-
What kind of HTTP request is being made?
-
What is the URL being used?
-
What code runs if the request succeeds?
-
What code runs if the request fails?
-
If the request fails, how would you find out more information about why?
2.3. Adding URL Parameters to a Request
Some APIs, like
this one,
require that you add parameters to your URL.
So if I wanted to get a quote for Apple Computer, Inc., which has symbol APPL,
just issuing a GET request with this URL:
https://api.iextrading.com/1.0/stock/AAPL/batchReturns an empty JSON array.
Because, as
their documentation
explains, there is a required types request parameter.
So, to request a quote my GET request URL would look like
https://api.iextrading.com/1.0/stock/AAPL/batch?types=quoteand to get both a quote and stock news
https://api.iextrading.com/1.0/stock/AAPL/batch?types=quote,news2.4. Adding Data to a POST Request
When you use POST you’ll usually want to add some JSON data to the body of the
request.
Volley makes this quite easy.
Here’s an example:
// Initialize a new JSONObject from a string. Not the escaping required.
final JSONObject jsonBody = new JSONObject("{\"type\":\"example\"}");
JsonObjectRequest jsonObjectRequest = new JsonObjectRequest(
Request.Method.POST,
url,
jsonBody,
...Note that you can create a JSONObject from a String as shown, as long as it
is valid JSON.
You also have to escape (\") the double quotes inside the string literal.
2.5. Adding Headers to a Request
To authenticate with some APIs you must add your API key to the header of the
HTTP message.
For example, the documentation for the
Microsoft Cognitive Services Computer Vision API
that we’ve been using for MP6
specifies that you must add an API key to the headers with name
Ocp-Apim-Subscription-Key.
Here’s an example of how to do that using Volley that also logs the parameters to the debugging output:
JsonObjectRequest jsonObjectRequest = new JsonObjectRequest(
Request.Method.GET,
"",
null,
new Response.Listener<JSONObject>() {
@Override
public void onResponse(final JSONObject response) {
Log.d(TAG, response.toString());
}
}, new Response.ErrorListener() {
@Override
public void onErrorResponse(final VolleyError error) {
Log.w(TAG, error.toString());
}
}) {
@Override
public Map<String, String> getHeaders() {
Map<String, String> params = new HashMap<String, String>();
params.put("Ocp-Apim-Subscription-Key", "YOUR_API_KEY");
Log.d(TAG, params.toString());
return params;
}
};2.6. Making Your Own API Calls
One of the things that makes learning how to use web APIs so powerful is that there are so many of them. So for this part of the lab we’ll ask you to use four different external web APIs to access different kinds of data. We suggest that you peruse this list of free public APIs that return JSON for inspiration, but you can also Google around for possible APIs to use.
You’ll also want to complete you starter application so that it both displays the JSON that is returned in the available text box and uses a Toast notification to indicate errors when something goes wrong. You should also continue to log errors and warnings using Android’s Logging system to aid your own development.
Choose four different web APIs to make the following kinds of requests. Note that this list above distinguishes between APIs that require authentication and those that do not
-
A
GETthat does not require authentication -
A
GETthat does require authentication -
A
POSTthat does not require authentication -
A
POSTthat does require authentication
Review the instructions above as needed to determine how to add information to
your GET and POST requests.
But don’t get stuck on one particular API for too long.
If it doesn’t seem to be working, try another one.
You may also want to review
this tutorial on
the basics of API authentication.
3. Your Personal Website (30 Minutes)
In the second part of the lab we’ll show you how to quickly set up your own free personal website using GitHub pages.
Your personal website is your calling card on the internet. It should look nice and contain a bit of information about you. It does not have to be complicated, but a nice personal website easily sets you apart from the rest of the crowd that thinks a LinkedIn or Facebook profile counts as a personal website footnote[They don’t.]. This also gives you a chance to express some design flair and build something that is uniquely you.
If you already have a website on GitHub pages, please find someone else in your section to help with this part of the lab.
3.1. Forking and Cloning the Lab11 IntelliJ Project
We’ve set up an GitHub repository for the web component of Lab11. It contains an IntelliJ project that’s correctly configured for this part of Lab 11. Getting access to it is similar to how you imported MP0. But you have to fork our repository first. If it’s not obvious how to do that, try following these instructions.
Note that you should import this using IntelliJ, not Android Studio. While there are better IDEs for editing websites, IntelliJ will be enough to get us started today.
3.2. Modifying Your Site
Try making a few small changes to either the HTML (in index.html) or the CSS
(in site.css).
IntelliJ allows you to preview the results in a browser, and you should be able
to simply refresh each time you change something to see the effect.
Try adding some content.
See if you can add an image and get that to work.
If you get stuck, search the internet for help—it is full of advice about
basic web design.
3.3. Publishing Your Site
Our web starter project contains a very simple starter website based on Bootstrap. Bootstrap is a design framework simplifying the process of building decent-looking websites quickly.
Before you leave lab, try to get to the point where you have forked our Lab 11 web starter code, started making some modifications, and published the result to GitHub Pages. Note that you should just have to turn on GitHub pages in your repository’s settings menu and have it use your master branch—not the docs folder or a separate branch. Also note that it can take a few minutes for your changes to be visible. After you turn on GitHub Pages you may need to create and push a new commit to force GitHub to generate your site for the first time.