Создаем мобильное приложение на React Native. Часть 4: Отправляем приложение в App Store, Google Play и веб

Завершающий этап разработки – публикация программы в магазинах приложений и на просторах интернета. Рассказываю, как использовать возможности React Native для быстрого перехода от версии для разработчиков и тестирования в симуляторе к распространению программы через самые масштабные магазины приложений. Ну и про быструю конвертацию React-Native в веб-сайт не забудем. 

Предыдущий материал: Мобильное приложение на React Native. Часть 3: Интерфейс и запрос данных 

Публикуем приложение в App Store

Так как мы разрабатывали под iOS, то и начнем с публикации программы в магазине приложений Apple. Надо сразу сказать, что создавать программы на React Native и после публиковать их в App Store сложнее, чем когда весь проект создается на SwiftUI, но задача выполнимая. Самой сложной ее частью для новичков станет необходимость заплатить 100 долларов за создание профиля разработчика. 

Отключаем HTTP-запросы

Apple с 2015 года использует механизм обеспечения безопасности, который по умолчанию блокирует незащищенные подключения, что может помешать работе приложения на этапе разработки. Эта система в React Native выключена в связи с тем, что разработка ведется в localhost, который по умолчанию передает данные по незащищенному протоколу. 

Чтобы это исправить, необходимо удалить localhost из списка ресурсов-исключений, на которые не действуют правила App Transport Security. 

Для этого:

• Открываем папку iOS в нашем проекте.

• Затем переходим в директорию с названием приложения.

• Внутри находим файл info.plist и открываем его. 

• Находим блок NSExceptionDomains, а внутри него запись localhost, заключенную в тег key. Надо удалить эту запись. 

• Затем нужно заменить запись True под NSAllowArbitraryLoads на False. 

Готово. Теперь проблем с точки зрения безопасности публикации в App Store точно не возникнет и ваше приложение пройдет первоначальную проверку. 

Настраиваем схему запуска

Чтобы разместить приложение в App Store и запустить его на устройстве, необходимо создать так называемый релиз программы. Это специальный пакет данных, хранящий в себе всю информацию, необходимую для запуска приложения на мобильном устройстве под управлением iOS. 

В этом пакете содержится и нативный код и код JavaScript. Также в релизе запрещен доступ к инструментам разработчика, чтобы у пользователя не было возможности случайно открыть какие-то параметры, доступные исключительно для создателей ПО. 

Создавать релейную схему запуска будем через Xcode:

• Открываем Xcode. 

• Выбираем пункт Open existing project...

• Указываем папку ios в корневой директории нашего проекта. 

• Нажимаем на пункт меню Product.

• В появившемся списке выбираем Scheme. 

• Затем нажимаем на New scheme...

• Даем ей название, меняем Build Configuration на Release и сохраняем.

Теперь можно перейти непосредственно к сборке запускаемого файла с нашим приложением. 

Создаем сборку для публичного релиза приложения

Следующий этап – сборка. Он практически полностью автоматизирован. Нужно лишь нажать клавиши Cmd + B и ждать, пока Xcode не создаст готовую программу, которую можно отправить на проверку в Apple. 

Ознакамливаемся с правилами App Store

У Apple довольно внушительный список правил, нарушение каждого из которых может привести к блокировке разработчика и отказу в публикации его работы. Поэтому так важно перед публикацией изучить сразу несколько постулатов корпорации:

1. Основной гайд по разработке и оптимизации приложения для iOS-устройств. 

2. Юридические правила публикации программ в App Store.

3. Правила оформления продуктовой странички в App Store.

4. Правила соблюдения конфиденциальности пользователей. 

Большая часть правил изложена тут. Обязательное чтиво для всех, кто решил, что хочет опубликовать свое детище в App Store. Без этого этапа, скорее всего, не удастся пройти даже базовый ревью. К тому же здесь много полезного, что только упростит процесс дальнейшей разработки новых приложений или обновления тех, что вы публикуете сейчас. 

