Google Apps Script: The Authentic{ated} Mobile Playground (demo of image capture, and .pdf publication)

I was delighted to be able to speak recently at the Edinburgh Mobile Dev Meetup about Google Apps Script. Thanks to Product Forge there’s a recording of my session on YouTube and you can also get my slides as Google Slides or from Slideshare. The start of this talk is my usual Google Apps Script introduction [another room of devs who have never heard of Google Apps Script :(], but went on to give some mobile specific signposts like Android Add-ons and Execution API.

As part of the talk I developed a quick demonstration app built entirely with Google Apps Script. The app has a mobile friendly web form that collects some data and allows the user to capture a photo. The use case would be something like an engineer inspecting and recording data on a site visit and some certification of the visit being sent to the client. You could probably manage this with existing features in G Suite with Google Forms and existing Add-ons like Form Publisher but I was keen to show how little code was actually needed to do this. The demo app pulls together five features:

  • Google Sheets for data storage
  • Google Drive for storing images
  • Google Slides as a template for generating a .pdf
  • Google Apps Script Webapp/HTMLService for the UI
  • Google Apps Script MailApp for sending attachments

Here is what the web interface looks like:

Demo app interface

Key features:

  • Using jQuery Mobile for UI
  • Location Id is set from the querystring
  • Data populated from a Google Sheet
  • Photo button uses <input name="myPhoto" type="file" accept="image/*;capture=camera"/> to initiate phone camera

When the form is submitted a .pdf including the photo and submitted details is emailed and the Google Sheet updates with the info (an example .pdf is here):

Capture

You can reuse the code by File > Make a copy of this Script Project. I’ve also pulled out some highlights below:

Code highlights

Client Side: Making AJAX like call

  function handleFormSubmit(formObject) {
    google.script.run.withSuccessHandler(updateUrl)
              .processForm(formObject);
  }

Server Side: Getting the user’s email

  // able to get email of who is using the form                   
  data.engineer = Session.getEffectiveUser().getEmail();

Server Side: Adding a file from a form to Google Drive

  // we get our Pics folder
  var folder = DriveApp.getFolderById('0B6GkLMU9sHmLejN2R0xUaVJfVjA');
  var formBlob = formObject.myPhoto;
  // sending image file to our Google Drive folder
  var imgFile = folder.createFile(formBlob);

Server Side: Writing data to a Google Sheet

  // Reading a Google Sheet
  var sheet = SpreadsheetApp.openById('1ANtlQPLPpC…vOIqR4wYayWdVZU4')
                            .getActiveSheet();
  // writing the data to the sheet - each row []
  var towrite = [formObject.name, …  new Date(), imgFile.getUrl()];
  // getRange(Integer row, Integer column, Integer numRows, Integer numColumns) : Range
  sheet.getRange(row+1, 2, 1, towrite.length).setValues([towrite]);

Server Side: Getting Slides as PDF and emailing as attachment

  // Sending a copy of the cert as pdf
  // https://developers.google.com/apps-script/reference/mail/mail-app
  MailApp.sendEmail('m.hawksey@gmail.com', 'Attachment example', 'Certificate attached.', {
    name: 'Automatic Emailer Script',
    attachments: [DECK.getAs(MimeType.PDF)]
  });

Server Side: Filling in a Google Slide template

I’ve commented in the source code where this happens. I’ve a previous post on Using the Google Slides API with Google Apps Script which goes into this bit in more detail.

And that’s all you need. Big thank you to David Sturrock for inviting me along, those who listened and the comments/questions at the end.