Ionic: 14 Hacks

Incluso años después de estar trabajando con Ionic, podemos aprender nuevo, algo que nos puede ahorrar tiempo o simplemente facilitarnos la vida.

De vez en cuando me encuentro con una solución rápida a un problema con el que he vivido durante mucho tiempo,asi que, quise documentar esos hackers en un lugar fácil de recordar. Simon Grimm

1. Ocultar la barra de desplazamiento Chrome

La vista previa en vivo es excelente, especialmente cuando usanos ionic lab que nos brinda una vista previa casi exacta de la aplicación en diferentes plataformas. Una cosa que es realmente molesta es la barra de desplazamiento visible que siempre nos muestra Chrome.

Aunque esta barra no es visible en la versión final, cambia el espacio disponible para el resto de la IU y si queremos presentar algo o hacer capturas de pantalla para clientes, ¡ esta barra parece extraña !

Lo bueno es que podemos desactivar fácilmente esta barra con 3 líneas de css agregadas a nuestra aplicación / app.scss :

* ::-webkit-scrollbar {
  display: none;
}

¡Esto ocultará todas las barras de desplazamiento dentro de la aplicación!

2. Hacer texto seleccionable

Es posible que hayas notado que no se puede seleccionar el texto dentro de la aplicación iOS, lo cual es especialmente desafiante si queremos implementarla como un sitio web/PWA. La gente solo necesita copiar algunos textos, pero una vez más una breve declaración de CSS puede cambiarlo todo:

body {
    -webkit-user-select: text;
    user-select: text;
}

¡Ahora nuestros usuarios pueden copiar fácilmente todas las áreas de texto dentro de la aplicación sin más adiciones o complementos!

3. Depuración más rápida en iOS y Android

Si bien nos encanta desarrollar en el navegador, algunas características solo necesitan ser probadas en un dispositivo real. Y si no sabes cómo llevar la aplicación a tu dispositivo o depurarla, pasarás un momento difícil.

En primer lugar, además de ejecutar ionic cordova build ios/android, también se puede ejecutar, lo ionic cordova build ios/android -lc que está implementando directamente la aplicación en su dispositivo conectado y recargando automáticamente cada vez que cambie algo. Es como la recarga en vivo pero ocurre en tu dispositivo real.

Sin embargo, también debe depurar su aplicación correctamente y aquí es donde la depuración remota es la clave . Tanto para iOS como para Android, puedes conectarte desde tu computadora al dispositivo usando Safari/Chrome.

Una vez que estas conectado con tu navegador, obtienes todos los registros de tu aplicación, puedes inspeccionar todos los archivos y especialmente también depurar elementos HTML del DOM.

Si sabes cómo ejecutar y depurar correctamente su aplicación Ionic en un dispositivo, puedes ahorrar mucho tiempo en el ciclo de desarrollo.

4. Agregar permisos de iOS a Plist automáticamente

Si estás utilizando la cámara o la biblioteca de fotos en iOS, debes solicitar permiso a los usuarios, de lo contrario, la aplicación se bloqueará en ese momento o, al menos, su aplicación será rechazada una vez que la envíe a iTunes Connect.

Agregar esas entradas manualmente al plist no puede ser la solución, y por supuesto no es porque pueda agregar estas líneas a su config.xml :

<edit-config file="*-Info.plist" mode="merge" target="NSCameraUsageDescription">
    <string>need camera access to take pictures</string>
</edit-config>
<edit-config file="*-Info.plist" mode="merge" target="NSPhotoLibraryUsageDescription">
    <string>need photo library access to get pictures from there</string>
</edit-config>

Esto creará automáticamente las entradas necesarias cada vez que construyas tu aplicación Ionic para iOS, solo asegúrate de agregar información razonable aquí. Una vez, una de mis aplicaciones fue rechazada porque no explicaba lo suficiente por qué se necesitaba la cámara.

5. Plataformas y sistemas operativos

Aunque construimos para todas las plataformas y en todas partes donde se ejecuta la web, a veces necesitamos distinguir entre plataformas, dispositivos y sistemas operativos.

Es bueno que Ionic ya haya incluido una función para probar dónde exactamente se ejecuta su aplicación denominada is() , y podemos usarla para verificaciones diferentes como esta:

constructor(public plt: Platform) {
  if (this.plt.is('ios')) {
    // We are on iOS
  }
 
  if (this.plt.is('cordova')) {
    // We are installed through the appstore
  }
 
  if (this.plt.is('iphone')) {
    // Running on an iPhone
  }
}

Además, si estas creando un PWA, puedes saber fácilmente si se está ejecutando en modo independiente con una prueba simple:

constructor() {
    const isInStandaloneMode = () => ('standalone' in window.navigator) && (window.navigator['standalone']);
 
    if (isInStandaloneMode()) {
      // App is accessed as a PWA
    }
}

6. Uso de los complementos de código VS

Para los nuevos desarrolladores de Ionic, siempre recomiendo obtener Visual Studio Code, ya que actualmente es uno de los mejores editores gratuitos para desarrollar aplicaciones Ionic/Angular ( y mucho más, por supuesto ).

Lo mejor de esto es el mercado con una amplia gama de extensiones gratuitas que puedes instalar, simplemente busca Ionic y ya encontrarás muchas.

¡Con esas extensiones, los tiempos han terminado para buscar la sintaxis de la lista, el encabezado o la tarjeta!

7. Mejora de los tiempos de carga de la aplicación Ionic

