Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision		 Previous revision
docs:3300_mobile_apps:monaca [2022/08/20 08:56] – removed - external edit (Unknown date) 127.0.0.1docs:3300_mobile_apps:monaca [2025/06/12 04:00] (current) – Change to AwareIM aware_support3
Line 1: Line 1:
 +{{tag>Manuals Mobile_Applications Native}}
 +[<10>]
 +====== 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 //**AwareIM**// version 5.9 //**AwareIM**// 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:
 +
 +  - Create your browser-based mobile application as usual
 +  - Use the “Build native mobile application” feature in //**AwareIM**// to create a zip file containing all the artefacts of your mobile application
 +  - Create an account with a vendor that allows building native mobile applications from web applications written in HTML and Javascript. //**AwareIM**// currently supports Monaca ([[https://monaca.io|]]) Monaca should be used to create iOS applications or Android applications. 
 +  - Import the zip file created by //**AwareIM**// into Monaca
 +  - Create the binary file for the appropriate platform following Monaca guides
 +  - Upload the binary file into the phone or tablet
 +You should create your native mobile application when your standard browser-based //**AwareIM**// 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:
 +
 +  - Output folder where the zip file will be written
 +  - Server URL and port. Your mobile application will be communicating with your server where //**AwareIM**// should be running. You need to make sure that this server has valid Internet address and then specify this address and port where //**AwareIM**// Tomcat is running (unless it’s a standard port 80)
 +  - Web application folder name. Only if you have renamed the standard //**AwareIM**// directory to something else
 +  - 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.
 +  - 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.
 +
 +===== Building for iOS =====
 +
 +Before building a Monaca project for iOS:
 +
 +  - Select the Build/Build Environment Settings menu item and make sure that iOS 5.1.1 is selected
 +  - Select the Configure/App Settings for iOS and make sure that the WebView engine is set to WKWebView
 +  - 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/|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.
 +
 +===== Changing Project Files =====
 +
 +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.
 +
 +{{page>docs:5000_videos:360_native_mobile_apps_monaca&noheader}}
 +
 +===== Running mobile native applications =====
 +Before running native applications you need to make some changes to AwareIM Tomcat files on the server:
 +
 +1. The following change will make sure that calls to the AwareIM 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 AwareIM 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>
 +
 +