Tag: React Native

Moduł diagnostyczny

Podczas konserwacji aplikacji ważnym zadaniem jest odpowiednie reagowanie na pojawiające się błędy i crashe aplikacji. Czasami ponowne wykonanie błędu jest bardzo trudne do odtworzenia i dlatego potrzebujemy o nim niezbędnych informacji. Z pomocą przychodzi tu moduł Diagnostics systemu App Center. Pozwala na wyświetlanie błędów występujących podczas pracy aplikacji i ich diagnozowanie. Aby użyć funkcji potrzebujemy projektu React Native z zainstalowaną biblioteką App Center (instrukcja dostępna tutaj). W takim projekcie w katalogu głównym wykonujemy polecenie: 

npm install appcenter-crashes --save-exact 

Po zainstalowaniu modułu, w przypadku crashu aplikacji, mamy dostęp do informacji o błędzie z użyciem konsoli App Center.

Symulacja błędu aplikacji

Zasymulujmy teraz crash aplikacji. W pliku App.js naszej aplikacji zaimportujmy bibliotekę:

import Crashes from 'appcenter-crashes'; 

Następnie w metodzie render() lub componentDidMount() dodajmy wywołanie metody:

Crashes.generateTestCrash();

W zakładce Diagnostics aplikacji App Center pojawią się szczegóły o błędzie. Oczywiście sam moduł jest znacznie bardziej rozbudowany, np. umożliwia przeglądanie informacji o błędach wewnątrz aplikacji lub unieszkodliwianie ich skutków.

Moduł analityczny
 

Innym ciekawym modułem jest moduł odpowiadający za statystyki związane z naszą aplikacją. Aby do niego przejść, wybieramy zakładkę Analytics projektu App Center.

Dostępne tu informacje obejmują liczbę aktywnych użytkowników, szczegóły ich urządzeń, czy ich języków i krajów. Dodatkową opcją są również wydarzenia wewnątrz aplikacji. Aby z niej skorzystać, musimy w projekcie naszej aplikacji React Native zainstalować bibliotekę. Używamy do tego poniższego polecenia:

npm install appcenter-analytics --save-exact

Następnie aby przetestować działanie w aplikacji w pliku App.js naszego projektu, zaimportujmy bibliotekę: 

import Analytics from 'appcenter-analytics'; 

I następnie w dowolnym miejscu (np. po włączeniu aplikacji) wywołujemy metodę, która wywoła konkretne wydarzenie.

Analytics.trackEvent("Render App.js");

W zakładce Events pojawią się stosowne statystyki.

Funkcja znajduje zastosowanie wtedy, gdy chcemy sprawdzić, które moduły naszej aplikacji są najczęściej używane przez użytkowników. A co za tym idzie – na rozwoju czego powinniśmy się skupić.

Podsumowując, moduły diagnostyczne i analityczne często są pomijane przy tworzeniu aplikacji mobilnych, jednak ich wykorzystanie znacząco usprawnia pracę deweloperom i informuje właściciela aplikacji (zwłaszcza tych komercyjnych) o ich rentowności i działaniach użytkowników.

App Center dostarcza kilka bardzo ciekawych funkcjonalności. Jedną z nich jest połączenie z repozytorium przy użyciu najpopularniejszych serwisów.

Na przykładzie pokażę sposób połączenia aplikacji React Native używającej App Center z repozytorium BitBucket.

Pierwszym krokiem jest oczywiście dodanie potrzebnych bibliotek i utworzenie projektu (React Native + App Center), o czym można przeczytać tutaj. Wymaganą czynnością będzie też utworzenie konta Bitbucket na stronie https://bitbucket.org i następnie stworzenie nowego repozytorium.

Po utworzeniu przechodzimy do projektu aplikacji React Native i w katalogu głównym wykonujemy komendy:

git init
git remote add origin nazwa_repozytorium_dostępna_na_stronie_głównej_repozytorium

Następnie:

git add –A 
git commit –m 'init' 
git push -u origin master 

Po wysłaniu projektu na repozytorium dodajemy je w usłudze App Center, wybierając z listy dostępnych repozytoriów.

Konfiguracja funkcji aplikacji

Przechodzimy do ustawień projektu w App Center.

Opis wybranych funkcji

Build Frequency – aplikacja może być kompilowana na serwerach App Center po każdym commicie lub manualnie (na żądanie). Bardzo przydatna funkcja, w przypadku zespołu zawierającego kilku testerów – po każdym commicie na wybrany branch tester dostaje powiadomienie o nowej wersji aplikacji.

Automatically increment version code – system dba o to, by nowa wersja aplikacji miała inną wersję; ściąga z developerów obowiązek pamiętania o zmianie numeru wersji.

Run unit test – automatycznie podczas procesu kompilacji uruchamia testy jednostkowe – w przypadku gdy aplikacja ich nie przejdzie, wyświetlany jest komunikat o niepowodzeniu.

Sign builds – App Center, mając dostęp do pliku keystore, jest w stanie podpisywać cyfrowo aplikację. 

