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

[edtyli9]

#nocode #builtinpublic #day 1

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

Reference post:

10 min. to build a free native iOS/Android app 2021

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. New Android library click here and download the file… [08%20PM] next… [45%20PM] 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] next… If the demo doesn’t work is probably because you don’t have the old things… so installed it. 1> [13%2…

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"
                }
            }
        }
    }
}

2. 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 and SDK tools  |  Android Developers

2. Download the latest version of jasonette-android.zip: https://github.com/jasonelle/jasonelle/releases

3. Open the jasonette-android project with Andriod Studio

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

5. 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”.

6. 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!

[lindsay_knowcode]

[edtyli9]

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. 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.

[edtyli9]

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.
   

   

‌

3. 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.

‌

4. Click Finish.
   

   
   ‌

5. 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.
   

[edtyli9]

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: https://github.com/jasonelle/jasonelle/releases

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

4. Go to Jasonette > App > settings.

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

‌

6. Select a iOS device. Click the run button to test.

[lucas.ar]

expecting new post!

[nikifrancesca]

This is awesome, thanks for sharing and caring!

[ashley2]

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 ?

[ihorazh]

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!

[edtyli9]

Hi @ashley2,

@ashley2

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 ?

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.

[edtyli9]

Hello @ihorazh,

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

[ihorazh]

@ihorazh

m 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 for your reply, it is warnings in Xcode.

[ihorazh]

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

[edtyli9]

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

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

In-App Purchase - Apple Developer

How do you add an in-app purchase to an iOS application?

[mghatiya]

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

[Licorice]

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.

[co.ftm.lo]