Democratizing No-Code Application Development with Bubble E-Book

Caio Calderari

• Herausgeber: Packt Publishing
• Kategorie: Fachliteratur
• Sprache: Englisch
• Veröffentlichungsjahr: 2024

Seitenzahl: 420

Beschreibung

In an era marked by a growing demand for tech solutions and a shortage of skilled developers, companies grapple with hiring expenses. No-code tools offer a faster, more affordable software development alternative. Leading this no-code revolution is Bubble, enabling newcomers to construct impressive web applications in a matter of weeks if not days.
Written by Caio Calderari, a seasoned no-code expert with 17 years of experience to offers practical advice for mastering no-code application development. You'll learn to plan your app with Bubble's visual builder features and UI components and implement frontend functionalities such as customizing layouts and creating responsive user interfaces. The book covers workflow automation, database management, security best practices, and backend functionality setup and advances to span the Bubble plugin ecosystem and API integration for third-party services to improve the app's functionality. Additionally, you'll explore app testing, debugging, performance monitoring, and maintenance. From launching with a custom domain to gathering user feedback for continuous improvement and optimization of performance and scalability, you’ll learn every aspect of Bubble's app development and deployment.
By the end of this book, you'll know how to bring your digital ideas to life without writing code.

Leseprobe

Democratizing No-Code Application Development with Bubble

A beginner’s guide to rapidly building applications with powerful features of Bubble without code

Caio Calderari

Democratizing No-Code Application Development with Bubble

Copyright © 2024 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

Group Product Manager: Aaron Tanna

Publishing Product Manager: Uzma Sheerin

Book Project Manager: Deeksha Thakkar

Senior Editor: Nisha Cleetus

Technical Editor: Rajdeep Chakraborty

Copy Editor: Safis Editing

Proofreader: Nisha Cleetus

Indexer: Manju Arasan

Production Designer: Vijay Kamble

Business Development Executive: Puneet Kaur

DevRel Marketing Coordinators: Deepak Kumar and Mayank Singh

First published: April 2024

Production reference: 1190424

Published by Packt Publishing Ltd.Grosvenor House
11 St Paul’s SquareBirmingham
B3 1RB, UK

ISBN 978-1-80461-094-7

www.packtpub.com

To my wife, Maisa, for being my loving partner throughout our joint life journey. For all the love, partnership, help, and support during the writing process and our entire life together. To my parents and sister for the inspiration, education, and support that allowed me to achieve my goals and grow as the person I am today. To my parents-in-law, who took me in as part of their family, providing support, help, love, and kindness. Without you all, nothing would make sense.

– Caio Calderari

To the creators, innovators, thinkers, builders, and doers. To the ones who want to make a difference, create something new, build their dreams and ideas, and just be able to do it. To the empowered people who will be able to change their realities and their surroundings and impact people’s lives in a positive and transformative way. To the builders who will change and shape the world through the art of making their ideas a reality. To the ones who will make it happen.

– Caio Calderari

Contributors

About the author

Caio Calderari is a No-Code Expert, Startup Founder and Senior Product Designer with 17+ years of experience. Starting as a designer in 2005, he worked for advertising, digital agencies, corporate companies and startups worldwide.

He learned no-code tools to be able to build his own startups and side projects and later decided to teach others too. In 2020, he created a YouTube channel about no-code tools offering courses and tutorials. By 2021, he became the Chief No-Code Officer at a U.S.-based company, helping entrepreneurs from various countries launch their startup ideas.

Caio is a creative individual, passionate about sharing his knowledge. His goal is to bring no-code to more creators, helping them unlock this new world of possibilities.

If you want to connect with Caio Calderari, you can follow him on the social networks with @calderaricaio or visit his website titled Caio Calderari - No-Code, Design & Startups.

About the reviewer

Chris Schrade is a seasoned no-code developer and Founder at one of the USA’s leading Bubble.io Agencies, Alchemy Apps. His journey began in 2016, aiming to streamline workflows for his employer via an internal application. Discovering Bubble transformed his approach, leading him to be part of 100+ applications. Beyond his agency work, Chris’s passion for technology and innovation spurred the creation of side projects like OUTWRK, a workout log, social platform, and marketplace for athletes, coaches, and parents; Market Summary Assistant, an AI-powered stock market summarizer; and Ooldie, a service connecting seniors with in-home care providers and the tools to manage the relationship. His commitment to simplifying technology for practical, impactful use is evident through his work and contributions to the no-code community.

Table of Contents

Preface

1

Getting Started with Bubble.io – Exploring Bubble’s Features

Introduction to the Bubble.io platform

Setting up an account and project workspace

New project setup – application assistant

Step 1 – favicon and application name

Step 2 – default font

Step 3 – default colors

Step 4 – choosing plugins

Finishing the application assistant

Navigating the Bubble.io interface

1 – the top bar

2 – the sidebar

3 – the page

4 – the property editor

Understanding the main areas of the editor and key features

Design

Workflow

Data

Styles

Plugins

Settings

Logs

A quick tour of the main areas of your account

Apps

Account

Templates marketplace

Plugins marketplace

