Zero code development: Building a Product Catalogue app using Google AppSheet

17 Jun, 2021 / Blog Posts By: Deepu Kocheril

Zero code development: Building a Product Catalogue app using Google AppSheet

Introduction

No code development platform

Build a powerful No-code app in minutes using Appsheet. A no-code platform or no-code development platform (NCDP) is a development platform that helps users to create software without using any traditional computer programming tool. No code platforms provide visual user interfaces which help to create applications by just using its drag and drop capabilities

Main no-code platforms are Airtable, Shopify, Quickbase, Google AppSheet, etc

AppSheet

AppSheet is a no-code app development platform originally founded by Praveen Seshadri in 2014 and later acquired by Google in 2020. Users can create mobile apps from cloud-based spreadsheets and databases using this platform. AppSheet supports data sources like Google Drive, DropBox, Office 365, etc.

 

Creating a small app using Appsheet

Here I am showing how to create a product catalog app using Google sheet and AppSheet.  

Data Source

The first thing we need is a sheet of required data (product information in our case

 

product information in our case

 

The first row should contain the names for every column we are determining, so the platform can understand and process the data accordingly. Hence my first row consists of Category ID, Product description, Image URL, and Price.

Connecting the sheet to AppSheet

 

AppSheet website

Go to https://www.appsheet.com/ in the browser. 

 

AppSheet

https://www.appsheet.com/

 

You can choose the Free trial option provided by AppSheet as a start. AppSheet allows building and testing apps with up to 10 users for free. Click the “Start for free” button. It needs a Google login and will take you to the “My Apps” page.

 

My Apps Page

 

My Apps Page

 

Create new App

Click on the “New App” link, and you will be taken to the App creation page.

 

Create new App

 

Give App name and choose a Category for the App. Next, we need to choose the data source for the App. Click “Choose your data”

Select data source

 

Select data source-Appsheets

 

We already have our data ready, so you can choose “Start with your own data”. 

 

 

Appsheet

 

Our data is in Google sheets so choose “Google sheets and Forms”. We need to choose the sheet from Google drive

 

Appsheet

 

The App Page

Choose the Google sheet and click “Select”. The app will be generated automatically based on the data in your Google Sheets. 

 

Change Data settings

You can change the properties of data.  You can also add new types of displays like maps, calendars, galleries, charts, etc. 

 

Change Data settings

 

A preview of the App can be seen on the right side of the page. You can customize data and UI and review the changes on the preview.

Appsheet

 

Appsheet

 

You can edit the Data type and make it editable or not, set key and edit the field names

 

Change UX settings 

 

Appsheet

 

You can change the App title, logo, lunch image, background image, and other UI properties from the UX settings page

 

Appsheet

 

 

 

 

Appsheet

Change Security settings

 

Product catalogu app sheets

 

This page helps in changing security properties. You can control user access, set authentication provider for the App etc from here

 

Testing the App: inviting a user

The free trial lets up to 10 users access our App. You can invite a user via email to install and test our app from the Users page. 

 

Appsheet

 

 

Invitation Email

The invitation email looks like this: 

 

Invitation Email

 

Installing the App

You can install the App by clicking the Install button. The link will open a new browser page and take you to the Google Play store installation. 

 

Install appsheet

 

Viewing the App in mobile device

There will be the App icon in your mobile device once the installation is complete. Clicking on it will open the App, which shows our product catalogue 

 

Viewing the App in mobile device

 

Enhancements

The app can be improved by adding user-based data entry options, better gallery features, etc.