Отправляем свое приложение на проверку в Apple при помощи App Store Connect

Для отправки своего приложения на проверку в App Store c его дальнейшей потенциальной публикацией в магазине необходимо использовать программу App Store Connect. Это что-то в духе центра для разработчиков, объединяющего в себе все необходимые инструменты, которые позволяют отслеживать состояние приложений, а также публиковать их в магазине. В общем, без него не обойтись. 

Работа с App Store Connect состоит из 5 этапов:

1. Необходимо зарегистрироваться как разработчик и, соответственно, создать платную учетную запись. Указать данные своей банковской карты, чтобы можно было и получать деньги и при этом платить Apple за возможность публиковать свои разработки в их магазине. 

2. Создаем пользователей, которые могут пользоваться выбранной учетной записью App Store Connect, добавлять новые приложения, отправлять их на проверку и т.п. 

3. Здесь же есть специальный раздел для создания отдельных страниц под новые приложения. В секции My Apps можно добавить новый блок данных, туда нужно записать название программы, ключевые слова. На этой же странице можно выбрать опцию по загрузке готовой сборки программы в App Store. Можно загрузить сразу несколько сборок, если это необходимо. 

4. В App Store Connect у разработчиков есть доступ к утилите TestFlight. Это специальная программа, позволяющая проводить бета-тестирование программы среди потенциальных пользователей. Тут-то и могут понадобиться отдельные сборки программы, созданные именно для тестирования.

5. Ну и не стоит забывать, что App Store Connect подходит для отслеживания статистики по приложению (количество загрузок, рейтинг и т.п.).

На этом все. Вам нужно сделать сборку и загрузить ее через программу App Store Connect. Если Apple устроит ваше приложение, то больше ничего делать не понадобится. Останется лишь дождаться публикации. 

Публикуем приложение в Google Play

Несмотря на то, что на учетную запись разработчика в случае c Android тратиться не нужно, сам процесс сборки не шибко проще. Нужно создать специальный ключ для подписи приложения перед его отправкой в Google Play, настроить утилиту Gradle, внести ряд изменений в конфигурации проекта и создать специальный пакет для выгрузки приложения в магазин приложений.

Далее разберем каждый из шагов подготовки к публикации – от создания запускаемого файла до создания профиля в Android Console. 

Генерируем ключ для подписи приложения

Без этого ключа вас не пустят в Google Play. Корпорация их проверяет и вынуждает каждого разработчика создавать специальную запись и закреплять ее за своим проектом даже при условии, что он планирует отправлять свое приложение не в магазин Google, а в какой-нибудь другой. 

Ключ создается при помощи утилиты JDK. Для этого нужно сначала открыть директорию, в которой хранится установленная копия JDK. В случае с Windows это C:Program FilesJavajdkbin, а в случае с macOS директорию хранения JDK можно узнать при помощи команды /usr/libexec/java_home

Открыв папку с JDK, вводим следующую команду. для Windows:

keytool -genkeypair -v -storetype PKCS12 -keystore my-upload-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

Для macOS:

sudo keytool -genkey -v -keystore my-upload-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

Обе команды создают файл в формате keystroke. Этот ключ нужно держать в тайне. 

Настраиваем переменны Gradle

Следующий шаг – настройка утилиты Gradle. Она встроена в Android Studio и позволяет внести некоторые изменения в конфигурацию приложения для его последующей публикации в магазине приложений Google Play. 

• Сначала необходимо взять ключ, который мы создали в предыдущей главе статьи (тот самый, что нужно держать в секрете) и загрузить его в директорию app в папке android нашего проекта. 

• Следом необходимо открыть конфигурационный файл gradle.properties (все в той же директории android). На месте звездочек в директиве MYAPP_UPLOAD_STORE_PASSWORD=***** надо указать пароль для файла, где хранится наш секретный ключ. Аналогично с полем KEY_PASSWORD. 

А вот содержимое файла целиком. 

