Создание сайта с Wix Code: обзор

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

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

Wix Code упрощает создание веб-приложений и надежных сайтов, не требуя наличия сервера, позволяя компаниям сократить время, необходимое им для настройки и поддержки сайтов, а разработчикам сосредоточиться на других процессах. Пользователь может создавать коллекции в базе данных и наполнять страницы разнообразным контентом, добавлять собственные формы и полностью управлять поведением сайта. Есть возможность использовать встроенный API, а также прикреплять любые сторонние API. Все эти возможности доступны в новых компонентах привычного визуального редактора. Вносимые изменения остаются совместимы с SEO (поисковой оптимизацией сайта). Систему можно развернуть в один клик мыши, благодаря встроенной базе данных, back-end JavaScript и IDE, размещенных в безопасном облаке Wix.

Wix Code значительно расширяет рынок, предлагая разработчикам и дизайнерам решение для создания веб-приложений, которые могут адаптироваться для любых потребностей бизнеса,

- сказал Авишай Абрахами, соучредитель и генеральный директор Wix.com.
С помощью Wix Code мы уже создали инфраструктуру и предоставляем платформу свободной и гибкой для пользователей, чтобы быстро создавать пользовательские решения, обычно связанные с настройкой и обслуживанием.

Прежний набор функций редактора всегда доступен по умолчанию, если пользователю нет необходимости в использовании новой функциональности. Если же есть желание попробовать, знайте, что большинство функций Wix Code не требуют технических знаний или кодирования. Непрофессионалы могут настраивать базу данных, компоненты пользовательского интерфейса, формы ввода и элементы управления с помощью технологии перетаскивания (drag&drop).

Давайте подробнее рассмотрим на конкретном примере преимущества, которые дает новая платформа.

Пример использования и особенности Wix Code

Предположим, вы владелец интернет-магазина и хотите отображать товары на разных страницах вашего сайта. Ранее было нужно вручную дублировать каждую страницу, делать копирование-вставку текста и фотографий, которые хотели включить. Теперь, с помощью Wix Code можно наполнять коллекцию в базе данных, которую также легко редактировать, как обычную электронную таблицу. В базу можно добавлять все товары, изображения к ним и любой другой сопутствующий контент. Затем, можно создать шаблоны страниц, которые будут адаптироваться к каждому товару из коллекции. Это называется «Динамическими страницами». Эта возможность очень экономит время и позволяет создавать более крупные и сложные сайты. Рассмотрим ниже ряд основных особенностей Wix Code:

База данных и коллекции

База данных вашего сайта состоит из коллекций, содержащих разнообразный контент страниц (например, информацию о продуктах), а также информацию о пользователях. Каждая коллекция может рассматриваться как таблица данных. Каждая строка в таблице является элементом в коллекции, и каждый элемент содержит поля, которые определяются столбцами вашей коллекции. Вы можете выбирать, как и где использовать эти данные на своем сайте, и контролировать, кто может добавлять, редактировать и просматривать его. Управление контентом не влияет на дизайн. Можно добавлять и редактировать весь текст и изображения в коллекциях базы данных, без влияния на внешний вид сайта.

Коллекция в базе данных Wix Code
Коллекция в базе данных.

Посетителям можно разрешить работать с данными в коллекциях базы данных. Например, сайт может иметь раздел обратной связи, в котором пользователи могут публиковать комментарии, которые сохраняются в коллекцию. Можно разрешить одним пользователям добавлять комментарии, другим - только читать комментарии, а некоторым – редактировать существующие комментарии. Модель разрешений дает вам контроль над тем, какие пользователи могут взаимодействовать с данными в ваших коллекциях и что им разрешено делать. Разрешения устанавливаются для каждой коллекции.

Каждая из ваших коллекций имеет две отдельные, но связанные версии. Один экземпляр - данные песочницы вашего сайта, а другой - данные вашего сайта в реальном времени. Данные песочницы - это то, с чем вы работаете, при разработке своего сайта. Живые данные - это то, с чем взаимодействуют ваши пользователи при публикации сайта. Это позволяет сначала внести все необходимые изменения в базу данных, а затем опубликовать их для посетителей сайта.

Динамические страницы

Динамические страницы отличаются тем, что для них используется шаблон с единым стилем дизайна. Можно создавать сотни новых страниц с настраиваемым URL-адресом и уникальным контентом, но единым шаблоном. Например, для каждой страницы товаров интернет-магазина можно задать единый шаблон, и, редактируя этот шаблон, изменения автоматически применяются ко всем страницам товаров, без необходимости правки каждой из них.

Пользовательские формы ввода

Включить в сайт можно формы опросов, комментариев, отзывов, пользовательские анкеты и др. Любая форма может содержать различные элементы, такие как: радио-кнопки, флажки, выпадающие меню, текстовые элементы, кнопки загрузки, таблицы. Элементы обладают интерактивными функциями и различными эффектами, что значительно улучшает вид и повышает удобство использования.

Все собранные от форм данные будут автоматически сохранены в базу данных и использоваться затем в любом месте сайта.

Взаимодействие с пользователями

К различным элементам страницы можно добавлять код JavaScript, для настройки их поведения в ответ на действия пользователя. Создать отклик можно для всего, что делает посетитель сайта, например: клик по кнопке, наведение курсора мыши на какой-либо элемент и т.д.. Это легко сделать, даже если вы не являетесь разработчиком JavaScript.

В примере, на скриншоте ниже, показано, как скрыть и показать разные элементы в зависимости от того, как пользователь взаимодействует со страницей: Пример взаимодействия с пользователями

Кликая по предметам, они появляются в рюкзаке. Скрытие предмета удаляет его отображение, но сохраняет пространство, в котором он располагался. Затем, если кликнуть на добавленный в рюкзак предмет, он вернется на прежнее место. Чуть ниже на представленном скриншоте видно, как здорово можно применить эту функцию к выбору расцветки представленного товара (в данном случае, рюкзака).

API

API-интерфейсы Wix Code позволяют полностью контролировать функциональность сайта. Применяется API для взаимодействия с элементами страницы, содержимым базы данных , а также для взаимодействия с внешними сервисами. API также предоставляет доступ к информации о сайте, его пользователях и многом другом. API-интерфейсы содержат множество примеров кода, которые помогут вам начать работу. Небольшой кусочек кода JavaScript и внутренний API значительно расширят функциональность сайта любого типа. Кроме того, можно использовать множество внешних API:

Внешние API Wix Code
Внешние API, которые можно использовать на сайте.

Выводы

Данное обновление всей платформы оказалось также большим прорывом в сфере конструкторов сайтов. Теперь Wix вправе можно считать полноценной CMS (системой управления сайтом) с большими возможностями по расширению функциональности как для обычных пользователей, так и профессионалов различного профиля.

На момент написания статьи, новый продукт проходит бета-тестирование. Зарегистрируйтесь, чтобы попробовать его в деле.

captcha