React-native

Na bazie technologii React powstał projekt React-native, który umożliwia programowanie w JavaScript urządzeń mobilnych Android lub iOS (cross-platform). Czyli można tworzyć aplikacje "natywne" (uruchamiane nie w przeglądarce, ale w samym urządzeniu). Zapis Reacta jest tłumaczony na Java (Android) lub Objective C (iOS).

Istnieje wiele stron na których opisano tą technologię. Na przykład:

create-react-native-app

Tworzenie aplikacji React Native najłatwiej zacząć od użycia create-react-native-app (często używa się w instrukcjach skrótu CRNA): https://github.com/react-community/create-react-native-app

Instalujemy program:

$sudonpm install -g create-react-native-app

Tworzymy aplikację o nazwie tmdict:

$create-react-native-app tmdict

Tworzony jest podkatalog z aplikacją. Na zakońcenie otrzymujemy informację:

Success! Created tmdict at /media/jurek/common/projekty/rnative/tmdict
Inside that directory, you can run several commands:
yarn start
Starts the development server so you can open your app in the Expo app on your phone.

yarn run ios
(Mac only, requires Xcode)

Starts the development server and loads your app in an iOS simulator.

yarn run android
(Requires Android build tools)

Starts the development server and loads your app on a connected Android device or emulator.

yarn test

Starts the test runner.

yarn run eject

Removes this tool and copies build dependencies, configuration files and scripts into the app directory. 
If you do this, you can’t go back!

We suggest that you begin by typing:

cd tmdict
yarn start

Happy hacking!

Posłusznie wykonujemy:

cd tmdict
yarn start

Pojawia się QR-Code i menu wyboru:

Your app is now running at URL: exp://192.168.100.101:19000

View your app with live reloading:

  Android device:
    -
>
 Point the Expo app to the QR code above.
       (You'll find the QR scanner on the Projects tab of the app.)
  iOS device:
    -
>
 Press s to email/text the app URL to your phone.
  Emulator:
    -
>
 Press a to start an Android emulator.

Your phone will need to be on the same local network as this computer.
For links to install the Expo app, please visit https://expo.io.

Logs from serving your app will appear here. Press Ctrl+C at any time to stop.

 › Press a to open Android device or emulator.
 › Press s to send the app URL to your phone number or email address
 › Press q to display QR code.
 › Press r to restart packager, or R to restart packager and clear cache.
 › Press d to toggle development mode. (current mode: development)

Może się też pojawić infomacja o błędzie dotyczącym sysctl informująca o konieczności zmian wartości

Unable to start server
See https://git.io/v5vcn for more information, either install watchman or run the following snippet:
sudo sysctl -w fs.inotify.max_user_instances=1024
sudo sysctl -w fs.inotify.max_user_watches=12288

należy wykonać komendy:

$ sudo sysctl -w fs.inotify.max_user_instances=1024
$ sudo sysctl -w fs.inotify.max_user_watches=122880

Można je umieścić w skrypcie wykonującym start lub np. pliku etc/rc.local (wykonywany zawsze przy starcie systemu).

Uruchamiamy urządzenie mobilne z aplikacją Expo Client (dostępna w sklepie Google Play - dla Android w wersji co najmniej 4.5). Może to być smartfon lub emulator. Wtedy wybieramy odpowiednie działanie z menu (a).

Uruchamianie emulatora

Jeśli nie mamy go zainstalowanego, najłatwiej zainstalować Android Studio i zainicjować w nim emulatory urządzeń.

Włączenie emulacji w SDK:
Wybierz menu "Tools > Android > SDK Manager"
Zakładka "SDK Tools"
Zaznacz "Android Emulator" checkbox i kliknij "OK"
Instalacja urządzeń w funkcji: Tools > Android > AVD Manager

Uruchamiać zainstalowane emulatory możemy poza środowiskiem Android Studio. Z konsoli Linux Ubuntu sprawdzamy jakie mamy emulatory:

~/Android/Sdk/tools/emulator -list-avds

Załóżmy, że są to:

Nexus_6_API_26
Nexus_6_API_27

Uruchamiamy:

~/Android/Sdk/tools/emulator -avd Nexus_6_API_27

Budujmy aplikację

Wracamy do naszej aplikacji i menu uzyskanego po uruchomieniu yarn start. Wybieramy z menu a (Android) i czekamy na efekt.

Pojawi się ekran z informacją o tym, że możemy modyfikować aplikację zmieniając plik App.js.
Uruchamiamy zatem edytor i modyfikujemy widok we wspomnianym pliku:

<View style={styles.container}>
        <Text>Open up App.js to start working on your app!</Text>
        <Text>Changes you make will automatically reload.</Text>
        <Text>Shake your phone to open the developer menu.</Text>
      </View>

Możemy dowolnie zmieniać zawartość naszej aplikacji –automatycznie wywołuje się jej budowanie. Przetrenujmy:

<View style={styles.container}>
<Text>Witaj świecie!</Text>
</View>

Na ekranie emulatora / urządzenia pojawia się komunikat: "Witaj świecie".

Przy pierwszym uruchomieniu na emulatorze może pojawić się prośba: Permit drawing over other apps grayed out.

Wystarczy kliknąć pojawiający się na końcu komunikatu przycisk OK - by przejść do odpowiednich ustawień i włączyć tą opcję przełącznikiem (switch).

serwis exp

Serwis exp jest niezbędny do publikacji aplikacji (https://docs.expo.io/versions/v26.0.0/introduction/project-lifecycle.html).

Najpierw zakładamy konto na https://expo.io

Na przykład dla konta galicea otrzymamy stronę aplikacji:

https://exp.host/@galicea

Po zainstalowaniu aplikacji tmdict -mamy do niej dostęp poprzez stronę:

https://exp.host/@galicea/tmdict

Aby to wykonać, lnstalujemy exp na naszym komputerze:

$ sudo npm install -g exp

Budujemy i publikujemy aplikację (apk):

exp build:android

Więej na ten temat: https://docs.expo.io/versions/latest/guides/building-standalone-apps.html

W trakcie budowania proszeni jesteśmy o zalogowanie się w serwisie expo.io. Następnie generowany / zapamiętywany jest klucz dla aplikacji (keystore):

19:49:48 [exp] No currently active or previous builds for this project.
? Would you like to upload a keystore or have us generate one for you?
If you don't know what this means, let us handle it! :)
1) Let Expo handle the process!
2) I want to upload my own keystore!
Answer:

