Создаем мобильное приложение на 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.
    Меню для создания новых схем в Xcode
  • Затем нажимаем на New scheme…
  • Даем ей название, меняем Build Configuration на Release и сохраняем.

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

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

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

Разработчики из Facebook также отмечают, что запустить процесс сборки можно прямую из командной строки, используя стандартную утилиту React-Native. Правда, она в любом случае запустит Xcode, но не придется лезть в его меню. Останется лишь открыть командную строку и ввести npx react-native run-ios —configuration Release

Ознакамливаемся с правилами 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. Можно загрузить сразу несколько сборок, если это необходимо.
    App Store Connect
  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. Тогда в конфигурационный файл необязательно добавлять пароли, что указаны выше.

Важно не забыть исключить эти данные из публикуемых в git. Можно прописать соответствующую команду в файле .gitignore либо добавить ключи и пароли в список глобальных переменных Gradle. То есть тех, что хранятся в корневой директории пользователя системы, в папке .gradle.

Меняем конфигурацию 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. Многие программы можно создавать гораздо быстрее, а также в разы упростить обновление и добавление новых функций, потому что вам придется делать это единожды.

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

Related Posts
AllEscortAllEscort