MYAPP_UPLOAD_STORE_FILE=my-upload-key.keystore
MYAPP_UPLOAD_KEY_ALIAS=my-key-alias
MYAPP_UPLOAD_STORE_PASSWORD=*****
MYAPP_UPLOAD_KEY_PASSWORD=*****

В macOS для хранения паролей можно использовать приложение iCloud Keychain. Тогда в конфигурационный файл необязательно добавлять пароли, что указаны выше. 

Меняем конфигурацию Gradle

Нам нужна релизная сборка, которую можно опубликовать в Google Play. Для этого надо отредактировать конфигурационный файле build.gradle. Он хранится в папке app (что лежит в директории android внутри нашего проекта). 

Вот как выглядит базовая конфигурация, предложенная инженерами Facebook:

...
android 
...
defaultConfig ... 
 signingConfigs 
  release 
  if (project.hasProperty('MYAPP_UPLOAD_STORE_FILE')) 
   storeFile file(MYAPP_UPLOAD_STORE_FILE)
   storePassword MYAPP_UPLOAD_STORE_PASSWORD
   keyAlias MYAPP_UPLOAD_KEY_ALIAS
   keyPassword MYAPP_UPLOAD_KEY_PASSWORD
   }
  }
 }
buildTypes 
release 
...
signingConfig signingConfigs.release
}}}
...

Менять в ней что-либо не нужно. 

Создаем приложения в формате Android App Bundle

Теперь необходимо запустить процесс сборки файла в формате AAB. Это специальное расширение, ставшее с недавних пор стандартным при публикации программы в Google Play. Другие форматы Google больше не принимает. 

• Не меняем базовую структуру приложения в нашем React-приложении (если меняем, то все изменения необходимо отразить в конфигурационной файле build.gradle).

• Открываем файле gradle.properties и ищем там директиву org.gradle.configureondemand=true. Если таковая есть, то удаляем ее и сохраняем изменения. 

• Запускаем команду ./gradlew bundleRelease

Через некоторое время в папке app появится обновленная директория build, содержащая в себе файл app-release.aab. Вот его можно брать и спокойно загружать в магазин приложений Google. 

Создаем профиль в Play Console и настраиваем публикацию приложения

У Google есть свой аналог App Store Connect, и он работает по схожему принципу. Разве что не просит столько денег для публикации программ. 

• Открываем сайт Play Console.

• Регистрируем свою учетную запись, указав все необходимые данные для создания аккаунта разработчика. 

• Создав аккаунт, переходим во вкладку All apps. 

• Внутри находим кнопку Create app. 

• Указываем язык по умолчанию и название приложения. 

• Выбираем категорию приложения (это должна быть либо игра, либо программа общего назначения). 

• Уточняем, платное наше приложение или нет. 

• Указываем контактные данные, которые пользователи смогут использовать, чтобы связаться с разработчиком (то есть с нами).

• Принимаем все соглашения. 

• Нажимаем на кнопку Create app.

Создаем релиз и отправляем его в магазин

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

Можно указать, где будет доступно приложение, на каких условиях и т.п. В общем, вас за руку проведут по всем необходимым стадиям. Здесь же вы будете загружать готовую сборку приложения в магазин. 

Отправляем приложение в веб

Раньше разработчики делали по-другому. Сначала создавали веб-сайт или десктопное приложение, а уже потом переходили к мобильным устройствам. Сейчас же в большинстве случаев все начинают с программы для смартфона. Мы тоже делали мобильное приложение, но ничего не мешает быстро превратить его в сайт. Причем в случае с React Native сделать это довольно легко. У вас останется одна логика на всю код-базу (несмотря на то, что фактически код-базы будут разными). 

При желании можно и вовсе написать скрипт, который будет автоматически менять содержимое файлов проекта, чтобы те идеально подходили для запуска в браузерах. 

Вся процедура превращения мобильной программы в браузерную умещается в 4 простых шага:

1. Корректировка синтаксиса в соответствии с общепринятыми стандартами HTML и CSS. 

2. Замена API с тех, что используются в React Native, на браузерные. 

3. Создаем проект с помощью сборщика для веб-приложений и копируем в него код. 

4. Деплоим готовый проект на любой хостинг по своему желанию.

Меняем HTML-теги

Начнем с корректировки синтаксиса. Как вы уже знаете, в React Native вместо привычных всем <div> или <p> используются <View> и <Text>. Очевидно, что для возвращения в родную веб-гавань понадобится все это снова преобразовать в привычные блоки. То есть <View> опять превратится в <div>, а <Text> в <p>. Это нужно сделать со всеми используемыми тегами. 

Могут возникнуть сложности с блоком в духе FlatList, так как он по умолчанию настроен под работу со списком файлов. Необходимо превратить его в <ul>, который к тому же поддерживает свойство скроллинга внутри себя. То есть как-то так: <ul style="overflow: scroll; box-sizing: border-box">

Изображения меняем с <Image source={}> на <img src="">. А все кнопки можно смело превращать в <button>, потому что CSS позволяет полностью изменить дизайн такого типа элементов независимо от настроек браузера. Дополнительный уровень абстракции не нужен. 

В CSS синтаксис меняется еще сильнее, так как надо возвращаться к названию свойств для браузеров. Они отличаются в основном типом начертания, используется kebab вместо camel. Например, border-width вместо borderWidth. Также в браузере не нужны двойные фигурные скобки для записи инлайн-стилей. 

Меняем системные API на браузерные 

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

Здесь зачастую даже и пары букв менять не нужно. API для запроса к геолокации пользователя так и называется – Geolocation. Команда с запросом текущего расположения устройства – тоже. 

Единственное, что придется переписать, – непосредственно запрос на разрешение на отслеживание геоданных пользователя. Но это буквально одна строка. Об этом подробно рассказано в документации MDN. Нужно использовать navigator.geolocation и затем передавать команды в духе getCurrentLocation, если необходимо объединить оба запроса в один. Функция возвращает такой же объект с информацией в духе широты, долготы и т.п. 

А что касается AsyncStorage, то в браузере по умолчанию есть аналог под названием localStorage. Для работы с ним также не нужно устанавливать сторонние компоненты и модули. Немного отличаются используемые команды: setItem вместо setData и getItem вместо getData. Остальное аналогично. Первым аргументом передаем ключ, а вторым данные. Главное – не забывать в начале ставить ключевое слово localStorage.

Не забудьте убрать из кода импорты внешних модулей Geolocation и AsyncStorage.

Копируем код в веб-проект

После редактирования весь код можно скопировать в новый проект. Нам понадобится файл App.js и все компоненты, от которых он зависит. Также нам нужны использованные в приложении ассеты (картинки и другой медиаконтент). 

Можно воспользоваться любым сборщиком, используемым в веб-разработке. Также можно создать новый проект через Create React App либо загрузить готовый шаблон Vite с React и другими компонентами (их можно найти в блоке GitHub Vite Awesome).

Создаем новый проект по инструкции, запускаем команду npm install, чтобы скачать все зависимости, и меняем содержимое директории src на те файлы, что мы использовали при разработке мобильной версии приложения. 

После этого при запуске команды npm run dev у нас должно запуститься окружение для разработки приложения в браузере. Здесь можно его протестировать и доработать, если не все элементы интерфейса «встали» ровно. 

Деплоим проект на любом хостинге

Так как мы планируем отправлять приложение в веб, то нужно найти для него хостинг. То есть сервер, где будет запущена программа. Мы уже обсуждали то, как можно создать сборку приложения и задеплоить ее на серверах Timeweb.

Будет интересно: Блог на Svelte. Часть 4: Деплой

Вместо заключения

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

Если возникнут дополнительные вопросы, обязательно оставляйте их в комментариях. Все возникшие проблемы постараюсь решить как можно скорее!