[Update March 5, 2020] BDK Native Apps v1.7 released

Could you dive into the “native” part a bit more? I haven’t seen a solution that turns Bubble apps into native apps, just solutions that wrap them and serve them up in a webview. Is this service different?

2 Likes

Seems pretty amazing. So native transition is between different pages not for the one page app?

Is there a way to change the background colour for the native transition and maybe add a loader? I have a dark UI in one of my apps so that’s why I’m asking.

What else you have on your roadmap?

It does use few native functions and integrates them to bubble.

1 Like

This is awesome! @gaurav offline capabilities? (database, cache)?

2 Likes

I asked the same question. No response yet. ??

So here’s a very high level overview of the system:

image

  1. iOS & Android Operating System: Self-explanatory
    BDK Native Platform
  2. Engine: Incorporated within the app during a build
  3. Config: Incorporated when the app is built
  4. Bubble Plugin: Allows your bubble webapp to communicate with other parts of BDK Native
  5. Native Template: Fully native ‘views’
    Your bubble app
  6. Your bubble app: Self-explanatory

The engine, app settings and plugin together allow two-way interfacing b/w bubble and iOS / Android native app features.

The first native template I’ve built is a special native template for a wrapping a bubble application. Think of it as a ‘customized wrapper’ for bubble that @andrewgassen mentioned. Ofcourse that’s only one piece :smile: I’ve got some ideas around other native templates but it would be too early at this time and spoil the surprise. hint: lockscreen.

I have seen a lot of talk of wrappers such as Superview, universal webview, web2app etc. While I have never used these, the place where it probably differs from such wrappers is that it (i) is custom built for bubble so it attempts to give the bubble app control of the device layer (ii) is two-way so the engine can also pass data into bubble, trigger bubble events etc. (iii) can include native components such as header that are controlled by bubble (see response about header below). Regarding the wrappers in the market, I don’t know if ZQ, Copilot & others use these or not so can’t comment on that.

As an example in the demo app - take the screenshot function. You click the button, which has attached workflow step ‘Take screenshot’ from the plugin. The plugin communicates the request to Engine. The engine now asks the OS to do this, collects the result, sends it back to the plugin. The plugin element then exposes the result to your bubble app as the screenshot element’s image. So basically for the end user i.e. you, you end up building an app that is truly interacting with the device back-and-forth but in the same seamless way that makes bubble so great.

Adding one text / icon on the right side in header is in the roadmap.

This looks like a very desirable thing to have as you transition b/w pages you may want to change the header title, background color. I just built this capability into the engine & plugin :smiley: Once I’m done testing I’ll update the demo app.

Sounds like a pretty cool app :slight_smile: So I just built this background color functionality into the engine & plugin. Once I’m done testing I’ll update the demo app.

I’m not entirely sure what offline first means… If its ‘do something when things go offline’ then yes its possible (see below). If its ‘I want my bubble app magically work offline’ then no (and unlikely that anyone other than bubble team can do it)

There are 2 cases here:

  1. App opened and there was no connection to bubble preventing the bubble site from loading
  2. App opened, bubble site loaded and then connection went offline

For case 1, I need to add the capability to detect when user opens the app and internet is not working. Will add to my list. Right now the native components (e.g. header) will show. You can try opening the app in airplane mode.

For case 2, you can already use the Offline detect feature in the bdk UX tools plugin. That will allow you to build your custom screen / use a standard connecting & offline screen, and not just for native but also webapp. Please check out the standard one in the demo app by turning off internet after the bubble page is loaded.

Device database / cache:

Currently possible to store key value pairs (like json). I still need to add plugin actions for that. However I’m curious about why you’d find it useful.
If there’s a specific file you’d want stored on device that’s possible when you request the build.

4 Likes

Is it possible to play audio in the background… ie activity will go on in the background ?

Yes absolutely… You can try out on the demo app :slight_smile: play the audio and go to some other app / lock your phone. Infact you can even add custom album image, artist, author etc… Try to see that once you play the audio :slight_smile:

3 Likes

Hi @gaurav, can I asked which engine is behind it? Audio recording is needed.

Sorry cant share more details about engine and stuff.
I can share that I have a plan to add native audio recording as well :slight_smile:

1 Like

Offline first is a term used to describe that magic action. Where an app can be opened and used regardless of whether or not a data connection exists when the app is opened. All data entered while offline is stored on the device and later synced when the data connection is restored.

In my case, the app is used in the construction industry. Often while on a project there isn’t a data signal available (though that’s becoming less of an issue). So that means the app is unusable.

That’s quite a response you provided. Thanks.

1 Like

Okay so I read up a bit about how this happens and fairly confident that this can only be implemented by the bubble team for apps built on bubble. I also checked gonative if they offer such a capability even upto to their top end subscription and they don’t (Pricing).