Support

Forum and community

Summary

2

Navigating the UI Builder Components Tab

Presenting the UI Builder components tab and the sidebar

Quick tips about the Elements Tree

Presenting UI components

Visual Elements

Containers

Input forms

Reusable elements

Install More

Summary

3

Building Blocks – Exploring Bubble’s UI Components

Diving deep into UI elements

Visual elements

Text

Button

Icon

Link

Image

Shape

Alert

Video

HTML

Map

BuiltonBubble

Containers

Group

RepeatingGroup

Popup

FloatingGroup

GroupFocus

Table

Input forms

Input

Multiline input

Checkbox

Dropdown

SearchBox

RadioButtons

SliderInput

Date/TimePicker

PictureUploader

FileUploader

How to create a reusable element

Useful reusable elements – Header, Footer, Signup, and Login

Header

Footer

Signup / Login Popup

How to install new components

Summary

4

Building Your First Bubble App – The Planning Phase

Identifying and defining your target user

Do you know who your user is?

User interview tips

Defining the problem you are going to solve

What is a problem statement?

Outlining desired functionalities

Sketching your page structure

Planning your data structure

Defining third-party services

Summary

5

Layouts and Styles

How to create layouts and main settings

Fixed

Align to parent

Row

Column

Layout customization options

Styling elements on the Styles tab

Element styles

Style variables

Summary

6

Building User Interfaces with Bubble

Getting started with responsive layouts

What is responsive design?

What are breakpoints?

The Responsive Design tab

Elements Tree

Different ways of previewing your pages

Preview mode

Browser Inspector

Real devices

Websites to test multiple breakpoints

Summary

7

Workflow Automation and Logic

An introduction to workflows and logic features

Creating actions and triggers for user interactions

Managing workflows and elements

Incorporating conditions and logic statements

Only when

Workflows run at the same time

Backend workflows

API workflows

Database events

Recurring events

Custom events

Summary

8

Database Structuring, Relationships, and Security

Bubble database overview

What is a database?

The Bubble database

Data types

Privacy

App data

Option sets

File manager

Creating database tables and option sets

Creating a database table

Creating option sets

Manipulating the database with CRUD

Create

Read

Update

Delete

Privacy rules and security

Security tips

Summary

9

Extending Functionality with Plugins and APIs

Exploring the Bubble.io plugin ecosystem

Installing and configuring plugins

A curated list of popular and useful plugins

Connecting Bubble.io with popular APIs and services

What is an API?

Enabling data synchronization and communication

Enhancing app functionality through integrations

API calls

Using the API data

Exploring popular APIs and finding suitable ones

Summary

10

Testing and Debugging Strategies

Presenting the issue checker and debugger

Testing your app’s functionality and performance

Manual testing

User testing

Performance testing

Professional testing

Troubleshooting and handling errors

Extra debugging and testing strategies

Display options and responsive mode

Testing with browser tools (Chrome Dev Tools)

No-code-specific testing and monitoring tools

Community and support

Summary

11

Deploying and Launching Your App (Publishing)

Understanding the concept of deploying an application

Preparing for deployment – reviewing, previewing, and testing the app

How to set up a custom domain

Launching the app to the public

Summary

Further reading

12

Monitoring, Maintenance, and Updates (Apps Governance)

Understanding dashboard metrics – An explanation of WUs and usage

What are workload units (WUs)?

How to optimize WUs?

App management – Versioning control, updates, and production to Live

Versioning control

Updates and production to Live

App governance – Defining responsible people in your organization

Monitoring app performance and user analytics

Handling maintenance and addressing user feedback

Summary

Further reading

13

Optimizing Performance and Scalability

Why is performance important?

UX and UI tips – best practices for your app design

UX and UI best practices and tips

Efficient database usage – improving workflows and queries

The mindset

Databases

Workflows

How to minimize page load times

Is it possible to scale your Bubble app? Real examples

Scaling your Bubble app for increased traffic

External databases as an alternative option

Bubble’s database limitations

Basic tips to improve your app’s overall performance

Summary

Further reading

Index

Other Books You May Enjoy

Preface

In today’s world, every company is a software company and needs to embrace technology. High and growing demand for tech solutions meets a shortage of skilled developers worldwide posing a hiring expenses challenge for companies.

The digital landscape is expanding at an unprecedented pace, and those who fail to incorporate technology into their operations risk being left behind or dying. Digital transformation is a strategic competitive advantage that can’t be ignored.

The key to thriving in this competitive tech-driven era lies in the rapid and cost-effective creation of software that delivers value to customers.

No-code tools offer a faster, more affordable software development alternative with a transformative approach to software development that allows more people to be able to build software. This revolution is allowing common people and company’s employees, with no prior technical skills and programming knowledge, to be able to build software faster, easier and more affordable.

No-Code, Low-Code Tools and Artificial Intelligence are groundbreaking solutions, enabling individuals to craft applications without the need for years of coding expertise. This is a game changing scenario that can help with the existing challenges we face in the software world. With intuitive drag-and-drop components and plain English logic, these tools open doors for learners of all backgrounds to embark on their software-building journey in a matter of months, not years.

