By @mhawksey

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

Martin Hawksey

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:

Here is what the web interface looks like:

Key features:

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):

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.

 

Exit mobile version