Możemy wybrać 1,

Sposób budowania jest zapisany w pliku app.json. Domyślnie mamy w nim coś takiego:

{
"expo": {
"sdkVersion": "26.0.0"
}
}

Próba budowania z takimi parametrami kończy się niepowodzeniem:

19:53:15 [exp] Building...
19:53:16 [exp] Must specify a java package in order to build this experience for Android. 
Please specify one in app.json at "expo.android.package"

Zob.: https://github.com/react-community/create-react-native-app/issues/114

https://stackoverflow.com/questions/42967465/created-an-app-with-create-react-native-app-how-to-publish-it-to-the-google-pla

Minimalna wersja:

{
"expo": {
"sdkVersion": "26.0.0",
"android": { "package": "niepusty_ident_aplikacji" }
}
}

Więcej możliwości: https://docs.expo.io/versions/latest/workflow/configuration

Expo XDE

Zamiast wykonywać polecenia z konsoli, możemy zainstalować ecpo XDE (zo. https://docs.expo.io/versions/latest/introduction/installation\. Wtedy budowanie i publikowanie aplikacji wykonywane jest odpowiednimi przyciskami tej aplikacji.

nativebase.io

Na stronie https://nativebase.io/ mamy dostępną bbliotekę komponentów zgodną z materials Google'a.

Instalujemy ją do naszej aplikacji:

yarn add native-base --save
yarn add @expo/vector-icons --save

Może być konieczne uzupełnienie zależności:

yarn upgrade

Zmieniamy testową aplikację (App.js):

import React from 'react';
// import { StyleSheet, Text, View } from 'react-native';
import {
  Container,
  Content,
  Header,
  Left,
  Body,
  Right,
  Footer,
  FooterTab,
  Button,
  Icon,
  Title,
  Text,
} from 'native-base';

export default class App extends React.Component {
  render() {
    <Container>
      <Header>
        <Left>
          <Button transparent>
            <Icon name="menu"/>
          </Button>
        </Left>
        <Body>
        <Title>Nasza aplikacja</Title>
        </Body>
        <Right/>
      </Header>

      <Content padder>
        <Text>Witaj świecie</Text>
      </Content>

      <Footer>
        <FooterTab>
            <Text>(C) Galicea</Text>
        </FooterTab>
      </Footer>

    </Container>
    );
  }
}

React Native