fbpx

Tag: App Center

11
Lis

Push notyfikacje App Center

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, ale stanowią również 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ącą wiele ciekawych modułów do naszych aplikacji. Wchodzimy na poniższą stronę https://console.firebase.google.com i tworzymy nowy projekt.

Tworzenie nowego projektu Firebase.



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

Pobieranie pliku google-services.json.



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.

Sekcja Dane logowania.



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

Dodawanie klucza serwera.



Dostępna jest teraz opcja wysyłania notyfikacji.

Okno dialogowe wysyłania push 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.

Dodawanie nowej grupy odbiorców aplikacji.



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. 

10
Lis

Narzędzia diagnostyczne i analityczne App Center


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
 

Inną 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.

Strona modułu analitycznego projektu aplikacji w App Center.



Informacje które są tutaj dostępne 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żywając 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łanie metody która wywoła konkretne wydarzenie.

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

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

Statystyki wydarzenia wywołanego wewnątrz aplikacji.


Funkcja znajduje zastosowanie, gdy chcemy sprawdzić, które moduły naszej aplikacji są najczęściej używane przez użytkowników, więc 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.

9
Lis

Integracja aplikacji App Center z Bitbucket


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

Wybór serwisu naszego repozytorium.



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.

Okno dialogowe tworzenia nowego repozytorium Bitbucket.



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 


Strona startowa repozytorium Bitbucket.



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.

Okno dialogowe ustawień projektu aplikacji w usłudze 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 dostaję powiadomienie o nowej wersji aplikacji.

Automatically increment version code – system dba 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 ew. crashów i błędów nie wykrytych 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.

Okno dialogowe ustawień z sekcją 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 wybranych branchu naszego repozytorium. Upewnijmy się, że w ustawieniach aplikacji App Center funkcja Build frequency jest zaznaczona na Build this branch on every push.


Wartości opcji Build frequency.



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 oraz 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ć.

Okno buildowania aplikacji w usłudze App Center.



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 oraz zamiast manualnie uploadować aplikację wybieramy opcję Distribute an Existing Build oraz wybieramy branch na którym wcześniej została skompilowana aplikacja.

Wybór szczegółów nowej wersji.


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.

Sekcja użytkowników biorących udział w projekcie.



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