Slater: способ писать и править Custom Code в Webflow быстро и с удовольствием
Даже небольшой Custom Code писать и править в интерфейсе Webflow душно: каждый раз приходится открывать настройки страницы, править код в неудобном интерфейсе, кликать Save, затем Publish, ждать – все это занимает какое-то время. С ИИ редактором Slater и работа пойдет быстрее, и ошибок станет в разы меньше, а ⌘S + ⌘R занимает 2 секунды.
Подключаем ИИ редактор кода Slater к Webflow в этой статье 🤙
Преимущества интеграции
- Slater позволяет дизайнерам и разработчикам работать над проектом параллельно, не выходя из аккаунта каждый раз, когда надо передать доступ. Благодаря возможности редактирования и тестирования кода в реальном времени из Slater, разработчики могут избегать рутинного цикла публикации и проверки. Просто добавьте в Webflow ссылку на проект Slater и работайте над дизайном, пока разработчик дописывает и тестит код на опубликованном сайте.
- Встроенная ИИ-поддержка в Slater помогает новичкам осваивать JavaScript, предоставляя объяснения и обучающие материалы, что делает его отличным инструментом для обучения, без необходимости ходить за советами по коду к ChatGPT. ИИ проведет дебаг, проверит и допишет код по промпту прямо в редакторе.
- Slater устраняет необходимость в использовании внешних инструментов, таких как VSCode или GitHub, объединяя все функции в одном приложении, что делает процесс более удобным и эффективным.
Быстрое внесение изменений. Код на сайте можно обновить, нажав ⌘S в Slater и ⌘R в браузере. Опытные товарищи открывают Slater на соседнем мониторе или делят экран, что очень удобно.
Процесс подключения
Этапы просты: нужно зарегистрироваться в Slater и создать новый проект, подключить его к Webflow, добавить в Webflow смарт скрипт и опубликовать сайт. На практике для подключения вам нужно пройти 15 экранов. Это займет около 3х минут:
1. Идем на сайт за регистрацией
2. Начинаем пробную версию
На один аккаунт дается три проекта в staging (webflow.io) и production (ваш собственный домен), до 30 файлов с доступом к редактированию и 100 сообщений AI (GPT 3.5)
3. Регистрируемся в Slater
Стандартно: имя, емейл и два одинаковых пароля
4. Создаем в Slater команду Create Team
Добавьте название команды, чтобы начать работу над проектами с новой командой.
5. Создаем проект Start a project
6. Выбираем Connected to Webflow
Подключение к проекту Webflow (необязательно). Интегрируйте ваш Slater с Webflow, чтобы легко связать файлы Slater со страницами Webflow. Выберите все проекты, которые вы хотите интегрировать со Slater.
7. Вход в аккаунт Webflow
8. Выбор рабочего пространства Webflow
Авторизуя это приложение, вы соглашаетесь с тем, что данные выбранных сайтов или рабочих пространств будут передаваться стороннему приложению в соответствии с действующими Условиями предоставления услуг и Политикой конфиденциальности.
9. Создайте проект в Slater
10. Откройте созданный проект из дашборда
11. Проверьте подключение к Webflow
В левой боковой панели выберите значок настроек и убедитесь, что в подключении отображается ваш сайт с зеленым значком Webflow
12. Скопируйте Smart Script
Это ссылка на подключение созданного проекта Slater из Webflow
13. Добавьте Smart Script в Webflow
Откройте настройки страницы и добавьте скопированную ранее ссылку в окошко Before </body> tag. Сохраните настройки страницы.
14. Опубликуйте проект Webflow
15. Создайте JS файл в Slater
В левой боковой панели выберите значок страницы, кликните New File и задайте параметры.
Все готово к работе с кодом! Добавьте код в файл, нажмите ⌘S и следите за изменениями на опубликованном сайте.
Проверить подключение можно с помощью простой строчки кода, например, Alert сообщение. Если все подключено верно, то при обновлении сайта будет отображаться попап с сообщением. После проверки этот код можно удалить.
Теперь вы можете использовать Slater для написания и тестирования JavaScript-кода непосредственно в вашем проекте Webflow. Вы можете задавать вопросы Slater для получения кода, а также получать объяснения написанного кода, что поможет вам лучше понять JavaScript.
Следуя этим шагам, вы сможете быстро подключить Slater к вашему проекту на Webflow и использовать его возможности для разработки веб-сайтов с меньшими затратами времени и усилий.
Не бойтесь кода и дерзайте! 🤙