Eficiencia Máxima: Una Introducción a Capacitor

Rate this content
Bookmark

Rápido, ¿cuál es la forma más rápida de llevar tu producto a las tiendas de aplicaciones? En el panorama actual, intentar ingresar a la tienda de aplicaciones puede significar pasar semanas decidiendo qué herramienta usar y luego reescribir toda tu aplicación. Pero la web, y principalmente Capacitor, pueden simplificar eso. Toma tu aplicación web existente, agrega Capacitor a la mezcla y tendrás una aplicación nativa lista para las tiendas. Veamos qué es posible con Capacitor y por qué puede ayudarte a enviar más rápido.

12 min
05 Jun, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Crear una aplicación puede ser desafiante, pero Capacitor permite compartir código en la web, iOS y Android. Empaquetar una aplicación implica configurar complementos y modificar el proyecto en Xcode. La aplicación se puede implementar en un iPhone y acceder a servidores de desarrollo típicos.

Available in English

1. Introducción a la construcción de aplicaciones y Capacitor

Short description:

Construir una aplicación puede ser sorprendentemente desafiante. Debes aprender las herramientas y programas, estructurar la aplicación, construir la interfaz de usuario y manejar diferentes tamaños y tipos de dispositivos. Las soluciones multiplataforma pueden ayudar, pero algunas son limitadas. Capacitor permite compartir código en la web, iOS y Android empaquetando la aplicación web en una capa nativa.

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.

2. Empaquetando y configurando la aplicación

Short description:

Las API que utilizas para apuntar a la barra de estado o a la imagen de lanzamiento se realizan a través de una API unificada. Veamos un ejemplo real de empaquetar una aplicación como una aplicación iOS. Instala los paquetes necesarios, crea un nuevo archivo de configuración de Capacitor y configura los plugins. Agrega las plataformas nativas y abre el proyecto de iOS en Xcode. Podemos modificar el proyecto, extenderlo con una vista personalizada de terceros y combinar elementos nativos y web.

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.

3. Ejecución y despliegue de la aplicación

Short description:

Podemos desplegar la aplicación en un iPhone 14 Pro Max y tener acceso a nuestros servidores de desarrollo habituales que usamos en el navegador.

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.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Advanced Conference 2023React Advanced Conference 2023
29 min
Raising the Bar: Our Journey Making React Native a Preferred Choice
At Microsoft, we're committed to providing our teams with the best tools and technologies to build high-quality mobile applications. React Native has long been a preferred choice for its high performance and great user experience, but getting stakeholders on board can be a challenge. In this talk, we will share our journey of making React Native a preferred choice for stakeholders who prioritize ease of integration and developer experience. We'll discuss the specific strategies we used to achieve our goal and the results we achieved.
React Finland 2021React Finland 2021
27 min
Opensource Documentation—Tales from React and React Native
Documentation is often your community's first point of contact with your project and their daily companion at work. So why is documentation the last thing that gets done, and how can we do it better? This talk shares how important documentation is for React and React Native and how you can invest in or contribute to making your favourite project's docs to build a thriving community
React Day Berlin 2023React Day Berlin 2023
29 min
Bringing React Server Components to React Native
React Server Components are new topic in community, bunch of frameworks are implementing them, people are discussing around this topic. But what if we could use React Server Components in React Native? And bring all optimisation features that RSC allows to mobile apps? In this talk I would present what we are able to do with RSC in React Native!
React Advanced Conference 2021React Advanced Conference 2021
21 min
Building Cross-Platform Component Libraries for Web and Native with React
Top Content
Building products for multiple platforms such as web and mobile often requires separate code-based despite most of the components being identical in look and feel. Is there a way where we could use shared React component library on different platforms and save time? In this presentation I'll demonstrate one way to build truly cross-platform component library with a unique approach of using React & React Native in combination.

Workshops on related topic

