The username and password is on Canvas — here is our target:
https://omnicalc-2.matchthetarget.com/
The essential concept: visitors can add a query string onto any URL in your Rails app, e.g.
/rock?dessert=Ice cream&color=Orange
Watch what happens in your server log when you visit that URL.
Rails parses any query string parameters and puts them into a special Hash called params. You have access to params in the action.
With that simple fact, combined with the way that HTML forms behave when submitted, we can invent ways to make any forms we want work!
Wire up the following 4 RCAVs and add <h1> elements to each that say "Addition", "Subtraction", "Multiplication", and "Division":
/wizard_add/wizard_subtract/wizard_multiply/wizard_divide
Use the slides, chapter, and your RPS RCAV workspace as a reference.
Visit your /wizard_add URL, but type a query string on to the end: ?first_num=3&second_num=4. So, the whole path should be:
/wizard_add?first_num=3&second_num=4
First pull up the Terminal tab running your server and Cmd-K or Ctrl-K to clear it out, then visit that URL again. Scroll to the top of the Terminal tab. Read the log — what do you notice?
The params Parameters Hash! Use the params hash in the action you defined to calculate a result and display it in the view template you created. Make the markup match the target.
Do the same thing for
/wizard_subtract,/wizard_multiply,- and
/wizard_divide.
Now, make it easier on your users. They should not have to type into the address bar of their browsers to access these useful calculations.
Can you invent a way to make it easier for them using what you've learned about RCAV, params, and what we reverse-engineered about how HTML forms work?
Try making a page appear at the URL /add. Add a form to it that takes users to /wizard_add with the appropriate query string on the end.
- Build out the add, subtract, multiply, and divide RCAVs.
- Street to Coordinates: Figure out how to turn an arbitrary street address (find a place that is sort of rainy right now to test with) into a latitude/longitude using the Geocoding API.
- Coordinates to weather: Figure out how to turn a latitude/longitude pair into a weather forecast using the Pirate Weather API: Show the information displayed in the target:
- Current Temperature
- Current summaray
- Outlooks for next sixy minutes, several hours, several days
- Street to Weather: Put the above two together — given an arbitrary street address, display the forecast.
Interacting with APIs can be easier if someone has written a Ruby library (or "gem") with methods that already know the URLs, parse the JSON, and return exactly the values we want.
See this Chapter for a guide to using the Google Translate API via its first-party gem.
Read more at the gem docs:
See this Chapter for a guide to sending text messages via the Twilio API.
Make your app behave like the target! Accept some text from the user, ask for a target language, translate the text, and SMS it to a phone number.
Some handy links:
- Hoppscotch: a great, free, online tool that makes it easy to experiment with API calls and see the JSON reponses nicely formatted.
- How to store secrets securely on Gitpod
-
Pirate Weather forecast at the Merchandise Mart for machines:
https://api.pirateweather.net/forecast/REPLACE_THIS_PATH_SEGMENT_WITH_YOUR_API_TOKEN/41.8887,-87.6355You'll need an access token to view this page. Find it in the assignment on Canvas.
-
Map of Merchandise Mart for machines:
https://maps.googleapis.com/maps/api/geocode/json?address=Merchandise%20Mart%20Chicago&key=REPLACE_THIS_QUERY_STRING_PARAMETER_WITH_YOUR_API_TOKENYou'll need an access token to view this page. Find it in the assignment on Canvas.
Most of working with APIs boils down to working with Arrays and Hashes.
You will likely also need to use if statements and loops (most useful programs do).
Here are some less familiar methods that will be useful:
URI.open(): The argument toURI.openshould be aStringcontaining a URL. The method will then read the page at the provided URL and return it as aStringIOobject.- In order to use this method, we must
require "open-uri".
- In order to use this method, we must
StringIO#read: If you call.readon an instance ofTempfile, it will return the contents of the file as aString.JSON.parse(): The argument toJSON.parseshould be aStringcontaining valid JSON. The method will transform the JSON objects into Ruby objects.- In order to use this method, we must
require "json".
- In order to use this method, we must
Click here to see names of each test
/add has a functional Route Controller Action View
/add has an <h1> with the text 'Addition'
/add has a <form> element
/add has a label with the text 'Add this:'
/add has a label with the text 'to this:'
/add has two <input> elements
/add has a button element with text 'Add!'
/add has a <form> element with an 'action' attribute
/subtract has a functional Route Controller Action View
/subtract has an <h1> with the text 'Subtraction'
/subtract has a <form> element
/subtract has a label with the text 'Subtract this:'
/subtract has a label with the text 'from this:'
/subtract has two <input> elements
/subtract has a button element with text 'Subtract!'
/subtract has a <form> element with an 'action' attribute
/multiply has a functional Route Controller Action View
/multiply has an <h1> with the text 'Multiplication'
/multiply has a <form> element
/multiply has a label with the text 'Multiply this:'
/multiply has a label with the text 'by this:'
/multiply has two <input> elements
/multiply has a button element with text 'Multiply!'
/multiply has a <form> element with an 'action' attribute
/divide has a functional Route Controller Action View
/divide has an <h1> with the text 'Division'
/divide has a <form> element
/divide has a label with the text 'Divide this:'
/divide has a label with the text 'by this:'
/divide has two <input> elements
/divide has a button element with text 'Divide!'
/divide has a <form> element with an 'action' attribute
/add has a form that submits to a valid route
/add displays the first number entered when the form is submitted
/add displays the second number entered when the form is submitted
/add displays the sum when the form is submitted
/subtract has a form that submits to a valid route
/subtract displays the first number entered when the form is submitted
/subtract displays the second number entered when the form is submitted
/subtract displays the result of the subtraction when the form is submitted
/multiply has a form that submits to a valid route
/multiply displays the first number entered when the form is submitted
/multiply displays the second number entered when the form is submitted
/multiply displays the sum when the form is submitted
/divide has a form that submits to a valid route
/divide displays the first number entered when the form is submitted
/divide displays the second number entered when the form is submitted
/divide displays the sum when the form is submitted
/coords_to_weather/new displays the latitude displays the longitude displays the current temperature displays the current summary displays the outlook for the next sixty minutes displays the outlook for the next several hours displays the outlook for the next several days
/street_to_coords/new displays the street address displays the latitude displays the longitude
/street_to_weather/new displays the street address displays the current temperature displays the current summary displays the outlook for the next sixty minutes displays the outlook for the next several hours displays the outlook for the next several days