React Native: AsyncStorage basics

0.62.2+

0:00Tak więc na poprzedniej lekcji zakończyliśmy na tym że będziemy korzystać z narzędzia async storage no

0:04i właśnie zamierzamy z niego skorzystać więc zainstaluj sobie paczkę

0:08z tym narzędziem okej

0:14mamy to to nie jest duża paczka zresztą użycie samego async storage też jest bardzo

0:18proste i szybko to załapiecie importujemy sobie nasz asyncstorage react native

0:27community async storage i

0:33co my tutaj mamy okej typowy błąd

0:37zacząłem korzystać z biblioteki natomiast najprawdopodobniej ona wymaga jakichś

0:41instalacji natywnych sprawdźmy zgadza

0:47się no zresztą to ma sens ponieważ jeśli chcemy korzystać z storage'u to jest typowo

0:51natywny moduł więc musimy to dozainstalować na

0:56wszelki wypadek wystartujemy sobie jeszcze raz nasz projekt no

1:03dobra zainstalowała się nasza paczka więc teraz możemy jej użyć użycie

1:07jest banalnie proste jak to wygląda najpierw zastanówmy się co

1:11chcielibyśmy zapisywać no i tutaj mi się rzucają dwie rzeczy w oczy po pierwsze nasz level i

1:16może od tego zaczniemy bo to jest chyba najprostsza rzecz albo

1:20nie zaczniemy sobie naszego opisu czyli pyk chcę żeby to było zapisane bo zauważcie

1:24że jak wchodzimy za każdym razem na nasz profil no to

1:29jest jakiś something które po prostu jest tutaj wartością domyślną jak

1:35to działa musimy znaleźć miejsce w tym zapisujemy nasz opis to

1:39jest tutaj tutaj wykorzystamy sobie nasz async storage async

1:43storage a tak naprawdę ma trzy metody które nas interesują ma

1:47set item get item i remove item

1:52zdaje się więc wykorzystamy sobie metodę set item baza

1:57async storage'owa jest taka w formie powiedzmy jsonów

2:01czyli klucz wartość czyli zawsze musimy mieć jakiś klucz który będziemy na

2:05podstawie którego będziemy wiedzieć identyfikować nasze dane czyli w tym wypadku to będzie na przykład

2:09nasz level i teraz musimy podać przepraszam nie level

2:14tylko description no i teraz musimy podać naszą wartość

2:18czyli to będzie current text i to

2:22nam zwróci promisa który

2:27możemy zobaczyć czy udało się czy się nie udało czyli na przykład description

2:33saved albo jeśli

2:37mamy jakiś błąd description

2:46save error okej

2:51nieistotne po prostu nie robimy tego błedu albo dobra możemy

2:55ten błąd dodać zbudujmy sobie

2:59jeszcze raz description

3:05new description set

3:11description saved tak czyli udało nam się to zapisać w praktyce rzadko

3:18się zdarza żeby się to nie udało zapisać musiałyby być jakieś problemy nie wiem z uprawnieniami

3:22z pamięcią więc raczej się tym nie musimy przejmować aczkolwiek

3:26dobre praktyki mówią żeby jednak obsługiwać takie scenariusze zwłaszcza w przypadku danych

3:31które są istotne czyli jeśli naprawdę zależało by mi na

3:35tym żeby upewnić się że te dane się zapisały jesli nie to poinformować użytkownika no to oczywiście

3:39korzystajmy z tych metod natomiast my w naszym prostym przypadku zakładamy że to

3:43się udało jak się nie udało to nic się nie stanie no dobra czyli udało

3:47nam się zapisać nasze description to teraz musimy to odczytać a gdzie to zrobić zrobimy

3:52to sobie po prostu w momencie montowania naszego widoku i

3:57konstrukcja jest taka sama tak samo banalnie prosta robimy sobie get item podajemy

4:02nasz klucz żeby tutaj się nie walnąć to sobie po prostu skopiujemy

4:06i tak samo jak w przypadku seta dostajemy tutaj

4:10promisa kótry nam zwraca value i możemy

