Mobile

Native Apps - Building

Compiling and signing your own builds

You can download the fully open-source code, along with all required Cordova plugins and dependencies, as a zip file from CodeCanyon.

Upon unzipping the zip file, you'll have 3 directories: ios, android, documentation

In android & ios directory, the project’s core code is located in the www folder. Cordova plugins are stored in the plugins folder, while platform-specific files (e.g., Android/iOS configurations) reside in the platforms folder

[Android Only] You won't need to touch any of these folder/files or even download the .zip file if you use our online compiler

We'll divide build process into three stages:

1. Configuring RKHM
2. Gathering Required Information and Assets
3. Compiling the Project into .APK or .IPA ( or .APP )
  • [Android Only] Automated Compilation: To save time, we’ve spent weeks and developed an online compiler that automates the process. After uploading your files, it generates a ready-to-publish .APK (Android) file within minutes. This tool is free and for 6 months after the purchase from Codecanyon, you can use it once per week.
  • Manual CompilationFor full control, follow our step-by-step guide to compile the project yourself using Apache Cordova. This ensures customization and direct access to build settings.

1. Configuring RKHM

Install Hybrid Mobile App as plugin within your RKHM's admin area

Before getting busy with gathering info or building the app, make sure you install "Hybrid mobile app" as a plugin within your RKHM amin-area otherwise API won't support the device! Docs

Edit  .htaccess file

Locate the .htaccess file. It's in your RKHM's root directory right next to index.php. If you can't see it, make sure "dot" files and "hidden" files are displayed. Edit the .htaccess file and add these lines to the end of the file

Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Methods "*"
Header add Access-Control-Allow-Headers "*"

Adding these rules should enable CORS requests to your web-server. You can use this tool: https://cors-test.codehappy.dev/ to see if rules are working

2. Gathering information

Brand Name:

  • Prepare your app’s brand details (e.g., name, description, etc.) for configuration

Adaptive Icon:

  • Visit icon.kitchen to generate a compliant Android adaptive icon
  • Download the generated icon as a .zip file for later use

Splashscreen Logo:

  • Prepare a square-shaped (1:1 aspect ratio) logo (PNG format only)
  • Ensure 10% padding (empty space around the logo) to avoid cropping
  • Rounded logos are allowed, but the base must be square

Theme Color:

  • Set your Progressive Web App (PWA) theme color in Admin -> Settings -> Theme Settings -> Theme Color
  • Note: This setting does not apply to the native app. Provide the same color (or a new one) in #hex format (e.g., #FF5733) for online compiler and RGB for manual compiling

[Android] Google Services Configuration:

  1. Create your app in Firebase Console (console.firebase.google.com)
  2. Add an Android project and download the google-services.json file
  3. Copy your Project ID from the Firebase Project Settings page

[Android] Service Account JSON:

  1. In Firebase Console, navigate to Project Settings -> Service Accounts
  2. Click Generate New Private Key to download a .json file
  3. Important: Upload this file to RKHM’s admin area (used for backend notifications, not compilation)

[Android][Optional] AdMob App ID

You can display banners & ad-walls inside your Android app. Create your app on https://admob.google.com/home/, verify it and copy your app ID. It should start with ca-app-pub-

[iOS]  Apple Developer Account

Create an Apple Developer Account. Make sure to upgrade to premium as some features like "push notification" are not available for free accounts

Create a bundle for your app. Copy team-id & bundle-id

Generate a .p8 APN Auth Key. Copy the key-id

You'll need to insert these data to RKHM's admin area ( Mobile setting page )