I see. So yeah I think you would be able to save something on device and then check from your bubble app using a timestamp if that matches your last save to server. That could be done easily from your bubble app once I expose the functionality to save on-device.

4 Likes

Thanks again. I’ll be getting back in touch with you. :+1:

1 Like

Just tired this out super impressed.
Now how does the testing work? Is there is an equivalent of bdk Native during building process so I can test the application and once I am satisfied and want to build it and launch it I request the build ? how does the process work

Is video shooting within the app and the finger print access in development?

2 Likes

Hi @gaurav

This is great! One question about image, either taking from device camera or taking from exisiting file in device storage… is it possible to compress and/or crop the image before upload to bubble dbase?

Thanks,
Anwar

I assume yes. the way you would imagine is that would be in an environmental viable you pass it to javascript compressor code triggered by workflow and get a compressed image then upload it. @gaurav do you know another way ?

Thanks @MrMaker! So the idea of demo app is (1) to try out these capabilities and (2) if you’d like to see how your own site feels in app, just type in your link and ‘transition natively’ to it in the demo app itself. I recommend create a project on the demo app and you’ll be able to see more info.

Once you have the build, iOS and Android app stores have a pretty standard process wherein you could put your app in alpha / beta testing so that you (& your test users) can test. Then you can make them live when ready. Note that all of this is done on your end.

I want to clarify that the process is not - I make a test build your native app, provide it to you and then you decide whether you want it or not. Since that would be like me doing all the work without any purchase commitment from your end.

  1. You check out the demo app and plugin documentation (coming soon).
  2. Create a project to get more understanding of pricing, faq, information requirements.
  3. Once you pay you receive a guide with step-by-step ‘Before the build’ guide including walk-through videos of any settings that are needed to be done on your end to gather the information required for a build.
  4. Once you have the info, fill it in the form on your project. Click request build.
  5. I start the build process on my end. Meanwhile you receive a step-by-step ‘Testing your app’ guide with walk-through videos that are helpful if you’ve never tested iOS / Android app prior to this.

Not yet but in plans along with the audio recording

Since this is specific to a few brand & higher end phones, not on the roadmap at the moment. Trying to focus on features that are more broadly useful

Want to clarify that image taking from device camera is supported. Taking data from existing file in device storage is not a capability I’ve added.

Cropping the image can be done by the user as part of taking the picture itself if the device supports it e.g. try the capture image in demo app on latest iOS; you should be able to crop image & possibly even apply filters I think.

For image actions (take picture using camera, select photo from gallery, take screenshot) : The native platform sends raw image data (base 64) to plugin that can be used to display image on any image element without storing on bubble server.

Then if you want to store it in your bubble database, you simply need to user the ‘Get data from api’ bubble expression. The api endpoint to call will be set up in your app’s api workflows tab. While this may sound complex, its actually very easy. The plugin documentation will show you how to set this up in a minute.

If you’d like to compress an image (or do any such image processing), you would just need to do it the same way as you would in bubble web app.

No need of environment variable etc. here to get the image. The native platform & plugin handle all of that automatically in between them. You will be able to get the raw data, as well as link of image file on your bubble server (via an api workflow as explained above). Beyond that i.e. what you’d want to do with the image is totally up to you.

Why not have the native platform upload the image directly to my bubble database rather than having to setup an api workflow for that?
Simple: Its’ more cost effective for you. Think about cases like (1) your endpoint changes, (2) you need to change a setting e.g. filename (3) you want to upload to your custom aws / azure or some other server instead of bubble database (4) you want to do some image processing / ai stuff etc.
You would end up needing to request a new build which could cost you. So instead why not spend 30 seconds more on your app and avoid paying while maintaining control on your hands.

1 Like

@gaurav Do you have a plan to add Tap Bar? Also about header and dynamic content/icons. I would buy this for sure but it would be nice to know how navigation could be setup?

[Updates] April 4, 2019

Added Native Capability:

  1. Dynamically set the header content, colors and label / image. Try it out now on the latest version of native apps for iOS and Android.

Plugin documentation now available:

  1. Plugin documentation is now complete. If you’ve created a project, the link is also available along with other guides on your project page.

Bubble site updates:

  1. Added list of native capabilties for quicker navigation
  2. Added the section to test out Dynamic headers capability
  3. Option to specify dark mode color on project

Folks who have already requested the build. Please upgrade the plugin version on your app.

Cheers,
Gaurav

4 Likes

Its’ available now

You can try it now in the dynamic headers section in the demo app. Also check out the plugin documentation above on how to use in your bubble app.

If by tap bar you mean tabs at the bottom of screen, then yes I do have it on the roadmap