With the age of Mendix using Phonegap soon coming to an end, there are still a lot of running applications which will need to be maintained. Meaning we will still need make use hybrid mobile applications, at least for a little while longer. Therefore, I am writing this blog to explain step by step, how to build an APK or IPA file.
How to build Hybrid Android APK’s using Cordova’s Command Line Interface.
Go to your application’s dashboard on Mendix, and select Mobile App in the left hand side menu. Refer to Fig. 1 below
Select the Android checkbox and make sure that you enable the any features of mobile such as camera, calendar or photo library which your app my require access to. Then press “Publish for Mobile App Store” (Fig. 2 and Fig. 3)
Select the environment you are building the app for (in this case it’s “Sandbox” in the drop down menu), and it will populate the default free app URL, which can be modified later in the code based. Then press “Download Customizable Package”, take a look at Fig. 4
When the download completes, you will have a zip file, which you can extract the code from. (Fig. 5.)
Open the folder called “phonegap” with VScode, the structure of the folder will be like this (Fig. 6.)
Open a terminal in VScode. First run the command below.(Fig. 7).
At identifier change “-“ to “.”, if you don’t change this, it could fail to build. (Fig. 8 and Fig. 9).
In case you want to edit any plugins, you will need to do it from these files which are “config.xml.mustache” and “index.html.mustache” (Fig. 10 and Fig. 11)
Then save all, and run the command(Fig. 12)
npm run package
You will see that after the command is completed, the folder build will contain the config.xml and index.html, similar to those “mustache” files (Fig. 13 and Fig. 14)
Now go to the build folder in the terminal using the command (Fig. 15)
What you need to do here is to find a way to install the Cordova CLI, this is an easily achieved with this guide.
Now run the command shown below(Fig. 16)
cordova platform add android
Now you have a folder under build, which is called platforms/android.
In the case of installing a plugin, you can also use the Cordova CLI after the step above. (Fig. 17)
cordova plugin add cordova-plugin-customurlscheme — variable URL_SCHEME=app2
The final step to get the android file is to run this command (Fig. 18)
cordova build android
If successfully built, the APK file can be found in the path shown in the last line of output in the terminal. The file path will be unique to your device(Fig. 19).
In order to publish an APK to Google Play, you will need to generate a signed build. To do this you can follow this Guide.
How to build hybrid iOS with the Cordova Command Line Interface
Make sure that you download phonegap.zip from mendix with iOS selected (Fig. 20).
Go to build folder and run the command(Fig. 21).
cordova platform add ios
You can also add any Cordova plugin’s at this step (Fig. 22).
If you want to install any pod dependencies, go to the platform/ios folder using the command
And then run the command to install any dependencies(Fig. 23 and Fig. 24)
Next use XCode to open the iOS folder(Fig. 25)
Select “team” in the Signing and Certificate menu (Fig. 26)
Now on the top you can access the menu to build your app onto your iOS device, for development and testing purposes without the need to publish the app to any online store (Fig. 27).
Normally you will get this error:
error: The sandbox is not in sync with the Podfile.lock. Run ‘pod install’ or update your CocoaPods installation.
Go to XCode again and add another config for a custom path in build setting for SRCROOT(Fig. 28)
Then go back to Build Phase and change to SRCROOT (Fig. 29)
Clean the build and try to build it again, you will see the success message appear (Fig. 30)
Result for app build (Fig. 31 and Fig.32).
To publish to the Apple Store you will need a signed IPA file. To do this you can follow this guide.
Remember that when publishing to the Apple Store there are 2 profiles that you can choose from. One is development, and the other is distribution. If you want your app to be accesible to the public you will need to select the distribution profile.
From the Publisher -