Руководство для начинающих по использованию Velo от Wix

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

С помощью Velo Wix расширяет свою пользовательскую базу, включая разработчиков. Velo — это полнофункциональная платформа для разработки, которая позволяет пользователям создавать отличные веб-сайты с помощью кода. Единственный язык программирования, который вам нужно знать, чтобы использовать Velo, — это JavaScript. Платформа поддерживает современные функции JavaScript и использует серверную систему на основе NodeJS.

В этой статье вы узнаете об уникальных функциях Velo и о том, как их использовать.

Возможности разработчика Velo

Платформа разработки Velo имеет встроенную среду IDE, позволяющую разработчикам писать код JavaScript и видеть изменения в режиме реального времени. Velo работает на сервере NodeJS, что означает, что разработчик имеет доступ к пакетам npm и другим инструментам разработчика. Эти функции разработчика включают в себя:

• Возможность создавать собственные макеты и взаимодействия на веб-странице.
• Возможность создания коллекций в базе данных.
• Возможность создавать собственные API для вашего сайта.

Создание веб-сайта с помощью Velo

Чтобы использовать Velo, вам нужно перейти на его основной веб-сайт. Оказавшись там, выберите вариант, чтобы начать новый проект. Это проведет вас через обычную Процесс создания сайта Wix, где вам нужно будет выбрать тип веб-сайта, который вы хотите создать. Вы можете выбрать шаблон самостоятельно или с помощью Wix ADI.

После того, как вы выбрали вариант редактирования шаблона, вы увидите что-то вроде следующего пользовательского интерфейса:

Слева от изображения выше находится боковая панель структуры веб-сайта, которая дает вам доступ к различным файлам JavaScript, связанным со всеми страницами вашего веб-сайта. Текущая выбранная страница является домашней, и если вы посмотрите на нижнюю часть изображения выше, вы увидите редактор кода, отображающий содержимое файла HOME.js.

Создание пользовательской структуры макета и взаимодействий

Шаблон, выбранный для этой статьи, — интернет-магазин товаров для здоровья. На главной странице этого веб-сайта есть «самые популярные», которые вы можете увидеть на следующем изображении:

Однако, если вы хотите использовать другой заголовок для этого раздела, вы можете сделать это в редакторе Velo, вставив следующий код в файл HOME.js.

Файл HOME.js

$w.onReady(функция () {
 $w('#text20').text = 'ПОПУЛЯРНЫЕ ТОВАРЫ'
});

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

Работа с базой данных Velo

Большинство динамических веб-сайтов имеют базу данных, которая хранит данные по-разному, в зависимости от типа. Velo хранит свои данные в коллекциях в своей центральной базе данных. Чтобы получить доступ к этой базе данных, вам нужно перейти к таблице строк и столбцов слева от интерфейса разработчика Velo.

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

Связанный: Как создать профессиональное онлайн-присутствие с помощью Wix

Однако, если вы хотите создать свою коллекцию с нуля, у них также есть такая возможность.

Чтобы создать новую коллекцию в базе данных Velo, просто наведите указатель мыши на раздел «коллекции контента», и справа от текста появится значок плюса.

Нажав на опцию новой коллекции на изображении выше, вы создадите следующую форму создания коллекции:

Указав имя коллекции и нажав кнопку «Создать», вы попадете на следующую страницу управления контентом:

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

Посмотрите на страницу управления контентом выше; в настоящее время он имеет одно поле — заголовок. Вы не можете удалить это поле, потому что это основное поле (или уникальный идентификатор), которое должно быть в каждой коллекции. Однако вы можете дать ему более подходящее название, например название продукта или идентификатор.

Чтобы изменить имя существующего поля в вашей коллекции, просто нажмите на нужное поле, и вы увидите несколько вариантов.

Выбор параметра свойства, который вы видите на изображении выше, приведет к появлению следующей всплывающей формы:

Всплывающая форма выше позволяет вам изменить имя поля, введя нужный заголовок в текстовое поле с надписью «имя поля» и нажав «Сохранить».

Добавление нового поля

Есть два способа добавить новое поле в вашу коллекцию. Первый вариант — щелкнуть значок плюса справа от существующего заголовка в коллекции. Этот метод сгенерирует следующую форму:

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

• Текст
• Изображение
• логический
• Число
• Дата и время
• Время
• Богатый текст
• Ссылка
• Мульти-справочник
• URL-адрес

Второй способ добавить новое поле в вашу коллекцию — щелкнуть раздел «скрытые поля» и выбрать опцию «Добавить поле» во всплывающем списке полей. Вы должны увидеть что-то вроде изображения ниже:

Добавление элементов в коллекцию Чтобы добавить новый элемент в свою коллекцию, вы можете нажать кнопку «Добавить элемент» справа на странице контент-менеджера или щелкнуть знак «плюс» под заголовками полей. После того, как вы добавите свой первый предмет в свою коллекцию, он должен выглядеть так:

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

Что делает Velo захватывающим

Теперь вы знаете, как настроить свой веб-сайт с помощью кода JavaScript в Velo IDE. Вы также можете создавать собственные коллекции с любым количеством элементов в базе данных Velo. Но что, пожалуй, самое лучшее в Velo, так это возможность импортировать и использовать пакеты npm.

Что такое нпм? Объяснение диспетчера пакетов JavaScript

Улучшите свои проекты с помощью пакетов npm.

Читать дальше

Об авторе