Construyendo y Monetizando una App de React Native para Tres Plataformas en 20 Minutos

El Desafío Hola, soy Perttu. Hoy les mostraré cómo monetizar una app React Native para tres plataformas. Lo haremos en aproximadamente 20 minutos. Sí, así que comencemos.

Entonces, sobre la agenda. Dado que estamos monetizando una app para tres plataformas, es decir, iOS, Android y web, primero, por supuesto, hablaremos sobre qué es la monetización y por qué es tan difícil. Vamos a ver algunas de las opciones que tenemos allí. Luego, vamos a pasar de ahí a tomar un proyecto que ha sido empaquetado con Expo o que ha comenzado con Expo y React Native, y vamos a mantener la base de código para que funcione en iOS, web y Android, todos ellos.

Voy a mostrar las plataformas iOS y web hoy porque es fácil. Tengo el dispositivo aquí. Android, solo tendrán que confiar en mí que el código está ahí y funciona con eso. No voy a hacer una demostración hoy debido al tiempo. Luego voy a pasar a Revenue Cat, hablar un poco sobre qué es eso y cómo facilita la monetización de tu app móvil. Así que estaré haciendo clic en el tablero para hacer eso. Luego vamos a llegar a las partes de construcción reales, así que estaré bastante práctico mostrándoles cómo funciona todo esto, cómo obtener suscripciones y monetizar en las tres plataformas.

Lo que no haremos hoy es que no configuraremos la App Store, por lo que esto significa que configurar una cuenta de App Store o configurar una cuenta de Google Play, conectar esas a Revenue Cat, y por ejemplo, también configurar una cuenta de Stripe. No haremos eso. Solo tendremos que asumir que eso es algo que ya habrías hecho. Tenemos una guía bastante buena sobre eso en el sitio web de Revenue Cat para hacerlo. Voy a mostrar eso, enlazarlo, seguir eso para comenzar.

Pero de lo contrario, la parte de código real va a ser el tema principal del que hablaremos hoy. Un poco sobre mí. Mi nombre es Perttu Lähtenähti. Estoy basado en Helsinki. Soy defensor senior de desarrolladores en Revenue Cat, donde ayudo a los desarrolladores a ganar más dinero. Estoy solo en Twitter, esencialmente, con este handle. Y puedes encontrar algunos de mis escritos desde el código QR, que enlaza a este sitio web, thereperttu.dev. La mayoría de ellos están orientados hacia, como, cuando se trata, hablan sobre cómo monetizar aplicaciones, cómo hacer las diferentes características de monetización, cómo construir buenos productos que moneticen bien. De eso hablo principalmente.

Así que vamos a empezar. Primero, ¿por qué estamos usando React Native en este proyecto y no, por ejemplo, React? Bueno, eso es simple. Porque vamos a tener una única base de código que se construye para iOS o Android y web sin que tengamos que hacer ningún código específico de plataforma, por así decirlo. Esencialmente, ninguno en este proyecto. Y en la vida real, también tendrías muy poco, o dependiendo de tus necesidades, por supuesto, podrías tener más.

Pero la idea completa de React Native es que lo escribes, mantienes la mayor parte del código igual, la lógica y demás, y luego tienes que hacer algunas partes específicas de la plataforma, pero muy poco de lo contrario. Y por supuesto, como resultado final, obtenemos una experiencia totalmente nativa. Así que las aplicaciones de iOS y Android se sienten como si fueran aplicaciones reales de iOS y Android, y las aplicaciones web se sienten como si fueran una aplicación web, no otra cosa. Así que podemos seguir fácilmente las convenciones de la plataforma con React Native, y también es agradable trabajar con él, por supuesto.

Pero entonces, ¿por qué es difícil la monetización? Así que en iOS y Android, en caso de que nunca hayas construido tu propia aplicación para esas plataformas, para monetizar cualquier cosa allí cuando se trata de cosas digitales, necesitas usar sus sistemas de compras dentro de la aplicación. Así que no puedes usar Stripe o cualquier otra cosa allí, pero tienes que usar los suyos propios. Está bien, justo. Y en la web, por supuesto, no tienes esas opciones de Apple y Google, pero en su lugar, tienes que usar Stripe o Paddle o similar. Así que se convierte en algo así que si tienes múltiples plataformas, tienes que jugar con todas estas muy bien y conectarlas muy bien y hacer que puedas usar esto también de manera multiplataforma.

