- 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
The Mobile App & PWA Template 3.0 is a building block template library for mobile-first development / native app development on Bubble. The template aims at being a starting point and provide all you need to develop your next native or hybrid mobile app.
This is a one-page template that uses custom states to show and hide elements.
Features
- 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):
- Use copy & past with workflows for copying predefined elements when ever possible
From there, you can select an element and then check the āConditionalā tab to see when an element is visible:
- 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
This data type is used to record workflow errors. The custom workflow 'When an unhandled error occurs' automatically creates a thing of this type if an unhandled error occurs anywhere on the page. This is especially useful if you are working with APIs.
Uploaded_Image
This is used for the image gallery
User
The data type user contains the following custom fields:
- 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)
This data type is used for the chat function. It has data fields for:
- the users associated with a chat conversation
- users that have unread messages in this conversation
Messages (chat)
This data type is used for the chat function. It has data fields for:
- the conversation the message belongs to
- the message itself
- a file, if a file was sent instead of a text
Notification
This data type is used to show notifications to the user
- 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
This data type is used for displaying places (e.g. restaurants etc.) on a map (google pam
- 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
Most elements in the template use predefined styles. The number of different styles is intentionally kept as small as possible, so it is easier to manage (e.g. if you want to change the font types).
Please note: most 'text' styles are per default aligned to top and left. To avoid adding additional styles for center aligned texts, the template uses conditions on the respective text elements (i.e. use a condition that is always true, e.g. when this element is visible, then text alignment is center). Example:
Pages
The template consist of four main pages b uilt on Bubbleās new responsive engine. :
- index: This is the main page of the app that hosts all the building blocks.
- terms: this is an empty placeholder page for your terms of use
- privacy: this is an empty placeholder page for your privacy policy
The template further consists two legacy pages, built on Bubbleās old responsive engine. These are not further maintained:
- index_old_responsive_engine
404 and reset_pw are additional system pages.
Index (main app page)
Elements
Main views
The template built on one page ('index'), using custom states to show and hide elements. The bottom bar ('FloatingGroup Navigation bar bottom') is used to navigate through the different main views (i.e. the main groups) of the app. The main "views" are:
- 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.
Sign-up, login and onboarding views
The login and sign-up workflows, and the onboarding flow are built around two additional views:
- 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
Other views
- 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
This is a simple implementation of a WhatsApp like chat to send text or files between users. It uses various elements:
- 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
View 11: Map and Places
- 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
Other elements are:
- 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
Element | State | Usage | Used options |
---|---|---|---|
index | active | Determines which main view is visible. This state is set by the 'FloatingGroup Buttons'. This state is of type Option Set opt_active. | |
Group UI / UX Components content | option | This determines which sub-view of the Group 'View 4: UI / UX Components' is visible. This state is of type number. | 1, 2, 3 |
View 10: Paywall | selected_offer | This is used to determine which subscription offer is currently selected by the user. This state is of type text. | monthly, annual |
View 6: Picture Gallery | filter | This is used to filter the image gallery (RepeatingGroup Images 1). This is set in 'GroupFocus filter 1'. This state is of type text. | favorites |
Conditional and Backend Workflows (Workflows not triggered by element clicks)
Most workflows in the template are triggered when a specific element is clicked. Exceptions are:
- 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)
A TikTok like video feed with vertical scrolling and sharing buttons
ā ļøĀ IMPORTANT: If you change the data source for the repeating group, you need to adjust the following:
- Element: RepeatingGroup video: Data source ā search for your video data type
- 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).
- 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:
There are 3 options:
- 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
You will need to delete and āreinstallā the app to your home screen every time you change this.
The template uses black translucent per default. Further reading:
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:
- find a free icon on https://fontawesome.com/icons?d=gallery&p=2&q=home&m=free
- replace the icon name, e.g.: fa-bell ā fa-home
- You can further adjust the colors and size etc. in the HTML text
You can find a full walk through of how this works here:
Managing different screen heights
The template is built on Bubbleās new responsive engine, which also handles vertical responsiveness. The use of CSS code is no longer needed with the new responsive engine.
If you are not familiar with Bubbleās new responsive engine, check out my videos for the basics here.
It's always recommended to test your app on various screen sizes. This can be done e.g. using the Responsive Viewer Plugin in Chrome
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/:
- Option 2: much more advanced functionalities and comes with less work, but will cost you around 200-400 USD
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
Happy to answer your questions here: https://forum.bubble.io/t/new-template-new-mobile-app-starter-pack/87797