Utilizando React Hooks + Capacitor para acceder a las API nativas móviles

Rate this content
Bookmark

Usando Capacitor, puedes crear fácilmente aplicaciones móviles nativas para iOS y Android utilizando todas las herramientas web de React que conoces y amas. Pero, ¿cómo accedemos a las API nativas? ¡Con el paquete @capacitor-community/react-hooks, podemos acceder rápidamente y fácilmente a las API nativas del dispositivo, como la cámara, el sistema de archivos y la geolocalización, utilizando React Hooks!

7 min
21 Jun, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Capacitor es una poderosa herramienta desarrollada por Ionic que permite compilar aplicaciones web en proyectos nativos de iOS y Android. Viene con un conjunto de complementos, incluido el complemento de la cámara, y tiene un paquete de React Hooks para una integración perfecta con aplicaciones de React. La charla incluye una demostración que muestra el botón de gancho de la cámara y la representación de las fotos seleccionadas. El presentador enfatiza el uso de useEffect y useState para funcionalidades adicionales. La charla concluye con una mención a la comunidad de Capacitor y agradecimientos por asistir.

Available in English

1. Introducción a Capacitor y React Hooks

Short description:

Hola, mi nombre es Thomas Vietas y soy un Ingeniero de Experiencia de Desarrollo de Capacitor que trabaja en Ionic. Capacitor es una herramienta creada por Ionic que te permite compilar tus aplicaciones web en un proyecto nativo de iOS o un proyecto nativo de Android. Es muy poderoso y viene con un conjunto de complementos, incluido el complemento de la cámara. También tenemos un paquete de React hooks que envuelve todos los complementos oficiales, haciéndolos sentir como en casa en tu aplicación de React.

Hola, mi nombre es Thomas Vietas y soy un Ingeniero de Experiencia de Desarrollo de Capacitor que trabaja en Ionic y hoy voy a explicar cómo puedes usar los hooks de React y Capacitor juntos para acceder a las API nativas móviles.

Primero que nada, es posible que estés pensando, ¿qué diablos es Capacitor? Nunca había oído hablar de esto. ¡No te preocupes! Capacitor es una herramienta creada por Ionic que te permite compilar tus aplicaciones web en un proyecto nativo de iOS o un proyecto nativo de Android. Es de código abierto, con licencia MIT. Puedes pensar en ello como React Native o como Flutter. La gran diferencia es que estamos tomando tu HTML, tu CSS, tu JavaScript y colocándolo en un proyecto de iOS o Android. Si funciona en la web, funcionará con Capacitor.

Es muy poderoso. Capacitor viene con un conjunto de complementos, por lo que puedes acceder a cosas como el almacenamiento, el sistema de archivos, la información del dispositivo o, en este ejemplo, la cámara. También proporcionamos una API para que puedas comunicarte a través de nuestro puente de JavaScript. Puedes hacer cosas en la web, llamar a nuestro puente y eso hará cosas en el nativo. Es bastante sencillo y tenemos toneladas de documentación sobre cómo construir tus propios complementos, así como una gran comunidad de complementos existentes.

Usar el complemento de Capacitor es bastante sencillo, así que veamos cómo usar el complemento de la cámara. Importamos nuestra cámara desde el paquete de cámara de Capacitor y tenemos un objeto de cámara en este tipo de resultado, que simplemente nos dice si esto es una URI, es Base64, cosas así. Echemos un vistazo a nuestro objeto de cámara. Una cámara tiene un objeto de función llamado getphoto. Getphoto nos permite tomar una nueva foto o acceder a nuestra galería a través de una sola llamada de función, y eso nos permite establecer la calidad o si queremos abrir la edición en el editor nativo. Esto es algo que no podemos hacer en la web o en una PWA, por lo que es una herramienta muy poderosa para abrir el editor nativo y hacer que se sienta realmente nativo. Así que volvamos al código. La cámara.getphoto devuelve una imagen y a partir de ahí, buscamos el elemento de imagen HTML, como una etiqueta de imagen, y establecemos ese elemento de imagen HTML en los datos de imagen que hemos seleccionado de la galería. Esto funciona muy bien en cualquier aplicación de React o cualquier aplicación web, pero esto puede no sentirse muy Reactivo o muy hooky si estás usando hooks de manera intensiva en tu proyecto.

