Overview

The goal of this lab is to integrate your app with an external service to perform functions that are part of regular business operations. For example, your app's users may need to be informed of the status of the app's data, or an external application may need to fetch and update the app's data in a back office system.

Objectives

In this lab, you learn how to perform the following tasks:

• Invoke the AppSheet API from an external application to fetch the data used by the app.
• Use a webhook to integrate your app with an external chat service to send messages based on certain conditions in the app's data.
• Invoke the AppSheet API via a webhook in response to data changes made in your app.
• Integrate with Cloud Storage on Google Cloud to store your app's images.

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 lab resources will be 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 gives you new, temporary credentials to sign in and access AppSheet for the duration of the lab.

What you need

To complete this lab, you need:

• Access to a standard internet browser (Chrome browser recommended).
• Time to complete the lab.

1. Make sure you sign in to the lab using an incognito window.

2. When ready, click .

   A new panel will appear with the temporary credentials that you must use for this lab.

   If you need to pay for the lab, a pop-up will open for you to select your payment method.

3. Note your lab credentials. You will use them to sign in to AppSheet for this lab.

   If you use other credentials, you will get errors or incur charges.

4. Click Open AppSheet to open the AppSheet UI in a separate browser tab or incognito window.

   Note: If you are not already using an incognito browser window, use the right mouse click in Chrome to open AppSheet and select Open link in incognito window.

5. Click to sign in with Google.

   

6. In the Sign in with Google dialog, enter the provided Username, and click Next.

   Note: If you see other accounts listed, click Use another account and then enter the provided Username and click Next.If you use other credentials, you'll get errors or incur charges.

7. Enter the provided Password and click Next.

8. Click Accept to accept the terms.

9. To enable AppSheet to access the Google Drive folders associated with your lab account, on the AppSheet consent page, click Allow.

   

10. You're now signed in to AppSheet.

    To view the AppSheet MyApps page, click X in the top-right corner of the Tell us about you so we can make better recommendations dialog.

    The MyApps page might be empty since you do not have any apps yet.

Task 1. Create the app

When working on your own or your company's app, you normally would incrementally build the app over a continuous project timeline.

Apps that you build are saved and accessible in the Recent section on the Apps page until they are deployed and published.

In this task, you create the app that was built in a previous lab, using a template.

Delete prototype app (if listed)

In the lab environment on some occasions it's possible that the app built in a previous lab is still listed in the Recent section. You cannot use this app to continue working on this lab since the underlying data is not available for use by the app.

The app must first be deleted before you continue with this lab.

1. If the Inventory Manager app is listed, on the 3-dots menu, click Delete.

2. To confirm the deletion, click Delete.

   

Copy a template app to your AppSheet account

To continue building the Inventory Manager app in this lab, you must first recreate the app from a template.

1. To copy the Inventory Manager app to your AppSheet account, click the link: Inventory Manager.

2. In the app preview, click Accept.

3. In the left navigation menu, click Copy app ().

4. In the Copy app form, for App name type Inventory Manager, and leave the remaining settings as their defaults.

5. Click Copy app.

   AppSheet creates the app and copies the Google sheet that is used by the app to the /appsheet/data/InventoryManager-nnnnnnn folder under the My Drive folder on Google Drive.

6. To go to the AppSheet editor, click Customize your app.

   You can also access the app from the Apps page in the AppSheet UI under Owned by me.

Your app is set up with the original contacts data source, and you can now continue to build out the app's functionality.

Click Check my progress to verify the objective. Create the app

Task 2. Access data via the AppSheet API

The AppSheet REST API enables an external application to access the data that is used by your AppSheet app.

By invoking the API, the external application can read, update, and delete data rows from tables used by your app and invoke predefined actions in your app.

In this task, you enable and configure the API and use a sample REST client to invoke the API.

Configure the AppSheet API

1. In the AppSheet UI, in the left navigation bar, click Settings () > Integrations.

2. In the IN: from cloud services to your app section.

3. To enable the API, select Enable.

   Note: The App ID is used by the client application to identify your app in the URL to the AppSheet API.

