Streamline Hybrid Application development using Web IDE and the Hybrid App Toolkit Add-on
Introducing the SAP Web IDE Hybrid App Toolkit Add-on
In my last post, I wrote about our plans to implement hybrid development capabilities in the Web IDE. I hinted at some capabilities that were coming that allow Web IDE to interact with a local Cordova development environment. Well, the tools have been released, so it’s time to tell you about them.
What we have released is the SAP Web IDE Hybrid App Toolkit Add-on; the toolkit only works today with Web IDE running on the Trial Edition of the HANA Cloud Platform. The software is available for download from SCN (https://store.sap.com/sap/cp/ui/resources/store/html/SolutionDetails.html?pid=0000013586) and documentation for HAT is available as well at https://scn.sap.com/docs/DOC-60529. This is an early preview of the software, that’s why it’s running in the trial environment, and it cannot be used in production environments (for now).
The Hybrid App Toolkit (HAT) consists of three components:
- Web IDE plugin
- Hybrid App Toolkit Connector
- Web IDE Companion Application
The toolkit supports hybrid application development for Android and iOS, support for Microsoft Windows is on the roadmap for a potential future release.
The remaining sections of this post will describe each of the components and how they work.
Web IDE Plugin
The Web IDE Plugin adds mobile hybrid application awareness to Web IDE; capabilities that allow a developer to set mobile properties within an application. With those properties are settings that define the target mobile device platforms for the application as well as the Cordova or SMP Hybrid SDK (Kapsel) plugins that are used by the application. Developers use Web IDE to add Cordova plugins to the project then code the application’s interaction with those plugins adding code as needed to deliver whatever capabilities are required by the application. The plugin also provides code completion for the hybrid plugin APIs and a catalog of code snippets a developer can use to quickly inject plugin code into the application.
When it comes time to test the web application, Web IDE provides several options. Web IDE already has live preview capabilities, the Web IDE plugin will add capabilities that allow Web IDE live preview to simulate the native capabilities exposed by the plugins (and code) added to the project (through mock data or perhaps someday some alternate mechanism).
A Web IDE developer may also want to test the application on a physical device or on a device emulator or simulator (Google provides Android emulators and Apple iOS simulators; yes, there is a difference). Web IDE can display a QR code a developer can use to launch the web application in a mobile device browser – simply point the device camera at the QR code and use a code scanning application to load the application URL wrapped in the QR code. To test the web application on a device emulator or simulator, a developer can simply copy the web application URL and paste it into the browser on the simulated device or into the SAP Fiori Client’s configuration and test away.
Hybrid App Toolkit Connector
If the web application is a hybrid application and makes use of native APIs, then testing the web application in the browser may not be enough. The application may utilize mobile device-specific hardware (such as the camera, accelerometer or compass) or make use of a mobile-specific native API (such as the Contacts application or network information APIs) that are not available in the browser or inside Web IDE’s Preview mode. The Web IDE may be adding capabilities in the future that can make some of this testing easier, but for right now for some things you just need a mobile device.
To accommodate this, the Hybrid App Toolkit provides the Connector (In the initial release, this component is called Communicator, this name will change to Connector in the January update of the toolkit so I’m going to use the new name here), a locally installed module that allows Web IDE to communicate with a local Cordova development environment. A developer installs and configures a local Apache Cordova development environment (installing Git, node.js then platform-specific tools such as Java, Ant (or Gradle) & ADT for Android or Xcode and some Xcode command-line tools for iOS development) before installing HAT.
With that in place, the developer simply right-clicks on a project in Web IDE and selects Deploy –> Deploy to local Hybrid Toolkit. Web IDE opens a connection to the Connector and passes it the Web IDE project configuration file and associated content. The Connector parses the project’s configuration file then uses the local Cordova development environment to create a new project, adds the selected mobile device platforms and Cordova or Hybrid SDK plugins then copies the web application content into the new Cordova project.
Developers can also select Run on –> Android Emulator/Device or Run on –> iOS Simulator/Device. With this option, the Connector will initiate the Cordova build process for the selected platform and launch the compiled application on a connected device or the appropriate device emulator or simulator.
Two of the drawbacks of the current implementation of this is that the Connector creates the full Cordova project every time, so there’s no incremental update nor is there any way to upload any changes you’ve made to the local project back to the Web IDE. My expectation is that we’ll fix these two limitations in a future release.
Hybrid App Toolkit Companion App
If you think about the process I just described, you may have noticed that there’s a lot going on there and it will take a while to create, build and deploy the native project to the device or simulator. You’re right and we don’t expect developers to use this approach for the majority of their testing. The deploy to device option is for final testing, once you’ve worked through all of the kinks in your application and are ready to deploy the application to alpha or beta testers. For iterative testing, we have another approach you can use.
Included with HAT is a native application project we’re calling the Hybrid App Toolkit Companion App. The Companion App is a native application developers can use to streamline testing of hybrid applications created using Web IDE on a mobile device. Instead of packaging the web application content into a Cordova application as described in the previous paragraphs, the Companion App allows a developer to make changes in Web IDE and see those changes reflected immediately in the Companion App. The source code for the Companion App is included with HAT and eventually we hope to have a version of the application available in the public app stores.
Let me explain how it works.
A developer working in Web IDE creates an application and publishes it on the Hana Cloud Platform. Then, within the Web IDE, the developer can initiate a live preview through the Companion App. Web IDE will push the web application URL through the Connector to the Companion app. With the URL in place, the application can be instantly viewed within the Companion App and refreshed whenever the content on the server is changed.
We hope to simplify this process in a future release by enhancing the Companion app with the Kapsel Barcode Scannerplugin. With this in place, a developer will be able to populate the web application URL in the Companion App using the QR code capabilities already included in Web IDE.
The Companion App contains all of the Cordova core and Hybrid SDK (Kapsel) plugins, so any code within the web application that utilizes the plugin APIs will work within the Companion App.
This approach dramatically reduces the cycle time when iteratively coding and testing changes to a hybrid application, especially when native plugins are involved. The Companion App is similar to the PhoneGap Developer App or the AppGyver Scanner application, but has direct integration with Web IDE and supports the SMP Hybrid SDK (Kapsel) plugins as well.
As you can see, the Web IDE team has been busy and taking a serious look at the hybrid developer use cases. The toolkit is free, available to anyone with a Web IDE license. What’s available today is a trial version of the toolkit; we will continue work on solidifying the toolkit’s capabilities and make it available for productive use soon.
Note that these tools are for Apache Cordova development scenarios. It’s easy to think that this toolkit was created specifically for SMP Hybrid SDK (Kapsel) developer, but that is not the case. The Hybrid SDK (Kapsel) is a set of plugins for Apache Cordova, but there are many Web IDE developers that won’t be using the Hybrid SDK. That’s why HAT supports Cordova developers as well as SMP Hybrid SDK developers.
As we continue to enhance the toolkit, I’ll post updates here. Stay tuned!
In my next post, I’ll show you how to install and use the Hybrid App Toolkit; hopefully before the end of the year.