Skip to Content
Technical Articles
Author's profile photo Hemalatha Bharanikumar

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,

  1. Cordova setup. https://blogs.sap.com/2020/06/25/cordova-setup-for-hybrid-application-development
  2. Creating Cordova app.
  3. SAPUI5 Hybrid  App.
  4. Debugging
  5. Using Cordova plugins in SAP UI5 – Hybrid App.
  6. 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

Added plugins you can see in the Plugin folder

 

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);
	}
}

 

Step 4: Launch the application with the command “Cordova Run”. Your application will get launched in your connected device. Click on “Take Picture” button. You could see the below popup. Hit on “Allow”.

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.

 

Assigned Tags

      17 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo SaiNithesh Gajula
      SaiNithesh Gajula

      Nice Blog. 

      Author's profile photo Hemalatha Bharanikumar
      Hemalatha Bharanikumar
      Blog Post Author

      Thank you Sai

      Author's profile photo Suriya Pandiyan
      Suriya Pandiyan

      Good blog! Keep posting good content ??

      Author's profile photo Hemalatha Bharanikumar
      Hemalatha Bharanikumar
      Blog Post Author

      Thanks Suriya:)

      Author's profile photo Meena Narayanan
      Meena Narayanan

      Good blog and informative for beginners. Keep posting ?

      Author's profile photo Hemalatha Bharanikumar
      Hemalatha Bharanikumar
      Blog Post Author

      Sure.. Thanks Meena

      Author's profile photo Ludo Noens
      Ludo Noens

      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

      Author's profile photo Hemalatha Bharanikumar
      Hemalatha Bharanikumar
      Blog Post Author

      Thank you for the suggestion Ludo. Sure will do that for my next blog post.

      Author's profile photo sopiken sopiken
      sopiken sopiken

      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!

      Author's profile photo Sam Hilton
      Sam Hilton

      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

      Author's profile photo Hemalatha Bharanikumar
      Hemalatha Bharanikumar
      Blog Post Author

      Hi Sam,

      Thank you.. May I know to which server you are connecting the application?

      Regards,

      Hemalatha B.

      Author's profile photo Sam Hilton
      Sam Hilton

      to my local server DEV

      Author's profile photo Hemalatha Bharanikumar
      Hemalatha Bharanikumar
      Blog Post Author

      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.

      Author's profile photo Sam Hilton
      Sam Hilton

      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

      Author's profile photo Hemalatha Bharanikumar
      Hemalatha Bharanikumar
      Blog Post Author

      Hi Sam,

      Use the service URL exposed via internet.

      Regards,
      Hemalatha B.

      Author's profile photo Ram Sundar Mahato
      Ram Sundar Mahato

      Very helpful blog..

      Author's profile photo Alagar Pandian
      Alagar Pandian

      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.