4. To create a key that client apps need to invoke the AppSheet API, click Create Application Access Key.

5. This displays the Show Access Key. Copy the value of key and App Id. Now, click Save to save the app.

   Note: As the app creator, you provide the API key to the entities that you authorize to invoke the AppSheet API. You can create more than one API key for your app and can disable an API key at any time.

Invoke the AppSheet API to read data

For the purposes of testing, use the Hoppscotch browser-based REST client.

Note: Think of Hoppscotch as the external application or service integrating with your app by invoking the AppSheet REST API.

1. In a separate browser tab, open the REST client.

   Perform the following steps in the Hoppscotch UI:

2. For the HTTP method, select Post, and type the following code, replacing [appId] with the value of App Id from the Settings > Integrations tab in the AppSheet editor, and replacing [tableName] with Products:

https://api.appsheet.com/api/v2/apps/[appId]/tables/[tableName]/Action

The API will be invoked on the Products table in your app.

1. Select the Headers tab.

2. For Header 1, type ApplicationAccessKey

3. For Value 1, copy and paste the access key value from the Settings > Integrations page in the AppSheet editor.

   Your entry should look like this:

4. Select the Body tab.

5. For Content Type, select application/json.

6. For Raw Request Body, type:

   { "Action": "Find", "Properties": {}, "Rows": [ { "Product ID": "Paper Towel Holder-123" } ] }

   The request body specifies Action: Find, which is used to fetch a row from the Products table. The row to fetch is identified by the Product ID key column value: Paper Towel Holder-123.

7. To send the request to the AppSheet REST API endpoint, click Send.

   Your results should look like this:

   

   Note: The response from the API is in JSON format and contains details about the product from the Products table used by the app. The external application can parse the response and use the data as needed. Note: Note the current value of the Price column that is returned in the API response. You will update this value using the AppSheet API in the next task.

Invoke the AppSheet API to update data

In this task, to update data via the AppSheet API, you modify the API request in the Hoppscotch UI by adding the column to be updated with its new value in the Rows array.

1. In the request body, change the value of the Action attribute to "Edit".

2. To update the product's Price, specify the Price column with its new value:

   { "Action": "Edit", "Properties": {}, "Rows": [ { "Product ID": "Paper Towel Holder-123", "Price": 10 } ] } Note: Be sure to append a comma at the end of the Product ID attribute value in the JSON request.

3. To send the request to the AppSheet REST API endpoint, click Send.

   The API response contains the product details with the updated Price value. Also, note that the Price Updated column is modified to reflect the time of the update operation.

4. Return to the AppSheet editor, and view the product details in the app preview. The updated product price should be displayed.

   Note: If the app still displays the previous value of the product price, you may need to click Sync () in the app to refresh its data.

You can perform other operations like Add and Delete of table rows via the AppSheet API. For more information about using the API, see the Manage apps using the AppSheet API documentation.

Click Check my progress to verify the objective. Invoke the AppSheet API

Task 3. Create a webhook to Google Chat

AppSheet supports webhooks that you can use to send data to external web services via the app. You can create webhooks to services like Google Chat, Zapier, and Slack. AppSheet also supports webhooks to the AppSheet REST API.

In this task, you create a webhook to send a message to Google Chat when an event is triggered in your app.

Create a Google Chat space

1. In a separate browser tab, open Google Chat.

2. If prompted, use your lab-provided Google Cloud username and password to sign in.

3. Click Get Started, and then close any help dialogs.

4. In the Spaces section, click Create or find a space (+), and then select Create a space.

5. In the Create a space dialog, for Space name, use:

   AppSheetWebhook-{{{project_0.project_id | PROJECT_ID}}}

6. Leave the remaining settings as their defaults, and click Create.

Configure a webhook for the space

1. On the AppSheet Webhook menu, click Apps & integrations.

   

2. Click Add webhooks.

3. In the Incoming webhooks dialog, for Name, type AppSheet Low Inventory

4. Click Save.

