Tworzenie aplikacji mobilnych

Push notyfikacje są funkcją aplikacji mobilnych, która w obecnych czasach znajduje się w większości aplikacji mobilnych. Mogą być wykorzystywane zarówno do informowania użytkownika o ważnych dla niego czynnościach czy wydarzeniach, jak również mogą stanowić istotną pomoc przy promowaniu i reklamowaniu naszych usług czy produktów. App Center jako kompleksowy system wspomagający tworzenie aplikacji mobilnych posiada moduł umożliwiający wysyłanie push notyfikacji. Aby z niego skorzystać, potrzebujemy projektu React Native z dodaną i skonfigurowaną biblioteką App Center (link).

Gdy mamy już taki projekt, zajmijmy się instalacją modułu, wykonując poniższe polecenie w katalogu głównym projektu:

npm install appcenter-push –save 

Następnie na końcu pliku android/app/build.gradle dodajemy:

apply plugin: 'com.google.gms.google-services' 

Oraz w pliku android/build.gradle:

buildscript { 
  repositories { 
     // Add google line if missing before jcenter 
     google() 
     jcenter() 
  } 
 
  dependencies { 
    // Add this line 
    classpath 'com.google.gms:google-services:4.0.1' 
  } 
} 
 
allprojects { 
 repositories { 
    // Add google line if missing before jcenter 
    google() 
    jcenter() 
  } 
} 

Konfiguracja Firebase

Kolejnym krokiem będzie stworzenie projektu w usłudze Firebase. Jest to system Google umożliwiający komunikację z aplikacją oraz dostarczający wiele ciekawych modułów do naszych aplikacji. Wchodzimy na poniższą stronę https://console.firebase.google.com i tworzymy nowy projekt.

Następnie tworzymy nową aplikację Android i pobieramy plik google-services.json, który umieszczamy w katalogu android/app. 

Teraz pobierzemy klucz API usługi Firebase. W tym celu wchodzimy do konsoli Firebase > Ustawienia projektu > Komunikacja w Chmurze. Klucz serwera (API) jest dostępny w sekcji Dane logowania dla projektu.

Skopiowany klucz wklejamy w odpowiednim polu w zakładce Push Notifications w projekcie App Center.

Dostępna jest teraz opcja wysyłania notyfikacji.

Po wypełnieniu wymaganych pól możemy wysłać notyfikację na urządzenia.

Grupy odbiorców aplikacji 

App Center umożliwia również tworzenie tzw. Audiences, czyli grup, do których ma zostać skierowana aplikacja na podstawie odpowiednich reguł jak: kraj, wersja aplikacji, model urządzenia, itp.

Podsumowując, App Center dostarcza całkiem dobry moduł umożliwiający wysyłanie push notyfikacji. Nie posiada jednak funkcji wysyłania tzw. Rich notifications, czyli powiadomień zawierających zdjęcia lub filmy – w takim przypadku warto użyć tutaj biblioteki OneSignal. Jednak w mało wymagających przypadkach Push Notifications z użyciem App Center jest wystarczające. 

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.