Con las innovaciones lanzadas, tienes que mantener un backend para ti mismo, que mantenga un seguimiento de los estados de suscripción, maneje los reembolsos, etc. y conecte todos estos servicios juntos. Y ahí es donde entra RevityGAD. Así que proporcionamos, esencialmente, un backend de suscripción como servicio, así que nos encargamos de toda la complejidad que de otro modo tendrías que hacer tú mismo en el backend, como recibir validación, los reembolsos, el estado de suscripción, todo eso, y también un montón de otras cosas buenas. También tenemos muros de pago, por ejemplo. Soportamos todas las principales plataformas, así que Android, iOS y web. Tenemos, para React Native, para Flutter, para iOS nativo y Android nativo, SDKs, así que puedes usarnos con básicamente todo.

Y nos mantenemos al día con los cambios regulatorios y los requisitos de facturación a medida que cambian. Así que, por ejemplo, cuando Apple permitió comprar fuera de la tienda, lanzamos una función para hacerlo en solo unos días. Y, bueno, la mejor parte es, por supuesto, que tenemos un SDK muy fácil de usar para lograr todo esto.

Así que ahora vamos a ver realmente cómo hacer eso. Así que, aquí tenemos un proyecto, una vista previa de mi aplicación móvil aquí al lado, por un tiempo rápido, y luego los enfoques que he construido con Expo. Y lo primero que necesitamos hacer aquí es instalar un paquete de compra nativa directa, que es nuestro SDK. Así que, bun, add, React Native, purchases. Y ese paquete se ha añadido ahora.

Y debido a que nuestro SDK en iOS y Android, requiere algo de código nativo, vamos a tener que hacer una llamada compilación de desarrollo de nuestra aplicación Expo. Eso solo nos permite usar código nativo, que en realidad viene incluido con el SDK, así que no tenemos que tocar el código nativo nosotros mismos. Solo tenemos que asegurarnos de que nuestra aplicación Expo esté lista para ejecutar eso. Así que, hagamos bun, Expo, pre-build. Y antes de ejecutar eso, puedes ver aquí la estructura de carpetas. Así que, tenemos carpetas de iOS y Android. Cuando comienzas con un proyecto bare de Expo, en realidad no tienes esas.

Pero como ya he ejecutado este proyecto una vez, los tengo. Pero tendríamos que ejecutar el comando de preconstrucción para generarlos. Y en realidad podemos ver que si eliminamos la carpeta de Android y ejecutamos este comando, lo generará para nosotros, como puedes ver allí. Así que, todo está bien.

Ahora tenemos una compilación de desarrollo en una aplicación de Expo. Hemos agregado un poco de código, que es básicamente una vista de lista que te muestra el estado de suscripción y luego todas las opciones de suscripción que tienes. Estos son dos componentes que hice antes de esto. Son muy simples. Vas a ver cómo se ven.

Ahora enfoquémonos en construir esto para el dispositivo, para que realmente obtengamos algo aquí en el iOS. Así que, hagamos bun, Expo, run iOS, y seleccionemos el dispositivo. Y seleccionemos mi propio dispositivo de allí. Y luego necesitamos esperar un poco mientras esto comienza a construir todas las dependencias nativas para ejecutar la aplicación. Y voy a dejar que esto se quede allí y haga su trabajo, y echemos un vistazo al dashboard.

Así que, así es como se ve el dashboard de RevenueCat. Esto es después de que hayas registrado la cuenta, puedes crear proyectos. Esos pueden incluir múltiples aplicaciones. Por ejemplo, este llamado React Advanced, usando los datos de sandbox, técnicamente tendría tres aplicaciones. La aplicación web, la aplicación iOS y la aplicación Android en sí misma.

Y antes de esto, ya he configurado una conexión con App Store Connect, Google Play Console, y luego la facturación web de RevenueCat, para que esas cosas puedan funcionar correctamente. Y si echo un vistazo a App Store Connect, aquí es donde está alojada mi aplicación iOS. Lo mismo para Google en Google Play Console. Y eso es todo.

