Welcome to Hackathon Entertainment No Code Academy

Explore

Learn by Watching

Glide
Glide

Project: A Company Directory

We will start by creating a simple company directory to begin with to introduce you to Glide and some of it’s features.

You’ll learn how to

Create your spreadsheet database

Create your app

Adjust your app’s layout

Add features to your app

Adjust your app appearance

Adjust your app info

Publish your app

What you will need

A Glide account

A Google account

⁠

Lesson 1: Introduction to Glide

Glide is one of the simplest No Code platform to use. If you can use a spreadsheet you can create an amazing application without adding any additional functionality. All the logic for the app is contained in your spreadsheet. Glide gives the spreadsheet data a beautiful interface for you and your customers to interact with.

⁠

⁠

Lesson 2: Creating a spreadsheet

Start by logging into your Google account and create a new Google spreadsheet

Rename your spreadsheet “Company Directory”

Rename that tab “Profiles”

Add headers in each cell of the first 4 columns and shown in the image below. (headers categorise information and makes it easy for Glide to distinguish different types of data).

Add sample data to the first couple of rows*

⁠

⁠

*When adding a image you need to upload an image in

Google drive⁠

, right-click on it, then click Get sharable link and make sure that anyone with the link can view.

You can access a template of the spreadsheet

here⁠

⁠

Lesson 3: Creating a new Glide App

Select new app

Select your “Company Directory” spreadsheet

⁠

⁠

Lesson 4: Adjusting your app’s layout

Under the layout menu in the properties bar on the right select “cards” in the style section.

2. Under the data section in the properties bar on the right, map the spreadsheet columns to Glide’s headers.

⁠

⁠

3. Under the design section, change the image size to “2:3 (vertical)”, size to half-size, card style to outline.

⁠

⁠

Lesson 5: Adding features to your app

Under the features menu in the properties bar on the right select “position” in the in=app filter section (This allows users to filter data)

⁠

⁠

Lesson 6: Allowing users to add data

Under the add menu in the properties bar on the right select allow users to add items.

On on submit action select add row from the dropdown menu.

⁠

⁠

Lesson 7: Creating a new tab

Create a new tab in the spreadsheet

Rename the tab “Companies”

Create header columns “name” and “description” as shown in the image below

Add sample data as shown in the image below

⁠

⁠

You can access a template of the spreadsheet

here⁠

⁠

Lesson 8: Adding a new tab

On the left menu panel select tabs

Once tab option is selected, in the right menu panel select the “+” icon to add a new tab

⁠

⁠

3. Select the new tab

4. Rename the page “Companies” in the label column

5. Change the source to “Companies”

6. Change the icon to something more suitable from the default icon

⁠

⁠

7. Return to the layout tab on the menu panel on the right

8. Remove the image icon by removing the image data input and deselecting show title when image is not available

⁠

⁠

Lesson 8: Adjusting your app’s appearance

Select the settings tab from the panel menu panel on the left

Select appearance from the panel on the right

Select an accent colour

Select a theme

Select a font from typography

⁠

⁠

Lesson 9: Adjusting your app info

From the menu panel on the left select settings

Select app info from the panel on the right

Give your app a name

Type the author of the app

Upload your app icon

Create an app description

⁠

⁠

Lesson 10: Publishing your app

Select publish at the top of the workspace

Select publish app at the popup dialog

Create a name for your app in the app link input bar

⁠

⁠

Congratulations

You have completed your first app. You can view our completed version

here⁠

⁠

If you’re using a free version of Glide you’ll be unable to enable tablet mode so when users visit your URL on a desktop or tablet, your app will look like the image below.

⁠

⁠

On Mobile, when users visit your app in the browser it will appear like a native application in the images below. Users will even be prompted to add the app to their phone home screen.

⁠

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.

GlideGlide

Project: A Company Directory

You’ll learn how to

What you will need

Lesson 1: Introduction to Glide

Lesson 2: Creating a spreadsheet

Lesson 3: Creating a new Glide App

Lesson 4: Adjusting your app’s layout

Lesson 5: Adding features to your app

Lesson 6: Allowing users to add data

Lesson 7: Creating a new tab

Lesson 8: Adding a new tab

Lesson 8: Adjusting your app’s appearance

Lesson 9: Adjusting your app info

Lesson 10: Publishing your app

Congratulations

Glide
Glide