Document TOP » Products Guide » Monaca CLI » Monaca CLI Tutorial » Part 3: Building Monaca App

Part 3: Building Monaca App

In this page, we will cover the two following topics:

  1. Building a Monaca App for iOS
  2. Building a Monaca App for Android

For more information on how to build Monaca Apps for other platforms, please refer to Build.

Building a Monaca App for iOS

In this section, we will talk about how to create a Debug Build of your Monaca app for iOS which will be installed on a development device. For more information about other types of build, please refer to Types of Build.

Prerequisite

  1. You must enroll in Apple Developer Program.
  2. After enrolling in the program, you will be able to create the following items which are required to create a Debug build in Monaca:

Step 1: Configuring iOS App Settings

  1. In the command window, navigate to your project folder and use monaca remote build command. This command will automatically upload your local project files to Monaca Cloud. Please type the following command to open an interactive build interface in your browser.
$ monaca remote build --browser
  1. From the build interface under the App Settings on the left menu, select iOS.
  2. Fill in the necessary information of your app:
  • Application Name: a name representing your app publicly such as in the Market.

  • App ID: a unique ID representing your app. It is recommended to use reverse-domain style (for example, mobi.monaca.appname) for App ID. Only alphanumeric characters and periods (at least one period must be used) are allowed. Each segment separated by a period should begin with an alphabetic character.

  • Version Number: a number representing the version of your app which will be required when uploading (publishing process) your application via iTune Connect later. It needs 3 numbers separated by dots (for example, 1.10.2). Each number should be in [0-99].

  • The remaining information is optional. In this page, you can also configure icon, splash screen and other configurations.

    ../../../_images/ios_11.png

Warning

The App ID in Monaca Build Settings must be the same as the App ID you have registered in iOS Provisioning Portal. This App ID (in Monaca Build Settings) cannot contain an asterisk (*); otherwise, the build will fail.

  1. After finishing the configurations, click Save.

Step 2: Configuring iOS Build Settings

  1. From the build interface under the Build & Build Settings on the left menu, select iOS. Then, select Manage build settings.
../../../_images/ios_8.png
  1. Click on Generate Key and CSR button and fill in your Apple ID information (user name and email address) and country. Then, click Generate Key and CSR button. After that, you will be asked to download the CSR file. You can also import an existing Private Key if you have one.
../../../_images/ios_21.png

Note

If you import an existing private key, you need to use the certificates which are issued based on that imported private key. However, if you create a new private key and CRS file, you will need to use the new CRS file to issue new certificates.

Step 3: Building the App

  1. From the build interface under the Build & Build Settings on the left menu, select iOS. Then, select the Debug Build option and the corresponding provisioning profile. Then, click Start Build button.
../../../_images/ios_31.png
  1. It may take several minutes for the build to complete. Please wait. The following screen will appear after the build is complete.
../../../_images/ios_41.png

Step 4: Installing the Built App

There are 3 ways to install the debug built app:

  1. Download the built app and use iTunes to install the built app on your iOS device.
  2. Install via QR code.
  3. Install via cofigured deployment services.

Building a Monaca App for Android

In this section, we will talk about how to create a Debug Build of your Monaca app for Android. For more information about other types of build, please refer to Types of Build.

Step 1: Configuring Android App Settings

  1. In the command window, navigate to your project folder and type monaca remote build command. This command will automatically upload your local project files to Monaca Cloud. Please type the following command to open an interactive build interface in your browser.
$ monaca remote build --browser
  1. From the build interface under the App Settings on the left menu, select Android.
  2. Fill in the necessary information of your app:
  • Application Name: a name representing your app publicly such as in the Market.

  • Package Name: a unique ID representing your app. It is recommended to use reverse-domain style (for example, mobi.monaca.appname) for App ID. Only alphanumeric characters and periods (at least one period must be used) are allowed. Each segment separated by a period should begin with an alphabetic character.

  • Version Number: a number representing the version of your app. It needs 3 numbers separated by dots (for example, 1.10.2). Each number should be in [0-99].

  • Use Different Package Name for Debug Build: if checked, the package name of the debug-built app and custom-built debugger are different. In other words, the package name of debug-built app will have .debug extension, and the one for project debugger will have .debugger extension. However, this option is disable by default because it made some plugins impossible to be debugged due to the fact that they are tied to exact package names (eg. in-app purchase).

  • The remaining information is optional. In this page, you can also configure icon, splash screen and other configurations.

    ../../../_images/android_11.png
  1. After finishing the configurations, click Save.

Step 2: Configuring Android KeyStore

Android KeyStore is used for storing the keys (Alias) needed to sign a package. When a KeyStore is lost or it is overwritten by another KeyStore, it is impossible to re-sign the signed package with the same key. One KeyStore can contain multiple aliases, but only one alias is used for code-sign an application.

Note

Android KeyStore is required in order to create a Release build. However, it’s not necessary in order to create a Debug build.

In order to configure a new Android KeyStore in Monaca, please do as follows:

  1. From the build interface under the Build & Build Settings on the left menu, select Android. Then, choose Build for Release and select Manage KeyStore and Alias.
../../../_images/android_21.png
  1. The KeyStore can either be created or imported. In this tutorial, we assume that you need to create a new KeyStore. Therefore, click on Clear and Generate New button. Then, the following screen will appear:
../../../_images/android_31.png
  1. Fill in the necessary information related to the KeyStore such as:
  • Alias: key information stored in the KeyStore which is used to sign an app package.
  • Password: password for the Alias.
  • KeyStore Password: password for the new KeyStore.
  1. Then, click Generate KeyStore and Alias button.

Step 3: Building the App

  1. From the build interface under the Build & Build Settings on the left menu, select Android. Then, select the Debug Build option. Then, click Start Build button.
../../../_images/android_41.png
  1. It may take several minutes for the build to complete. Please wait. The following screen will appear after the build is successfully completed.
../../../_images/android_51.png

Step 4: Installing the Built App

There are 5 ways you can install the built app:

  1. Network Install.
  2. Install via QR Barcode.
  3. download the built app directly to your computer and install it via USB cable.
  4. send the URL to download the built app to your registered email address.
  5. Install via cofigured deployment services.