- \n
- Ao contr\u00e1rio dessas, a react-native-adapty permite a valida\u00e7\u00e3o de compra baseada em servidor.<\/li>\n\n\n\n
- Ela \u00e9 compat\u00edvel com todos os recursos implementados recentemente pelas lojas de aplicativos, desde ofertas promocionais<\/a> at\u00e9 funcionalidades de pagamento antecipado<\/a>. Ela tamb\u00e9m est\u00e1 pronta para suportar novos recursos que venham a surgir.<\/li>\n\n\n\n
- O c\u00f3digo acaba se tornando mais claro e direto.<\/li>\n\n\n\n
- Voc\u00ea pode modificar sua oferta de produtos e adicionar ou remover novas ofertas sem ter que passar por todo o ciclo de entrega. N\u00e3o \u00e9 preciso lan\u00e7ar vers\u00f5es beta e esperar pela aprova\u00e7\u00e3o.<\/li>\n<\/ul>\n\n\n\n
O SDK da Adapty tem muito mais para oferecer. Voc\u00ea disp\u00f5e de ferramentas anal\u00edticas integradas para todas as principais m\u00e9tricas, an\u00e1lise de coorte, valida\u00e7\u00e3o de compra baseada no servidor, testes AB para paywalls, campanhas promocionais com segmenta\u00e7\u00e3o flex\u00edvel, integra\u00e7\u00f5es de ferramentas anal\u00edticas de terceiros e muito mais.<\/p>\n\n\n\n
Sobre este artigo<\/h2>\n\n\n\n
No momento, vamos tratar da configura\u00e7\u00e3o de compras no aplicativo no React Native. O que vamos abordar hoje:<\/p>\n\n\n\n
- \n
- Porque o Expo n\u00e3o funciona com compras no aplicativo no React Native.<\/li>\n\n\n\n
- Como criar uma conta de desenvolvedor.<\/li>\n\n\n\n
- Como configurar com Adapty:
Configurando a App Store
Configurando a Play Store<\/li>\n\n\n\n - Adi\u00e7\u00e3o de assinaturas.<\/li>\n\n\n\n
- Cria\u00e7\u00e3o de um paywall.<\/li>\n\n\n\n
- Instala\u00e7\u00e3o de react-native-adapty.<\/li>\n\n\n\n
- Um exemplo de aplicativo e o resultado. <\/li>\n<\/ol>\n\n\n\n
Neste guia, vamos tentar construir um aplicativo que exiba fotos de gatos para os usu\u00e1rios assinantes e que induza a todos os outros com uma oferta de assinatura. <\/p>\n\n\n\n\n\n
Por que o Expo n\u00e3o funciona com compras no aplicativo no React Native<\/h3>\n\n\n\n
Para resumir uma longa hist\u00f3ria: <\/em>O Expo \u201cmanaged<\/em><\/a>\u201d (geranciado) n\u00e3o \u00e9 compat\u00edvel com os m\u00e9todos nativos que as lojas de aplicativos oferecem para o processamento de compras (tamb\u00e9m conhecidos como kits de loja). Voc\u00ea precisa se ater ao RN puro ou usar o fluxo de trabalho b\u00e1sico (bare workflow) do Expo.<\/em><\/p>\n\n\n\n
Sendo bem direto, vou desapontar aqueles que pensaram em usar o Expo: n\u00e3o vai funcionar. O Expo \u00e9 um framework React Native que facilita e muito o desenvolvimento de aplicativos. No entanto, seu fluxo de trabalho gerenciado n\u00e3o \u00e9 compat\u00edvel com o processamento de compras\/assinaturas. O Expo n\u00e3o utiliza nenhum c\u00f3digo nativo em seus m\u00e9todos e componentes (os dois s\u00e3o apenas JS), o que \u00e9 necess\u00e1rio para os kits de loja. N\u00e3o \u00e9 poss\u00edvel implementar compras no aplicativo com JavaScript, de modo que voc\u00ea ter\u00e1 que “ejetar”.<\/p>\n\n\n\n
Como criar uma conta de desenvolvedor<\/h2>\n\n\n\n
Primeiro, voc\u00ea precisa criar contas na loja de aplicativos, bem como criar e configurar compras e assinaturas para os sistemas iOS e Android. Esse processo n\u00e3o deve levar mais de 20 minutos.<\/p>\n\n\n\n
Caso voc\u00ea ainda n\u00e3o tenha configurado sua conta de desenvolvedor e produtos no App Store Connect e\/ou Google Play Console, confira as seguintes orienta\u00e7\u00f5es:<\/p>\n\n\n\n
- \n
- Para iOS<\/a>: leia o guia do in\u00edcio at\u00e9 o t\u00edtulo \u201cComo conseguir a lista SKProduct\u201d, pois \u00e9 onde come\u00e7amos a discutir as implementa\u00e7\u00f5es nativas. <\/li>\n\n\n\n
- Para Android<\/a>: leia o guia do in\u00edcio at\u00e9 o t\u00edtulo “Como conseguir uma lista de produtos em um aplicativo”.<\/li>\n<\/ul>\n\n\n\n
Como configurar no Adapty<\/h2>\n\n\n\n
Para o react-native-adapty, \u00e9 necess\u00e1rio primeiro configurar seu dashboard no Adapty. Este procedimento n\u00e3o leva muito tempo, mas voc\u00ea obter\u00e1 todas as vantagens listadas acima que o Adapty tem em rela\u00e7\u00e3o \u00e0 codifica\u00e7\u00e3o dura.<\/p>\n\n\n\n
Na terceira etapa, voc\u00ea receber\u00e1 instru\u00e7\u00f5es com as configura\u00e7\u00f5es da App Store e do 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 o sistema iOS, voc\u00ea precisa fazer o seguinte:<\/p>\n\n\n\n
- \n
- Especificar o ID do pacote;<\/li>\n\n\n\n
- Configurar as Notifica\u00e7\u00f5es do App Store Server;<\/li>\n\n\n\n
- Especificar o segredo compartilhado da App Store Connect. <\/li>\n<\/ul>\n\n\n\n
Estes campos s\u00e3o necess\u00e1rios para que as compras funcionem. <\/p>\n\n\n\n
Cada campo tem uma dica de \u201cLeia como\u201d que cont\u00e9m orienta\u00e7\u00f5es passo a passo de como proceder. Verifique-os caso tenha alguma d\u00favida.<\/p>\n\n\n\n
O ID de pacote \u00e9 como se identifica de maneira \u00fanica o seu aplicativo. Deve corresponder \u00e0quele que voc\u00ea especificou no Xcode, em 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\nNo caso do sistema Android, os campos obrigat\u00f3rios s\u00e3o o Nome do Pacote e o Arquivo de Chave da Conta de Servi\u00e7o. Todos estes campos t\u00eam suas pr\u00f3prias dicas de \u201cLeia como\u201d tamb\u00e9m. O nome do pacote tem a mesma fun\u00e7\u00e3o no Android que o ID do pacote tem no iOS. Ele deve corresponder ao que voc\u00ea especificou no seu c\u00f3digo, que pode ser encontrado no arquivo \/android\/app\/build.gradle em 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\nNa quarta etapa, voc\u00ea dever\u00e1 conectar o SDK da Adapty ao seu aplicativo. Ignore esta etapa por enquanto, mas voltaremos a ele um mais adiante.<\/p>\n\n\n\n
Ap\u00f3s se inscrever, verifique a guia de configura\u00e7\u00f5es e lembre-se de que \u00e9 aqui que sua chave SDK p\u00fablica pode ser encontrada. Voc\u00ea vai precisar da chave posteriormente.<\/p>\n\n\n\n
![\"\"](\"https:\/\/adapty.io\/wp-content\/uploads\/2023\/01\/61dd2e3d3fce0994fd3f0c38_0_z1xu4tx6yoskp5gysva4jz-ksmpt59lwmlpt8mol5fmyuqn1gygyvmqf52rgz5drhlvtp2gekrd0pwygz8pydmejdeskwggxp5-_f6kevd_ftdziotbnzpcv6bsqgojjk9unzt.jpg\")
<\/figure>\n\n\n\nComo adicionar uma assinatura<\/h3>\n\n\n\n
A Adapty utiliza produtos para diferentes assinaturas. Sua assinatura de fotos de gatos pode ser semanal, semestral ou anual. Cada uma destas op\u00e7\u00f5es constitui um produto Adapty \u00e0 parte.<\/p>\n\n\n\n
Vamos especificar no dashboard que temos um produto. Para isso, navegue at\u00e9 Produtos & Testes A\/B \u2192 Produtos e clique em Criar produto. <\/p>\n\n\n\n
Agora voc\u00ea precisa especificar o nome do produto, ou seja, como a assinatura aparecer\u00e1 no seu dashboard da Adapty. <\/p>\n\n\n\n
Voc\u00ea tamb\u00e9m deve especificar o ID do produto na App Store e o ID do produto na Play Store. Caso deseje, especifique o per\u00edodo e o nome tamb\u00e9m para o processo de analytics. Clique em Salvar.<\/p>\n\n\n\n
![\"\"](\"https:\/\/adapty.io\/wp-content\/uploads\/2023\/01\/61dd2e3d3abe166794791c09_fukrvgjrhor1rtmrrmvq4mar_f3rdr2nqpbojb44aa5ipwcq-9bbq7ajpq085sroobeltpnw9rtdfah-a0pqoqthyqbj8ayaahikjioylj1gszmlfh_mhwlqowynrpaabjjkvoln.png\")
<\/figure>\n\n\n\nComo criar um paywall<\/h2>\n\n\n\n
Em seguida, voc\u00ea deve criar um paywall, que \u00e9 uma tela que restringe o acesso do usu\u00e1rio a recursos premium<\/em> e os estimula com uma oferta de assinatura. \u00c9 necess\u00e1rio adicionar o produto que voc\u00ea criou ao seu paywall. Para isso, clique em \u201cCriar paywall\u201d na mesma se\u00e7\u00e3o (Produtos & Testes A\/B \u2192 Paywalls).<\/p>\n\n\n\n
- \n
- Escolha um nome para o Paywall que voc\u00ea e sua equipe poder\u00e3o facilmente inferir, apenas olhando o nome, de qual paywall se trata.<\/li>\n\n\n\n
- Voc\u00ea deve usar o ID do paywall para exibir o paywall em quest\u00e3o no seu aplicativo. No caso do nosso aplicativo de exemplo, usaremos \u201ccats_paywall\u201d.<\/li>\n\n\n\n
- No menu suspenso \u201cProduto\u201d, selecione sua assinatura.<\/li>\n<\/ul>\n\n\n\n
Clique em Salvar e publicar.<\/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\nPronto, a configura\u00e7\u00e3o foi conclu\u00edda. Agora, vamos adicionar as depend\u00eancias e escrever o c\u00f3digo.<\/p>\n\n\n\n
Instala\u00e7\u00e3o do react-native-adapty<\/h2>\n\n\n\n
1. Primeiro, adicione a depend\u00eancia:<\/p>\n\n\n\n
- Para Android<\/a>: leia o guia do in\u00edcio at\u00e9 o t\u00edtulo “Como conseguir uma lista de produtos em um aplicativo”.<\/li>\n<\/ul>\n\n\n\n
- Para iOS<\/a>: leia o guia do in\u00edcio at\u00e9 o t\u00edtulo \u201cComo conseguir a lista SKProduct\u201d, pois \u00e9 onde come\u00e7amos a discutir as implementa\u00e7\u00f5es nativas. <\/li>\n\n\n\n