Hulunews.net- aplikasi android sangat tinggi penggunanya saat sekarag sehingga menjadi pasar bagi para pengembang tekonlogi untuk membuat aplikasi, kali ini penulis akan memberikan sedikit tips untuk membuat aplkasi menggunakan Ionic Framework. silahkan disimak
PS D:\ion_mo> ionic start myApp tabs (1) membuat myApp dengan template 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 in 11.34ms
√ Downloading and extracting tabs starter in 3.04s
> ionic integrations enable capacitor –quiet — myApp io.ionic.starter
> npm.cmd i –save -E @capacitor/core@latest
npm WARN deprecated @npmcli/move-file@2.0.1: This functionality has been moved to @npmcli/fs
npm WARN deprecated sourcemap-codec@1.4.8: Please use @jridgewell/sourcemap-codec instead
added 1093 packages, and audited 1094 packages in 6m
152 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
> npm.cmd i -D -E @capacitor/cli@latest
added 36 packages, and audited 1130 packages in 31s
152 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
> npm.cmd i –save -E @capacitor/haptics @capacitor/app @capacitor/keyboard @capacitor/status-bar
added 4 packages, and audited 1134 packages in 29s
152 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
> capacitor.cmd init myApp io.ionic.starter –web-dir www
√ Creating capacitor.config.ts in D:\ion_mo\myApp in 21.32ms
[success] capacitor.config.ts created!
Next steps:
[OK] Integration capacitor added!
Installing dependencies may take several minutes.
──────────────────────────────────────────────────────────────────────────────
Ionic Advisory, tailored solutions and expert services by Ionic
Go to market faster
Real-time troubleshooting and guidance
Custom training, best practices, code and architecture reviews
Customized strategies for every phase of the development lifecycle
Learn more: https://ion.link/advisory
──────────────────────────────────────────────────────────────────────────────
> npm.cmd i
up to date, audited 1134 packages in 16s
152 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
> git.exe init
Initialized empty Git repository in D:/ion_mo/myApp/.git/
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? No
> 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 ‘angular.json’, LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of ‘capacitor.config.ts’, 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 ‘rumah@DESKTOP-ASLBD1K.(none)’)
[WARN] Error encountered during commit. Disabling further git operations.
Your Ionic app is ready! Follow these next steps:
– Go to your new project: cd .\myApp
– Run ionic serve within the app directory to see your app in the browser
– Run ionic capacitor add to add a native iOS or Android project using Capacitor
– Generate your app icon and splash screens using cordova-res –skip-config –copy
– Explore the Ionic docs for components, tutorials, and more: https://ion.link/docs
– Building an enterprise app? Ionic has Enterprise Support and Features: https://ion.link/enterprise-edition
PS D:\ion_mo> cd myApp (2) pindahkan cursor ke folder myApp
PS D:\ion_mo\myApp> ng build (3) fungsi untuk membuat folder www pada myApp
One or more browsers which are configured in the project’s Browserslist configuration will be ignored as ES5 output is not supported by the Angular CLI.
Ignored browsers: chrome 60
– Generating browser application bundles (phase: setup)… TypeScript compiler options “target” and “useDefineForClassFields” are set to “ES2022” and “false” respectively by the Angular CLI. To control ECMA version and features use the Browerslist configuration. For more information, see https://angular.io/guide/build#configuring-browser-compatibility
√ Browser application bundle generation complete.
√ Copying assets complete.
– Generating index html…10 rules skipped due to selector errors:
:host-context([dir=rtl]) .ion-float-start -> subselects_1.subselects[name] is not a function
:host-context([dir=rtl]) .ion-float-end -> subselects_1.subselects[name] is not a function
:host-context([dir=rtl]) .ion-float-sm-start -> subselects_1.subselects[name] is not a function
:host-context([dir=rtl]) .ion-float-sm-end -> subselects_1.subselects[name] is not a function
:host-context([dir=rtl]) .ion-float-md-start -> subselects_1.subselects[name] is not a function
:host-context([dir=rtl]) .ion-float-md-end -> subselects_1.subselects[name] is not a function
:host-context([dir=rtl]) .ion-float-lg-start -> subselects_1.subselects[name] is not a function
:host-context([dir=rtl]) .ion-float-lg-end -> subselects_1.subselects[name] is not a function
:host-context([dir=rtl]) .ion-float-xl-start -> subselects_1.subselects[name] is not a function
:host-context([dir=rtl]) .ion-float-xl-end -> subselects_1.subselects[name] is not a function
√ Index html generation complete.
Initial Chunk Files | Names | Raw Size | Estimated Transfer Size
main.12e981405cb34443.js | main | 340.14 kB | 92.39 kB
polyfills.0e0720fd80c57251.js | polyfills | 33.08 kB | 10.65 kB
styles.bac947a5496135b1.css | styles | 27.16 kB | 4.16 kB
runtime.eac62c9cefd7c20c.js | runtime | 4.57 kB | 2.20 kB
| Initial Total | 404.95 kB | 109.41 kB
Lazy Chunk Files | Names | Raw Size | Estimated Transfer Size
2698.18c290f67d53e9f1.js | swiper-bundle-28080340-js | 97.19 kB | 23.42 kB
polyfills-core-js.aae6b5d519b4cdc7.js | polyfills-core-js | 91.90 kB | 27.87 kB
4711.138c83286cb8fff8.js | – | 82.06 kB | 8.49 kB
4959.b6a4fb9b61690417.js | – | 67.88 kB | 11.64 kB
1650.0c5003aa78ea82a5.js | – | 48.23 kB | 4.64 kB
3236.6a74596fdabbb111.js | – | 43.23 kB | 9.38 kB
1118.862eed4f31148605.js | – | 34.18 kB | 5.59 kB
9325.dd697cdc6b4ea588.js | – | 28.41 kB | 4.90 kB
2349.44002ad06d858f71.js | – | 27.99 kB | 6.82 kB
5652.a040bbfb0f581024.js | – | 25.38 kB | 4.91 kB
8628.8d7501a63903bd41.js | – | 24.20 kB | 3.80 kB
2175.85f270944ddbeb40.js | – | 23.31 kB | 4.58 kB
3804.045799dde5cf3b35.js | – | 22.22 kB | 5.53 kB
1709.19d112dde3ff4774.js | – | 22.16 kB | 4.60 kB
5836.640bcfe19df1a9b2.js | – | 21.68 kB | 3.41 kB
4651.dae21822fdaf3eaf.js | – | 21.46 kB | 3.76 kB
3648.77c45889f9a6e21a.js | – | 21.43 kB | 3.56 kB
8136.3c2c1985a1471062.js | – | 20.41 kB | 4.64 kB
438.3aa1b2330d912846.js | – | 20.32 kB | 3.11 kB
4174.a2a5b18bafbee75c.js | – | 19.09 kB | 1.86 kB
common.f0cb54aab8e5e86c.js | common | 18.17 kB | 5.23 kB
polyfills-dom.3a5e3168052f1fc5.js | polyfills-dom | 18.05 kB | 5.04 kB
2773.c25e849e4255721f.js | – | 16.22 kB | 4.21 kB
1217.31793c9adc13adde.js | – | 15.61 kB | 2.83 kB
5168.f8d2de677f2fee3b.js | – | 15.27 kB | 2.95 kB
7544.87eef02503216794.js | – | 15.03 kB | 2.73 kB
6120.b46c31b27bf77377.js | – | 14.76 kB | 3.05 kB
6560.efc2036b787e13b1.js | – | 14.54 kB | 2.52 kB
2073.e8fac9cc10772afa.js | – | 13.55 kB | 2.32 kB
1435.682ae6fe265a5434.js | – | 12.29 kB | 4.08 kB
388.d23aef83944a1665.js | – | 11.58 kB | 2.10 kB
9654.de485ccdd1cafe0d.js | – | 11.39 kB | 2.61 kB
5349.80c28abafb7c4707.js | – | 11.35 kB | 3.60 kB
4330.4ff3034862800623.js | – | 11.15 kB | 3.80 kB
9824.83c2ff07be398614.js | – | 11.15 kB | 1.37 kB
4432.e3dfa1f31762834b.js | – | 10.62 kB | 2.55 kB
9016.2eac90e67b425236.js | – | 9.39 kB | 2.01 kB
9434.d18547c47c238ff7.js | – | 8.57 kB | 2.00 kB
9922.cbd7f054a4aa9f91.js | – | 8.44 kB | 1.95 kB
2289.895774b98f7cb870.js | – | 7.55 kB | 2.66 kB
7602.fd65a63e96c2dbe5.js | – | 7.02 kB | 2.00 kB
9230.ebb926e57d85ede2.js | – | 6.53 kB | 1.80 kB
9536.ab9642b72f8c1593.js | – | 6.36 kB | 1.29 kB
5817.a096ab3ab0722d3e.js | – | 6.00 kB | 1.42 kB
4908.8ef0deefe015396f.js | – | 5.97 kB | 1.50 kB
1186.2ea92baac40acf8e.js | – | 5.49 kB | 1.92 kB
657.5eb0b715428bef72.js | – | 5.06 kB | 1.25 kB
3093.1cb66b50cb159705.js | input-shims-ca667d14-js | 4.57 kB | 1.78 kB
4753.6928fc5c16fcef78.js | – | 4.17 kB | 1010 bytes
1536.2066cf1259294fd7.js | – | 3.76 kB | 1.27 kB
9958.ca33c5f6e453ee46.js | – | 3.05 kB | 932 bytes
9718.735f7870bf946271.js | index-0bc00b33-js | 1.82 kB | 816 bytes
1033.8bc7ac6ed1863f60.js | – | 1.64 kB | 667 bytes
174.54bc1737fae2260f.js | tabs-tabs-module | 1.62 kB | 652 bytes
8939.e268846754d2f8fb.js | – | 1.50 kB | 514 bytes
1835.e3a494e1fa36926d.js | tab1-tab1-module | 1.14 kB | 564 bytes
9196.e9983cb87619255d.js | tab2-tab2-module | 1.14 kB | 563 bytes
420.0ab36b97ceb09c6a.js | tab3-tab3-module | 1.14 kB | 563 bytes
4376.c1d29d14c355f854.js | – | 1008 bytes | 543 bytes
5780.f8ecfb3ab789d28d.js | status-tap-20472ffa-js | 529 bytes | 322 bytes
Build at: 2022-12-18T01:59:17.226Z – Hash: d74da2bde4c0151d – Time: 260460ms
√ Copying web assets from www to android\app\src\main\assets\public in 9.20s
√ Creating capacitor.config.json in android\app\src\main\assets in 10.92ms
√ copy android in 9.64s
√ Updating Android plugins in 71.06ms
[info] Found 4 Capacitor plugins for android:
@capacitor/app@4.1.1
@capacitor/haptics@4.1.0
@capacitor/keyboard@4.1.0
@capacitor/status-bar@4.1.1
√ update android in 533.24ms
√ copy web in 84.46ms
√ update web in 16.88ms
[info] Sync finished in 10.347s
PS D:\ion_mo\myApp> npx cap run android (4) testing ke AVD Nexus One API 31
√ Copying web assets from www to android\app\src\main\assets\public in 6.94s
√ Creating capacitor.config.json in android\app\src\main\assets in 5.32ms
/ copy android [info] Inlining sourcemaps
√ copy android in 7.56s
√ Updating Android plugins in 52.92ms
[info] Found 4 Capacitor plugins for android:
@capacitor/app@4.1.1
@capacitor/haptics@4.1.0
@capacitor/keyboard@4.1.0
@capacitor/status-bar@4.1.1
√ update android in 379.42ms
√ Please choose a target device: » Nexus One API 31 (emulator) (Nexus_One_API_31)
√ Running Gradle build in 12.85s
√ Deploying app-debug.apk to Nexus_One_API_31 in 34.60s berhasil di deploy ke AVD
PS D:\ion_mo\myApp>
Klik UI Components
Penulis: Edwin Anwar