Building Native Mobile Apps for iOS

[aware_support]

As you may know Apple no longer accepts applications created with a technology produced by the PhoneGap build (UIWebView). It requires using an alternative technology called WKWebView not supported by PhoneGap at the moment.

Unfortunately it seems that PhoneGap is in the maintenance mode and is no longer supported by Adobe. So PhoneGap build cannot be used anymore and an alternative vendor that supports WKWebView must be used for iOS applications.

One vendor that can be used is Monaca (monaca.io). Another one is ionic (https://ionicframework.com/)

In the new version that we are working on, Aware IM will produce the .zip file that can be directly imported into Monaca and which will work with both iOS and Android phones. In the meantime if you need to build iOS applications using the current Aware IM version, you need to do it yourself.
Here is what you need to do:

1. Create an account with Monaca
2. Import a zip file created by Aware IM for PhoneGap into a Monaca project (read Monaca doco how to import a PhoneGap file)
Open the project using Monaca IDE
3. Re-arrange the structure of the project files to conform with Monaca project requirements:
a) Create a new folder called “www” (if not created already by Monaca)
b) Create a new folder called “res” (if not created already by Monaca. This folder will contain all you images used in your app.
c) Move all of the files EXCEPT the config.xml file into the www folder
4. Replace the config.xml file with the attached one
5. Modify the attached file to include your icons (alternatively, add your icons using Monaca IDE) and your server (instead of YourServer.com)
6. Replace index.html with the attached file. Make your custom changes to this file - replace YourServer.com and other changes if required
7. Go to the Build/Build Environment Settings menu item and click on iOS 5.1.1
8. Go to Configure/App Settings for iOS and make sure that WebView engine is set to WKWebView
9. Perform build for iOS and Android

config.xml

