AI & 2026 - 10 min. to build FREE iOS/Android app šŸ”·

Tips
1

Many bubblers would like to have their Bubble site (or app) converted into an application for iPhone ā€˜iOSā€™ or ā€˜Androidā€™ for free. In less than 10 minutes, I had my site on my phone with free Jasonelle :large_blue_diamond: open source. :slight_smile: Become an expert in native app creation!

The main advantage of this tool is that you will never have to compile again or submit your APP to Apple or Google stores. Everything is done on Bubble side forever! If you still donā€™t want to do it yourself, I recommend the BDK Native in the box.

6 EASY STEPS
This procedure is the same for iOS or Android.

  1. Download the executable files:
    iOS (Xcode) iOS for Bubble or Android (Studio) Android

  2. Install (if not already done) Xcode for Mac: Xcode or Android Studio: Android Studio

  3. Open the ā€˜master.zipā€™ , run SETUP

    image
    image566Ɨ500 36.7 KB

  1. Create with any text editor a text file with the name or create an endpoint inside API Workflows > No need any file! < Read this!

index.json

  • an copy those lines to it (this is your wrapper). Save it. Change the domain with yours! www.your_Bubble_domain.me
{
   "$jason": {
		"body": {
			"background": {
				"type": "html",
				"url": "https://www.your_Bubble_domain.me",
					"action": {
						"type": "$default"
							  }
						  }
				}
			  }
}

  1. Inside the compiler (iOS) you need to specify URL in the section settings.plist

    05%20PM
    05%20PM1950Ɨ544 221 KB

  2. Connect your phone and choose from the simulator menu your phone (which should appear) and press RUN (the triangle button). Your app will open in your phone.

    19%20PM
    19%20PM750Ɨ596 259 KB

Enjoy!

com-optimize

more notes:
Android installation (July5) : Android debugging

What bubblers says (thanks guys :slight_smile: )

  • " Thanks a lot for your very useful post. The kind we need here! Just to say that. Cheers " N.

  • " Itā€™s been really useful, especially the json you provide, even though itā€™s super simple, made literally it no brainer for me who wasnā€™t sure how to write the wrapping" G.

  • " You have saved me time and money through your posts on the forum about wrapping. Your solution is elegant and 100% effective. " S.

2

Nicely done sir!

3

Does it interacts well with picture uploader, scrolling within elements etc? Because I tried a few other alternatives and many of them failed some essential basic task.

4

Hi @vini_brito

At the base (html), the Jasonelle core use the most commun features of both world iOs and Android. Scrolling working good, and any ā€˜uploaderā€™ (including pdf). At this point, I recommand a try :wink:

The best part is having fun with NATIVE Jasonelle functions.

5

Thanks! Interesting and I will try it out. Question, if I want to create a Android app can I also use Xcode or do I need Android Studio and should I use Xcode for iOS app?

6

Hi @FJP

Xcode for iOS, Studio for Android. And thanks.

7

Thank you! Itā€™s possible to lock orientation to prevent horizontal?

8

@danielowega All thoses settings are inside the compilers. :wink:

image
image870Ɨ194 12.8 KB

10

This is great!

Thanks for sharing.

11

Thank you @privilet.info

Hope you enjoy. This is the faster way I found.

12

Hi, @JohnMark

The iOS works like a charm. And Iā€™d like to share my experience building the Android version. Itā€™s not that easy and straight forward as building in Xcode.

During the installation, you will find an error like this

Unsupported method: AndroidProject.getVariantNames()

I found a solution here in the top answer. It changes only two lines and it will work like magic. Then the android studio will ask to download a newer SDK version and all things will be done.

Follow the documentation in the jasonette.com to customize your app, but itā€™s quite an old version. Hereā€™s the path in new version

55
55564Ɨ1004 47.6 KB

Open strings.xml, change the app_name to yours and change the URL to the same index.jsonā€™s URL path as JohnMarkā€™s instruction step 4.

And donā€™t forget to replace the icons in those mipmaps folders in the res folder. I did this manually by reveal the folder in finder and replace the icons one by one.

Have fun everyone :slight_smile:

13

Hi @privilet.info

Totally agreedā€¦ it took me 100 minutes to patch everything on Android. So letā€™s start first with the new Android download.

and download the fileā€¦

08%20PM
08%20PM2372Ɨ622 119 KB

nextā€¦

45%20PM
45%20PM2242Ɨ660 113 KB

nextā€¦
Configure your phone to be in a state of ā€œDevelopment modeā€ in the settings of your phone. You have to press 7 times this Build numberā€¦

IMG_2309
IMG_23092448Ɨ3264 3.08 MB

nextā€¦
If the demo doesnā€™t work is probably because you donā€™t have the old thingsā€¦ so installed it.

1>

13%20PM
13%20PM752Ɨ136 7.64 KB

2 >

19%20PM
19%20PM1436Ɨ732 167 KB

3 >

18%20PM
18%20PM1032Ɨ698 104 KB

Still enjoy! you just saved hoursā€¦ :slight_smile:

14

@lantzgould Thanks

15

Awosome stuff @JohnMark , thanks for this.

But what is the difference between this and using a webview option? what are the advantages/ disadvantages?

Thanks

16

Hi @LinuxUser, thanks.

The difference is for your end users, having an app that they can download from Apple and Google Stores. Itā€™s also more personal, your own ā€œiconā€ but in terms of speed it will be the same, since you donā€™t use Jasonelleā€™s native functions to make it faster, at the moment :wink:

17

Using the webview option in Jasonelle will result in the same end experience as using something like Webview Gold or Superview. It does the same thing: load your Bubble website through a web browser. As JohnMark says, your users will download the app from the app store, but if there is no internet connection, thereā€™s no access to your app as itā€™s still just loading it through a web browser.

18

To add to what Andrew says, I would tend to believe that it depends on everyoneā€™s need. 95% of the apps I use on my iphone (100+) are apps that need to be online. Also as I mentioned, the advantage over WebView or the others ($) is that Jasonelle uses a batch file external to the main file (in json format), which makes it completely standalone for future changes without compile clutter. Over time, you can add native elements to your app to give it more color and speed. This plugin let you use the swipe and press&hold controls.

Swipe to Workflow Action

19

Hi John,

This looks very good! ONe of the main reasons why I would want a native version of my app is to be able to send native push messages to the user. Is that possible with your solution?

20

Hi @SenorPelota, and yes it is very good :slight_smile:

Jasonelle is basically a native application, with a ā€˜wrapperā€™ which is simply an htlm window of the same type as we have with Bubble. Notifications are possible, and there are several ways to do so. OneSignal is one of those. I invite you to read the means to achieve this. Jasonelle forum.

21

Is it enought to use one of bubble onesignal plugins or does it requiremother conficuration aswell?