Cơ bản Bubble | MinAI Learning

Lý thuyết

2/15•35 phút

Đang tải...

Cơ bản Bubble

Làm quen với Bubble - interface, elements, workflows và database

🎯 Mục tiêu bài học

TB5 min

🫧 Cơ bản Bubble

Bubble là nền tảng no-code mạnh nhất. Học cách sử dụng từ cơ bản.

✅ Hiểu cấu trúc giao diện và các tab trong Bubble ✅ Sử dụng các Design Elements: Visual, Input, Containers ✅ Tạo Workflows xử lý logic ứng dụng ✅ Thiết kế Database và hiển thị dữ liệu động ✅ Xây dựng mini app Todo hoàn chỉnh

Task 0

🔍 Bubble Interface

TB5 min

Các phần chính

Bubble Editor Interface

Top Bar: Design | Workflow | Data | Styles

Bảng điều khiển	Vị trí	Nội dung
Elements	Thanh bên trái	Visual, Input, Container, ...
Canvas

Task 1

Tiếp: Giới thiệu Glide

Tab	Mục đích
Design	Xây dựng giao diện, bố cục
Workflow	Thêm logic, hành động
Data	Cấu trúc cơ sở dữ liệu
Styles	Kiểu dáng tái sử dụng
Plugins	Thêm chức năng
Settings	Cấu hình ứng dụng

🎨 Design Elements

TB5 min

Thành phần hiển thị

Ví dụ

1Text - Display text
2Image - Show images
3Shape - Rectangles, circles
4Icon - Icon library
5Video - Embed videos
6Map - Google Maps

Thành phần nhập liệu

Ví dụ

1Input - Text input field
2Multiline Input - Textarea
3Dropdown - Select options
4Checkbox - Yes/no
5Date/Time Picker - Date selection
6File Uploader - Upload files

Bộ chứa

Ví dụ

1Group - Group elements together
2Repeating Group - Lists, grids
3Popup - Modal dialogs
4Floating Group - Fixed position

Checkpoint

Bubble có những loại Design Elements nào? Sự khác nhau giữa Visual Elements, Input Elements và Containers là gì?

Task 2

🛠️ Building First Page

TB5 min

Bước 1: Thêm thành phần

Ví dụ

11. Drag "Text" to canvas
22. Double-click to edit
33. Set font, size, color in Properties
4 
54. Drag "Input" below text
65. Set placeholder text
76. Set input type (text, email, password)
8 
97. Drag "Button"
108. Set button text
119. Set style (colors, rounded)

Bước 2: Thiết kế đáp ứng

Ví dụ

1Bubble uses "Flexbox" responsive:
2 
3Container settings:
4- Row vs Column layout
5- Gap between elements
6- Alignment (left, center, right)
7- Min/Max width
8 
9Element settings:
10- Fixed vs Fit width
11- Min/Max constraints

Checkpoint

Bubble sử dụng hệ thống responsive nào? Các setting chính cho Container và Element là gì?

Task 3

⚡ Workflows

TB5 min

Workflow là gì?

Ví dụ

1Workflow = When [Event] → Do [Actions]
2 
3Example:
4When: Button is clicked
5Do: 
6  1. Create new thing in database
7  2. Show success message
8  3. Reset inputs

Tạo Workflow

Ví dụ

11. Click on Button
22. Click "Start/Edit Workflow"
33. Define trigger (Button clicked)
44. Add Action 1 (e.g., Create thing)
55. Add Action 2 (e.g., Show message)

Hành động phổ biến

Ví dụ

1Data:
2- Create a new thing
3- Make changes to thing
4- Delete a thing
5 
6Navigation:
7- Go to page
8- Show popup
9- Hide popup
10 
11Element:
12- Set state
13- Display data
14- Reset inputs
15 
16Account:
17- Sign user up
18- Log user in
19- Log user out

Checkpoint

Workflow trong Bubble gồm những thành phần nào? Hãy mô tả cấu trúc Event → Actions?

Task 4

📊 Database (Data Tab)

TB5 min

Kiểu dữ liệu

Ví dụ

1Create "Data Types" = Tables
2 
3Example - Blog App:
4- User (built-in)
5- Post
6- Comment
7- Category

Trường dữ liệu

Ví dụ

1Post Data Type:
2- title (text)
3- content (text)
4- author (User)
5- created_date (date)
6- image (image)
7- category (Category)
8- is_published (yes/no)

Quan hệ dữ liệu

Ví dụ

1One-to-Many:
2User → Posts (một user có nhiều posts)
3 
4Many-to-Many:
5Post ↔ Categories (list of Categories)

Checkpoint

