Passing Parameters in Bubble

One of the most common actions in web design is passing information from one web page to another. If you're on a recipe website and ask for meals that use paprika, you'll probably see a new page load whose URL ends in something like "/?search=paprika". You pass parameters from one page in your Bubble app to another the same way. 

As an example, let's say you have an app that allows the user to enter the purchase price and projected lifetime of an asset (such as a lathe or drill press) and then try out different methods of depreciating that asset. Once the asset's purchase price and expected lifetime are entered, users can click a button to start a workflow in Bubble with the workflow's first (and only) action being to navigate to the page where they can select different depreciation scenarios. The action editor would look like this:

The destination is the page where the users select different depreciation methods ("depreciation"), the checkbox "Send more parameters to the page" is checked, and two parameters have been entered. Each parameter consists of a "key" and a value. In this case, the first key is named "q" (it could be any text string) and its value is the value of the asset purchase price. The second parameter's key is named "qq" and its value is the value of the asset lifetime. Any number of parameters can be passed to another page this way.

If the user entered a purchase price of $875 and an expected lifetime of 8 years, the tail end of the URL of the "depreciation" page would look like this:

/depreciation?debug_mode=true&q=875&qq=8

(notice our two parameters added onto the end of the URL)

There's nothing complicated about passing parameters like this in Bubble, but I read one explanation online that was a bit confusing, so I thought I would show a simple example of how it works. Hope this helps if anyone isn't clear about how to send data between pages.

Protect Your Data

Building a great app can be enormously satisfying - until someone steals the data you've collected for your company or a client. Having your app get hacked and data get stolen or corrupted can be a nightmare, for you and for your users. So what can you do to make sure that doesn't happen? 

There are multiple actions that you can take to protect sensitive data:

• Activate "SSL" (Secure Sockets Layer) protection if it's available to you. SSL (or its successor, Transport Layer Security) uses sophisticated encryption algorithms to scramble data in transit between a server and a user's browser or between two apps, preventing hackers from reading or copying the data as it's being transmitted.
• Force users to log in (at least to pages containing sensitive data). It may also be a good idea to enforce rules about how complex the user's password should be and to require changing the password periodically. 
• Consider automatically logging out users after a certain period of inactivity.
• Set up access rules for any page in your app that displays sensitive data. There are really three layers to this type of security:
• Mark those pages as private so that the app knows to restrict access.
• Set up "roles" for users so that only users with the proper role (administrator, manager, supervisor, etc.) can access a particular page that's marked as private.
• Assign "permissions" to users who do have access to a protected page (that is, whether a particular user can just view the page, or can view and edit data on the page, or view, edit, and delete data, and so on).
• Avoid using private API keys or tokens on a page in your app - restrict their use to workflows.
• If the platform you're on (and the plan you're on) provide the ability to encrypt and decrypt specific data fields, consider keeping fields containing sensitive data encrypted and only decrypt them when actually using those fields in the app.
• Avoid using third-party plugins to process sensitive data, unless the plugin is a standard add-on such as Stripe or MailChimp.
• Build in change logs or other ways to audit user additions, edits and deletions to sensitive data.

Yet Another "Universal" Android App

A few days ago I came across another "universal" app for android phones (see my previous post "A Universal WebView Android App"). This particular app template is from Sherdleapps and is available on codecanyon.net: (https://codecanyon.net/item/universal-full-multipurpose-android-app/6512720).

According to Sherdleapps this does qualify as a no-code app. If you have changes you want to make, you can choose to make those modifications by using the company's visual App Builder for free. The App Builder's drag and drop interface lets you  customize the app the way you want it without any need to make code changes manually. Once you've finished configuring your app, you can use the provider's online build service to compile your application into an executable APK that you can run on your own phone or deploy to the Google Play Store. According to Sherdleapps there's no software to install, just click ‘build’ and download your app. 

One note about the App Builder. The documentation says that once you purchase a license you have lifetime free access to the App Builder to customize the application. However, you only have one month of unlimited access to their build service - after that you need to use Android Studio to convert your customized template into an executable APK file. And as far as the App Builder goes, you can modify any of the features included with the app, but it doesn't allow you to add new features.

So what features are included in the app? According to the documentation you can offer:

• The ability to handle a wide variety of content - Wordpress posts and articles, videos and livestreams, WebViews, social media posts, WooCommerce, radio streams and podcasts, photos, and audio streams.
• In-app purchases.
• Admob advertising.
• Push notifications.
• A built-in media viewer/player.
• Flexible navigation.
• Custom actions - make an intent to another app or open a URL from the menu.

The "regular" license for the "Universal" Android app is $29, but there are two types of license and the terms are fairly complicated. To read about the licensing (and other features of the app) in detail go to:

https://codecanyon.net/item/universal-full-multipurpose-android-app/6512720

The New Glide

 

Recently I wrote a post about constructing a simple mobile app on Glide (www.glideapps.com). At the time I mentioned that I liked using the platform, but that it was limited by the need to use Google Sheets as the backend database (and by other factors, like a lack of templates). However, all that changed last month when Glide released version 2.0, which includes a number of new features.

The biggest change, in my opinion, is the release of "Glide Tables" the platform's proprietary database. Glide Tables are much faster than linking to Google Sheets, plus they're more scalable and they allow you to access the same data tables from multiple apps. You can still use Google Sheets as your database, but that's optional now.

Another major change is the addition of a bunch of new components, including:

• Webhooks (A webhook or web callback is a way for an app to provide data to other applications as it happens)
• Large scale (1 GB) file uploads
• Barcode scanning
• New button styles
• Satellite maps
• Sound effects
• Hint components

You'll find some other improvements too:

• Tablet and desktop views of your app in addition to the smartphone view (paid plans only)
• A new, much faster (open source) data editor
• A re-designed App Builder
• Additional team collaboration features
• An "Action Editor" that lets you build sequences of actions (workflows) with conditional branching capability
  
• A new dashboard
• Hundreds of new templates

Glide's pricing structure has also changed. The "Free" plan is now called the "Personal" plan to indicate that's it's intended primarily for personal, rather than commercial use (you're still limited to 500 rows of data on the Personal plan). The "Pro" plan, which allows 25,000 data rows and provides phone, tablet and desktop views, is now $32/month ($24/month when paid annually).

You can go to https://www.glideapps.com/blog/introducing-glide-2.0 for additional information on the new version of Glide.

Handling Yes/No Fields in Bubble

If you've used a "yes/no" (boolean) field in Bubble or on other platforms, you know they can be a little tricky to work with. Here's an excerpt from "Learning Visual (No-Code) Programming Step by Step with Bubble" that explains a way to make life with yes/no fields a little easier:

I had built a "to-do" list app with a "finished?" yes/no field to indicate whether or not a given "to-do" had been completed and I decided to add a filter to the listing page to let the user display all todos, finished todos, or unfinished todos. The problem I ran into is that Bubble's yes/no field treats an empty value as “no”. 

I assumed I could display finished to-dos or unfinished to-dos by adding a constraint to the repeating group that loads the to-do records. If the user chose a filter value of "yes" it would display finished records, while a filter value of "no" would show unfinished records. And if the user left the filter blank the repeating group would ignore an empty constraint and display all to-do records in the database. However, because a yes/no field sees an empty value as “no” the app displayed just the unfinished records whether the filter value was "no" or blank.

So what was the solution? I changed the type of the “Finished” field from yes/no to “boolean” (“boolean” being an "option set" that I created that had just two values, “yes” and “no”). Then I edited my sample data and reset the “Finished” field in each record to either the "yes" or "no" value in the option set. 

Once that was done I went back to design mode for the Todo Listing page and placed a dropdown box above the repeating group and named it “Dropdown Filter Finished”. Then I set the “Choices style” to “Dynamic”, the “Type of choices” to “Boolean”, the “Choices source” to “All boolean”, and the “Option caption” to “Current option's Display”. The property editor for the dropdown looks like this:

Next I opened the property editor for the repeating group, clicked on “Data source” to display the constraints, and added a constraint “Finished=Dropdown Filter Finished's value”. By changing the “Finished” field's data type to the “boolean” option set, the constraint now included a true “empty” value. 

At that point, the property editor for the repeating group looked like this:

Now the repeating group that displays the "to-do" records showed all todo records if nothing was selected in the dropdown (filter Finished) box, all completed todos if “yes” was selected, and all the unfinished todos if “no” was selected.

There are a lot of situations where a "yes/no" field is a good choice, but there may also be occasions when you want to use a boolean value instead. 

A Universal WebView Android App

 If you need to create an Android app that can access a web page but the app is so complex you don't feel you can build it on your own, Robo Templates may be your answer. The website codecanyon.net markets ready-to-use app templates, including a "Universal Android WebView App" from Robo Templates that's available at: https://codecanyon.net/item/universal-android-webview-app/8431507

OK, first things first. So what is a "WebView" app? Developer.android.com explains it this way:

If you want to deliver a web application (or just a web page) as a part of a client application, you can do it using WebView. The WebView class is an extension of Android's View class that allows you to display web pages as a part of your activity layout. It does not include any features of a fully developed web browser, such as navigation controls or an address bar. All that WebView does, by default, is show a web page.

Alright, but what can you do with this "universal app"? Quite a bit actually. The features available in the app include:

• Support for KitKat (Android 4.4) and newer
• WebView supports HTML5, JavaScript, Cookies, CSS, images, videos and other standard web tools and technologies
• AdMob (adaptive banner and interstitial ad)
• Firebase Cloud Messaging (push notifications)
• Firebase Analytics
• OneSignal push notifications
• Targeting push notification messages on specific users
• GDPR compliant (European Union’s General Data Protection Regulation)
• Support for opening links in external browser (customizable rules)
• Intents for opening external apps (e-mail, sms, phone call, map, store, social networks)
• Local pages (available in offline)
• JavaScript API for controlling the mobile app from web
• HTML5 videos, YouTube, Vimeo, JW Player
• Fullscreen video
• Download manager
• File picker for uploading files
• Upload photo from camera
• Geolocation (optional)
• Location settings prompt
• Splash screen (launch screen)
• Navigation drawer menu with optional categories (easily customizable)
• Pull-to-Refresh (optional)
• Share dialog (optional)
• Confirmation dialog when user tries to exit the app (optional)
• Highly customizable app (features can be easily enabled/disabled)
• Customization of features (enable/disable action bar, navigation drawer menu, pull-to-refresh etc.)
• Ten color themes (blue, brown, gray, green, lime, orange, purple, red, teal, violet)
• Responsive design (portrait, landscape, handling orientation change)
• Multi-language support
• Free support

But what if you need to customize parts of the app? The free support provided by robotemplates can help you make changes by modifying or adding code, but apparently you can do a lot of customization simply by editing the app's config file. Technically, that makes it a "no-code" product. 

You can buy a "regular" license for $29 to create a single Android app for yourself or for a single client, which the end user isn't charged for. There's also an "extended" license available for $129, which allows you to create a single app for yourself or a single client and charge the end user for the product.

For more details on licensing go to: https://codecanyon.net/licenses/faq#item-end-product-a 

New Book on Learning Bubble

 If you've tried Bubble or would like to, I've published a new book "Learning Visual (No-Code) Programming Step-By-Step With Bubble" that could help you get more familiar with Bubble's capabilities. The book's just been published on Amazon for anyone who wants to take a look. It's arranged as a set of exercises for the reader to try, along with my notes and screenshots explaining how I went about solving those exercises.

If you sign up for a free account with Bubble you'll find a set of lessons available on your home page and the final one guides you through creating a "to-do" app. Bubble used to suggest a number of possible enhancements to that app and a while back I tried working my way through making those changes. The modifications involve making use of features like repeating groups, search boxes, popup windows, auto-binding, highlighting, notifications, option sets, filtering constraints and user authorization (including signup and login forms).

If you're interested, please take a look and send any questions, criticisms, suggestions or comments to info@mastering-nocode.com.