Problem Set #0: The Environment

Ciele

Pripraviť si prostredie potrebné pre predmet.

Sofvérové vybavenie

V rámci kurzu Vývoj aplikácií pre chytré zariadenia budete potrebovať nasledovné softvérové vybavenie:

Upozornenie

Pre použitie Android SDK je požadované nainštalovať JDK 7 alebo max. JDK 8! Ak nainštalujete vyššiu verziu, s veľkou pravdepodobnosťou nebudete vedieť zostaviť výslednú aplikáciu.

Inštalácia softvérového vybavenia pre OS Windows

Samozrejme môžete jednotlivé balíky softvéru inštalovať osobitne. Odporúčame vám však nainštalovať správcu balíkov chocolatey, ktorý vám prácu s inštaláciou, aktualizáciou alebo odinštalovávaním značne zjednoduší. Ak teda nástroj nainštalujete, tak:

Spustite terminál s právami administrátora

Ako administrátor zadajte do terminálu:

$ choco install -y --ignore-checksums \
     jdk8 android-sdk gradle \
     cmder vscode nodejs \
     scrcpy genymotion virtualbox

Následne sa spustí inštalácia. Tá zaberie istý čas, kým sa balíčky stiahnu a nainštalujú.

Inštalácia softvérového vybavenia pre OS Linux

Inštalácia závisí od typu distribúcie, ktorú máte nainštalovanú.

Inštalácia balíkov pre distribúciu Fedora

V príkazovom riadku napíšte:

$ sudo dnf install npm android-tools java-openjdk-devel yarnpkg

Inštalácia balíkov pre distribúciu Ubuntu

V príkazovom riadku napíšte:

$ sudo apt install npm android-tools-adb

Inštalácia Android SDK

Ešte predtým, ako začneme inštaláciu Android SDK Tools, vytvorte priečinok android-sdk/. Tento priečinok (a cestu k nemu) budeme označovať systémovou premennou $ANDROID_HOME.

V priečinku $ANDROID_HOME vytvorte ďalší priečinok s názvom cmdline-tools/ a do neho stiahnite balík Command Line Tools manuálne z tejto stránky. V tomto priečinku ho aj rozbaľte a premenujte koreňový priečinok rozbaleného balíka z cmdline-tools/ na tools. Štruktúra priečinkov a súborov bude potom nasledovná:

android-sdk/
└─── cmdline-tools/
     └── tools/
         ├── bin/
         │   ├── apkanalyzer*
         │   ├── avdmanager*
         │   ├── lint*
         │   ├── profgen*
         │   ├── retrace*
         │   ├── screenshot2*
         │   └── sdkmanager*
         ├── lib/
         ├── NOTICE.txt*
         └── source.properties*

Pri práci na predmete budeme používať najnovšiu verziu Android SDK, ale aplikácie budeme cieliť na Android-y 6 a vyššie. Preto pomocou príkazu sdkmanager, ktorý sa nachádza v priečinku cmdline-tools/tools/bin/, nainštalujte potrebný obraz sytému, SDK, emulátor a potrebné nástroje:

$ cd cmdline-tools/bin
$ ./sdkmanager --install "system-images;android-29;google_apis;x86_64"
$ ./sdkmanager --install "emulator"
$ ./sdkmanager --install "platforms;android-30"
$ ./sdkmanager --install "platform-tools"
$ ./sdkmanager --install "build-tools;30.0.2"

Po úspešnom stiahnutí pribudlo v priečinku $ANDROID_HOME niekoľko nových priečinkov.

Nakoniec do premennej PATH vášho systému alebo prostredia pridajte tieto cesty:

${ANDROID_HOME}/cmdline-tools/tools/bin/
${ANDROID_HOME}/emulator/
${ANDROID_HOME}/platform-tools/

Inštalácia React Native a Expo

Pre vývoj budeme používať aj Expo. Pre jeho inštaláciu je potrebné nainštalovať balík expo-cli a klientsku aplikáciu do mobilného telefónu.

Balík expo-cli nainštalujete z príkazového riadku pomocou správcu balíkov npm globálne do systému. Na tento účel budete potrebovať práva superpoužívateľa:

$ sudo npm install -g expo-cli

Poznámka

Rámec React Native sa nainštaluje spolu s klientom Expo, nakoľko ho má uvedený v závislostiach.

Klientsku aplikáciu pre mobilný telefón nainštalujete z obchodu vašej platformy:

Inštalácia prostredia Visual Studio Code

Pokiaľ sa Visual Studio Code nenachádza vo vašom balíčkovacom systéme, stiahnite ho priamo z domovskej stránky alebo využite niektorú z alternatívnych možností inštalácie (napr. snap pre Linux).

Zoznam odporúčaných pluginov pre Visual Studio Code:

Trailing Spaces - Highlight trailing spaces and delete them in a flash!
React Native Tools - Debugging and integrated commands for React Native
React-Native/React/Redux snippets for es6/es7 - Code snippets for React-Native/React/Redux es6/es7 and flowtype/typescript, Storybook
Prettier - Code formatter - Code formatter using prettier
Material Icon Theme - Material Design Icons for Visual Studio Code

Genymotion and `scrcpy`

Inštalácia Genymotion

Nástroj Genymotion vám umožňuje spustiť Android zariadenie ako virtuálny stroj pomocou VirtualBox-u. Ak ho chcete nainštalovať, potrebujete mať najprv nainštalovaný samotný VirtualBox.

Po inštalácii je potrebné sa zaregistrovať. Až potom môžete začať nástroj používať.

V nástroji si vytvorte virtuálne zariadenie (ideálne telfón) s Androidom 10 (API 29).

Inštalácia a použitie nástroja `scrcpy`

Nástroj scrcpy umožňuje pripojiť sa na Android zariadenie buď cez USB alebo cez TCP/IP a zobraziť jeho obrazovku v okne na vašom počítači. Okrem zobrazenia obrazovky je možné zariadenie aj priamo ovládať dotykom (kurzorom myši) v okne.

Použitie je veľmi jednoduché. Ak máte k počítaču pripojené len jedno zriadenie, stačí z príkazového riadku spustiť príkaz:

$ scrcpy

Ak máte zariadení viac, zistite najprv označenie zariadenia (jeho serial) pomocou príkazu adb devices a následne spustite príkaz:

$ scrcpy -s SERIAL