# Google AppSheet: Getting Started - 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. ![Sign in with Google](https://cdn.qwiklabs.com/SWJGV6nuFRmGdggEe8wxbRL1fFczQ4uAJrtQXFiCkgk%3D align="left") 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. ![Sign in with Google - provide consent](https://cdn.qwiklabs.com/mhqdiitEUUnq6kwmhXJZAZpCZcnGCa%2BHhpNqVXkfogo%3D align="left") 10. You are now signed in to AppSheet. ![My apps - create a new app](https://cdn.qwiklabs.com/Ydjv0Aj1UeSsUTPfg%2F4YG8bzgRR1gi26%2FXD4dqqw90g%3D align="left") 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](https://docs.google.com/spreadsheets/d/1mxqi1C6f166RQu5ev_k3Zv3S9bBI4sUIsd33e6CcX1Y/edit#gid=1753524743) 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 Check my progress ## **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 with AppSheet** 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 Check my progress ## **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 Check my progress ## **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](https://drive.google.com/). 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. * * * ## Solution of Lab ### Quick %[https://www.youtube.com/watch?v=omMbQh45JyY] %[https://www.youtube.com/watch?v=1_ESI28cBaY] * * * **Download file**: [file.xlsx](https://github.com/ePlus-DEV/storage/blob/main/labs/GSP883/file.xlsx) * * * ### Manual **πŸ“ Task 1. Create Your First AppSheet App** 1. Switch to **AppSheet UI** in your lab browser tab. 2. On **My Apps** page β†’ click **Create > App > Start with existing data**. 3. For **App name**, enter: **Customer Contacts**. 4. For **Category**, choose: **Customer Engagement**. 5. Click **Choose your data** β†’ select **Google Sheets**. 6. In file picker β†’ go to **My Drive** β†’ select the provided **contacts sheet** β†’ click **Select**. 7. Click **Customize with AppSheet**. 8. AppSheet builds the app and opens the **AppSheet Editor** with a live preview. βœ… Check progress: *Create your first AppSheet app* * * * **πŸ‘€ Task 2. Preview the App** 1. In the **app live preview**, scroll through the contacts list. 2. Notice data is **sorted by first and last name** automatically. 3. Click on any contact name. 4. The **details page** opens β†’ shows **email and phone number** loaded from the sheet. * * * **✏️ Task 3. Modify Contact Information** 1. In the contact details view β†’ click **Edit (pencil icon)**. 2. Change **First Name** and **Phone Number** β†’ click **Save**. 3. Verify the updated data on the **contact details page**. 4. Click the **Back arrow** to return to contact list. 5. Confirm that the **new name** appears in the list. * * * **βž• Task 5. Add a New Contact** 1. On contacts list page β†’ click **\+ icon** to add a new record. 2. Fill in the form with: * **ID**: 51 * **Email Address**: `test.contact@gmail.com` (must be included) * **First Name**: Test * **Last Name**: Contact * **Phone**: 1-100-234567 3. Click **Save**. 4. Back in the list β†’ click **Search (magnifying glass)**. 5. Enter β€œTest” (or β€œContact”, or the email/phone). 6. Verify only the **Test Contact** record is shown. 7. Open it and confirm details are correct. βœ… Check progress: *Add a new contact* * * * **πŸ”„ Task 6. Sync App Data** 1. In the live preview β†’ look above **Sync (⟳)** icon. * If a number appears, that’s unsynced changes. * If no number, all changes are already synced. 2. Click the **Sync icon** to push updates to the Google Sheet. * * * **βœ… Task 7. Verify the Data Changes** 1. Open **Google Drive** β†’ open the **contacts sheet**. 2. Scroll to the bottom β†’ confirm the new **Test Contact** row exists. 3. Use **Ctrl+F (Cmd+F)** β†’ search for the modified contact β†’ check that **name and phone number** were updated.