Forum Documentation Showcase Pricing Learn more

Native MOBILE app - like cheap or FREE 📱 with FREE & Unlimited PUSH notifications! 📬


#1

!!!Important update, since codurly isn’t replying, please be careful when you purchase its plugin. I’ve made a free one for OneSignal, you can find under my username in the plugins area.
Hey guys,

Thanks for all the support so far. I as mentioned, I want to give back not to only take so today, in this post, I will teach you how to make native apps (or let your customers believe that you have a native app).
I saw this plugin from codurly and I thought to myself, if it works on web, it must work on mobile too, just need the SDK. How to make that since I don’t code? Hmm…let me search for an already built web view app for both platforms, one that has OneSignal integrated (I knew about them for a few years now, after they just launched).

So here is what we need/going to do:

  1. Build your app in bubble.
    1.1 It can be full size and with responsive design.
    1.2 It can be sized for mobile device only (but in this case, please don’t forget about tablets).

  2. For the mobile app, what will do is a native app (more like a native container/wrapper) that will load our website (bubble app) in web view. That is all that it does: it loads the URL of our bubble app.
    When we are doing, we need to consider some facts:

  • when the page is not available due to internet connectivity (so we are not talking about page not found as it will go to our 404 page), it will display the browser way of saying: http://yoububbleapp.url.tld/whateverPage is not accessible. Please check your internet connection and try again (or something like that. We don’t want that, for a couple of reasons 1. we don’t want our customers to know that this is not in fact a native app. 2. Security reasons: knowing that is an website, it will try to hack it with tools dedicated for hacking websites, searching for specific vulnerabilities. 3. It doesn’t look good.
  • we will want to have push notifications for general usage and for specific action/target/user.
  • we want that Apple (Google approves almost anything) will approve our app. They have some policy that an app must have something different, mobile app specific that can do, and can’t be done via safari. Here I think that mobile push notifications is a strong one. Another would be to only have mobile version of the bubble app accessible through the mobile app, so the URL that we load inside the mobile app will not be made public on the website. E.G. www.bubble.com is the landing page. here we will explain how to download the apps from Google and Apple. The URL like www.buuble.com/index2 or /mobile or /whatever is that you want to call it, will be accessed only through our mobile app.

2.1. We can make it free so we will find a webview project/demo on:
2.1.1 iOS: https://github.com/geocolumbus/wkwebview
or similar and the same for
2.1.2 Android https://github.com/delight-im/Android-AdvancedWebView

You will need Xcode for Apple and Android Studio for Android just to build them.
Then you need developer account.

2.2 Developer Account
2.2.1 Apple: developer.apple.com - it cotsts $99/year (need to verify you as individual or company)
2.2.2 Android: https://play.google.com/apps/publish/signup - it costs $15 one time only

  1. Push Notifications
    We need a service, that will do this pushing of the messages.
    3.1.First of all we need a plugin to do this job for us in bubble. Here it comes in handy https://codurly.com/webnotifications
    3.1.1.If we go to Plugins and add a new plugin, searching for OneSignal (write that in one word) will show this:

    This will be the bridge between our app, and the OneSignal platform. It will grant us the option to send a mass push notification message to all the users that are subscribed.
    3.1.2 If we want to send push notifications to a specific user, based on an action/trigger inside its account, then we will subscribe to the premium version (it’s only $6 one time only fee). We will then have the premium version installed like this:

3.2 As we did that, we will need to create a free account on www.onesignal.com.
3.2.1 Following the instructions on Codurly’s website, (better graphics and even text instructions will be available soon, as Nic told me) https://codurly.com/webnotifications (just tap/click on the Documentation tab at the top).

3.3 After we setup all fo these, we will need to follow the documentation provided by OneSignal to create certificates for push notification on iOS and server settings for Android:
3.3.1 Android: https://documentation.onesignal.com/docs/generate-a-google-server-api-key
3.3.2 iOS: https://documentation.onesignal.com/docs/generate-an-ios-push-certificate

3.4 Web view turn-key. Here is the web view that I used, and it’s quite cheap. We don’t have to wrap our brain around too much code as we would with github. We have what it’s called SuperView for iOS and Android:
3.4.1 iOS: https://codecanyon.net/item/universal-webview-ios-app-push-notification-swift-admob-inapp-purchase/17383449?s_rank=1
3.4.2 Android: https://codecanyon.net/item/universal-webview-android-app-push-notification-admob-inapp-billing/18033758?s_rank=2
The great thing about these is that they also have ads and in-app purchase integrated. So you can display adds in your app like the bottom one, or splash screen (entire screen) and give the user to opt-out of these with a one-time remove ads in-app purchase. Now that is something that you couldn’t have before.

