Building a Mobile App with Mendix – Part 4

Building a Mobile App – Advanced topics

This is the last blog in a series of blogs about building hybrid mobile apps with Mendix. Part one is about preparing your software, devices, and accounts, while part two is about building an actual app. Part three discusses the more technical details about the hybrid app. In this part I’ll discuss how you can build your mobile app locally and how you can debug it.

Building Locally

If you are making changes to the hybrid app it is very valuable to have short feedback loops so that you can quickly test your changes and make improvements/fixes. The fastest way to do this is to build and debug locally. When you can build locally you can also test on emulators so that you can test for different devices. However, this requires you to install the Android SDK and/or Xcode.

Folder Structure

To build locally you need to change the folder structure a bit when you extract the hybrid app archive which you download. You need to create a www folder and move the index.html file and the js, img, css folders to it, so you will have a folder structure like this:

  • res
  • www
    • css
    • img
    • js
    • html
  • xml

Also, to build with Cordova you need to remove the “gap:” prefix in the config.xml. You can do this easily by opening config.xml in a text editor by replacing gap: with an empty string. Note that without the “gap:” prefix you can still build via PhoneGap Build.

Installing Cordova Locally

See the following link on how to install Cordova locally: https://cordova.apache.org/#getstarted.

You could also install Phonegap locally, but because Phonegap basically calls Cordova under the hood, I just use Cordova.

By default, Mendix hybrid apps are built by PhoneGap Build. Therefore, the used PhoneGap version is specified in config.xml via a preference element:

[code lang=”xml”]<preference name=”phonegap-version” value=”cli-6.3.0″ />[/code]

Based on this version, PhoneGap uses a version of the Cordova platform plugins. I recommended using the same version that corresponds with the version that PhoneGap uses, otherwise you can run into unexpected behavior. See https://build.phonegap.com/current-support for the version mapping. You can specify the platform plugin version when adding a platform as follows:

[code lang=”xml”]cordova platform add [email protected]

cordova platform add [email protected][/code]

After executing the commands, Cordova creates an Android and iOS project inside the platform folder. Note that you need a Mac to build an iOS version.

Tip: Cordova creates a platforms and a plugins folder. I recommend excluding these folders from version control by adding them to the SVN ignore list, because these folders contain binaries and can become very large. You can do this by right-clicking the folder, selecting TurtoiseSVN, selecting Add to ignore list, and then selecting the folder. Note that the folders are generated by Cordova and can easily be regenerated.

Running the App Locally

When you have set up Cordova for local building you can test your hybrid app on an emulator and on your devices. Which method you use depends on your personal preference. For iOS apps, I test via Xcode on an emulator because in my opinion this works pretty smooth.

Tip: When you run your iOS app via Xcode and you make changes to your HybridApp files, make sure you run cordova prepare before you hit the play button so that your changes are reflected in the iOS project.

For Android I normally test directly on the device because I find that much faster than the (relatively) slow Android Emulator. So I mostly use:

[code lang=”xml”]cordova run android –device[/code]

Tip: When building locally for Android, disable the crosswalk plugin to speed up local building. You can do this by commenting out the plugin in the config.xml.

Debugging

Most debugging can be done from the Modeler or a browser. However, for changes or errors in the hybrid app, debugging directly on the app can be very useful. I’ll discuss different approaches to do this next.

Debugging via Weinre

PhoneGap offers cross-platform debugging via a tool called Weinre. You can enable this in PhoneGap Build by going to the settings options for your app and checking Enable debugging. When you start a new build, a script is added that allows you to debug. This can be done by clicking Debug, which will open a new browser tab that looks likes the Chrome Developer Tools. Here you can inspect the DOM and the console.

PhoneGap Mobile

For more information, see Debug a Hybrid Mobile Application.

Local Debugging

When you created a debug build via PhoneGap Build, which you installed on your device, you can also debug the app from your computer when you connect your mobile device to it. The approach is different for Android and iOS.

Android

You need to enable developer options on your device to be able to allow remote debugging. See Remote Debugging for instructions. Once this is enabled (one-time setting), open Google Chrome and go to chrome://inspect/#devices. This will show the hybrid app when it’s open. When you click Inspect you can see the mobile screen in your browser, inspect the DOM, access the console, and so on. You can also control your mobile app from here with your mouse and keyboard.

iOS

For debugging an iOS device locally, you actually need a Mac. On your device, check that the private browsing setting is turned off and enable the Web Inspector settings under the Safari settings. On your computer, enable the development mode in Safari by going to Preferences > Advanced, and checking Show Develop menu in menu bar. When your app is started, your device should be shown under the Develop menu, and via that sub-menu you can open an inspection window for your app. Also see Debugging iOS PhoneGap Apps with Safari’s Web Inspector.

Considerations

Be aware that when you make changes in the hybrid app that are related to the model and vice versa, that the hybrid app and model have a different life cycle, so make sure the versions are compatible with each other.

Conclusion

In the past four weeks I’ve guided you through the complete process of building a mobile app with Mendix, from the preparation stage all the way up to the advanced topics. This should provide you with enough tools and knowledge to get started on your own mobile app or upgrade your existing app with a mobile version.

What is your idea for a mobile app? Let us know in the comments!

How-To’s: https://docs.mendix.com/howto/mobile

Reference Guide: https://docs.mendix.com/refguide/mobile

PhoneGap: https://phonegap.com/

Cordova: https://cordova.apache.org/