type
status
date
slug
summary
tags
category
icon
password
Original entry: https://archive.selfdeveloping.dev/2021/06/from-google-sheet-to-mobile-web-app.html#Blog1
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?