I will show you how it is in iOS (you have documentation for both platforms)


So we have this SuperView.plist. Here we will add our info like this:

  • URL: is the link to your bubble app. We don’t need a domain name for this, if we only use mobile apps and no website. But it will display on the bottom that it is built on bubble and it will take some serious space from the our app view, especially on smaller devices. We can leave the URL string blank, and when we run the app it will load the index.html that will allow us to test some features. Then, when we add the URL, the index.html from within the app will be ignored and load that URL. Apple wants HTTPS, don’t forget about that

  • Toolbar means a bar at the end showing navigation arrows. You can turn it on/off and see how it looks.

  • Then we have advertising options

  • The OneSignalAppID you will get from OneSignal.com:

  • PullToRefresh I suggest we keep it to NO. So if the user will pull from top to bottom, it will not act as if it is in Safari.

Similar is for Android, but I didn’t get there yet and I am not so familiar with Android Studio. If you can’t get through the documentation, maybe someone here can help you. Just ask, I will try too.

3.5 When a new customer/user opens the app for the first time, it will prompt to allow messages to be send via push notification. If the user says yes, then OneSignal will assign a unique “PlayerID”. We need this PID so we would know TO WHOM we will send a custom message when needed. While you were watching the tutorial from Codurly, at the workflow on Run JavaScript, please replace that code with this one:

For some reason the code won’t get right here so get it from pastebin: https://pastebin.com/FxMdzAZW

This is where the magic is happening. Since we have the OnePlayerID in the mobile native app, we need to get it into Bubble. So this bridge will ask the app what the PlayerID is, and then tells OneSignal via Codurly’s plugin to send THAT message to THAT specific user/PlayerID.

  1. Apps.
    Now all you have to do, is to:
    4.1 get icons for your APP I use https://makeappicon.com/ for both iOS and Android (even watch);
    4.2 get a spalsh screen;
    4.3 Upload the app to the stores and good luck!

I hope I didn’t miss anything.
Codurly is working on a new plugin with a turn-key solution. I wanted to create a solution similar so this is how I know about the new plugin and solution, they told me when I spoke to them. Until then, you have this.

So a quick recap:

  1. Free solution for general/mass push notification.
  2. Free solution + $6 one time for mass + individual notification
  3. Already done WebView apps + $6 one time for individual notification that won’t cost more than $50 (depends on where you are located, codecanyon will apply taxes at checkout)

If you have any questions please don’t hesitate to ask.

I will help one app/week to publish the app free on my accounts so you won’t need to purchase developer accounts.


How to deploy a Bubble application into App store?
PhoneGap not showing my bubble app
Adding app to web
How to put my bubble app to the App Store
[New Feature] Audio recorder element
Do not display URL on geolocation in webview
OneSignal FREE plugin for FREE and UNLIMITED Push Notifications 📱
In app notification // Pull notification
Compiling mobile app gives me blue screen
#2

Hi

This is impressive documentation, thanks for that.
Do you have an app already working with this model ?

I was actually thinking of using Bubble but to build my mobile only app, that way I can leverage the no-code and reusing the plugins that I need (Facebook, etc…)
But I wanted my app to be free and that I can use the ads to monetize (with the pay to not have ads displayed)… Do you know if this would work ?

Honestly I think IOS is my main target as most people will have that device, but Android could also be my starting launch. My main hurdle for now is no mac :wink: but I can cross that bridge once I get there.

When you talk about the size of the screen, how is it managed ? Should I use the biggest resolution of the tablet and design my bubble app, and then the sdk (apple or android) will handle the resize ?

Thanks for this topic again


#3

