Разработка мобильных приложений

1. Разработка мобильных приложений

федеральное государственное бюджетное образовательное учреждение
высшего образования
«ТОЛЬЯТТИНСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ»
Разработка мобильных
приложений
Тонких Артём Петрович
старший преподаватель кафедры
«Прикладная математика и информатика»
© ТГУ, 2022

2. ПРЕИМУЩЕСТВА REACT NATIVE

Общая кодовая база
Максимально похож на нативный
Большое комьюнити
Поддержка TypeScript
Быстрый поиск подрядчика

3. НЕДОСТАТКИ REACT NATIVE

Молодой фреймворк
Сложно адаптировать под все андроиды

4.

установите JDK не ниже 12 или OpenJDK
установите Node.js версии 12.22.1 (не последнюю)
выполните npm install -g react-native -cli из папки
ReactNative
выполните npm install yarn –g
выполните npm install fbjs

5. 12.22.1

6. 17.0.1

7. npm install -g react-native-cli

8.

9.

10.

11. 28.0.3

12. ANDROID_HOME

13. ANDROID_HOME

14. JAVA_HOME

C:\Program Files\Java\jdk(версия)

15.

16.

%JAVA_HOME%\bin
%ANDROID_HOME%
%ANDROID_HOME%\platform-tools
%ANDROID_HOME%\watchman

17.

react-native init MyTestProject

18.

react-native run-android

19.

npm install yarn –g

20.

npm install fbjs

21.

выполните yarn android
выполните react-native run-android

22.

23.

24.

25.

26.

27.

28.

29.

30.

31.

32.

33.

// with yarn
yarn add expo-local-authentication
// with npm
npm install expo-local-authentication

34.

import * as LocalAuthentication from 'expo-localauthentication'

35.

const [isBiometricSupported, setIsBiometricSupported] =
React.useState(false);
useEffect(() => {
(async () => {
const compatible = await
LocalAuthentication.hasHardwareAsync();
setIsBiometricSupported(compatible);
})();
});
<Text> {isBiometricSupported ? 'Your device is compatible with
Biometrics'
: 'Face or Fingerprint scanner is available on this device'}
</Text>

36.

const handleBiometricAuth = async () => {
const savedBiometrics = await
LocalAuthentication.isEnrolledAsync();
if (!savedBiometrics)
return Alert.alert(
'Биометрическая запись не найдена',
'Пожалуйста, подтвердите свою личность с помощью
пароля',
'OK',
() => fallBackToDefaultAuth()
);
}

37.

Object {
"error": "lockout",
"message": "Too many attempts. Try again later.",
"success": false,
},

38.

LocalAuthenticationOptions = {
promptMessage?: string;
cancelLabel?: string;
disableDeviceFallback?: boolean;
fallbackLabel?: string;
}

39.

LocalAuthenticationOptions = {
promptMessage?: string;
cancelLabel?: string;
disableDeviceFallback?: boolean;
fallbackLabel?: string;
}

40.

const handleBiometricAuth = async () => {
const biometricAuth = await
LocalAuthentication.authenticateAsync({
promptMessage: 'Login with Biometrics',
disableDeviceFallback: true,
});
}
В iOS добавить InfoPlist.NSFaceIDUsageDescription в файл
app.json в приложении Expo.
Поместить описание NSFaceIDUsageDescription в файл
ios.InfoPlist.NSFaceIDUsageDescription в файле app.json.
Значение может быть что - то вроде APP_NAME needs to use
Face ID / Touch ID to authenticate you

41.

react-native-unimodules
Для iOS добавить NSFaceIDUsageDescription в свой файл
info.plist:
<key>NSFaceIDUsageDescription</key>
<string>$(PRODUCT_NAME) Authentication with TouchId or
FaceID</string>
<uses-permission
android:name="android.permission.USE_BIOMETRIC" />
<uses-permission
android:name="android.permission.USE_FINGERPRINT" />
https://github.com/ejirocodes/React-Native-LocalAuthentication-using-Biometrics