Web and Mobile Development - RESTful Services

Activity Goals

The goals of this activity are:
  1. To explore Representational State Transfer (REST) service providers
  2. To explain the mapping of RESTful verbs onto the HTTP verbs GET, PUT, POST, and DELETE
  3. To explain how stateless HTTP calls can be used to establish state with a client

The Activity

Directions

Consider the activity models and answer the questions provided. First reflect on these questions on your own briefly, before discussing and comparing your thoughts with your group. Appoint one member of your group to take notes for the group, and appoint another member to discuss your findings with the class. After class, think about the questions in the reflective prompt and respond to those individually. Report out on areas of disagreement or items for which you and your group identified alternative approaches. Write down and report out questions you encountered along the way for group discussion.

Model 1: JSON Objects



jsonobj.forEach(function(obj) {
    console.log(obj.field_name);
});

Questions

  1. This JSON result was returned from a web request to https://api.weatherusa.net/v1/forecast?q=40.1915,-75.4559&daily=0&units=e&maxtime=7d, which obtains the 7-day forecast at Ursinus College given the College's latitude and longitude GPS coordinates. Use a JSON Pretty Printer to better format the JSON for reading.
  2. What do the curly braces represent?
  3. What does the square bracket represent?
  4. Modify the program to access this RESTful endpoint and, in a loop, print out each day's date (using validt) and temperature. An example for loop in JavaScript is given above.

Embedded Code Environment

You can try out some code examples in this embedded development environment! To share this with someone else, first have one member of your group make a small change to the file, then click "Open in Repl.it". Log into your Repl.it account (or create one if needed), and click the "Share" button at the top right. Note that some embedded Repl.it projects have multiple source files; you can see those by clicking the file icon on the left navigation bar of the embedded code frame. Share the link that opens up with your group members. Remember only to do this for partner/group activities!

Model 2: A Sample JSON Response


{
    "response": {
        "version": "0.1",
        "termsofService": "http://www.wunderground.com/weather/api/d/terms.html",
        "features": {
            "conditions": 1
        }
    },
    "current_observation": {
        "image": {
            "url": "http://icons-ak.wxug.com/graphics/wu2/logo_130x80.png",
            "title": "Weather Underground",
            "link": "http://www.wunderground.com"
        },
        "display_location": {
            "city": "Philadelphia",
            "state": "PA",
            "zip": "19104",
            "latitude": "39.96150970",
            "longitude": "-75.19716644",
            "elevation": "41.00000000"
        },
        "observation_location": {
            "full": "University City - West Philadelphia, Philadelphia, Pennsylvania",
            "city": "University City - West Philadelphia, Philadelphia",
            "state": "Pennsylvania",
            "latitude": "39.950554",
            "longitude": "-75.211868",
            "elevation": "70 ft"
        },
      "temp_f": 76.5,      
    }
}




        

        
        
        
Questions

        
    
        
        
  1. What is the path to longitude?
    2. 
        
        
  2. What is the path to temp_f?
    3. 
        
        

        
        
        
        
        

    
        
Model 3: A Sample JSON Array Response

        
        
        

        



"forecast": {
    "txt_forecast": {
        "date": "5:00 PM EDT",
        "forecastday": [
            {
                "period": 0,
                "icon": "tstorms",
                "icon_url": "http://icons-ak.wxug.com/i/c/k/tstorms.gif",
                "title": "Sunday",
                "fcttext": "Mostly cloudy with thunderstorms and rain showers. High of 88F. Winds from the SSW at 5 to 15 mph. Chance of rain 30%.",
                "fcttext_metric": "Mostly cloudy with thunderstorms and rain showers. High of 31C. Breezy. Winds from the SSW at 10 to 20 km/h. Chance of rain 30%.",
                "pop": "30"
            }
         ]
}




        

        
        
        
Questions

        
    
        
        
  1. What is the path to the first fcttext element?
    2. 
        
        

        
        
        
        
        

    
        
Model 4: RESTful Service

        
        
        

        Posting with form parameters


Posting with application/json Content-Type


A GET request


The data store after posting data


Posting with cURL from the console


Performing an update with cURL



        

        
        
        
Questions

        
    
        
        
  1. Launch the given web service and invoke it using your choice of web client.  To do this, you will want to set up a mongodb database, add a test user with a password, and allow access from any IP address.  MongoDB will give you a connection string that you can paste into index.js over my default test_user connection string.  This article details setting up a MongoDB account and data store.  In the code example, you can update your mongodb link, including your username and password, in the mongoose.connect line.  Be sure to remove these from your code when you're done, or better yet, de-activate that user account on mongodb (you can schedule this to expire when you create it)!
    2. 
        
        
  2. Invoke the service using a node.js application or a JavaScript browser client.  You can use the Advanced REST Client plugin for Chrome (or Postman, or a similar REST client plugin, on other browsers) or the curl command to execute your web service, in addition to the client code examples we saw previously.  Just update the link to your repl.it server project link in the commands or URL's shown here.
    3. 
        
        
  3. What HTTP verb is used to create a new item?  To retrieve an item?  To update an item?  To delete an item?
    4. 
        
        
  4. Why is POST used to create items while PUT is used to update them?  Aren't these interchangeable?
    5. 
        
        
  5. What if you wanted to support other verbs on these items, like putOnSale?  Are service endpoints typically nouns or verbs, and how might you re-work a sale verb like this one into an appropriate CRUD endpoint?
    6. 
        
        
  6. What is the advantage of separating your code into a model and a controller implementation?
    7. 
        
        
  7. How would you define a schema that supports an array of sub-objects?  See this article for an example.
    8. 
        
        
  8. How would you define a schema that supports an embedded sub-object?  See this article for an example.
    9. 
        
        

        
        
        
        
Embedded Code Environment

        You can try out some code examples in this embedded development environment!  To share this with someone else, first have one member of your group make a small change to the file, then click "Open in Repl.it".  Log into your Repl.it account (or create one if needed), and click the "Share" button at the top right.  Note that some embedded Repl.it projects have multiple source files; you can see those by clicking the file icon on the left navigation bar of the embedded code frame.  Share the link that opens up with your group members.  Remember only to do this for partner/group activities!
        
        
        
        
        

    
    
    
    
 
    
     

    
    
           
    
           
    
    
    
Submission

    Submit your answers to the questions using the Collaborative Spaces section of OneNote.  You can add a page with your name and your group members' names, and today's date, as the title.  Under the appropriate section (i.e., "Class Notes", "Collaborative Spaces", "Reflective Prompts") that you can select on the left side of the screen, you can click "Add Page" on the right side.  You can answer any reflective prompt questions in the Reflective Journal section of your OneNote Classroom personal section.