Testing iOS Apps without Certificate & Provisioning using Monaca Simulator Build

Ever had any tedious problem with the setup of your iOS provisioning profile(s)? Or maybe your provisioning profiles have expired, and you just can’t be bothered renewing them?… But you just can’t wait to test out your latest awesome mobile app nonetheless?

Fear not, enthusiastic developers; we’ve got you covered. Here comes Simulator Build to the rescue!

What is the Simulator Build?

Testing is an integral part of app development. Although apps made with Cordova can be previewed in the browser (by extension, PC), some restrictions prevent a developer from thoroughly testing out their app (e.g. Cordova plugins, Apple app services, platform quirks). To make sure your app is really working as intended, you should have your app built first before testing.

On the iOS platform, before you can even install your app, setting up provisioning profile(s) is required. To do so, one must join the Apple Developer Program and do a bunch of configurations.

The fastest path from code to customer… only if you pay, of course. ( image source )

Though like always, there are cases where a developer cannot get access to their provisioning profiles, or for some reason or another, don’t want to/can’t join the Apple Developer Program.

So this time, we have added the Simulator Build feature to Monaca. Unlike every other type of builds in the past, setting up the iOS Build Configuration page is NOT a requirement (by extension: No need for certificates & provisioning profiles). In other words, testing your iOS app has just become easier than ever before!

In this post, we will explain how to:

• Use the Simulator Build feature in Monaca
• Test the build on a Mac (using Xcode’s iOS simulator)
• Test the build in the browser (using Appetize.io, an online service)

NOTE: Sadly, installing an app built with the Simulator Build on an iOS device is NOT possible.

How to Create Simulator Build in Monaca

1. With your Monaca project opened in the Cloud IDE, navigate to the Build iOS App screen by going to Build → Build App for iOS .

2. On the right-hand side of the screen, you will find that the Simulator Build option has been added. To start, simply click on the Simulator Build icon & then the Start Build button.

Will you press the Blue Button?

3. When the building process is finished, you will be given the option to “Download to Local PC”. Doing so will allow you to download a zip file (should have a name like 20180511173937-app.zip ).

Download complete.

4. Inside the zip file, there should be an app file named *App name*.app . That is our simulator-ready app right there.

1st file = Before extraction , 2nd file = After extraction

How to Install the Simulator Build

We recommend two ways to install your Simulator Build:

• If you have access to a Mac, head to the Install using Xcode (Mac) section (coming right up; simplest option).
• If you do NOT have access to a Mac, then head to Install using Appetizer.io service (browser) section (a little further down the article; is more complicated, but can also be used for website purposes).

Install using Xcode (Mac)

( image source )

Xcode is a MacOS IDE developed by Apple, allowing users to develop software for various Apple platform (e.g. macOS, iOS, watchOS, tvOS). Xcode contains a number of useful tools, one of which is an iOS simulator capable of installing & running app files.

Using Xcode’s iOS simulator, we can install and test our Simulator Build. MacOS comes with Xcode by default, but if it isn’t installed on your PC, you can download it from the official website.

Steps

1. Run Simulator.app which can be found in /Applications/Xcode.app/Contents/Developer/Applications/ directory.

Or you can quickly run the app using the terminal with the following command:

open -a /Applications/Xcode.app/Contents/Developer/Applications/Simulator.app

2. After the iOS home screen has loaded on the simulator, drag and drop your downloaded app file into the simulator screen.

Crossing realms.

3. The app will then be installed, and you will be able to launch it within the iOS simulator. And don’t worry, Cordova plugins will function as normal; so it will feel just like testing on the real thing!

The World of Nothingness

Debugging Option

The desktop version of Safari, like most other browsers, includes the powerful Web Inspector feature. However, Safari has the special ability to link its Web Inspector with systems running iOS (whether physical or virtual).

Using this feature, you can debug your Monaca app (hosted with the Xcode iOS Simulator), as if it was a regular webpage!

Bug-hunting in progress.

To see how to do this, please head to this tutorial.

Install using Appetizer.io service (browser)

( image source )

Appetize.io is an online service which allows you to embed functional mobile apps onto a webpage. Appetize is often used to introduce an app on a webpage, as well as being a mean to present an integrated demo.

We have now also added the ability to deploy app builds directly to Appetize.io from Monaca. Thus, even if you don’t have a Mac, you can use this feature to test your app as long as you have a working browser on a computer.

Steps

1. You can start using Appetize for free by signing up for a trial here.

2. After creating an account, you will need to request an API token. Enter your email address and click the Request button. You should receive an email containing the API token shortly after.

Oh, great Appetize! Grant me power!

3. Next, open up a Monaca project and navigate to the Deploy Services screen by going to Config → Deploy Services .

4. Click the Add Deploy Service button, then select AppetizeIo. For the API Token field, copy and paste the API token from your email. For the Config Alias field, enter a name that will help you identify the project: e.g. the app’s name.

Then again… would anyone even bother (typing)?

5. After pressing the Add button, proceed to start a Simulator Build. When the build is finished, the Appetize.io option should appear under Deployment & Optional Services. Click on it.

“A new path has appeared!!”

6. A window will then pop up. There, you can insert some Optional Parameters; if you need to. Press the Deploy button when you are ready.

7. After deployment is complete, head to Appetize.io. On the Dashboard page, the app that you have just deployed should be there.

Notice anything different? — (“Hello World App” actually comes from the Application Name setting on the Monaca project’s iOS App Configuration page)

Available Operations

Appetize offers a number of different operations that you can do with your deployed app. For example:

• Clicking on the view link allows you to simulate running your app under different settings (iOS version, colour of phone, network intercept etc.).

Screenshot of the view page. There are changeable settings below.

• Clicking on the embed link will display a page containing only an iOS phone UI, similar in style to the Xcode iOS simulator. This UI can be embedded on an external website, using the iframe tag.

and more…

Summary

Thanks to the new Simulator Build feature, Monaca app testing can now be easily done, without even the need to mess with Provisioning Profiles or the Apple Developer Program. If you had any problems or difficulties with iOS testing in the past, you should definitely give this new feature a try!