5. To copy the webhook URL, click More () and click Copy link.

   You use this URL to configure a webhook task in the next step.

Create a bot

To run the automation process when an event occurs in your app, you need a bot.

1. To create a bot, in the AppSheet UI, in the left navigation bar, click Automation (), and then click Create my first automation.

2. Click Create a new bot.

3. In the Bots pane, for New Bot, click More () and Rename to Low Inventory.

4. In the bot definition, click Configure event, and then click Create a new event.

5. In the Settings tab, click Link (), and then enable Linking.

   

Configure an event

In this task you will configure an event in your app that will cause the process to run when the event is triggered.

1. In the Settings tab, change the event name to Low Inventory.

2. For Table, select Products.

3. For Data change type, deselect Adds, Deletes, and then select Updates.

   This event will be triggered when a row in the table is updated from the app.

4. For Condition, click into the field to launch the Expression Assistant.

5. In the Expression Assistant form, for Condition for event Low Inventory (Yes/No), type:

   [Current Inventory]<[Minimum Acceptable Inventory] Note: The event will be triggered whenever a row in the Products table whose current inventory is below the minimum acceptable inventory is updated.

6. In the Expression Assistant, click Save.

Create an automation process

To run the task, you need a process. In AppSheet, a process is a set of steps that are executed in sequence.

1. In the Low Inventory definition, to Run this process, click the down arrow next to Run this process, select Create new process, and then enable Linking.

2. To change the process name, click the Process for Low Inventory - 1, and rename to Low Inventory.

3. Click go to Process.

   

4. For Table, select Products.

5. To add a step in the process, click Add a step.

6. For Step name, select Create a new step.

   A process can include different types of steps. The type of step used in this process is Run a task.

Create a webhook task

In this task you will create a webhook in AppSheet, and create a task that is executed when the webhook runs.

1. To create a task, in the Settings tab, enable Linking.

   

2. In the new task form, specify the following, and leave the remaining settings as their defaults:

   Property	Value (type or select)
   Task name	Google Chat - Low Inventory
   Task category	Call a webhook
   Table name	Products
   Preset	Custom
   Url	the webhook URL that you copied from the previous subtask
   HTTP Verb	Post
   HTTP Content Type	JSON
   Body	{"text": "<<[Product Name]>> is low on inventory, Current Inventory: <<[Current Inventory]>>."}

   Note: This task sends a message defined in the Body element that contains information about a product that is low on inventory.AppSheet supports the use of << and >> characters for variable substitution. These delimiting characters are used in the Body element to substitute the value of the Product Name and Current Inventory columns in the text message.

3. Click Save.

Test the webhook to Google Chat

1. To reload the app definition, click Sync () in the app preview. If the app preview is not visible, refresh the AppSheet UI in your browser.

2. In the app preview, from the app's main menu, select Low Inventory.

3. Click on any of the products to view its details, and then click Edit ().

4. Update the product's Price in the app.

5. Click Next, and then click Save.

   Wait a few seconds for the app to sync the update to the backend.

6. Navigate to the browser tab where you created the Google Chat space and webhook configuration.

7. In the Spaces pane, select your AppSheetWebhook- space that you created earlier.

   A chat message from the AppSheet bot should report the product with low inventory.

Task 4. Create a webhook to the AppSheet API

AppSheet also supports webhooks to the AppSheet API. You can use this type of webhook to trigger a change within your app.

Create the webhook task

1. To create the task, in the AppSheet UI, in the left navigation bar, click Automation () > Tasks, and then click Create a new task (+).

2. In the new task form, specify the following, and leave the remaining settings as their defaults:

   Property	Value (type or select)
   Task category	Call a webhook
   Task name	AppSheet API - Update Inventory
   Table name	Shipping
   Preset	AppSheet API
   App Id	[App Id]
   Target Table Name	Products

   Note: This task invokes the AppSheet API to update the Products table when it executes against data changes made to the Shipping table in the app. Note: AppSheet automatically populates App Id with the application ID.

