Eficiencia Máxima: Una Introducción a Capacitor

Así que, hola. No esperaba verlos a todos aquí. Si estoy aquí, eso significa que probablemente estemos construyendo una aplicación, ¿verdad? ¿Alguna vez has construido una aplicación? Es sorprendentemente desafiante. No solo tienes que aprender las herramientas y programas para construir la aplicación, luego tienes que empezar a estructurar la aplicación, descubrir de dónde viene todos tus datos, construir parte de la interfaz de usuario, y luego tienes que seguir construyendo más interfaz de usuario.

A veces, parte de la interfaz de usuario es contextual. A veces solo se mostrará en ciertos tamaños de dispositivo. A veces solo se mostrará en ciertos tipos de dispositivo. Tienes que construir la interfaz de usuario de nuevo. Luego tienes que construir más interfaz de usuario. Aunque estés construyendo para dispositivos móviles, a veces tenemos factores de forma más grandes, como una tableta que necesita una interfaz de usuario ajustada para adaptarse a esa escala y dimensiones con las que nuestros usuarios están acostumbrados a trabajar.

Ahora, imagina hacer esto una vez. Surgen desafíos. Ahora tenemos que hacer esto dos veces más para crear tres diseños de interfaz de usuario para nuestros usuarios. Esto no es ideal. Todas estas plataformas, ya sea iOS, Android, y la web, tienen sus propios design patterns y sus propias herramientas y técnicas para construir una aplicación. Hay formas de aliviar esto. Podríamos usar una solución cross-platform popular. El único problema es que algunas soluciones cross-platform no son tan cross-platform como lo anuncian. Por ejemplo, algunas de las que probablemente estén familiarizados se enfocan más o menos en iOS y Android. La web, es algo secundario, y aún así, es una versión limitada de la web, sin poder utilizar bibliotecas existentes que puedas conocer y amar, debido a que ahora necesita existir en este extraño contexto pseudo-web, pero también ser capaz de ejecutarse en nativo. No es ideal. La solución más ideal sería tener algo donde puedas tener tu código web, tu código iOS y tu código Android, todos coexistiendo y siendo capaces de compartir los componentes en todas ellas. Estoy aquí. Probablemente voy a hablar de eso. Así que vamos a hablar de Capacitor, que es la solución cross-platform que nos permite compartir todo nuestro código en todas las plataformas.

Ahora, cómo funciona esto es un fascinante deep dive técnico, pero para resumirlo, Capacitor funciona tomando tu aplicación web existente y empaquetándola en esta capa nativa. Ahora, esta capa nativa tiene acceso a todas las mismas características nativas que cualquier otra solución cross-platform, pero también te permite integrarte con las características nativas del dispositivo y los SDK de terceros de manera bastante fluida. Entonces, si estás implementando en iOS, puedes acceder a los SDK nativos disponibles allí, de la misma manera con Android. Y en la web, podemos proporcionar ya sea un respaldo o utilizar SDK de JavaScript que existen allí. Ahora, la forma en que se hace esto es a través de una solución bastante compleja de analizar el código JavaScript, pasarlo a un runtime nativo, pero eso es algo más allá del punto.

El punto real es que todo esto se te proporciona a través de una API de TypeScript muy simplificada. Las API que utilizas para, por ejemplo, apuntar a la barra de estado o a la imagen de lanzamiento se realizan a través de una API unificada. De esta manera, no tienes que lidiar con las complejidades de cómo se hace esto en iOS, cómo se hace en Android y cómo se hace en la web.

Ahora bien, esto está muy bien, pero vamos a ver un ejemplo real aquí. Esta es una aplicación en la que he estado trabajando un poco. Es un cliente de cielo azul y una alternativa a Twitter en estos días. Y quiero empaquetar esto y enviarlo como una aplicación iOS.

Bueno, hay algunas formas de hacer esto. En primer lugar, queremos instalar los paquetes necesarios. Así que vamos a instalar capacitor core y capacitor CLI. Esto nos dará acceso al núcleo del tiempo de ejecución así como al CLI necesario para ejecutar más comandos. Ahora bien, esto ya lo he instalado. Así que no tenemos que esperar a npm aquí, pero luego podemos ejecutar npx cat init. Esto creará un nuevo archivo de configuración de Capacitor, que será nuestra base para configurar todos los proyectos nativos. De hecho, echemos un vistazo a cómo se ve eso. Ahora bien, esto es solo un archivo de TypeScript. Puedes ver que estamos exportando esta configuración. Tiene el ID de la aplicación, el nombre de la aplicación, el directorio donde debe cargar tu aplicación web y luego alguna información del servidor aquí y allá para configurar los proyectos nativos. De hecho, también podemos configurar plugins aquí. De esta manera, si queremos codificar en duro alguna información en un plugin, podemos hacerlo antes de que incluso tenga que acceder al código nativo.

