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.