As a , I built micro tools to solve my own problems. For example: , and product builder↗️ article tool portfolio tracker , SaaS tracker , habit tracker , 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. This article is part of my ↗️ where I share resources about building things. Join me :) Note: toolkit newsletters How to build a mobile app using Google Sheet & Glide 1. Ideation stage 💡 Let’s name this app — . A mobile app for virtual event organizers to manage event info, details, ticket sales, FAQ & customer support. RemoteConfy 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 and create a free account. Then, go to and create a new file . Once you log in and authenticate both accounts: Glide Google Sheet “virtual event database” 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/

Google

Stripe

Target

Twitter

How I Built a Meal Kit Delivery App In a Day Using Stripe, Google Sheets, Glide and Carrd

I Built An Online Subscription Tracker App in Coda—Here's The Template

2021 - HackerNoon Contributor of the Year - VENTURE-CAPITAL

Nominated for 2022 - HackerNoon Contributor of the Year - Ecommerce

Nominated for 2022 - HackerNoon Contributor of the Year - Software

Nominated for 2022 - HackerNoon Contributor of the Year - Entrepreneurship

Too Long; Didn't Read

Boost your HackerNoon story @ $159.99! 🚀

Using a Spreadsheet to Build a Mobile App (in 3 hours)

Using a Spreadsheet to Build a Mobile App (in 3 hours)

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

3 Ways to Monetize B2C Marketplaces, On-Demand Economy and Employee Motivation

10 Top Industries To Be Transformed By Artificial Intelligence, Soon

10 Essential Mobile App UI Design Principles for Building Outstanding Apps

11 AI & ML App Ideas For Startups and SME’s In 2019

11 Best Low-Code And No-Code Platforms in 2021

11 Tips to Save Time on App Development & Launch Processes

3 Ways to Monetize B2C Marketplaces, On-Demand Economy and Employee Motivation

10 Top Industries To Be Transformed By Artificial Intelligence, Soon

10 Essential Mobile App UI Design Principles for Building Outstanding Apps

11 AI & ML App Ideas For Startups and SME’s In 2019

11 Best Low-Code And No-Code Platforms in 2021

11 Tips to Save Time on App Development & Launch Processes

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps