[PLUGIN] - Mobile Device Kit

Plugin builders
1

Hi all,

Another plugin for anyone that is interested. This one is geared up for mobile devices only and consists of a bunch of actions responsible for interacting with the various sensors and other API’s that you tend to get within mobile devices and not desktop devices/browsers.

Demo page:
https://paul-testing-4.bubbleapps.io/version-test/mobile_device_kit

Plugin
Mobile Device Kit Plugin | Bubble

It mainly supports Android and iPhones and has some pretty vigorous error checking and a ‘log’ state to make debugging that much easier on a mobile. You can just drop that state onto the page whenever you need to see it. Bit like this… (it will show errors to)

image
image645×529 73.9 KB

It also provides a ‘browser’ state which you can use for detecting which mobile device the page is currently being viewed upon, and the browser that is in use. This screenshot was taken from a desktop device but it will accurately detect them all.

image
image503×215 34.6 KB

The demo page has all the actions put to use, in case if you ever need to test any. It also has a manifest file loaded so you can run the page as a progressive web app (PWA). To do so, just save the page to your home screen. The browser may even prompt you to do this the first time you visit the page. The notification action (on iPhone only) will require this. It’s not required on Android devices.

The notification action will also need a service worker uploading to your root files area in your app before it can be used. It’s worth noting, this action does not use OneSignal. These are local push notifications only so you won’t be able to send out push notifications from server-side actions in a way you might be thinking. This is written up in the instructions page.

Actions such as the device orientation and geolocation, will show either a cube or a map so you can visually see the data in use as the mobile moves around.

image
image941×783 158 KB

There are some features which have been purposely left out for the time being. These are things like touch/face ID, in-app purchases and a few others as I suspect Bubble’s mobile builder may support these. If required in the future, I will add these.

Available actions

  • Device orientation
    This action starts listening to the device orientation event. When started, the ‘device orientation’ state will be continuously updated.

  • Device motion
    This action starts listening to the device motion event. When started, the ‘device motion’ state will be continuously updated.

  • Geolocation
    This action starts listening to the geolocation event. When started, the ‘geolocation’ state will be continuously updated.

  • Screen orientation
    This action starts listening to the screen orientation event. When started and the device orientation changes, the ‘screen orientation’ state will be updated.

  • Start vibration
    This action allows you to vibrate the device. If vibration is unsupported, then you can optionally play a low frequency audible sound instead.

  • Stop vibration
    This action will stop any vibration or sound that is currently in progress.

  • Screen orientation lock
    This action allows you to lock the screen to a specific orientation. The page will enter full screen first, then the orientation will be locked and the ‘screen orientation’ state will be updated. This only works on Android devices.

  • Battery
    This action allows you to retrieve and monitor the battery status. As the battery level changes, the ‘battery’ state will be updated. This only works on Android devices.

  • Notification
    This action allows you to push notifications directly from the browser, these are local push notifications and cannot be sent when the plugin is not visible. You must host a service worker file in your root directory for this to function correctly.

  • Clipboard
    This action starts the clipboard monitoring events and optionally allows you to copy text or image to the clipboard. When the events are started, copying any text on the page will automatically populate the ‘clipboard’ state. If you want to copy an image, you must run the image through this action rather than trying to copy it directly from the page.

  • Alert
    This action allows you to send a simple alert message.

  • Wakelock
    This action detects when the page is hidden or resumed (device locked/unlocked) and triggers the corresponding events. The events are also triggered when navigating away from the page or switching tabs, unless you have your page added to the home screen and it’s configured to run as a native web app.

  • Share
    This action allows you to share data using the native share dialog, files aren’t supported right now.

  • Contacts
    This action allows you to retrieve information from the contacts list on the device and will populate the ‘contacts’ state. This only works on Android devices.

States

7 out of the available 11 states are object orientated. These will contain multiple sets of data.
You can refer to all these, including descriptions for each field, here.

To use them, you must make sure these fields are set:

image
image317×495 13.1 KB

Hopefully this plugin will provide a few extra tools for everyone to use, although I suspect Bubble’s mobile builder may actually cover a number of them. Going forward, it will be supported and I’ve tested as much as I can for the time being.

Any question/problems/stuff I’ve missed etc just shout at me (nicely please!)

Paul