Overview

The goal of this lab is to provide an introduction to the capabilities of AppSheet by enabling you to quickly start building applications.

In this lab, you use AppSheet to create a basic application to create and manage your personal contacts. You start by connecting to a simple spreadsheet that serves as your data source. You then use views to read and update the contact information through the app.

Objectives

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

• Sign in to AppSheet using your Google Account.
• Create an app to manage contacts using the AppSheet UI by starting with a Google sheet as a data source.
• Preview the app's functionality using the live preview feature in the AppSheet UI.
• Modify some of the existing contact data using the app.
• Add a new person's contact information using the app.
• Verify that the newly added and modified data is present in the underlying Google sheet.

Setup

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 your first AppSheet app

There are three ways that you can build your app using AppSheet:

• Connect to a data source.
• Develop an app from an idea.
• Use a template.

In this task, you create a new app by connecting to a data source using the AppSheet UI.

Create the app

1. In the AppSheet UI, click Create > App > Start with existing data to create an app.

2. In the Create a new app dialog, for App name, type Customer Contacts to name your app.

3. For Category, select Customer Engagement from the list.

4. Click Choose your data.

Select data for your app

1. In the Select data source dialog, select Google Sheets.

2. In the file picker, select the contacts spreadsheet from your My Drive folder on Google Drive, and click Select.

   This sheet was automatically provisioned for the lab.

   AppSheet creates the app and displays it in the AppSheet editor UI.

3. Click Customize with AppSheet, or close the Welcome to your app dialog.

   You're now in the AppSheet editor UI. The UI also provides a live preview of the app running in an emulator, which you can use to test the app's functions.

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

Task 2. Preview the app

AppSheet has created your new app and connected it to the contacts spreadsheet that provides data for the app. The contacts app is a live, functional prototype that is connected to the contacts sheet on Google Drive.

The AppSheet editor consists of three main areas:

• Navigation bar: Implement the app's functionality, including its data source connections and schema, the app design and user experience, and other behaviors. You will explore some of these topics in subsequent labs of this course.

• Main panel: Configure settings for the app to implement its functionality, based on the option you select in the left navigation bar.

• App live preview: View and test changes to your app's functionality as you design and implement features in your app.

In this task, you use the app live preview to explore the basic functions of the contacts app.

View contact information

1. In the app live preview, scroll through the list of contacts that are displayed in the app.

   AppSheet automatically sorts the data by first and last name.

2. Click the name of any contact.

   The app displays a detailed view of that contact's information that includes an email address and phone number.

   This data was automatically loaded from the Google sheet.

Modify contact information

1. For the contact you selected, click the Edit icon to edit that person's contact information.

2. Change the first name and phone number of the contact, and click Save.

3. Verify that the name and phone number is updated on the contact details page in the app.

4. Click the Back arrow to return to the contacts list page.

5. Verify that the updated name is shown on the contacts list page.

Add a new contact

1. On the contacts list page in the live app preview, click Add () to add a new contact.

2. In the contact form, specify the following:

   Property	Value
   ID	21
   Email Address	test.contact@gmail.com
   First Name	Test
   Last Name	Contact
   Phone	1-100-234567

3. Click Save.

4. On the contacts list page in the app, click Search ().

5. In the search box, enter the first or last name of the contact that you added in the previous step.

   Note: You can also search by email address or phone number.

The list is filtered to only show contacts that match the search criteria.

1. Click the Test Contact record to view details about the contact and verify the displayed information.

Task 3. Synchronize app data

All the changes you made in the previous task are local within the app. These changes are automatically synced to the underlying data source used by the app.

However, sometimes, not all changes immediately sync to the data source.

In this task, you sync the data changes to the Google sheet used by the app and verify the changes on Google Drive.

Sync your data changes

The live app preview displays the number of data changes made to the app since the last app sync event.

1. Verify that the number displayed matches the changes made in the app in the previous task.

   Note: If a number is not displayed, all data changes made in the app have been synced.

2. Click Sync () to synchronize the changes to the Google sheet on Google Drive.

Verify the data changes

1. Open a separate browser tab and navigate to the Google drive.

2. Open the contacts sheet.

3. Scroll to the bottom of the list to find the new contact that was added using the app.

4. To search for the contact that was modified using the app, in the sheet, press Ctrl-F or Command-F, and type the name of the contact.

   Verify that the name and phone number is updated in the sheet.

Click Check my progress to verify the objective. Add a new contact

Congratulations!

You have successfully created your first app using AppSheet. In this lab you learned how to:

• Create an app using the AppSheet UI.
• Configure the app using data from a sheet on Google Drive.
• Use the live app preview to modify the data displayed in the app.
• Verify that the data changes made through the app have been persisted in the underlying data source (sheet on Google Drive).

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.