customizing and building the moodle app

After learning how to use an older node version, the moodle app could finally be customized and built - a follow-up to my failed trials here. 

The customization steps and the relevant modified files are in this location, with the changes being mentioned in the readme as follows:

1. Changes as per the moodle doc on compiling with AOT
Edit Oct 2022 - the link content seems to have changed, so here is the archived version.

2. Change to the build.gradle to force minSdkversion 22

ext.cdvMinSdkVersion = 22

to build with android studio. This can also be done in config.xml

3. Changing all ~ and ^ package dependencies in package.json (except cordova-android itself) to the exact package. Done by replacing

"~ with "

and

"^ with "

in package.json

Or else, all sorts of dependency issues while building the 2019 release in 2021. (The nvm use 11 may also suffice for solving the dependency issues.)

The build directory takes up more than 1 GB, lots of dependencies are downloaded. 

4. Customization - Changes as per the Configuration heading at this post,

config.xml

reduced SplashScreenDelay

and SplashShowOnlyFirstTime true

also, very important,

content src="https://sssvidyavahini.org" would make the app like a simple webview.

We don't want that, so leave the content src as it is, 

but change the siteurl in src/config.json

and onlyallowlistedsites true.

We also set android-minSdkVersion" value="22" in config.xml

google-services.json - changed the package name

and changed the version in src/config.json , ensured it is different, but same number of digits.

5. Changing logo and splash screen as per above url and also resources/android/icon-background.png and icon-foreground.png

and in src dir assets/img

Build steps - 

Set up environment variables as per

https://cordova.apache.org/docs/en/10.x/guide/platforms/android/

JDK tar.gz needed oracle login, created as my official email

Set JAVA_HOME

https://docs.oracle.com/cd/E19182-01/821-0917/inst_jdk_javahome_t/index.html

in .bashrc, added the following.

export JAVA_HOME=/home/mac/Downloads/jdk1.8.0_281
export PATH=$JAVA_HOME/bin:$PATH
export ANDROID_SDK_ROOT=/home/mac/Android/Sdk
export PATH=$ANDROID_SDK_ROOT/tools:$ANDROID_SDK_ROOT/tools/bin:$ANDROID_SDK_ROOT/platform-tools:$PATH

As mentioned in the cordova documentation, we can open a cordova project inside android studio for the final build - choose the import gradle project option, and choose the platforms/android directory.

But we need to edit www folder outside android studio, then copy over changes by doing cordova build - in our case, npx etc as below.

The build process is detailed in the following steps to build document:

# https://docs.moodle.org/dev/Setting_up_your_development_environment_for_Moodle_Mobile_2

nvm install node 11.15.0

# https://www.sitepoint.com/quick-tip-multiple-versions-node-nvm/

nvm use 11

# this is very important - if starting again in another terminal window, must do nvm use 11

# or else all sorts of hard to diagnose errors occur during the build.

sudo apt-get install libsecret-1-dev

npm install 

# cordova.plugins.diagnostic: Diagnostic plugin - ERROR: ENOENT: no such file or directory, open '/home/mac/StudioProjects/LMSappBuildTrial/config.xml'

# added 1829 packages from 1022 contributors and audited 1958 packages in 98.592s

npx cordova prepare 

# Current working directory is not a Cordova-based project.

# https://stackoverflow.com/questions/21276294/cordova-current-working-directory-is-not-a-cordova-based-project

#mkdir www

npm install cordova

# this is also important. Without this, the www directory is not populated for the final prod build.

npm i -g cordova-res

# This is also important - without this, the image resources won't get processed

# config.xml was missing, so copied over with git

# No platforms added to this project. Please use `cordova platform add <platform>`.

npx ionic cordova platform add android --verbose

#Source path does not exist: resources/android/icon/drawable-hdpi-smallicon.png

#Error: Source path does not exist: resources/android/icon/drawable-hdpi-smallicon.png

# editing gitignore file to add the resources

npx cordova prepare

# ignoring the warning about conflict

npx gulp

npm start

# This is an optional step to check in a browser and verify.

# waiting till transpile started etc. then Ctrl+C

# If we wait till the end - nearly an hour on a 4 GB system? it opens in the default browser.

# https://docs.moodle.org/dev/Setting_up_your_development_environment_for_Moodle_Mobile_2#Compiling_using_AOT

cp -v "changes made to moodleapp files/inside node_modules dir/@angular/platform-browser-dynamic/esm5/platform-browser-dynamic.js" "node_modules/@angular/platform-browser-dynamic/esm5"

cp -v "changes made to moodleapp files/inside node_modules dir/@ionic/app-scripts/dist/util/config.js" "node_modules/@ionic/app-scripts/dist/util/config.js"

# edited gitignore to not ignore this config.js, did git add -f.

npm run ionic:build -- --prod

# this takes a lot of RAM and a lot of time. 

# if possible, avoid swapping by closing all apps and clearning memory before doing this.

# REMEMBER to use nvm use 11 if doing this in a fresh terminal

#PID USER      PR  NI    VIRT    RES    SHR S  %CPU %MEM     TIME+ COMMAND 

# 3682 mac       20   0 3142252 2.215g  28948 R 131.5 59.6   6:34.48 node

#   build prod finished in 3128.04 s - this was on a 4GB machine

# on a 16 GB GCP instance, it took up around 1/3rd of memory - 5 GB+ - 

# and finished in just 5 or 6 minutes instead of 50 minutes.

# npx cordova run android

# Could not find an installed version of Gradle either in Android Studio,

#or on your system to install the gradle wrapper. Please include gradle 

#in your path, or install Android Studio

# So, I just imported the platforms/android directory using the Import Gradle project option in Android Studio 4.1.3, and built from there.