INFORMATION NOW: How It’s Made Election Info App Part 1

Monday, March 9, 2015

How It’s Made Election Info App Part 1

In an earlier blog post, we announced the Election Info sample app. We briefly talked about how we were able to use Apps Script to easily create a comprehensive sample application that provided timely voting information. This post shows just how easy it is to use Apps Script to get information from an external API and integrate with various Google services to create a rich web application and provide a meaningful user experience.

UrlFetch

First, we use UrlFetchApp to get JSON from the Google Civic Information API and use Utilities.jsonParse to convert it to a useful javascript object.

var url =
    https://www.googleapis.com/civicinfo/us_v1/voterinfo/2000/lookup;
var address = { "address" : "1263 Pacific Ave. Kansas City KS" };

var options =
 {
   method : "post",
   contentType : "application/json",
   payload: Utilities.jsonStringify(address)
 };
var responseText = UrlFetchApp.fetch(url, options).getContentText();
var response = Utilities.jsonParse(responseText);

After getting the response object, we can simply drill into it to access various data provided by the API.

Calendar Service

One of the things the response object provides us with is the election date. Using Apps Scripts Calendar service, it is really easy to create an event on voting day in the users calendar with the polling address. First, we create a Date object from the date string. We then create an all-day event on the default calendar on this date, passing along the polling address we get from the response object.

// create a Date object from the response date string 
// ("2012-11-6" --> Date object)
var [year, month, day] = response.election.electionDay.split(-);
// javascript months are zero-indexed
var electionDate = new Date(year, month-1, day); 
// get the first polling locations address
var pollAddress = response.pollingLocations[0].address;

var cal = CalendarApp.getDefaultCalendar();
cal.createAllDayEvent("Go Vote!", electionDate, {location:pollAddress});

Maps Service

Using the Maps service, we can generate static maps with the users home or polling address as shown in the following code snippet. We display these maps on the web app page, then embed them in the reminder email and bring-along document as we will show in the following sections.

var userAddress = response.normalizedInput;
var normalizedAddress = userAddress.line1 +   +
                        userAddress.city + ,  +
                        userAddress.state +   +
                        userAddress.zip;
// normalizedAddress looks like "501 Kildaire Rd Chapel Hill, NC 27516"
var staticMapUrl = Maps.newStaticMap().setSize(600, 300)
        .addMarker(normalizedAddress)
        .getMapUrl();

Gmail Service

We also provide a simple method for users to email themselves all of this information. Using the Gmail service, we can send an HTML email that embeds the voting information and the static maps we generated above. The Apps Script documentation contains great tutorials such as the Maps tutorial we used to generate the directions below.

var email = Session.getActiveUser().getEmail();
var body = Election Date:  + electionDate + <br/>
           + Your polling address:  + pollAddress + <br/>
           + Polling Hours:  + pollingHours + <br/>
           + <img src=" + directions.mapUrl + "/> <br/>
           + Directions:  + dirList;
MailApp.sendEmail(email, Upcoming Election Voting Information, 
    Voting Info, {htmlBody: body});

Document Service

Using the Document service, we were able to easily generate a bring-along document with polling address, hours, and directions. The follow code excerpt shows how easy it is to add different elements like headers, tables, and paragraphs to a document. Apps Script also provides an extensive list of methods to programmatically control the look and presentation of the various elements.

var title = "Voting Information";
var doc = DocumentApp.create(title + " for " + homeAddress);

var reportTitle = doc.appendParagraph(title);
reportTitle.setFontFamily(DocumentApp.FontFamily.ARIAL)
           .setFontSize(22).setForegroundColor(#4A86E8)
           .setBold(true)
           .setAlignment(DocumentApp.HorizontalAlignment.CENTER);
var header = doc.addHeader();
header.appendParagraph(Generated by the Election Info application  +
  built on Google Apps Script)
.setAlignment(DocumentApp.HorizontalAlignment.CENTER)
.setAttributes({ITALIC : true});

var tableStyle = {};
tableStyle[DocumentApp.Attribute.PADDING_BOTTOM] = 0;
tableStyle[DocumentApp.Attribute.PADDING_TOP] = 0;
tableStyle[DocumentApp.Attribute.PADDING_LEFT] = 0;
tableStyle[DocumentApp.Attribute.PADDING_RIGHT] = 0;
var addressTable = doc.appendTable([
  [Your address:  + homeAddress],
  [Your Polling Location:  + pollAddress],
  []
]).setAttributes(tableStyle);

// add appropriately sized poll location image
addressTable.getCell(1,0).appendImage(pollImg.getBlob())
    .setHeight(300).setWidth(600);

// populate last row of the table with polling hours
addressTable.getCell(2,0).clear().appendParagraph("Polling Hours: ");
addressTable.getCell(2,0).appendParagraph(
    UserProperties.getProperty(Keys.POLLING_HOURS));

Here is an image which shows the generated bring-along document embedded with static map images from the Maps service.

Apps Script allowed us to easily take information from an external API and tie it into various Google services to provide a great user experience. Stay tuned for an upcoming blog post showing how we created the front end!

Kalyan Reddy profile | Stack Overflow

Kalyan is a Developer Programs Engineer on the Google Apps Script team based in NYC. He is committed to increasing developer productivity by helping them fully utilize the power of Apps Script. In his free time, he enjoys participating in the Maker community and hacking together robots.

INFORMATION NOW

Pages