Реализация CodePush для беспроводных обновлений в React Native

Проталкивание кода относится к процессу обновления или развертывания нового кода в программном приложении или системе. Он предполагает перенос последней версии кода из среды разработки в производственную среду, делая изменения живыми и доступными для пользователей.

Чтобы узнать больше о CodePush, перейдите по этойссылке.

Шаг 1. Зарегистрируйте свое приложение в AppCenter

Войдите в AppCenter.
Добавьте новое приложение для Android и iOS.

Заполните необходимые поля и нажмите кнопку Add new app.

Пример:

Андроид

iOS

Перейдите к Distribute -> CodePush, затем нажмите Create standard deployments.
Запишите команды обновления выпуска, они будут использоваться каждый раз, когда вы отправляете код.
Вы можете редактировать, удалять или создавать новую среду по вашему выбору. Для этого перейдите к Distribute -> CodePush, щелкните значок setting, затем щелкните три точки.

Андроид

$ appcenter codepush release-react -a xxxxx/Awesome-Project -d Production

/* Production is the enviroment name 
you can also change name of your choice by following the above step*/

iOS

$ appcenter codepush release-react -a xxxxx/Awesome-Project-IOS -d Production

/* Production is the enviroment name 
you can also change name of your choice by following the above step*/

Шаг 2. Установите CodePush SDK в React Native

Создайте новый проект React Native, используя команду ниже.

$ npx react-native init AwesomeProject

Установите CodePush глобально, используя npm install -g appcenter-cli.

$ npm install -g appcenter-cli

Интегрируйте библиотеку CodePush в свой проект React Native.

$ npm install react-native-code-push

                 OR

$ yarn add react-native-code-push

Войдите в AppCenter через интерфейс командной строки, appcenter loginи выполните приведенную ниже команду на своем терминале.

$ appcenter login

В вашем браузере появится новая веб-страница с токеном. Скопируйте и вставьте его в терминал.
Введите свой токен из браузера: [ВСТАВЬТЕ ЗДЕСЬ]

Шаг 3. Конфигурация для конкретной платформы

Настройка Android

1. Измените android/settings.gradle

…
include ':app', ':react-native-code-push'
project(':react-native-code-push').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-code-push/android/app')

2. Добавьте код в android/app/build.gradle

apply from: “../../node_modules/react-native-code-push/android/codepush.gradle”

3. ОбновитеMainApplication.Java.

…
// 1. Import the plugin class.
import com.microsoft.codepush.react.CodePush;
public class MainApplication extends Application implements ReactApplication {
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
…
// 2. Override the getJSBundleFile method in order to let
// the CodePush runtime determine where to get the JS
// bundle location from on each app start
@Override
protected String getJSBundleFile() {
return CodePush.getJSBundleFile();
}
};
}

4. Теперь перейдите в AppCenter, выберите свой конкретный проект и перейдите к
Distribute->CodePush. Щелкните значок setting и скопируйте Production key.

5. Вставьте этот производственный ключ в свой android/app/build.gradle в разделе buildTypes.

resValue “string”, “CodePushDeploymentKey”, ‘“”’  // In debug
resValue “string”, “CodePushDeploymentKey”, ‘PUT_YOUR_DEVELOPMENT_KEY_HERE’ // In release

// Replace PUT_YOUR_DEVELOPMENT_KEY_HERE will your CodePush key

Настройка iOS

Сначала запустите pod install, чтобы обновить зависимости CocoaPods.
Отредактируйте AppDelegate.m, чтобы разрешить выбор пакета CodePush.

#import <CodePush/CodePush.h>

3. Найдите следующую строку кода в AppDelegate.m, которая устанавливает исходный URL-адрес моста для рабочих выпусков, а затем заменяет его, как показано ниже.

return [[NSBundle mainBundle] URLForResource:@”main” withExtension:@”jsbundle”];

Замените его на

return [CodePush bundleURL];

4. Добавьте ключ развертывания в Info.plist. Перейдите в AppCenter, выберите свой проект и перейдите к Distribute -> CodePush -> settingзначку, скопируйте рабочий ключ и вставьте его в свой Info.plist файл.

…
<key>CodePushDeploymentKey</key> 
<string>PUT_YOUR_DEVELOPMENT_KEY_HERE</string>
…

// Replace PUT_YOUR_DEVELOPMENT_KEY_HERE with CodePush key

Шаг 4. Оберните App.js с помощью CodePush

Оберните основной компонент вашего приложения с помощью CodePush.

import React from 'react';
import {StyleSheet, Text, View, Image} from 'react-native';
import CodePush from 'react-native-code-push';

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.heading}>
        CodePush: Empowering React Native Developers with Seamless Over-the-Air
        Updates
      </Text>
      <Image
        style={styles.image}
        resizeMode={'contain'}
        source={{uri: 'https://loremflickr.com/g/520/540/paris'}}
      />
      <View style={styles.button}>
        <Text style={styles.buttonText}>BEFORE CODE PUSH</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    marginHorizontal: 16,
  },
  heading: {
    fontSize: 24,
    marginBottom: 20,
    fontWeight: '700',
    textAlign: 'center',
  },
  image: {
    width: 200,
    height: 200,
    borderRadius: 10,
  },
  button: {
    padding: 15,
    marginTop: 20,
    borderRadius: 8,
    backgroundColor: '#0E4B91',
  },
  buttonText: {
    color: '#FFFFFF',
    fontWeight: '700',
  },
});

