Ionic & Capacitor
Ionic
- Ionic framework
- Get started with Ionic
- Crear cuenta Ionic
- Components
- Ionic documentación Api
- Ionic & Firebase
- Ventajas e inconvenientes
- IonicThenesDocumentación plantillas
- Install with CLI
- sudo npm install -g ionic
- Crear aplicación: elegimos el tipo que queramos
- ionic start myApp tabs
- ionic start myApp blanck
- ionic start myApp sidemenu
- Al crear la app nos pide si la queremos en Angular. Vemos que nos crea una estructura basada en angular en la carpeta myApp
- Ir a la carpeta myApp y ejecutamos ionic serve
- Para levantar ionic lab: ionic serve --lab
- En Visual Studio Code instalar las extensiones
- Auto Close Tag
- Ionic 4 Snippets
- Probar con dispositivo
- Descargar la app ionic DevApp en la App Store
- En el terminal del mac
- sudo npm i -g cordova
- En la carpeta del proyecto
- ionic cordova prepare
- ionic serve devapp
- Los iconos ya están preparados al generar la aplicación
- La creación de servicios, componentes, etc... es similar a la de angular
- Creación de un servicio: ionic g s nom-carpeta/nom-servicio
- Buid ionic app
- Multi lenguajes
Capacitor
- Using Capacitor with Ionic
- Documentación Api
- Repositorio
- Crear una app:
- ionic start
- Elegir angular
- Elegir un template
- Contestar Y a integrate your new app with Capacitor to target native iOS and Android
- Desinstalar los 2 plugins de Cordova que ya tiene Capacitor
- npm un @ionic-native/splash-screen --save
- npm un @ionic-native/status-bar --save
- Dejamos solo el capacitor core
- Modificamos app.module.ts y app.component.ts para quitar todo lo relacionado con estos 2 plugins.
- En app.module quitar los imports
- En app.component.ts limpiarlo todo quitando las importaciones y vaciando el constructor. Ya no se necesita el incialiceApp porque ya lo hace ionic porque no utiliza Cordova.
- Instalamos para que funcionen los plugins de capacitor de los dispositivos para pwa
- npm install @ionic/pwa-elements
- Modificar main.ts según este enlace
- Foto Galery
- Para probar en un dispositivo
- ng build --prod
- Añadir Capacitor a una app que ya existe
- cd myApp
- ionic integrations enble capacitor
App didáctica: ionic components
- Repositorio
- Documentación componentes
- Promesas y observables
- ion-action-sheet
- ion-alert
- ion-avatar
- ion-button
- ion-card
- ion-checkbox
- ion-datetime
- ion-fab
- variables de color ionic -Generator
- ion-grid - ion-grow - ion-col
- ion-infinite-scroll
- ion-input
- ion-list
- @ViewChild
- @ViewChild('objeto|directiva', {static: false})
- Angular ViewChild
- ion-item-sliding
- ion-list-reorder
- ion-loading
- ion-menu
- ion-modal
- ion-popover
- ion-progress-bar
- ion-range
- ion-refresher
- ion-searchbar
- ion-segment
- ion-skeleton-text
- ion-slides
- Animate.css
- Paquete iconos utilizados
- Material-slides
- ion-split-pane
- ion-taps
- ion-toast
- Temas adicionales
App myIonicNews: noticies
- ionic start myIonicNews tabs Your Ionic app is ready! Follow these next steps:
- Accedir a news Api org i Get Api Key i registrarse i obtendré la key
- Go to your new project: cd ./myIonicNews
- 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
