# Part 3: Building a Monaca App This tutorial will cover building Monaca apps for iOS and Android: 1. [Building a Monaca App for iOS](#building-a-monaca-app-for-ios) 2. [Building a Monaca App for Android](#building-a-monaca-app-for-android) For more information about building Monaca apps for other platforms, refer to [Build](https://en.docs.monaca.io/products_guide/monaca_ide/build). ## Building a Monaca app for iOS This section will explain, how to create a debug build version of your app for iOS and install it on a development device. For more information about the types of build, please refer to the [types of build](https://en.docs.monaca.io/products_guide/monaca_ide/build/ios/build_ios#types-of-build). ### Prerequisites: * You must enroll in the [Apple Developer Program](https://developer.apple.com/programs/ios/). * You are required to create the following items in the iOS Provisioning Portal: * `App ID` (see [Register an app ID](https://en.docs.monaca.io/products_guide/monaca_ide/build/ios/build_ios#register-an-app-id) and [Register a development device](https://en.docs.monaca.io/products_guide/monaca_ide/build/ios/build_ios#register-a-development-device)) * `Developer Certificate` (see [Generate a certificate](https://en.docs.monaca.io/products_guide/monaca_ide/build/ios/build_ios#generate-a-certificate)) * `Development Provisioning Profile` (see [Create a provisioning profile](https://en.docs.monaca.io/products_guide/monaca_ide/build/ios/build_ios#create-a-provisioning-profile)) ### Step 1: Configuring the iOS app settings 1. From the Monaca Cloud IDE menu, go to **Configure → App Settings for iOS**. 2. Fill in the app information: | Field | Description | | ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Application name | The name representing your app in the App Store | | App ID | A unique ID representing your app. It is recommended to use reverse-domain style (for example, `mobi.monaca.appname`). Only alphanumeric characters and periods (at least one period must be used) are allowed. | | Version Number | The number representing the version of your app. It will be required when uploading your application via App Store Connect later (publishing process). It needs 3 numbers separated by dots (for example, 1.10.2). Each number should be in `[0-99]`. | The remaining information is optional. You can configure for example the icon and splash screen of the app. ![](https://3091308003-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWe1U2tFctp8FkP9W8%2F-MgNgEQWcV_5efSszah9%2F-MgNg_6G-o6IAyOmakWt%2Fimage.png?alt=media\&token=8c91cf12-f8ac-4e14-8362-6533f5b44378) {% hint style="danger" %} The app ID (set in the Monaca app settings) cannot contain asterisk (**`*`**) or the build will fail. The App ID must be the same as the explicit app ID you register (or have registered) in the Apple Developer Program. {% endhint %} 3\. After finishing the configurations, click **Save**. ### Step 2: Configuring the iOS build settings 1. From Monaca Cloud IDE menu, go to **Configure → iOS Build Settings**. 2. You can either create a new private key or [import an existing one](https://en.docs.monaca.io/products_guide/monaca_ide/build/ios/import_export#step-2-import-a-private-key-and-a-certificate-to-monaca). This tutorial will show how to create a new private key. Therefore, click the **Generate Key and CSR** button. ![](https://3091308003-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWe1U2tFctp8FkP9W8%2F-MgNhBJjk7tSvZipbGMB%2F-MgNhz2jJWVhD6G7teDE%2Fimage.png?alt=media\&token=3448db58-8f8b-444c-ae1a-945283ffce33) 3\. Fill in your Apple ID information (user name and email address) and country. Then, click the **Generate Key and CSR** button. ![](https://docs.monaca.io/images/monaca_ide/tutorial/building_app/ios_3.png) 4\. The following dialog box will open if your authentication is successful. Click the **Download CSR** button. The downloaded CSR file will be required later to issue the certificates in the iOS Provisioning Portal. ![](https://docs.monaca.io/images/monaca_ide/tutorial/building_app/ios_5.png) {% hint style="info" %} If you import an existing private key, you have to use the certificates that are issued based on it. However, if you create a new private key and a CRS file, you will need to use the new CRS file to issue new certificates. {% endhint %} ### Step 3: Building the App 1. From the Monaca Cloud IDE menu, go to **Build → Build App for iOS** . 2. Select the **Debug Build** option and the corresponding provisioning profile. Then, click **Start Build**. ![](https://3091308003-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWe1U2tFctp8FkP9W8%2F-MgNhBJjk7tSvZipbGMB%2F-MgNiTv3OHxleeUJWDIl%2Fimage.png?alt=media\&token=bebadffc-3a48-45a5-a903-b6f071951666) 3\. It may take several minutes for the build to complete. The following screen will open after the build is complete. ![](https://docs.monaca.io/images/monaca_ide/tutorial/building_app/ios_7.png) ### Step 4: Installing the built app There are 3 ways to install a debug built app such as: 1. Download the built app and use the Apple Configurator 2 to install the built app on your iOS device. (Mac Only) 2. Install via QR code. 3. Install via [configured deployment services](https://en.docs.monaca.io/products_guide/monaca_ide/monaca_ci/supported_services). ## Building a Monaca app for Android This section will explain, how to create a debug build version of your app for Android. For more information about the types of build, please refer to [Types of build](https://en.docs.monaca.io/products_guide/monaca_ide/build/build_android#types-of-build). ### Step 1: Configuring the Android app settings 1. From the Monaca Cloud IDE menu, go to **Configure → App Settings for Android** . 2. Fill in the app information: | Setting | Description | | ------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Application Name | The name representing your app in the Market | | Package Name | A unique name that will be used when uploading to the Android Market. It is recommended to use the reverse-domain style (for example, `io.monaca.app_name`) for app ID. Only alphanumeric characters, periods (at least one period must be used) and underscore are allowed. Each segment should be separated by a period and started with an alphabetic character. | | Use Different Package Name for Debug Build | If enabled, the package name of a release built and a debug built apps are different. The package name of a debug built app will have `.debug` extension, and the one for a project debugger will have `.debugger` extension. However, this option is disabled by default because it made some plugins impossible to be debugged due to the fact that they are tied to the exact package names (eg. in-app purchase). | | Version | The version number of your app. A version number consist of numbers separated by dots (for example, 1.0.0). | | Version Code | The internal version number of your app, relative to other versions. The value must be an integer, so that the applications can programmatically evaluate it for an upgrade. | | Fullscreen | This option is only available with the Cordova 3.5 and later. If enabled, your app will run in a fullscreen mode which hide the status bar. | The remaining information is optional. You can configure for example the icon and splash screen of the app. ![](https://3091308003-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWe1U2tFctp8FkP9W8%2F-Mfp27Ss7MbsogH39sPF%2F-Mfp3jiJa2Kb5NAkeeOn%2Fimage.png?alt=media\&token=aff45144-e118-4027-831d-f989eac4b3ee) 3\. After finishing the configurations, click **Save**. ### Step 2: Configuring the Android KeyStore Android KeyStore is used for storing the keys (alias) needed to sign a package. When a KeyStore is lost or overwritten by another KeyStore, it is impossible to resign the signed package with the same key. One KeyStore can contain multiple alias, but only one alias is used for code-signing an application. To configure an Android KeyStore in Monaca, follow the instructions below: 1. From the Monaca Cloud IDE menu, go to **Configure → Android KeyStore Settings**. 2. The KeyStore can either be created or imported. In this tutorial, we assume that you need to create a new KeyStore. Therefore, click the **Clear and Generate New** button. ![](https://3091308003-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWe1U2tFctp8FkP9W8%2F-Mfp27Ss7MbsogH39sPF%2F-Mfp4zJFDJaUUwTFgnec%2Fimage.png?alt=media\&token=38b7c0c5-b559-458d-90d4-3c94a355722f) 3\. The following screen will open: ![](https://docs.monaca.io/images/monaca_ide/manual/build/android/3.png) 4\. Fill in the necessary information as shown in the above screen: * `Alias`: the name representing the private key that you will use later when signing your app. Multiple aliases can be stored within one KeyStore. * `Alias Password`: the password for the private key (alias). * `Password for KeyStore`: the password for the KeyStore. You will need this password when importing the KeyStore. 5\. Then, click the **Generate KeyStore and Alias** button to generate the KeyStore. ### Step 3: Building the app 1. From the Monaca Cloud IDE menu, go to **Build → Build App for Android**. 2. Select the **Debug Build** option and click the **Start Build** button. ![](https://3091308003-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWe1U2tFctp8FkP9W8%2F-Mfp27Ss7MbsogH39sPF%2F-Mfp5LgZ-S0KWgruu7Bt%2Fimage.png?alt=media\&token=e5e66c58-e292-41a0-a4c2-fc98408ae959) 3\. It may take several minutes for the build to complete. The following screen will open after the build is successfully completed. ![](https://docs.monaca.io/images/monaca_ide/tutorial/building_app/android_5.png) ### Step 4: Installing the built app There are 5 ways to install the built app: 1. using the [network install](https://en.docs.monaca.io/products_guide/debugger/installation/debugger_android#network-install) 2. installing via QR Barcode 3. downloading the built app directly to your computer and installing it via USB cable 4. sending a URL to download the built app to a registered email address 5. installing via configured [deployment services](https://en.docs.monaca.io/products_guide/monaca_ide/monaca_ci/supported_services).