Yes I have but it’s not on the market yet as my (bubble) app is not finished.
I’ve tested everything and it works perfectly.
Yes you can use ads and then use an in-app purchase of whatever value you desire to remove the ads.
Best would be to learn about bubble’s responsive engine (when you tap on responsive
17
You can check on mobile how it will look (portrait and landscape).
Also, there’s the option to force a mode (portrait or landscape) in xcode.
So based on the responsive rules you will get it okay on mobile and tablet.
You can give me the xcode files and I can build the app for you, don’t worry about mac.

Good luck!


#4

Hi thanks
I might try android first still so I can save on cost (maybe) and test thoroughly although I don’t have devices I beleive with Android it is easy to test using simply a computer and emulate different versions. (is this still true ?)

So the push notifications are basically to make sure that Apple accepts your app right ? and this notification is like the popup that some apps send whenever you have extra lives or the game wants to remind you to play… would it be ok to have that set up but only send notifications whenever the app is updated ?


#5

It’s my thought on the problem, that apple says you MUST have something different from a simple website.
Yes, you can.
And yes, that is push notification, when an app sends a message/reminder of something. It’s actually the server that sends a message to the user via push notification.


#6

Perfect timing @mvandrei . :grinning:
I’ve been working on the Superview integration.
I’m currently stuck at the point of getting the OneSignal Player ID from the iOS app and into my Bubble database. It looks like this post addresses that problem.

Would you mind clarifying something?

Did you put the entire Pastebin code into your Bubble page or just the function definition? Did you put this code into an HTML element or somewhere else on the Bubble page (for example Settings>SEO>Script in Header or Body)?

I assume you are then using the JavaScript to Bubble toolbox to get the “bubble_fn_1(id)” into Bubble. Is that correct?

Thanks for this detailed explanation.


#7

Thanks for the documentation.


#8

Yes, you are correct. Please see codurly’s documentation for that:


Basically you need to create the bridge between phone and bubble, get the ID, give it to an element, then get it from that element into the database and assign it to the user :slight_smile:
And yes, you need the entire code from pastebin to paste it in your run this javascript workflow.
It’s a bit more than just click install and done but it will do the job. Once configured you will even forget about it.
@codurly maybe you can share those videos on something else so we can better understand what’s in them :blush: Thanks!

Here are the settings:

L.E. be sure that the javascripttobubble is on the page on which the user will be redirected after login! The user must be logged in in order for the entire system to work (you know…current user’s…)

Maybe this is a good chance to ask bubble (don’t know if they will see it but it’s worth a try) to change the text when we perform some changes on the app. Since we will going to use web views as native apps, the part where it says that we need to click there to refresh the PAGE. Could you please change that to… APP? Thank you in advance!


OneSignal FREE plugin for FREE and UNLIMITED Push Notifications 📱
#9

my pleasure. Hope it helps.


#10


Here’s a proof of push notification working.
It was sent as proof in an contradictory talk with someone that’s why the message is like that :slight_smile: Was just proving that you don’t need to pay more than $2000 for push notifications on bubble. You can even get them for free.


#11

This is great @mvandrei. Great documentation.

Did you incorporate login using facebook? My understanding web view on IOS can not handle login using facebook because facebook actually opened a new window to login and then return back to original page. I think web view doesn’t allow multiple web pages.


#12

Thanks @mvandrei,
Those screenshots and the cordurly videos were super helpful.
I successfully added the Player ID from my test device to the Bubble user database! Now I’m just waiting for the premium version of the OneSignal plugin to show up in my account, so that I can replace the majority of our Twilio SMS’s with push notifications.

Next step is to figure out how to remove all the unnecessary frameworks from Superview to improve load times.


#13

you can use the plugin from bubble. It works just fine.
Let me know if you have issues on this regards.
You are just loading the website… with this webview. If you want to login via FB through the app (webview) itself, then you have to send that data to the bubble app… it’s more complicated and I don’t see why you would do that.


#14

Woohoo! Congrats!
Glad to hear that.
Yeah, this is the right thing to do, why pay SMS when you have free and unlimited push notification? :slight_smile: You can replace all of them not only the majority.
As for now, since this is a webnotification plugin (this is what codurly created it for) it won’t increase a badge number on the app’s icon like 1 then 2 then 3, for as many notifications there are. But it will be fixed with the new product they are launching.

BTW, I didn’t managed to to this yet, maybe someone could:
when we receive the push notification is all good, but if you tap on it by mistake, or the text is truncated… wee need to show the notification message as a pop-up inside the webview. We can achieve that via the iOS and Android SDK of OneSignal. Can anyone make that and share? :slight_smile:


#15

Hi,

One more question please, when you design in Bubble do you need to consider not using several pages and using groups that hide and mask ?
Or you can just create as normal website and then this wrapper will work out fine.

Thanks :slight_smile:


#16

you can use groups that hide when empty, if that is what you want.
You can create a website but keep in mind you have to go back, to access the other pages so a menu comes in handy :slight_smile:


#17

The OneSignal plugin doesn’t seem to recognize that I’ve entered an API key already. Has anyone else encountered this problem? I’ve filled out the Authorization headers on the plugin page with Basic XXXXXXXXXXXXXXXXXXXXXXXX as directed in the video.

@codurly
Any Ideas?


#18

Be sure to have a BASIC and a " " space between BASIC and the private key. See in the example.
Hope that fixes it.

Try all capital letters at BASIC


#19

I reverted back to the 0.0.1 - Initial release and it works. However, the same problem exists with 0.1.0 and 1.0.0 release.


#20

try to uninstall the plugin refresh the browser itself (clear cache/cookies), restart browser, and reinstall plugin.