Использование конденсатора

Ищете способ преобразовать существующее приложение Angular в мобильное приложение без необходимости переписывать все с нуля? Что ж, вы пришли в нужное место. В этой статье мы будем использовать Конденсатор для достижения этой цели.

Предпосылки

Прежде чем мы начнем, обязательно настройте свою среду, установив следующие зависимости:

Что такое конденсатор?

Capacitor — это кроссплатформенная собственная среда выполнения для создания современных веб-приложений, которые могут с легкостью работать на iOS или Android. Он предлагает такие интересные функции, как поддержка PWA, Capacitor CLI и потрясающие плагины.

Ознакомьтесь с документами, чтобы узнать больше.

1 — Создать новое угловое приложение

Для простоты мы просто конвертируем сгенерированный угловой проект из CLI.

ng new angular-mobile-app

Приведенная выше команда CLI создаст и инициализирует новое приложение Angular из коробки.

Когда генерация завершится, перейдите в каталог проекта и введите следующую команду, чтобы запустить сервер разработки:

cd angular-mobile-app
ng serve

Теперь перейдите в свой браузер и введите http://localhost:4200, вы должны увидеть страницу ниже, если все прошло хорошо.

2 — Добавьте конденсатор в свой проект

Теперь, когда у нас есть работающее веб-приложение, следующим шагом будет установка зависимостей @capacitor/core и @capacitor/cli с помощью следующих команд npm:

cd angular-mobile-app
npm install @capacitor/core
npm install @capacitor/cli

3 — Настройте файл конфигурации конденсатора

После установки зависимостей конденсатора выполните следующую команду, чтобы сгенерировать файл capacitor.config.ts:

npx cap init

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

Сгенерированный файл будет выглядеть примерно так:

  • appId: уникальный идентификатор упакованного приложения.
  • appName: название вашего приложения.
  • webDir: Каталог ваших скомпилированных веб-ресурсов.
  • bundledWebRuntime:Стоит ли копировать пакет среды выполнения Capacitor или нет.

Примечание. Обязательно измените значение webDir на dist/(your app name), так как это обычный путь сборки для приложения Angular. Теперь конденсатор сможет найти веб-активы.

4 — Добавьте нативные пакеты для iOS и Android

Следующим шагом является установка соответствующих пакетов для iOS и Android, а затем добавление нативных проектов с помощью следующих команд:

npm install @capacitor/ios @capacitor/android
npx cap add ios
npx cap add android

После выполнения приведенных выше команд CLI вы должны увидеть две новые папки, созданные как для Android, так и для iOS.

5 — Создайте свое приложение

Давайте теперь создадим наше приложение Angular и синхронизируем изменения с собственными проектами Android/iOS, выполнив следующие команды:

ng build --prod
npx cap sync

npx cap sync скопирует папку сборки в проект iOS/Android.

6 — Откройте Android Studio или Xcode

Вы можете напрямую открыть мобильный проект в Android Studio или Xcode с помощью следующей команды в своем проекте:

npx cap open ios
npx cap open android

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

Теперь следующим шагом будет использование Android Studio или Xcode для развертывания вашего приложения непосредственно на подключенном или виртуальном устройстве.

В моем случае я использую Android Studio. Как вы можете видеть на изображении ниже, я выбираю эмулятор Pixel 4.

Наконец, нажмите кнопку запуска или отладки, чтобы запустить приложение.

7 — Запустите приложение!

Подведение итогов

Как видите, Capacitor очень эффективен при преобразовании существующего углового приложения в родное мобильное приложение.

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

Спасибо за чтение и увидимся в следующем!