Then I decided customize the mobile app to give it a unique branding. I was expecting it to be a simple task but it came out to be a tough activity. My lack of previous experience in mobile app development was a big contributor to that. Moodle for Mobile forum was not of much help. After putting lots of effort I was able to get it done. I have documented the steps required to build and customize the Moodle App.
Next step is to change the configuration to give it a custom branding. Here is the list of files and the relevant configuration properties that needs to be changed.
Following images should be removed, so that above-mentioned images are used during build process.
resources/splash.png.md5
resources/android/icon.png
resources/android/icon.png.md5
resources/android/icon-foreground.svg
resources/ios/icon.png
resources/ios/icon.png.md5
Now run ionic cordova resources command to generate icons and splash images for various sized screens. Successful execution of this command will print logs as shown below.
IMUL-ML0245:moodleapp vinodsingh$ ionic cordova resources
> cordova-res
[cordova-res] Generated 24 resources for android
[cordova-res] Generated 50 resources for ios
[cordova-res] Wrote to config.xml
──────────────────────────────────────
Update available: 5.2.3 → 5.4.16
Run npm i -g ionic to update
──────────────────────────────────────
Note:- In my case it did not created 4 android icons whose name were ending in *-smallicon.png. I removed those images and deleted corresponding entries from config.xml.
Very informative documentation about creating icon and splash images is available here -
https://ionicframework.com/docs/cli/commands/cordova-resources
https://ionicframework.com/blog/automating-icons-and-splash-screens/
Firebase Project
For every Android app a Firebase project is madatory. Go to Firebase Console and create a new project and add the app to that. Download the google-services.json file and place it at the root folder.
Build - Debug
Now all required changes are done and we are ready to build a debug version of the app. Run ionic cordova build android to build the app with debug messages. It may fail with the following error.
Using cordova-fetch for cordova-android@8.0.0
Adding android project...
Creating Cordova project for the Android platform:
Path: platforms/android
Package: bharat.sarathi.mobile
Name: _____.____
Activity: MainActivity
Android target: android-28
Subproject Path: CordovaLib
Subproject Path: app
Android project created with cordova-android@8.0.0
Unable to graft xml at selector "/manifest/uses-feature[@android:name='android.hardware.location.gps']" from "/Users/vinodsingh/code/GitHub/moodleapp/platforms/android/app/src/main/AndroidManifest.xml" during config install
[ERROR] An error occurred while running subprocess cordova.
cordova platform add android --save exited with exit code 1.
Re-running this command with the --verbose flag may provide more information.
Running same command with --verbose provides precise error message as shown below.
[12:31:35] Local gulp not found in ~/code/GitHub/moodleapp
[12:31:35] Try running: npm install gulp
After installing local gulp reran the ionic cordova build android --verbose command and it succeeded. The APK file will be placed here - platforms/android/app/build/outputs/apk/debug/app-debug.apk. Debug app can be tested on an android emulator.
Running the build command again may fail with following error -
Users/vinodsingh/code/GitHub/moodleapp/platforms/android/app/src/main/AndroidManifest.xml:33:5-66 Error:
Element uses-feature#android.hardware.location.gps at AndroidManifest.xml:33:5-66 duplicated with element declared at AndroidManifest.xml:32:5-91
/Users/vinodsingh/code/GitHub/moodleapp/platforms/android/app/src/main/AndroidManifest.xml Error:
Validation failed, exiting
To fix this error remove the below line from AndroidManifest.xml file and run the build command again.
<uses-feature android:name="android.hardware.location.gps" android:required="false" />
Intent Filters
Testing revealed an issue with the app. After authentication in browser control does not go back to the app. User is stuck in the browser itself. This issue makes app unusable. After lots of struggle, I figured out that the following intent-filters are missing from main activity in AndroidManifest.xml.
<intent-filter>
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data android:scheme="URL_SCHEME" />
</intent-filter>
<intent-filter>
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data android:host=" " android:pathPrefix="/" android:scheme=" " />
</intent-filter>
Ideally they should have been there due to the inclusion of customurl-plugin. Adding these intent-filters manually fixed the issue.
Build - Release
After successful testing the app on emulator, I am ready for production build and test on a real device. Reading ionic publishing document is recommended before proceeding with next steps.
Create key [one time]
We have to create a key for signing the app. The Java keytool command as shown below can generate the required key.
keytool -genkey -v -keystore my-release-key.keystore -alias alias-name -keyalg RSA -keysize 2048 -validity 10000
Build
Moodle suggests few edits to the source code to make it production ready. Suggested code changes are documented here. After making code changes run the build command to create APK without debug messages.
ionic cordova build android --prod --release
It will create a apk file at location - platforms/android/app/build/outputs/apk/release/app-release-unsigned.apk location.
Sign the APK
Now this release apk file needs to be signed with key that we generated a while back.
jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystore app-release-unsigned.apk alias-name
Next is to zip align the APK using zipalign tool available in Android SDK.
~/Library/Android/sdk/build-tools/29.0.3/zipalign -v 4 app-release-unsigned.apk my-production-ready.apk
Now APK is similar to what one will download from the Play Store. It is ready for testing on an emulator or real Android device.