Jak zbudować aplikację na Androida w React Native - teoria, przykłady i kluczowe atuty

Jeśli prowadzisz biznes i zaczynasz myśleć: „No dobrze, potrzebuję aplikacji”, chcesz wybrać właściwy framework, który spełni potrzeby firmy i pomoże wejść na rynek z produktem lub usługą. Weź oddech i zresetuj się. Sprawdźmy, jak zbudować aplikację na Androida w React Native. 

Zapotrzebowanie na aplikacje wieloplatformowe wystrzeliło w ostatnich latach. Wraz z rosnącą konkurencją wzrósł popyt na framework, który z jednej platformy obsłuży dwa różne systemy operacyjne. Zajrzyj do naszych najlepszych talentów technologicznych jeśli chcesz zatrudnić doświadczony zespół pełnego cyklu, który tworzy intuicyjne i przyjazne produkty. 

RN pomógł zbudować sporo przyjaznych, udanych i wydajnych aplikacji. Spójrz choćby na Discorda. Cały interfejs jest płynny, a Drag & Drop działa, więc łatwo pomylić go z programem natywnym. Zatem React Native to dobry wybór do budowania aplikacji na iOS i Androida. Wspominaliśmy, że RN ma niezaprzeczalną przewagę? Jest zbudowany na jednej z bibliotek JavaScriptu.

Dlaczego wspominamy o Cordovie?

Facebook wypuścił React Native jako projekt open source w 2015 roku. W zaledwie kilka lat framework zbudował solidną reputację najlepszej opcji w tworzeniu aplikacji mobilnych. W React Native powstają czołowe aplikacje: Facebook, Instagram, Skype czy Uber Eats.

Tworzenie w RN różni się od budowania aplikacji HTML5 albo mobilnej strony w Java/Kotlin, czy Objective-C/Swift.

Wraz z upowszechnieniem smartfonów rosło zainteresowanie programistów tworzeniem mobilnych aplikacji w JavaScripcie. Ponieważ aplikacje wieloplatformowe stale się zmieniają, na rynek trafiały różne frameworki JavaScriptu dla programistów. Jednym z najczęściej używanych była Cordova.

Cordova daje przeglądarkę internetową w powłoce aplikacji. Renderuje HTML, CSS i JavaScript, ale ma sporo ograniczeń. Sprawia na przykład, że aplikacja renderuje wszystkie ekrany w przeglądarce zamiast korzystać z natywnej warstwy UI. Przez to rzadko wygląda i działa natywnie, a doświadczenie użytkownika na tym cierpi.

React Native próbuje więc wziąć dostępność i wieloplatformowość Cordovy i połączyć je z natywnym renderowaniem. Według znanych raportów Statistaz Cordovy korzystało zaledwie 4,15 procent twórców aplikacji. Za to stan rozwoju React Native wygląda obiecująco.

programiści React Native w istocie widzą w nim czystszy i szybszy sposób tworzenia responsywnych, elastycznych aplikacji wieloplatformowych, które działają i wyglądają natywnie. 

Nic dziwnego, że korzysta z niego mnóstwo firm i startupów. 

React Native to nie React.js

Zanim zaczniesz pracę z React Native, musisz zrozumieć naturalne pomylenie tworzenia w React.js z React Native. React.js pojawił się po raz pierwszy w 2011 roku.

React.js to biblioteka JavaScriptu i podstawa budowania aplikacji webowych. Używa JavaScriptu i nowego, szybkiego sposobu renderowania interfejsu webowego reagującego na działania użytkownika. Choć u podstaw leży koncepcja React.js, RN wykorzystuje jego składnię i zasady do budowania aplikacji instalowalnych.

Dlaczego React Native w aplikacjach na Androida jest tak popularny? 

Uniwersalna platforma wymaga najmniej zasobów przy przechodzeniu z weba na mobile. Framework RN pozwala też tworzyć aplikacje o prostych i skomplikowanych projektach. Daje „aplikacji” więcej możliwości realizacji Twoich pomysłów biznesowych.