React Advanced Conference 2022React Advanced Conference 2022
81 min
Introducing FlashList: Let's build a performant React Native list all together
Top Content
WorkshopFree
In this workshop you’ll learn why we created FlashList at Shopify and how you can use it in your code today. We will show you how to take a list that is not performant in FlatList and make it performant using FlashList with minimum effort. We will use tools like Flipper, our own benchmarking code, and teach you how the FlashList API can cover more complex use cases and still keep a top-notch performance.You will know:- Quick presentation about what FlashList, why we built, etc.- Migrating from FlatList to FlashList- Teaching how to write a performant list- Utilizing the tools provided by FlashList library (mainly the useBenchmark hook)- Using the Flipper plugins (flame graph, our lists profiler, UI & JS FPS profiler, etc.)- Optimizing performance of FlashList by using more advanced props like `getType`- 5-6 sample tasks where we’ll uncover and fix issues together- Q&A with Shopify team
React Summit 2022React Summit 2022
117 min
Detox 101: How to write stable end-to-end tests for your React Native application
Top Content
WorkshopFree
Compared to unit testing, end-to-end testing aims to interact with your application just like a real user. And as we all know it can be pretty challenging. Especially when we talk about Mobile applications.
Tests rely on many conditions and are considered to be slow and flaky. On the other hand - end-to-end tests can give the greatest confidence that your app is working. And if done right - can become an amazing tool for boosting developer velocity.
Detox is a gray-box end-to-end testing framework for mobile apps. Developed by Wix to solve the problem of slowness and flakiness and used by React Native itself as its E2E testing tool.
Join me on this workshop to learn how to make your mobile end-to-end tests with Detox rock.
Prerequisites- iOS/Android: MacOS Catalina or newer- Android only: Linux- Install before the workshop
React Summit Remote Edition 2021React Summit Remote Edition 2021
60 min
How to Build an Interactive “Wheel of Fortune” Animation with React Native
Top Content
Workshop
- Intro - Cleo & our mission- What we want to build, how it fits into our product & purpose, run through designs- Getting started with environment set up & “hello world”- Intro to React Native Animation- Step 1: Spinning the wheel on a button press- Step 2: Dragging the wheel to give it velocity- Step 3: Adding friction to the wheel to slow it down- Step 4 (stretch): Adding haptics for an immersive feel
React Advanced Conference 2023React Advanced Conference 2023
159 min
Effective Detox Testing
Workshop
So you’ve gotten Detox set up to test your React Native application. Good work! But you aren’t done yet: there are still a lot of questions you need to answer. How many tests do you write? When and where do you run them? How do you ensure there is test data available? What do you do about parts of your app that use mobile APIs that are difficult to automate? You could sink a lot of effort into these things—is the payoff worth it?
In this three-hour workshop we’ll address these questions by discussing how to integrate Detox into your development workflow. You’ll walk away with the skills and information you need to make Detox testing a natural and productive part of day-to-day development.
Table of contents:
- Deciding what to test with Detox vs React Native Testing Library vs manual testing- Setting up a fake API layer for testing- Getting Detox running on CI on GitHub Actions for free- Deciding how much of your app to test with Detox: a sliding scale- Fitting Detox into you local development workflow
Prerequisites
- Familiarity with building applications with React Native- Basic experience with Detox- Machine setup: a working React Native CLI development environment including either Xcode or Android Studio
React Summit 2023React Summit 2023
88 min
Deploying React Native Apps in the Cloud
WorkshopFree
Deploying React Native apps manually on a local machine can be complex. The differences between Android and iOS require developers to use specific tools and processes for each platform, including hardware requirements for iOS. Manual deployments also make it difficult to manage signing credentials, environment configurations, track releases, and to collaborate as a team.
Appflow is the cloud mobile DevOps platform built by Ionic. Using a service like Appflow to build React Native apps not only provides access to powerful computing resources, it can simplify the deployment process by providing a centralized environment for managing and distributing your app to multiple platforms. This can save time and resources, enable collaboration, as well as improve the overall reliability and scalability of an app.
In this workshop, you’ll deploy a React Native application for delivery to Android and iOS test devices using Appflow. You’ll also learn the steps for publishing to Google Play and Apple App Stores. No previous experience with deploying native applications is required, and you’ll come away with a deeper understanding of the mobile deployment process and best practices for how to use a cloud mobile DevOps platform to ship quickly at scale.
JSNation 2023JSNation 2023
111 min
Bringing Your Web App to Native With Capacitor
WorkshopFree
So, you have a killer web app you've built and want to take it from your web browser to the App Store. Sure, there are a lot of options here, but most will require you to maintain separate apps for each platform. You want your codebase to be as close as possible across Web, Android, and iOS. Thankfully, with Capacitor, you can take your existing web app and quickly create native iOS and Android apps for distribution on your favorite App Store!
Contents: This workshop is aimed at beginner developers that have an existing web application, or are interested in mobile development. We will go over:- What is Capacitor- How does it compare to other cross-platform solutions- Using Capacitor to build a native application using your existing web code- Tidying up our application for distribution on mobile app stores with naming conventions, icons, splash screens and more