4:17dostać też jakiś błąd description

4:22read error err a

4:28tutaj możemy napisać console.log description i

4:35po prostu val a jeszcze możemy sobie zrobić taki warunek ponieważ możemy dostać na przykład

4:39obiekt który jest undefined albo nullem więc sprawdźmy sobie

4:43to okej

4:50tutaj na przykład napiszemy description undefined

4:54okej no i sprawdźmy to

4:59i mamy description a nie description czyli to jest to description które zapisaliśmy wcześniej

5:04sprawdźmy sobie to jeszcze raz ustawmy

5:10tutaj na przykład coś w stylu hi this is

5:14is something no tak tutaj mi słownik podpowiada i walczy okej coś

5:18tam zapisaliśmy ustawiło się teraz przeładujmy naszą apkę

5:23no i super to się udało zapisać no

5:27to raczej nam małe szanse że się nie zapisze jeśli nie ma tej wartości po

5:31prostu nic z nim nie rób a w tym miejscu po prostu ustawimy nasz description

5:35na val okej no i

5:40teoretycznie powtarzam teoretycznie to powinno działać czyli

5:45ustawmy nasz description na very nice description

5:51no tak słownik okej very nice description

5:55super odświeżmy no i mamy to tak

5:59tutaj coś nie działa na androidzie tak

6:04jest pewnie trzeba by yarn android zbudować

6:09jeszcze raz naszą apkę okej na androidzie nie musimy doinstalowywać

6:13ręcznie pakietów natomiast dalej jeśli korzystamy z modów natywnych to

6:17raczej musimy naszą aplikację przebudować i to nie mam na myśli naszego serwera

6:22js-owego tylko już aplikację natywną jako taką okej

6:28dostałem komunikat że nie dało się odpalić aplikacji a to żaden problem

6:32sobie ją odpalimy ręcznie wchodzimy sobie na profil

6:39robimy hello zapisz

6:43reload no i

6:50super widzieliśmy że to się nie pojawia od razu naprawdę

6:55nasze pobranie danych jest asynchroniczne ale je tak pobiera się jest

6:59okej no i teraz to co chcielibyśmy zrobić tutaj a to

7:03zrobić to samo dla naszego levelu czyli w momencie kiedy ustawiamy

7:08nasz level to go zapisać level i tak

7:13naprawdę dokładnie tak samo level

7:18set level value okej

7:23zbudujmy sobie to na nowo i

7:30ustawmy no właśnie dostaliśmy błąd że ns

7:34number cannot be converted ns string te ns to są

7:38to znaczy to jest komunikat z natywnej strony ponieważ w

7:42tak tak jakby tak wyglądają obiekty które trzymają

7:46liczby albo stringi czyli są poprzedzone ns

7:50a taka i to wynika z tego że

7:54błąd wynika z tego że nie możemy zapisywać czegoś innego znaczy async storage wymaga od nas

7:58zapisywania zawsze stringów więc jeśli ja tu przekazałem level no to on tego

8:03nie jest ani zapisać więc co możemy zrobić po prostu opakować nasz level oj przepraszam opakować

8:08nasz level w stringa a

8:12w tym miejscu a moglibyśmy uzyć takiej

8:16metody jak parse int bo

8:23to będzie liczba całkowita i

8:27nas interesuje liczba dziesiętna okej budujemy

8:31to jeszcze raz upgrade

8:35upgrade poziom 11 zapisz no i

8:42super a oczywiście problem z tym że my tu ustawiamy level a

8:49tak naprawdę ustawiamy level plus 1 i oczywiście ten level nie będzie

8:53ustawiony synchronicznie to się dzieje asynchronicznie więc żeby to było okej to

8:57musimy zrobić tak jest poziom

9:0210 pyk pyk pyk poziom 17 okej

9:07super no i zobaczmyczy to tak samo działa fajnie na androidzie 1 2 3 4 5 jesteśmy na przykład na 9

9:13no i super

9:17mamy więc takie podstawowe zapisywanie mamy za sobą a w następnej lekcji spróbujemy

9:22zapisać naszą listę dzięki