This blog post contains some answers to questions that were previously covered in the post What’s new with Hybrid Application Toolkit in 2019, combined with new information. I will also provide a link to a list of Frequently Asked Questions.

The goal is to guide you with your app development and for you to be able to resolve some of the common challenges by yourself. We don’t need to reinvent the wheel or bump into the same issue someone else faced already. Let’s get more productive.

Before we start, I have one recommendation, which is the same as on all my other blog posts related to Hybrid Application Toolkit:

When you start developing a new mobile app, we strongly recommend that you consider developing this with either MDK (Mobile Development Kit) for cross platform applications, or our native SDKs (SAP Cloud Platform SDK for iOS or SAP Cloud Platform SDK for Android).

 

Best Practices

Develop a web app

The most productive environment to develop your (mobile) app is in the cloud, as a web application. You should avoid developing code that is only able to run on a mobile device. It is much easier to test and debug your (UI5) application in your favourite browser. Mobile devices add more challenges due to limitations in memory, processing capacity, connectivity, building/packaging, downloading, screen size, etc. The development cycles/roundtrips are much shorter for web development. The debugging tools in ‘desktop’ Chrome/Safari/Firefox are pretty advanced; please make use of it!

Some recommendations:

• Keep your code as much as possible common across your web app and mobile app. We have seen customer support requests where some parts of the code were unnecessary different. The customer mentioned the app was running fine as a web app, but failed as a mobile app. You won’t be able to debug your app on the web, when your code only runs on mobile.
• In case you are making use of APIs that are only available in the mobile environment, ensure those calls are ‘guarded’ with checks on whether the API is available before calling it. This ensures your web app doesn’t break while running in a desktop browser.
• Code that is handling data queries (OData) should be the same across web app and mobile app. There is no need to have this implemented in a mobile specific way. The only tricky part might be regarding the user, but this should not affect the other parts of the code.
• Make use of events instead of polling or checking for status.
• Keep it as simple as possible.

Migrating your app across multiple spaces (for Dev, QA, Prod)

You are developing an app in a Development space and now you need to move this into a QA space for testing, followed by a Prod space for production. How can you make use of the same project structure and App Id.

The challenge here is that when you use our Cloud Build Service (through SAP Mobile Services), it will automatically generate a new application, with new App Id, in SAP Mobile Services (but only if there is none already). This will require you to change various things manually and results in maintenance issues. To avoid this, please follow the following process:

1. Create a project in SAP Web IDE Full-Stack and build the mobile app in this (Dev) environment.
2. Push the project content, including the file .che/project.json into your Git repository. Note: the .che folder might be hidden. Use the option in SAP Web IDE Full-Stack to show hidden files.
3. Go to the SAP Mobile Services Admin cockpit and export the app that was generated in step 1.
4. Switch to your QA environment and open the SAP Mobile Services Admin cockpit there. Import the app you’ve exported in step 3.
5. Open SAP Web IDE Full-Stack in this QA environment and clone the Git project into your workspace.
6. Build the mobile app using our Cloud Build Service. Since you’ve already imported the app into SAP Mobile Services in step 4, there is no need to create a new one. Hence, the same App Id will be used.
7. Your QA team might report issues found in the QA environment. As a developer, continue your development and bug fixing in the Dev environment. Push your code changes into your Git repository.
8. To get the latest updates into the QA environment, pull the code changes from your Git repository and rebuild the app.
9. Repeat steps 7 and 8 until you reach a point where things are ready for production.
10. Switch to your Prod environment and open the SAP Mobile Services Admin cockpit there. Import the app you’ve exported in step 3.
11. Open SAP Web IDE Full-Stack in this Prod environment and clone the Git project into your workspace.
12. Build the mobile app using our Cloud Build Service. Since you’ve already imported the app into SAP Mobile Services in step 10, there is no need to create a new one. Hence, the same App Id will be used.
13. Publish and distribute your app (after testing, of course).

As you can see, you should manage your code in a Git repository and use Git as a means to distribute the project across spaces/landscape/systems. We don’t need to do anything special in Hybrid Application Toolkit to achieve this.

If you want to take this one step further and tie this into a Continuous Integration/Continuous Delivery (CI/CD) environment, then please take a look at this tutorial.

Frequently asked questions

In this section I will provide answers to three  of the most asked questions. A longer list of frequently asked questions is provided by following this link to the SAP document site. I plan to update this content once we receive more questions on a certain topic.

Is there a way to disable the certificate prompt on Android (X509)?

If you do not wish the user to see this screen, handling of client certificates can be disabled by simply adding the following line in config.xml:

<preference name="SAPKapselHandleX509Challenges" value="false" />

For my iOS app, I need to add settings in the Info.plist file. How can I do this for my project in SAP Web IDE?

Obviously, the Info.plist file is not available in the SAP Web IDE Full-Stack project. Using the config.xml file, you can pass settings to our Cloud Build Service, which will apply them in the Info.plist file that gets generated. You can add entries in the config.xml file by using the <config-file> element.

Example:

<platform name="ios">
 <config-file target="*-Info.plist" parent="CFBundleURLTypes">
    <array>
        <dict>
          <key>CFBundleURLSchemes</key>
          <array>
            <string>ABCDEF</string>
            <string>APP-NAME</string>
          </array>
        </dict>
    </array>
</config-file>
</platform>

Another example, for solving problems with accessing the camera on iOS:

<platform name="ios">
  <config-file parent="NSCameraUsageDescription" target="*-Info.plist">
   <string>We are using a camera to scan barcodes.</string>
  </config-file>
</platform>

My app starts up with a blank screen and hangs. Now what ?

This is a very common issue and requires you to investigate further before calling support. There are a few possible causes for failures during startup / initialisation of the app. It might be issues loading dependent libraries; it could be that it tries to access a service URL that doesn’t exist/respond; or various other causes.

Now what?: start debugging.

Connect to your app over USB (or wifi, for the pros) and check what errors the browser (Safari or Chrome) is reporting.

Check the logs on SAP Mobile Services Admin cockpit for connection issues.

Collect Network Traces on SAP Mobile Services Admin cockpit to identify what is going on.

Check the device logs.

Tips and tricks

In this section I will provide you with useful information that could help you in using SAP Web IDE Full-Stack and the HAT extension. I will update this section with new information, once it is available.

Avoiding download failures

If you are facing issues downloading your app or project archive while using the Chrome browser, please try using Firefox instead. Firefox is better than Chrome for resuming a broken downloading. Additional notes:

• Before resuming the suspended download, please login to the SAP Mobile Service Admin cockpit to establish an authenticated session. The downloading link is protected by SAML2 authentication. If the logon session has timed out, resuming will not work.
• Please do not close the browser during the suspend/resume. Resumable downloading will not work if you close the browser.
• Before resuming the suspended download, please backup the partial files on disk. Sometimes the browser will automatically remove the partial file when a download is broken.

Reporting issues

I will not be monitoring this blog very frequently, so in case you run into issues with our SAP Web IDE Full-Stack extension or Cloud Build Service triggered via SAP Web IDE, please raise a support ticket for component CA-WDE-MOB.

If you have questions, feel free to comment down below. Again, please don’t expect instant answers.

When the FAQ document will be updated, I will add a comment on the blog post so please follow the blog post to get notification of any updates.

Regards,

Ludo Noens – Product Owner, Hybrid Application Toolkit