Lesson 2: Creating a Web App to Handle Get Requests

*Note: YOU MUST USE A PERSONAL ACCOUNT FOR THIS TO WORK.
    The district has made changes to your permissions with your email account. It will not work with a school account.

In order to log data to the web, you need to have a place to put it. Google spreadsheets are a good choice because they're free, easy to use, and you can do just about anything with them (create a chart, send an email, etc.).

Create a new Google spreadsheet . The default name will be Untitled spreadsheet. Change the name to Smart Home. Google spreadsheets start out with a single sheet named Sheet1. Click the arrow on the tab in the lower left corner of your screen and rename the sheet Log.

Create a script by clicking Tools >> Script editor...


For your convenience I have included the code for the web app from the overview lesson below. You must replace the blurred text with the ID of your spreadsheet. The ID is the random series of numbers, letters, and characters in the spreadsheet's URL that come after https://docs.google.com/spreadsheets/d/ and before /edit (an example spreadsheet ID is highlighted below). See the example to the right.



Code Breakdown
  • Line 1 creates an object named ss that allows me to manipulate my spreadsheet. You will need to change this to your spreadsheet's ID.
  • Lines 3-7 is a function that is called whenever the script's url is requested.
  • Line 4 inserts a blank row on the 2nd line of my only sheet which is named Log.
  • Line 5 pastes a date/time stamp into the 2nd row's first column and temperature and humidity data into columns 2 and 3.
  • Line 6 sends a response to whoever or whatever requested the script's url (useful for debugging).


Once you've added the rest of the code, click Publish >> Deploy as web app....


Type a brief message into the textbox describing what the web app does. Be sure to change who has access to the app to Anyone, even anonymous. Then click Deploy.

You will be prompted to authorize your app. Click Review Permissions.



You might also get this screen:


If you do, click on Advanced. Then click on the link.

Then you should get another permissions window:


Click Allow

The next popup window will give you access to a couple URLs.

If you get an error that looks like this:

Then you need to delete the portion of the url that is shown below


Production URL
Example: https://script.google.com/macros/s/AKfabcdefghijklmnopqrstuvwxyzfHZ6AoLic-gtMBNn0s/exec
The URL in the textbox is your production URL. It will end with /exec. Anyone (or anything) with that URL will be able to access your script. However, you will need to publish your web app every time you make a change to your code when using the production URL.

Development URL
Example: https://script.google.com/macros/s/AKfabcdefghijklmnopqrstuvwxyzfHZ6AoLic-gtMBNn0s/dev
Right clicking on the latest code link below the textbox and selecting Copy link will provide you with a development URL that ends with /dev. It can only be accessed by you when you are signed into a web browser (thus it cannot communicate with an esp8266), but it will run your latest code even if you have not published it yet. It is a great way to debug your code before you publishing the next revision.

Testing Your Web App
Test your web app now by pasting your development URL into a new tab of your web browser (don't hit enter yet). Tack on something to the end of your URL like the highlighted/bold text shown below.

https://script.google.com/macros/s/AKfabcdefghijklmnopqrstuvwxyzfHZ6AoLic-gtMBNn0s/dev?h=25.2&t=21.9

Was the data logged to your spreadsheet? If so, congratulations. If not, from the Script Editor click View >> Execution transcript and look for errors. Once your web app is working, don't forget to publish it again.

Column Headings
Once you have some data, add some column headings.


Challenge (20 points - IOT Web App)
Currently, your app is able to handle temperature and humidity data. Modify your code so that it can handle one more type of data. You can choose. I have sensors that can measure pressure, sound, acceleration, light, and more. Once you have made your changes and your code is working, call me over and show me. Have your QR code for this assignment ready.

Updated by Matthew Johnson on February 5, 2018. 

<< Previous          Next >>
Comments