Step by step process to create simple offline enabled hybrid application

Hi All!,

In this blog I am going to explain how to create offline capable hybrid application using cloud platform Mobile services and Web Ide HAT.

Introduction :

The concept behind offline application, Users expect applications to work even when they are offline. A poor network connection leads to have poor user experience. In this unpredictable cases, If our application provide a copy of business data into our local environment. This type of applications called offline applications or offline capable applications.

Follow the below step by step process to create offline hybrid application.

Step 1:- Login to Hana cloud platform trial account.

Step 2:- Go to Services and search for Mobile Services, Users and click on tile-> Go to Service.

Step 3:- The above step take you to this window. Here we can create new application by clicking on Create New App tile.

Step 4:- Provide unique Application ID and Name. Select the Mobile Development Kit in Config Templates drop-down and click on Save.

Step 5:- Application is created. In Assigned Features section click on Connectivity to add destination.

Step 6:- Click on + sign to add destination. Or Click on Create icon to create a new destination.

Step 7:- Select the destination and click on OK. In my example I am using Northwind Odata services.

Step 8:- Destination is added successfully, let’s check the connectivity now.

Step 9:- Now we are ready with the Connectivity it turned to Green. No need to worry about cloud build right now, we will see later part.

Step 10:- Now again come back to Services and search for SAP WEB IDE Full-Stack click on tile -> Go to Service.

Step 11:- The above step take you to Web IDE workbench. Go to MDK Development Perspective.

Step 12:- Right click on workspace -> New -> MDK List-Detail Project.

Step 13:- Provide Project Name click on Next.

Step 14:- Provide Application Name click on Next.

Step 15:- Fill below service details and select enable offline store checkbox click on check service. We will get service metadata success response. Click on Next.

Step 16:- Select Entity Set and click on Next.

Step 17:- Customize the template click on Next.

Step 18:- select the Initialize offline data details click on Finish.

Step 19:- List Detail Application is created. Double click on Application.app file.

Step 20:- The above step take you to the development pane. Here we can customize the application based on our requirement.

Step 21:- We will navigate to Product Details once we click on Products.

Step 22:- If we select one of the product in Product Details we will navigate to Product List screen.

Step 23:- Now it’s time to deploy our application to cloud. Right click on application select -> MDK Deploy and Activate.

Step 24:- Select Upload bundle to mobile services checkbox and click on Next.

Step 25:- Select Destination Name and Application Id. Make sure Automatically Deploy check box is selected then click on Next.

Step 26:- We will get the confirmation in console saying that application deployed successfully.

Step 27:- Check whether app is deployed correctly or not. Go to Cloud platform mobile services->Mobile Applications->Native Hybrid. Click on App update.

Step 28:- Our application is deployed successfully.

Step 29:- Go to API’s tab and scan the QR Code with your mobile.

Step 30:- In mobile install (SAP Mobile services client) application and Scan the generated QR code after following all the above steps. Please find the screen shots from my mobile.

Conclusion: We are successfully created offline hybrid application and deployed to cloud platform. Hope this blog is helpful. 🙂

Thank you!!!