Building native mobile applications

When you create your mobile applications they are accessed through a mobile browser such as Safari – just like non-mobile applications. Starting from Aware IM version 5.9 Aware IM supports the capability of building native mobile applications that can be uploaded to a mobile device and run without having to start a mobile browser and specify the URL of the application.

There are several steps involved in creation of native mobile application for mobile phones or tablets:

1. Create your browser-based mobile application as usual
2. Use the “Build native mobile application” feature in Aware IM to create a zip file containing all the artefacts of your mobile application
3. Create an account with a vendor that allows building native mobile applications from web applications written in HTML and Javascript. Aware IM currently supports Monaca (https://monaca.io) Monaca should be used to create iOS applications or Android applications.
4. Import the zip file created by Aware IM into Monaca
5. Create the binary file for the appropriate platform following Monaca guides
6. Upload the binary file into the phone or tablet

You should create your native mobile application when your standard browser-based Aware IM application has been developed and tested. The first step is then to create a zip file that can be imported into Monaca. To do this select the business space version and then select the “Build native mobile application” command from the Version menu of the Configuration Tool. Then provide the following information:

1. Output folder where the zip file will be written
2. Server URL and port. Your mobile application will be communicating with your server where Aware IM should be running. You need to make sure that this server has valid Internet address and then specify this address and port where Aware IM Tomcat is running (unless it’s a standard port 80)
3. Web application folder name. Only if you have renamed the standard Aware IM directory to something else
4. You need to decide whether users of your mobile application will be logging into your system or not. If they are the login screen will be the first they will see when the application is launched. Otherwise, they will go directly into your mobile application as guest users.
5. You then need to provide the application name, version and other details – these details will be registered for your native mobile application

When using Monaca you can import a project from a zip file and then open the project in the Monaca IDE. From the IDE you can perform a build for either iOS or Android or both.

Before building a Monaca project for iOS:

1. Select the Build/Build Environment Settings menu item and make sure that iOS 5.1.1 is selected
2. Select the Configure/App Settings for iOS and make sure that the WebView engine is set to WKWebView
3. Select the Configure/Build Settings for iOS and upload your Apple Certificate and Provisioning Profile. These should have been generated from your Apple Developer account. For detailed information on how to do this please see this document https://docs.monaca.io/en/products_guide/monaca_ide/build/ios/build_ios/

Application Icons

If you don’t provide your own application icons the default ones will be generated. To specify your own icons in Monaca select Configure/App Settings for iOS (or Andoid) and upload your icons from there.

There are two files in your project that are very important – index.html and config.xml

The former defines the first HTML page that will be displayed when the application runs. The latter contains all configuration options of the build. You can modify these two files to customize the look and feel of the first page or to customize build configuration.

In Monaca you can change these files directly from the Monaca IDE.

For example, you can change the theme of the index.html file or add “forgotten password” or “Sign Up” functionality.

Before running native applications you need to make some changes to Aware IM Tomcat files on the server:

1. The following change will make sure that calls to the Aware IM Server from the native application are not interpreted as “cross-origin” calls and rejected. Modify the file AwareIM/Tomcat/webapps/AwareIM/WEB-INF/web.xml to include the following:

<filter>

  <filter-name>CorsFilter</filter-name>
  <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
  <init-param>
    <param-name>cors.allowed.origins</param-name>
    <param-value>*</param-value>
  </init-param>
  <init-param>
    <param-name>cors.allowed.methods</param-name>
    <param-value>GET,POST,HEAD,OPTIONS,PUT</param-value>
  </init-param>
  <init-param>
    <param-name>cors.exposed.headers</param-name>
    <param-value>Access-Control-Allow-Origin,Access-Control-Allow-Methods,Access-Control-Allow-Credentials</param-value>
  </init-param>

</filter>
<filter-mapping>
  <filter-name>CorsFilter</filter-name>
  <url-pattern>/*</url-pattern>
</filter-mapping>

2. The following change will disable using cookies by Aware IM as they cause security problems when running mobile native applications. Modify the file AwareIM/Tomcat/webapps/AwareIM/WEB-INF/web.xml and change <web-app> to <web-app xmlns=“https://jakarta.ee/xml/ns/jakartaee”

       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:schemaLocation="https://jakarta.ee/xml/ns/jakartaee
                           https://jakarta.ee/xml/ns/jakartaee/web-app_5_0.xsd"
       version="5.0">
       

- Then add this:

<session-config>

      <cookie-config>
          <http-only>true</http-only>
          <secure>false</secure>
          <name>JSESSIONID</name>
          <path>/</path>
          <max-age>-1</max-age>
      </cookie-config>
      <tracking-mode>URL</tracking-mode>
  </session-config>