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 2: simple button event processing w/ deployment onto Ionic Lab View Server #13

Open dpcunningham opened 4 years ago

dpcunningham commented 4 years ago

From 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

Start an Angular-based Ionic Project: "ionicStarWarsApp"

$ cd dpc.data/local.FS/lfs.00-Scratch/projects/ionic4.demos/

$ ionic start ionicStarWarsApp blank --type=angular
✔ Preparing directory ./ionicStarWarsApp - done!
✔ Downloading and extracting blank starter - done!

Installing dependencies may take several minutes.

  ──────────────────────────────────────────────────────────────

        Ionic Appflow, the mobile DevOps solution by Ionic

           Continuously build, deploy, and ship apps 🚀
        Focus on building apps while we automate the rest 🎁

                 👉  https://ion.link/appflow  👈

  ──────────────────────────────────────────────────────────────

> npm i
npm WARN deprecated core-js@2.6.11: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.

> core-js@3.1.4 postinstall /home/dpc/dpc.data/local.FS/lfs.00-Scratch/projects/ionic4.demos/ionicStarWarsApp/node_modules/@angular-devkit/build-angular/node_modules/core-js
> node scripts/postinstall || echo "ignore"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon: 
> https://opencollective.com/core-js 
> https://www.patreon.com/zloirock 

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)

> core-js@2.6.11 postinstall /home/dpc/dpc.data/local.FS/lfs.00-Scratch/projects/ionic4.demos/ionicStarWarsApp/node_modules/core-js
> node -e "try{require('./postinstall')}catch(e){}"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon: 
> https://opencollective.com/core-js 
> https://www.patreon.com/zloirock 

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)

