!!!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.
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:
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).
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
- 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.
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.
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:
- Free solution for general/mass push notification.
- Free solution + $6 one time for mass + individual notification
- 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.