Эта статья была спонсирована Wix . Спасибо за поддержку партнеров, которые делают возможным использование SitePoint.
Вы, наверное, уже знаете, что Wix — это облачная платформа веб-дизайна, которая позволяет пользователям создавать потрясающие HTML5-сайты с помощью онлайн-редактора перетаскивания.
Wix Code выводит Wix на новый уровень, превращая его в открытую платформу для создания надежных, насыщенных контентом сайтов и веб-приложений. С Wix Code Wix становится мощным и расширяемым инструментом для веб-разработчиков.
Wix Code добавляет кучу новых функций и возможностей в Wix:
- Базы данных
- Динамические страницы
- Повторяющиеся макеты
- Пользовательские формы
- Встроенная онлайн IDE
- Пользовательские взаимодействия с использованием наших API и JavaScript
- Доступ к сторонним API
- Вызвать код бэкенда из внешнего интерфейса с помощью веб-модулей
- Функции HTTP: представление функциональности вашего сайта как службы с вашим собственным API
И, не забывайте, это все еще Wix, так что все без проблем:
- Это без сервера : все эти дополнительные функции доступны в безсерверной среде, которая позволяет вам выполнять свою работу без каких-либо обычных проблем, связанных с разработкой полного стека.
- Просто кодируйте и работайте : Wix Code имеет встроенную интерактивную среду IDE и бэкэнд, так что вы можете просто добавить нужный код на свою страницу или на свой сайт, опубликовать его, и все готово.
Все эти новые функции означают, что вы можете думать о том, какой тип сайта вы хотите построить на Wix, совершенно по-новому. Давайте рассмотрим пример.
Вы хотите построить полноценный сайт по недвижимости, где пользователи могут просматривать ваши предложения и искать по местоположению или другим функциям недвижимости? Вы, вероятно, не хотите создавать отдельную страницу для каждого списка, верно? Вы также можете позволить своим клиентам подписаться на рассылку новостей.
Как насчет того, если на том же сайте вы хотите предоставить своим агентам доступ к специальным страницам с правами администратора, чтобы они могли добавлять или обновлять списки в базе данных? Может быть, им также нужно вести базу данных всех своих клиентов?
Может быть, вам нужно подключить свой сайт к существующей базе данных? Что если у вас есть специальное мобильное приложение, и вы хотите, чтобы ваш сайт интегрировался с ним? Конечно, вы хотите, чтобы любые изменения, внесенные вами или вашими агентами, вступили в силу в реальном времени.
Wix Code делает все это возможным. Используя комбинацию функций Wix Code, наших API и JavaScript, которые вы добавляете, вы можете заставить свой сайт Wix вести себя именно так, как вам нужно. Вы даже можете представить свой сайт в качестве службы или использовать его исключительно в качестве бэкэнда для внешнего приложения.
И все это в экосистеме Wix, поэтому оно размещено, безопасно и SEO-совместимо, и вам никогда не придется беспокоиться о масштабируемости.
С Wix Code вы можете использовать все потрясающие шаблоны и опции стилей от Wix, а также добавлять дополнительные функции и код, чтобы сделать ваш сайт еще более привлекательным. Таким образом, вы можете сосредоточиться на забавной части работы вашего сайта именно так, как вы хотите.
Базы данных
Представьте наш сайт по недвижимости. Возможно, вам нужна одна база данных для ваших доступных свойств, одна для ваших агентов, а другая для ваших клиентов. Но вам нужно будет связать ваших агентов со свойствами, с которыми они работают, а также связать потенциальных клиентов с каждым свойством.
Теперь с Wix Code вы можете добавить базу данных с несколькими коллекциями на ваш сайт. База данных Wix Code автоматически интегрируется в ваш сайт Wix, так что вам не нужно ничего настраивать — мы делаем все волшебство для вас. Как только вы создадите коллекцию, она станет доступной для использования с элементами вашего сайта, для отображения или хранения данных, без написания строки кода.
Вы также можете создавать сложные структуры данных со ссылочными полями, чтобы одна коллекция могла ссылаться на записи или то, что мы называем элементами , в другой коллекции. База данных Wix Code также включает модель разрешений, которая дает вам контроль над тем, какие посетители могут взаимодействовать с вашими данными и что им разрешено делать.
После настройки ваших коллекций вы можете использовать наш API wix-data для управления вашими данными. Это позволяет вам запрашивать вашу коллекцию с длинным списком функций для контроля результатов вашего запроса. Он даже имеет функции ловушки, так что вы можете добавить собственный код, который выполняется до или после различных действий с вашими данными.
Одна из самых мощных вещей, которые вы можете сделать с коллекцией, — это использовать ее содержимое на динамических страницах, так что давайте поговорим об этом позже.
Динамические страницы
Вернуться к недвижимости. Когда ваши пользователи просматривают ваш сайт, вы хотите, чтобы они могли просматривать выделенную страницу для каждого свойства. Каждый листинг должен отображаться с использованием одинакового макета с одинаковыми базовыми элементами. Вам просто нужно изменить содержимое этих элементов, чтобы каждая страница имела уникальный URL-адрес. Это то, что делают динамические страницы .
Когда вы создаете динамическую страницу, вы создаете один макет страницы, который используется каждый раз, когда ваш сайт вызывает эту страницу. И каждый раз, когда он вызывается, он отображает содержимое другого элемента в вашей коллекции со своим собственным URL.
Теперь вам больше не нужно создавать уникальную страницу, когда у вас есть много данных, которые вы хотите отобразить таким же образом. Просто создайте динамическую страницу, подключите ее к своей коллекции, и вы автоматически получите уникальную страницу с собственным URL для каждого элемента в вашей коллекции. И всякий раз, когда данные вашей коллекции изменяются, содержимое вашей страницы меняется автоматически.
Динамические страницы и SEO
Содержимое динамических страниц может меняться при каждом отображении страницы, и вам нужно, чтобы поисковые системы и социальные сети индексировали эту страницу для любого содержимого, которое она могла отображать. Настройки SEO для динамических страниц позволяют вам контролировать, как индексируются ваши страницы, и позволяют ссылаться на данные в ваших коллекциях для индексации.
Вы можете контролировать заголовок страницы, описание, ключевые слова и социальные изображения, используя данные из вашей коллекции, связанные с вашей страницей. Вы также можете скрыть страницу от результатов поиска, если хотите.
Повторяющиеся макеты
Заставлять пользователей просматривать свои списки по одной странице за раз — не лучший опыт для пользователей. Вы действительно хотите показать краткий обзор всех ваших записей на одной странице, которая служит индексом. Каждый снимок будет иметь одинаковые элементы и макет, только с разным содержанием. Затем ваш пользователь может щелкнуть один из них, чтобы перейти на уникальную динамическую страницу этого списка. Повторяющиеся макеты делают это легко.
Повторяющийся макет или повторитель — это элемент, отображающий несколько элементов с использованием одного макета. Вы создаете макет, который вам нравится, и затем каждый элемент повторителя использует тот же макет для отображения разного контента.
Элементы повторителя функционируют как контейнеры и просты в разработке. Вы присоединяете к ним другие элементы, и тогда любое изменение, которое вы вносите в один элемент повторителя, автоматически отражается во всех остальных.
Вы можете использовать повторители для отображения статического содержимого или подключить элементы в повторителе к вашим данным в коллекции. Это динамически отображает ваш контент, при этом ретранслятор создает один повторяющийся элемент для каждого элемента в вашей коллекции.
После того, как вы настроили свой ретранслятор, вы можете настроить пользовательский интерфейс с помощью некоторого кода. Может быть, вы хотите дать своему пользователю возможность фильтровать то, что отображает ретранслятор? Или, может быть, ретранслятор должен отображать результаты поиска по вашим данным?
Вы также можете использовать код для управления поведением и внешним видом ретранслятора в зависимости от активности пользователя. Помните, что элементы Wix — это только ваша отправная точка — добавление кода с помощью наших API-интерфейсов — вот то, что действительно может проявить ваше творчество
Пользовательские Формы
Теперь вы хотите, чтобы ваши клиенты подписались на вашу рассылку. Или, может быть, вы хотите создать внутреннюю форму, которая облегчит вашим агентам добавлять или изменять списки. Ваши пользовательские формы должны иметь базовые элементы ввода, но вы также хотите позволить пользователям загружать файлы или изображения. Вам также нужна разная информация, чтобы попасть в разные коллекции.
Код Wix добавляет элементы пользовательского ввода в редактор Wix. Эти элементы позволяют собирать информацию, которую вводят ваши пользователи, и сохранять ее в коллекции. Затем вы можете использовать эти данные на своем сайте.
Новые элементы ввода включают ввод текста, переключатели, раскрывающиеся списки, флажки, средства выбора даты, кнопку загрузки файла и многое другое.
Используя эти элементы, вы можете создать любую форму, какую захотите. Вы также можете отображать существующие данные, чтобы пользователи могли изменять контент, который они уже отправили.
Вы также можете добавить код в вашу форму. Это позволяет вам настраивать форму, чтобы точно соответствовать вашим потребностям. Вы можете создавать каскадные выпадающие списки, добавлять пользовательские проверки, создавать многоступенчатые формы, а также сворачивать и расширять разделы форм на основе пользовательского ввода.
Встроенная IDE
Wix Code включает встроенную онлайн-среду разработки, которая позволяет легко добавлять код на ваш сайт с нулевой настройкой. Эта IDE работает для ваших интерфейсных файлов и позволяет вам добавлять код для конкретной страницы или код, который вы хотите запустить на всем сайте. Вы также можете использовать IDE для добавления кода в бэкэнд-файлы, такие как перехватчики данных, пользовательские маршрутизаторы, веб-модули и функции HTTP.
IDE упрощает кодирование, поскольку весь ваш код автоматически интегрируется с вашим сайтом. В среде IDE также есть профессиональные инструменты для упрощения кодирования. К ним относится завершение кода, поэтому, если вы введете $ (часть нашего синтаксиса идентификатора элемента), а затем нажмете Ctrl + пробел, откроется всплывающее окно со списком всех элементов на вашей странице. Выбрав элемент, вы можете снова использовать Ctrl + пробел, чтобы получить список всех свойств и функций, связанных с этим элементом. Кроме того, IDE также предоставляет обратную связь JSLint, чтобы помочь вам кодировать, используя лучшие практики.
Чтобы упростить отладку, все сообщения, которые вы регистрируете на консоли в интерфейсе, отображаются при предварительном просмотре сайта в консоли разработчика в режиме предварительного просмотра Wix. Журналы внутреннего кода можно увидеть в консоли инструментов разработчика вашего браузера.
Пользовательские взаимодействия
Со всеми этими новыми возможностями вы, возможно, захотите, чтобы ваш сайт делал то, что мы не предоставили «из коробки». Теперь пришло время по-настоящему погрузиться в кодовую часть Wix Code.
Код Wix предоставляет API, которые дают вам контроль над всеми аспектами вашего сайта Wix. Используйте $ w для добавления пользовательских взаимодействий к элементам вашего сайта, wix-набор данных для управления контентом, отображаемым на ваших страницах, wix-пользователи для идентификации вашего текущего пользователя и его типа, а также множество других API.
Все это означает, что вы имеете полный контроль над пользовательским интерфейсом вашего сайта. Все, что вам нужно сделать, это добавить немного JavaScript, и вы сможете повысить заинтересованность пользователей новыми и интересными способами.
Доступ к сторонним API
Мы упоминали о подключении вашего сайта к существующей внешней базе данных. Если у этой базы данных есть собственный API, вы можете использовать код для ее выполнения.
Код Wix позволяет получить доступ к сторонним веб-сервисам . Вы можете использовать наш модуль wix-fetch для вызова службы или использовать модули Node.js http, https и net.
Вы можете позвонить в сторонние службы во внешнем интерфейсе или, если вам необходимо обеспечить безопасность, просто добавьте его в свой внутренний код. Затем вы можете использовать наши веб-модули для вызова кода вашего бэкенда из внешнего интерфейса.
Веб-модули
Доступ к внешнему сервису с использованием его API, вероятно, означает использование в запросе собственного закрытого ключа API. Это не то, что вы хотите вставить в свой код переднего плана, хотя вы можете захотеть инициировать этот вызов из переднего плана.
У вас также может быть другой код, который вам нужен для запуска на стороне сервера из-за проблем безопасности или из-за того, что он вызывает другие веб-сервисы. Веб-модули Wix упрощают взаимодействие с внешним и внутренним интерфейсом.
Веб-модули позволяют вам писать функции, которые выполняются на стороне сервера в бэкэнде, которые вы можете легко вызвать в своем коде переднего плана. Код Wix обрабатывает все взаимодействия между клиентом и сервером, необходимые для включения этого доступа.
Вам интересно, можно ли отладить эти функции? Ага. Даже если ваш код работает на стороне сервера, вы все равно можете записывать сообщения на консоль в коде веб-модуля. Эти журналы отображаются в консоли браузера.
Вы беспокоитесь о том, что, возможно, в дизайне вашего сайта есть недостатки безопасности, и кто-то все же может получить доступ к вашему внутреннему коду? Веб-модули также имеют настройки разрешений, так что вы можете быть уверены, что никто не сможет получить доступ к вашему внутреннему коду или использовать его так, как вы этого не предполагали, с помощью функциональности вашего сайта или с помощью инструментов разработчика браузера.
Если вам интересно, вот что происходит за кулисами. Когда вы импортируете веб-модуль на стороне клиента, вы получаете функцию прокси для функции веб-модуля. Эта прокси-функция использует XMLHttpRequest для вызова функции в бэкэнде. Среда выполнения прослушивает эти вызовы и вызывает соответствующую функцию. Аргументы и возвращаемое значение сериализуются с использованием JSON.
Функции HTTP
Ваши агенты по недвижимости не гуляют весь день со своими ноутбуками. Они работают со своих смартфонов, и у вас уже есть специальное мобильное приложение, которое позволяет им управлять своей рабочей нагрузкой.
Как вы даете этому приложению доступ к функциональности вашего сайта? Как насчет совместного использования вашего бэкэнда? Интегрируете свой сайт с инструментами автоматизации? Для этого вам необходимо представить функциональность вашего сайта как сервис. Вы делаете это с помощью функций Wix HTTP .
С помощью функций HTTP вы определяете API для вашего сайта, который другие люди или службы могут использовать для доступа к функциональности вашего сайта. Вы можете создавать функции получения, публикации, размещения, удаления и использования, которые представляют собой запросы, которые ваш сайт может получать от внешнего ресурса.
Затем вы добавляете код в свои функции, чтобы настроить то, что они делают, и используете API wix-http-functions, чтобы настроить то, что они возвращают в качестве ответа.
Заворачивать
Теперь вы можете понять, почему мы так взволнованы по поводу Wix Code. Wix Code — это первая безсерверная платформа, специально предназначенная для веб-сайтов и веб-приложений. Это позволяет вам создавать надежные, оптимизированные для SEO и содержательные сайты на открытой платформе, которую вы можете кодировать и расширять. А поскольку это Wix, он без проблем, хостинг и безопасность, поэтому вы можете сосредоточиться на том, что вам нравится.