- Architecture using URL parameters
- Style system
- Data structure
- Index (main app page)
- Conditional Workflows
- Custom Workflows
- videofeed (TikTok-like video feed)
- Converting your bubble app to a hybrid iOS or Android app and submitting it to the app stores
The Mobile App & PWA Template 4.0 is the perfect starting point to build your next mobile-first web app, progressive web app (PWA) or hybrid mobile app. The template is built with simplicity in mind, to allow you to build your own apps as simply and as quickly as possible.
This is a one-page template that uses URL parameters to show and hide elements (’screens’).
- Welcome screen, signup / login
- App navigation bar
- Onboarding flow
- Various UI/UX elements like notification banners, alerts, etc.
- Predefined styles
- Chat/messaging function
- Settings page
- and much more
Architecture using URL parameters
- The template is organized in ‘views’. Each view consists of a floating group.
- By default, all views except the splash screen are NOT visible on page load. 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:
In the template, all major screens are saved in an option set ‘opt_home content’, to avoid bugs caused by typos.
To show a screen, use the ‘Go to page’ workflow and set the parameter to the value you need. Just make sure that the screen you want to show uses the same parameter in its condition.
If the usage of the option set seems to complicated, you can also just use plain text.
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:
- The template also uses BBCode to overwrite the predefined styles in some cases instead of creating multiple very similar stlye, e.g.: changing the text color to white. This allows us to keep the stlye library as minimal as possible. Learn more.
- alternatively, you can also 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: 24px
- Gap spacing is dependent on group.
This is used for the image gallery
The data type user contains the following custom fields:
- 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.
- user name: this is automatically set on signup based on the email address
- profile pic: a users profile image
This data type is used for the chat function. It has data fields for:
- the users associated with a chat conversation
- last modified: when the conversation was last changed. this is used for sorting in the messages overview, and set manually in a workflow when a user creates a new message.
- Search string: holds the user names of all conversation participants as text. this is used for searching for conversation in the messaging feature. The value is set using a backend workflow, every time a new conversation is created
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
- unread by (user): list of users that have not yet read the message. is used to show the notification indicators
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
The template consist of two 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.
- videofeed: a template for a TikTok-like video feed.
404 and reset_pw are additional system pages.
Index (main app page)
The template built on one page ('index'), using URL parameters to show and hide ‘views’. The bottom bar ('FloatingGroup Navigation bar bottom') is used to navigate through the different main views of the app. The main "views" are:
- View: Landing / Signup: What the users sees when not logged in. This group has elements and workflows for user signup and login
- View: Home: Once the page is loaded (and the user is logged in), this view is visible.
- View: UI / UX Components: Contains a list of various UX elements and workflows to show them
- View: Messaging: A fully functional messaging / chat feature
- View: Photos: 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: Settings: An example settings page
Further views are shown and hidden using workflows
- View: Splash screen: can be shown during page load to present your logo
- View :Onboarding: This is a 3-step onboarding flow you can use to onboard your users
- View: Notifications: Used to show notifications to the users
- View: Image Detail: Used to show an image full screen when clicked on in image gallery.
- FloatingGroup Mobile preview: is used only to preview the template on desktops. you can safely delete this.
Other elements are:
- 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)
- Loading Screen: 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)
- Group Plugins and HTML
- HTML body background color: 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). The element uses condition to change its HTML value if certain views are visible.
- HTML glass effect: CSS code for glass (blurr) effects applied to the loading screen, the nav bar, and the settings screen (top)
- DeviceDetector A (plugin): publishes a state ‘device’ that is either “mobile” or “desktop”, depending on the users device.
- RG|Reverse A (plugin): used to reverse the messages repeating group
View: Landing / Signup
Set when the users presses ‘Sign up’ (yes) or ‘Sign in’ (no). Used to control the signup vs. login workflow.
Some workflows are automatically triggered every time a condition is true. These are marked orange.
Some workflows are ‘custom workflows’, that can be triggered using the ‘trigger a custom event’ workflow.
- The set body background color is mainly used to set the status bar color for PWAs on iOS.
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).
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. See more infos here: https://forum.bubble.io/t/top-10-options-convert-bubble-io-to-native-app/206330 or my Bubble Mobile Crash Course https://bubblehacks.podia.com/bubble-mobile-crash-course.
Happy to answer your questions here: https://forum.bubble.io/t/new-template-new-mobile-app-starter-pack/87797