Tenemos una gran comunidad, nuestra organización de comunidad de Capacitor, que ha creado un paquete de hooks de React. Los hooks de React envuelven todos nuestros complementos oficiales, como los que mencioné antes, el almacenamiento, el sistema de archivos, en este caso, la cámara, y los hacen sentir como en casa en tu aplicación de React que utiliza hooks de manera intensiva. Echemos un vistazo a la API del complemento de cámara de los hooks de React. Tenemos useCallback, que es un hook nativo de React, y tenemos useCamera, que es nuestro hook de cámara de la comunidad de Capacitor. Tenemos nuestro tipo de resultado que teníamos antes de nuestro paquete de cámara de Capacitor. Llamamos a nuestro hook useCamera para obtener nuestra foto, que es nuestro objeto de foto, y nuestro getPhoto, que llama a esa función de cámara.getPhoto que mostré en el otro ejemplo. Puedes pensar en esto como algo muy similar a useState, donde tenemos nuestro estado y luego nuestro setState. Luego tenemos esta función triggerCamera, que llama a useCallback, llama a nuestra cámara.getPhoto con la opción de permitir la edición y el tipo de resultado que queremos.

2. Demo de Capacitor y React Hooks

Short description:

Se siente mucho más familiar en una aplicación con muchos hooks de React. Pasemos a una demostración que preparé previamente. Tenemos nuestra aplicación y un componente personalizado llamado nuestro botón de gancho de cámara. Disparamos la cámara y mostramos la foto seleccionada. He compilado la aplicación iOS y la he puesto en el simulador de iOS. Tenemos nuestra aplicación Hello React Summit. Haga clic en el botón y seleccione una foto. Podemos configurar esto con useEffect o useState para obtener más funcionalidad. Consulta la comunidad de Capacitor en github.com/capacitor para obtener más complementos de Capacitor. ¡Gracias por asistir a mi Charla Relámpago!

Se siente mucho más familiar en una aplicación con muchos hooks de React. Pasemos a una demostración que preparé previamente. Así que aquí hay dos componentes importantes. Tenemos nuestra aplicación, que es simplemente nuestro archivo app.tsx que la mayoría de las aplicaciones tienen. Tenemos este otro componente personalizado llamado nuestro botón de gancho de cámara, al que vamos a ir. Este es solo un componente que tiene un div que muestra condicionalmente nuestra imagen si seleccionamos una foto y un botón que podemos hacer clic para activar nuestra cámara que dice, haz clic en mí. Vamos a pasar a las cosas buenas. En nuestro ejemplo de diapositivas, tenemos foto y getphoto, que llama a nuestro gancho useCamera. Y a partir de ahí tenemos triggerCamera, que llama a nuestro gancho useCallback, que llama a, puedes pensar en esto como camera.getphoto, pero obteniéndolo del gancho. Es solo getphoto, es calidad del 100 por ciento. No quieres abrir el editor nativo con nuestro tipo de resultado, que es una URL de datos. Una vez que hemos seleccionado, una vez que activamos nuestra cámara, hemos cambiado este botón, hemos seleccionado algo que establecerá esta foto en un valor que luego mostrará condicionalmente esta etiqueta de imagen.

Así que vamos a ver esto en acción. Ya he compilado la aplicación iOS y la he puesto en este simulador de iOS. Esto está ejecutando el simulador de iOS. Viene incluido con Xcode, puedes obtenerlo de forma gratuita en cualquier Mac, Apple lo proporciona, es genial para probar, incluso solo tu aplicación web para ver cómo se ve en iOS. Tenemos nuestra aplicación Hello React Summit. Esta es una aplicación nativa, así que aquí, React Summit. Dice, Hola React Summit, y este botón Haz clic en mí, a partir de lo que tenemos aquí. Haz clic en mí. Así que vamos a hacer clic en él, así activamos el gancho de devolución de llamada de la cámara. Seleccionaré más fotos y elegiré esta hermosa cascada. Y a partir de ahí, ¡tada! Tenemos esta cascada. Es genial. Este código se siente mucho más familiar. Me encantan los hooks de React, esto se siente mucho más familiar al escribir mucho del otro código. Podemos configurar esto con useEffect para que se active automáticamente cuando se cargue por primera vez. O podemos configurarlo con useState para poder seleccionar varias fotos. Es realmente poderoso y se siente como en casa con cualquier otro código de React.

