Technical Articles
Hybrid Application Development for Beginners
Hi all,
I hope this blog post will be helpful for you to kick start with Hybrid app development.
In this blog we will cover the below topics,
- Cordova setup. https://blogs.sap.com/2020/06/25/cordova-setup-for-hybrid-application-development
- Creating Cordova app.
- SAPUI5 Hybrid App.
- Debugging
- Using Cordova plugins in SAP UI5 – Hybrid App.
- Generating Signed APK. https://blogs.sap.com/2020/06/25/hybrid-application-generating-signed-apk-for-intune-and-app-center
Before we get into the hands-on, let’s find the answer to a few questions which runs in the mind of many beginners
What is Hybrid App?
- Hybrid App – “One code base runs in multiple platforms”
- It is a software application that combines elements of both native apps and web application.
- Hybrid apps are essentially web apps wrapped in a native app container.
- It runs in a local container and affect the device’s browser engine (but not the browser) to render HTML and process JavaScript locally.
Why Hybrid app?
- It reduces time by writing code at once to accommodate multiple platforms.
- It offers a consistent and flawless user experience across different platforms.
- It supports an offline capability.
- It offers high speed and performance similar to native apps.
What is Cordova?
Cordova is an open-source mobile development framework. It allows you to use standard web technologies such as HTML5, CSS3, and JavaScript, so that we can build one code base which will be used on all platforms. It allows us to avoid platform specific developments
Cordova setup.
Refer Blog Post:https://blogs.sap.com/2020/06/25/cordova-setup-for-hybrid-application-development
Creating Basic Cordova App
Step 1: Create Cordova project
Go to the directory where you need to create your app. Here I am choosing C drive.
Step 2: Add Platforms
Go to project directory (i.e. Sample) and add the platforms as below,
Add all the targeted platforms of your app with the below commands,
Cordova platform add android
Cordova platform add iOS, etc…
In order to add a platform with specified version,
Cordova platform add android@6.2.3
Step 3: Run the App
Make sure whether your device is connected properly by typing ‘adb devices’ in your cmd.
If you can’t find your device in the attached list, Enable the developer option and allow USB debugging in your mobile/tab. Added to that you need to enable file transfer.
Now go to project directory (i.e. Sample) and type ‘Cordova run’.
You can see the application launched in your connected devices and will display a screen as in below screenshot.
Step 4: Find the Generated APK in below path.
SAPUI5 Hybrid App
Step 1: Open web IDE and create an SAPUI5 application
Step 2: Add your own functionalities. Here I am just adding a button in view. And exported it.
<mvc:View controllerName="UI5.controller.View1" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc" displayBlock="true"
xmlns="sap.m">
<App>
<pages>
<Page title="{i18n>title}" showHeader="false">
<content>
<VBox alignItems="Center" justifyContent="Center" class="sapUiSmallMargin">
<Button text="Take picture" press="onTakePicture"></Button>
</VBox>
</content>
</Page>
</pages>
</App>
</mvc:View>
Step 3: Copy the webapp folder content of the UI5 app to the www folder of cordova app.
Step 4: Change the resource path in index.html
Step 5: Now connect your devices to your development system and go to project directory (i.e. Sample) and execute ‘Cordova run’. You can see your app launched in your mobile.
Debugging
Step 1: Type chrome://inspect. You can see your WebView of your app under remote target. Click on the inspect.
Step 2: Go to the sources tab. You can see your UI5 components. Keep the breakpoint on a required line. For example, I have kept in line no 10
Using Cordova plugins in SAP UI5 – Hybrid App.
Lets make use of the button added in the previous topic. Here we are going to see the functionality of camera plugin.
Step 1: Now go to project directory and add a camera plugin by using the below command
cordova plugin add cordova-plugin-camera
Step 2: To access any Cordova plugin in your UI5 application. You need to add the below script in your index.html.
<script type="text/javascript" src="cordova.js"></script>
Step 3: Add Image control in view to display the image captured from the camera plugin.
<mvc:View controllerName="UI5.controller.View1" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc" displayBlock="true"
xmlns="sap.m">
<App>
<pages>
<Page title="{i18n>title}" showHeader="false">
<content>
<VBox alignItems="Center" justifyContent="Center" class="sapUiSmallMargin">
<Button text="Take picture" press="onTakePicture"></Button>
</VBox>
<Image id="sampleImage" class="sampleImage"/>
</content>
</Page>
</pages>
</App>
</mvc:View>
Step 4: Let us add the functionality to “Take Picture” button. navigator.camera object is defined in this plugin to capture the picture.
Add the below piece of code in controller
onTakePicture: function(){
var that = this;
navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
destinationType: Camera.DestinationType.DATA_URL });
function onSuccess(imageURI) {
var image = that.getView().byId('sampleImage');
var dataurl = "data:image/jpeg;base64,"+imageURI
image.setSrc(dataurl);
}
function onFail(message) {
//alert('Failed because: ' + message);
}
}
On Hitting “Allow”, Your camera will be opened, take a picture and click “OK”. You could see the captured image on screen.
Generating Signed APK.
Refer Blog Post:https://blogs.sap.com/2020/06/25/hybrid-application-generating-signed-apk-for-intune-and-app-center
Conclusion
In this blog post, We have learnt how to set up environment to develop Cordova application, to create a basic Cordova application , to wrap SAP UI5 application in Cordova framework, to add platform and plugins, to access plugins, to debug, to generate APK, to create a signed APK.
Thanks for reading. Hope you enjoyed this blog post. Will come up with lots of other functionalities in my future post.
Thanks again:)
#HappyLearning
Regards,
Hemalatha B.
Nice Blog.
Thank you Sai
Good blog! Keep posting good content ??
Thanks Suriya:)
Good blog and informative for beginners. Keep posting ?
Sure.. Thanks Meena
Good starting point for beginners. There are plenty of blog posts and online docs available on this topic, but most are dated. I do recommend using SAP Business Application Studio instead of SAP Web IDE Full-Stack for your next blog post.
Cheers,
Ludo
Thank you for the suggestion Ludo. Sure will do that for my next blog post.
Hi Ludo Noens ,
Are there any documentations on creating a sapui5 mobile app in business application studio? i only found the one using MDK project, but when i checked the MDK is not sapui5. Could you help on this? Thank you!
Hi Hemalatha Bharanikumar
It's really cool blog to start the Cordova application, I started doing offline application and i imported web app folder and neoapp.json from webide and copied in the www folder and I ran the code , but I can't able to access the server and my status code is "0" can u help me out how to connect the server to this application
Thanx
Sam Hilton
Hi Sam,
Thank you.. May I know to which server you are connecting the application?
Regards,
Hemalatha B.
to my local server DEV
Hi Sam,
Is your local server exposed to the internet? Which plugin you are using for local DB? If Kapsel, did you created APP ID in SCP MS?
Regards,
Hemalatha B.
The Scenarion is i need to create an offline application and i need to fetch data from my ECC(SAP) server through oData Call but i cant able to hit ECC server through ajax call kindly help with this
Hi Sam,
Use the service URL exposed via internet.
Regards,
Hemalatha B.
Very helpful blog..
Thanks for the post.
Can you tell me how to integrate my cordova application with cloud platform(SCP) so that I can consume odata services configured there through destinations.