During the pandemic No-Code tools became even more relevant, helping businesses migrate their physical operations to the internet, becoming digital, in a fast and affordable way. Since then, these tools have gained more market traction, investments and evolved over the years.

Leading the charge in the no-code revolution is Bubble, which represents one of the pioneers in the No-Code Revolution and that has one of the largest community and user base with more than 3 million users worldwide. Bubble is a powerful platform that empowers newcomers to construct remarkable web applications in a matter of weeks if not days.

Its accessibility has empowered companies to devise internal solutions, entrepreneurs to forge the path for their startup MVPs, and creatives to offer bespoke development services to clients. This book is an introduction to the no-code revolution, it is a way for creative people to be able to express their creativity by being able to build their dream solutions themselves, to build software and accomplish tasks, solve problems. As I discovered this amazing world of possibilities, I hope I can help you along the way by providing a little bit of help and guidance in your learning path.

Everyday individuals, driven by their ideas, wanting to change their reality and the world, can now turn them into reality without the steep learning curve traditionally associated with coding. This is the No-Code Revolution, and I am glad you are now a part of it. Welcome. Let’s No-Code!

Who this book is for

This book is for Aspiring No-Code Developers, Citizen Developers, Startup Founders, First Time Entrepreneurs, Designers, and Makers who want to learn, in a step-by-step manner and without using code, how to build web applications with Bubble, a no-code tool that can allow you to build a high-quality web application or website to serve your specific business objectives.

What knowledge do you need before getting started? You don’t need technical skills, you don’t need to know how to code or program, or how to design websites, apps or digital software. That is the beauty of no-code tools, it allows basically anyone to learn and be able to build digital applications. But if you do come from a technical background or have web design and development skills, that is also fine and helpful.

It is recommended you have at least familiarity with how the internet works, what a website is, how to install and use an app and how to use basic software like Spreadsheets and PowerPoint, for instance. This book is targeting beginners, so it won’t require any initial and specific technical knowledge or skill. If you know how to operate a computer and use the internet and common software, you will be ready to read the book and learn.

What this book covers

Chapter 1, Getting Started with Bubble.io - Exploring Bubble’s Features, This chapter is an introduction to Bubble, a powerful no-code platform for building web applications in a visual way. Readers will discover the fundamentals of the tool, examples of what you can build with it. Learn and explore its essential main features, like the visual editor. Practically learn step-by-step how to set up an account and workspace, and gain familiarity with the main and most important areas of the tool allowing them to get started with Bubble and no-code to build their first projects in a visual way, without code.

Chapter 2, Navigating the UI Builder Components Tab, This chapter will explore the UI Builder Components Tab, a crucial aspect of building web applications on Bubble.io. Readers will learn fundamental concepts such as the Elements Tree and its role in managing component visibility and conditional settings. Through practical examples, they’ll grasp key features of container components, input forms, and reusable elements, essential for crafting intuitive user interfaces. Additionally, readers will learn how to expand their toolkit by installing additional components from the Plugins Marketplace and gain valuable insights into efficient component management practices. By understanding these core features, readers will be equipped to navigate the UI sidebar with confidence and seamlessly build their own applications on Bubble.io.

Chapter 3, Building Blocks - Exploring Bubble’s UI Components, This chapter will cover the UI components available in Bubble, giving a comprehensive understanding of each element’s purpose and functionality. From essential visual elements like Text, Button, and Image to versatile containers such as Group and Popup, readers will learn how to utilize these building blocks to craft compelling page layouts for their digital applications. Additionally, through clear explanations and practical examples, readers will discover the power of reusable elements and learn how to efficiently incorporate them into their projects. By the end of this chapter, readers will be equipped with the knowledge and skills to confidently navigate Bubble’s UI components and leverage them effectively in their own application development journey.

Chapter 4, Building Your First Bubble App – The Planning Phase, In this chapter, readers transition from exploring Bubble’s components to the essential planning phase of app development. Readers will learn skills to strategically plan their no-code applications, ensuring clarity and efficiency throughout the development process. By identifying target users, defining project goals, and outlining desired functionalities, readers lay a solid foundation for their projects, minimizing complexity and streamlining development. By the end of the chapter readers will have gained a holistic understanding of the planning process, setting the stage for successful app development.

Chapter 5, Layout and Styles, This chapter covers layout and style customization options. Readers will learn how to work on the visual aesthetics of their applications. By navigating the styles tab, readers gain essential skills to customize elements according to their preferences, including colors, typography, and layout structures. Understanding these customization options empowers readers to design beautifully crafted applications aligned with their brand’s style and guidelines. Through layout and design adjustments, readers enhance the overall user experience, creating visually appealing interfaces that captivate and engage users.

Chapter 6, Building User Interfaces with Bubble, In this chapter, readers will learn about responsive layouts and user interface design. Building upon the foundation established in the previous chapter on layouts and styles, readers will learn how to create responsive layouts that seamlessly adapt to diverse devices and screen sizes. Through exploration of Bubble’s responsive design features within the responsive editor, readers acquire the skills to craft visually appealing and user-friendly interfaces. By mastering responsive layout creation and configuration, readers ensure their applications are accessible and optimized across various devices.