Test on a real device – po udanej kompilacji aplikacja zostaje uruchomiona na fizycznym urządzeniu w chmurze, dzięki czemu zostaje sprawdzona pod kątem ewentualnych crashów i błędów niewykrytych w trakcie procesu kompilacji.

Distribute builds – aplikacja może być aktualizowana w sklepach Google Play/App Store/Intune w sposób automatyczny.

Podpisywanie pakietów

Jedną z najciekawszych wyżej wymienionych funkcji jest możliwość automatycznego podpisywania aplikacji. Aby to zrobić, potrzebujemy wygenerować nowy plik keystore z użyciem przykładowej komendy:

keytool -genkeypair -v -keystore my-upload-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

Podczas procesu tworzenia wymagane będzie podanie informacji i haseł. Zalecane jest użycie odpowiednio silnych haseł.

Po utworzeniu klucza, przechodzimy do ustawień projektu w App Center i wybieramy On w sekcji Sign builds.

Po dodaniu niezbędnych haseł i wcześniej wygenerowanego pliku wybieramy Save. Od teraz nasza aplikacja będzie automatycznie podpisywana cyfrowo.

Kompilacja po pushu 

Istotną funkcją jest tutaj również buildowanie aplikacji po dodaniu jakichkolwiek zmian na wybranym branchu naszego repozytorium. Upewnijmy się, że w ustawieniach aplikacji App Center funkcja Build frequency jest zaznaczona na Build this branch on every push.

Sprawmy teraz, że aplikacja wykona build na zewnętrznym serwerze. Dodajmy dowolną zmianę w pliku App.js, znajdującym się w katalogu głównym projektu React Native, a następnie wyślijmy zmianę na repozytorium.

App Center automatycznie zacznie proces kompilacji na zewnętrznym serwerze. W trakcie trwania tego procesu muszą zostać pobrane i zainstalowane niezbędne pakiety i biblioteki, dlatego może to chwilę potrwać.

Dystrybucja aplikacji testerom 

Wygenerowany pakiet aplikacji można w łatwy sposób udostępnić innym. W tym celu wybieramy opcję Distribute w menu głównym aplikacji App Center. Następnie wybieramy New Release. Zamiast manualnego uploadowania aplikacji zaznaczamy opcję Distribute an Existing Build oraz branch, na którym wcześniej została skompilowana aplikacja.

W kolejnych krokach wybieramy wersję pakietu aplikacji oraz do kogo skierowane jest udostępnienie. Testerów możemy dodać w zakładce Settings i Collabolators.

Po tych czynnościach testerzy otrzymają powiadomienie o nowej wersji aplikacji.

Visual Studio App Center to narzędzie stworzone przez Microsoft udostępniające narzędzia do zarządzania całym cyklem życia aplikacji, w tym automatycznym kompilowaniem aplikacji, testowaniem na fizycznych urządzeniach w chmurze czy udostępnianiem aplikacji testerom i użytkownikom z użyciem sklepów. App Center posiada wsparcie dla wielu różnych technologii, w tym dla React Native.

Wykorzystując App Center w procesie tworzenia aplikacji, zapewniamy skrócony czas poświęcony na kompilację czy dystrybuowanie aplikacji, a ze względu na moduły analityczne i diagnostyczne mamy możliwość szybszego zdiagnozowania i pozbycia się błędów.

Połączenie App Center z aplikacją React Native

Pierwszym krokiem będzie stworzenie nowego projektu React Native, używając polecenia:

react-native init akanza_appcenter_sample 

Następnie zajmiemy się stworzeniem odpowiedniej instancji aplikacji w systemie App Center.

Po wejściu nas stronę https://appcenter.ms tworzymy nowe konto. 

Następnie tworzymy nową aplikację, wybierając platformę React Native i system (Android lub iOS). 

Konfiguracja biblioteki po stronie aplikacji mobilnej

Kolejnym krokiem będzie zainstalowanie odpowiednich bibliotek i skonfigurowanie biblioteki App Center po stronie aplikacji mobilnej.

Po wejściu do folderu aplikacji w terminalu wpisujemy poniższą komendę: 

npm install appcenter appcenter-analytics appcenter-crashes --save-exact

W katalogu android/app/src/main/assets/ tworzymy nowy plik o nazwie appcenter-config.json z poniższą zawartością:

{ 
    "app_secret": "kod pobrany ze strony projektu"
} 

Kod app_secret możemy pobrać ze strony głównej projektu aplikacji App Center

W pliku strings.xml znajdującym się w katalogu res/values dodajemy poniższe wartości:

<string name="appCenterCrashes_whenToSendCrashes" moduleConfig="true" translatable="false">DO_NOT_ASK_JAVASCRIPT</string> 

<string name="appCenterAnalytics_whenToEnableAnalytics" moduleConfig="true" translatable="false">ALWAYS_SEND</string> 

Następnie uruchamiamy aplikację, używając polecenia:

react-native run-android

Po tych krokach do naszej aplikacji dodamy bibliotekę App Center i umożliwimy korzystanie z jej modułów.