search

dpcunningham / exertimer_i4ng_v0

Public Tutorial (from Gary Simon's DesignCourse): Build an exercise interval timer using Ionic4/Angular
0 stars 0 forks source link

install and run the app on Android devices #25

Closed dpcunningham closed 4 years ago

dpcunningham commented 4 years ago

Per the commentary at 01h05m09s...

Ionic DevApp is OK, but if you want to run your new app anywhere away from your WiFi, you need to do a device install.

Gary mentions:

$ ionic cordova run android $ ionic cordova run ios

We'll show some guidance from previous projects in other repos below...

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, our guidance comes from 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 tells us the path to the generated APK after the build command. This should be something like: /platforms/android/app/build/outputs/apk/debug/app-debug.apk

Our Process:

$ ionic cordova platform add android

cordova platform add android Using cordova-fetch for cordova-android@^8.0.0 Adding android project... [...] Android project created with cordova-android@8.1.0 Installing "cordova-plugin-insomnia" for android Plugin 'cordova-plugin-whitelist' found in config.xml... Migrating it to package.json [...] Discovered saved plugin "cordova-plugin-splashscreen". Adding it to the project Installing "cordova-plugin-splashscreen" for android [...] Adding cordova-plugin-ionic-keyboard to package.json [WARN] cordova-res was not found on your PATH. Please install it globally: npm i -g cordova-res [WARN] Cannot generate resources without cordova-res installed. Once installed, you can generate resources with the following command: ionic cordova resources android --force

$ sudo npm i -g cordova-res

[sudo] password:
/usr/bin/cordova-res -> /usr/lib/node_modules/cordova-res/bin/cordova-res [...] ERR! sharp EACCES: permission denied, mkdir '/home/dpc/.npm' info sharp Are you trying to install as a root or sudo user? Try again with the --unsafe-perm flag [...] info sharp Attempting to build from source via node-gyp but this may fail due to the above error gyp ERR! System Linux 4.15.0-47-generic [...] npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Hunph! Go figure. OK, Let's try it as plain ole me:

$ npm i -g cordova-res

npm WARN checkPermissions Missing write access to /usr/lib/node_modules npm ERR! code EACCES npm ERR! syscall access npm ERR! path /usr/lib/node_modules npm ERR! errno -13 npm ERR! Error: EACCES: permission denied, access '/usr/lib/node_modules' [...] npm ERR! The operation was rejected by your operating system. npm ERR! It is likely you do not have the permissions to access this file as the current user [...]

Faaak! OK, let's try the "unsafe" flag:

$ sudo npm i -g cordova-res --unsafe-perm

/usr/bin/cordova-res -> /usr/lib/node_modules/cordova-res/bin/cordova-res [...]

  • cordova-res@0.8.1 added 84 packages from 115 contributors in 34.975s

Well, at least that worked. Let's continue:

$ ionic cordova resources android --force

cordova-res android [cordova-res] Generated 18 resources for android [cordova-res] Wrote to config.xml

$ ionic cordova platform add android

Platform android already exists.

$ ionic cordova build android

ng run app:ionic-cordova-build --platform=android Generating ES5 bundles for differential loading... ES5 bundle generation complete. chunk {0} 0-es2015.js, 0-es2015.js.map () 13.2 kB [rendered] chunk {0} 0-es5.js, 0-es5.js.map () 20.2 kB [rendered] chunk {1} 1-es2015.js, 1-es2015.js.map () 20 kB [rendered] [...] 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) [...] Starting a Gradle Daemon (subsequent builds will be faster) BUILD SUCCESSFUL in 5s Starting a Gradle Daemon (subsequent builds will be faster) Task :app:preBuild UP-TO-DATE Task :CordovaLib:preBuild UP-TO-DATE Task :CordovaLib:preDebugBuild UP-TO-DATE [...] BUILD SUCCESSFUL in 23s

Our Results:

BUILD SUCCESSFUL in 23s
42 actionable tasks: 42 executed
Built the following apk(s): 
    /home/dpc/dpc.data/local.FS/lfs.00-Scratch/projects/ionic4.demos/XRtimer/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, our guidance comes from the Ionic Academy email course: "7 Day Ionic Crash Course" exercise: Getting Started with Ionic 4

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

$ ls ./platforms/android/app/build/outputs/apk/debug/app-debug.apk
$ 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."

Note that if you have another ADB-deployed app/APK on the device, the push install will fail:

Failure [INSTALL_FAILED_ALREADY_EXISTS]

You need to uninstall the existing ADB-deployed APK first.