Предистория, показывали по телевизору, точнее на ютубе (см. вот это видео https://www.youtube.com/watch?v=i6FN3fa2WYc), как создавать App для Android и iPhone, и там рассказывалось про Ionic. После просмотра этого видео, как-то пробывал создать свой App, но дальше установки Ionic руки не дошли. Ionic это фреймворк, спомощью которого можно на HTML, TypeScript, JavaScript и некоторых дополнительных фреймворков (Angular, React, Vue, VanillaJS) сделать App для Android и iPhone.
1. Чтобы установить Ionic Framework, нужно хотя-бы чтобы был установлен nodejs.
2. Если nodejs установлен. Дальше запустите эту команду:
npm install -g @ionic/cli
3. После того как Ionic Framework установится на ваш компьютер, дайте команду:
ionic info
4. После этого, создайте папку C:\Ionic:
mkdir Ionic
5. Дальше, перейдите в эту папку:
cd Ionic
6. Дальше, запустите команду, это создасть пустой проект на шаблоне, и библиотека будет использоваться Angular:
ionic start photo-gallery tabs --type=angular --capacitor
photo-gallery tabs - название нашего проекта
--type=angular - будем использовать angular
-capacitor:
Capacitor is a cross-platform app runtime that makes it easy to build web apps that run natively on iOS, Android, Electron, and the web. It was created -and is maintained- by the Ionic Framework team.
Capacitor - это кроссплатформенная среда выполнения приложений, которая упрощает создание веб-приложений, которые изначально работают на iOS, Android, Electron и в Интернете. Он был создан и поддерживается командой Ionic Framework.
7. Дальше запустите команду, тут нужно терпение:
ionic serve
У меня выглядет так:
> ng.cmd run app:serve --host=localhost --port=8100
[ng] - Generating browser application bundles (phase: setup)...
[ng] V Browser application bundle generation complete.
[ng] Initial Chunk Files | Names
| Size
[ng] vendor.js | vendor
| 4.51 MB
[ng] polyfills.js | polyfi
lls | 621.83 kB
[ng] styles.css, styles.js | styles
| 376.13 kB
[ng] main.js | main
| 16.20 kB
[ng] runtime.js | runtim
e | 13.35 kB
[ng] | Initial Total | 5.52 MB
[ng] Lazy Chunk Files | Names
| Size
[ng] node_modules_ionic_core_dist_esm_swiper_bundle-6c5e7804_js.js | -
| 200.22 kB
[ng] polyfills-core-js.js | polyfi
lls-core-js | 92.36 kB
[ng] node_modules_ionic_core_dist_esm_ion-datetime_3_entry_js.js | -
| 72.13 kB
[ng] node_modules_ionic_core_dist_esm_ion-item_8_entry_js.js | -
| 71.57 kB
[ng] node_modules_ionic_core_dist_esm_ion-app_8_entry_js.js | -
| 62.90 kB
[ng] node_modules_ionic_core_dist_esm_ion-slide_2_entry_js.js | -
| 56.37 kB
[ng] node_modules_ionic_core_dist_esm_ion-refresher_2_entry_js.js | -
| 47.36 kB
[ng] node_modules_ionic_core_dist_esm_ion-alert_entry_js.js | -
| 47.19 kB
[ng] node_modules_ionic_core_dist_esm_ion-segment_2_entry_js.js | -
| 37.30 kB
[ng] node_modules_ionic_core_dist_esm_ion-searchbar_entry_js.js | -
| 32.90 kB
[ng] node_modules_ionic_core_dist_esm_ion-nav_2_entry_js.js | -
| 32.32 kB
[ng] node_modules_ionic_core_dist_esm_ion-button_2_entry_js.js | -
| 32.11 kB
[ng] node_modules_ionic_core_dist_esm_ion-menu_3_entry_js.js | -
| 31.82 kB
[ng] node_modules_ionic_core_dist_esm_ion-item-option_3_entry_js.js | -
| 30.93 kB
[ng] node_modules_ionic_core_dist_esm_ion-action-sheet_entry_js.js | -
| 29.58 kB
[ng] node_modules_ionic_core_dist_esm_ion-range_entry_js.js | -
| 27.20 kB
[ng] node_modules_ionic_core_dist_esm_ion-modal_entry_js.js | -
| 26.50 kB
[ng] node_modules_ionic_core_dist_esm_ion-fab_3_entry_js.js | -
| 26.24 kB
[ng] node_modules_ionic_core_dist_esm_ion-route_4_entry_js.js | -
| 25.01 kB
[ng] node_modules_ionic_core_dist_esm_ion-select_3_entry_js.js | -
| 24.22 kB
[ng] node_modules_ionic_core_dist_esm_ion-tab-bar_2_entry_js.js | -
| 23.87 kB
[ng] node_modules_ionic_core_dist_esm_ion-progress-bar_entry_js.js | -
| 21.95 kB
[ng] node_modules_ionic_core_dist_esm_ion-toast_entry_js.js | -
| 21.58 kB
[ng] node_modules_ionic_core_dist_esm_ion-popover_entry_js.js | -
| 20.90 kB
[ng] node_modules_ionic_core_dist_esm_ion-input_entry_js.js | -
| 20.57 kB
[ng] polyfills-dom.js | polyfi
lls-dom | 19.44 kB
[ng] common.js | common
| 19.37 kB
[ng] node_modules_ionic_core_dist_esm_ion-textarea_entry_js.js | -
| 18.34 kB
[ng] node_modules_ionic_core_dist_esm_ion-virtual-scroll_entry_js.js | -
| 18.01 kB
[ng] node_modules_ionic_core_dist_esm_ion-toggle_entry_js.js | -
| 17.00 kB
[ng] node_modules_ionic_core_dist_esm_shadow-css-a3f00b33_js.js | -
| 15.92 kB
[ng] node_modules_ionic_core_dist_esm_ion-back-button_entry_js.js | -
| 15.79 kB
[ng] node_modules_ionic_core_dist_esm_ion-radio_2_entry_js.js | -
| 15.71 kB
[ng] node_modules_ionic_core_dist_esm_ion-card_5_entry_js.js | -
| 15.61 kB
[ng] node_modules_ionic_core_dist_esm_ion-col_3_entry_js.js | -
| 15.61 kB
[ng] node_modules_ionic_core_dist_esm_input-shims-73f15161_js.js | -
| 15.41 kB
[ng] node_modules_ionic_core_dist_esm_ion-loading_entry_js.js | -
| 14.97 kB
[ng] node_modules_ionic_core_dist_esm_ion-infinite-scroll_2_entry_js.js | -
| 12.89 kB
[ng] node_modules_ionic_core_dist_esm_ion-reorder_2_entry_js.js | -
| 12.00 kB
[ng] node_modules_ionic_core_dist_esm_ion-checkbox_entry_js.js | -
| 11.43 kB
[ng] polyfills-css-shim.js | polyfi
lls-css-shim | 10.64 kB
[ng] node_modules_ionic_core_dist_esm_ion-chip_entry_js.js | -
| 9.82 kB
[ng] node_modules_ionic_core_dist_esm_ion-split-pane_entry_js.js | -
| 9.36 kB
[ng] node_modules_ionic_core_dist_esm_ion-spinner_entry_js.js | -
| 7.90 kB
[ng] src_app_tabs_tabs_module_ts.js | -
| 7.77 kB
[ng] node_modules_ionic_core_dist_esm_ion-tab_2_entry_js.js | -
| 7.76 kB
[ng] src_app_tab3_tab3_module_ts.js | -
| 7.10 kB
[ng] src_app_tab1_tab1_module_ts.js | -
| 6.83 kB
[ng] src_app_tab2_tab2_module_ts.js | -
| 6.83 kB
[ng] node_modules_ionic_core_dist_esm_ion-ripple-effect_entry_js.js | -
| 6.07 kB
[ng] node_modules_ionic_core_dist_esm_ion-avatar_3_entry_js.js | -
| 5.79 kB
[ng] node_modules_ionic_core_dist_esm_tap-click-cc1ae2b2_js.js | -
| 5.59 kB
[ng] node_modules_ionic_core_dist_esm_keyboard-5742b5da_js.js | -
| 5.36 kB
[ng] node_modules_ionic_core_dist_esm_ion-backdrop_entry_js.js | -
| 3.43 kB
[ng] node_modules_ionic_core_dist_esm_ion-img_entry_js.js | -
| 3.31 kB
[ng] node_modules_ionic_core_dist_esm_swipe-back-ee838cf8_js.js | -
| 2.75 kB
[ng] node_modules_ionic_core_dist_esm_focus-visible-f4ad4f1a_js.js | -
| 2.01 kB
[ng] node_modules_ionic_core_dist_esm_ion-text_entry_js.js | -
| 1.72 kB
[ng] node_modules_ionic_core_dist_esm_status-tap-bdecfebf_js.js | -
| 1.68 kB
[ng] Build at: 2021-07-07T00:09:45.456Z - Hash: 046cfd7f959456558218 - Time: 424
22ms
[ng] V Compiled successfully.
[INFO] Development server running!
Local: http://localhost:8100
Use Ctrl+C to quit this process
[INFO] Browser window opened to http://localhost:8100!
8. Если хотите под своим портом (допустим 8080), введите следующую команду:
ionic serve -l -p 8080