El rendimiento de las aplicaciones ionic suele ser un tema importante, y tu eres el primer responsable de escribir un buen código que funcione. No es culpa de Ionic (la mayoría de las veces) si su aplicación se carga lentamente, pero puede mejorar fácilmente su rendimiento.

Primero, asegúrate de usar lazy loading en tus páginas. Al hacer esto, tu aplicación no cargará todas las páginas en el inicio de inmediato sino que prolongará la carga un poco para que la primera página aparezca mucho más rápido.

Además, no debe tener la gran lógica y las operaciones de carga dentro de su constructor, ya que esto también prolongará la creación de sus páginas cuando se inicialicen.

Finalmente, lo que puede hacer un gran cambio para todas las aplicaciones ionic es la construcción para la producción . Simplemente ejecuta:

ionic cordova build ios --prod --release

Esta compilación llevará más tiempo, pero tu aplicación comenzará mucho más rápido y siempre debe crear sus implementaciones finales como esta para ejecutar todas las secuencias de comandos de aplicaciones personalizadas que mejorarán su código subyacente.

8. Haciendo uso siempre de Theming & Variables

Puedes escribir CSS personalizado en cada página, puedes orientar tus identificadores y clases especiales, pero la manera más fácil de abordar el estilo de su aplicación es mantenerlo en el nivel más alto, utilizando las variables SASS y el esquema de color predefinido ( que tu puedes cambiar ).

Además, no es necesario reinventar la rueda, ya que Ionic tiene algunas modificaciones que puedes aplicar fácilmente a los elementos de tipografía.

En lugar de idear clases personalizadas, intenta utilizar las variables ionic y anularlas para adaptarlas a tus necesidades. Al hacer esto, será mucho más fácil más adelante cuando quieras cambiar la apariencia de nuevo, ya que la mayoría de la personalización estará en un archivo, especialmente si hace un uso intensivo de sus variables SASS dentro de los archivos SASS secundarios.

9. Configuración de aplicación Ionic

Si bien podemos cambiar la apariencia general a través de los archivos SASS, también podemos modificar el comportamiento general de los componentes através de la configuración raíz de nuestra aplicación.

La configuración ionic permite cambiar cosas como la posición de su barra de pestañas, animaciones de modales, íconos utilizados y evento del texto de su botón Atrás.

Si bien puedes establecer estos valores a partir del código, también puede aplicarlos directamente a elementos como:

<ion-tabs tabsPlacement="top">
  <ion-tab tabTitle="Home" tabIcon="home" [root]="tabRoot"></ion-tab>
</ion-tabs>

Por supuesto, todos esos valores también se pueden escribir desde su código más tarde.

10. Uso de scripts personalizados

Finalmente, como ya obtuvimos un buen package.json, ¿por qué no agregar nuestros propios scripts allí en lugar de escribir scripts de implementación dentro de un archivo de shell? Ya hay un montón de secuencias de comandos en la parte superior de su archivo, pero también puede crear sus propias tareas.

Además, el package.json se puede usar para algunos scripts de copia personalizados que anulan el comportamiento de Ionic, por ejemplo, si desea copiar algunos CSS de un módulo de node instalado ( como en esta publicación ). Puedes implementar tu propio comportamiento y simplemente especificar tus scripts de esta manera:

"config": {
    "ionic_webpack": "./config/webpack.config.js",
    "ionic_sass": "./config/sass.config.js",
    "ionic_copy": "./config/copy.config.js"
  }

11. — no-interactive

La interactividad no siempre es deseable, sobre todo cuando queremos evitar tener que confirmar si queremos instalar una nueva actualización de nuestro framework. Para esto podemos utilizar la bandera — no-interactive al momento de hacer nuestra compilación.

ionic cordova run android/ios --no-interactive

12. Configuración de atributos CSS dinámicamente

Al establecer dinámicamente un atributo CSS, puede agregar o eliminar funcionalidades de un componente en función de una determinada condición. Para establecer un atributo dinámicamente, podemos usar la siguiente sintaxis:

<div [attr.text-center]=”isMD ? ‘’ : null”>
   I will be centered when isMD is true.
</div>

Esto establecerá el atributo text-center en el div si isMD se evalúa como verdadero. De lo contrario, el atributo no se agregará.

13. Otra forma de cambiar clases y estilos dinámicamente

Para esto debemos simplemente mencionar primero el nombre de la clase seguido de la condición.

<span [ngClass]="{'class1' : condicion1, 'class2' : condicion2,'class3' : condicion3,}">
    ...
</span>

O

<span [ngClass]="(variable == "condicion") ? 'class1' : 'class2'">

Iconos en botones

buttons: [{
  text: this.callCenters[0].telefono,
  icon: !this.platform.is('ios') ? 'call' : null,
  handler: () => {
  window.location.href = "tel://" + this.callCenters[0].telefono;
}}
...

14. Estilos específicos de una plataforma en otra

Ionic usa mode para personalizar el aspecto de los componentes. Cada plataforma tiene un modo predeterminado , pero esto puede ser anulado. Por ejemplo, una aplicación vista en una plataforma Android usará el modo md(Material Design).

Podemos cambiar el aspecto de cualquier componente con los atributos

mode=”ios”
mode=”md”
mode=”wp”

Conclusión

Hay miles de pequeños fragmentos y hacks que pueden acelerar tu flujo de desarrollo con ionic, si tienes algunos trucos ¡compártelos!

Publicación original en Ingles: 10 Simple Ionic Hacks