To use Mendix Studio Pro’s native mobile app capabilities, you can use the Native Mobile Quickstart 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 Native Mobile Quickstart app also includes four modules:
- Administration – helps you manage users
- Atlas UI Resources package – allows for app styling
- Nanoflow Commons – contains generic useful nanoflow actions
- Native Mobile Actions – contains various native widgets and nanoflow actions that leverage device capabilities
Before starting this how-to, 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)
3 Creating a New App Project Based on the Quickstart App
For details on making a Mendix app using the Native Mobile Quickstart app template, download the Make It Native app on either the Google Play store or the Apple App Store. This app template includes the latest version of Atlas UI, as well as the Native Mobile Resources module containing widgets and nanoflow actions for native mobile apps. 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). Using the Make It Native app to view the changes to your Mendix app, see the sections below.
3.1 Starting a Quickstarter App Project
To start a new app based on a template, follow these steps:
- Open Mendix Studio Pro. Select File > New App , and then select the Native Mobile Quickstart app.
- Click Use this starting point.
- Click Create app to close the dialog box.
- Click the play button (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.
3.2 Downloading and Installing the Make It Native App
3.2.1 Downloading for Android
To view your app on an Android device (or emulator), you must download and install the Make It Native app from the Google Play store:
3.2.2 Downloading for iOS
To view your app on a iOS device, you must download and install the Make It Native app from the Apple App Store:
3.3 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, we recommend 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:
3.4 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 the play button (Run Locally) to automatically update the running app on your device, and see your new text. When you click the play button (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).