• Introduction
• Best practices
• Data structure
• Error Log
• Uploaded_Image
• User
• Conversation (chat)
• Messages (chat)
• Notification
• Place
• Styles
• Pages
• Index (main app page)
• Elements
• Conditional and Backend Workflows (Workflows not triggered by element clicks)
• videofeed (TikTok-like video feed)
• Manging the iOS status bar
• Use of fontawesome icons
• Managing different screen heights
• Converting your bubble app to a hybrid iOS or Android app and submitting it to the app stores
• Backend workflows
• Contact

Introduction

• Welcome screen, signup / login
• App navigation bar
• Onboarding flow
• Dark mode
• Swipe to delete workflows
• Native share (bubble plugin)
• Various components ('building blocks') incl. controls, inputs, groups, etc.
• Predefined styles
• Chat function
• Settings page
• and much more

Best practices

• Use the 'Elements tree' in the Bubble editor to access groups and elements(make sure the ‘Only show hideable’ is unchecked):


From there, you can select an element and then check the ‘Conditional’ tab to see when an element is visible:


• Use copy & past with workflows for copying predefined elements when ever possible

• Avoid setting the layout of individual elements when ever possible and use predefined styles instead. This makes adjusting an app much easier once it gets complex. You can either
• Use 'Edit style' and edit the style for all elements that use it:

• or apply conditions on the respective element (i.e. use a condition that is always true, e.g. when index is visible, then text alignment is center):

• Most groups use padding and gap spacing
• Padding left, right, top: 20px
• Padding bottom 85px for most groups to make sure no content is hidden behind the bottom navigation bar
• Gap spacing is usually 20px

Data structure

Error Log

Uploaded_Image

User

• active day (List of dates): Every time the page is loaded, the current date is added to the list. This can be used to track how active your users are. This is simply included as best practice - the template makes no use of this data field.
• Dark mode on (yes / no): This tracks whether the user the user views the page in normal or dark mode. The dark mode conditions are referring to this entry (not the toggles used to turn the dark mode on or off).
• auto darkmode detection: if yes, the app will detect if the device is on dark mode on page load and set the darkmode accordingly.
• favorite images (List of Uploaded_Images): An image is added to the list if the user selects it as a favorite by clicking the heart icon on an image in the image gallery.
• is_admin (yes / no): This can be used to manage user rights (e.g. only make certain elements visible to admins). This is simply included as best practice - the template makes no use of this data field.
• profile image: a users profile image

Conversation (chat)

• the users associated with a chat conversation
• users that have unread messages in this conversation

Messages (chat)

• the conversation the message belongs to
• the message itself
• a file, if a file was sent instead of a text

Notification

• notification text: the notification text
• unread by (user): add users here when you want to show them the 'new notification' indicator (small red dot)
• related user: Add if the notification relates to an other user

Place