Warto wiedzieć, że eksperci często zalecają użycie kodu natywnego albo przypisanie do projektu inżynierów Fluttera zamiast RN. Oba mają swoje atuty: Google stworzyło framework Flutter, a Facebook Reacta, więc obie firmy mają duże zespoły pracujące nad SDK, dokumentacją, wsparciem i innymi elementami swoich platform. Pamiętaj jednak, że pod wieloma względami jakość efektu końcowego zależy bardziej od Twoich umiejętności niż od wybranych technologii. 

1. Skraca czas wejścia na rynek

Przygotowanie prototypu aplikacji trwa dużo krócej. Dzieje się tak, bo praca w React Native ma charakter modułowy. Programiści składają aplikację z „klocków”, dostosowując i integrując różne moduły. Doświadczeni programiści przygotują takie aplikacje w najkrótszym możliwym czasie. Jak wspomnieliśmy, nie musisz tworzyć aplikacji na różne platformy. Tworzysz jedną na oba systemy. Dzięki temu, że dwie aplikacje powstają w jednej, koszt spada niemal o połowę. Nieźle, prawda?

2. Piszesz w React Native i na Androida, i na iOS

Skoro technologia jest wieloplatformowa, oczekujemy, że napisany kod zachowa się podobnie na wszystkich platformach. Trzeba jednak pamiętać, że nie zawsze stworzysz ten sam komponent albo zarysujesz tę samą logikę dla różnych platform. Przyczyny nie leżą w frameworku. Chodzi o to, że pewne funkcje na jednej platformie mogą być niedostępne na innej albo działać inaczej.

3. Automatyczna aktualizacja

Wszystkie aktualizacje aplikacji zbudowanej w React Native dzieją się automatycznie, bez procesu ręcznego. ALE! Automatyczna aktualizacja działa tylko dla „bazowej” części napisanej w JavaScripcie.

4. W React Native stworzysz dowolną aplikację

Mówiliśmy już, że RN pozwala bez trudu pisać na oba systemy operacyjne. Czy to znaczy, że aplikacja zrobi wszystko, co potrafi platforma?

To zależy. Jest mnóstwo pakietów, które pozwalają korzystać z możliwości smartfona. Jeśli to nie wystarczy, musisz znać język natywny i wiedzieć, jak poprawnie podpiąć kod natywny do frameworka. Niestety nie każdy programista React Native jest gotów pisać w języku innym niż JavaScript - na przykład w Kotlinie, Swifcie czy Objective-C.

W przypadkach, gdy biblioteka nie istnieje, będziesz zmuszony napisać całą funkcjonalność w języku natywnym. Framework RN świetnie nadaje się do szerokiej gamy aplikacji bez nietypowych funkcji. Ta technologia jest znakomita do MVP albo aplikacji, które wymagają najkrótszego czasu wejścia na rynek.

5. Zgodność z komponentami natywnymi 

JS-owy „kręgosłup” aplikacji React Native łatwo połączyć z fragmentami kodu natywnego w Objective-C, Swifcie (iOS) albo Javie (Android). 

Równie prosto dodaje się natywne komponenty do gotowych produktów i wykorzystuje moduły RN w aplikacjach natywnych, by zaoszczędzić czas i dać obu platformom tę samą funkcjonalność.

Obecnie framework lepiej wspiera iOS niż Androida. Wynika to z tego, że iOS ma więcej komponentów natywnych, a Android pojawił się później. Twórcy środowiska przekonują jednak, że to różnica przejściowa.

6. Live reloading.

Technologia obsługuje wygodne narzędzie, które pomaga skompilować i odczytać plik z wprowadzonymi zmianami.

7. Module Hot Reload (HMR).

Dzięki HMR programista może zostawić działającą aplikację i wprowadzać zmiany, na przykład poprawki interfejsu. Widzi je od razu po kliknięciu „Zapisz”, bez przebudowywania aplikacji.

Podsumowujemy więc tak:

