Develop Hybrid App with Camera using SAP Web IDE
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.
Java Development Kit (JDK)
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.
Cordova – Recommended version is 3.6.3-0.2.13
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:
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 !