Bubble hỗ trợ những loại quan hệ dữ liệu nào? Cho ví dụ về One-to-Many và Many-to-Many?

Task 5

📋 Display Data & States

TB5 min

Dữ liệu động

Ví dụ

1Text element showing username:
2 
3Content: "Hello, Current User's name"
4 
5Syntax: Current User's name
6(Select from dropdown, not typed)

Nhóm lặp

Ví dụ

1Display list of Posts:
2 
31. Add Repeating Group
42. Type of content: Post
53. Data source: Search for Posts
64. Inside RG: Add elements
75. Use "Current cell's Post's title"

Tìm kiếm & Lọc

Ví dụ

1Data source options:
2 
3Search for Posts:
4- Created by = Current User
5- Is_published = yes
6- Created date > 7 days ago
7- :sorted by Created date (descending)

Trạng thái tùy chỉnh

Ví dụ

1Store temporary data:
2 
31. Select element (or page)
42. Add custom state
53. Name: "selected_tab"
64. Type: text
75. Default: "home"
8 
9Use in conditionals:
10When Page's selected_tab is "home" → Show home content

Trạng thái thành phần

Ví dụ

1Built-in states:
2- Input's value
3- Dropdown's value
4- Checkbox is checked
5- Group is visible

Checkpoint

Repeating Group trong Bubble hoạt động như thế nào? Custom States dùng để làm gì?

Task 6

🏗️ First Mini App & Best Practices

TB5 min

Ứng dụng Todo

Ví dụ

1Data Type: Task
2Fields:
3- title (text)
4- is_done (yes/no)
5- user (User)
6 
7Page Elements:
8- Input (task title)
9- Button (Add)
10- Repeating Group (tasks)
11  - Text (title)
12  - Checkbox (done)
13  - Icon (delete)
14 
15Workflows:
16- Button click → Create Task
17- Checkbox change → Update Task
18- Delete click → Delete Task

Bubble Tips

Name everything - Elements, workflows
Use groups - Organize layout
Reusable elements - Headers, footers
Keep workflows simple - One purpose each
Test often - Preview mode
Version control - Save versions before big changes

Practice

Create new Bubble app
Build Todo app:
- Add task input + button
- Display tasks in list
- Mark as done
- Delete task
Test in Preview mode

Checkpoint

Bạn đã xây dựng được Todo app chưa? Hãy mô tả các workflows cần thiết cho ứng dụng Todo?

Task 7

expert

🧠 Expert Lens: Bubble Architecture Decisions

TB5 min

🧠 Góc Nhìn Chuyên Gia: Bubble Architecture Decisions

Khi nào chọn Bubble?

Tiêu chí	Bubble phù hợp	Bubble không phù hợp
Complexity	Web app phức tạp	Simple landing page
Users	< 10K concurrent	> 10K concurrent
Customization	Logic phức tạp, custom UI	Chỉ cần template
Budget	$29-349/mo	Cần free hosting
Timeline	2-8 tuần MVP	Cần deploy trong 1 ngày

Bubble Performance Tips

Database design — Normalize data, avoid nested lists
Search — Use constraints, not filters (server-side vs client-side)
Workflows — Backend events cho heavy processing
API calls — Cache results, batch operations

Checkpoint

Bạn có thể áp dụng framework trên vào công việc thực tế của mình như thế nào?

Task expert

🎯 Mục tiêu bài học

🫧 Cơ bản Bubble

🔍 Bubble Interface

Các phần chính

Giải thích các Tab

Checkpoint

🎨 Design Elements

Thành phần hiển thị

Thành phần nhập liệu

Bộ chứa

Checkpoint

🛠️ Building First Page

Bước 1: Thêm thành phần

Bước 2: Thiết kế đáp ứng

Checkpoint

⚡ Workflows

Workflow là gì?

Tạo Workflow

Hành động phổ biến

Checkpoint

📊 Database (Data Tab)

Kiểu dữ liệu

Trường dữ liệu

Quan hệ dữ liệu

Checkpoint

📋 Display Data & States

Dữ liệu động

Nhóm lặp

Tìm kiếm & Lọc

Trạng thái tùy chỉnh

Trạng thái thành phần

Checkpoint

🏗️ First Mini App & Best Practices

Ứng dụng Todo

Checkpoint

🧠 Expert Lens: Bubble Architecture Decisions

🧠 Góc Nhìn Chuyên Gia: Bubble Architecture Decisions

Khi nào chọn Bubble?

Bubble Performance Tips

Checkpoint

📚 Tài liệu tham khảo

📚 Tài liệu tham khảo

Bubble.io

🚀 Bài tiếp theo