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

В этом простом руководстве мы только расскажем, как перенести (и обернуть) существующие веб-сайты в гибридное приложение и запустить его локально для устройств iOS.

Предпосылки

  • Загрузите и установите последнюю версию Node.js на свой компьютер со страницы https://nodejs.org/en/download/
  • Учетная запись Apple. Вы можете создать ее здесь. Это понадобится вам позже для сертификата подписи в Xcode.
  • Скачайте и установите Xcode из AppStore; если у вас уже есть Xcode, убедитесь, что он обновлен до последней версии.
  • Любой редактор текста/кода. (Я рекомендую использовать редактор Microsoft Visual Studio Code. Он бесплатный и — у него есть встроенный терминал. Но, пожалуйста, не позволяйте мне мешать вам использовать ваш любимый редактор текста/кода)😉
  • Существующий адаптивный веб-сайт.
  • Необязательно: устройство iOS.

Часть 1: Установка Cordova Apache

Откройте терминал и введите следующий код, чтобы установить модуль cordova с помощью утилиты npm Node.js. Модуль cordova будет автоматически загружен утилитой npm.

$ sudo npm install -g cordova
  • Префикс команды npm с префиксом sudo может быть необходим для установки этой утилиты разработки в другие каталоги с ограниченным доступом.

Часть 2: Создание приложения

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

$ cordova create project_name com.example.project_name ProjectName

После попадания в нужный каталог введите следующее в командную строку. В этом руководстве мы будем портировать простой шаблон портфолио, созданный с помощью Bootstrap 4, и назовем его приложением MyPortfolio.

$ cordova create MyPortfolio com.example.myportfolio MyPortfolio

Совет. Если вы используете код Microsoft Visual Studio (VSCode), вы можете напрямую открыть терминал в своем каталоге.

Добавление платформы iOS

В терминале введите сгенерированный каталог. В нашем случае это папка MyPortfolio.

$ cd MyPortfolio

Добавьте платформы для таргетинга вашего приложения, пока мы будем ориентироваться только на iOS.

$ cordova platform add ios

Чтобы проверить, какая платформа в данный момент используется в вашем проекте, запустите:

$ cordova platform ls

Примечание. При использовании CLI (интерфейса командной строки) для создания приложения вы не должны не редактировать какие-либо файлы в каталоге /platforms/. Файлы в этом каталоге обычно перезаписываются при подготовке приложений к сборке или при переустановке плагинов.

Часть 3. Развертывание в симуляторе (Xcode)

Для предварительного просмотра вашего приложения в симуляторе iOS на вашем компьютере уже должен быть установлен Xcode. Как только это будет сделано:

⑴Откройте файл рабочей области под platforms/ios/MyPortfolio.xcworkspace из Xcode или из командной строки, если хотите, запустите это на своем терминале:

$ open ./platforms/ios/MyPortfolio.xcworkspace/

Или, вы также можете открыть его прямо из контекстного меню 😅

⑵ После того, как вы открыли его, в Xcode убедитесь, что проект MyPortfolio выбран на левой панели (см. изображение ниже с пометкой A)

⑶ Затем выберите нужное устройство в меню «Схема» на панели инструментов, например. iPhone XR (обозначен буквой B)

⑷ Нажмите кнопку «Выполнить» (обозначена буквой C), это создаст, развернет и запустит приложение в симуляторе.

После сборки он запустит симулятор. Система может запросить разрешение на использование инструментов разработчика, просто введите пароль своего macbook, и все готово для тестирования на симуляторе.

Часть 4. Развертывание на устройстве iOS (через Xcode)

Далее мы собираемся протестировать развертывание приложения MyPortfolio на нашем локальном устройстве iOS. К настоящему времени вы должны были зарегистрировать учетную запись Apple. Сначала нам нужно будет использовать это для подписи нашего приложения.

Настройка профиля обеспечения:

⑴ В Xcode щелкните свой MyPortfolio в каталоге браузера и откройте вкладку «Общие» в центральной части приложения. Отсюда найдите раздел «Подписание».