• Name, Description, Picture: Place specific data
• Address: The address, using the geo address format (https://stackoverflow.com/questions/7764244/correct-address-format-to-get-the-most-accurate-results-from-google-geocoding-ap#:~:text=The maps autocompletion API from,lead to one exact result.)
• The map controls are hidden using the CSS code in HTML map controls and adding a CSS class to the map {addClass: "dynamic-height"}

Styles

Pages

1. index: This is the main page of the app that hosts all the building blocks.
2. terms: this is an empty placeholder page for your terms of use
3. privacy: this is an empty placeholder page for your privacy policy

1. index_old_responsive_engine

Index (main app page)

Elements

• View 3: Home: Once the page is loaded (and the user is logged in), this view is visible.
• View 4: UI / UX Components: This view contains three additional sub-views, controlled by 'Group tabs' These subviews provide various UI elements you can use to build your application.
• Group UX / UI: Contains a list of various UX elements and workflows to show them
• Group Inputs: Contains example inputs
• Group RepeatingGroups: Contains two types of repeating groups and ways for the user to interact with them.

• View 5: Chat: A fully functional chat (see below)
• View 6: Picture Gallery: This view provides two options for a picture gallery, incl. workflows for view an image in full size, adding and removing an image to the user's favorites and deleting an image.

• View 0: Splash screen: can be shown during page load to present your logo
• View 1: Landing: What the users sees when not logged in. This group has elements and workflows for user signup and login

• View 7 Settings: An example settings page
• View 8: Notifications: Used to show notifications to the users
• View 9 :Onboarding: This is a 5-step onboarding flow you can use to onboard your users
• View 10: Paywall: An exemplary paywall to offer in-app subscriptions in a native app, e.g. using the BDK plugin and service (or offering stripe subscriptions in a web app). Please note, this paywall does not offer any in-app subscription functionality as such, it is only a potential way implementing the UI.
• View 11: Map and Places: An example setup of a full-page map with a repeating group displaying places.
• View 12: Image Detail: Used to show an image full screen when clicked on in image gallery.

• View 5: Chat: The main chat window
• FloatingGroup chat navbar: used to navigate in the chat
• FloatingGroup chat input: used to type new messages
• FloatingGroup chat scroll down: Used to scroll to latest message

• An example of how you can display and search for places on a google map using geographic addresses.
• if a marker is clicked on the map, the RG is scrolled to the respective entry
• if an entry is clicked in the RG, the map zooms in on the marker

• FloatingGroup image filter: Used to filter the image galleries. FloatingGroup overlay is visible when the image filter is visible
• FloatingGroup Picture uploader: Is used to add picture to the picture gallery
• FloatingGroup add to homescreen: this can be used to prompt the user to add the app to their homescreen to behave like a PWA (progressive web app)
• FloatingGroup add to homescreen: This is a visual element prompting the user to add the app to their home screen for a better experience
• Popup Forgot Password: Contains elements and workflows to reset the user password
• Popup Loading Screen: A predefined popup that can be used while the application is loading (e.g. include workflow steps to show the popup in the beginning of a workflow and hide it at the end of a workflow. In case of a workflow error, the Loading Screen is hidden automatically)
• Popup Alert: A predefined popup to interact with the user
• Popup about, Popup contents: popups used to explain the template
• Group Plugins and HTML
• HTML A: is used for some CSS code to manage the height of the landing page and other groups. Also provides CSS syles for popups as well as glassmorphism effects
• HTML B - Body Background for status bar: dynamically set the body color of the website. This is useful if the app is added to the users home screen as a PWA on iOS with a transparent status bar (see status bar settings below)
• CSS tools A: Used to get screen height to hide and collapse spacer elements
• ThemeDetector A: Used to detect if the users device has dark mode active

Conditional and Backend Workflows (Workflows not triggered by element clicks)

• Page is loaded: Prepare the view when page is loaded.
• An unhandled error occurs: Removes the loading screen and creates a thing of type 'Error log' when an unhandled workflow error occurs (e.g. an API call returns an error).
• Do when PictureUploader is loading: shows the loading screen when the upload is started.
• PictureUploader's value is changed: Creates a new thing when the value of the picture uploader is changed (i.e. when an image is selected and uploaded).
• Do when IonicToggle is changed: ionic toggles are like inputs. there are conditional workflows 'do when ionic toggle xx is changed'

videofeed (TikTok-like video feed)

1. Element: RepeatingGroup video: Data source → search for your video data type


2. Element: HTML video: source src —> needs to point the the URL property of your saved video file (unless you know what you are doing, don’t touch the rest of the code).


3. Workflow: RepeatingGroupVisibilityDetector A Item Became Visible, Step 1 —> needs to point the the URL property of your saved video file (unless you know what you are doing, don’t touch the rest of the code).

Manging the iOS status bar

• The app can be added to to an iOS homescreen as PWA. In this case, we need to control how the status bar looks like:

• default: standard white status bar black text
• black-translucent: transparent status bar with white text (no idea why it's called 'black-translucent'). In this case the body color of the website is visible at scroll position 0. in the template this is controlled in the element 'HTML B - Body Background for status bar', dynamically adjusting for various conditions
• black: black status bar with white text

Progressive Web Apps: Customize Status Bar

Progressive Web Apps (PWA) are starting to pick up a lot of momentum and are getting adopted by major tech companies including Uber, Twitter, Instagram and many others. While developing my first PWA, supporting cross-platform custom status bar proved to be a bigger challenge than expected.

codeburst.io

Use of fontawesome icons

• The template makes use of fontawesome icons in various places incl. FloatingGroup Buttons and View 3: UX Components). Unlike normal bubble icons, these are loaded via an html text in an html element. This is a bit more complicated, but offers much greater flexibility, e.g. for adding color gradients.

• to replace the icon:
1. find a free icon on https://fontawesome.com/icons?d=gallery&p=2&q=home&m=free
2. replace the icon name, e.g.: fa-bell → fa-home

3. You can further adjust the colors and size etc. in the HTML text

bubbleHack #3: Font Awesome Icons

In today's issue: To build or not to build? Make your apps look a tiny bit nicer using Font Awesome Icons At first, I was not sure whether I wanted to write about this, but I think we should talk about it.

bubblehacks.substack.com

Managing different screen heights

Responsive Viewer

Show multiple screens once, Responsive design tester

chrome.google.com

Converting your bubble app to a hybrid iOS or Android app and submitting it to the app stores

• As of today, Bubble does not offer a direct way to do this. There are a few workarounds, however. The two best options we are aware of are:
• Option 1: free, but requires a bit of work, using https://jasonelle.com/:

Bubble Forum

Many bubblers would like to have their Bubble site (or app) converted into an application for iPhone 'iOS' or 'Android' for free. In less than 10 minutes, I had my site on my phone with free Jasonelle open source. Become an expert in native app creation!



forum.bubble.io



Jasonelle

Jasonelle (a.k.a. Jasonette) is quite a different way to make an app. Make iOS and Android apps with JSON (and some JavaScript sparkles), loaded over HTTP or local file.



jasonelle.com


• Option 2: much more advanced functionalities and comes with less work, but will cost you around 200-400 USD

Bubble Developer Kit

Native apps and Plugins for Bubble apps



thebdk.com

Backend workflows

• In some cases it makes sense to move 'heavy' workflows or API calls to the backend, so the user don't has to wait for the workflow to finish. A common example is e.g. using an API call to compress an image after saving it.

Contact