Различия

Показаны различия между двумя версиями страницы.

Ссылка на это сравнение

Предыдущая версия справа и слева Предыдущая версия
mobile:ionic [2023/07/17 01:05] – удалено mirocowmobile:ionic [2023/07/17 01:08] (текущий) – создано mirocow
Строка 1: Строка 1:
 +{{tag>mobile ionic capacitor}}
  
 +{{backlinks>.}}
 +
 +====== Ionic, Cordova + Ionic, Capacitor ======
 +
 +Сам по себе Ionic - это набор веб-компонентов заточенных под использоватние на мобильных устройствах. Его можно спокойно использовать на любых веб-страницах.
 +
 +Cordova + Ionic - Это Cordova-приложение. И тут архитектуру диктует именно Cordova. С этим связано то, что прложение получается тяжелым и медленным. А также то что вносить измменения в нативную часть очень тяжело. Я в своё время модифицировал плагин пуш уведомлений, а плагин Apllepay добавил в магазин плагинов.
 +(Сразу оговорюсь, не я автор плагина Apple Pay. Я только его нашел, доработал, и добавил в магазин.)
 +
 +[[https://capacitorjs.com/docs/updating/3-0#switch-to-automatic-android-plugin-loading|Capacitor]] - Это новая реинкарнация этого фреймворка. Тут уже берется любое SPA и запускается в нативном WebView. Тем самым получая лучшее из связки натива и веба.
 +Дальше, при желании, приложение можно модифицировать как со стороны веба, так и со стороны натива. Типичный пример - добавление функционала получения Push-уведомлений на IOS. Там не просто плагин добавляется, там нужно ручками внести изменения в нативную часть
 +
 +  * [[prepaire]]
 +  * [[mobile:create-application:ionic]]
 +  * [[mobile:create-application:cordova]]
 +
 +====== Create application ======
 +
 +<code bash>
 +$ npm install -g @ionic/cli native-run cordova-res
 +$ ionic start photo-gallery tabs --type=angular --capacitor
 +$ cd ./photo-gallery
 +$ npm install @capacitor/camera @capacitor/preferences @capacitor/filesystem
 +</code>
 +
 +====== Install modules ======
 +
 +  - https://capacitorjs.com/docs/plugins
 +  - https://capacitorjs.com/docs/apis
 +  - https://capacitorjs.com/docs/plugins/community
 +  - https://github.com/orgs/capacitor-community/repositories
 +
 +====== @capacitor/camera ======
 +
 +https://capacitorjs.com/docs/apis/camera
 +<code bash>
 +$ npm install @capacitor/camera
 +$ npx cap sync
 +</code>
 +
 +====== @capacitor/filesystem ======
 +
 +https://capacitorjs.com/docs/apis/filesystem
 +<code bash>
 +$ npm install @capacitor/filesystem
 +$ npx cap sync
 +</code>
 +
 +====== @capacitor/preferences ======
 +
 +https://capacitorjs.com/docs/apis/preferences
 +<code bash>
 +$ npm install @capacitor/preferences
 +$ npx cap sync
 +</code>
 +
 +====== @capacitor/motion ======
 +
 +https://capacitorjs.com/docs/apis/motion
 +<code bash>
 +$ npm install @capacitor/motion
 +$ npx cap sync
 +</code>
 +
 +https://capacitorjs.com/docs/apis/haptics
 +<code bash>
 +$ npm install @capacitor/haptics
 +$ npx cap sync
 +</code>
 +
 +https://capacitorjs.com/docs/apis/device
 +<code bash>
 +$ npm install @capacitor/device
 +$ npx cap sync
 +</code>
 +
 +====== @capacitor/assets  ======
 +
 +https://capacitorjs.com/docs/guides/splash-screens-and-icons
 +<code bash>
 +$ npm install @capacitor/assets --save-dev
 +$ npx capacitor-assets generate
 +</code>
 +
 +====== ionic-native-sms-retriever-plugin-master ======
 +
 +https://github.com/hanatharesh2712/ionic-native-sms-retriever-plugin-master
 +
 +old:
 +<code bash>
 +$ ionic cordova plugin add cordova-plugin-sms-retriever-manager
 +$ ionic cordova plugin add https://github.com/hanatharesh2712/ionic-native-sms-retriever-plugin-master.git
 +</code>
 +current:
 +<code bash>
 +$ npm i cordova-plugin-sms-retriever-manager
 +$ npm i https://github.com/hanatharesh2712/ionic-native-sms-retriever-plugin-master.git
 +</code>
 +
 +====== @byteowls/capacitor-sms ======
 +
 +https://github.com/moberwasserlechner/capacitor-sms
 +<code bash>
 +$ npm i @byteowls/capacitor-sms
 +$ npx cap sync
 +</code>
 +
 +====== cordova-plugin-whitelist [DEPRECATED: AllowList] ======
 +
 +https://github.com/apache/cordova-plugin-whitelist
 +<code bash>
 +$ npm install cordova-plugin-whitelist
 +$ npx cap sync
 +</code>
 +
 +<code bash>
 +$ ionic cordova plugin add cordova-sms-plugin
 +$ npm install --save @ionic-native/sms
 +</code>
 +
 +====== Commands ======
 +
 +====== Ionic ======
 +
 +Очень простые команды для работы с Ionic в Visual Studio Code:
 +  - ionic start - создать темплейт ионик апп с нуля
 +  - ionic serve - запускать мобапп с иоником в браузере
 +  - ionic generate - создать новые фичи к мобаппу - directive class page component service module guard
 +
 +Для деплоя на мобайл:
 +  - ionic build / ionic build --prod - сбилдить апп (если билдишь для прода то он включает strict режим и ругается если есть вызов несуществующих методов, используешь any и надо это пофиксить)
 +  - ionic cap add android - создать апп для андроида (1 раз так сделать)
 +  - ionic cap copy - скопировать сбилженную папку веба в папку для андроида
 +  - ionic cap sync - это чтобы синкнуть из андроид папки изменения (добавление нового плагина) назад в веб код
 +  - ionic cap open android - открыть в Андроид студио проект андроида сгенеренный или самому открыть
 +  - ng add @angular/pwa - сделать свой апп PWA (добавляется service worker, app manifest + иконки)
 +
 +====== Capacitor ======
 +
 +<code bash>
 +$ ionic capacitor build android
 +</code>
 +
 +====== Cordova ======
 +
 +<code bash>
 +$
 +</code>