Getting Started with Mobile

Last modified: August 20, 2024

Introduction

To use Mendix Studio Pro’s native mobile app capabilities, you can use the Blank Native Mobile App app from the Mendix Marketplace. This app is optimized to quickly build a native mobile app. Out of the box, this app gives you a native page, a native phone profile to enable native device navigation, a native layout with menus, and native widgets and actions which leverage device capabilities.

The Blank Native Mobile App also includes six modules:

Administration: helps you manage users
Atlas Core: enables app styling
Atlas Native Mobile Content: allows you to style native mobile apps with page templates and building blocks
Atlas Web Content: allows you to style web apps and progressive web apps with page templates and building blocks
Nanoflow Commons: contains generic useful nanoflow actions
Native Mobile Resources: contains various native widgets and nanoflow actions that leverage device capabilities

Prerequisites

Before starting this guide, make sure you have completed the following prerequisites:

Have a mobile device to test your native mobile app
For information on device requirements, see System Requirements
If you wish to use an emulator for Android mobile testing, install a product such as Bluestacks or Genymotion (your emulator must have Google Play services supported)

Android devices running MIUI (Xiaomi/Redmi devices) are not supported as Mendix test devices. They can run a production version of your Mendix app, but not the development version based on the Make It Native App or a custom developer app.

Creating a New App Based on the Quickstarter App

For more information on building native mobile apps, see the Build a Native Mobile Inspection App learning path (you must be signed in to the Mendix Platform to see this learning path).

Starting a Quickstarter App

To start a new app based on a template, follow these steps:

Open Mendix Studio Pro. Select File > New App, and then select the Blank Native Mobile App.
Click Use this starting point.
Click Create app to close the dialog box.
Click Run Locally () to see the app in action. Please note that starting a native mobile app for the first time can take a bit longer (about one minute total) than subsequent instances.
After running your app, you may see a Windows Security Alert dialog box. Accept the permissions selected by default and click Allow access to close the dialog box.
If asked to create database ‘default’, click Yes.

At this point you have a running native mobile app. To view your app on a mobile device, however, you need to download the Make It Native app.

Downloading and Installing the Make It Native App

Downloading for Android

To view your app on an Android device (or emulator), you must download and install the Make It Native 9 app from the Google Play store:

Downloading for iOS

To view your app on an iOS device, you must download and install the Make It Native 9 app from the Apple App Store:

Viewing Your App on Your Testing Device

Viewing your app on a mobile device will allow you to test native features and other aspects of your app. This section is written for mobile devices, but you may use an Android emulator mentioned in the Prerequisites section above. To view your app, follow these steps:

Locate your app’s QR code in Mendix Studio Pro by clicking the drop-down menu next to the View App button, then selecting View on your device and navigating to the Native mobile tab. Here you will see your test app’s QR code.
Start the Make It Native app by tapping its icon on your device.
Tap the Scan a QR Code button:
If prompted, grant the app permission to access your device’s camera.
Point your mobile device’s camera at the QR code. It will automatically launch your test app on your mobile device.

Your mobile device has to be on the same network as your development machine for the Make It Native app to work. If this is the case and the connection still fails, make sure that communication between devices is allowed in the Wi-Fi access point. Also, Mendix recommends keeping the Runtime port in App Settings > Edit on 8080. If you change it, do not change it to 8083, because that is designated for app packaging.

Now you can see your app on your device. While this is just a template app, whenever you make changes you will be able to view them live on your Make It Native app.

You may notice an Enable dev mode toggle on the Make It Native app home page. Turning this toggle on will give you more detailed warning messages during error screens, as well as additional functionality on the developer app menu:

Viewing Changes to Your App on Your Testing Device

To see how changes made in Mendix Studio Pro are displayed live on your testing device, make a small change to your app.

Put a text widget on your app’s home page. Then, write some text into it. In this example, “Native rules!” has been added:
Click Run Locally () to automatically update the running app on your device, and see your new text. When you click Run Locally, your app will automatically reload while keeping state.

If you get an error screen while testing your app, there are easy ways to restart it:

Tap your test app with three fingers to restart your app
With the Enable dev mode toggle turned on, hold a three-fingered tap to bring up the developer app menu—here you can access ADVANCED SETTINGS and ENABLE REMOTE JS DEBUGGING

For more detailed instructions on debugging a native mobile app, see Debug Native Mobile Apps (Advanced).