Create a Mobile Web App from your Google Sheet with AppSheet

 At the office, you may have a colleague who sells packed lunches. He lists the menu in a Google Sheet, and uses the same spreadsheet for collecting/tracking orders from co-workers. He could improve on this by creating a food order form via Google Forms and directing form submissions to the spreadsheet. 

Nowadays he has an additional option to improve on this by way of AppSheet. He could quickly and effortlessly create a mobile web app based on his spreadsheet. Order submissions are done in the app, and the orders are immediately added into the spreadsheet. 

Previously, I showed you how to create a mobile web app using Glide. Today, let's look at a pure Google solution to low-code/no-code, spreadsheet-backed, mobile web app creation. In this example, we will create a sort of DIY "link tree" via AppSheet.

Step 1: Create a spreadsheet

Create a spreadsheet with 3 columns: Title, Link, Icon. Give the sheet an appropriate name -- replace the default "Sheet1" with "Links". Put any title under Title (e.g. GitHub, LinkedIn, website, etc), put the corresponding profile link under Link, and put an image URL under the Icon column.

Step 2: Import into AppSheet

A shortcut to AppSheet can be found in the Tools menu. Select Tools -> AppSheet -> Create an app.

Step 3: Customize the UI

On the left panel, select UX. Then in the middle area, under Primary Views, open "Links". Scroll down to the Layout section, where you will see the different parts of an item widget. When you click on an element inside the component, you will be able to map that element to a specific column in the spreadsheet. Let's map the title element to Title, and the subtitle element to Link.

You will immediately see the result in the preview panel on the right. From there, it should be apparent that there's a problem with the icons -- our app isn't recognizing the image URLs in the Icon column. We'll fix this next.

Step 4: Customize the data

Data customization in AppSheet is more complicated than in Glide, but it is also more powerful and flexible.

To fix our icon display, go to the Data view (from the left panel). Under Tables tab, open Links, then open "View Columns". The columns should be listed here. 

First make sure that Title is selected as the KEY. Then for the Icon column, change the Type to Image. 

Go back to the UX section, then go back to the card Layout section, select the image element, and map it to the Icon column. Save the changes by clicking the Save button at the upper right, and the changes should reflect right away. From here you can make further customizations to the icon, like changing the shape to circular.

Further overall theme customizations can be done by going to the Brand tab and making changes to theme, colors, logo, etc.

Step 5: Some customizations for public, read-only "link tree"

Typical applications can make use of built-in functionality that allow creating, updating & deleting data. Since we're creating a link tree type of application, we want our users to only view the data and not be able to make modifications. Here are a few things we need to do:

First, disable Add/Update/Delete. On the left panel, go to Data again. Under Tables tab, select Links, then under "Are updates allowed?", select Read-Only.

Second, you need to disable user access control, since our app should be viewable by the public. On the left panel, go to Security.

Under Require Sign-In tab, turn off "Require user signin?". Then you will also need to turn on the next two options, namely:

- "Yes, the data in this app is public"

- "Yes, I am authorized to set up an insecure app"

Just a reminder that we're only doing this because our app is read-only, and is intended for public viewing. For other use cases, it's a good idea to limit access to a set of users.

Finally, we need to disable the app usage consent confirmation dialog. Still under Security view, go to the Options tab. Scroll down until you find "Require user consent", then turn it off.

Step 6: Publish and share

Save all changes. Then open the app in a new tab. You can copy the URL in the address bar, and share it with your colleagues.

Other things you can do: You can use a URL shortener to make the app URL more user-friendly when you share it. You can also embed your app to your website via an iframe. My Interact page is actually an AppSheet app that is embedded in an iframe. This iframe embedding is unique to AppSheet -- this won't work with Glide apps.

Next steps

Be creative. What kind of app will you create with this tool?

From Google Sheet to Mobile Web App with Glide (Method 2)

 

In part 2 of the Glide app tutorial, let's try making a progressive web app (PWA) in 15 minutes by starting with a Google Sheet. 

Step 1: Create a Google Sheet

For now, let's use a simple address book type of spreadsheet. Put column names in the first row, and a few data items in next 4 to 5 rows. Or you can just copy the sheet that I already created.

Step 2: Import the Sheet into Glide

Open Glide and create a new app by clicking the New App button.

Next you'll be asked to name the app. Pick a simple name like "Address Book" then click Continue.

Next, you will be asked to select a source. Select Google Sheets then click Continue.

