Target Audience: People new to Bubble, particularly non-technical individuals with an app idea.
Objective: Build a marketplace app from scratch, teaching the fundamentals of Bubble.
Bubble: A visual programming language that allows for intuitive web application development without syntax-based coding.
Understanding Bubble
Visual Interface: Manipulates the underlying code base of your application.
Photo Editing Analogy: Similar to using Photoshop, where visual changes affect the underlying image file code.
Programming Mindset: Even though you’re not writing syntax-based code, you are still programming by giving commands to a machine.
Workflows: Bubble uses workflows to define app behaviors, such as what happens when a button is clicked.
Getting Started
Creating a New Application
Dashboard: Upon logging in, you see the Bubble dashboard.
New App Button: Click the “New App” button to create a new application.
Forms: Fill out forms to provide Bubble with information about your app (for analytics purposes).
Start Blank: Choose to start with a blank page to begin designing.
Bubble Editor Overview
Design Canvas: Where elements are placed for users to interact with.
Tabs: Includes Workflow, Data, and more for different app functions.
Index Page: The default page being edited.
Element Inspector: Opens when you double-click on the canvas, allowing you to change page properties.
Responsive Design: Bubble is rolling out a new responsive engine to manage how your app looks on different screen sizes.
Fixed Width Page: Set layout to fixed width for consistency across devices.
Adding Elements
Basic Elements
Text Box: Use to display static text like “Hello World!”
Buttons and Images: Can be added to perform actions or display pictures.
Input Forms: Used for user interactions, such as product names, prices, and photos.
Property Setup: Name inputs for clarity, e.g., input_product_name, input_product_price.
Content Format: Set up for input fields such as integers for prices.
Data Tab and Databases
Creating Data Types
Product Data Type: Add fields like Name, Price, and Photo.
Database Structure: Think of the database as a warehouse with shelves (each “shelf” represents a data type like “Product”).
Workflows and Actions
Workflow Setup: Create workflows linked to page elements (e.g., a button click event).
Create New Thing: Action to create a new product in the database.
Set Fields: Fill product fields with input values.
Reset Inputs: Clear input fields after creation.
Alerts: Use alerts to show success messages to users.
Displaying Data from the Database
Groups and Repeating Groups
Single Items: Use a Group element to display a single data object (e.g., a single product).
Repeating Groups: Use for displaying a list of items from the database (e.g., a list of products).
Dynamic Data: Use expressions like current cell’s product name to show dynamic content.
Editing and Deleting Data
Edit Functionality
Edit Icons: Add elements like edit buttons to trigger pop-up forms for editing data.
Pop-ups: Use pop-ups to display and edit selected data objects.
Make Changes to Thing: Workflow action to update data.
Conditional Workflows: Use conditions to decide whether to create or edit data.
User Management
Sign Up, Login, and User Sessions
Built-in User Type: Bubble includes a user data type with built-in fields and functionalities (e.g., email, password).
Sign Up/Login Pop-up: Create sign up and login forms using pop-up elements.
Custom States: Use custom states to manage user interface states, like switching between sign-up and login views.
Privacy Rules: Manage data access and privacy settings.
Responsive Design and Pages
Multiple Pages: Create different pages for different parts of your app (e.g., browse page, create page).
Navigation: Use navigation workflows to move between pages.
Reusable Elements: Modularize elements like headers to maintain consistency and simplify maintenance.
Advanced Functionality
Favoriting Products
Data Linking: Create links between data types (e.g., users and products) to implement favoriting functionality.
Conditional Visibility: Use conditions to show or hide elements based on data states (e.g., whether a product is favorited).
Adding Workflow Logic: Implement workflows to add or remove items from favorite lists.
Conclusion
Summary: You’ve learned the basics to start building and managing a Bubble application, including creating data types, workflows, managing user sessions, and more.
Next Steps: Focus on learning responsive design to create adaptive applications.
Encouragement: Keep building, exploring, and let the community know what you’re creating.