Использование конденсатора
Ищете способ преобразовать существующее приложение Angular в мобильное приложение без необходимости переписывать все с нуля? Что ж, вы пришли в нужное место. В этой статье мы будем использовать Конденсатор для достижения этой цели.
Предпосылки
Прежде чем мы начнем, обязательно настройте свою среду, установив следующие зависимости:
- Нодейс: https://nodejs.org/en/
- Угловой интерфейс командной строки: https://angular.io/cli
- Настройка мобильной разработки: https://capacitorjs.com/docs/getting-started/environment-setup
Что такое конденсатор?
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 очень эффективен при преобразовании существующего углового приложения в родное мобильное приложение.
Наличие одной кодовой базы для нескольких платформ — это важнейший навык в наши дни, позволяющий нам не только экономить время и деньги, но и повышать производительность. Наслаждаться!
Спасибо за чтение и увидимся в следующем!