Develop Hybrid App with Camera using SAP Web IDE

[midhun_vp]

SAP Web IDE is a browser based IDE for developing SAPUI5 based applications. It lets you to rapidly design, build and deploy Fiori like apps based on SAPUI5. Web IDE started supporting development of hybrid applications, the hybrid apps are based on Cordova framework. So you are free to add any Cordova plugins to your SAPUI5 project to access the native features of the phone in few clicks. In this UI5 based mobile app example I am accessing camera of my phone.

• • 
    Prerequisites
    
  
  
  • 
    Verify Hybrid App Development Environment
    
  
  
  • 
    Setting up Hybrid Toolkit Communicator
    
  
  
  • 
    Build Hybrid Companion Container App
    
  
  
  • 
    Create Hybrid Project
    
  
  
  • 
    Configure Device and Run the App
    
  
  

Prerequisites

Java Development Kit (JDK)

Apache Ant 1.8 or later

Android SDK - Set system environment variable ANDROID_HOME to the location SDK. Add Android tools (C:\adt-bundle-windows-x86_64-20140702\sdk\tools) and platform-tools to your path.

Node.js

Cordova - Recommended version is 3.6.3-0.2.13

Git

Hybrid App Toolkit Add-on

SMP 3 SP05 SDK

Verify Hybrid App Development Environment

To verify the development environment extract Hybrid App Toolkit Add-on and open the hybridapptoolkit.communicator-1.0.0\installation folder and run check_env.bat.

Setting up Hybrid Toolkit Communicator

Hybrid Toolkit Communicator invokes the Hybrid App toolkit from Web IDE over HTTPS.

Navigate to the folder ..hybridapptoolkit.communicator-1.0.0/installation, right click setup.bat and Run as Administrator.

In this step you are prompted for your Web IDE host URL and set a keystore password.

Next, open the hybridapptoolkit.communicator-1.0.0 folder and start Hybrid App Communicator by double clicking run.bat.

Build Hybrid Companion Container App

The companion app is used to preview the hybrid app developed using Web IDE.

To build companion app, open command promt, change path to ..hybridapptoolkit.communicator-1.0.0\WebIdeCompanion\companionapp and run the command npm install.

Edit config.json file present in the folder ..hybridapptoolkit.communicator-1.0.0\WebIdeCompanion\companionapp as given below.

pluginDir refers to the SMP SDK installation path.

Then, run command:

node create_companion_app.js

Create Hybrid Project

From Web IDE, to enable external plugin: Select Tools > External Plugins > com.sap.webide.hybrid.

Refresh Web IDE, then create a Mobile Kapsel Project and replace the index.html with index.html.

Configure Device and Run the App

To configure device right click on project> Project properties> Device configuration and choose a mobile platform, camera plugin and Save.

To preview the app right click on the intex.html> Run > Preview on > Android device.

Happy Coding !

Midhun VP