Chapter 7, Workflow Automation and Logic, This chapter introduces workflows and logic features, empowering readers with the skills to implement logic in their Bubble applications. Readers will learn how to configure workflows in elements, creating actions and triggers. Workflows serve as the essential “brain” of any Bubble application, orchestrating interactions between the front end and the database. By integrating front-end designs with the database through workflows, readers will be able to develop powerful applications efficiently. Additionally, readers will learn about back-end workflows, conditionals and logic statements, unlocking the potential for building advanced automations within their projects.

Chapter 8, Database Structuring, Relationships and Security, This chapter focuses on database structuring, relationships, and security within Bubble applications. Readers will learn what a database is, how to create one and establish relationships between data elements. Additionally, they will learn how to implement security measures to safeguard their database information. Through practical examples, readers will learn how to create databases, define data types and fields, and utilize workflows to populate databases with user information. By mastering the integration of databases and workflows, readers will acquire the skills needed to develop dynamic applications in Bubble.

Chapter 9, Extending Functionality with Plugins and APIs, This chapter is about Plugins and APIs. Readers will learn how to explore Bubble’s plugin ecosystem, the marketplace, learning how to seamlessly integrate their applications with external services using APIs and Plugins. They will also learn how to find, manage and install new plugins. Additionally, they will also learn about APIs and the API Connector plugin that allows integration between Bubble and any existing API from a third-party service. By the end of this chapter, readers will be empowered to expand the capabilities of their web applications, with the power of APIs and Plugins to accomplish a diverse range of tasks such as adding new components, collecting payment, using an external database and much more.

Chapter 10, Testing and Debugging Strategies, In this chapter readers will learn about existing features inside Bubble that allow them to test and debug their applications. They will also learn other methods and ways to test and debug their application, including various types of tools and user testing. This is a practical guide to testing and debugging your application effectively. By mastering these techniques, they will be equipped to identify and resolve issues, ensuring a seamless user experience and application performance.

Chapter 11, Deploying and Launching Your App (Publishing), In this chapter, readers will learn how to deploy and launch their application in a practical way. They will learn about the deployment process, from thorough preparation to the actual launch, with a practical checklist ensuring a seamless and successful deployment experience. By the end of this chapter, they will be equipped with the necessary skills to confidently navigate the deployment process, including revising, previewing, and testing their app. Additionally, they will learn how to set up a custom domain and effectively launch your app to the public, making it accessible to users worldwide.

Chapter 12, Monitoring, Maintenance, and Updates (Apps Governance), This chapter will teach about app management, focusing on monitoring, maintenance, and updates to ensure the optimal performance of an existing application. It will cover Workload Units (WUs) and explain how these metrics quantify resource utilization and impact operational costs. Readers will also learn about version control, updates, and app governance, vital for effective management of no-code applications. Monitoring app performance and user analytics, alongside addressing maintenance and user feedback, will be emphasized to ensure sustained success post-deployment. By the end of this chapter, readers will be equipped with the knowledge and tools to effectively manage and optimize your app for long-term success.

Chapter 13, Optimizing Performance and Scalability, The reader will learn about performance and optimization and how to improve the application as the user base starts to grow. The chapter covers tips on how to improve the app’s overall performance, scalability, and the user experience. It will cover some of the best practices and provide advice for efficient app design, performance and scalability covering strategies to handle databases, workflows and creating interfaces that resonate with users and provide a pleasant experience which also impacts on the perceived performance of your application.

In this book we covered essential topics for you to learn Bubble and get started in your no-code journey building digital applications in a visual way. We also covered about project planning, user experience, performance and optimization. Finally, life cycle management concerns particular to Premium capacity features were explored.

This book has been all about how to enable you to enter the no-code universe and start building your own app ideas on your own. We hope you have enjoyed this book and are now confident in how to apply this knowledge to build amazing digital applications with no-code. Welcome to the No-Code space, welcome to the no-code revolution!

In this book, you’ve entered the world of Bubble and no-code development, learning the essential knowledge and skills to embark on your no-code journey with confidence. We’ve started with the basics of the Bubble, guiding you through the possibilities and examples until the creation of your first account and project. You also learned about interfaces, layout and style techniques for crafting responsive and visually appealing applications, this book has equipped you with the skills needed to understand the foundations about design and how to manipulate layouts effectively. You’ve learned how to enhance front-end functionality by implementing conditionals and logic to manipulate elements dynamically, ensuring an engaging user experience. Additionally, you’ve gained insights into managing databases securely, controlling access to public and private data to safeguard sensitive information.

We’ve explored backend functionality and workflows to automate processes and streamline operations. Furthermore, you’ve explored the integration of APIs, learning how to seamlessly connect Bubble with third-party services to extend the capabilities of your applications. You’ve uncovered basic tips and strategies to enhance the performance of your apps, ensuring smooth and efficient operation even under heavy usage. From minimizing load times to optimizing database queries, you now have the tools to create high-performing applications that deliver a seamless user experience.