export default CodePush(App);

2. Запустите свой проект, используя

$ react-native run-android // for android

$ react-native run-iOS // for iOS

Настройка Android и iOS завершена

Теперь вы готовы выполнить свой первый CodePush…

Примечание. Перед обновлением CodePush сгенерируйте и установите выпускные сборки на устройствах Android и iOS.

Шаг 5. Выполнение CodePush

Внесите необходимые изменения JS и сохраните.

import React from 'react';
import {StyleSheet, Text, View, Image} from 'react-native';
import CodePush from 'react-native-code-push';

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.heading}>
        CodePush: Empowering React Native Developers with Seamless Over-the-Air
        Updates
      </Text>
      <Image
        style={styles.image}
        resizeMode={'contain'}
        source={{uri: 'https://loremflickr.com/520/540'}}
      />
      <View style={styles.button}>
        <Text style={styles.buttonText}>AFTER CODE PUSH</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    marginHorizontal: 16,
  },
  heading: {
    fontSize: 24,
    marginBottom: 20,
    fontWeight: '700',
    textAlign: 'center',
  },
  image: {
    width: 200,
    height: 200,
    borderRadius: 10,
  },
  button: {
    padding: 15,
    marginTop: 20,
    borderRadius: 8,
    backgroundColor: '#B7012F',
  },
  buttonText: {
    color: '#FFFFFF',
    fontWeight: '700',
  },
});

export default CodePush(App);

2. Запустите команду CodePush для Android или iOS.

Андроид

appcenter codepush release-react -a xxxxx/AwesomeProject -d Production

appcenter codepush release-react -a xxxxx/AwesomeProject-IOS -d Production

3. Выполнение вышеуказанных команд покажет вам всю необходимую информацию в вашем терминале. Убедитесь, что версия, указанная в терминале, совпадает с версией, указанной в файлах build.gradle и Info.plist вашего проекта.

4. Проверьте информацию о версии в AppCenter.

AppCenter->ProjectName->Distribute->CodePush

5. Нажмите на вышеуказанную версию, а затем щелкните значок настроек в правом верхнем углу экрана.

6. Включите кнопку Required update, чтобы убедиться, что у пользователей установлена последняя версия.

7. Выполните те же действия, что и для iOS, в AppCenter.

8. Изменения отразятся в установленном приложении после обновления.

Шаг 6. Устранение неполадок и откат:

Отключение кнопки «Включить» приведет к отключению обновлений и возврату к предыдущим изменениям.

Важные примечания:

Соответствие версий:

Всегда выполняйте обновления CodePush для той же версии приложения, что и исходный выпуск.
Согласованность между версиями обеспечивает плавность обновлений.

2.Обновление версии приложения:

При обновлении приложения измените версию в файлах конфигурации Android и iOS.
Создайте сборку выпуска с новой версией перед запуском команд CodePush.
Предыдущая версия осталась без изменений.

Мониторинг и аналитика:

AppCenter предоставляет аналитику обновленных показателей внедрения.
Отслеживайте успешность обновления и собирайте отзывы пользователей.

Ограничения:

CodePush может обновлять только пакет JavaScript вашего приложения. Он не может обновлять собственный код. Это означает, что любые изменения, требующие модификации собственного модуля, будут невозможны только с помощью CodePush.

Вывод:

CodePush меняет правила игры, переопределяя способы доставки обновлений в мобильные приложения. Это облачное решение, усовершенствованное Microsoft и адаптированное для таких платформ, как React Native, меняет пользовательский опыт и ускоряет инновации.

Прошли времена ожидания одобрения магазина приложений. CodePush дает вам возможность быстро реагировать на ошибки, отзывы пользователей и возникающие тенденции. Эта гибкость не ставит под угрозу качество; это усиливает его.

С CodePush ваши пользователи никогда не останутся позади. Беспрепятственные обновления гарантируют, что они всегда будут использовать самую последнюю, самую совершенную версию. Это означает меньше сбоев, повышенную удовлетворенность и увеличение удержания клиентов.

В сфере React Native CodePush — ваш катализатор инноваций. Это ваш инструмент, позволяющий изящно перемещаться по динамичному ландшафту, быстро реагировать на потребности пользователей и точно совершенствовать свои приложения. Углубляясь в CodePush, вы не просто принимаете обновления, вы получаете прогресс, эффективность и искусство создания действительно исключительных приложений.

Приятного кодирования!!

Реализация CodePush для беспроводных обновлений в React Native

Шаг 1. Зарегистрируйте свое приложение в AppCenter

Пример:

Андроид

iOS

Андроид

iOS

Шаг 2. Установите CodePush SDK в React Native

Шаг 3. Конфигурация для конкретной платформы

Настройка Android

Настройка iOS

Шаг 4. Оберните App.js с помощью CodePush

Примечание. Перед обновлением CodePush сгенерируйте и установите выпускные сборки на устройствах Android и iOS.

Шаг 5. Выполнение CodePush

Шаг 6. Устранение неполадок и откат:

Важные примечания:

Мониторинг и аналитика:

Рекомендации:

Ограничения:

Вывод:

Вопросы по теме