3. For Body, type:

   { "Action": "Edit", "Properties": {}, "Rows": [ { "Product ID": "<< Shipping[Product ID] >>", "Current Inventory": "<< Products[Current Inventory]+Shipping[Quantity shipped] >>" } ] } Note: The request body uses a template variable to provide the value of the Product ID key column to identify the product to be updated. The key value is obtained from the referenced row in the Shipping table. Note: Similarly, template variables are used to provide the value of the Current Inventory column. The value is incremented by the amount in the Quantity shipped column of the referenced row in the Shipping table. Note: If you invoke the API for an app that you do not own, you must specify a HTTP Header that contains the value of the ApplicationAccessKey. In this case you are invoking the API for your own app, so it is automatically used.

4. Click Save.

Create an automation process

As mentioned earlier, to run the task, you need a process.

1. In the AppSheet UI, in the left navigation bar, click Automation ()> Processes, and then click Create a new Process (+).

2. For New Process, click More () and Rename to Delete Shipment.

3. For Table, select Shipping.

4. To add a step in the process, click Add a step.

5. For Step name, select Create a new step.

   The type of step used in this process is Run a task.

6. To use an existing task, from the drop-down list, select the task that was created earlier: AppSheet API - Update Inventory.

7. Click Save.

Configure an event

As mentioned earlier, you configure an event in your app that will cause the process to run when the event is trigerred.

1. In the AppSheet UI, in the left navigation bar, click Automation () > Events, and click Create a new Event (+).

2. For New Event, click More () and Rename to Delete Shipment.

3. For Data change type, deselect Adds, Updates, and then select Deletes.

   This event will be triggered when a row in the table is deleted via the app.

4. For Table, select Shipping.

5. Leave the remaining settings as their defaults, and click Save.

Create a bot

To run the automation process when an event occurs in your app, you need a bot.

1. In the AppSheet UI, in the left navigation bar, click Automation () > Bots, and click (+).

2. Click Create a new bot.

3. For New Bot, click More () and Rename to Delete Shipment.

4. In the bot definition, for when this event occurs, click Configure event, and then select the Delete Shipment event.

5. For Run this process, click the down arrow, and then select the Delete Shipment process.

6. Click Save.
   Ignore any warnings that may be reported.

Test the webhook to the AppSheet API

1. To reload the app definition, click Sync () in the app preview. Click on Mobile or Tablet icon to see the app preview.

2. Click Ship/Recv, and then click the Shipping tab.

3. Click the shipping transaction for product Paper Towel Holder. Note the value in the Quantity shipped column.

4. To view the details of the product in this shipping transaction, click the arrow next to the product.

5. Scroll the product details and note the value in the Current Inventory column for this product.

6. To return to the shipping transaction details, in the top bar of the app preview, click the back arrow ().

7. To delete this shipping transaction, click the Trash can (), and then click Delete.

Wait a few seconds for the app to sync the update to the backend.

1. In the app preview, navigate to the product details view of the same product, and verify that the Current Inventory value has increased by the Quantity shipped amount from the deleted shipping transaction.

Click Check my progress to verify the objective. Create a webhook to the AppSheet API

Task 5. Integrate your app with Cloud Storage

You can use Cloud Storage on Google Cloud to store your app's images and data files as objects. AppSheet also supports integration with other cloud object store providers.

In this task, you configure your app to use Cloud Storage to store your app's objects on Google Cloud. This lab pre-provisions a Cloud Storage bucket for use by your app. A bucket is a basic container that holds your app's data objects. For more information about how buckets are used in Cloud Storage, see What is Cloud Storage? documentation.

Configure Cloud Storage for your app

Before configuring your app to use Cloud Storage on Google Cloud, you must first:

• Create a Cloud Storage bucket on Google Cloud.

• Create a Google Cloud service account.

  A service account is a special type of Google account intended to represent a non-human user that needs to authenticate and be authorized to access data in Cloud Storage and use other Google Cloud APIs. For more information about Google Cloud service accounts, see the Service Accounts documentation.

  To access your bucket in Cloud Storage, AppSheet requires a service account. This lab pre-provisions a service account with the required permissions for use by your app.