• Komponenty napisane w frameworku dostosowują się do używanego systemu;
• Większość logiki jest wspólna dla wszystkich platform;
• Da się edytować funkcjonalność pod konkretne wymagania systemu.
• React Native jest wolny od zbędnych dodatków i pasuje do 90% aplikacji;
• Framework pozwoli Ci napisać natywne moduły do konkretnych funkcji;

Minusy:

• Nie wszystkie rozwiązania dla jednego systemu zadziałają dokładnie tak samo na drugim; 
• Czasem funkcjonalność trzeba dopracować, by działała w każdym systemie.
• Do aplikacji z wieloma animacjami są lepsze rozwiązania.
• Waży więcej niż aplikacja natywna.
• Nie nadaje się do aplikacji gamingowych.

React Native w aplikacjach na Androida według Appbrain Statistics

10 aplikacji na Androida w React Native

1. WIX

To znany kreator stron, który zbudował aplikację mobilną w React Native. Na najwyższym poziomie logika biznesowa aplikacji, w tym elementy UI, jest napisana w JS i Reakcie. Na średnim poziomie framework React Native działa jako most do natywnych SDK. Jeśli użytkownicy chcą dodać funkcje takie jak API aparatu, dostęp do kontaktów czy GPS, dokładają do projektu zewnętrzną bibliotekę. 

2. Tesla 

To synonim sukcesu w branży pojazdów elektrycznych. Jednym z powodów jest to, że ich samochody są zarazem energooszczędne i funkcjonalne dla użytkowników.

Najbardziej nowatorskie w samochodach Tesli jest to, że użytkownicy mogą sterować wieloma funkcjami auta i sprawdzać je na urządzeniach mobilnych. Ta możliwość uzależniła auta i ich właścicieli od aplikacji mobilnych. Im więcej funkcji mają samochody Tesli, tym lepiej działających aplikacji potrzebują - dlatego firma korzysta dziś w swojej aplikacji mobilnej z RN.

3. Artsy

Ten marketplace jest o artystach z całego świata. Artsy umożliwił ponad 100 000 twórcom sprzedaż ich unikalnych dzieł. Wraz ze wzrostem liczby użytkowników zespołowi coraz trudniej było aktualizować i ulepszać dwie różne aplikacje na dwie platformy. Dlatego Artsy przeszło na React Native. 

4. Shine

To platforma, która pomaga walczyć ze stresem dzięki motywującym artykułom, hasłom i nagraniom. Aplikacja napisana w React Native zyskała popularność w USA i Kanadzie.

5. Gyroscope 

Opiera się na zebranych danych, które pomagają zbudować pełną historię Twojego życia. Ta aplikacja śledzi kroki, sen, postępy treningowe, tętno i wszystko inne, na czym Ci zależy. Aplikacja mobilna w React Native łączy się ze źródłami danych i na podstawie wszystkich zebranych informacji tworzy raporty.

6. Discord

To wieloplatformowy system wiadomości tekstowych i głosowych ze wsparciem VOIP oraz wideokonferencjami. Pomaga budować społeczności: inwestorów NFT, graczy czy kursów IT online. Do stworzenia aplikacji na iOS użyli React Native i byli z efektu zadowoleni. To startup z San Francisco.

7. Coinbase

Pierwsze aplikacje, które zespół Coinbase wypuścił na iOS i Androida, powstały odpowiednio w Objective-C i Javie - można je nazwać „natywnymi”. Od stycznia 2021 roku programiści tworzą aplikacje Coinbase na iOS i Androida w React Native zamiast natywnie. Dzięki temu wszyscy inżynierowie mobilni pracują dziś na jednej bazie kodu. Zalety React Native pozwoliły całkowicie przepisać produkt w 6 miesięcy. Przepisywanie aplikacji na Androida zaczęli w marcu 2020 roku i niemal dokładnie pół roku później wydali ją w całości od nowa. Dziś mają ponad 56 milionów użytkowników na świecie.

8. Walmart

Walmart jest dziś jedną z najpopularniejszych sieci sklepów na świecie. Jego zespół włożył w React Native sporo pieniędzy - wie, że pomoże to utrzymać firmę na szczycie handlu detalicznego.

