Ръководство за начинаещи за използване на 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 пакети.

Какво е npm? Обяснение на мениджъра на пакети на JavaScript

Подобрете вашите проекти с npm пакети.

Прочетете Следващото

За автора