Mendix Hybrid Offline

Most of the applications support through internet connection. Mobile users expect an ability to interact with/without connection. For example, shopping cart applications might take a while to load a single page since it needs to obtain content from the server via network. In some scenarios, low bandwidth results to time taken process. To overcome these issues, we are following an Offline-first approach. 

‘Offline-first’ is a development approach that ensures an app works in offline as it does in online. Creating an offline-first app can ensure faster, reliable, retaining users and providing better user experience.  

Next Gen Application Development at your fingertips!

Read More

Many businesses have already developed offline-first mobile apps and Google is one of them. Google offers offline capability. For example, let’s consider Google Maps provides an ability to use downloaded routings in offline mode. 

Offline Architecture

We cannot show remote data when there is no internet. Hence, we will sync the remote data to device storage when network connection is established. When internet is not available, it will manifest data from mobile’s internal storage to user, which is an offline mechanism. 

Architecture of offline functionality in Mobile application: 

Synchronization

Mendix development solutions provides an ability to synch data based on the configured objects in the ‘Sync Configuration’ of Hybrid phone app offline navigation profile. 

Domain model changes automatically synchronize during Initial Start-up of mobile device, in online mode. 

Manual Synchronization can be configured in the following ways: 

  1. As Synchronize action button 
  2. As an action on a Button (OnClick Nanoflow) 

Automatic Synchronization can also be done during on-load of page when user is in online mode. For this we need to write logic in nanoflow to check whether internet connection is established or not, based on the returned value to map the Synch logics. 

Basically there are two phases of synchronization, such as upload & download phase. During the upload phase, your application updates the server`s database with the new or changed objects in mobile app.

Check out our articles on Mendix

Read More

In the download phase, the app updates the local database (Mobile internal storage) using the data from the server database. For this, Synchronize to device option must be used in order to synch one or more objects or lists to client database. 

Error Handling during Synchronization 

1. Network related errors : 

In offline application, in order to synchronize the data network connection is required. By default, the timeout for synchronization is 30 seconds per network request.  

During Upload phase if any network issues are found, then the synch is aborted and the changes will be made in the device and no changes will commit to server database. 

During the Download phase if any network issues occur, then no data will be updated to device and the changes cannot be rolled back on the server. 

If the synchronization is called as Nanoflows on click action on a button, then errors can be handled using Error handler mechanism, so that error message will be displayed accordingly to the user. 

2. Data related errors : 

When an object commit is skipped then the changes are ignored and the references from other objects to it will become invalid. So an error will be communicated to the user as ‘Synchronization failed due to uncommitted objects’ of respected reference objects. 

3. Prevent synchronization issue : 

  • Do not delete objects which can be synched to offline app. 
  • Try to avoid domain level validations for offline objects, instead use Nanoflows  
  • When committing objects that are being referenced by other objects, make sure to commit other objects as well. 

4. Data Conflict Resolution : 

In Offline application, if multiple users synchronize the same state of an object on their device, it follows the last win`s approach for data synch. 

Publishing Hybrid Mobile Apps

Mendix leverages Phone Gap Build to build for mobile applications development and also provides an ability to download the source of mobile application. The Source contains configuration files which allow you to define different versions of your mobile app with specific settings like Mendix environments in order to easily test multiple versions of your application. This is because, MX mobile applications are based on standard Cordova stacks, Cordova settings and plugins that can easily be integrated. 

  • Mendix provides an ability to publish app for mobile appstore, by selecting respected platforms (Android, IOS) in Mendix developer portal. 
  • By default, the Mendix hybrid applications require device permissions like Calendar, Camera, Photo library, contacts, Push notifications, Splash screens (To modify the app icon) etc. Make sure to select the ‘Enable offline capabilities’ checkbox under Profile settings. When users install the application or open the application for the first time, they will be asked to grant these permissions. 
  • Now click on ‘Publish for Mobile App Stores’, then select respected environment to publish mobile app and click on ‘Start PhoneGap Build job’. 
  • So once after downloading the PhoneGap build, extract and goto the following path : phonegap\dist , now create an account in ‘Adobe PhoneGap Build’ in order to build an APK file. After creating an account, upload the phonegap zipped file inside the dist folder and click on ‘Ready to build’ button. After a successful build, scan the QR code using AI Scanner from mobile device, then download apk and install it or else download the apk file in the desktop and share it to mobile device. 
  • Install the apk in mobile device.  Once the code is deployed, changes will automatically load. Once the user switches to online mode, there is no need to go through the appstore process, making updating apps effective. 

Test Case

How to achieve delete operation in Offline Profiles? 

Let’s consider a scenario- a user want to claim their Mobile bill. The first thing to do, is to add multiple requests and displaying the ones on the listview. Before submitting this, if I want to delete the added claim, then the following approach must be taken aboard.

Firstly, we need to create a flag attribute in entity. For example, I have Test entity object and adding flag attribute which is IsDeleted (Boolean). The default value of this variable is set to False.  

I have one list view of Test entity with data source as Nanoflows which returns the Test entity list and Delete button in a page. In the delete button, I am calling one nanoflow with one change object activity by setting the ‘IsDeleted’ attribute value as True and committing it.

Leverge your Biggest Asset Data

Inquire Now

In data source nanoflows, I am retrieving the Test entity list from the database. Then we need to filter this data based on the IsDeleted attribute with true value. But actually, it does not remove from the client database. In the next step, we need to do that operation. 

SUB_DeleteRequests

Synchronization process only works in online which mean mobile device should be in online mode. In order to synchronize manually, we need to create one action button. In this button, call nanoflow. In this nanoflow, call one sub microflow to delete the test objects whatever Test entity has IsDeleted attribute value as True.

In this sub microflow, retrieve the entire test list from the database. Then filter the list with IsDeleted attribute value as True. Then delete respected filtered list and then call Synchronize everything activity to Sync client db with server db.  

SUB_GetRequestList 

SUB_GetRequestList

After that we are calling one Sub microflow in order to fetch the latest Server db data to mobile device with the help of Sync to device activity. Now the test list will change in mobile device. 

Advantages

  • No need of internet connection to use Offline applications.  
  • AutoNumber will be generated during Synchronization process. 
  • App performance is faster in hybrid offline, as we implement logics in nanoflows.  
  • Page refreshing and validation checks will be faster as data interaction happens with mobile device internal storage. 
  • Possible to use microflows inside nanoflows, to achieve server side logics. 
  • Ability to customize the synch configurations as per the mobile device’s internal storage capacity. So that it will increase the reliability and performance of the Synchronization process. 

Disadvantages

  • It does not support System members (CreatedDate, ChangedDate, Owner, ChangedBy) in offline profiles. 
  • Cannot use all the server side logic actions like delete, retrieving data using XPath constraints directly in nanoflows. 
  • Not possible to pass persistable entity objects, lists as input parameter to microflows instead passing non-persistable objects. 
  • Auto numbers, calculated attributes and many to many associations are not supported in offline profiles. 
  • Uncommitted objects should not store in local database unless we do commit operation. 
  • Debugging in nanoflow is not possible till Mendix 8 version.  
  • In offline app, data is not up to date till sync is happened.