GSP883

Overview

This lab provides an introduction to the AppSheet, which let's you quickly get started with 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, and create views to read and update the contact information through the app.

What you'll do

In this lab, you perform the following tasks:

• Sign in to AppSheet using your Google account.
• Create an app 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 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 yourself in a real cloud environment, not in a simulation or demo environment. It does so by giving you new, temporary credentials that you use 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 are signed into Google Cloud Skills Boost 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.

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

4. Click Open AppSheet.

5. Click to sign in with Google.

   

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

   Note: If you see other accounts listed, click Use another account, enter the credentials provided for this lab, then click Next.

7. Enter the password provided for this lab and click Next.

8. Click I Understand to accept the terms.

9. On the AppSheet consent page, click Allow. This allows AppSheet to access the Google Drive folders associated with your Google Cloud Skills Boost account.

   

10. You are now signed in to AppSheet.

    

    Click on the X in the top right corner of the Tell us about you so we can make better recommendations dialog to view the AppSheet MyApps page.

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

Task 1. Set up data on Google Drive

Most apps need data to function. Before creating your app in AppSheet, you must provision the data that will be managed by the app. In this task, you set up your Google Drive folder with a spreadsheet data file that will be used by your app.

Set up Google Drive with the spreadsheet

For this app, you use a spreadsheet containing sample person contact information.

1. Click contacts spreadsheet to open the sheet.

2. Click File > Make a copy > name it Personal Contacts.

3. Click Make a copy to save the copy of the sheet in My Drive.

Click Check my progress to verify the objective. Set up Google Drive with the spreadsheet

Task 2. Create your first AppSheet app

There are 3 ways you can build your app using AppSheet:

• Connect to a data source
• From scratch with an idea
• Use a template

In this task, you create a new app by connecting to a data source using the AppSheet UI. You use the spreadsheet that you set up in the previous task on Drive as the source of data for this app.

Create the app

1. Switch to the AppSheet UI in your other browser tab.

2. On the My Apps page, click + Create to add an app.

3. Select App > Start with existing data.

4. For App name, type Customer Contacts to name your app.

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

6. In the same dialog, click Choose your data.

7. Click Google sheets.

8. In the file picker, select the Personal Contacts spreadsheet that you saved to Drive in the previous task and click Select.

9. Click Customize your app to go to the AppSheet editor.

AppSheet creates the app and displays it in the AppSheet editor UI. The UI also provides a preview of the app running in an emulator which you can use to execute some of the app's functions.

Click Check my progress to verify the objective. Create your first AppSheet app

Task 3. Preview the app

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

The AppSheet editor comprises of 3 main areas:

• Navigation bar: You use the left navigation bar to implement the app's functionality, including its data source connections and schema, the user experience (UX) and other behaviors. You will explore some of these topics in subsequent labs of this course.

• Main panel: The main panel in the AppSheet editor is where you configure settings for the app to implement its functionality, based on the option you select in the left navigation bar.

• App live previews: Here is where you 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.

Task 4. 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 go back to the list of contacts.

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

Task 5. Add a new contact

1. On the contact lists page in the live app preview, click the + icon to add a new contact.

2. In the contact form, specify the following:

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

Note: The values can be any test data as they are currently not validated by the app.

3. Click Save.

4. On the contacts list page in the app, click the magnifying glass search icon.

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.

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

7. Click the Test Contact record to view details about the contact, and verify the information that is displayed.

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

Task 6. Sync app data

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

However, in some cases not all changes may 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.

Synchronize your app data changes

1. The live app preview displays the current number of data changes made to the app above Sync , since the last app sync event.

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

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

2. Click sync to synchronize the changes to the Google sheet on Google Drive.

Task 7. Verify the data changes

1. In a new browser tab, open MyDrive.

2. Open the Personal Contacts sheet.

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

4. In the sheet, press Ctrl+F or Command+F to search for the contact that was modified using the app, and verify that the name and phone number is updated.

Congratulations!

You have successfully created your first app using AppSheet. In this lab you have 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 via the app have been persisted in the underlying data source (sheet on Google Drive).

Next steps / Learn more

This lab is part of a series of labs called Qwik Starts. These labs are designed to give you some experience with the many features available with Google Cloud. Search for "Qwik Starts" in the lab catalog to find the next lab you'd like to take!

• Google Workspace Learning Center

Google Cloud training and certification

...helps you make the most of Google Cloud technologies. Our classes include technical skills and best practices to help you get up to speed quickly and continue your learning journey. We offer fundamental to advanced level training, with on-demand, live, and virtual options to suit your busy schedule. Certifications help you validate and prove your skill and expertise in Google Cloud technologies.

Manual Last Updated: February 27, 2024

Lab Last Tested: January 13, 2023

Copyright 2024 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.