As a product builder↗️, I built micro tools to solve my own problems. For example: article tool, portfolio tracker, SaaS tracker, habit tracker, and finance tracker
I’m a fan of spreadsheets when it comes to prototyping. Today, I’ll share how I built this mobile app without code with an app template you can use.
Note: This article is part of my toolkit newsletters↗️ where I share resources about building things. Join me :)
How to build a mobile app using Google Sheet & Glide
1. Ideation stage 💡
Let’s name this app — RemoteConfy. A mobile app for virtual event organizers to manage event info, details, ticket sales, FAQ & customer support.
Users can view event schedules, purchase online tickets and email the organizer.
To begin, I list down the parts I want to build:
- Overview of event info & details
- Ticket type, pricing & payment
- Speakers lineup, profile photo & bio
- Event schedule, session time and topic
- List of FAQs
- Contact customer support
2. Getting started ⚒️
Go to Glide and create a free account. Then, go to Google Sheet and create a new file “virtual event database”. Once you log in and authenticate both accounts:
- Create a new app in Glide from Google Sheet
- Select the new spreadsheet file (copy & use this barebone sample)
- You’ll see the app UI with the output data linked with the spreadsheet
3. Configure your spreadsheet 📊
Glide app will turn your spreadsheet and output the data on mobile UI. In other words, you’ll need to create & update the spreadsheet to populate these data to configure your app.
If you don’t want to start from scratch, you can copy my spreadsheet.
Create new sheets in the same file. Each sheet contains a database (in bracket) we need for the event app:
- About (featured image, event title, description, links)
- Speaker (name, company, photo, bio, session topic)
- Partner (company name, logo)
- Schedule (session time, topic, speaker name)
- Tickets (tickets type, price, details, checkout)
- FAQ (list of questions and answers)
- Input FAQ (user full name, email & question)
👉 Try the app template (on mobile/web) here
4. Create app pages📱
We’ll need to create 4 separate app pages: About, Schedule, Speaker and FAQ. Each page will link to the relevant sheets & data we created in Step 3.
Make sure you refresh the database “Reload sheet” in Glide. This will re-sync Glide output with the spreadsheet data you’ve updated.
Add new tabs in Glide
- Go to “Tabs” on the left sidebar in Glide
- Add a new tab (or rename), i.e. “About”
- Point the data “Source” to the “About” sheet
Repeat the above steps for other Tabs (i.e. Schedule, Speaker, FAQ). You’ll need to make sure each Tab points to the right data source in the spreadsheet.
For example:
5. Display event details 📆
Let’s build the “About” page. You can include cover image, event title, description, and buttons. Start by clicking “Layout” on the left sidebar in Glide. Style the screen layout using “Details” mode, then:
Add new “Components +”
- E.g.: Image, Title, Basic Text, Button, Separator, Title, Rich Text (and other elements you see fit)
- Each component represents a design block that’s linked with data from “About” sheet
Format each “Component”
- Let’s format the main event title & description
- Add a “Title” component from “+”
- Point the data source to a sheet column (“event_title_title” “event_title_sub”)
Partially list out speakers and let users click “Show all” in a separate list:
- Add an “Inline List” component on About page
- Point the data source to a sheet (“Speaker”)
- Pull out other Speaker data (name, company, photo)
6. Purchase event tickets 🎟
Continue on the “About” page. Now we want to create a ticket purchase button that links to different ticket orders (General vs. Expert Admission).
Here’re the logical steps and app views when a user clicks on “ticket” button:
- Sees 2 types of tickets (Select Tickets view)
- Clicks on the 1st ticket option (General Admission view)
- Sees a “Purchase ticket” button (General Admission view)
- Sees an external payment page (ticket checkout)
Add ticket button
- Add a “Button” component on About page
- Edit the button “Features”, select “Action” (“Link to screen”)
- Point the data source to a sheet (“Tickets”)
Show 2 types of the ticket where users can choose from and expand for tickets info & pricing.
- Style the screen layout using “List” mode
- Pull out all data source related to tickets info (type, price, details)
Link ticket purchase button using Gumroad as checkout. Make sure you’ve set up Gumroad with General & Expert tickets.
- On “General Admission” app view, add a “Button” component from “+”
- Edit the button “Features”, select “Action” (“Open link”)
- Point the “Target” to “tickets checkout” that contains Gumroad link
You can also use Glide’s built-in checkout, Stripe or PayPal as an alternative.
👉 Try the app template (on mobile/web) here
7. Event schedule ⏰
The schedule page will list out the event agenda and topics. To build the Schedule view, point the data source to the “Schedule” sheet. Here’s how to customize the mobile UI on Glide:
Configure the “Schedule” tab
- Style the screen layout using “List” mode
- Pull out data you want to display (topic, time)
Each session will show presentation title, time and speaker. Add these components:
- “Title” component to include topic title, time and image cover
- “Rich Text” component and name “SPEAKER”
- “List Relation” component to link existing speakers database (this won’t work until we do the next step)
“List Relation” to link both Session topics <> Speakers’ topics database
Each session topic corresponds to a speaker who is presenting the topic. You can create a Speakers database (name, bio, topic, headshot) and re-use this database in the Schedule database.
- Go to “Data” icon on the left sidebar in Glide
- Go to the “Schedule” tab in the database
- Add Column+ from the top right corner, edit below settings
👉 Try the app template (on mobile/web) here
8. Email customer support 💁♂️
This section can include frequently asked questions such as ticket purchase, refund and so on. To build this page, you can point the data source to the “FAQ” sheet and style the display accordingly.
Users may want to ask additional questions that are not included in the FAQ. Therefore, we can create a contact form for this purpose.
- Add a “Form Button” component on FAQ page
- Edit the button “Features”, select “Action” (“Show form”)
- Point the form button to a data source “Input: FAQ”
- Create 3 form fields (full name, email & question)
Every time a user submits their questions, the input data will automatically update in this spreadsheet “Input: FAQ”. For example:
👉 Try the app template (on mobile/web) here
- Find me on Personal Site / Twitter / LinkedIn 🔥
- In case you miss out, I can send my upcoming toolkit to your inbox — Click here to join my newsletter 💌
- If you’re feeling generous today, you can buy me a coffee ☕
Previously published at https://whizzoe.com/blog/build-a-mobile-app-nocode-using-google-sheet-glide-in-3-hours/