Step by Step: Convert Bubble Apps to Native Mobile Apps in 30 minutes

#nocode #builtinpublic #day 1

Goal: Convert my current Bubble app to a native mobile app

Reference post:

I’m currently trying to document every step I made in detail. Hopefully this post can empower the fellow Bubble community to build native apps slightly faster.

Here’s the documentation day #1:

Basic setup

On Bubble

  1. Create an empty txt file, name it hello.json (the name doesn’t matter). Open the hello.json file with any text editor. Add this JSON text into it. Replace the https://www.yourdomain.com with the url of your app. This will be the onboarding page of your app.
{
    "$jason": {
        "body": {
            "background": {
                "type": "html",
                "url": "https://www.yourdomain.com",
                "style": {
                    "background": "#ffffff",
                    "progress" : "rgba(0,0,0,0)"
                },
                "action": {
                    "type": "$default"
                }
            }
        }
    }
}
  1. Upload the hello.json file to the root directory of your app. Deploy your app.

For Android

  1. Download and install Android Studio: Download Android Studio & App Tools - Android Developers

  2. Download the latest version of jasonette-android.zip: Releases · jasonelle/jasonelle · GitHub

  1. Open the jasonette-android project with Andriod Studio

  1. Open the strings.xml file (app > res > values > strings.xml).

  1. Replace the string “file://hello.json” with the url of the .json file you just uploaded to your bubble app. The url should be something like “https://www.yourdomain.com/hello.json”.

  1. Now you can try to build the apk or run it on AVD. Remember to install the Android SDK.

This is what I’ve done so far. My next step would be to convert the Bubble app to an IOS native app. I will keep documenting everything and share it here.

Feel free to ask me anything!

26 Likes

:clap: :clap: :clap: :clap: :clap: :star_struck: :star_struck: :star_struck:

1 Like

Some tips before submitting to the play store

Tried to upload my app to the Google Play Store before working on the iOS version. A bit of a learning curve so I guess it’s worth posting it here.

Here’s the documentation #2

1. Update App ID

You have to edit the applicationId before submitting the app to the google play store. This ID uniquely identifies your app. Usually looks like com.example.myapp.

To make the change, go to Gradle Scripts > build.gradle (Module: app), and find the applicationId attribute. It should be com.jasonette by default. Replace it with your own unique id.

2. Target API level

When uploading a bundle to the google play store, you have to Meet Google Play's target API level requirement  |  Android Developers. So, before creating the bundle, set the target API level to a higher version. Again, go to build.gradle (Module: app). You can find the targetsdkversion attribute there.

You should also change the compileSdkVersion because it cannot be lower than the targetsdkversion.

3. Upload a signed bundle

When releasing using Android App Bundles, you need to sign your app bundle with an upload key. To do this, click Build > Generate Signed Bundle/APK… on the Menu bar. I guess I will write a step-by-step guide for this.

2 Likes

So here is document #3 for generating an upload key and Keystore:

  1. Open the Andriod Studio. Click Build > Generate Signed Bundle/APK… on the Menu bar.

  2. Click Next to generate a signed app bundle.

  1. Click Create new… to create a new keystore.

    The alias_name can be anything. Just remember it. Fill in the rest of the form. Then click OK to create a Key Store.
    Check the box next to Export encrypted key and specify a path to save your signing key as an encrypted private_key.pepk file.

  1. Click Finish.

  2. After Android Studio finishes building your signed app, you can locate your app by clicking on the pop-up notification. You should be able to see the .aab file. This is the app bundle that you can upload to the play store.

1 Like

Android done. Now let’s build the iOS app.

Here’s the documentation #4:

For iOS

  1. Download Xcode on Mac.

  2. Download the latest version of jasonette-ios.zip: Releases · jasonelle/jasonelle · GitHub

  3. Open the xcode folder in jasonette-ios with Xcode.

  1. Go to Jasonette > App > settings.

  1. Replace the url with your hello.json (which you’ve created before in document #1).

  1. Select a iOS device. Click the run button :arrow_forward: to test.

6 Likes

expecting new post!

1 Like

This is awesome, thanks for sharing and caring!

1 Like

to create iOS app we must have a Mac then? is it not possible to do this on windows computer or even an iPad? is there a workaround ?

1 Like

Hello everyone! I’m trying to wrap the bubble app. I’m using jasonette iOS 2.1. While I’m following steps from here, I’m getting some 78 issues in Xcode, and the app in the simulator looks like it doesn’t receive data, the app is empty without data. Any suggestions? Thank you!

Hi @ashley2,

Yes, you need a Mac. Technically you can run Xcode on a virtual machine (VMware or Virtual Box), but it is not a good idea. It is slow and it crashes frequently.

Hello @ihorazh,

What are the issues? Can you see the loading screen in the simulator?

Thank you for your reply, it is warnings in Xcode.

My app is ready, only one problem, I can’t find a way to implement Apple In-App purchases.
Any suggestions?
Thank you!

This is feasible but you need to write native iOS code.

https://jasonelle-archive.github.io/docs/legacy/advanced/#2-extend-actions

How did you fix your xocde warnings? I am getting the same.

Hello,

First of all thank you for this guide! Will it be possible to upload the pictures on the first post again? Most of them are not visible.

5 Likes






an6

1 Like