> @angular/cli@8.1.3 postinstall /home/dpc/dpc.data/local.FS/lfs.00-Scratch/projects/ionic4.demos/ionicStarWarsApp/node_modules/@angular/cli
> node ./bin/postinstall/script.js

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 (node_modules/webpack-dev-server/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.11: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 (node_modules/watchpack/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.11: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 (node_modules/karma/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.11: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 (node_modules/@angular/compiler-cli/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.11: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.2 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

added 1098 packages from 1051 contributors and audited 17247 packages in 33.715s

16 packages are looking for funding
  run `npm fund` for details

found 3 moderate severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details
> git init
Initialized empty Git repository in /home/dpc/dpc.data/local.FS/lfs.00-Scratch/projects/ionic4.demos/ionicStarWarsApp/.git/
> git add -A
> git commit -m "Initial commit" --no-gpg-sign

*** Please tell me who you are.

Run

  git config --global user.email "you@example.com"
  git config --global user.name "Your Name"

to set your account's default identity.
Omit --global to set the identity only in this repository.

fatal: unable to auto-detect email address (got 'dpc@LT3-Insp17-2017.(none)')
[WARN] Error encountered during commit. Disabling further git operations.

[INFO] Next Steps:

       - Go to your newly created project: cd ./ionicStarWarsApp
       - Run ionic serve within the app directory to see your app
       - Build features and components: https://ion.link/scaffolding-docs
       - Run your app on a hardware or virtual device: https://ion.link/running-docs
$ 
dpcunningham commented 4 years ago

Run the Ionic Server

This will run the simple (one or two button) app on localhost port 8100.

$ ionic serve
> ng run app:serve --host=localhost --port=8100
[ng] Browserslist: caniuse-lite is outdated. Please run next command `npm update`
[ng] ℹ 「wds」: Project is running at http://localhost:8100/webpack-dev-server/
[ng] ℹ 「wds」: webpack output is served from /
[ng] ℹ 「wds」: 404s will fallback to //index.html
[ng] chunk {common} common.js, common.js.map (common) 24.8 kB  [rendered]
[ng] chunk {core-js-js} core-js-js.js, core-js-js.js.map (core-js-js) 78.7 kB  [rendered]
[ng] chunk {css-shim-206ea950-3169f23e-js} css-shim-206ea950-3169f23e-js.js, css-shim-206ea950-3169f23e-js.js.map (css-shim-206ea950-3169f23e-js) 21.9 kB  [rendered]
[ng] chunk {dom-96781eef-a2fb04dd-js} dom-96781eef-a2fb04dd-js.js, dom-96781eef-a2fb04dd-js.js.map (dom-96781eef-a2fb04dd-js) 19.8 kB  [rendered]
[ng] chunk {dom-js} dom-js.js, dom-js.js.map (dom-js) 20.2 kB  [rendered]
[ng] chunk {focus-visible-70713a0c-js} focus-visible-70713a0c-js.js, focus-visible-70713a0c-js.js.map (focus-visible-70713a0c-js) 2.15 kB  [rendered]
[ng] chunk {hardware-back-button-5afe3cb0-js} hardware-back-button-5afe3cb0-js.js, hardware-back-button-5afe3cb0-js.js.map (hardware-back-button-5afe3cb0-js) 2.06 kB  [rendered]
[ng] chunk {home-home-module} home-home-module.js, home-home-module.js.map (home-home-module) 4.87 kB  [rendered]
[ng] chunk {index-69c37885-js} index-69c37885-js.js, index-69c37885-js.js.map (index-69c37885-js) 37.7 kB  [rendered]
[ng] chunk {input-shims-a4fc53ac-js} input-shims-a4fc53ac-js.js, input-shims-a4fc53ac-js.js.map (input-shims-a4fc53ac-js) 13.5 kB  [rendered]
[ng] chunk {ios-transition-504cdd09-js} ios-transition-504cdd09-js.js, ios-transition-504cdd09-js.js.map (ios-transition-504cdd09-js) 26.4 kB  [rendered]
[ng] chunk {main} main.js, main.js.map (main) 23.8 kB [initial] [rendered]
[ng] chunk {md-transition-fea2bbfb-js} md-transition-fea2bbfb-js.js, md-transition-fea2bbfb-js.js.map (md-transition-fea2bbfb-js) 3.91 kB  [rendered]
[ng] chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 278 kB [initial] [rendered]
[ng] chunk {runtime} runtime.js, runtime.js.map (runtime) 9.7 kB [entry] [rendered]
[ng] chunk {shadow-css-4889ae62-23996f3f-js} shadow-css-4889ae62-23996f3f-js.js, shadow-css-4889ae62-23996f3f-js.js.map (shadow-css-4889ae62-23996f3f-js) 14.8 kB  [rendered]
[ng] chunk {status-tap-32c72c43-js} status-tap-32c72c43-js.js, status-tap-32c72c43-js.js.map (status-tap-32c72c43-js) 1.79 kB  [rendered]
[ng] chunk {styles} styles.js, styles.js.map (styles) 109 kB [initial] [rendered]
[ng] chunk {swipe-back-35ad8e37-js} swipe-back-35ad8e37-js.js, swipe-back-35ad8e37-js.js.map (swipe-back-35ad8e37-js) 2.68 kB  [rendered]
[ng] chunk {swiper-bundle-ccdaac54-js} swiper-bundle-ccdaac54-js.js, swiper-bundle-ccdaac54-js.js.map (swiper-bundle-ccdaac54-js) 176 kB  [rendered]
[ng] chunk {tap-click-ca00ce7f-js} tap-click-ca00ce7f-js.js, tap-click-ca00ce7f-js.js.map (tap-click-ca00ce7f-js) 6.37 kB  [rendered]
[ng] chunk {vendor} vendor.js, vendor.js.map (vendor) 4.82 MB [initial] [rendered]
[ng] Date: 2019-12-23T21:49:13.216Z - Hash: 9d094ca4ab7f6265e300 - Time: 11911ms

[INFO] Development server running!

       Local: http://localhost:8100

       Use Ctrl+C to quit this process

[INFO] Browser window opened to http://localhost:8100!

[INFO] ... and 78 additional chunks
[ng] ℹ 「wdm」: Compiled successfully.
^C
dpcunningham commented 4 years ago

Install/Run the Ionic Lab Viewer/Server:

Install it...

$ npm i @ionic/lab
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 (node_modules/webpack-dev-server/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.11: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 (node_modules/watchpack/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.11: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 (node_modules/karma/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.11: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 (node_modules/@angular/compiler-cli/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.11: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.2 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ @ionic/lab@2.0.18
added 66 packages from 17 contributors and audited 17584 packages in 11.833s

16 packages are looking for funding
  run `npm fund` for details

found 3 moderate severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details

Run it!

$ ionic lab
> ng run app:serve --host=localhost --port=8100
[ng] Browserslist: caniuse-lite is outdated. Please run next command `npm update`
[ng] ℹ 「wds」: Project is running at http://localhost:8100/webpack-dev-server/
[ng] ℹ 「wds」: webpack output is served from /
[ng] ℹ 「wds」: 404s will fallback to //index.html
[ng] chunk {common} common.js, common.js.map (common) 24.8 kB  [rendered]
[ng] chunk {core-js-js} core-js-js.js, core-js-js.js.map (core-js-js) 78.7 kB  [rendered]
[ng] chunk {css-shim-206ea950-3169f23e-js} css-shim-206ea950-3169f23e-js.js, css-shim-206ea950-3169f23e-js.js.map (css-shim-206ea950-3169f23e-js) 21.9 kB  [rendered]
[ng] chunk {dom-96781eef-a2fb04dd-js} dom-96781eef-a2fb04dd-js.js, dom-96781eef-a2fb04dd-js.js.map (dom-96781eef-a2fb04dd-js) 19.8 kB  [rendered]
[ng] chunk {dom-js} dom-js.js, dom-js.js.map (dom-js) 20.2 kB  [rendered]
[ng] chunk {focus-visible-70713a0c-js} focus-visible-70713a0c-js.js, focus-visible-70713a0c-js.js.map (focus-visible-70713a0c-js) 2.15 kB  [rendered]
[ng] chunk {hardware-back-button-5afe3cb0-js} hardware-back-button-5afe3cb0-js.js, hardware-back-button-5afe3cb0-js.js.map (hardware-back-button-5afe3cb0-js) 2.06 kB  [rendered]
[ng] chunk {home-home-module} home-home-module.js, home-home-module.js.map (home-home-module) 4.87 kB  [rendered]
[ng] chunk {index-69c37885-js} index-69c37885-js.js, index-69c37885-js.js.map (index-69c37885-js) 37.7 kB  [rendered]
[ng] chunk {input-shims-a4fc53ac-js} input-shims-a4fc53ac-js.js, input-shims-a4fc53ac-js.js.map (input-shims-a4fc53ac-js) 13.5 kB  [rendered]
[ng] chunk {ios-transition-504cdd09-js} ios-transition-504cdd09-js.js, ios-transition-504cdd09-js.js.map (ios-transition-504cdd09-js) 26.4 kB  [rendered]
[ng] chunk {main} main.js, main.js.map (main) 23.8 kB [initial] [rendered]
[ng] chunk {md-transition-fea2bbfb-js} md-transition-fea2bbfb-js.js, md-transition-fea2bbfb-js.js.map (md-transition-fea2bbfb-js) 3.91 kB  [rendered]
[ng] chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 278 kB [initial] [rendered]
[ng] chunk {runtime} runtime.js, runtime.js.map (runtime) 9.7 kB [entry] [rendered]
[ng] chunk {shadow-css-4889ae62-23996f3f-js} shadow-css-4889ae62-23996f3f-js.js, shadow-css-4889ae62-23996f3f-js.js.map (shadow-css-4889ae62-23996f3f-js) 14.8 kB  [rendered]
[ng] chunk {status-tap-32c72c43-js} status-tap-32c72c43-js.js, status-tap-32c72c43-js.js.map (status-tap-32c72c43-js) 1.79 kB  [rendered]
[ng] chunk {styles} styles.js, styles.js.map (styles) 109 kB [initial] [rendered]
[ng] chunk {swipe-back-35ad8e37-js} swipe-back-35ad8e37-js.js, swipe-back-35ad8e37-js.js.map (swipe-back-35ad8e37-js) 2.68 kB  [rendered]
[ng] chunk {swiper-bundle-ccdaac54-js} swiper-bundle-ccdaac54-js.js, swiper-bundle-ccdaac54-js.js.map (swiper-bundle-ccdaac54-js) 176 kB  [rendered]
[ng] chunk {tap-click-ca00ce7f-js} tap-click-ca00ce7f-js.js, tap-click-ca00ce7f-js.js.map (tap-click-ca00ce7f-js) 6.37 kB  [rendered]
[ng] chunk {vendor} vendor.js, vendor.js.map (vendor) 4.82 MB [initial] [rendered]
[ng] Date: 2019-12-23T23:34:59.998Z - Hash: 9d094ca4ab7f6265e300 - Time: 11799ms
> ionic-lab http://localhost:8100 --host localhost --port 8200 --project-type angular --app-name ionicStarWarsApp --app-version 0.0.1
[INFO] ... and 78 additional chunks
[ng] ℹ 「wdm」: Compiled successfully.

[INFO] Development server running!

       Lab: http://localhost:8200
       Local: http://localhost:8100

       Use Ctrl+C to quit this process

[INFO] Browser window opened to http://localhost:8200!
dpcunningham commented 4 years ago

Test the Ionic Lab Viewer/Emulator

And... Voila! Emulation of iOS and Android deployments

ionic lab views iOS-Android

dpcunningham commented 4 years ago

Add Simple Variable(s), Buttons and Event Handlers:

We continue with the "Working With Angular" steps... ...in the Ionic Academy exercise: Getting Started with Ionic 4

Note that we extended the single-button functionality of the tutorial app, because one single state change is pretty... boring. We'll add a but more functionality, so we can cycle between some states.

ionic lab views buttons-added

dpcunningham commented 4 years ago

Next Step(s): Deploy the Ionic App onto Android

Turns out, this can be an absolute bear of a process... ...so much so, that we'll take this on as a separate exercise:

...after the configuration of the development environment required for Ionic Android builds on Linux:

A quick summary of the upcoming fun & games -- there are... a lot -- of factors that have to work in concert for Ionic deployments onto Android, such as:

  1. Installing Android Studio
  2. ...which requires Oracle JDK V8 a. ...which used to be able to be installed b. ...by standard Debian/Ubuntu apt-get install operations c. ...using a non-standard (volunteer) PPA d. ...which is now broken by Oracle's re-licensing of JDK e. ...and now must be installed by "old-school" tarball f. ...and hooked up w/ "old-school" /etc/profile.d/ scripts
  3. ...The Ionic build process using Android Studio also requires
    1. ...an install of Gradle
    2. ...an install of the Android SDK v 19+
  4. ...and a configuration of the Android test device to allow deployment via adb install