- \n
- A diferencia del resto, proporciona una validaci\u00f3n de compra (purchase validation) basada en el servidor.<\/li>\n\n\n\n
- Es compatible con todas las funciones implementadas recientemente por las tiendas de aplicaciones, desde las ofertas promocionales <\/a>(promo offers) hasta las funciones de pago por adelantado<\/a> (pay-upfront). Adem\u00e1s, es r\u00e1pida para admitir las nuevas funciones que surjan.<\/li>\n\n\n\n
- El c\u00f3digo acaba siendo m\u00e1s claro y sencillo.<\/li>\n\n\n\n
- Puedes modificar tu oferta del producto y a\u00f1adir o eliminar nuevas ofertas sin tener que pasar por el ciclo completo de lanzamiento. No hay necesidad de lanzar versiones beta y esperar a la aprobaci\u00f3n.<\/li>\n<\/ul>\n\n\n\n
El SDK (SDK) de Adapty es mucho m\u00e1s que eso. Tienes herramientas de an\u00e1lisis integradas para todas las m\u00e9tricas clave, an\u00e1lisis de cohortes (cohort analysis), validaci\u00f3n de compra basada en el servidor, pruebas AB (AB testing) para muros de pago, campa\u00f1as de promoci\u00f3n con segmentaci\u00f3n flexible, integraciones de herramientas de an\u00e1lisis de terceros y mucho m\u00e1s.<\/p>\n\n\n\n
En este art\u00edculo<\/h2>\n\n\n\n
Por ahora, vamos a hablar de la configuraci\u00f3n de las compras dentro de la aplicaci\u00f3n en las aplicaciones React Native. Esto es lo que vamos a cubrir hoy:<\/p>\n\n\n\n
- \n
- Por qu\u00e9 la Expo no funcionar\u00e1 para las compras dentro de la aplicaci\u00f3n en las aplicaciones React Native.<\/li>\n\n\n\n
- Crear una cuenta de desarrollador.<\/li>\n\n\n\n
- Configurar Adapty:
Configurar la App Store
Configurar la Play Store<\/li>\n\n\n\n - A\u00f1adir suscripciones.<\/li>\n\n\n\n
- Crear un muro de pago.<\/li>\n\n\n\n
- Instalar react-native-adapty.<\/li>\n\n\n\n
- Un ejemplo de aplicaci\u00f3n y el resultado. <\/li>\n<\/ol>\n\n\n\n
En esta gu\u00eda, intentaremos crear una aplicaci\u00f3n que muestre im\u00e1genes de gatos a los usuarios suscritos y que ofrezca a todos los dem\u00e1s una oferta de suscripci\u00f3n. <\/p>\n\n\n\n\n\n
Por qu\u00e9 la Expo no funcionar\u00e1 para las compras dentro de la aplicaci\u00f3n en las aplicaciones React Native<\/h3>\n\n\n\n
Resumiendo: la <\/em>Expo \u00abgestionada\u00bb<\/em><\/a> no es compatible con los m\u00e9todos nativos que ofrecen las tiendas de aplicaciones para procesar las compras (tambi\u00e9n conocidos como kits de tienda). Tendr\u00e1s que ce\u00f1irte al RN puro o utilizar el flujo de trabajo de Expo bare.<\/em><\/p>\n\n\n\n
De entrada, tendr\u00e9 que decepcionar a los que pensaron en usar Expo: esto no funcionar\u00e1. Expo es un framework React Native que facilita mucho el desarrollo de aplicaciones. Sin embargo, su flujo de trabajo gestionado no es compatible con el procesamiento de compras\/suscripciones. Expo no utiliza ning\u00fan c\u00f3digo nativo en sus m\u00e9todos y componentes (ambos son s\u00f3lo JS), lo cual es necesario para los kits de tienda. No hay forma de implementar las compras dentro de la aplicaci\u00f3n en las tiendas m\u00f3viles con JavaScript, as\u00ed que tendr\u00e1s que \u00abexpulsar\u00bb.<\/p>\n\n\n\n
Crear una cuenta de desarrollador<\/h2>\n\n\n\n
En primer lugar, tendr\u00e1s que configurar las cuentas de la tienda de aplicaciones, as\u00ed como crear y configurar las compras y las suscripciones tanto para iOS como para Android. Esto no deber\u00eda llevarte m\u00e1s de 20 minutos.<\/p>\n\n\n\n
Si todav\u00eda no has configurado tu cuenta de desarrollador y tus productos en App Store Connect y\/o Google Play Console, consulta estas gu\u00edas:<\/p>\n\n\n\n
- \n
- Para iOS<\/a>: lee la gu\u00eda desde el principio y hasta el ep\u00edgrafe \u00abObtener la lista de SKProduct\u00bb, ya que es donde empezamos a hablar de las implementaciones nativas. <\/li>\n\n\n\n
- Para Android<\/a>: lee la gu\u00eda desde el principio y hasta el encabezado \u00abObtener una lista de productos en una aplicaci\u00f3n\u00bb.<\/li>\n<\/ul>\n\n\n\n
Configurar Adapty<\/h2>\n\n\n\n
Para react-native-adapty, primero tendr\u00e1s que configurar tu dashboard de Adapty. Esto no te llevar\u00e1 mucho tiempo, pero te proporcionar\u00e1 todas las ventajas mencionadas anteriormente que tiene Adapty sobre el codificado de forma r\u00edgida.<\/p>\n\n\n\n
En el tercer paso, se te pedir\u00e1 que configures la App Store y Google Play.<\/p>\n\n\n\n
![\"\"](\"https:\/\/adapty.io\/wp-content\/uploads\/2023\/01\/61dd2e3df0eb779b1966c336_wwqbyclqbg22r4uxyue6f_wty_8kx1lgeepf9-ctrv5mcvrihoe1upbhw-0jth_wqwkhjc4az-wnkjavifb_eb9riv9vztvwn3rvqbfghyv0cjx8ytj7d5fc4of7zeu7ezdhvkxd.png\")
<\/figure>\n\n\n\nPara iOS, necesitar\u00e1s:<\/p>\n\n\n\n
- \n
- Especificar el ID del paquete;<\/li>\n\n\n\n
- Configurar las notificaciones del servidor (server notifications) de la App Store;<\/li>\n\n\n\n
- Especificar el secreto compartido (shared secret) de App Store Connect. <\/li>\n<\/ul>\n\n\n\n
Estos campos son necesarios para que las compras funcionen. <\/p>\n\n\n\n
Cada campo tiene una sugerencia de \u00abLeer c\u00f3mo\u00bb que contiene gu\u00edas paso a paso. Cons\u00faltalas si tienes alguna duda.<\/p>\n\n\n\n
El ID del paquete es el ID \u00fanico de tu aplicaci\u00f3n. Debe coincidir con el que hayas especificado en Xcode, in Targets > [App Name] > General<\/em>:<\/p>\n\n\n\n
![\"\"](\"https:\/\/adapty.io\/wp-content\/uploads\/2023\/01\/61dd2e3d0bcefe3f92ed87c6_ofteg-29-hasv9sywd5gpm4vxtbwppkdlkqkatwvl3jprjkq3ffp3xzdcuett5qf_uzavsew-j_9jeqswh_hx7tugan03hol7qmnukdbzhefyla6ctghd8mwdxfb9bo6ynbhqatt.png\")
<\/figure>\n\n\n\nPara Android, los campos necesarios son el Nombre del Paquete y el Archivo de Clave de la Cuenta de Servicio. Todos estos campos tienen tambi\u00e9n sus propias sugerencias para Leer c\u00f3mo. El nombre del paquete hace en Android lo mismo que el ID del paquete en iOS. Debe coincidir con el que hayas especificado en tu c\u00f3digo, que se encuentra en el archivo \/android\/app\/build.gradle en android.defaultConfig.applicationId:<\/p>\n\n\n\n
![\"\"](\"https:\/\/adapty.io\/wp-content\/uploads\/2023\/01\/61dd2e3dad4d57621f800483_qbh6fhwgcmjiqsriilrm2ubc2xjswr8buchwntern5xn8fkxqxgep4hbrftvqyfu3rgx4dg_x3c6iyvemvxarmvemiu-awzpyhlntli64em6lnkwaqaxcsou4spkkyk2usia_jyq.png\")
<\/figure>\n\n\n\nEn el cuarto paso, se te pedir\u00e1 que conectes el SDK de Adapty a tu aplicaci\u00f3n. Omite este paso por ahora, aunque volveremos a \u00e9l un poco m\u00e1s tarde.<\/p>\n\n\n\n
Una vez que te hayas registrado, comprueba la pesta\u00f1a de configuraci\u00f3n y recuerda que aqu\u00ed es donde se encuentra tu clave de SDK p\u00fablica. Necesitar\u00e1s la clave m\u00e1s adelante.<\/p>\n\n\n\n
![\"\"](\"https:\/\/adapty.io\/wp-content\/uploads\/2023\/01\/61dd2e3d3fce0994fd3f0c38_0_z1xu4tx6yoskp5gysva4jz-ksmpt59lwmlpt8mol5fmyuqn1gygyvmqf52rgz5drhlvtp2gekrd0pwygz8pydmejdeskwggxp5-_f6kevd_ftdziotbnzpcv6bsqgojjk9unzt.jpg\")
<\/figure>\n\n\n\nA\u00f1adir una suscripci\u00f3n<\/h3>\n\n\n\n
Adapty utiliza productos para diferentes suscripciones. Tu suscripci\u00f3n de fotos de gatos puede ser semanal, bianual o anual. Cada una de estas opciones ser\u00e1 un producto separado de Adapty.<\/p>\n\n\n\n
Vamos a especificar en el dashboard que tenemos un producto. Para ello, ve a Products & A\/B Tests \u2192 Products y haz clic en Create product. <\/p>\n\n\n\n
Aqu\u00ed tendr\u00e1s que especificar el nombre del producto, es decir, c\u00f3mo se ver\u00e1 esta suscripci\u00f3n en tu dashboard de Adapty. <\/p>\n\n\n\n
Tambi\u00e9n tendr\u00e1s que especificar el ID de producto de App Store y el ID de producto de Play Store. Si quieres, especifica tambi\u00e9n el periodo y el nombre para los an\u00e1lisis. Haz clic en Save.<\/p>\n\n\n\n
![\"\"](\"https:\/\/adapty.io\/wp-content\/uploads\/2023\/01\/61dd2e3d3abe166794791c09_fukrvgjrhor1rtmrrmvq4mar_f3rdr2nqpbojb44aa5ipwcq-9bbq7ajpq085sroobeltpnw9rtdfah-a0pqoqthyqbj8ayaahikjioylj1gszmlfh_mhwlqowynrpaabjjkvoln.png\")
<\/figure>\n\n\n\nCrear un muro de pago (paywall)<\/h2>\n\n\n\n
Ahora, tendr\u00e1s que dise\u00f1ar un muro de pago, que es una pantalla que restringe el acceso del usuario a las funciones premium y le hace una oferta de suscripci\u00f3n. Tendr\u00e1s que a\u00f1adir el producto que has creado a tu muro de pago. Para ello, haz clic en Create paywall en la misma secci\u00f3n (Products & A\/B Tests \u2192 Paywalls).<\/p>\n\n\n\n
- \n
- Elige un nombre de muro de pago tal que t\u00fa y tu equipo puedan deducir f\u00e1cilmente, con s\u00f3lo mirar el nombre, de qu\u00e9 muro de pago se trata.<\/li>\n\n\n\n
- Utilizar\u00e1s el ID del muro de pago para mostrarlo en tu aplicaci\u00f3n. Como ejemplo de nuestra aplicaci\u00f3n, usaremos \u00abcats_paywall\u00bb.<\/li>\n\n\n\n
- En el men\u00fa desplegable Producto, selecciona tu suscripci\u00f3n.<\/li>\n<\/ul>\n\n\n\n
Haz clic en Save & publish <\/p>\n\n\n\n
![\"\"](\"https:\/\/adapty.io\/wp-content\/uploads\/2023\/01\/61dd2e3ddced150628dcbffb_uw2xexcu4rprox7_esl56chynz2mu1iqtae1xlweot55m7lqpugfjxtzp_kyg-vtawjwjhcpkmuno-ysa-i_el8xnv2v-6seczhpmdhy7xsswndb1_2kbuu9bfhqltew-h4yq5tj.png\")
<\/figure>\n\n\n\nEso es todo para la configuraci\u00f3n. Ahora, a\u00f1adiremos las dependencias y escribiremos el c\u00f3digo.<\/p>\n\n\n\n
Instalar react-native-adapty<\/h2>\n\n\n\n
1. Primero, a\u00f1ade la dependencia:<\/p>\n\n\n\n
- Para Android<\/a>: lee la gu\u00eda desde el principio y hasta el encabezado \u00abObtener una lista de productos en una aplicaci\u00f3n\u00bb.<\/li>\n<\/ul>\n\n\n\n
- Para iOS<\/a>: lee la gu\u00eda desde el principio y hasta el ep\u00edgrafe \u00abObtener la lista de SKProduct\u00bb, ya que es donde empezamos a hablar de las implementaciones nativas. <\/li>\n\n\n\n