In addition to these core topics, you’ve also gained insights into project planning, user experience design, and project management. By covering a wide range of essential topics, we’ve provided you with a comprehensive foundation to kickstart your journey in building digital applications visually using Bubble and No-Code.

This book is about much more than just learning Bubble. It’s about empowering you to unleash your creativity, turn your ideas into reality, and make a meaningful impact in the digital landscape. It is about the democratization that comes with no-code and tools like Bubble, allowing non-technical and technical people to work faster and more effectively building software that can help other people and solve real problems. We’ve provided practical guidance, step-by-step instructions, and valuable insights to help you navigate the complexities of app development with ease.

To get the most out of this book

Create a Bubble account. The free plan will work for beginners. If you wish to publish your app and test premium features, an upgrade is recommended.

Read the book and put learnings into practice, your actual learning will come from using the tool, so make sure you apply the knowledge in a practical way.

Research more about topics and subjects you are interested in. Bubble is a big and complex tool, it would be very hard to cover everything needed in a single book, so it is recommended you keep learning as you go and search for more content during your no-code learning journey.

Bubble is a web tool that runs on your browser. You won’t need to install anything on your computer or update it. To use it, simply go to their website https://bubble.io and create an account, log in and start building. Updates will happen automatically, you won’t need to do anything, unless the Bubble team does tell you to do anything to update your app. You also won’t need to save your app and work in progress when using the editor, changes are automatically saved, just make sure you are online.

To use Bubble all you need is an account, a simple computer and internet connection, that’s it.

Software/hardware covered in the book

Operating system requirements

Bubble

Windows, macOS, or Linux

Google Chrome

Windows, macOS, or Linux

Disclaimer:

Please note that all screenshots from this book are taken at the time of writing. They may vary due to updates made to the Bubble interface.

Conventions used

Bold: Indicates a new term, an important word, or words that you see onscreen. For instance, words in menus or dialog boxes appear in bold. Here is an example: "You can also check the My Templates item under your account."

Tips or important notes

Appear like this.

Get in touch

Feedback from our readers is always welcome.

General feedback: If you have questions about any aspect of this book, email us at [email protected] and mention the book title in the subject of your message.

Errata: Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book, we would be grateful if you would report this to us. Please visit www.packtpub.com/support/errata and fill in the form.

Piracy: If you come across any illegal copies of our works in any form on the internet, we would be grateful if you would provide us with the location address or website name. Please contact us at [email protected] with a link to the material.

If you are interested in becoming an author: If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, please visit authors.packtpub.com.

Share Your Thoughts

Once you’ve read Democratizing No-Code Application Development with Bubble.io, we’d love to hear your thoughts! Please click here to go straight to the Amazon review page for this book and share your feedback.

Your review is important to us and the tech community and will help us make sure we’re delivering excellent quality content.

Download a free PDF copy of this book

Thanks for purchasing this book!

Do you like to read on the go but are unable to carry your print books everywhere?

Is your e-book purchase not compatible with the device of your choice?

Don’t worry!, Now with every Packt book, you get a DRM-free PDF version of that book at no cost.

Read anywhere, any place, on any device. Search, copy, and paste code from your favorite technical books directly into your application.

The perks don’t stop there, you can get exclusive access to discounts, newsletters, and great free content in your inbox daily

Follow these simple steps to get the benefits:

Scan the QR code or visit the following link:

https://packt.link/free-ebook/9781804610947

Submit your proof of purchase.That’s it! We’ll send your free PDF and other benefits to your email directly.

1

Getting Started with Bubble.io – Exploring Bubble’s Features

Welcome to the No-Code Revolution! This is an exciting change in the software development industry that will empower and allow more individuals to be able to build software, without having to learn how to code and without becoming traditional developers. Bubble is one of the most powerful no-code platforms available on the market, and one of the most popular as well, with millions of users already using it.

In this book, you are going to learn the fundamentals of this amazing tool, and with the power of no-code, I am sure you will also be able to build web apps visually, without learning how to code.

In this chapter, you will start by learning what Bubble is and how to set up your first account. You are also going to learn Bubble’s main features and how to navigate inside the visual editor. With this essential knowledge, you will be ready to dive into the following chapters and learn how to apply the powerful features available inside Bubble.

This chapter consists of the following knowledge:

What Bubble is and important information about the toolWhat you can build with Bubble – examplesHow to practically set up an account and your project workspaceUnderstand the Bubble editor and how to navigate the interface

Introduction to the Bubble.io platform

Bubble is a powerful, robust, and flexible platform that enables anyone to build web applications visually, meaning you can learn how to use it and build software without learning how to code or spending years trying to become a developer.

The no-code revolution is empowering people around the globe and democratizing software development by giving its users the ability to quickly learn and build digital applications in a simplified way.

Start-up founders, entrepreneurs, employees, individuals, and organizations can utilize the power of no-code tools such as Bubble to save time and money while developing powerful web applications visually, without having to learn code, and that is a meaningful change in the software industry.

