Lý thuyết
30 phút
Bài 3/15

Glide Intro

Tạo mobile apps nhanh chóng với Glide - từ spreadsheet đến app

📱 Glide Intro

Glide biến spreadsheet thành beautiful mobile apps trong minutes.

Glide Overview

Glide = Spreadsheet → App
  1. Có Google Sheet hoặc Excel
  2. Connect với Glide
  3. Glide auto-generate app
  4. Customize UI
  5. Share/publish

Getting Started

Step 1: Sign Up

  1. Truy cập glideapps.com
  2. Sign up với Google account
  3. Start new project

Step 2: Data Source

Text
1Options:
2- Google Sheets (recommended)
3- Excel
4- Airtable
5- Glide Tables (built-in)

Step 3: Create Project

Text
11. Click "New Project"
22. Choose template hoặc blank
33. Select data source
44. Glide generates app!

Data Structure

Spreadsheet as Database

Text
1Google Sheet "Products":
2
3| Name | Price | Category | Image URL | In Stock |
4|----------|-------|----------|--------------|----------|
5| iPhone | 999 | Phone | http://... | TRUE |
6| MacBook | 1999 | Laptop | http://... | TRUE |
7| AirPods | 249 | Audio | http://... | FALSE |
8
9Each row = 1 item
10Each column = 1 field
11Sheet name = Table name

Data Types

Text
1Glide auto-detects:
2- Text
3- Number
4- Boolean (TRUE/FALSE)
5- Image (URLs)
6- Date/Time
7- Email, Phone, URL

Relations

Text
1Sheet 1: Categories
2| ID | Name |
3|----|---------|
4| 1 | Phone |
5| 2 | Laptop |
6
7Sheet 2: Products
8| Name | Category ID |
9|--------|-------------|
10| iPhone | 1 |
11
12→ Glide creates relation automatically

Glide Interface

Layout

Text
1┌──────────────────────────────────────┐
2│ [Data] [Layout] [Style] [Settings] │
3├────────────┬─────────────────────────┤
4│ Components │ PHONE PREVIEW │
5│ ──────────│ ┌─────────────┐ │
6│ Lists │ │ │ │
7│ Forms │ │ App UI │ │
8│ Buttons │ │ │ │
9│ ... │ └─────────────┘ │
10├────────────┴─────────────────────────┤
11│ Properties Panel │
12└──────────────────────────────────────┘

Core Components

Collections (Lists)

Text
1Display data as:
2- List (vertical)
3- Grid (cards)
4- Cards (horizontal scroll)
5- Table
6- Calendar
7- Map

Detail Screens

Text
1Click item → Detail screen
2Auto-generated từ data
3Customize:
4- Which fields to show
5- Layout
6- Actions

Forms

Text
1Add/Edit data:
2- Add item form
3- Edit item form
4- Fields from columns
5- Validation

Actions

Text
1Button actions:
2- Navigate to screen
3- Show form
4- Open link
5- Send email
6- Run automation
7- Show notification

Building Product Catalog App

Step 1: Prepare Data

Text
1Google Sheet "Inventory":
2
3| Product Name | Description | Price | Image | Category | Stock |
4|--------------|-------------|-------|-------|----------|-------|
5| ... | ... | ... | ... | ... | ... |

Step 2: Create App

Text
11. New Project → Google Sheets
22. Select your sheet
33. Choose "Collection" template
44. Glide creates app

Step 3: Customize List

Text
11. Click on list component
22. Choose layout (Grid/Cards)
33. Map fields:
4 - Image: Image column
5 - Title: Product Name
6 - Description: Price
74. Add filtering

Step 4: Detail Screen

Text
11. Click "Details" tab
22. Arrange components:
3 - Image (top)
4 - Title
5 - Description
6 - Price (big)
7 - Add to cart button
83. Style each element

Step 5: Add Search

Text
11. Top of list screen
22. Add "Search" component
33. Configure columns to search

Computed Columns

Glide-Only Columns

Text
1Add columns trong Glide (không trong Sheet):
2
3Types:
4- Template (combine text)
5- Math (calculations)
6- If-Then-Else (logic)
7- Lookup (relations)
8- Rollup (aggregations)

Examples

Text
1Template Column:
2"$" + Price → "$999"
3
4Math Column:
5Price * 0.9 → Discounted price
6
7If-Then-Else:
8If Stock > 0 then "In Stock" else "Out of Stock"

Actions & Workflows

Button Actions

Text
11. Add Button component
22. Set action:
3 - Add row (create new item)
4 - Set column (update data)
5 - Navigate
6 - Open link
7 - Show notification

Automations

Text
1Glide Automations:
2When: Row added/updated
3Then:
4- Send email
5- Call webhook
6- Update other data

User Features

User Profiles

Text
11. Enable "User profiles"
22. Link to Users sheet
33. Each user sees their data
44. Row owners = privacy

Sign In Options

Text
1- Email magic link
2- Google
3- Microsoft
4- PIN code

Glide vs Bubble

FeatureGlideBubble
Speed⚡ Very fast🐢 Slower
FlexibilityLimitedVery high
Mobile✅ Excellent⚠️ Web only
LearningEasyHard
PricingAffordableHigher
Use caseSimple appsComplex apps

Best Practices

Glide Tips
  1. Clean data first - Tidy spreadsheet
  2. Use computed columns - Keep sheet simple
  3. Row owners - User-specific data
  4. Test on phone - Mobile-first
  5. Limit columns - Performance
  6. Name sheets clearly - Organization

Bài Tập

Practice
  1. Create Google Sheet với product data (10 items)
  2. Build Glide app:
    • Product list (grid view)
    • Detail screen
    • Search functionality
    • Category filter
  3. Share app link

Tiếp theo: Bài 4 - FlutterFlow Overview