Technologia

14
Lut

Narzędzie diagnostyczne React Native Doctor

 

React-native doctor to nowa funkcja diagnostyczna aplikacji React Native, która skanuje i automatycznie naprawia błędy związane ze środowiskiem deweloperskim.  

 

Działanie

Polecenie doctor wspiera obecnie większość oprogramowania i bibliotek, na których polega React Native, takich jak Android SDK, Xcode czy CocoaPods. Po uruchomieniu polecenia, narzędzie zeskanuje naszą aplikację w poszukiwaniu błędów związanych ze środowiskiem deweloperskim i automatycznie je naprawi. W przypadku, gdy nie będzie w stanie tego zrobić, wyświetli stosowną informację w konsoli, wraz z krokami które należy podjąć oraz poradami (linkami), gdzie możemy szukać informacji o problemie.  

 

Źródło: React Native Blog

 

 

Użycie

Aby wypróbować narzędzie, musimy posiadać aplikację React Native w wersji min. 0.62, istnieje jednak możliwość doinstalowania go do starszych wersji framework’a, używając polecenia:

npx @react-native-community/cli doctor  

 

Wspierane funkcje

Doctor obecnie wspiera diagnostykę poniższych narzędzi i funkcji:

 

  • Node.js (>= 8.3)
  • yarn (>= 1.10)
  • npm (>= 4)
  • Watchman (>= 4), używany do obserwowania zmian w systemie plików.

 

Dodatkowo, jeśli chodzi o środowisko deweloperskie Android:

  • Android SDK (>= 26), środowisko uruchomieniowe Androida.
  • Android NDK (>= 19), natywny zestaw narzędzi programistycznych dla Androida.
  • ANDROID_HOME, zmienna środowiskowa wymagana przez konfigurację zestawu Android SDK.

 

Oraz środowisko iOS:

  • Xcode (>= 10), IDE do tworzenia aplikacji iOS.
  • CocoaPods, narzędzie do zarządzania zależnościami dla aplikacji iOS.
  • ios-deploy (opcjonalne), biblioteka używana do instalacji aplikacji na fizycznych urządzeniach z iOS przez CLI.

 

Źródło: React Native Blog

30
Gru

Wtyczki Android Studio

Android Studio to narzędzie umożliwiające w bardzo produktywny sposób tworzenie aplikacji dla systemu Android. Posiada solidne narzędzia do edycji kodu, debugowania i profilowania wydajności. Inną przydatną funkcjonalnością jest tworzenie interfejsu użytkownika w sposób graficzny z użyciem metody drag&drop. Jednak nawet tak zaawansowane i rozbudowane narzędzie może być przystosowane do naszych potrzeb w większym stopniu, odpowiadający naszym oczekiwaniom i wspierający naszą produktywność.

 

Co sprawia, że jesteśmy bardziej produktywni? Każdy programista może mieć różne odpowiedzi na to pytanie. Najczęściej chodzi jednak o możliwość pisania większej liczby wierszy za pomocą kilku klawiszy czy bardziej wydajne debugowanie i profilowanie kodu. Lepsze zrozumienie IDE, w którym pracujemy, może znacząco zwiększyć produktywność. W Android Studio mamy dostęp do pokaźnej ilości wtyczek usprawniających naszą pracę.

 

Konfiguracja

Aby włączyć menu wtyczek, w ustawieniach Android Studio wybieramy sekcję Plugins. Mamy możliwość instalacji wtyczek z różnych źródeł, np. ze zdalnych repozytoriów czy bezpośrednio z dysku.

Sekcja Plugins ustawień Android Studio.

Sekcja Plugins ustawień Android Studio

 

Przykładowe narzędzia

MVP Generator

Umożliwia generowanie kodu MVP na Androida. Całość jest konfigurowalna, możemy dodać dodatkowe moduły w zależności od naszych preferencji.  

Android Selectors Generator

Ta wtyczka Android Studio automatycznie generuje graficzne selektory z odpowiednio nazwanych zasobów Androida.  

Material Theme UI EAP

Android studio ma dwa dostępne motywy – Domyślny i Dracula. Gdy zainstalujesz tę wtyczkę, możesz użyć motywu odpowiadającego standardom Material Design.  

Android DPI Calculator

Kalkulator DPI pozwala obliczyć różne rozmiary we wszystkich dostępnych i domyślnych gęstościach pikseli na platformie Android, tj. xxxhdpi, xxhdpi, xhdpi, hdpi, mdpi, ldpi i tvdpi.  

Zużycie zasobów Androida

Ta wtyczka automatycznie zlicza zużycie zasobów i pokazuje je w lewym pasku każdej linii w twoim Android Studio. Okazuje się przydatna, jeśli chcesz pozbyć się zasobów, które nie są już używane w twoim projekcie.  

AndroidLocalizationer

Wtyczka pomaga ci przetłumaczyć ciągi znaków użytych w aplikacji na inne języki. Zainstaluj ją, a następnie kliknij prawym przyciskiem myszy plik zasobów ciągu, zaznacz „Konwertuj na inne języki” i wybierz języki, które chcesz.  

Android Wifi ADB

Android Wifi ADB pomaga instalować, uruchamiać i debugować aplikacje dla Androida za pośrednictwem Wi-Fi. Czas pozbyć się noszenia kabla USB.

 

Rozbudowana lista ciekawych i użytecznych wtyczek jest dostępna tutaj.

8
Lis

Połączenie aplikacji React Native z usługą App Center


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. 

App center - widok okna
Ekran startowy serwisu App Center



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

Nowa aplikacja App Center
Tworzenie nowego projektu aplikacji

 

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.