Con esto instalado, podemos ejecutar y agregar las plataformas nativas. En este caso, vamos a instalar Capacitor iOS y Capacitor Android. Así que adelante, como en los comandos anteriores, instala los paquetes nativos que necesitamos desde aquí y luego ejecutamos npx cap add iOS. Esto ya lo he hecho. Así que vamos a abrir un proyecto de iOS. Ejecutamos npx cap open iOS y aquí estamos dentro de Xcode. No te intimides demasiado. Puedes ver que tenemos un AppDelegate.Swift nativo donde podemos echar un vistazo a algo de código Swift. Si queremos modificar este proyecto, podemos echar un vistazo a los activos web que tenemos aquí, nuestra pantalla de inicio, algunos de nuestros catálogos de activos, y luego el storyboard principal para presentar la aplicación. Así que si queremos, por ejemplo, extender esto con una vista personalizada de terceros, también podemos hacerlo y mezclar y combinar lo que es nativo y lo que es web. Pero en la mayoría de los casos, esta es solo una aplicación sencilla.

Vamos a seguir adelante y ejecutar esto. Vamos a presionar el botón de reproducción, que es nuestra forma de construir e implementar. Se va a desplegar en un iPhone 14 Pro Max. Vamos a esperar un momento aquí. Y aquí estamos. Tenemos el iPhone 14 iniciando, pero vamos a iniciar sesión. Luego nos registraremos y tendremos nuestra aplicación. Pero sabemos que algo diferente está sucediendo aquí. Lo bueno es que, como esto sigue siendo una aplicación web al final del día, tenemos acceso a todos nuestros servidores de desarrollo habituales que solemos usar en el navegador. Así que vamos a abrir una nueva terminal. Ejecutaremos cap run iOS, y pasaremos esta bandera de recarga en vivo, que conectará nuestro simulador con nuestro servidor de desarrollo. Vamos a hacer una pequeña actualización rápida. Así que dejemos que se ejecute en segundo plano. Y genial, aquí vamos. Nuestra aplicación está en funcionamiento. Vamos a arreglar esta interfaz de usuario rápidamente. Así que iremos al componente que tiene este problema, y sé que solo necesita un encabezado. Así que agregaremos nuestro encabezado, barra de herramientas, y luego dentro de esto, agregaremos un título que diremos `inicio` por ahora. Y luego guardaremos, y aquí estamos. Nuestra aplicación ya está actualizada. Se ve perfecta en nuestro iPhone. Y si volvemos a nuestro navegador, podemos recargar y hey, nuestra interfaz de usuario se actualiza automáticamente. De hecho, podemos cambiar esto a, vamos a ir a `feed`, y esto actualizará tanto la aplicación nativa como la aplicación web al mismo tiempo exacto. Así que ya estamos siendo muy rápidos con nuestros ciclos de actualización y podemos agregar nuevas funciones. Si queremos acceder realmente, digamos, a la barra de interfaz de usuario nativa, esta área de estado nativa aquí, es tan simple como importar el módulo que necesitamos. En este caso, estamos importando la barra de estado, y luego importaremos el objeto de la barra de estado. Dentro de la barra de estado, tenemos varios métodos disponibles, pero puedes ver que tenemos hide, show, get info, set style, background colors. Todos estos son métodos nativos disponibles para la barra de estado que podemos llamar a través de TypeScript. Vamos a ocultarla, y luego agregaremos un temporizador, y simplemente diremos status bar dot show, y lo llamaremos después de dos segundos. Así que vamos a escribir esto, se ocultará, y luego dos segundos después, se mostrará. Ahora, observa que el navegador no se volvió loco, no arrojó errores ni se bloqueó debido a la llamada a este método. Se adaptará de manera adecuada si una API no está disponible en ciertos entornos de ejecución. Entonces, si estás llamando, por ejemplo, a Face ID, y eso no está disponible en un iPhone más antiguo o en un dispositivo Android, puedes manejar esas situaciones de manera adecuada cuando surjan. Así que vamos a concluir y volver a nuestra situación anterior, donde tenemos tres interfaces de usuario diferentes, algo que realmente no queremos hacer. No queremos construir la aplicación varias veces ni tener situaciones en las que construimos nuestras aplicaciones para algunos dispositivos, y luego tener una versión comprometida para el otro. En cambio, podemos construir nuestra aplicación una vez y desplegarla en todas estas plataformas diferentes y aún tener acceso a funciones nativas y tener una aplicación bastante rápida. Esto es Capacitor. Deberías echarle un vistazo, está en CapacitorJS.com. Y muchas gracias por acompañarme hoy. Saludos.