La forma de hacer esto es ir a nuestra documentación, revisar la documentación de Conectar aplicaciones y proveedores web, y seguir la guía aquí sobre cómo configurar, por ejemplo, App Store Connect después de subir tu aplicación allí primero. Y eso es bastante simple. Te lleva como, por así decirlo, 15, tal vez 30 minutos configurarlo en Google. Podría tomar un poco más de tiempo, pero no más que eso. Es muy simple de usar. Y constantemente lo estamos haciendo más fácil. Parece que mi aplicación ha terminado de ejecutarse, así que está fuera de aquí. Ahora podemos ver que hay la página de índice con estado de carga, porque no tenemos un objeto de información del cliente que dirá si el usuario está suscrito o no.

Y luego tenemos el Safari. Vamos a recargar esta página. Tenemos la misma página, y esto debería ser recargable en caliente. Así que, si cambiamos el color, sí, todo está bien. Cambiemos eso de nuevo, volvamos aquí. Y lo que necesitamos hacer a continuación es, por supuesto, comenzar a agregar algo de código. Así que, si saltamos a esto, de vuelta a Revenue Cat, lo que también he hecho es que he configurado productos para esto.

Así que, he configurado dos productos para las compras web, mensual y anual, y lo mismo para Google Play y App Store. Hay productos mensuales y anuales. Y luego he establecido allí un derecho que se desbloquea cuando compras esos, llamado Advanced Access. Un derecho es solo para decirnos que, está bien, cuando compras algo, otorga este derecho al usuario, que luego puedes usar en el código para verificar que si el usuario tiene ese derecho, pueden obtener acceso a funciones o contenido basado en él. Así que, muy fácil. Así de fácil es esencialmente configurar un acceso restringido usando Revenue Cat.

Y no tenemos que hacer nada cuando se trata de configurar productos más. En este caso, lo he hecho antes. Sigue nuestro SDK para configurar, pero también es muy fácil. Puedes simplemente ir a los productos, seleccionar un nuevo producto, seleccionar la aplicación en la que estás trabajando, por ejemplo, App Store Connect, y crear los archivos necesarios si quieres. Así que, instalemos el SDK. Hemos instalado el paquete. Lo siguiente que necesitamos hacer es configurarlo. Así que, vemos que necesitamos tomar compras de React Native Purchases y ejecutar la configuración con la clave API. Podemos encontrar las claves API aquí en esta sección. Estas son claves públicas, por lo que pueden ser incluidas en tu aplicación.

Y vamos aquí y hacemos un use effect que primero, como, oh, ahí está ya. Así que, eso es bueno. El use effect que básicamente inicializa el SDK. Estoy cometiendo muchos errores tipográficos aquí. Maravilloso. Teclado raro. Eso es todo. Para hacer eso, necesitamos llamar a purchases, que necesitamos importar desde aquí. Purchases, configure, y con una API key, que no tenemos. Purchases es una función estática. Ves que necesita una API key. API key es remedy.getAPIkey. Dado que tenemos múltiples plataformas, necesitamos múltiples API keys diferentes, básicamente una para cada plataforma. Para solucionar eso, ya he guardado esas keys en un archivo llamado constants. Se ven así. Y vamos a hacer const API key y usar la función helper de plataforma de React Native para seleccionar de allí y darle las keys. Y lo que esto hace es básicamente cuando ejecutas esta app en iOS o web, seleccionará usar esa key en lugar de la key de iOS. Guardemos eso. Deberíamos empezar a obtener algunos logs. Lo estamos. Eso es maravilloso. Pero aún no estamos viendo nada. Así que, en su lugar, agreguemos las partes necesarias para ver si los usuarios están suscritos o no. Y para eso, agreguemos otro useEffect. Puedes ver que tenemos el setCustomerInfoState aquí. Así que, useEffect. Para hacer eso, necesitamos tener una función llamada getInfo que es una función asíncrona. Y llamará a const info para ser – bueno, tal vez solo llamemos customer info es purchases getCustomerInfo. Y esta es una función asíncrona que está en el await allí. Y luego simplemente establecer eso en el estado, setCustomerInfo, customer info, así.

Y luego llamemos a esto. Guarda eso. Y obtenemos que el estado de la suscripción está activo. Así que, eso es porque ya hemos comprado algo para este usuario. Eso no es un problema. Está bien.

