Build App

Step 1: Website Changes

Use FTP and edit the application/config/rest.php file on your website. Change the rest_auth to basic (at line number 113) and default login credentials (at line number 213).

  • $config['rest_auth'] = 'basic';
  • $config['rest_valid_logins'] = ['app@goclixy.com' => 'app123@#'];

Step 2: Install Prerequisites

  • Install the Node.js

https://nodejs.org/en/

  • Download the Visual Studio Code editor

https://code.visualstudio.com/

  • Download Java Runtime Environment for Windows/Mac and install it. Visit the Java website and download the installer.

https://www.oracle.com/java/technologies/javase-downloads.html

  • Install Ionic Globally using Visual Studio Code Editor, you can also do it through command prompt.
npm install -g @ionic/cli
  • Create a blank project using the command below:
ionic start matri blank
  1. Select Angular as the Framework during the new project.
  2. Press y for the Capacitor. 
  3. Create a free account if possible.
  4. Go to the directory folder.
  5. Copy src and package.json folder from the Mobile app folder to the matri folder.
  6. Run npm install and the application is ready to run.
  7. Run npm audit fix to install missing dependencies.

Step 3: Prepare App

  • Edit the config.json file and replace the appID and appName with your details.
    Capacitor Config
  • Edit the XML file and change the Widget ID, Name, Email, Website URL, and App Name Config Changes
  • Modify the src/environments/environment.ts and prod.ts files. Modify the following
    • baseurl: URL of your domain name. e.g. https://matri.goclixy.com/mobiles
    • apiUsername: Changed earlier using FTP
    • apiPassword: Changed earlier using FTP
    • onesignalAppId: Create a new account at https://onesignal.com/ and enter your App ID here.
    • androidAppId: Get the App ID from the firebase console. Also, download the google-services.json file.
    • googleMapsAPIKey: Leave the default value to demo.
  • Test app by running the command below:
ionic serve

Step 4: Prepare Images

Create two different images for your Mobile App to display your site brand identity.

  • Icon - Size: 1024 x 1024 px (png, psd, ai)

Note: The Icon image should have no corners.

The icon is a graphic that represents your app on the device's screen.

  • Splash - Size: 4096 x 4096 px (png, psd, ai)

Note: Artwork should be centered within the square, knowing that each generated image will be center cropped into landscape and portrait images.

A Mobile App takes some time to start up, especially when the app is first launched on a device. A splash screen is used to display the startup progress to the user or to indicate branding.

  • After creating images, upload the splash file on the URL below to generate the different size images you need for each platform:

https://apetools.webprofusion.com/#/tools/imagegorilla

  • Download the images and move them to the resources\android\icon and resources\android\splash folders.

Step 5: Build an Android APK file

  • Run the following command to generate a new Keystore file:

"C:\\Program Files\\Java\\jdk-13.0.2\\bin\\keytool" -genkey -v -keystore matri-release-key.keystore -alias matri -keyalg RSA -keysize 2048 -validity 10000

  • Run the command below to add the android platform
    • ionic build
    • ionic cap add android
  • Paste the google-services.json file (Step 3) inside the android\app folder.
  • Run the command below to open Android Studio with IONIC Android files.
    • ionic cap run android --prod
  • In Android Studio, visit the Build->Generate Signed Bundle/APK link. Provide the Keystore file path and click the Next, Next, and Finish button.
  • This will generate a release build based on the settings in your config.xml file. You can find your APK file in the android/app/release folder.