Zebra DEV { TALK } Want to Integrate DataWedge or Printing into Your Cordova Application?
Articles Blog

Zebra DEV { TALK } Want to Integrate DataWedge or Printing into Your Cordova Application?

March 1, 2020


Everyone my name is Rob Gavin and thanks for
joining us today on the Dev Talk webinar series We really appreciate you coming on live and
we know you have a busy day so we always like to have a live audience Just as a couple of quick reminders before
we get into the topic of the day, if you missed some of the past presentations they are available
online through LaunchPad. The last three you can see on the screen. We did an update on Sept. 21 on our SDKS and
topics covering printing in a web app,best practices for indicate for Android. Check those out! The next presentation on Oct 19th and we are
going to present Enterprise Browser update. We have a release coming out and we are going to share all the great new
features and updates that have been added to Enterprise browsers. Be sure to tune in on Oct. 19th on the next
Dev talk Announced this last presentation: APPFORUMS
2017. We are definitely doing APPFORUMS next year
and we are in our early stages of planning them. We do have some dates to consider. In North America we will be holding an APPFORUM
in Las Vegas in May. Stay tuned for the exact dates and location. And in Europe, we are going to be holding
this in Prague in June. Plan on attending! It’s really going to be a good APPFORUM. We have some new topics and surprises! Stay tuned for some more updates. Today’s presentation will be about Cordova. Darryn will be covering how to integrate Datawedge
into your Cordova application and Robin West will be covering printing into your Cordova
application. Please type in the questions as the presenters
are talking and we will que those up at the end. Let me hand it over to Darryn. Thanks very much Rob for that introduction. What we are talking about is integrating Cordova
applications with separate mobile computers. If you go to developer.zebra.com you’ll see
we have an EMDK for native development, sharp development through Xamarin, or you can download
Enterprise browser or you can download Enterprise browser which
gives you JavaScript esque interfaces in to our API but we don’t have anything specifically
for Cordova developers. Purpose of the presentation – how you can
add those data capture capabilities into your Cordova app. Presuming everyone knows what a Cordova is
but I will briefly go over this . We’ll cover DataWedge and give you a background on this,
show you a live demo some benefits etc but we really want your feedback! The purpose of this presentation is to just
let you know how you can add those data capture capabilities into your Cordova app. Cordova is an overlying framework, an umbrella,
on which other frameworks are based. Mostly famously framegap which has a lot of
cloud services, ionic looks pretty and has angular integration,angular 2 integration
with ionic 2, and all of these are hybrid JavaScript development framework. This is just one slice of the whole ecosystem
types of applications you can use if you are a JavaScript developer Then the intervening years, we have seen mostly
recently like native script, progressive web app, just writing a mobile app, and integrating
with HTML 5. API’s to access the hardware. Coming to this presentation I am assuming
you have already decided on what app is best for me, for my app. And now I am writing a Cordova app and I need
to get that working on my separate devices. All of these Cordova apps have a base for
Cordova plug-ins, like ENG Cordova plugins – they are just different shims into the same
plug in framework. Cordova is more angular based There is a huge 3rd party directory We are going to be using third party Cordova
plug ins to integrate with the DataWedge service on the device. DataWedge is running on every Zebra Android
mobile computer. It gives you the ability to capture data with
a zero code solution so without writing any code I can configure all the bar codes scanner
on my device and I can output any of that captured data through keystrokes, through
android intense, etc. How do I do that capturing? Its encapsulated in a profile. You will have several DataWedge profiles configured
on your device. When you have a specific app that comes to
the full ground you then activate a specific profile. These are screen shots from DataWedge’s configuration. This is where we created a profile and enabled
it. This is a list of android views where when
you have this application in the foreground then this DataWedge profile will be enabled. The profile then has information on how we
are going to do data capturing. So how do we enter data? In this example we are using the bar code
scanner on the device so we want to enable the bar code scanner. When you have the bar code scanner you are
going to want to configure which decoders are enabled or disabled. Most efficient scanning, you will disable
all but one or two decoders you are going to work to use and maybe the parameters, as
well if these are maximum length of the bar code you want to scan. Some kind of check digit logic to make sure
you have scanned an accurate bar code. That’s all input configuration. Once DataWedge is captured that bar code we
don’t want to output that somehow. And this is where we get into the interface
to the Cordova application. This is just typical android intense so we
have enabled the intent output. It’s tough to give it an action. This action needs to correspond with the action
we are listening to in the Cordova application. And then you can choose to have DataWedge
deliver this intent to your application via start activity or assent broadcast. For these particular third party plug ins
I found, start activity the method of conveyance that seems to work the best. This is the architecture of what we would
recommend right now of Cordova application should it take the interface with Zebra bar
code hardware. You’ve got DataWedge in the yellow box portion
of the bottom there that’s going to interface with our Cordova application through 3rd party
plugins ( they are not from Zebra). And there are two API’s there. The instructions are sent to DataWedge from
the app might want to initiate a stand through software so the laser comes out all through
software without the customer having to press the physical scan button on the device. And then coming back the other way, once the
scan has been completed, we captured some scan data, we are going to want to receive
that. We are going to be receiving one plugin for
each direction of communication. Onto the demonstration. Pre-requisites, same as any Cordova applications
that you are creating in NodeJS and Cordova. Cordova version minimum is 5 for the part
that Robin’s going to be covering next. For this particular piece of the demo, I believe
anything as far back as Cordova 3 would suffice. I have here a live demo app. This one does not have anything in terms of
platforms. It just has android. It has web intent and intent plugin. I just went on Google to find these. This is the plugin to receive new intent. Function of the intent coming from DataWedge We will do that next. Again you can use whatever editor you’d like. We need to edit the android manifest to add
the contemp filter. I’m going to run this on the device. I have not gone ahead and modified the JavaScript
code on my computer ( previously done ) I will use Chrome Inspector. Here we have the Cordova application, nothing
special, just what you get out of the standard template. We now have an intent object. I did not choose these names. If you are designing the plugin ecosystem
for Cordova, they may have choosen some better names. Intent is how we listen for DataWedge intents
and web intent is how we send intents. Set new intent and we give it some function. Set in plug handler API. When the plugin receives the JSon object from
DataWedge, it actually pauses it into a hash so I am able to get this. This is the key. This is coming from DataWedge. If I press the actual scan button on my device,
I’m able to read back in through my Cordova app. DataWedge is handling all of the scanning
logic. It’s sending an intent to my Cordova. Cordova app is receiving that and doing what
it wants with that. If we want to configure data wedge on the
fly, there is an API available . Go to techdocs.com. The DataWedge API is here. You can disable scan entirely(whats highlighted)
, you can enumerate the entire scanners on the device, and a lot of our devices will
have two scanning interfaces. You might have a laser scanner, you might
be able to use the camera scanner, wireless scanner associated by bluetooth, so you could have the three scanners connected
and number them. The way you change the configuration, set
the decoders, or unset the decoders, that is all handled by DataWedge profiles You do need the ability to switch between
profiles but you can’t configure the scanner anymore gradually. You need a specific profile in DataWedge to
switch between the two. This is running and it has a broadcast receiver
so it’s listening for broadcasts. If I hold the device directly above the bar
code, as soon as I enter this data, I’m able to read the bar code. We have not written any native code, we have
used the plug ins to control the scanner and receive some scan data back. to disable to bar code scanner, let’s say
in a real app when you are scanning this bar code you are going to be doing some processing
on it. Maybe you are uploading it to a server, doing some price look up, you don’t want the
scanner to be enabled all of this time. You only want the scanner to be enabled when
you are ready to receive bar codes. And through the scanner plugin API we could
just disable bar code input Once enabled it will scan bar codes however. Here you may want this to be deployed on a
Samsung tablet and use Zebra processing to do the scanning there. There is a separate plug in for Cordova. You can have all third party plug-ins in your
app and if you are using a Zebra device use DataWedge, or if you are using a Samsung device use 3rd
party ZXing plugin to capture bar codes. You will create separate applications for
each device Since there is no native Java API available
for MSI capture you will have to use DataWedge It’s helpful to see all the code because if
there are any bugs with it, you can modify these plugins. There are other approaches to use DataWedge
with your Cordova application. If you type in zebracordova then a couple
of the top results in Google are likely to be other plug ins other people have written. There is another plugin written by me that
allows you to access the bar code hardware through our native API. Side bar illustrates Enterprise Barcode and
provide available scanners and you can enable or disable them. Another option is you can write your own plug
in. Your feedback is important. If you are not happy with this approach reviewed
today and want us to create a more traditional approach, please let us know. If you see things moving more towards the
native frameworks, let us know that as well. Now for questions…. DataWedge: Most people are used to running
this in keystroke mode so in other words when you scan a bar code it will act like someone
is typing on a keyboard and output those characters to where ever the cursor is. What Darryn was showing you was not that case
it was more programmatic control through intense. Q: have you tried using Cordova with a bluetooth
scanner RFD 8500? Darryn: No. Robin West: Working with printers using Cordova While we don’t have direct support for this
at the moment, there are third party, bluetooth and networking plugins that you could use
to communicate with the printers. If you want to send an image file to the printer
or do some of our template handling that becomes a little bit harder when you are trying to
work with some of the more standardized 3rd party plugins. You can create your own custom plugin. This is just to get you started. There are a couple of different ways to create
your own: use plugman or create your own files and folders yourself. you’ll need plugin.xml for creating your own
a source folder and www folder for JavaScript files. If you want Android and IoS you can certainly
add those in there. For Android you will also need to grab a file
in there that’s why we need Cordova 5.0. Once the folder structure is set up, you are
going to have to go into the plugin.xml file On the screen is an example of a plugin.xml
that you could use. Then there are a couple of JavaScript modules
here. These basically specify the JavaScript files
that you want to create. You’ll want to separate them out by specific
activities or objects that you want to be creating and working with. Once you have those modules added into there
we are going to add platform specific information. For Android you are going to want to create
a couple of different object files that are going to be related to javascript files. It’s best to have a one to one relationship
just to make it very clear. to anyone who would be using it – what files
go with what. I have a printer connection and a printer
discovery. If you are going to be doing bluetooth communications,
there are a number of different third party plugins that are needed in Android
to do that especially with the newer Android API’s such as access course location and bluetooth
discovery. and bluetooth privilege to do bluetooth discovery. For instance, finding bluetooth printers and
getting a nice listing of them you are going to need those two permissions. Doing bluetooth communication in general,
you’ll need the bluetooth admin as well. They have to be added to the manifest. And then put in the framework
for the extras.gradle. This is all of my jar files and the location
of where they are supposed to be put and installed. And then add in my source file and two java
files that I am creating. And the actual SDK jar file. These two we are going to create in order
to utilize the SDK itself and expose certain things to the JavaScript. In the extras.gradle, I have a whole bunch
of libraries in here. Go in the zebra link.SDK you will see all
of these files in the lib folder. That’s because it actually uses a bunch of
third party libraries to help and ensure communications is accurate and handle different functionalities
it has in it. You’ll want to make sure those are included
in your project as well so the API can actually work properly. Next create a java file. Pull in SDK
and the different objects and classes in there. We are also going to create an internal connection
object. This is used to handle all the connection
interactions with the actual SDK One thing you need to do when creating a Cordova
plugin is to do an initialize function. provide access to context and intense. You also have to override when you are creating
a plug in withing the java files, is the execute function. With the execute function, this is where you
handle all the different activities you want to have off of you main class or object. In here is the initialized connection
This is basically setting up and creating a new bluetooth connection. This example its doing a bluetooth connection
insecure. This example its doing a bluetooth connection
insecure. It could be a bluetooth connection, it could
be a network connection. Or use the connection factory in order to
create a new connection based on whatever the string value was. How does this work? This info is in the tech docs on techdocs.zebra.com. you can get access to the java and IoS API’s
in there. If you want to do a bluetooth connection there
is some coding there. You can use some of this basic stuff in order
to create the connection object. You can go through this and see all of the
different things you might want to have access to within this class; opening the connection,
closing the connection, building onto your connection. Get status on printer connection. For printing with our SDK you will want to
open the connection send data using the right and then close the connection. When you open the connection, check the printer
status. These are some of the main things to do when
working with a standard connection. Once you have these two overwritten methods, the initializing execute in your java file. Then create a JavaScript file to actually
match it. In the JavaScript file, you have created the
printer connection object and the JavaScript as well. Creating prototech functions in here to work
with the javafile. using the Cordova plugin execute functions. Create an initializing function which uses
the initialize connection from our java. Make sure those two things match up. Now give it a printer address which is in Json format. That is where we are pulling it from in this
particular function here. There are success and error callbacks in here
as well to make it clear that when doing initialization there is netsuccess or
an error. Just overwrite all the other ones with prototypes
in the JavaScript. The most important thing create a module.export to provide this JavaScript into the window
for the application that is being written with this particular plugin. If you are doing IoS, or both Android and
IoS, and/or other things you are going to want to create new class files for each feature from each of the different platforms you are
working with. Make sure each of those classes exposes the same functions in the same way. and bluetooth privilege to do bluetooth discovery. For instance, finding bluetooth printers and
getting a nice listing of them you are going to need those two permissions. Doing bluetooth communication in general,
you’ll need the bluetooth admin as well. They have to be added to the manifest. And then put in the framework
for the extras.gradle. This is all of my jar files and the location
of where they are supposed to be put and installed. 34:20
And then add in my source file and two java files that I am creating. And the actual SDK jar file. These two we are going to create in order
to utilize the SDK itself and expose certain things to the JavaScript. In the extras.gradle, I have a whole bunch
of libraries in here. Go in the zebra link.SDK you will see all
of these files in the lib folder. That
That’s because it actually uses a bunch of third party libraries to help and ensure communications
is accurate and handle different functionalities it has in it. You’ll want to make sure those are included
in your project as well so the API can actually work properly. Next create a java file. Pull in SDK
and the different objects and classes in there. We are going to create a new object here,
the printer connection class and it’s going to extend the Cordova plugin. We are also going to create an internal connection
object. This is used to handle all the connection
interactions with the actual SDK One thing you need to do when creating a Cordova
plugin is to do an initialize function. provide access to context and intense. You also have to override when you are creating
a plug in withing the java files, is the execute function. With the execute function, this is where you
handle all the different activities you want to have off of you main class or object. In here is the initialized connection This is basically setting up and creating
a new bluetooth connection. This example its doing a bluetooth connection
insecure. it could be a bluetooth connection, it could
be a network connection. Or use the connection factory in order to
create a new connection based on whatever the string value was. How does this work? This info is in the tech docs on techdocs.zebra.com. you can get access to the java and IoS API’s
in there. If you want to do a bluetooth connection there
is some coding there. You can use some of this basic stuff in order
to create the connection object. You can go through this and see all of the
different things you might want to have access to within this class; opening the connection,
closing the connection, building onto your connection. Get status on printer connection. For printing with our SDK you will want to
open the connection send data using the right and then close the connection. When you open the connection, check the printer
status. These are some of the main things to do when
working with a standard connection. Once you have these two overwritten methods, the initializing execute in your java file. Then create a JavaScript file to actually
match it. In the JavaScript file, you have created the
printer connection object and the JavaScript as well. Creating prototech functions in here to work
with the javafile. using the Cordova plugin execute functions. Create an initializing function which uses
the initialize connection from our java. Make sure those two things match up. Now give it a printer address
which is in format. That is where we are pulling it from in this
particular function here. There are success and error callbacks in here
as well to make it clear that when doing initialization there is netsuccess or
an error. Just overwrite all the other ones with prototypes
in the JavaScript. The most important thing create a module.export to provide this JavaScript into the window
for the application that is being written with this particular plugin. If you are doing IoS, or both Android and
IoS, and/or other things you are going to want to create new class files for each feature from each of the different platforms you are
working with. Make sure each of those classes exposes the same functions in the same way. When you are creating your javascript file
that they can call the same functions the same across all the different platforms that
you are using. Each time you are going to be overwriting
the execute functions, and the initializing functions in order to create your classes
on there. With JavaScript the biggest thing is to create
the different functions you want to expose out to the other applications. Make sure to export the object in the module.exports. Once you actually have a full plugin, there are a couple of different ways to install
it. You can use plugman again, and use that to
install it into your application or you can use Cordova directly. In this example, this is how you would use
it once it’s installed. put success callback (successValue) in there
and here we are going to say we successfully did it. Of if there is an error we are going to show
that (errorValue) then there is the bluetooth mac address of
a printer. that will create a new connection object Review: techdocs.zebra.com, shows different
API’s you can use to embed or create a new plugin for Cordova . IoS as well. PC which is java based which you should be
able to add that as well. BTLE support libraries you can use as well. There are 3rd party ones out there that you
can use for doing basic communications over doing BTLE. If trying to covert images or work with templates
that we really build into our for SDK, then go down this route of utilizing the SDK
to do those things. On the Developer Portal there is a printer
page as well. A place to review and also ask questions about
anything. Additional questions about this presentation,
please post on our Events page so we can address these. The SDK and Cordova Android plugin address
are here as well and also includes most of the information that has been presented here
today. Questions? Q: How do you print to a non link OS printers
like the 105SL+? Response: You can actually. We
have an SDK that works with those older devices. We recommend using the Link OS SDK for our
software development even for non Link OS printers. While we recommend this, but we are finding
that the support is not as good as it used to be. As far as across older devices as well. There is a LINK OS Multi platform SDK API that is under the Zebra link environment. We do not update this very often, but it does
have the capability for our non-Link OS older printers. It should be useful for those working on older
printers that are running into issues with the Link OS SDK. Question: If you have a web app, when do I
use Cordova as opposed to an enterprise browser? When do I use one over the other? If your primary intent is to work with Zebra
devices, enterprise browser has everything worked out
for you and we are fully supporting how that works and how that is handled. And what you can do as far as working with
Zebra on that. If you intend to go across non Zebra devices,
then your options are more open but enterprise browser becomes less of an
option for you. Enterprise browser is just a browser. And the comparison is the same as Cordova vs. a mobile application. Cordova you are creating an app. Its install able, you can brand it with a
mobile app. You have this issue with discover-ability. You
can run apps in different tabs and that is another limitation of Enterprise browser. You can only have on app running at a time. Wrapping up, we encourage you to give us some
comments or feedback for this and for the upcoming APPFORUM for next year. If there is any particular presentation or topics or
anything you would like to see, please provide us that feedback. Thank you to Darryn and Robin for presenting today. We hope you will join us at
the next Dev TALK Oct 19th Learn New and Exciting Enterprise Browser Updates !

Leave a Reply

Your email address will not be published. Required fields are marked *