<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns="http://www.w3.org/ns/widgets" xmlns:android="http://schemas.android.com/apk/res/android" id="com.awareim.AwareIM" version="3.0.1">
<name>CRM</name>
<description>Made with Monaca (http://monaca.mobi)</description>
<author>Awaresoft</author>
<plugin name="cordova-plugin-file" source="npm"/>
<plugin name="cordova-plugin-file-transfer" source="npm"/>
<plugin name="cordova-plugin-whitelist" source="npm"/>
<plugin name="cordova-plugin-camera" source="npm"/>
<plugin name="cordova-plugin-geolocation" source="npm"/>
<plugin name="cordova-plugin-wkwebview-cookie-sync" source="npm"/>
<plugin name="cordova-plugin-wkwebview-file-xhr" source="npm"/>
<content src="index.html"/>
<allow-navigation href="http://YourServer.com:8080/AwareIM/*"/>
<allow-intent href="http://*/*"/>
<allow-intent href="https://*/*"/>
<allow-intent href="tel:*"/>
<allow-intent href="sms:*"/>
<allow-intent href="mailto:*"/>
<allow-intent href="geo:*"/>
<preference name="Orientation" value="default"/>
<preference name="loglevel" value="DEBUG"/>
<preference name="AndroidLaunchMode" value="singleTop"/>
<preference name="ErrorUrl" value=""/>
<preference name="Fullscreen" value="false"/>
<preference name="KeepRunning" value="true"/>
<preference name="AllowInlineMediaPlayback" value="false"/>
<preference name="BackupWebStorage" value="cloud"/>
<preference name="KeyboardDisplayRequiresUserAction" value="true"/>
<preference name="MediaPlaybackRequiresUserAction" value="false"/>
<preference name="SuppressesIncrementalRendering" value="false"/>
<preference name="TopActivityIndicator" value="gray"/>
<preference name="GapBetweenPages" value="0"/>
<preference name="PageLength" value="0"/>
<preference name="PaginationBreakingMode" value="page"/>
<preference name="PaginationMode" value="unpaginated"/>
<feature name="LocalStorage">
<param name="ios-package" value="CDVLocalStorage"/>
</feature>
<preference name="monaca:AndroidIsPackageNameSeparate" value="false"/>
<platform name="ios">
<preference name="orientation" value="all"/>
<edit-config target="NSCameraUsageDescription" file="*-Info.plist" mode="merge">
<string>need camera access to take pictures</string>
</edit-config>
<edit-config target="NSPhotoLibraryUsageDescription" file="*-Info.plist" mode="merge">
<string>need to photo library access to get pictures from there</string>
</edit-config>
<edit-config target="NSLocationWhenInUseUsageDescription" file="*-Info.plist" mode="merge">
<string>need location access to find things nearby</string>
</edit-config>
<edit-config target="NSPhotoLibraryAddUsageDescription" file="*-Info.plist" mode="merge">
<string>need to photo library access to save pictures there</string>
</edit-config>
<edit-config target="NSContactsUsageDescription" file="*-Info.plist" mode="merge">
<string>need contacts access to search friends</string>
</edit-config>
<preference name="InterceptRemoteRequests" value="all"/>
<preference name="WKWebViewOnly" value="true"/>
<preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine"/>
<feature name="CDVWKWebViewEngine">
<param name="ios-package" value="CDVWKWebViewEngine"/>
</feature>
<config-file platform="ios" parent="CFBundleLocalizations" target="*-Info.plist">
<array>
<string>en</string>
</array>
</config-file>
</platform>
<preference name="ios-XCBuildConfiguration-TARGETED_DEVICE_FAMILY" value="1,2"/>
<preference name="AutoHideSplashScreen" value="true"/>
<preference name="FadeSplashScreen" value="true"/>
<preference name="ShowSplashScreenSpinner" value="false"/>
<access origin="*"/>
<preference name="DisallowOverscroll" value="true"/>
<preference name="EnableViewportScale" value="false"/>
<preference name="WindowsStorePublisherName" value="My Name"/>
<preference name="WindowsStoreIdentityName" value="04869104-27ce-d285-2671-de8da516c190"/>
</widget>

--------------------------------------------------------------------------------------
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes"> <!-- this is the only required meta -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="KendoUI/styles/kendo.common.min.css" />
<link rel="stylesheet" href="KendoUI/styles/kendo.default.min.css" />
<link rel="stylesheet" href="KendoUI/styles/kendo.mobile.all.min.css" />
<script type="text/javascript" src="cordova.js"></script>
<script src="KendoUI/js/jquery.min.js"></script>
<script src="KendoUI/js/kendo.all.min.js"></script>
<script src="aware_kendo/utils.js"></script>
<script src="aware_kendo/mobileNative.js"></script>
<script>
document.addEventListener("deviceready", function () {
if (wkWebView && wkWebView.injectCookie)
{
wkWebView.injectCookie('awareim.com/AwareIM', function () {}, function () { alert ("error injecting cookie"); });
}
}, false);

</script>
</head>

<body>
<div data-role="view" data-title="Login" id="login" data-use-native-scrolling="true">
<header data-role="header" class="km-header">
<div data-role="navbar" class="km-accent km-widget km-navbar">
<div class="km-view-title">
<span data-role="view-title">Login</span>
</div>
</div>
</header>
<form action="logonOp.aw" method="post" name="submitForm" id="submitForm">
<ul data-role="listview" data-style="inset">
<li><label for="userName">User name: <input type="text" id="userName" name="userName" /></label></li>
<li><label for="password">Password: <input type="password" id="password" name="password" /></label></li>
<li id="remember_li"><label for="remember">Remember me: <input type="checkbox" id="remember" name="remember" checked="checked" data-off-label="No" data-on-label="Yes" /></li>
</ul>
<input name="domain" id="domain" type="hidden" value="CRM">
</form>
<div class="action-buttons">
<a id="login_submit" data-click="onSubmit" data-role="button" class="km-primary km-justified transitions-button">Submit</a>
</div>
</div>

<style type="text/css" media="screen">
.action-buttons { margin: 1em; }
</style>

<script>
var app = new kendo.mobile.Application(document.body, { skin: "nova" });
var localStorageDisabled = false;
try
{
localStorage.setItem ("AwareIMTest", "Test");
}
catch (e)
{
console.log (e);
localStorageDisabled = true;
}
if (localStorageDisabled)
{
$("#remember").prop ("checked", false);
$("#remember_li").css ("display", "none");
}

setTimeout (function () {
if (localStorageDisabled === false)
{
try
{
var user = localStorage.getItem ("AwareIMUser");
var pwd = localStorage.getItem ("AwareIMPassword");
if (user && pwd)
{
$("#userName").val (user);
$("#password").val (pwd);
}
}
catch (e)
{
console.log (e);
}
}
}, 300);

function onSubmit (e){
if (localStorageDisabled === false)
{
var remember = $("#remember").prop("checked");
if (! remember)
{
clearStorage ();
}
}

var a = new MobileNative_LoginAction ($("#userName").val (), $("#password").val(), $("#domain").val(), $("#remember").prop("checked"), "http://YourServer.com:8080/AwareIM/");
a.run ();
}

function clearStorage ()
{
try
{
localStorage.removeItem ("AwareIMUser");
localStorage.removeItem ("AwareIMPassword");
}
catch (e)
{
console.log (e);
}
}
</script>

</body>
</html>

[ACDC]

One vendor that can be used is Monaca (monaca.io). Another one is ionic (https://ionicframework.com/)

Please could you consider providing a solution for https://ionicframework.com/

[ACDC]

It seems the most logical route to go is : https://capacitor.ionicframework.com/, Monaca seems like a quick fix

Looking deeper into Monaca vs Ionoc, why would monaca.io be the choice of preference as it seems for the upcoming release.

Also Ionic do PWA , Monaco don't seem to talk about it much. They also not known as well

PWA applications are very relevant today, it's no longer in its infancy as mentioned in another thread. I would much rather develop skills around this framework than any other because of the offline capability and speed of PWA application.

Having a PWA application talking to an AwareIM backend is very compelling. Please could you consider this https://capacitor.ionicframework.com/

[hpl123]

It seems the most logical route to go is : https://capacitor.ionicframework.com/, Monaca seems like a quick fix

Looking deeper into Monaca vs Ionoc, why would monaca.io be the choice of preference as it seems for the upcoming release.

Also Ionic do PWA , Monaco don't seem to talk about it much. They also not known as well

PWA applications are very relevant today, it's no longer in its infancy as mentioned in another thread. I would much rather develop skills around this framework than any other because of the offline capability and speed of PWA application.

Having a PWA application talking to an AwareIM backend is very compelling. Please could you consider this https://capacitor.ionicframework.com/

I believe PWA is the future and we don´t really need an external "extra" PWA app generator or the like. I have studied PWA in detail and believe Aware can be converted to PWA compatible apps which means we don´t need any other framework or other external parties like Cordova etc. etc.. A PWA support the most used native features (GPS, camera, file storage access etc.) and can most likely also be made to support at least basic offline features like data capture etc. via service workers. We also get all of the other advantages of PWA like install option, push notifications via web (push notifications are not supported on IOS fully YET but is only a matter of time I believe), installability to desktop etc. etc. (for a full list of all advantages, see the other posts I did on this). I also/again vote for some type of PWA integration/solution.

[swiftinitpvtltd]

There is a complete section of hybrid UI based on kendo UI mentioned in below link by telerik.
Not sure if this can be leveraged or if its already there in Aware as Aware controls are all Kendo controls.

https://docs.telerik.com/kendo-ui/contr ... troduction

The Kendo UI hybrid framework is designed to help developers build mobile app experiences through using HTML and JavaScript that automatically adapt to the native look and feel of different mobile platforms. Developers using Kendo UI hybrid components can focus on the content and functions of their apps and let the Kendo UI framework handle differences between platforms such as iOS and Android.

[Jaymer]

Hopefully the next reply will be from Support.
I wonder what the PWA reply will be since his reply concerning Offline apps was that its 'very hard' and not on the upcoming roadmap.
Yes, we have seen other tools that HAVE achieved great Offline capabilities. Seamless updates to the db when you reconnect.
But for Aware this is hard. I don't say this as a negative against Aware or to mock.

I explain it to others like this:
Suppose you take your 72 Chevy Malibu to a mechanic. And you tell him to swap the engine to the trunk.
Thats very hard - but can be done. It just wasn't designed to do that.

So Aware has worked a particular way (at its core) for many years and now it needs (or we want it to) to operate offline - the mobile app remember doesn't have the "guts" downloaded on the mobile side - its gets ALL that dynamically as you move through an app. But if we're down in a basement of a building with no connectivity, it would have to have the entire app/BSV downloaded - only Support knows if this is possible. I think this is part of the core issue - but I could be wrong.

So with respect to PWA - it seems that the time is now for a clear and succinct roadmap answer on this. Maybe its not possible either.

[aware_support]

Thanks for your feedback. This thread is for those who need a practical solution RIGHT NOW. This thread outlines such a solution.

Briefly about PWA - last time we looked it was mostly talk. Sounds like it is much more advanced now. We will have another look. I don't see any conceptual problems with implementing PWA with Aware IM.

Offline mode - yes, this one IS conceptually difficult. However, we will be providing an improved version of the offline support in the next version.

ionic - nothing stops you from using this framework if you want. The approach is very similar to Monaca.

[Jaymer]

Offline mode - yes, this one IS conceptually difficult. However, we will be providing an improved version of the offline support in the next version.

People are making decisions about future use of Aware w.r.t. offline.
Can you elaborate on this since the new version is imminent. (possibly make a new thread)

[aware_support]

Offline improvements - not only standard queries and calendars will be supported in the offline mode, but also forms (with some limitations) and custom queries.

[idpSteve]

Hi All.

@support what about processes that update values? If you're making forms available offline is there a possibility of making processes that update form values work offline?

Super simple example- a button that sets a status, could this update the cached value and push this when offline mode is turned off?

Also will we still require manually turning offline mode 'on' and 'off'?

[aware_support]

Processes will never be supported in the offline mode. And yes, offline mode needs to be switched on (but with an operation rather than a switch). See this video that explains the new implementation https://awareim85.s3.amazonaws.com/Offline.mp4

[ACDC]

Thank you very much for this preview, I have three questions:

1.
I would like to record that the user has “gone offline” i.e. a flag on the RegularUser object.
So when the user logs back in as normal, if offline flag is set to yes, then force user to click Go online and update records. Is there a way I can have access to the Go Offline menu function that will let me initiate a process to set this flag.

2.
Expecting a user to carry out the intricate process to go offline will never happen in most of my cases.
I want to create a single Process Button that will take care of all the steps laid out in your video. So in this case clicking the Go Offline will first initiate a process in the background setting up the offline objects and data, thus making it very simple act to follow

3.
Is it possible to make the form NOT pop-up and rather go to a new tab or full screen. Something like the way VIEW is used . For example, if the offline form was an Inpection Report, I would want as much real estate as possible so the form doesn't have to scroll. I want as much space on the form as possible. Also sometimes a pop up becomes unstable when scrolling or paging on a mobile device

If the above functionality is possible, I can see no reason why the offline feature cannot be used to implement Offline Forms, a very exciting feature indeed

[aware_support]

1. Can be done with a process that executes a Javascript at the end (which performs going offline or online)
2. Not sure what the question is
3. Yes, it can be done. Any valid output can be used for forms

[ACDC]

2. Not sure what the question is

This item deals with the Preparation stage – Offline Data:

When clicking the “Prepare For Offline Data” I want to handle this automatically, so the user does not have to manually select which objects and related records must go offline (it's already predefined somewhere in the VP or Process )

So I setup a button somewhere in the application that is driven by a process that calls a function to go offline WITH DATA by referencing the offline VP , related objects and range of records.

[aware_support]

Code: Select all

When clicking the “Prepare For Offline Data” I want to handle this automatically, so the user does not have to manually select which objects and related records must go offline (it's already predefined somewhere in the VP or Process )

I still don't understand the question. There are two things - preparation for offline and offline data population - these are two completely different things. When the user clicks "Prepare for Offline" everything happens automatically - the system prepares internal data based on the info in the offline VP. However, data population has to be done by the user - it cannot be automated.