⑵ Откройте раскрывающийся список «Команда» и выберите «Добавить учетную запись…», войдите в свою учетную запись Apple.

Развертывание на устройстве iOS:

Вы можете пропустить эту часть, если в данный момент у вас нет доступного устройства iOS.

⑴ Используйте USB-кабель для подключения устройства к вашему Mac.

⑵ Выберите имя проекта в раскрывающемся списке Scheme окна Xcode.

⑶ Выберите свое устройство в раскрывающемся списке Устройство.

⑷ Затем нажмите кнопку запуска.

⑸ После сборки вы можете столкнуться с этой ошибкой в ​​Xcode.

⑹ Для этого вам нужно перейти в настройки вашего телефона. Доверьтесь разработчику на своем телефоне, перейдя на свой Settings > Device Management > select Developer App Certificate, затем нажмите на доверие {developer}. Если после доверия и проверки разработчика и приложения оно не запускается, попробуйте снова создать его в Xcode.

Примечание. Убедитесь, что ваше устройство подключено к Интернету, чтобы проверить ваше приложение.

⑺ Запустите приложение со своего телефона.

Часть 5. Перенос вашего текущего веб-сайта в Cordova

Теперь, когда вы поняли суть, мы перенесем содержимое простого шаблона портфолио, созданного с помощью Bootstrap 4.

В папке www внутри папки вашего проекта вы найдете index.html , создайте резервную копию для этого файла, чтобы вы могли обращаться к нему позже. Теперь скопируйте все содержимое вашего существующего веб-сайта в папку www (включая yourassets ).

Будьте осторожны, чтобы не перезаписать существующие файлы Cordova:

  • www/css/index.css
  • www/cordova.js
  • www/js/index.js

Вот что вам нужно сделать, чтобы правильно перенести простой шаблон портфолио, созданный с помощью Bootstrap 4 в Cordova.

⑴ Тщательно обновите свой index.html, получив необходимые метатеги и ссылки на CSS (и даже метатеги charste) для Cordova.

<meta http-equiv=”Content-Security-Policy” content=”default-src ‘self’ data: gap: https://ssl.gstatic.com ‘unsafe-eval’; style-src ‘self’ ‘unsafe-inline’; media-src *; img-src ‘self’ data: content:;”>
<meta name=”format-detection” content=”telephone=no”>
<meta name=”msapplication-tap-highlight” content=”no”>
<meta name=”viewport” content=”initial-scale=1, width=device-width, viewport-fit=cover”>
<link rel=”stylesheet” type=”text/css” href=”css/index.css”>

⑵ Затем аккуратно добавьте необходимые файлы JavaScript для приложения.

<script type=”text/javascript” src=”cordova.js”></script>
<script type=”text/javascript” src=”js/index.js”></script>

Важно: если у вас несколько веб-страниц, вам необходимо применить это ко всем остальным страницам.

⑶ После этого ваш окончательный результат должен выглядеть примерно так:

⑷ Время создать приложение. В терминале введите следующую команду:

$ cordova build ios

⑸ Чтобы протестировать свое приложение, вы можете вернуться к Часть 4: Развертывание на устройстве iOS (через Xcode). Или просто откройте редактор Xcode и загрузите рабочее пространство MyPortfolio, выберите устройство и нажмите кнопку запуска.

Напоминания:

  1. Каждая страница должна содержать необходимые метатеги, css и скрипты для работы Cordova.
  2. Ваш веб-сайт должен быть адаптирован для мобильных устройств или выглядеть более похожим на нативное приложение.
  3. Если некоторые из ваших файлов размещены в Интернете (через CDN или где-либо еще), вам может потребоваться добавить их локально в папку вашего проекта. Кроме того, вы можете использовать сценарий для обработки онлайн- и офлайн-обнаружения.

На этом руководство по переносу существующего веб-сайта с помощью Cordova Apache для iOS завершено.