Lesson 2: Creating a Web App to Handle Get Requests

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.
 1 | var ss = SpreadsheetApp.openById('1pHPL31BCjkABCDEFGHIJKLMNOPQRSTUVWXYZyM-42As');
 2 |
 3 | function doGet(e) {
 4 |  ss.getSheetByName('Log').insertRowAfter(1);
 5 |  ss.getSheetByName('Log').getRange(2, 1, 1, 3).setValues([[new Date(), e.parameter.t,e.parameter.h]]);
 6 |  return ContentService.createTextOutput('Data logged\n');
 7 | }

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).
Replace the spreadsheet ID on line one 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).

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 will be shown another popup window that explains which permissions the app needs to run. Since you made the app, you know it's safe. Click Allow.

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

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.


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.

<< Previous          Next >>