Entonces, implementemos la lógica de compra, cómo mostrar realmente algunos paquetes aquí. Entonces, en RemedyCAD, tenemos – hagamos otro useEffect. Tenemos una función para obtener todas las opciones de compra posibles, que se llama getOfferings. Una oferta es solo una forma de agrupar diferentes productos juntos.

Entonces, haz const getPackages, así. También, una función asíncrona. Y allí usamos el getOfferings. Entonces, const offerings es purchases getOfferings sigo olvidando la función await un poco allí. Y luego simplemente lo guardamos en el estado de paquetes. Entonces, setPackages, hacemos offerings, verificamos todo, y – oh, lo siento. Verificamos offerings current, y establecemos paquetes disponibles. Y ahora nos está quejando de que eso también puede ser indefinido. Así que, vamos a añadir una cláusula para obtener eso. Y luego todavía necesitamos llamarlo. Y una vez que hacemos esto, deberíamos empezar a ver – sí, ahí lo tenemos. Entonces, tenemos los paquetes cuando haces clic en ellos. Nos da la opción de comprarlos. ¿Cómo se ve para la web? Parece que necesitamos actualizar la versión web. Hace lo mismo. Así que, eso es genial. Eso es muy, muy genial. Lo siguiente, por supuesto, a la compra. Así que, si ahora seleccionamos y hacemos clic en suscribirse, no va a pasar nada. Y eso es porque no hemos implementado el manejo de la compra.

El manejo de la compra en sí es muy fácil. Simplemente vamos a hacer esto. Vamos a tomar const – o en realidad, vamos a tomar purchases package allí. Vamos a darle el paquete seleccionado así. Y eso sería suficiente. Pero si ahora terminamos comprando algo, tendríamos que recargar la aplicación para ver qué está pasando en esto.

Para que veamos que el cliente se mantuvo y eligió clientes suscribirse, tendríamos que refrescar la aplicación. Pero en realidad, el paquete de compra también devuelve una información del cliente. Así que, simplemente podemos tomar eso y establecer la información del cliente con la información del cliente para hacerlo. Lo guardamos allí. Vamos a intentar. Hacemos clic en suscribirse.

Actualmente estás suscrito a esto. Bueno, no hagamos eso. En su lugar, hagamos los paquetes anuales. Suscribirse. Obtenemos ese bonito modelo nativo. Puedes hacer clic para suscribirte. Esperemos que pase. Pasó y tenemos una suscripción allí. Actualmente estás suscrito a los paquetes anuales. Si hacemos clic en gestionar, podemos ver que también podemos cancelarlo usando el modelo de cancelación nativo. Vamos a mantenerlo por ahora.

Bien, eso funciona para iOS. Haría lo mismo en Android. Así que, vamos a la aplicación web y veamos cómo funciona. Tomamos el avanzado anual. Nos suscribimos. Y tada, también tenemos el familiar portal de pago de Stripe donde puedes poner la tarjeta allí y pagar por esto. Y de manera similar hará la versión de iOS, suscribirse a la aplicación, regresar, otorgarte el derecho, y eso es todo.

Podemos probarlo. Hagamos un rápido – cerremos la sesión del usuario. Ahora nos muestra que el usuario está suscrito, aunque eso ya sucedió antes de que empezáramos a hacer algo porque esta era una versión antigua de la aplicación. Así que, llamemos a purchases log out. De hecho, vamos a – sí, tengo que hacerlo así. Solo voy a cerrar la sesión del usuario para que podamos ver todo el flujo de compra así. Ahí, espera, tada. Ups, ¿qué estoy escribiendo aquí? Ahí. Bien, y luego llamamos al logout.

Solo tenemos que hacer esto una vez, y luego solo – espera, ¿qué obtienes? Oh, sí, ahí. Bien, bien, bien, no te enojes conmigo. Aparentemente, ya estás con los bucles infinitos y todo. Suscripción que no está suscrita. Bien, así que ahora estamos de vuelta al estado donde el usuario no tiene. Así que, solo vamos a guardarlo. El usuario no se ha suscrito a nada, así que vamos a ver cómo cambia el estado de suscripción Cambiamos al mensual, nos suscribimos, obtenemos el modelo, hacemos clic, todo listo, actualización del estado de suscripción, se actualizó. Eso es todo.