Así que voy a mencionar nuestra comunidad en github.com/capacitor. Esto es mantenido por Ionic, pero todos estos desarrolladores y todos estos complementos son mantenidos por nuestra gran comunidad de Ionic. Tenemos algunos complementos geniales de Capacitor, como la integración con Stripe. Cosas como un complemento de hooks de React, reproductores de audio o video nativos, HTTP nativo. Es realmente poderoso. Echa un vistazo si tienes una aplicación web de React que deseas convertir en una aplicación de Android e iOS. Nuevamente, soy Thomas Betus de Ionic, y muchas gracias por quedarte en mi Charla Relámpago, y estaré en el chat si tienen alguna pregunta. Gracias.

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 Summit 2023React Summit 2023
28 min
You Can’t Use Hooks Conditionally… or Can You?
It’s the hooks rule number one: “Only call hooks at the top level”.
But what if I told you that this rule does not apply to every hook? One of them can actually safely be used conditionally. 
To understand how useContext is different from other hooks, and why it is exempted from this major rule, we need to know why this rule exists in the first place. We will build our own mental model of react’s rendering behavior, focused on how react keeps track of data at runtime: props, states, refs… and context values.
React Advanced Conference 2021React Advanced Conference 2021
10 min
Efficient State Management With Hookstate
If you’ve worked with the React useState hook before, you might have wondered why global state management can’t be just as easy. Why do we still need so much boilerplate to manage state with the Context API? What if we don’t want to be constrained opinionated tools like Redux Toolkit or forced to use actions and reducers in our React applications? This is where Hookstate comes in. Hookstate is not just another state management solution. Apart from being feature-rich, fast, and flexible, the library takes the idea of simplifying state management in React apps to a whole new level. In this talk, I’ll introduce Hookstate as a simple and efficient state management solution for React applications.
React Summit 2022React Summit 2022
7 min
Don't Forget React Memo
React developers intrigue us with the so-called React Forget compiler [that’s supposed to inject useMemo and useCallback into code automatically]. However, we still can't figure out best practices for useCallback, useMemo, and React.memo when we write it on our own. The worst scenario is if we continue to put it everywhere without understanding. As a result, it can bring noticeable harm to the performance of our application. In this talk, on real-life use cases, you will see solutions to the problem of using hooks wrong or overusing them!
React Advanced Conference 2021React Advanced Conference 2021
27 min
Limitless App Development with Expo and React Native
App development is hard, React and Expo make it easy!It's never been simpler to build and deploy powerful mobile apps with incredible features to both Android and iOS users all over the world.We’ll discuss building and deploying mobile apps seamlessly from the cloud using EAS, creating powerful dev clients (like browsers but for mobile app development) for testing your app, pushing OTA updates instantly to users, and much more — no native experience required!
React Summit 2022React Summit 2022
7 min
How to Share Code between React Web App and React Native Mobile App in Monorepo
Usually creating web and mobile apps require different tech stacks, and it is pretty hard to share code. This talk will show how I added a React web app and a React Native mobile app in the same monorepo using Nx, and how I optimized codeshare between react web app and react native mobile app.
React Summit Remote Edition 2021React Summit Remote Edition 2021
7 min
We Don’t Know How React State Hooks Work
We use them all the time, and we think we know state hooks work (useState, useReducer). But under the hood, as expected, things are not what you imagine. This talk is about update queues, batching, eager and lazy updates, and some other cool things learned from looking at Hooks source code. It also contains practical takeaways that will help you better understand and debug your code.

Workshops on related topic

React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
React Hooks Tips Only the Pros Know
Top Content
Featured Workshop
The addition of the hooks API to React was quite a major change. Before hooks most components had to be class based. Now, with hooks, these are often much simpler functional components. Hooks can be really simple to use. Almost deceptively simple. Because there are still plenty of ways you can mess up with hooks. And it often turns out there are many ways where you can improve your components a better understanding of how each React hook can be used.You will learn all about the pros and cons of the various hooks. You will learn when to use useState() versus useReducer(). We will look at using useContext() efficiently. You will see when to use useLayoutEffect() and when useEffect() is better.
React Summit Remote Edition 2021React Summit Remote Edition 2021
71 min
State Management in React with Context and Hooks
WorkshopFree
A lot has changed in the world of state management in React the last few years. Where Redux used to be the main library for this, the introduction of the React Context and Hook APIs has shaken things up. No longer do you need external libraries to handle both component and global state in your applications. In this workshop you'll learn the different approaches to state management in the post-Redux era of React, all based on Hooks! And as a bonus, we'll explore two upcoming state management libraries in the React ecosystem.
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
GraphQL Galaxy 2022GraphQL Galaxy 2022
156 min
Hands-On With SwiftUI, GraphQL, & Neo4j AuraDB
WorkshopFree
Bring the power of graphs to iOS mobile app development in this hands-on workshop. We will explore how to use the Neo4j GraphQL Library to build GraphQL APIs backed by Neo4j AuraDB and how to integrate GraphQL into an iOS app using SwiftUI and the Apollo iOS GraphQL library as we build a news reader mobile app.
Table of contents:- Intro to Neo4j AuraDB- Building GraphQL APIs with the Neo4j GraphQL Library- Intro to SwiftUI- SwiftUI + GraphQL
PrerequisitesTo follow along during the workshop attendees will need a Mac laptop with a recent version of Xcode installed. Some familiarity with Swift and iOS app development will be helpful, although not required.
React Summit 2022React Summit 2022
92 min
Bringing your React Web App to native with Capacitor
WorkshopFree
So, you have a killer React 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!
This workshop is aimed at intermediate developers that have an existing React application, or are interested in mobile development with React. We will go over:
What is CapacitorHow does it compare to other cross-platform solutionsUsing Capacitor to build a native application using your existing web codeTidying up our application for distribution on mobile app stores with naming conventions, icons, splashscreens and more.