dpcunningham / process-spinup-devenv-ionic4-ng-on-linux

Process: Spin Up a Development Environment for Ionic 4 (default Angular) Apps
0 stars 0 forks source link

exercise 3: Build & deploy simple button event processing app onto Android device #18

Open dpcunningham opened 4 years ago

dpcunningham commented 4 years ago

After dealing with the following huge PITA issues:

...we are now ready to build an Ionic app for Android and deploy onto a real Android device.

We will now complete the exercise started in: exercise 2: simple button event processing w/ deployment onto Ionic Lab View Server

...and continue with the Ionic Academy email course: "7 Day Ionic Crash Course"

exercise: Getting Started with Ionic 4

Steps, notes, etc. in comments below...

dpcunningham commented 4 years ago

Complete a Successful Build Cycle using Android Studio

Let's confirm our build environment is what we expect:

$ echo $ANDROID_HOME 
/home/dpc/Android/Sdk
$ echo $ANDROID_SDK_ROOT 
/home/dpc/Android/Sdk
$ echo $PATH
/home/dpc/.local/bin:/usr/lib/jvm/jdk1.8.0_231/bin:/opt/gradle/bin:/home/dpc/Android/Sdk/bin:/home/dpc/Android/Sdk/tools:/home/dpc/Android/Sdk/platform-tools:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games
$ more /etc/profile.d/android.studio.sh

# export ANDROID_HOME=/opt/android-studio       # This does NOT work.  The docs... suck.
                            # You don't point to where the package is installed.
                            # You point to where it initially laid down some dirs.
                            # Seriously?  What. The. Flock.

export ANDROID_HOME=/home/dpc/Android/Sdk       # This DOES work.
                            # Noted as deprecated in current build cycle

export ANDROID_SDK_ROOT=/home/dpc/Android/Sdk       # This is noted as the new standard in builds...

export PATH=$ANDROID_SDK_ROOT/platform-tools:$PATH
export PATH=$ANDROID_SDK_ROOT/tools:$PATH
export PATH=$ANDROID_SDK_ROOT/bin:$PATH

# export PATH=$ANDROID_HOME/bin:$PATH           # Redundant (since ANDROID_HOME = ANDROID_SDK_ROOT).
# export PATH=$ANDROID_HOME:$PATH

$ cd ~/dpc.data/local.FS/lfs.00-Scratch/projects/ionic4.demos/ionicStarWarsApp/
$ ionic cordova build android

ng run app:ionic-cordova-build --platform=android Browserslist: caniuse-lite is outdated. Please run next command npm update

chunk {0} 0-es2015.js, 0-es2015.js.map () 13.2 kB [rendered] chunk {1} 1-es2015.js, 1-es2015.js.map () 20 kB [rendered] chunk {2} 2-es2015.js, 2-es2015.js.map () 17 kB [rendered] [...] chunk {77} 77-es2015.js, 77-es2015.js.map () 20.2 kB [rendered] chunk {common} common-es2015.js, common-es2015.js.map (common) 24.8 kB [rendered] chunk {cordova} cordova.js, cordova.js.map (cordova) 63.5 kB [entry] [rendered] chunk {core-js-js} core-js-js-es2015.js, core-js-js-es2015.js.map (core-js-js) 78.7 kB [rendered] [...] chunk {tap-click-ca00ce7f-js} tap-click-ca00ce7f-js-es2015.js, tap-click-ca00ce7f-js-es2015.js.map (tap-click-ca00ce7f-js) 6.38 kB [rendered] chunk {vendor} vendor-es2015.js, vendor-es2015.js.map (vendor) 4.48 MB [initial] [rendered] Date: 2019-12-26T22:41:25.181Z - Hash: 0feb3050d41512cff93f - Time: 18605ms

chunk {0} 0-es5.js, 0-es5.js.map () 15.4 kB [rendered] chunk {1} 1-es5.js, 1-es5.js.map () 15.2 kB [rendered] chunk {2} 2-es5.js, 2-es5.js.map () 16.3 kB [rendered] [...] chunk {78} 78-es5.js, 78-es5.js.map () 23.3 kB [rendered] chunk {common} common-es5.js, common-es5.js.map (common) 14.7 kB [rendered] chunk {cordova} cordova.js, cordova.js.map (cordova) 63.5 kB [entry] [rendered] chunk {core-js-js} core-js-js-es5.js, core-js-js-es5.js.map (core-js-js) 78.7 kB [rendered] [...] chunk {vendor} vendor-es5.js, vendor-es5.js.map (vendor) 4.59 MB [initial] [rendered] Date: 2019-12-26T22:41:45.116Z - Hash: 83fb460ffa563851227c - Time: 19663ms

cordova build android Checking Java JDK and Android SDK versions ANDROID_SDK_ROOT=/home/dpc/Android/Sdk (recommended setting) ANDROID_HOME=/home/dpc/Android/Sdk (DEPRECATED) Subproject Path: CordovaLib Subproject Path: app Task :app:preBuild UP-TO-DATE Task :CordovaLib:preBuild UP-TO-DATE Task :CordovaLib:preDebugBuild UP-TO-DATE [...] Task :app:cdvBuildDebug UP-TO-DATE

BUILD SUCCESSFUL in 5s 42 actionable tasks: 42 up-to-date Built the following apk(s): /home/dpc/dpc.data/local.FS/lfs.00-Scratch/projects/ionic4.demos/ionicStarWarsApp/platforms/android/app/build/outputs/apk/debug/app-debug.apk

dpcunningham commented 4 years ago

Build an Android APK deployment package

The APK extension stands for Android Package Kit, and is the file format used for installing Android applications (much like EXE for Windows).

For this step, we will continue with the Ionic Academy email course: "7 Day Ionic Crash Course" exercise: Getting Started with Ionic 4

Now we can add the Android platform to our project just like we did before for iOS, so go to your command line and run:

$ ionic cordova platform add android
$ ionic cordova build android

This results in a new Android project inside the ./platforms folder. You can now either go ahead and import this project into Android Studio or directly install it to your Android device if it’s connected with USB.

Ionic already told us the path to the generated APK after the build command. If you have followed the course so far, this should be: /platforms/android/app/build/outputs/apk/debug/app-debug.apk

dpcunningham commented 4 years ago

Deploy the new app onto an Android device

For this step, we will continue with the Ionic Academy email course: "7 Day Ionic Crash Course" exercise: Getting Started with Ionic 4

Steps, notes, etc. in comments below...

You can now use the Android Debug Bridge (ADB) to install it by running:

$ adb install ./platforms/android/app/build/outputs/apk/debug/app-debug.apk

Note that you will have to change settings on your target testing device to make this happen, roughly per these instructions:

Enable adb debugging on your device

To use adb with a device connected over USB, you must enable USB debugging in the device system settings, under Developer options.

On Android 4.2 and higher, the Developer options screen is hidden by default. To make it visible, go to Settings > About phone and tap Build number seven times. Return to the previous screen to find Developer options at the bottom.

On some devices, the Developer options screen might be located or named differently.

You can now connect your device with USB. You can verify that your device is connected by executing adb devices from the android_sdk/platform-tools/ directory. If connected, you'll see the device name listed as a "device."

dpcunningham commented 4 years ago

Enjoy your new Android App!

Note how we added an extra set of buttons so that the app can be cycled between states (otherwise, the one-shot update the original exercise developed is pretty darn boring):

IIRC, I had to drag the icon out of "Apps..." and plant it onto a screen.

app screensho icon

Et, Voila!

app screensho home