Founded in 2012, Bubble is an all-in-one, multi-purpose tool that acts as a visual programming tool and a cloud platform. This means you can use it not only to build your application visually, but can also put it to work hosting and deploying your application to the web, so you don’t have to deal with hosting and infrastructure to run your application somewhere else. You can use Bubble for creating applications, while the cloud platform hosts and operates them. You design, construct, manage, and expand your app through the application editor, accessible directly in your browser without any downloads. Bubble runs on the web, and you use it in your browser window. It automatically saves your work as you build – all you have to do to use it is to be online. Once an app is built on Bubble, it resides in Bubble’s cloud infrastructure, accessible from anywhere.

Bubble empowers you to craft web applications accessible via browsers on computers, tablets, and phones. These applications feature a database, enabling users to register, store, retrieve, and modify data. Bubble’s versatile editor is open-ended, akin to traditional programming languages—there’s no predefined limit to what you can achieve. By combining diverse data and logic operations, you can create applications ranging from basic to intricate. The key capabilities of Bubble are as follows:

Establishinguser accountsManaging data (saving, editing, deleting, and retrieving it)Real-time updatesIntegration with various external services through APIs (such as payments, data sources, and authentication providers)Crafting responsive apps that adapt to screen sizes

Here are some examples of what you can build with Bubble:

Web apps: Create interactive and dynamic web applications for a wide range of purposesSocial networks: Build your own social networking platform with features such as user profiles, posts, comments, and connectionsMarketplaces: Develop online marketplaces where users can buy and sell products or servicesCRM systems: Design custom customer relationship management (CRM) systems to manage contacts, sales, and interactionsProject management tools: Craft tools for organizing tasks, projects, and teams, with features including task lists, timelines, and collaborationE-commerce platforms: Build online stores with product listings, shopping carts, payment gateways, and order managementBooking and scheduling apps: Create appointment booking systems, event calendars, and scheduling toolsEducational platforms: Develop e-learning platforms with courses, quizzes, progress tracking, and user engagement featuresContent sharing platforms: Build platforms for sharing articles, videos, images, and other multimedia contentJob boards: Create platforms for posting job listings, connecting job seekers with employers, and managing applicationsReal estate websites: Develop property listing websites with search filters, property details, and contact formsHealthcare applications: Build apps for managing patient records, scheduling appointments, and medical information sharingFinancial tools: Design budgeting apps, expense trackers, investment calculators, and financial management toolsCommunity forums: Develop online discussion forums with threads, replies, user profiles, and moderation featuresMembership sites: Create platforms for offering exclusive content, courses, and resources to membersCrowdfunding platforms: Build websites for crowdfunding campaigns, donations, and fundraising projectsTravel and booking websites: Develop platforms for booking flights, hotels, tours, and travel packagesEvent management apps: Create tools for planning, promoting, and managing events, conferences, and seminarsAnalytics dashboards: Design data visualization dashboards to display and analyze metrics and insightsCustom business tools: Develop tailor-made solutions for specific business needs, such as inventory management, employee tracking, and more

For the healthcare sector and other types of applications that require a HIPPA-compliant database or might store user’s sensitive information, it is important to note that Bubble’s internal database isn’t recommended. If you plan to build such apps, it is advised to use an external database service that follows the guidelines and data protection laws of the countries that your app will serve.

There are several compelling reasons to invest your time and effort in learning Bubble. Firstly, it eliminates the need for coding expertise, allowing you to create sophisticated web applications through a visual interface. This accelerates your learning curve and democratizes app development, making it accessible to a broader audience.

Secondly, Bubble’s rapid prototyping capabilities enable you to swiftly test and refine your app concepts, saving valuable time during the development process. Moreover, Bubble’s cost-efficiency is noteworthy, particularly for startups and small businesses with limited budgets, as it reduces the need for expensive development resources. Beyond financial benefits, mastering Bubble empowers you with autonomy over your app’s creation, modification, and maintenance. This independence fosters innovation and empowers you to explore creative and entrepreneurial pursuits. The versatility of Bubble stands out, allowing you to craft a diverse range of applications tailored to your goals.

With a supportive community and regular updates, Bubble ensures you’re equipped with the latest tools and practices in app development. Whether you’re aiming to prototype MVPs, launch startups, or explore new career avenues, learning Bubble equips you with a unique skill set that holds significant potential in today’s digital landscape.

Setting up an account and project workspace

To start leveraging the power of no-code, all you have to do is create your first account for free on Bubble’s website:

