Architecture Questions Related To Separate 3rd party Native SDKs

ionic-v1
1

Hi guys,

Angular focused web app guy here who has a client that started off wanting a web app but now is interested in mobile apps as well. This is because I can not perform credit card swipes via a web app. Most likely I will be referring them to a mobile expert but saw Ionic and have a couple questions.

I understand that I can separate my api and have the web app/mobiles apps both call it. However, I am interested in using CardFlight which is a credit card swiping (payment) solution that integrates well with Stripe.

So I guess my question is how would that interact with Ionic in terms of a backend? The CardFlight SDK has one version for iOS and one for Android. Does that mean I would still need to make separate native backends for each app? Should that be the case how does "merging’/“reusing” the front end created in Ionic come into play?

I guess I am trying to avoid being hacky here and only want to use Ionic if it is solving an issue in my current situation rather than making it more complicated. What are your opinions?

Thank you tremendously for your help ahead of time!

2

My app also runs as a desktop app, a website as well as a mobile app (iOS/Android).

What I do is check if the platform I am running on is a device (window.cordova or ionic’s platform check APIs and depending on platforms, I invoke cordova code or not. If you are using 3rd party native SDKs wrapped as cordova plugins, the plugin invocation should be common for all mobile platforms (depending on which platforms the plugin supports). So if you are only supporting mobile apps, that same plugin interface will work for both (the cordova wrapper takes care of platform specific native invocations). If you plan to use the same app for a non mobile platform (say Desktop or web) then you need to find a library (JS or otherwise) that works for your non mobile platforms and switch between them depending on the platform identification.

If your 3rd party Native SDK is not wrapped in a cordova plugin, you need to create a wrapper.. Once you do that, the wrapper takes care of platform specific code.

My code is common across all these platforms. If it wasn’t it would be impossible for me to manage it.

1 Like
3

Hey thanks for the reply, sorry the delay I was reading through your provided links.

I believe I understand how Cordova from a front end perspective can determine the device and the call to the backend with a parameter that identifies the platform (iOS/Android). I am falling short in terms of understanding how the Cordova wrapper works conceptually on the backend.

Is this handled on a plugin by plugin case? For instance let me mock up a quick flow to demonstrate/guess what is happening:

  1. Make a Cordova Application and get Ionic installed (http://ionicframework.com/docs/guide/starting.html)
  2. Make a Cordova plugin that can handle an iOS/Andorid param
    2?) This plugin will be able to host Objective-C / Java SDK depending on whether or not the iOS/Android param version was called (is this true? I am guessing when making the Cordova app it builds separate platform specific code bases )
  3. In Ionic on the “Receive A Payment” button click, I call the plugin using Cordova.exec which is going to do some magic based on the device as a param and call the proper Objective-C or Java version of my code/SDK. (In other words on iOS Cordova is running as Objective C and on Android it is Java - there is no intermediary language the Cordova wrapper is used as an abstraction)

Am I understanding that correctly?

4

(caveat: I’m not a prolific plugin developer - just wrote a few to try out, so I’m not really up to date with the latest and greatest on this front)

Correct. A cordova wrapper is a thin layer that lets you invoke a “javascript function” that in turn calls a native SDK API.
I found the “hello world” plugin example to be a good start.

When you write a plugin, the file plugin.xml defines which native files (.java/.m/whatever) maps to which platform. The magic of moving from JS land to native land is where you call cordova.exec inside your JS wrapper. The cordova plugin guide outlines this well.

So to step back,

  1. cordova will exist if you are running on a mobile device it supports and have installed cordova

  2. The cordova plugin wrapper you write should take care of invoking platform specific code via the JS bridge you write for it. The plugin provides a single interface irrespective of mobile platforms (configuration may be different, if need be, on a per platform basis - a good example of this is the PushPlugin cordova plugin - push notifications - Android and iOS have different config options)

  3. Cordova and ionic are separate. Ionic is the ‘front-end’ (good UI components, built on top of angular etc.) while cordova is the ‘device backend’ which allows you to take to the native OS APIs via plugins. Note that ionic provides ngCordova for ionic-v1 apps and ionic-native for ionic-v2 apps that makes it easier and more intuitive to use cordova plugins inside your app.

1 Like