Develop with Apps Script and AppSheet: Challenge Lab - ARC126

Develop with Apps Script and AppSheet: Challenge Lab - ARC126

Overview

In a challenge lab you’re given a scenario and a set of tasks. Instead of following step-by-step instructions, you will use the skills learned from the labs in the course to figure out how to complete the tasks on your own! An automated scoring system (shown on this page) will provide feedback on whether you have completed your tasks correctly.

When you take a challenge lab, you will not be taught new Google Cloud concepts. You are expected to extend your learned skills, like changing default values and reading and researching error messages to fix your own mistakes.

To score 100% you must successfully complete all tasks within the time period!

Setup and requirements

Before you click the Start Lab button

Read these instructions. Labs are timed and you cannot pause them. The timer, which starts when you click Start Lab, shows how long Google Cloud resources are made available to you.

This hands-on lab lets you do the lab activities in a real cloud environment, not in a simulation or demo environment. It does so by giving you new, temporary credentials you use to sign in and access Google Cloud for the duration of the lab.

To complete this lab, you need:

  • Access to a standard internet browser (Chrome browser recommended).

Note: Use an Incognito (recommended) or private browser window to run this lab. This prevents conflicts between your personal account and the student account, which may cause extra charges incurred to your personal account.

  • Time to complete the lab—remember, once you start, you cannot pause a lab.

Note: Use only the student account for this lab. If you use a different Google Cloud account, you may incur charges to that account.

Challenge scenario

You are a junior cloud engineer tasked with helping teams create and manage Google Cloud resources. As part of your duties, you have been tasked with using AppSheet and App Scripts to create chat apps, which are web applications or services that run in Google Chat. Creating a chat app with AppSheet or App Scripts lets you interact directly with the app in Google Chat rather than opening it in a separate window.

Your first challenge is to use AppSheet to create a no-code application to report and manage automated teller machine (ATM) issues. You start by copying a simple maintenance app to use it as a template for adding functionality. You then add a chat component, so you can interact with the app directly in Google Chat.

Your second challenge is to use an App Scripts template to create a chat bot that is more customizable using event handlers.

You are expected to have the skills and knowledge to complete the tasks that follow.

Your challenge

In this lab, you are asked to create two applications that run in Google chat:

  1. No-code chat app using AppSheet

  2. App Scripts app with event handlers

You need to:

  • Create the apps based on templates.

  • Customize the apps (such as adding some automation).

  • Publish the bots.

Task 1. Create and customize an AppSheet app

For this task, copy and customize an existing ATM Maintenance app, which technicians use to perform ATM maintenance. Be sure to deploy your app after you have customized it.

Create the app

  1. Open the ATM Maintenance app in AppSheet.

  2. Set the following values, leaving all others at their defaults:

    | Property | Value (type value or select option as specified) | | --- | --- | | App name | ATM Maintenance Tracker |

Customize the first message

  • Set the following values, leaving all others at their defaults:

    | Property | Value (type value or select option as specified) | | --- | --- | | message text | Welcome to the ATM Maintenance Tracker app. What would you like to do today? |

Create a slash command

  • Set the following values, leaving all others at their defaults:

    | Property | Value (type value or select option as specified) | | --- | --- | | App View | Issues Reported By Me | | Name | /myissues | | Description | Lists tickets that include your email address |

Click here for hint!

Click Check my progress to verify the objective.

Create and customize an AppSheet app

Check my progress

Task 2. Add an automation to an AppSheet app

For this task, create and test an automation added to the ATM Maintenance app.

  1. In the Settings panel, provide the following information:
Event nameNew ticket
Event typeAdds only
TableTickets
  1. During the custom steps, in the Message Text box, type the message: You have created a new ticket.

  2. At the top right of the page, click Save to update your app.

  3. To test your automation, in the First Name box, type Freeda and provide information of your choosing for ATM ID and Symptom, respectively.

Click here for hint!

Click Check my progress to verify the objective.

Add an automation to an AppSheet app

Check my progress

