- \n
- Contrairement \u00e0 ces derniers, il assure la validation des achats (purchase validation) sur le serveur.<\/li>\n\n\n\n
- Il prend en charge toutes les fonctionnalit\u00e9s r\u00e9cemment impl\u00e9ment\u00e9es par les magasins d’applications, depuis les offres promotionnelles<\/a> (promo offers) jusqu’aux fonctionnalit\u00e9s de paiement anticip\u00e9<\/a> (pay-upfront). Il est \u00e9galement rapide pour prendre en charge les nouvelles fonctionnalit\u00e9s \u00e0 venir.<\/li>\n\n\n\n
- Le code finit par \u00eatre plus clair et plus simple.<\/li>\n\n\n\n
- Vous pouvez modifier votre offre de produits et ajouter ou supprimer de nouvelles offres sans devoir passer par le cycle complet de publication. Il n’est pas n\u00e9cessaire de publier des versions b\u00eata et d’attendre l’approbation.<\/li>\n<\/ul>\n\n\n\n
Il y a bien plus dans le SDK Adapty que \u00e7a. Vous disposez d’outils d’analyse int\u00e9gr\u00e9s pour tous les indicateurs cl\u00e9s, d’une analyse de cohorte (cohort analysis), d’une validation des achats sur serveur, d’un test AB pour les paywalls, de campagnes promotionnelles avec une segmentation flexible, d’int\u00e9grations d’outils d’analyse tiers, etc.<\/p>\n\n\n\n
Dans cet article<\/h2>\n\n\n\n
Pour l’instant, nous allons parler du param\u00e9trage des achats int\u00e9gr\u00e9s dans les applications React Native. Voici ce que nous allons couvrir aujourd’hui :<\/p>\n\n\n\n
- \n
- Pourquoi Expo ne fonctionne pas pour les achats int\u00e9gr\u00e9s dans les applications React Native.<\/li>\n\n\n\n
- Cr\u00e9ation d’un compte de d\u00e9veloppeur.<\/li>\n\n\n\n
- Configuration de Adapty:
Configuration de l’App Store
Configuration de Play Store<\/li>\n\n\n\n - Ajout d’abonnements.<\/li>\n\n\n\n
- Cr\u00e9ation d’un paywall.<\/li>\n\n\n\n
- Installation de react-native-adapty.<\/li>\n\n\n\n
- Un exemple d’application et le r\u00e9sultat. <\/li>\n<\/ol>\n\n\n\n
Dans ce guide, nous allons essayer de cr\u00e9er une application qui affiche des photos de chats pour les utilisateurs abonn\u00e9s et propose une offre d’abonnement \u00e0 tous les autres. <\/p>\n\n\n\n\n\n
Pourquoi Expo ne fonctionne pas pour les achats int\u00e9gr\u00e9s dans les applications React Native ?<\/h3>\n\n\n\n
Pour r\u00e9sumer bri\u00e8vement la situation : <\/em>Expo \u00ab\u00a0managed<\/em><\/a>\u201d ne prend pas en charge les m\u00e9thodes natives des magasins d’applications pour le traitement des achats (\u00e9galement connues sous le nom de kits de magasin). Vous devrez soit vous en tenir au RN pur, soit utiliser le flux de travail de Expo.<\/em><\/p>\n\n\n\n
D’embl\u00e9e, je dois d\u00e9cevoir ceux qui ont pens\u00e9 \u00e0 utiliser Expo : \u00e7a ne marchera pas. Expo est un cadre React Native qui facilite grandement le d\u00e9veloppement des applications. Leur flux de travail g\u00e9r\u00e9 n’est cependant pas compatible avec le traitement des achats et des abonnements. Expo n’utilise pas de code natif dans ses m\u00e9thodes et ses composants (les deux sont en JS uniquement), ce qui est requis pour les kits de magasin. Il n’y a aucun moyen d’impl\u00e9menter les achats int\u00e9gr\u00e9s dans les boutiques mobiles avec JavaScript, vous devrez donc vous \u00ab\u00a0\u00e9jecter\u00a0\u00bb.<\/p>\n\n\n\n
Cr\u00e9ation d’un compte de d\u00e9veloppeur<\/h2>\n\n\n\n
Tout d\u2019abord, vous devrez configurer des comptes app store, ainsi que cr\u00e9er et configurer les achats et les abonnements pour iOS et Android. Cela ne devrait pas vous prendre plus de 20 minutes.<\/p>\n\n\n\n
Si vous n’avez toujours pas configur\u00e9 votre compte de d\u00e9veloppeur et vos produits dans App Store Connect et\/ou Google Play Console, consultez ces guides :<\/p>\n\n\n\n
- \n
- Pour iOS<\/a>: lisez le guide depuis le d\u00e9but et jusqu’\u00e0 la rubrique \u00ab\u00a0Obtenir la liste de SKProduct\u00a0\u00bb(Getting the list of SKProduct), car c’est l\u00e0 que nous commen\u00e7ons \u00e0 parler des impl\u00e9mentations natives. <\/li>\n\n\n\n
- Pour Android<\/a>: lisez le guide depuis le d\u00e9but et jusqu’\u00e0 la rubrique \u00ab\u00a0Obtenir une liste de produits dans une application\u00a0\u00bb.<\/li>\n<\/ul>\n\n\n\n
Configurer Adapty<\/h2>\n\n\n\n
Pour react-native-adapty, vous devrez d’abord configurer votre tableau de bord Adapty. Cela ne prendra pas beaucoup de temps, mais vous obtiendrez tous les avantages \u00e9num\u00e9r\u00e9s ci-dessus qu’Adapty a sur le codage en dur.<\/p>\n\n\n\n
\u00c0 la troisi\u00e8me \u00e9tape, vous serez invit\u00e9 \u00e0 configurer l’App Store et 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\nPour iOS, vous aurez besoin de :<\/p>\n\n\n\n
- \n
- Sp\u00e9cifiez l’ID du Bundle ;<\/li>\n\n\n\n
- Param\u00e9trez les notifications du serveur (server notifications) App Store ;<\/li>\n\n\n\n
- Sp\u00e9cifiez le secret partag\u00e9 (shared secret) App Store Connect. <\/li>\n<\/ul>\n\n\n\n
Ces champs sont obligatoires pour que les achats fonctionnent. <\/p>\n\n\n\n
Chaque champ dispose d’une indication \u00ab\u00a0D\u00e9couvrez comment\u00a0\u00bb(Read how) qui contient des guides pratiques \u00e9tape par \u00e9tape. Consultez-les si vous avez des questions.<\/p>\n\n\n\n
L’ID du Bundle est l’ID unique de votre application. Il doit correspondre \u00e0 celui que vous avez sp\u00e9cifi\u00e9 dans Xcode, dans Targets > [App Name] > General :<\/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\nPour Android, les champs obligatoires sont le nom du paquet et le fichier cl\u00e9 du compte de service. Tous ces domaines ont \u00e9galement leurs propres conseils de lecture. Le nom du paquet fait sous Android ce que l’ID du Bundle fait sous iOS. Il doit correspondre \u00e0 celui que vous avez sp\u00e9cifi\u00e9 dans votre code, qui se trouve dans le fichier \/android\/app\/build.gradle dans 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\nA la quatri\u00e8me \u00e9tape, vous serez invit\u00e9 \u00e0 connecter SDK Adapty \u00e0 votre application. Mais sautez cette \u00e9tape pour l’instant, nous y reviendrons un peu plus tard.<\/p>\n\n\n\n
Une fois que vous vous \u00eates inscrit, consultez l’onglet des param\u00e8tres et n’oubliez pas que c’est l\u00e0 que se trouve votre cl\u00e9 publique SDK. Vous aurez besoin de la cl\u00e9 plus tard.<\/p>\n\n\n\n
![\"\"](\"https:\/\/adapty.io\/wp-content\/uploads\/2023\/01\/61dd2e3d3fce0994fd3f0c38_0_z1xu4tx6yoskp5gysva4jz-ksmpt59lwmlpt8mol5fmyuqn1gygyvmqf52rgz5drhlvtp2gekrd0pwygz8pydmejdeskwggxp5-_f6kevd_ftdziotbnzpcv6bsqgojjk9unzt.jpg\")
<\/figure>\n\n\n\nAjout d’un abonnement<\/h3>\n\n\n\n
Adapty utilise des produits pour diff\u00e9rents abonnements. Votre abonnement aux photos de chats peut \u00eatre hebdomadaire, semestriel ou annuel. Chacune de ces options sera un produit Adapty distinct.<\/p>\n\n\n\n
Sp\u00e9cifions dans le tableau de bord que nous avons un seul produit. Pour ce faire, allez dans Products & A\/B Tests \u2192 Products et cliquez sur Create product. <\/p>\n\n\n\n
Ici, vous devrez sp\u00e9cifier le nom du produit, c’est-\u00e0-dire comment cet abonnement appara\u00eetra dans votre tableau de bord Adapty. <\/p>\n\n\n\n
Vous devrez \u00e9galement indiquer l’ID du produit App Store et l’ID du produit Play Store. Si vous le souhaitez, sp\u00e9cifiez \u00e9galement la p\u00e9riode et le nom pour l’analyse. Cliquez sur 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\nCr\u00e9ation d’un paywall<\/h2>\n\n\n\n
Vous devez maintenant concevoir un paywall, c’est-\u00e0-dire un \u00e9cran qui limite l’acc\u00e8s de l’utilisateur aux fonctions premium et lui propose une offre d’abonnement. Vous devrez ajouter le produit que vous avez cr\u00e9\u00e9 \u00e0 votre paywall. Pour ce faire, cliquez sur Create paywall dans la m\u00eame section (Products & A\/B Tests \u2192 Paywalls).<\/p>\n\n\n\n
- \n
- Choisissez un nom de paywall tel que vous et votre \u00e9quipe pourrez facilement d\u00e9duire, simplement en regardant le nom, de quel paywall il s’agit.<\/li>\n\n\n\n
- Vous utiliserez l’ID du paywall pour afficher ce paywall dans votre application. Pour notre exemple d’application, nous utiliserons \u00ab\u00a0cats_paywall\u00a0\u00bb.<\/li>\n\n\n\n
- Dans le menu d\u00e9roulant \u00a0\u00bb Product \u00ab\u00a0, s\u00e9lectionnez votre abonnement.<\/li>\n<\/ul>\n\n\n\n
Cliquez sur 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\nC’est tout pour la configuration. Maintenant, nous allons ajouter les d\u00e9pendances et \u00e9crire le code.<\/p>\n\n\n\n
Installation de react-native-adapty<\/h2>\n\n\n\n
1. Tout d’abord, ajoutez la d\u00e9pendance :<\/p>\n\n\n\n
- Pour Android<\/a>: lisez le guide depuis le d\u00e9but et jusqu’\u00e0 la rubrique \u00ab\u00a0Obtenir une liste de produits dans une application\u00a0\u00bb.<\/li>\n<\/ul>\n\n\n\n
- Pour iOS<\/a>: lisez le guide depuis le d\u00e9but et jusqu’\u00e0 la rubrique \u00ab\u00a0Obtenir la liste de SKProduct\u00a0\u00bb(Getting the list of SKProduct), car c’est l\u00e0 que nous commen\u00e7ons \u00e0 parler des impl\u00e9mentations natives. <\/li>\n\n\n\n