Programming/안드로이드
Ionic Framework
파란크리스마스
2024. 7. 5. 22:26
728x90
출처
환경설정
set ANDROID_SDK_ROOT=C:\Android\sdk-tools-windows
set PATH=%PATH%;C:\Server\node-v18.20.3;%APPDATA%\npm;%ANDROID_SDK_ROOT%\platform-tools;%ANDROID_SDK_ROOT%\emulatorionic 설치
D:\project>npm install -g ionic@5.4.16
D:\project>ionic -v
5.4.16프로젝트 생성
D:\project>ionic start myApp tabs
Pick a framework!
Please select the JavaScript framework to use for your new app. To bypass this prompt next time, supply a value for the
--type option.
? Framework: Angular
√ Preparing directory .\myApp - done!
√ Downloading and extracting tabs starter - done!
Installing dependencies may take several minutes.
──────────────────────────────────────────────────────────────────
Ionic Studio, a powerful, local editor made with love by Ionic
Lightning fast app creation
Quickest & easiest way to get started with Ionic
Learn more: https://ion.link/studio
──────────────────────────────────────────────────────────────────
> npm.cmd i
npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm warn deprecated @humanwhocodes/config-array@0.11.14: Use @eslint/config-array instead
npm warn deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm warn deprecated @humanwhocodes/object-schema@2.0.3: Use @eslint/object-schema instead
added 1195 packages, and audited 1196 packages in 2m
220 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
> git.exe init
Initialized empty Git repository in D:/project/myApp/.git/
> git.exe add -A
warning: in the working copy of '.browserslistrc', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of '.editorconfig', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of '.eslintrc.json', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of '.gitignore', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of '.vscode/extensions.json', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of '.vscode/settings.json', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'angular.json', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'ionic.config.json', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'karma.conf.js', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'package-lock.json', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'package.json', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/app/app-routing.module.ts', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/app/app.component.html', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/app/app.component.spec.ts', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/app/app.component.ts', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/app/app.module.ts', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/app/explore-container/explore-container.component.html', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/app/explore-container/explore-container.component.scss', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/app/explore-container/explore-container.component.spec.ts', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/app/explore-container/explore-container.component.ts', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/app/explore-container/explore-container.module.ts', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/app/tab1/tab1-routing.module.ts', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/app/tab1/tab1.module.ts', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/app/tab1/tab1.page.html', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/app/tab1/tab1.page.spec.ts', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/app/tab1/tab1.page.ts', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/app/tab2/tab2-routing.module.ts', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/app/tab2/tab2.module.ts', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/app/tab2/tab2.page.html', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/app/tab2/tab2.page.spec.ts', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/app/tab2/tab2.page.ts', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/app/tab3/tab3-routing.module.ts', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/app/tab3/tab3.module.ts', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/app/tab3/tab3.page.html', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/app/tab3/tab3.page.spec.ts', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/app/tab3/tab3.page.ts', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/app/tabs/tabs-routing.module.ts', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/app/tabs/tabs.module.ts', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/app/tabs/tabs.page.html', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/app/tabs/tabs.page.scss', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/app/tabs/tabs.page.spec.ts', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/app/tabs/tabs.page.ts', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/assets/shapes.svg', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/environments/environment.prod.ts', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/environments/environment.ts', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/global.scss', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/index.html', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/main.ts', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/polyfills.ts', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/test.ts', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/theme/variables.scss', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/zone-flags.ts', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'tsconfig.app.json', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'tsconfig.json', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'tsconfig.spec.json', LF will be replaced by CRLF the next time Git touches it
> git.exe commit -m "Initial commit" --no-gpg-sign
Author identity unknown
*** 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 'xxx@DESKTOP-784ARID.(none)')
[WARN] Error encountered during commit. Disabling further git operations.
[INFO] Next Steps:
- Go to your newly created project: cd .\myApp
- 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실행
D:\project>cd myApp
D:\project\myApp>ionic serve
> ng.cmd run app:serve --host=localhost --port=8100
[ng] - Generating browser application bundles (phase: setup)...
[ng] √ Browser application bundle generation complete.capacitor 기본 패키지 설치
D:\project\myApp>npm install -g @capacitor/core@5.1.1
D:\project\myApp>npm install -g @capacitor/cli@5.1.1
D:\project\myApp>capacitor --version
5.1.1capacitor/android 패키지 설치
D:\project\myApp>npm install -g @capacitor/android@5.1.1android
D:\project\myApp>npx cap add android
√ Adding native android project in android in 47.32ms
√ add in 48.01ms
[warn] sync could not run--missing www directory.
[success] android platform added!
Follow the Developer Workflow guide to get building:
https://capacitorjs.com/docs/basics/workflow
[info] Opening Android project at: android.cap init
D:\project\myApp>npx cap init
[?] What is the name of your app?
This should be a human-friendly app name, like what you'd see in the App Store.
√ Name ... myApp
[?] What should be the Package ID for your app?
Package IDs (aka Bundle ID in iOS and Application ID in Android) are unique identifiers for apps. They must be in
reverse domain name notation, generally representing a domain name that you or your company owns.
√ Package ID ... com.example.app
√ Creating capacitor.config.ts in D:\project\myApp in 7.19ms
[success] capacitor.config.ts created!
Next steps:
https://capacitorjs.com/docs/getting-started#where-to-go-next
[?] Join the Ionic Community! 💙
Connect with millions of developers on the Ionic Forum and get access to live events, news updates, and more.
√ Create free Ionic account? ... yes
[?] Would you like to help improve Capacitor by sharing anonymous usage data? 💖
Read more about what is being collected and why here: https://capacitorjs.com/telemetry. You can change your mind at
any time by using the npx cap telemetry command.
√ Share anonymous usage data? ... yes
Thank you for helping to make Capacitor better! 💖
Information about the data we collect is available on our website: https://capacitorjs.com/telemetry빌드
D:\project\myApp>npm run build
> myApp@0.0.1 build
> ng build
√ Browser application bundle generation complete.
√ Copying assets complete.
- Generating index html...20 rules skipped due to selector errors:
:host-context([dir=rtl]) .ion-float-start -> Unknown pseudo-class :host-context([object Object])
.ion-float-start:dir(rtl) -> Unknown pseudo-class :dir
:host-context([dir=rtl]) .ion-float-end -> Unknown pseudo-class :host-context([object Object])
.ion-float-end:dir(rtl) -> Unknown pseudo-class :dir
:host-context([dir=rtl]) .ion-float-sm-start -> Unknown pseudo-class :host-context([object Object])
.ion-float-sm-start:dir(rtl) -> Unknown pseudo-class :dir
:host-context([dir=rtl]) .ion-float-sm-end -> Unknown pseudo-class :host-context([object Object])
.ion-float-sm-end:dir(rtl) -> Unknown pseudo-class :dir
:host-context([dir=rtl]) .ion-float-md-start -> Unknown pseudo-class :host-context([object Object])
.ion-float-md-start:dir(rtl) -> Unknown pseudo-class :dir
:host-context([dir=rtl]) .ion-float-md-end -> Unknown pseudo-class :host-context([object Object])
.ion-float-md-end:dir(rtl) -> Unknown pseudo-class :dir
:host-context([dir=rtl]) .ion-float-lg-start -> Unknown pseudo-class :host-context([object Object])
.ion-float-lg-start:dir(rtl) -> Unknown pseudo-class :dir
:host-context([dir=rtl]) .ion-float-lg-end -> Unknown pseudo-class :host-context([object Object])
.ion-float-lg-end:dir(rtl) -> Unknown pseudo-class :dir
:host-context([dir=rtl]) .ion-float-xl-start -> Unknown pseudo-class :host-context([object Object])
.ion-float-xl-start:dir(rtl) -> Unknown pseudo-class :dir
:host-context([dir=rtl]) .ion-float-xl-end -> Unknown pseudo-class :host-context([object Object])
.ion-float-xl-end:dir(rtl) -> Unknown pseudo-class :dir
√ Index html generation complete.
Initial chunk files | Names | Raw size | Estimated transfer size
main.5780a7f2819da0c5.js | main | 418.61 kB | 110.08 kB
polyfills.a945b0249cb630b5.js | polyfills | 34.70 kB | 11.25 kB
styles.d2b228d0a7e34779.css | styles | 28.79 kB | 4.43 kB
runtime.3f52e205fd467571.js | runtime | 4.73 kB | 2.27 kB
| Initial total | 486.84 kB | 128.03 kB
Lazy chunk files | Names | Raw size | Estimated transfer size
polyfills-core-js.c76198334f717402.js | polyfills-core-js | 94.03 kB | 28.56 kB
2885.07914c80a2400934.js | - | 73.73 kB | 14.07 kB
3506.f1bc6225762d05be.js | - | 55.68 kB | 7.39 kB
2348.f47b57c1870919b7.js | - | 47.08 kB | 5.74 kB
7720.29d793ddce51db35.js | - | 41.80 kB | 9.39 kB
9344.3c79e54f9b487dd0.js | - | 41.08 kB | 5.70 kB
7076.59ff91c7b2168949.js | - | 38.45 kB | 6.87 kB
5222.ff26a67661322112.js | - | 35.56 kB | 6.43 kB
4591.e7a7265e81e3da53.js | - | 28.50 kB | 5.72 kB
8477.5a1d7782cb7ad812.js | - | 28.23 kB | 5.55 kB
2560.0a7bc99cfe318ca9.js | - | 27.97 kB | 5.26 kB
441.d6c6dc38fe064a81.js | - | 27.09 kB | 6.89 kB
5197.ec55c9b963a8f10e.js | - | 24.99 kB | 5.26 kB
8193.ec42552ea5af8b55.js | - | 24.39 kB | 4.44 kB
2075.fdd43d8e56169f84.js | - | 24.18 kB | 5.30 kB
6433.4151df5b6f30dbcd.js | - | 24.17 kB | 6.03 kB
8814.01c6630f830c5e72.js | - | 23.18 kB | 4.39 kB
4463.3b528b013cb14d92.js | - | 22.29 kB | 3.87 kB
5949.0d2694bbb759106c.js | - | 20.80 kB | 4.18 kB
3814.192ed711c121bbb4.js | - | 20.78 kB | 3.59 kB
common.28ef6e9c0b579e2e.js | common | 20.53 kB | 6.11 kB
2415.7fb0ecad5cc2bd2d.js | - | 20.14 kB | 5.07 kB
9977.b1441e2758751932.js | - | 19.56 kB | 1.98 kB
4406.801dc3b596d0a01b.js | - | 19.07 kB | 3.39 kB
polyfills-dom.bf542500b6fca113.js | polyfills-dom | 18.48 kB | 5.16 kB
8066.c17ca0f6e80ad25b.js | - | 16.70 kB | 3.26 kB
8314.4818f467b9405d39.js | - | 15.03 kB | 3.14 kB
3511.266e06f47f10d808.js | - | 14.59 kB | 2.61 kB
1293.edd386430352426a.js | - | 13.62 kB | 4.41 kB
3162.808b0fc5ca2f047e.js | - | 12.34 kB | 2.50 kB
5712.dee2db82c57c5d6a.js | - | 12.28 kB | 3.89 kB
2375.cc91884e7539b704.js | - | 11.85 kB | 3.05 kB
8584.32115f49a90f7457.js | - | 11.85 kB | 2.42 kB
8970.d976f88aac373b61.js | - | 11.81 kB | 4.05 kB
4699.01733b3942afbe92.js | ios-transition-js | 10.68 kB | 2.73 kB
6840.17839ae9fd6315cc.js | - | 10.40 kB | 2.31 kB
7372.ce92827f3ad2c2b7.js | - | 10.03 kB | 2.68 kB
1459.55be0475961bfcff.js | - | 9.78 kB | 3.15 kB
5100.6eba1730ffd58dd4.js | - | 9.08 kB | 1.53 kB
6024.129ca0127de0423c.js | - | 7.25 kB | 1.36 kB
7428.c1c7998cfe4d68c5.js | - | 7.22 kB | 2.19 kB
8805.51bf5a1b0007a860.js | - | 6.42 kB | 1.61 kB
4171.ca2e493f5a58fedf.js | - | 6.22 kB | 1.56 kB
7030.cf5128ce3d43bfdf.js | - | 5.68 kB | 2.04 kB
2144.5d46fa3641b801f2.js | ios-transition-js | 5.34 kB | 2.08 kB
8361.6999f086673987db.js | input-shims-0314bbe5-js | 5.04 kB | 1.92 kB
1102.f4f7b64d666ca729.js | - | 4.27 kB | 1.53 kB
1049.3b9123fb26df3c32.js | - | 4.24 kB | 1.18 kB
5887.98b91cb4ef896dd6.js | - | 3.37 kB | 1.14 kB
964.a047a0655bd3ad37.js | - | 3.17 kB | 969 bytes
9013.ebee29c37be87a93.js | - | 2.88 kB | 1.08 kB
6521.d6c81fd9c1411df5.js | - | 2.29 kB | 1.11 kB
4183.515f99e4c38e2301.js | - | 1.85 kB | 761 bytes
5695.66247865f4658b0e.js | tabs-tabs-module | 1.80 kB | 662 bytes
7356.911eacb1ce959b5e.js | index-79b30591-js | 1.65 kB | 753 bytes
7240.6140dc51b67080fd.js | - | 1.44 kB | 507 bytes
4711.e3500c3b84a19d85.js | tab1-tab1-module | 1.20 kB | 568 bytes
5113.fb59a4c1330a649d.js | tab3-tab3-module | 1.20 kB | 568 bytes
5378.fa069c1798e166e8.js | tab2-tab2-module | 1.20 kB | 569 bytes
1577.d89a56c29ce4c421.js | - | 1.14 kB | 636 bytes
7179.80391eb100990080.js | md-transition-js | 1.07 kB | 488 bytes
3810.ad6dd10d2e425b4f.js | status-tap-17122cea-js | 528 bytes | 330 bytes
Build at: 2024-07-05T14:43:19.299Z - Hash: fe605ccf22b29b8d - Time: 2807mscapacitor 동기화
D:\project\myApp>npx cap sync android
√ Copying web assets from www to android\app\src\main\assets\public in 428.78ms
√ Creating capacitor.config.json in android\app\src\main\assets in 687.10μs
√ copy android in 440.24ms
√ Updating Android plugins in 2.44ms
√ update android in 24.39ms
[info] Sync finished in 0.57s안드로이드 스튜디오 실행
D:\project\myApp>npx cap open android
[info] Opening Android project at: android.