Next you'll need to select the sheet that you created earlier.

Step 3: Customize the UI

You should be familiar with the interface now, if you've followed the previous installment. What we can try this time is to customize the information displayed on the main tab.

On the left panel, under the Screen section, select Inline List. Then on the right panel, expand the Data section. There will be options to change the columns that map to Title, Details, Caption, and Image. Try changing Caption to show the email address by selecting Email in the dropdown.

Step 4: Customize data

Now to do something interesting, let's add a profile photo for each contact. Go back to the spreadsheet and add a column called Image. The values expected for this column can be either a URL or a Base64 image blob.

Once you've populated the Image column, go back to Glide and refresh the data by clicking the reload icon beside the spreadsheet icon at the top.

Then you can map the Image field to our new Image column.

Step 5: Publish

Once you're satisfied with the customizations, go ahead and click the Publish button at the top right. One thing to note is that you can "install" your app when you open it on a mobile phone. For example, on Android, open your app in Chrome, then in the menu select Add to Home screen. Other mobile browsers allow for a more immersive experience, e.g. Edge & Vivaldi -- the app will take up the full screen, and the browser controls are hidden.

What's Next?

Use your new knowledge and be creative. Maybe you can use this for planning your vacations. Or maybe as appointment booking or order handling system for your small business. There are many possibilities.

Next we can compare Glide to its direct competitor, AppSheet which is by Google itself. You can actually see AppSheet in the Tools menu of Google Sheet. Let's see how to create an AppSheet app in my next post.

What would you create with a powerful tool like this? 

15-minute PWA with Glide (Method 1)

What is Glide?

Glide is a freemium online tool for creating a progressive web app whose data is backed by a Google Sheet. The tool has an easy to use visual interface for designing your app. Screen elements are highly customizable and has beautiful styles. I'd rather show you than just tell you, so let's dive in.

Making a Glide App 

The fastest way to create a Glide app is to use pre-made templates. I shall call this "Method 1". In another post, I will share the 2nd method, which is to start with a Google Sheet.

Step 1: Register for free

Sign-up for free to get basic features and limits.

Step 2: Select a Template

Browse for free templates. For this example, let's use a simple budget tracker. Click on the template, then on the next screen, click "Copy app for free".

Step 3: Customize the UI

Upon copying the app, you will be directed to the layout editing screen. The left panel allows you to navigate between the tabs in your app. The middle panel shows a preview of your app, and also allows selection of specific UI elements on the app. There are icons at the bottom to switch from play (preview) mode or select mode. Finally, the right panel provides various customization options for the selected component.

There's not much to customize anymore with a pre-made template. But here are a few minor tweaks you can try:

1. Try changing the color theme. Go to Settings by clicking the hexagonal nut icon at the top. Select Appearance. Then customize the theme, accent color, typography, and others.
2. Show, hide or add a tab. Go back to app preview by clicking the mobile phone icon. On the left panel, hover over a tab and click the eye icon to show or hide that tab. Or click the plus icon to add a new tab.
3. Change the layout of a tab. This could potentially be a drastic change, so try it out on a new tab, rather than the pre-existing Home, Expenses, and Categories tabs. On the left panel, select one of the layout styles: List, Tiles, Calendar, Map, Checklist, Cards, Swipe, and Details.

Step 4: Customize data  

Again, with a pre-made template, there's not much to customize anymore with the data. You can use the sheet as is, and it would work just great. But if you're interested, you can click on the spreadsheet icon at the top to view the data table behind your app. You can even find a link to the actual Google Sheet at the bottom left.

Step 5: Publish

Once you're satisfied with the customizations, it's time to see the app in action. Click the Publish button at the top right. You will then get a link and QR code for your app. You can customize the link to make it more memorable, if you want. The app is best viewed on a mobile device, so try scanning the QR code with your phone to open the app in your mobile browser. (If you open this link on a desktop browser, the app will take up only about 1/3 of the page. The rest is a link and QR code for sharing the app, and also a link to copy the app.)

Real-life applications

Personally, I've used Glide to boost my productivity. Specifically, I've created:

1. An app launcher specifically made to fit in Vivaldi's side panels for quick access.
2. An online event management app to manage attendees and the event program.
3. A team task tracker.
4. A mobile notifications center -- with some integrations with MacroDroid and Google Apps Script.
5. And many more possibilities

What would you create with a powerful tool like this? 

*All user interface content shown in screenshots are fully owned by Glide.