# 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](https://www.meetup.com/Edinburgh-Mobile-Dev-Meetup/) about Google Apps Script. Thanks to [Product Forge](https://productforge.io/) there’s a [recording of my session on YouTube](https://youtu.be/N9WUVzLmaJo?t=39m54s) and you can also get my slides [as Google Slides](https://docs.google.com/presentation/d/11T80ahaHKOekgx5Zd7o4Tt2eOGI8TvgIXcToFxSjWAM/edit) or [from Slideshare](https://www.slideshare.net/mhawksey/google-apps-script-the-authenticated-mobile-playground). 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](https://hawksey.info/wp-content/uploads/2017/02/Screenshot_20170219-164238_thumb.png "Demo app interface")](https://hawksey.info/wp-content/uploads/2017/02/Screenshot_20170219-164238.png)**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" <strong>accept="image/*;capture=camera"</strong>/>` 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](https://hawksey.info/wp-content/uploads/2017/02/Certificate-8000003.pdf)):

[![Capture](https://hawksey.info/wp-content/uploads/2017/02/Capture.png "Capture")](https://hawksey.info/wp-content/uploads/2017/02/Certificate-8000003.pdf)You can reuse the code by **File &gt; Make a copy** of [this Script Project](https://script.google.com/d/1DWtUftFuxD7e8lfOg-blgqOp3X2rFd9a398hMP10z6NF-iGYEZyRp0hj/edit?usp=sharing). 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](https://hawksey.info/blog/2016/11/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](https://twitter.com/DASturrock) for inviting me along, those who listened and the comments/questions at the end.