Zespół napisał wersje aplikacji na iOS i Androida z pomocą React Native. Pozwoliło to zatrudnić jeden zespół i o połowę obniżyć koszty. Dzięki szybkiemu cyklowi wytwarzania - jednej z największych zalet React Native - zespół przyspieszył też premierę aplikacji, wyprzedził konkurencję i odpowiedział na potrzeby klientów.

9. Shopify

Ta aplikacja pomaga ludziom tworzyć i promować własne biznesy. Ułatwia zakładanie sklepów internetowych i promowanie ich w sieci. Zespół zdecydował się na React Native, by zintegrować funkcje i ułatwić programistom zarządzanie aktualizacjami. Pomogło to też obniżyć koszty.

10. Afterpay

Finansowanie „kup teraz, zapłać później” pozwala kupującym robić zakupy i spłacać je w czasie. Afterpay to australijska firma, która udziela konsumentom nieoprocentowanych pożyczek. Block jest właścicielem tej technologii płatniczej. Afterpay pozwala uprawnionym kupującym kupić teraz i zapłacić później - bez odsetek, sprawdzania zdolności kredytowej i opłat, gdy płacą w terminie. 

Etapy tworzenia aplikacji na Androida w React Native

W przypadku Androida proces możesz zacząć na dowolnym urządzeniu. Niezależnie od systemu operacyjnego będziesz potrzebować niemal tych samych pakietów co na macOS, a sposób budowania kodu będzie podobny do tego z iOS. Zmieni się tylko aplikacja uruchamiająca emulator urządzenia mobilnego. 

Pobieranie zależnych pakietów

W tym bloku rozważymy konfigurację środowiska pod Windows. Dla Linuksa jest niemal tak samo. Jeśli zresztą korzystasz z Linuksa, wiesz sporo o instalowaniu części potrzebnych do pracy.

Najpierw pobierz menedżer pakietów Chocolatey. To odpowiednik Brew dla Windows. W tym celu:

• Otwórz PowerShell z uprawnieniami administratora;
• Wpisz polecenie Set-ExecutionPolicy AllSigned albo Set-ExecutionPolicy Bypass -Scope Process;
• Następnie wpisz polecenie:

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-ObjectSystem.Net.WebClient). DownloadString('https://community.chocolatey.org/install.ps1'))

Ostatnie polecenie uruchomi automatyczne pobieranie i instalację Chocolatey. Potem musimy pobrać środowisko do tworzenia aplikacji w Javie oraz Node.js. Możesz do tego użyć polecenia choco install -y nodejs-lts openjdk11.

Pobierz i skonfiguruj Android Studio

Dalej robi się nieco trudniej, więc uważnie trzymaj się instrukcji, by ograniczyć możliwe błędy i niepowodzenia przy konfiguracji.

Potrzebujesz środowiska Android Studio. Instalując projekt, wybierz kilka komponentów:

• Android SDK;
• Android SDK Platform;
• Android Virtual Device.

Musisz też pobrać i zainstalować moduł wirtualizacji Hyper-V. Domyślnie przy instalacji Android Studio pobierze się najnowsza wersja Android SDK. Aby jednak budować aplikacje z kodem React Native, potrzebujesz wersji 10. Dlatego: 

• Otwórz Android Studio;
• Przejdź do sekcji ustawień Appearance & Behaviour;
• Następnie otwórz pozycję System Settings;
• Kliknij menu Android SDK;
• Otwórz zakładkę SDK Platforms;
• Znajdź pozycję Show Package Details i kliknij ją;
• Następnie poszukaj wersji SDK dla Androida 10 (Q) i zaznacz pola przy pozycjach: Android SDK Platform 29, Intel x86 Atom64 System Image oraz Google APIs Intel x86 Atom System Image;
• Podobną procedurę trzeba wykonać w zakładce SDK Tools;
• Następnie kliknij przycisk Apply, by zapisać zmiany w IDE.

Ustawianie zmiennej środowiskowej

Aby pracować z React Native na Windows, musisz utworzyć globalną zmienną środowiskową. W tym celu:

• Otwórz „Panel sterowania”;
• Przejdź do sekcji zarządzania kontami użytkowników;
• Znajdź tam pozycję odpowiedzialną za ustawianie zmiennych środowiskowych;
• Utwórz nową zmienną o nazwie ANDROID_HOME;
• Wartość domyślną zastąp rzeczywistą lokalizacją Android SDK. Zobaczysz ją w ustawieniach Android Studio;
• Potem otwórz wiersz poleceń PowerShell;
• Wpisz polecenie Get-ChildItem -Path Env:\;
• Następnie otwórz panel sterowania ponownie, przejdź do tej samej sekcji zarządzania użytkownikami i dodaj kolejną zmienną środowiskową, tym razem o nazwie Path. Jej wartość domyślna to %LOCALAPPDATA%AndroidSdkplatform-tools.

Konfiguracja React Native i uruchomienie aplikacji w środowisku wirtualnym

Dalej proces konfiguracji nie różni się od tego dla iPhone'ów i iPadów. Musisz zainstalować narzędzie konsolowe React Native i je uruchomić. Każdy krok instalacji poznasz w sekcji o instalacji React Native dla iOS. 

Główna różnica między systemami to polecenie uruchamiające. W przypadku Androida wpiszesz npx react-native run-android.

Po użyciu polecenia npx react-native run-ios pojawi się interfejs symulatora. Na macOS działa on z Xcode, a na Windows, macOS i Linuksie z Android Studio przy tworzeniu na Androida.

Twój program pojawi się w symulatorze. Wygląda to tak, jakbyś pobrał aplikację na telefon. Teraz możesz przejść wprost do zmiany kodu.

• Otwórz wybrany edytor tekstu (na przykład VSCode);
• W środku przejdź do katalogu z projektem reactNativeWeather;
• Następnie otwórz plik App.js i edytuj kod według potrzeb.

Z kim tworzyć aplikacje na Androida w React Native?

Gdy już wybierzesz React Native, masz dwie opcje. 

1. Zatrudnić freelancera. Wtedy jednak wszystkie procesy kontrolujesz sam: pilnujesz go, by dotrzymywał terminów, i jakoś samodzielnie sprawdzasz jakość pracy. Potrzebujesz też projektanta UI/UX, który zaprojektuje ekrany wywiadu. 
2. Zatrudnić zespół pełnego cyklu, który zrobi wszystko za Ciebie. Firmy programistyczne mają zwykle wszystko, czego trzeba: programistów, projektantów UI/UX, inżynierów QA i project managerów.

 Doświadczony zespół pełnego cyklu, który poradzi sobie z wyjątkowymi wyzwaniami React Native  oszczędzi Ci niewiarygodnych pieniędzy i mnóstwa czasu pracy.

6 kroków do stworzenia aplikacji mobilnej na Androida w React Native 

1. Wywiad. Pierwszym celem jest zagłębienie się w pomysł na projekt i zrozumienie celów biznesowych. 
2. Projekt UI/UX. Aby stworzyć szczegółową mapę myśli, trzeba przeanalizować konkurencję. Profesjonalni projektanci przygotują wireframe'y zgodne z wytycznymi Androida i przedstawią Ci wszystkie pomysły.
3. Określ must-have funkcje, które trafią do MVP.
4. Proces tworzenia aplikacji na Androida w React Native. 
5. Testy QA. Trzeba zrobić testy automatyczne i manualne, by wyłapać i zamknąć wszystkie możliwe błędy przed premierą.
6. Premiera. Mówimy tu o wydaniu aplikacji w App Store i Google Play - dowiesz się, czego trzeba, by dostać zgodę testerów Apple'a i Google'a.

To, czy React Native pasuje do Twojej strategii budowy aplikacji, zależy od Twoich wewnętrznych celów i oczekiwań.

Większość firm, wybierając React Native, wybiera równowagę między dostępnością a doświadczeniem użytkownika. To niemal tak, jakby dało się budować aplikacje natywne bez wysokich kosztów tworzenia i utrzymania osobnych baz kodu dla Androida i iOS.