- \n
- W przeciwie\u0144stwie do ich zapewnia walidacj\u0119 zakupu na serwerze (purchase validation).<\/li>\n\n\n\n
- Obs\u0142uguje wszystkie funkcje ostatnio zaimplementowane przez sklepy z aplikacjami, od ofert promocyjnych<\/a> (promo offers) a\u017c po funkcje p\u0142atno\u015bci z g\u00f3ry<\/a>. Szybko zaczyna te\u017c obs\u0142ugiwa\u0107 wszelkie nowo pojawiaj\u0105ce si\u0119 funkcje.<\/li>\n\n\n\n
- Kod staje si\u0119 bardziej przejrzysty i prosty.<\/li>\n\n\n\n
- Mo\u017cesz modyfikowa\u0107 swoj\u0105 ofert\u0119 produktow\u0105 i dodawa\u0107 lub usuwa\u0107 nowe oferty bez konieczno\u015bci przechodzenia przez pe\u0142ny cykl wydawniczy. Nie ma potrzeby wydawania wersji beta i oczekiwania na zatwierdzenie.<\/li>\n<\/ul>\n\n\n\n
Ale Adapty SDK to o wiele wi\u0119cej. Otrzymujesz wbudowane narz\u0119dzia analityczne dla wszystkich kluczowych wska\u017anik\u00f3w, analizy kohortowej (cohort analysis), walidacji zakup\u00f3w na serwerze (purchase validation), test\u00f3w AB dla paywall (AB testing), kampanii promocyjnych z elastyczn\u0105 segmentacj\u0105, integracji narz\u0119dzi analitycznych innych firm i wiele wi\u0119cej.<\/p>\n\n\n\n
W tym artykule<\/h2>\n\n\n\n
Na razie porozmawiajmy o konfigurowaniu zakup\u00f3w w aplikacji w aplikacjach natywnych React. O czym dzi\u015b porozmawiamy:<\/p>\n\n\n\n
- \n
- Dlaczego Expo nie b\u0119dzie dzia\u0142a\u0107 w przypadku zakup\u00f3w wewn\u0105trz aplikacji w aplikacjach React Native.<\/li>\n\n\n\n
- Tworzenie konta dewelopera.<\/li>\n\n\n\n
- Konfigurowanie Adapty:
Konfigurowanie App Store
Konfigurowanie Play Store<\/li>\n\n\n\n - Dodawanie subskrypcji.<\/li>\n\n\n\n
- Tworzenie paywalla.<\/li>\n\n\n\n
- Instalacja react-native-adapty.<\/li>\n\n\n\n
- Przyk\u0142adowa aplikacja i wynik. <\/li>\n<\/ol>\n\n\n\n
W tym przewodniku postaramy si\u0119 stworzy\u0107 aplikacj\u0119, kt\u00f3ra wy\u015bwietli zdj\u0119cia kota subskrybowanym u\u017cytkownikom i zaproponuje wszystkim innym ofert\u0119 subskrypcji. <\/p>\n\n\n\n\n\n
Dlaczego Expo nie b\u0119dzie dzia\u0142a\u0107 w przypadku zakup\u00f3w wewn\u0105trz aplikacji w aplikacjach React Native<\/h3>\n\n\n\n
Kr\u00f3tko m\u00f3wi\u0105c: <\/em>Expo „zarz\u0105dzane<\/em><\/a>” nie obs\u0142uguje natywnych metod przetwarzania zakup\u00f3w w sklepach z aplikacjami (znanych r\u00f3wnie\u017c jako zestawy sklepowe). Musisz albo trzyma\u0107 si\u0119 czystego RN, albo u\u017cywa\u0107 prostego przep\u0142ywu Expo.<\/em><\/p>\n\n\n\n
Od razu musz\u0119 rozczarowa\u0107 tych, kt\u00f3rzy my\u015bleli o korzystaniu z Expo: to nie zadzia\u0142a. Expo to framework React Native, kt\u00f3ry znacznie u\u0142atwia tworzenie aplikacji. Ich zarz\u0105dzany przep\u0142yw pracy nie jest jednak zgodny z przetwarzaniem zakup\u00f3w\/subskrypcji. Expo nie u\u017cywa \u017cadnego natywnego kodu w swoich metodach i komponentach (s\u0105 bazowane na JS), co jest wymagane dla zestaw\u00f3w sklepowych. Nie ma sposobu na wdro\u017cenie zakup\u00f3w w aplikacji w sklepach mobilnych z JavaScript, wi\u0119c b\u0119dziesz musia\u0142 „wysuwa\u0107”.<\/p>\n\n\n\n
Tworzenie konta dewelopera<\/h2>\n\n\n\n
Najpierw musisz skonfigurowa\u0107 konta w app store, a tak\u017ce utworzy\u0107 i skonfigurowa\u0107 zakupy oraz subskrypcje dla system\u00f3w iOS i Android. To nie powinno zaj\u0105\u0107 wi\u0119cej ni\u017c 20 minut.<\/p>\n\n\n\n
Je\u015bli nadal nie skonfigurowa\u0142e\u015b konta dewelopera i produkt\u00f3w w App Store Connect i\/lub konsoli Google Play, zapoznaj si\u0119 z tymi poradnikami:<\/p>\n\n\n\n
- \n
- Dla iOS<\/a>: przeczytaj poradnik od pocz\u0105tku, a\u017c do nag\u0142\u00f3wka „Uzyskiwanie listy SKProduct”, poniewa\u017c tam zaczynamy omawia\u0107 natywne implementacje. <\/li>\n\n\n\n
- Dla Androida<\/a>: przeczytaj poradnik od pocz\u0105tku do nag\u0142\u00f3wka „Pobieranie listy produkt\u00f3w w aplikacji”.<\/li>\n<\/ul>\n\n\n\n
Konfigurowanie Adapty<\/h2>\n\n\n\n
W przypadku react-native-adapty musisz najpierw skonfigurowa\u0107 pulpit nawigacyjny Adapty. To nie zajmie du\u017co czasu, a zapewni Ci wszystkie zalety wymienione powy\u017cej, kt\u00f3re posiada Adapty w por\u00f3wnaniu do twardego kodowania.<\/p>\n\n\n\n
W trzecim kroku pojawi si\u0119 przypomnienie o konfiguracji App Store i 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\nW przypadku systemu iOS musisz:<\/p>\n\n\n\n
- \n
- Okre\u015bli\u0107 identyfikator pakietu (Bundle ID);<\/li>\n\n\n\n
- Skonfigurowa\u0107 powiadomienia serwera App Store (App Store Server Notifications);<\/li>\n\n\n\n
- Okre\u015bli\u0107 shared secret App Store Connect. <\/li>\n<\/ul>\n\n\n\n
Te pola s\u0105 wymagane, aby zakupy dzia\u0142a\u0142y. <\/p>\n\n\n\n
Ka\u017cde pole zawiera podpowiedzi „Przeczytaj, jak”, kt\u00f3re zawieraj\u0105 instrukcje krok po kroku. Sprawd\u017a je, je\u015bli masz jakie\u015b pytania.<\/p>\n\n\n\n
Bundle ID to unikalny identyfikator Twojej aplikacji. Musi pasowa\u0107 do tego, kt\u00f3ry poda\u0142e\u015b w Xcode, w 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\nW przypadku systemu Android wymagane pola to nazwa pakietu (Package Name) i plik klucza konta us\u0142ugi (Service Account Key File). Wszystkie te pola maj\u0105 swoje w\u0142asne wskaz\u00f3wki, kt\u00f3re r\u00f3wnie\u017c warto przeczyta\u0107. Nazwa pakietu w systemie Android dzia\u0142a tak, jak identyfikator pakietu w systemie iOS. Musi pasowa\u0107 do tego podanego w kodzie, kt\u00f3ry mo\u017cna znale\u017a\u0107 w pliku \/android\/app\/build.gradle w 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\nW czwartym kroku pojawi si\u0119 \u017c\u0105danie pod\u0142\u0105czenia zestawu Adapty SDK do aplikacji. Pomi\u0144 na razie ten krok \u2014 wr\u00f3cimy do tego nieco p\u00f3\u017aniej.<\/p>\n\n\n\n
Po zarejestrowaniu si\u0119 sprawd\u017a zak\u0142adk\u0119 ustawienia i pami\u0119taj, \u017ce tutaj mo\u017cna znale\u017a\u0107 publiczny klucz SDK. B\u0119dziesz potrzebowa\u0107 tego klucza p\u00f3\u017aniej.<\/p>\n\n\n\n
![\"\"](\"https:\/\/adapty.io\/wp-content\/uploads\/2023\/01\/61dd2e3d3fce0994fd3f0c38_0_z1xu4tx6yoskp5gysva4jz-ksmpt59lwmlpt8mol5fmyuqn1gygyvmqf52rgz5drhlvtp2gekrd0pwygz8pydmejdeskwggxp5-_f6kevd_ftdziotbnzpcv6bsqgojjk9unzt.jpg\")
<\/figure>\n\n\n\nDodawanie subskrypcji<\/h3>\n\n\n\n
Adapty wykorzystuje produkty dla r\u00f3\u017cnych subskrypcji. Twoja subskrypcja zdj\u0119\u0107 kot\u00f3w mo\u017ce by\u0107 tygodniowa, p\u00f3\u0142roczna lub roczna. Ka\u017cda z tych opcji b\u0119dzie osobnym produktem Adapty.<\/p>\n\n\n\n
Okre\u015blmy na pulpicie nawigacyjnym, \u017ce mamy jeden produkt. Aby to zrobi\u0107, przejd\u017a do Products & A\/B Tests \u2192 Products i kliknij Create product. <\/p>\n\n\n\n
W tym miejscu musisz okre\u015bli\u0107 nazw\u0119 produktu, czyli spos\u00f3b, w jaki ta subskrypcja b\u0119dzie wygl\u0105da\u0107 na pulpicie nawigacyjnym Adapty. <\/p>\n\n\n\n
Musisz r\u00f3wnie\u017c okre\u015bli\u0107 App Store Product ID i Play Store Product ID. Je\u015bli chcesz, okre\u015bl okres i nazw\u0119 dla analityki. Zapisz zmiany (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\nTworzenie paywalla<\/h2>\n\n\n\n
Teraz musisz zaprojektowa\u0107 paywall, kt\u00f3ry jest ekranem, ograniczaj\u0105cym dost\u0119p U\u017cytkownika do funkcji premium i wy\u015bwietlaj\u0105cym mu ofert\u0119 subskrypcji. Musisz doda\u0107 utworzony produkt do paywalla. Aby to zrobi\u0107, kliknij „Create paywall” w tej samej sekcji (Products & A\/B Tests \u2192 Paywalls).<\/p>\n\n\n\n
- \n
- Wybierz tak\u0105 nazw\u0119 Paywall, kt\u00f3r\u0105 ty i tw\u00f3j zesp\u00f3\u0142 b\u0119dziecie mogli \u0142atwo skojarzy\u0107 z produktem na podstawie samej nazwy paywalla.<\/li>\n\n\n\n
- Identyfikator paywalla (Paywall ID) b\u0119dzie u\u017cywany do wy\u015bwietlania tego paywalla w aplikacji. Dla naszej przyk\u0142adowej aplikacji u\u017cyjemy „cats_paywall.\u201d<\/li>\n\n\n\n
- Z listy rozwijanej Product wybierz subskrypcj\u0119.<\/li>\n<\/ul>\n\n\n\n
Kliknij zapisz i opublikuj.<\/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\nTo wszystko, je\u015bli chodzi o konfiguracj\u0119. Teraz b\u0119dziemy dodawa\u0107 zale\u017cno\u015bci i pisa\u0107 kod.<\/p>\n\n\n\n
Instalacja react-native-adapty<\/h2>\n\n\n\n
1. Najpierw dodaj zale\u017cno\u015b\u0107:<\/p>\n\n\n\n
- Dla Androida<\/a>: przeczytaj poradnik od pocz\u0105tku do nag\u0142\u00f3wka „Pobieranie listy produkt\u00f3w w aplikacji”.<\/li>\n<\/ul>\n\n\n\n
- Dla iOS<\/a>: przeczytaj poradnik od pocz\u0105tku, a\u017c do nag\u0142\u00f3wka „Uzyskiwanie listy SKProduct”, poniewa\u017c tam zaczynamy omawia\u0107 natywne implementacje. <\/li>\n\n\n\n