Ускорение разработки конденсаторов с помощью Codekit
Live-перезагрузка собственного веб-просмотра с помощью Codekit
В настоящее время я работаю UX-инженером в Sworkit, занимаюсь проектированием и разработкой нашей следующей версии Sworkit с использованием Ionic v4, StencilJS и Capacitor.
Одним из ключевых преимуществ разработки гибридного приложения с использованием ionic framework является то, что я могу большую часть своей разработки выполнять в браузере. Однако это меняется, когда вы начинаете добавлять собственные плагины!
Эта проблема
На прошлой неделе я добавлял платежи iOS в наше гибридное приложение, а это означало, что я повторял этот рабочий процесс снова и снова ...
1. Change typescript 2. Wait for code to compile 3. Run `npx cap copy` (copy capacitor code to native ios project) 4. Open xCode, run new build 5. Wait for build to launch 6. Open safari dev tools 7. Test: watch logs, etc 8. Repeat
Этот процесс был действительно утомительным, особенно потому, что большинство изменений, которые я внес, были только изменениями файлов машинописного текста, а не собственными. Так что мне не нужно каждый раз перекомпилировать нативный код.
Мне хотелось просто перезагрузить веб-просмотр в реальном времени на реальном устройстве так же, как я разрабатываю на своей машине! Эта мысль напомнила мне о приложении Codekit, которое я использовал раньше! Codekit - это красивое приложение для Mac, которое выполняет перезагрузку в реальном времени, компилирует, минимизирует и оптимизирует ваш код… а также обслуживает ваш проект по URL-адресу, доступному в той же сети Wi-Fi.
Примечание. modemlooper указал, что вы можете включить перезагрузку в реальном времени в симуляторе, просто изменив URL-адрес сервера конденсатора.config на localhost, однако это не будет работать на собственном устройстве.
Как вживую перезагрузить ваш собственный веб-просмотр с помощью Capacitor & Codekit
1. Добавьте свой проект в Codekit
Я уверен, что можно создать собственный сервер для перезагрузки в реальном времени, но Codekit делает это очень просто. Если вы еще не пробовали, он определенно стоит 34 доллара. Загрузите кодекит, затем добавьте свой проект, перетащив папку www на Codekit.
2. Обновите URL-адрес сервера Capacitor.config.json
Сначала получите URL-адрес сервера Bonjour из codekit, нажав зеленую точку.
Добавьте этот URL-адрес сервера в файл capitor.config.json.
Шаг 3 (необязательно): запретите Codekit перекомпилировать ваш код
Если ваш код уже скомпилирован в папке www (например, StencilJS уже делает это за вас), вы можете отключить компиляцию javascript.
Шаг 4. Создайте с помощью xcode
Примените изменения к конфигурации конденсатора, выполнив:
npx cap copy npx cap open ios
Затем вы можете использовать симулятор или свое устройство. Убедитесь, что ваше устройство и ваша машина разработчика подключены к одному Wi-Fi. Как только приложение будет настроено на ваше устройство, вы сможете отсоединить шнур и по-прежнему выполнять перезагрузку в реальном времени (см. Гифку ниже)! Однако, как правило, мое устройство все еще остается подключенным, чтобы я мог выполнять отладку через Safari.
Заключение
Мы взяли исходный 8-шаговый процесс и сократили его вдвое, просто добавив наш собственный сервер перезагрузки в реальном времени в конфигурацию конденсатора. Обратите внимание, что вы захотите удалить это перед развертыванием в производственной среде :)
1. Change typescript 2. Wait for code to compile 3. Test: watch logs, etc 4. Repeat
Я надеюсь, что это ускорит ваш процесс разработки так же, как и мой! Если вы в конечном итоге настроите свой собственный сервер для перезагрузки, поделитесь подробностями!