Your first step is to access the website (https://www.bubble.io) and click the Get started button.

Figure 1.1: Bubble.io home page – the Get started button

To create your account, just fill out the form by adding your email and password. If you prefer, you can also sign up using your Google account (Gmail) if you have one.

Figure 1.2: Bubble.io sign-up page

Follow the onboarding steps to complete your account profile information. These steps include a little survey to help Bubble understand more about you and your goals. The answers you choose here won’t impact anything in your account.Just keep clicking until the entire onboarding is done.

Note:

These steps might change overtime, and it is expected, if the interface you see is different from the book, just continue the onboarding process until you get to the end and access your account. This part won't be difficult.

Figure 1.3: Bubble.io sign-up onboarding – step 1

Simply keep answering the questions to continue.

Figure 1.4: Bubble.io sign-up onboarding – step 2

Continue clicking the options that fit your profile the best.

Figure 1.5: Bubble.io sign-up onboarding – step 3

Choose an option shown in the following screenshot and continue.

Figure 1.6: Bubble.io sign-up onboarding – step 4

After completing the onboarding process, it is important to check your email inbox, as you should have received a confirmation email. If you can’t see it, you can wait a couple more minutes (sometimes there is a delay) or check your promotional and spam folders to see if the email is there. If you still can’t find it, you can click on the button to resend this confirmation email. If this still doesn’t work, check that you entered the correct email or contact support for help.

You must open this email and click to confirm your account because this will unlock the next steps so you can start using Bubble. Once you click the email link, you will be sent to a Thank You page. You can close it and go back to the initial tab you were before you entered your email. You will notice the confirmation message will go away, unlocking you to continue with the next step.

Figure 1.7: Bubble.io onboarding – email confirmation

Once your email is confirmed Bubble will allow you to create your first project. To create a new project you can simply click the Start building button. But there is also an option that helps you build your project for the first time, with help of AI. You can type in the field a simple description of your app idea, which is optional, if you do fill out the field, it will generate your app and send you to a page with a few guidelines and tutorials on how to create your desired project.

Note that this feature might change overtime. For now I would recommend starting with an empty project, you can explore these AI features later while creating new projects. For the first one just click the Start building button and move forward.

Figure 1.8: Bubble.io – Create the first project

Another way to start a project is by choosing a template, but we will cover more on that later.

Congratulations! At this point, you have successfully created your account. You also completed the onboarding process and started creating your very first application from scratch. Now it is time to dive deeper into how Bubble works and start configuring your app visually. In the next section you are going to learn about the application setup helper called application assistant. Let's go!

New project setup – application assistant

Every time you create a new project inside Bubble, you will be asked to set up this project for the very first time. This is the application assistant. Bubble will show the get started steps and ask you a few questions to make sure you have your initial settings ready to go. This process is helpful but can also be skipped. All the little details and settings you will be asked to define during these steps can also be found inside Bubble later, so if you skip them, you can always go back and change them later. Let’s take a look at how the getting startedsteps appear.

Step 1 – favicon and application name

The first step will ask you to upload a favicon for your application. A favicon is a little icon, an image, that shows at the top of your browser window. Each page on your browser has a tab and each tab has an icon – this is the favicon. The image you upload here to Bubble will be used as a favicon for your application and users will associate this image with navigating your web app. My recommendation is that you upload an image of 16x16 pixels in size and in .png format to be used as your favicon. The second thing Bubble will ask for is your application name. If you don’t have one yet, just add something and change it later.

Note that on the right side, Bubble is going to show an example of how your favicon and your app name will look on the browser tab.

Figure 1.9: Bubble.io – application assistant – step 1

Now, of course, if you don’t want to continue answering these questions and want to just jump straight into the project, you can click the Skip application assistant button. Feel free to do so.

Step 2 – default font

Now Bubble will ask you to pick your project’s default font. This is the primary font of your application, meaning it will be visible in texts, buttons, and so on. You can also use more fonts in the future and change the primary font as well. At this point, you can choose one option from the list provided by clicking the dropdown or just pick the default and continue to the next step.

Figure 1.10: Bubble.io – application assistant – step 2

Once you pick an option Bubble will show an example layout on the right side with the selected font so you can have an idea of how it will look.

Step 3 – default colors

During this step, you can define a few colors that will be used on your application including the Primary color, Primary contrast, Text color, Surface, Background, Destructive, Success, and Alert. Again, you can change the colors and see how they appear on the right side. Use the color picker by clicking an existing color or specify your own hex codes if you already have your own specific brand colors. If you don’t know much about design, just use the default colors and change these later.

Figure 1.11: Bubble.io – application assistant – step 3

Once you are done configuring your colors, you can preview how it looks on the right side. If you are happy with your colors just click the Next step button to continue.

Step 4 – choosing plugins

Bubble has a lot of plugins you can install in your application to have extra features available for building amazing projects. These are like superpowers that let you build beyond what Bubble is capable of by itself. This step lets you pick plugins from a list visible on the right side, so you can save time by adding some plugins at the very beginning. If you wish to install a plugin, just click the Install now button. If you don’t see a plugin you need on this list, you can click the Browse all plugins button, find the one you need, and install it that way.

If you know a specific plugin and know you are going to need it, this can be the perfect moment to install it. If you don’t have any idea of what plugins you will use, I recommend you just skip this step and install plugins later as required. Remember, you can always go back to the plugins page to install or remove plugins.

Figure 1.12: Bubble.io – application assistant – step 4

Once you are done with this step, click the Get started building button to finish the application assistant process.

Finishing the application assistant

At this point, you have created your very first project and configured the initial settings using the application assistant. Next, Bubble will take you to your project and show you the Bubble editor.

Figure 1.13: Bubble.io – the Bubble editor with a guided tour

Note that Bubble will continue to help you understand how the tool works by giving you a guided tour showing you around, what is what, and where things are. Following the tour is optional by clicking the blue buttons or you can choose to skip it. Your project has now been created and is ready to go, so you can start building! In the next sections, you will learn the essentials of the Bubble editor so you know where things are and how to navigate the tool.

With your account and project created, you now have the foundation to start building with Bubble. If you exit the project you just created, you will see your account workspace (dashboard) with all your projects side by side. To do that, just click the Bubble logo on the left-top corner of the page.

Here is an example of what your account and projects list looks like:

Figure 1.14: Bubble.io – your account and projects

This area is where you can visualize all the projects created under your account. We will cover it in greater detail in the next sections.

Navigating the Bubble.io interface

When using Bubble, your application will be developed inside the Bubble editor, so it is important that you get familiar with the main areas of the tool.

The editor is composed of a set of tools that allow you to access parts of your application, show/hide features, configure preferences, and define how your application should work. Let’s discover the main areas of the Bubble editor.

The following screenshot shows the Bubble editor, where you build your applications visually.

Figure 1.15: Bubble.io – the Bubble editor

The editor is composed of various areas. This big main area at the center is the canvas, where you will build your page layouts. You are going to use it a lot, but it is also important to know the other little parts of the editor and how to navigate to different areas using menus and tabs, so let’s dive right in.

1 – the top bar

The top bar is a very important part of your editor and is always visible. From here you can go back to your account’s projects, access the current project pages, configure visibility options to customize Bubble to your preferences, check that your project was saved, if there are any errors, and much more. One of the key features in the top bar is the preview button that allows you to visualize how your application looks in a new window.

Figure 1.16: Bubble.io – Bubble editor – top bar

2 – the sidebar

The sidebar is where you can find navigation tabs to access areas beyond the editor, such as workflows, data, styles, plugins, and more. At the top of the sidebar, you can also access responsive features, toggle your page to responsive mode, and visualize your page layers and components tree. It also shows all the components available for you to build your application, another very important part of the Bubble editor. The components sidebar is organized by categories. In each category, you can find specific components to be used to build your pages. All the components are drag and drop so you can easily select them and add them to the page. You will use the sidebar throughout your entire project build.

Figure 1.17: Bubble.io – Bubble editor – Sidebar

3 – the page

Inside the page is where you build your application layout by adding components and configuring their actions. If you were a painter, this would be your canvas. The page is a blank space where you will build your app’s interface, the frontend part of your application. The cool part of using no-code is that you build things visually; you don’t need to type code and then render the code to view the result. What you add on the screen and see as your page layout and design on that page is exactly what your users will see too. This is a much more creative, visual, and interactive way to build apps. As you may already have noticed, the page (canvas) is the heart of your application inside your Bubble editor.

Figure 1.18 Bubble.io – Bubble editor – Page

Besides page, we can also call it the canvas, visual editor, or visual builder. When you are building your project inside the Bubble editor, you will see some things that your users won’t see, such as guidelines and extra information that help you understand your layout structure. That is normal because you are visualizing your page as the builder, not the user at this moment. To view it as a user, click the preview button in the top bar to open your project in a new window. When you go to preview mode, the Bubble interface will no longer be there, so you will be able to navigate on that specific page as if a user was actually opening your application from their browser. By using the preview mode you get a more authentic navigation experience of that page, without the view of the editor getting in the way.

It is also common to have components not being clickable or not loading dynamic content inside the editor. Likewise, when you preview the page, it will load the components and make static components work, buttons will be clickable, and dynamic features and data from the database will function normally. So keep this in mind: the editor and page area are used to build, not navigate or test the application. The preview option is used to navigate and test the application.

4 – the property editor

The property editor is a floating panel that is used to configure your components. It can also be fixed on the right side of your editor if you prefer. You can do this by clicking the View item at the top bar and checking the Lock property editor option. The property editor is a contextual component, meaning you will see information about the component you are selecting. For instance, if no component is selected, the page is treated as the primary target and is automatically selected, so in this case, the property editor will show the features and settings you can edit that are related to that page. If you add a button to the page and you are currently selecting that button, the property editor will automatically adjust and show the features and settings related to that specific button, and this will keep happening during your application-building process. Basically, the property editor exposes the settings of any component you want to configure and will show you all the options you have available to make that component work as you wish. Let’s see this in action in the following screenshot:

Figure 1.19: Bubble.io – Bubble editor – property editor

The property editor has a top bar where you will find the component name. Clicking this allows you to rename the component. On the right side, there are a few icons. The video icon displays a quick video explaining a bit more about the component you are using. The i icon shows more information about this element, and you can also access custom state settings there. The speech bubble icon is the notes area, which allows you to add custom notes to your component. This can be useful when collaborating with other people on Bubble or to just help you remember things in the future.

The second part of the property editor is the tabs. There are three tabs available that display different types of settings: Appearance, Layout, and Conditional. When you select an element, the property editor will appear and you can navigate through these tabs to access different areas and settings available for you to edit.

Figure 1.20: Bubble.io – Bubble editor – property editor tabs

Under the Appearance