1. In the AppSheet UI, in the top right menu, click the blue circle, and then select Account settings from the menu.

2. On the My account page, click the Integrations tab, and then in the left navigation menu, click Stores.

3. To add a new object store for your app, in the Object Stores section, click + New Cloud Store.

4. In the Add a new object store dialog, click Google Cloud Storage.

5. In the Add Google Cloud Storage integration dialog, for Name, type Google Cloud Storage

6. For Private Key JSON String, copy and paste the value of Cloud Storage Service Account in the Qwiklabs credentials panel of your lab window.

   Note: This is the Google Cloud service account that was pre-provisioned for this lab.

7. For GCS Bucket, type [PROJECT_ID]-appsheet-objects, replacing [PROJECT_ID] with the value of the Google Cloud Project from your Qwiklabs credentials panel in your lab window.
   This is the name of the Cloud Storage bucket that was pre-provisioned for this lab.

8. To test the connection from AppSheet to the Cloud Storage service, click Test Connection.

   The button should display a check mark indicating that the connection was successful.

9. Click Save.

Configure a table to use the cloud object store

Now that you have configured a connection to the cloud object storage service, you can configure any table in your app to use the object store to store data objects like images and files.

1. In the AppSheet UI, in the left navigation bar, click Data (), and then click Product Categories ().

   An expanded view of the Product Categories table is displayed.

2. Click Table settings ().

3. Expand the Storage section.

4. For Store for image and file capture, select the Google Cloud Storage location that was configured in the previous task.

   Note: If the Cloud Storage option is not displayed in the list, refresh the AppSheet UI in your browser window.

5. Click Done.

6. Click Save.

Test the Cloud Storage integration

1. In the bottom navigation bar of the app preview, select Categories.

2. To add a new product category, click Add ().

3. In the new category form, specify the following, and leave the remaining settings as their defaults:

   Property	Value (type or select)
   Category	Vacation
   Aisle	6
   Shelf	3B

4. Download a new product category image, and save the image to your computer.

5. For Category Image, click the camera control and upload the image from the previous step.

6. In the app preview, click Save.

7. In a separate browser tab, to open the Google Cloud Console, click Open Google Cloud Console in the Qwiklabs credentials panel of your lab window.

8. Sign in using the Google Cloud Username and Google Cloud Password credentials from the Qwiklabs panel in your lab window, and accept the user agreement.

9. In the Google Cloud Console, on the Navigation menu (), scroll the list of products and then click Cloud Storage > Buckets.

   Note: You may need to click More Products to expand the list of products shown in the menu.

10. Click the storage bucket name.

AppSheet stores your objects in folders in the bucket.

1. To view the contents of the folder, click the folder name, and then click the Product_Categories_images folder.

   The folder should contain the image of the product category that you uploaded via the app.

2. Click the object name to view details about the image object.

Use Cloud Storage to store app objects

Congratulations!

You have successfully configured your app to integrate with external services and the AppSheet API.

In this lab you learned how to:

• Invoke the AppSheet API from an external application to fetch the data used by the app.
• Use a webhook to integrate your app with an external chat service to send messages based on certain conditions in the app's data.
• Invoke the AppSheet API via a webhook in response to data changes made in your app.
• Integrate your app with a Cloud Storage object store on Google Cloud to store your app's images.

End your lab

When you have completed your lab, click End Lab. Qwiklabs removes the resources you’ve used and cleans the account for you.

You will be given an opportunity to rate the lab experience. Select the applicable number of stars, type a comment, and then click Submit.

The number of stars indicates the following:

• 1 star = Very dissatisfied
• 2 stars = Dissatisfied
• 3 stars = Neutral
• 4 stars = Satisfied
• 5 stars = Very satisfied

You can close the dialog box if you don't want to provide feedback.

For feedback, suggestions, or corrections, please use the Support tab.

Copyright 2022 Google LLC All rights reserved. Google and the Google logo are trademarks of Google LLC. All other company and product names may be trademarks of the respective companies with which they are associated.