Task 3. Create and publish an Apps Script chat bot

  1. Create a new Apps Script Chat App project with the following details:
PropertyValue
Project nameHelper Bot
  1. Update the MESSAGE event handler to prompt logging of the event.

  2. Use the following values to configure the Google Cloud project and update the script to use it.

FieldValue
App nameHelper Bot
User support emailSelect the email ID student-04-a7859869e90a@qwiklabs.net from the drop-down. This is also your User Email in the left panel of the lab instructions.
Developer contact informationstudent-04-a7859869e90a@qwiklabs.net
  1. Use the following values to publish the bot.
FieldValue
App nameHelper Bot
Avatar URLhttps://goo.gl/kv2ENA
DescriptionHelper chat bot
FunctionalitySelect Receive 1:1 messages and Join spaces and group conversations
Connection settingsCheck Apps Script project, and then paste the Head Deployment ID for the test deployment into the Deployment ID field
Visibilitystudent-04-a7859869e90a@qwiklabs.net
App StatusLIVE – available to users

Test the bot

Search for Helper Bot in Google Chat, and start a new chat.

Click here for hint!

Click Check my progress to verify the objective.

Create and publish an Apps Script chat bot

Check my progress


Solution of Lab

📝 Task 1: Create and customize an AppSheet app

  1. Log in to AppSheet.

  2. Access the ATM Maintenance App in Incognito Mode.

  3. Use the left menu to select Copy app.

  4. In the Copy app form, set the App name as:

     ATM Maintenance Tracker
    

    Leave other settings as they are.

  5. Click the Copy app to proceed.


⚙️ Task 2: Add an automation to an AppSheet app

  1. Open My Drive from this link.

  2. Download the required file here 📥.


🤖 Task 3: Creating and Publishing a Google Chat Bot with Apps Script

  1. Start a new Apps Script Chat App project from this link.

Project name

Helper Bot

  1. Replace the content in Code.gs with the following script:
/**
 * Responds to a MESSAGE event in Google Chat.
 *
 * @param {Object} event the event object from Google Chat
 */
function onMessage(event) {
  var name = "";

  if (event.space.type == "DM") {
    name = "You";
  } else {
    name = event.user.displayName;
  }
  var message = name + " said \"" + event.message.text + "\"";

  return { "text": message };
}

/**
 * Responds to an ADDED_TO_SPACE event in Google Chat.
 *
 * @param {Object} event the event object from Google Chat
 */
function onAddToSpace(event) {
  var message = "";

  if (event.space.singleUserBotDm) {
    message = "Thank you for adding me to a DM, " + event.user.displayName + "!";
  } else {
    message = "Thank you for adding me to " +
        (event.space.displayName ? event.space.displayName : "this chat");
  }

  if (event.message) {
    message = message + " and you said: \"" + event.message.text + "\"";
  }
  console.log('Helper Bot added in ', event.space.name);
  return { "text": message };
}

/**
 * Responds to a REMOVED_FROM_SPACE event in Google Chat.
 *
 * @param {Object} event the event object from Google Chat
 */
function onRemoveFromSpace(event) {
  console.info("Bot removed from ",
      (event.space.name ? event.space.name : "this chat"));
}

  1. Navigate to the OAuth consent screen using this link.

  2. Configure the settings as follows:

App nameHelper Bot
User support email*Your selected email*
Developer contact*Your email address*


🛠️ Setting Up Google Chat API

  1. Visit the Google Chat API Configuration page here.

  2. Apply the following configuration:

App nameHelper Bot
Avatar URL[https://goo.gl/kv2ENA](https://goo.gl/kv2ENA)
DescriptionHelper chat bot
Functionality✅ Receive 1:1 messages and join spaces/group conversations
Connection settings✅ Check **Apps Script project** and add **Head Deployment ID**
Visibility✅ Specific people and groups: *Your email address*
App Status🟢 LIVE – Available to users

🧪 Testing Your Helper Bot

You can test your newly created bot directly in Google Chat here.