Wix снова рулит: функционал для редактирования кода страниц и создания БД

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Сегодняшний пост будет полезен всем, кто задумывался как создать свой сайт. Если лет двадцать назад кто-то сказал, что с телефона можно будет не только звонить, но и фотографировать, смотреть на нем фильмы и слушать музыку, то многие покрутили бы пальцем у виска.

Теперь говорят, что создание сайтов в конструкторе включает в себя возможность редактирования кода пользователем. Я уже «приставил» палец к виску, но потом обратил внимание, что автором «новодела» является Wix. От этого можно всего ожидать, поэтому лучше проверить!

Замахнулись на главное

Главным недостатком любого конструктора сайтов общепризнанно отсутствие «выхода» к коду. Но если «нейтрализовать» эту проблему, тогда Wix превратится в облачную CMS. Или уже превратился?

Новый инструмент называется Wix Code. Насколько его реализация удалась, мы убедимся с вами на собственном опыте: полазим, поклацаем что да как! Ну а пока краткий обзор того, что умеет новое средство:

1. Создание баз данных – слыхали о таком функционале на других конструкторах? Вот и я тоже слышу впервые!
2. Создание собственных форм – пользователь получает возможность конструировать собственные нативные веб-формы, а не на основе шаблонов.
3. Динамические веб-страницы – разработка и запуск множества веб-страниц на базе одного созданного дизайна. При этом для каждого образца можно установить уникальный URL, SEO-настройки и присвоить отдельную категорию.
   
4. Повышение интерактивности сайта – для этого используются различные слайдеры, виджеты, кнопки скрытия элементов интерфейса и т.д.
5. Wix Code APIs– представляют собой внутренние API для подключения к сайту нативных приложений конструктора. Их настройка производится через редактирование кода JavaScript.
6. Расширенная поддержка сторонних API – Wix расширил возможности интеграции со сторонними сервисами. Теперь для их подключения навыки программирования не обязательны.
   

Доступно пока не всем

На момент написания статьи команда конструктора продолжала бета-тестирования Wix Code. То есть, пока новый функционал доступен только ограниченному числу пользователей платформы.

Думал, что не пробьюсь, или что на это понадобится дней пять. Чтобы принять участие в тестировании Wix Code, нужно перейти на лендинг, посвященный запуску инструмента. После этого нажать на ссылку «Apply for Beta».

*при клике по картинке она откроется в полный размер в новом окне

Заполнить анкету на участие в «тестовых заездах». В ней указать имя, адрес сайта, название компании. А также род своей деятельности и кто вам поведал о запуске Wix Code: социальная сеть, СМИ или другой источник.

Ну, думаю, все – не проканает! Застрял на процедуре рассмотрения своей заявки. «Крутить» ее будут дней пять-шесть, не меньше. Но для очистки совести все-таки заполнил анкету и пошел заливать «горе» очередной чашкой чая.

Пока «вливал», на указанную почту пришло письмо, информирующее, что я зачислен в команду «тестировщиков» Wix Code. На радостях даже успел обжечься и подавиться чаем 🙂 .

Стартуем!

Мне ничего не остается, как начать тестировать новый инструмент, и «обожженным» на обзорах других конструкторах языком поведать вам о тонкостях реализации Wix Code.

После авторизации в Wix в верхнем левом углу (на главной странице админки) нажмите ссылку «Мои сайты». Во всплывающей боковой панели выберите нужный и перейдите по ссылке «Редактировать».

В окне редактора веб-страниц в верхнем меню выберите пункт «Инструменты». Расширьте набор средств, активировав параметр «Инструменты разработчика».

*при клике по картинке она откроется в полный размер в новом окне

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

Обозреваем новые чудеса Wix

Новый функционал размещен в трех пунктах бокового меню. Главная составляющая, редактор кода, расположен в отдельном фрейме внизу рабочей области. Ознакомимся с каждым нововведением по отдельности.

*при клике по картинке она откроется в полный размер в новом окне

1. Редактор кода JavaScript – позволяет привязать к конкретному элементу страницы или сайта событие. Для этого достаточно выделить нужную структуру дизайна и в меню правой клавиши выбрать пункт «View Properties».

   
   *при клике по картинке она откроется в полный размер в новом окне

   В панели «События» выбрать событие, перейти в редактор кода и кликнуть в нужном месте. После чего обработчик будет автоматически добавлен в общий скрипт.

   
   *при клике по картинке она откроется в полный размер в новом окне
2. Добавление внешних скриптов – через раздел «Public» пользователь может создать внешние скрипты и размещать их в отдельных папках. Для этого нажмите на ссылку «Добавить новый файл».

   

   Затем задайте имя файла скрипта и можете приступать к написанию программного кода в специализированном редакторе с подсветкой и валидацией синтаксиса.

   
   *при клике по картинке она откроется в полный размер в новом окне

   Также реализована консоль разработчика для отладки и тестирования кода. Она доступна в режиме предпросмотра.

   
   *при клике по картинке она откроется в полный размер в новом окне
3. Создание модулей – веб-модули являются основным средством, с помощью которого пользователь Wix может реализовать интеграцию своего кода, взаимосвязь с другими скриптами и их выполнение в front-end сайта. Инструмент для создания модулей расположен в разделе «Backend».

   
   *при клике по картинке она откроется в полный размер в новом окне

   Более подробно модель построения веб-модулей и работа с ними описана в соответствующих разделах справки конструктора.
4. Коллекции баз данных – это один из самых «завораживающих» моментов всего обзора. Только вдумайтесь: полноценная база данных в конструкторе сайтов!

   

   Для создания БД перейдите в раздел меню «Collection».

   

   Схема работы с базами данных в Wix Code.

   Сначала задаем имя коллекции.

   

   Затем выбираем шаблон БД.

   

   Создаем, заполняем таблицу и настраиваем доступ к данным, которые в ней содержатся.

   
   *при клике по картинке она откроется в полный размер в новом окне

   После этого привязываем коллекцию к нужному элементу на странице и выводим информацию из БД.

   
   *при клике по картинке она откроется в полный размер в новом окне

   В новой (тестируемой) версии редактора Wix после щелчка по любому из элементов дизайна страницы выводится значок стека. Клик по нему позволяет подключить любую из коллекций, созданных пользователем.

   
   *при клике по картинке она откроется в полный размер в новом окне

Палец в сторону!

Все возможно! Это же Wix! Поэтому я убираю палец – крутить им у виска нет причины! Wix Code рулит, хотя пока не для всех. Но судя по тому, что уже подготовлена техническая документация по новому функционалу, то воспользоваться им скоро сможет каждый user конструктора. Точнее, уже облачной CMS 🙂 .