Debugging a Mobile App with Mendix

10 minutes to read Download PDF Edit

1 Introduction

Mendix has great tools for debugging web applications, including the offline and online debugger, but a lot of people don’t know that these tools can also be used to debug and test mobile applications.

This how-to will teach you how to do the following:

  • Build and run a Mendix mobile app that connects to your local development machine
  • Debug the mobile app using Mendix debugging tools, Chrome DevTools and the Safari Web Inspector

2 Prerequisites

Before starting this how-to, make sure you have completed the following prerequisites:

  • Ensure that you have a network utilities tool on your mobiledevice (I use PingTools on Android, and NetworkPing Lite on iOS) in order to ensure connectivity between your device andyour computer
  • Ensure that you have an Adobe ID that you can use to sign in to PhoneGap Build (https://build.phonegap.com/apps)
  • You need a paid Apple Developer Membership - see Apple Membership for more details

3 Mendix and PhoneGap

Before we begin, it’s important to understand how Mendix Hybrid Mobile apps work, and the relationship between the Mendix application and the PhoneGap service. Adobe PhoneGap provides a way for users to create mobile applications using web technologies, like Mendix. PhoneGap (PG) essentially creates a wrapper for a Mendix application that is recognized and treated like a native application by mobile platforms. All your application’s logic, appearance, and functionality are controlled by Mendix. PhoneGap then, in a way, translates these aspects of your application into a language that can be understood by Android and iOS. That being said, there are some facets of your application’s configuration that need to be configured in the PhoneGap application and not in Mendix. We’ll return to this a little later.

The basic function of the PhoneGap app is to ensure that all the necessary libraries (called PhoneGap Plugins) are loaded and available to the application, and then initialize the Mendix application from a target URL. As soon as the Mendix app has been initialized, the app’s Mendix logic then takes over. There are a couple of benefits that we, as Mendix developers, gain from the fact that the PhoneGap app initializes based on a URL: One, changes that we make to the application logic do not require a full rebuild of both the Mendix app and the PhoneGap app (just the Mendix one); and two, that we can instruct the PhoneGap app to initialize based on an IP address (rather than the production URL) and debug a mobile application running locally on our laptop, in order to further increase the speed of our iterations.

4 Android and macOS

This is perhaps the easiest combination of mobile target platform and development environment to get to work.

4.1 macOS Configuration

Since the Mendix Modeler only runs on Mendix, we need to make sure that your virtual (windows) machine can be accessed by the outsideworld. To do that, the network setting much be shared between the virtual machine and your Mac, and the appropriate ports forwarded. Follow these steps to configure your development environment with Parallels:

  1. Open the Parallels Configure dialog.

    mac-1

  2. Go to the Hardware tab.

    mac-1b

  3. Make sure that the Source for Network 1 is set to Shared Network. Click the lock to make changes.

  4. Open the Parallels Preferences dialog.

    mac-3

  5. Go to the Network tab.

  6. Make sure that the Connect Mac to this network option is checked.

    mac-3b |

  7. Click + button at the bottom of the page to add a new Port Forwarding Rule with the following settings:

    • Protocol: TCP
    • Source Port: 8080
    • Forward to: Win10
    • Destination Port: 8080

    mac-4

  8. Add another rule, this time forwarding port 8090.

  9. Start the Mendix app locally, and verify that your mobile device can ping your development machine.

  10. Find the local IP of your development machine on your network by going to settings > network.

    mac-6

  11. Verify that your device can ping this address:

    win-2

4.2 PhoneGap Configuration

You can use PhoneGap Build to build the native application and tell it to intialize based on this new URL, rather than the default. Follow these steps to download a package, update it, and upload it to PhoneGap Build:

  1. Go to home.mendix.com and open your app.
  2. Go to the Mobile App page.
  3. Configure this page as you normally would and then click Publish for Mobile App Stores.

    phonegap-1

  4. Select Do it Yourself and then click Download Customizable Package.

    phonegap-3

  5. Extract the downloaded package and then navigate to the /dist/ folder.

    phonegap-4

  6. Extract the contents of the phonegap.zip file and open the www/settings.json file.

    phonegap-5

  7. Change the url property to the IP address of your local machine, with the port 8080.

   {
     "url": "http://10.140.149.92:8080",
     "hybridTabletProfile": "",
     "hybridPhoneProfile":  "",
     "enableOffline": false,
     "requirePin": false
   }
  1. Save your changes and zip the unzipped phonegap.zip files you just extracted.

    phonegap-7

  2. Upload the new zip file to a new app on PhoneGap Build.

    phonegap-8

  3. When your app has finished building in the cloud, download it and run it to connect to your Mendix app running on your local machine.

4.3 Android Configuration

  1. Enable the developer options on your Android device. See Configure On-Device Developer Options for more information.
  2. Connect your device to your development machine and when the popup appears on your mobile device to allow USB debugging, choose Allow.

    android-2

  3. Open the Chrome browser.

  4. Open the Chrome Developer Tools (F12).

  5. Click the options icon (vertical ellipsis) and select More tools > Remote devices.

android-3

  1. Select your device from the list.

android-4

  1. Inspect the tab from your mobile device to preview the view from your device on-screen and to gain access to the Chrome web inspector and the rest of the Developer Tools.

You can now take advantage of all the debugging tools you know and love with Mendix, including offline breakpoints, quick updates/refreshes, and the Chrome Developer Tools.

5 iOS and macOS

5.1 Apple Developer Configuration

In order to build (and debug) a Mendix iOS app, you need to ensure that you have the right setup in your Apple Developer Account. You’ll need a Developer Provisioning Profile that includes your device ID and a Signing Certificate. If you already have an iOS Development provisioning profile, you can continue with 5.2 PhoneGap Configuration. Follow these steps to set up an iOS provisioning profile:

  1. Go to developer.apple.com and log in to your account.
  2. Click Certificates, IDs & Profiles in the left-hand navigation.
  3. Click the + button to create a new certificate.
  4. Select iOS Development and click Continue.

    apple-5

  5. Follow the instructions to create a Certificate Signing Request (CSR) and click Continue.

    apple-6

  6. Upload your new CSR and click Continue.

    apple-7

  7. Download your new certificate and click Done.

    apple-8

  8. On your Mac, open Keychain Access and select Import Items… from the File menu.

    apple-9

  9. Select your new certificate.

    apple-10

  10. Right-click on the certificate in the list of certificates and select Export.

    apple-11

  11. Save this as a .p12 file, and remember this for later. You’ll need this to build your Phonegap application.

    apple-12

  12. Return to the Certificates, Identifiers & Profiles page.

  13. Navigate to the App IDs page, located under Identifiers.

  14. Click the + button to create a new App ID.

  15. Enter an App ID Description and Explicit App ID and select the necessary Apple services your app will need, then click Continue.

    apple-15

  16. Click Register, then Done.

  17. Connect your iOS device and open iTunes.

  18. Navigate to your device overview in iTunes, and click where it lists the serial number to reveal the UDID.

    apple-18

  19. When you see the UDID, right-click it and select Copy.

    apple-19

  20. Return to the Certificates, Identifiers & Profiles page and navigate to the All page under Devices.

  21. Click the + button to add a new device.

  22. Enter a name for the device and paste the UDID.

    apple-21

  23. Navigate to All under Provisioning Profiles.

  24. Click the + button to create a new Provisioning Profile.

  25. Select iOS App Development and click Continue.

    apple-23

  26. Select your new App ID from the dropdown and click Continue.

    apple-24

  27. Select your new Certificate and click Continue.

    apple-25

  28. Select the devices you want to test your app and click Continue.

    apple-26

  29. Give you new Provisioning Profile a name and click Continue.

    apple-27

  30. Download your Provisioning Profile (you’ll need this for Phonegap).

5.2 Phonegap Configuration

You can use PhoneGap Build to build the native application and tell it to intialize based on this new URL, rather than the default. Follow these steps to change the PhoneGap Build

  1. Go to home.mendix.com and open your app.
  2. Navigate to the Mobile App page, listed under Deploy.
  3. Configure this page as you normally would and click Publish for Mobile App Stores.

phonegap-1

  1. Select Do it Yourself and click Download Customizable Package.

phonegap-3

  1. Unzip the downloaded package and navigate to the /dist/phonegap.zip file.

    phonegap-4

  2. Extract the contents of this file and find www/settings.json.

phonegap-5

  1. Change the url property to the IP address of your local machine, with the port 8080.
   {
     "url": "http://10.140.149.92:8080",
     "hybridTabletProfile": "",
     "hybridPhoneProfile":  "",
     "enableOffline": false,
     "requirePin": false
   }
  1. Save your changes and rezip the phonegap/ directory in /dist/.

phonegap-7

  1. Upload the new zip file to a new app on Phonegap Build.

phonegap-8

  1. Navigate to Edit Account from the account menu.

phonegap-9

  1. On the Signing Keys tab, click Add a Key under iOS.

phonegap-10

  1. Choose your .p12 certificate (from Step 12 in the Apple Developer Configuration) section and your enw provisioning profile.

    phonegap-11

  2. Click the lock to temporarily unlock your key.

    phonegap-12

  3. Return to the app online and choose your new key from the dropdown. This will trigger a new build of your app.

    phonegap-13

  4. When your app finishes building in the cloud, scan the QR code to download the app and run it on your iOS device.

5.3 iOS Configuration

  1. Go to Settings > Safari on your iOS device.

ios-1

  1. Select Advanced.

ios-2

  1. Ensure that Web Inspector is turned on

ios-3

  1. Ensure that your iPhone can ping your development machine (if you haven’t already)

ios-4

  1. Return to the running Mendix app on your iOS device.
  2. Open Safari on your Mac.
  3. If you don’t have the Develop option on your menu bar, open Safari > Preferences.

ios-6

  1. On the Advanced tab, ensure that Show Develop Menu in menu bar is checked.

ios-7

  1. From the Develop menu, select your device and running application.

ios-8

  1. This will bring up the Safari Web Inspector for your device!

6 Android + Windows

6.1 Windows Configuration

Follow these steps to test your computer’s connection to your device:

  1. Open the command prompt and type ipconfig /all and find the IPv4 address of your wireless adapter.

win-1

  1. Verify that your device can ping this address.

win-2

6.2 PhoneGap Configuration

You can use PhoneGap Build to build the native application and tell it to intialize based on this new URL, rather than the default. Follow these steps to create a new configuration:

  1. Go to home.mendix.com and open your app.
  2. Navigate to the Mobile App page under Deploy.
  3. Configure this page as you normally would and then choose Publish for Mobile App Stores.

    phonegap-1

  4. Select Do it Yourself and then click Download Customizable Package.

phonegap-3

  1. Unzip the downloaded package and navigate to the /dist/phonegap.zip file.

phonegap-4

  1. Extract the contents of this file and find www/settings.json.

phonegap-5

  1. Change the url property to the IP address of your local machine, with the port 8080.
   {
     "url": "http://10.140.149.92:8080",
     "hybridTabletProfile": "",
     "hybridPhoneProfile":  "",
     "enableOffline": false,
     "requirePin": false
   }
  1. Save your changes and rezip the phonegap/ directory in /dist/.

phonegap-7

  1. Upload the new zip file to a new app on Phonegap Build.

phonegap-8

  1. When your app finished building in the cloud, download the app and run it to connect to your Mendix app running on your local machine!
Android Configuration
  1. Enable the developer options on your Android device. See Configure On-Device Developer Options for more information.
  2. Connect your device to your development machine and when the popup appears on your mobile device to allow USB debugging, choose Allow.

    android-2

  3. Open the Chrome browser.

  4. Open the Chrome Developer Tools (F12).

  5. Click the options icon (vertical ellipsis) and select More tools > Remote devices.

android-3

  1. Select your device from the list.

android-4

  1. Inspect the tab from your mobile device to preview the view from your device on-screen and to gain access to the Chrome web inspector and the rest of the Developer Tools.

You can now take advantage of all the debugging tools you know and love with Mendix, including offline breakpoints, quick updates/refreshes, and the Chrome Developer Tools.

For more help with Android remote debugging, check out Get Started with Remote Debugging Android Devices.