If you are building a complex application and want to add some advanced features to it, then you have come to the right place. The advanced guide will show you how to build complex features in your application using Bubble app builder.
This is part 2 of a 3-part guide that covers building apps with Bubble. Wondering how build an app, how app development works on Bubble, or how you can create complex features and functions in your Bubble app without having to write code? Then let us begin!
We will be going over four complex features that are integral to building great apps. These are:
- Working with and managing user data
- Creating localized and multilingual apps
- Using dynamic data in your applications
- Making your applications perfectly responsive
When you get the hang of these four, you will be creating powerful apps that look premium and work well.
Working with and managing data: How app development creates personal experiences
Data management is one of the most important things in modern apps. This is how app development works. Without data, your app will have nothing. Knowing how to work with the data, manage it, and manipulate it is integral to the success of your app and is also a prerequisite to a bunch of other features.
Working with data and managing data while creating an app using Bubble app builder can be a little daunting at first. But it is nothing to fear.
Data is used to store information about your users, such as their names or birthdays, or even images from their camera roll. So, how build an app that uses data submitted by the user? Using input forms. And how do you manage that data?
- All the data that your users have entered can be seen in the App Data Section in the Data Tab.
- This database has a few key tools that you can use to effectively manage the data and perform certain actions on it.
- You can choose which fields are shown in the current view, sort the data, or apply search constraints to filter out or keep specific entries.
- You can use the Run As tool to view the application as a user. This is how you can do debugging as a particular user. You will need to log out to enter development mode again.
- If you have a lot of data fields and you are only interested in a few for now, you can use the “New View” option to create a database with only relevant data columns to help you do your thing better.
- Other processes include setting up primary fields, searching, adding new entries, uploading data, modifying data, exporting data, cleaning up data, and so on. All of these are self-evident processes and you can manage your data using these backend tools.
When you build an app with Bubble, it is not just about building the screen. It is about building a complete experience for your users. And quite rightly, sometimes it is hard to know how to get started with complex features like data management. But Bubble makes it all so much easier.
Data is a very important part of any application. This is where you can store your data and use it for various features of your app. Bubble is a powerful tool that allows you to manage this data in the best way possible.
Live and Development versions of the app will have separate databases. Switching between the two is how app development in Bubble can bear good results.
How to create multilingual apps in Bubble?
So, do you wish to know how build an app that is localized or multilingual?
Localizing an app is the best way to ensure that an international app meets success. You can set up a LocalizeJS account to get started. LocalizeJS is essentially a free translation service that accepts over 100 languages. Just set it all up, connect to your Bubble app, and voila!
Doing things manually is a little bit more time-consuming but can be exactly what you need in some cases, such as when the translation results for a less-used language are less than good.
- Sign in to your Bubble account and open your project. If you are still unsure about how build an app, check our part 1 guide first.
- Click on Settings and select Multilingual from the list of tabs on the left side of the screen.
- Check the box next to Enable Multilingual and click on Save & Close button at the bottom of the page.
- The next step is to add translation files for each language that you want to support in your application (English is already selected as default). In order to do that click on Add Translation File button and choose one of the supported languages from the drop-down list (you can find all available languages in the Translation tab).
- After adding all required files, click on Add Another Translation File button again and repeat the previous steps until all required languages are added to your project (note that there is also a possibility to change existing translations or delete them if needed).
The ability to create multilingual apps is a feature that Bubble users have been asking for since the beginning of time. The good news is that Bubble has finally got you covered!
Bubble makes it easy to create multilingual apps by letting you add multiple translations of every element in an app. This means that you do not have to add all these elements manually — they are already there! All you need to do is pick the right translation based on the user’s location or language preferences.
Multilingual apps are just like any other app you build in Bubble, except that they support multiple languages. How build an app that is localized for the user’s region? The best way is to hook up everything from the text language to the currency indicator to regional variations.
Bubble has different features that when used together allow you to build truly localized applications for the best results. This is how app development can personify your app. These include:
- Local currency (such as USD, yen, pound, etc.) and local units (such as for weight, temperature, etc.)
- Localization, or l10n, allows you to display your content in different languages and locales
- Different images for different users (to better display ethnic variations)
- Internationalization, or i18n, allows you to create resources that are appropriate for different languages and locales (regions)
Lastly, the Bubble API lets you code directly in the platform instead of using their drag-and-drop tools, so you can do more advanced stuff like integrate with third-party APIs for payment processing or geolocation services.
Using these functions is how app development makes perfect apps this is also how build an app properly in Bubble.
How to use dynamic content in Bubble?
When anybody asks how app development has become the determining force behind the success of modern platforms from social media apps to professional networking apps and even games – the answer can be very varied, but one constant will be dynamic content.
Dynamic content is a feature that allows you to change the contents of your app without having to update the app itself. For example, if you have a restaurant booking app and you want to add more restaurants or make changes to existing ones, you do not have to publish it again. All you need is some simple code additions in your existing app and then click publish again. This saves both time and effort in updating your apps regularly.
Dynamic content has always been an integral part of modern app development in different forms. It can mean:
- Something as simple as updating certain pieces of information in an app automatically by fetching new data from a central repository, resource, server, or another app/website, or
- Something as complex as a platform that allows users to register as service providers and add their details such as rates, hours, location, etc. which update in real time for the customer-facing app.
Let us explore how to use dynamic content while creating an app using Bubble App Builder.
Bubble has introduced a new feature called “Dynamic Content” which allows us to do so. It works by generating a page with dynamic content in it and then replacing it with another page with new or updated data whenever the user clicks the refresh button on their screen (or any other method).
Using it is simple. Whenever you add a new text element, for example, instead of “static,” use “Insert dynamic data.” Here, you can define what dynamic data will be used. For example, a common line can be:
Hello there, [user’s first name]
Here, the “user’s first name” expression is the dynamic bit that will pull information from the backend and replace that string with the actual first name of the user. This allows you to personalize user experience and do a lot more when you finally understand dynamic data’s capabilities.
Some important points regarding dynamic data and how app development in Bubble can leverage it:
- Dynamic content is the ability to use a different image, video, or text in your app based on user input. For example, if you want to show different information for each user (e.g., “Hello” vs. “Hey there!”), you can do so with dynamic content.
- Dynamic content is also used to display different information based on the app’s current state and/or event. For example, if a user clicks a button, it might display a different message than if they hover over the same button.
- Dynamic content in Bubble requires you to write expressions that will be rendered in the run-mode segment by segment.
- You also need to have a working knowledge of webhooks if you wish to accomplish more complex dynamic content applications.
Bubble lets you create apps quickly and easily without any coding knowledge. But if your app needs more advanced features, such as real-time notifications or personalized content, then you will need to use the Webhooks feature in Bubble.
So, what is a webhook, and how app development in Bubble realizes them?
A webhook is a way of connecting one system (e.g., an app) with another system (e.g., a server). It works by sending data through HTTP requests and responses like GET, POST, PUT, DELETE requests. This means that we can use GET requests for fetching data from our server and POST requests for sending data back to our server when the user interacts with our app (e.g., clicks on an item in their feed).
Using Bubble’s Responsive Engine the right way: How build an app that looks good across screens?
Bubble’s Responsive Engine is a state-of-the-art responsiveness toolkit for modern web apps that allows users to create applications that adapt gracefully to different screen sizes. Note that this framework is still in Beta and changes can be expected. So, how build an app that is responsive? Well, Bubble’s take on how app development treats responsiveness is a little different and better.
Bubble allows you to build responsive web apps using some key components. We will take a look at each of them.
Container layout types
Bubble’s container layout types make no code app development much easier and naturally responsive. These are the layout types:
- Fixed Containers: The fixed layout defines the absolute position of the elements included inside it. This is one of the ways no code app development can still utilize some of the most powerful features of coded development. Fixed containers allow you to specify exactly where they will appear across screens and during scroll – continuously.
- Align to Parent: Another way how app development makes the lives of business owners easier is by this nifty tool you have in Bubble. Align to Parent is great for people with no grasp on how fundamental containers work and interact with each other – meaning an unsuspecting business owner who simply wishes to publish an app without having to struggle with advanced positioning concepts. This feature allows you to position child elements by aligning them to the position of their parent element – all with a single click!
- Rows and Columns: Rows and columns are key to responsive application development. Both are technically the same thing as they both use the flexbox property in CSS, they are fluid containers that can either wrap elements horizontally or vertically depending on the screen width. This is central to how app development allows creators to build applications that adapt to look great on all types of screens.
So, how app development can be used correctly in Bubble to build responsive apps? Use all three features in abundance!
Margins and paddings
Margins and paddings are both integral to coding good elements, and they have also been critical to how build an app with Bubble and how app development works in general.
To understand margins and paddings, you first need to understand borders. Every element has a border. It will be invisible in the majority of cases, but it is always there. Think of a rectangle – its edges are its borders. In an app or website, everything has rectangular borders, even circles, and images.
So, in every case, there are four borders to the element. You can toggle borders on or off, change their color, increase and decrease their thickness, and change their color or transparency. By default, any new item you create in Bubble or while coding has a 0-pixel thick border – meaning none, but the edges themselves are where the border will appear if you choose to do so.
- Margins are the spaces (top, right, bottom, and left) beyond the rectangular borders of an element.
- Paddings are the spaces (top, right, bottom, and left) within the rectangular borders of an element.
If you have two rectangles side by side, both with an image inside them, here is what will happen:
- If you increase the margins of the elements, the space between the elements will grow.
- If you increase the paddings of the elements, they will remain to be the same way, but the space inside the edges/borders of the element will grow – meaning the distance between the image inside the rectangle and the rectangle’s border will grow.
Knowing good margins and paddings for every situation takes time. Once you do, you can use Bubble’s powerful margins and paddings to create elements that are perfectly spaced out.
Repeating groups
Repeating groups allow you to play around with the different container layout types more freely and responsively. When Bubble first started, you could already create repeating groups such as full lists or vertical scrolling elements – now they are also all 100% responsive and screen-adaptive!
Shared controls
How build an app with shared controls? Well, as it turns out, you do not need to know how app development works to do this. Shared controls are a nifty tool built right into Bubble! This completely changes how app development is seen by non-developers.