RKHM Sign-Key & Endpoint Address:

  • Endpoint Address: Your website URL + /api/ (e.g., https://yourdomain.com/api/ )
  • Sign-Key: Found in your website’s index.html source code (highlighted in comments). The native apps needs this to sign requests to your backend
  • Note: The online compiler can automatically detects these — no manual input required

3. Compiling ( Building )

3.a. [Android Only] Auto

For 6 month after initial purchase, you can use our online compiler to easily get the .APK for your app

In order to do see, simply visit our builder page and provide required information and click on Build My App. We'll send the un-signed .APK to your email address!

Compiler page: https://support.busyowl.co/deploy_app

We generate a .keystore for you
For your ease, we'll send you release-ready, signed .apk for Android. To sign the .apk and make it ready for release, we have to generate a `key` for your app. This `key` is the blueprint of your app and you'll need it for future updates. It's not safe to share it via email or store it online so please submit a support ticket to receive it
3.b. Manual

If you purchased the app more than six months ago, prefer to avoid sharing additional data or you wish to have full-control over compilation and configuration, you can compile the project independently by following the manual compilation steps below

You can build your Android app on all major operating systems ( Mac, Linux, Windows ). But you'll need a Mac to build your iOS app. More info

1. Install Cordova & Dependencies

[Android] Prerequisites:

[iOS] Prerequisites:

Install Cordova CLI:

npm install -g cordova  

[Android] Verify Android SDK Setup:

Open Android Studio →SDK Manager→ Install:

  • Android SDK Platform 33 (or your target API level).
  • Build-Tools 33.0.0 (or latest).
  • Android Support Repository, Google Play Services

More information about Android prerequisites: https://cordova.apache.org/docs/en/12.x-2025.01/guide/platforms/android/index.html

[iOS] Xcode Configuration

  • After your first Cordova iOS build, navigate to your-project/platforms/ios/ and open the .xcworkspace file (not .xcodeproj) in Xcode
  • In Xcode’s Project Navigator, select your project → Signing & Capabilities
  • Check "Automatically manage signing" (recommended for simplicity)
  • Select your Team (Apple Developer account required)
  • Ensure the Bundle Identifier matches your Apple Developer/APNs setup

More information about iOS prerequisites: https://cordova.apache.org/docs/en/12.x-2025.01/guide/platforms/ios/index.html

2. Test Cordova Requirements

Open Powershell on Windows, Terminal on Mac/Linux and navigate to the project folder. Project folder is the extracted zip file you downloaded from Codecanyon

Run one of these based on target platform:

cordova requirements android  
cordova requirements ios

Ensure all checks pass (Android SDK, JDK, Gradle).

Apple is rotten
Compiling an .IPA file for iOS requires macOS devices exclusively. You’ll also need to pay Apple a $99/year fee for a developer account. Older MacBooks won’t work either, you'll need latest version of Xcode. Emulators are also limited and don't support some features like push notification

3. Insert Gathered Assets & Configurations

If you are building the iOS app then www folder below refers to ios/www folder. For android, the documentation is referring to android/www folder

A. Brand Name & Theme Color

  • Locate index.html inside www folder
  • Line 12 & 168 is where you enter your brand's name
  • Line 169 is where you enter the text displayed on login page after the splashscreen
  • Line 24 is where you enter your theme color in RGB format
  • Locate config.xml next to the www folder
  • Line 2 is your app's unique name ( Firebase package name )
  • Line 4 is your app's name
  • Line 6 is your app's description
  • Line 7 is author's website & email ( enter yours )
  • Line 8 is author's name

B. Adaptive Icon & Splashscreen

  1. Unzip your icon.kitchen .zip file.
  2. Android -> Copy all android/res/mipmap-* folders to www/assets/logos
  3. iOS -> Copy all ios/AppIcon-*.png files to www/assets/logos
  4. Place your splashscreen logo (PNG) in www/assets/splash_logo.png

C. [Android] Firebase Configuration

  • Copy google-services.json to platforms/android/app folder

D. RKHM endpoints & Sign key

  1. Locate index.html inside www folder
  2. Line 160 is where you paste RKHM's endpoint address 
  3. Line 165 is where you enter RKHM's sign key

4. Compile the APK/IPA/APP

[Android][Optional] Add AdMob Plugin

cordova plugin add admob-plus-cordova --save --variable APP_ID_ANDROID=ca-app-pub-*******

Replace ca-app-pub-******* with your actual AdMob App ID

Remove target platform and re-add it

cordova platform remove android
cordova platform add android

cordova platform remove ios
cordova platform add ios

[Android] Make sure you copy google-services.json file again

Build the Project:

cordova build android --release  

cordova build ios --prod

After compilation, find the .apk/.ipa/.app at:

platforms/android/app/build/outputs/apk/release/app-release-unsigned.apk 
platforms/android/app/build/outputs/apk/release/app-release.apk 


platforms/ios/build/Debug-iphoneos/{app_name}.ipa
platforms/ios/build/Debug-iphonesimulator/{app_name}.app 
5. [Android][Optional] Signing the app

You only need to sign the APK if you’re publishing to app stores like Google Play.

Google’s official signing guide:→ Android Developer Docs: Sign Your App