Una guía para principiantes sobre el uso de Velo by Wix

Velo es un producto de Wix con un giro. Wix es una de las plataformas de desarrollo más populares en la web. Permite a los diseñadores (y al propietario medio de un sitio web) crear sitios web increíbles sin escribir una sola línea de código.

Con Velo, Wix está ampliando su base de usuarios para incluir desarrolladores. Velo es una plataforma de desarrollo de pila completa que permite a los usuarios crear excelentes sitios web utilizando código. El único lenguaje de programación que necesita saber para usar Velo es JavaScript. La plataforma admite funciones modernas de JavaScript y utiliza un sistema del lado del servidor basado en NodeJS.

En este artículo, aprenderá sobre las características únicas de Velo y cómo usarlas.

Características del desarrollador de Velo

La plataforma de desarrollo Velo tiene un IDE incorporado, lo que permite a los desarrolladores escribir código JavaScript y ver los cambios en tiempo real. Velo se ejecuta en un servidor NodeJS, lo que significa que un desarrollador tiene acceso a los paquetes npm y otras herramientas para desarrolladores. Estas funciones de desarrollador incluyen:

• La capacidad de crear diseños e interacciones personalizados en una página web.
• La capacidad de crear colecciones en una base de datos.
• La capacidad de crear API personalizadas para su sitio web.

Creación de un sitio web usando Velo

Para usar Velo, deberá navegar a su sitio web principal. Una vez allí, seleccione la opción para iniciar un nuevo proyecto. Esto le llevará a través de la costumbre Proceso de creación del sitio de Wix, donde tendrás que elegir el tipo de sitio web que deseas construir. Puedes seleccionar una plantilla por tu cuenta o con la ayuda de Wix ADI.

Después de seleccionar la opción para editar su plantilla, verá algo como la siguiente interfaz de usuario:

A la izquierda de la imagen de arriba está la barra lateral de la estructura del sitio web, que le da acceso a los diversos archivos JavaScript conectados a todas las páginas de su sitio web. La página actualmente seleccionada es la página de inicio, y si observa la parte inferior de la imagen de arriba, verá un editor de código que muestra el contenido del archivo HOME.js.

Creación de estructuras de diseño e interacciones personalizadas

La plantilla seleccionada para este artículo es la tienda de bienestar en línea. La página de inicio de este sitio web tiene un “más popular”, que puedes ver en la siguiente imagen:

Sin embargo, si desea usar un encabezado diferente para esta sección, puede lograrlo en el editor Velo insertando el siguiente código en el archivo HOME.js.

El archivo HOME.js

$w.onReady(función () {
 $w('#text20').text = 'ARTÍCULOS EN TENDENCIA'
});

El código anterior actualizará el encabezado "más popular" a "elementos de tendencia", y puede ver esta actualización haciendo clic en el botón de vista previa en la parte superior derecha de la interfaz de Velo. En la página de inicio en la sección correspondiente, debería ver algo como el siguiente resultado:

Trabajar con la base de datos de Velo

La mayoría de los sitios web dinámicos tienen una base de datos que almacena datos de manera diferente, según el tipo. Velo almacena sus datos en colecciones en su base de datos central. Para obtener acceso a esta base de datos, deberá navegar a la tabla de filas y columnas a la izquierda de la interfaz de desarrollador de Velo.

Como puedes ver en la imagen de arriba, cada plantilla de Wix viene con algunas colecciones predeterminadas, según el tipo de sitio web. La plantilla de sitio web seleccionada para este artículo es una tienda de bienestar. Por lo tanto, tiene una colección de productos predeterminados que puede reemplazar fácilmente con sus artículos.

Relacionado: Cómo construir una presencia en línea profesional con Wix

No obstante, si quieres crear tu colección desde cero, también tienen esa opción.

Para crear una nueva colección en su base de datos de Velo, simplemente pase el mouse sobre la sección "colecciones de contenido" y aparecerá un ícono más a la derecha del texto.

Al hacer clic en la opción de nueva colección en la imagen de arriba, se generará el siguiente formulario de creación de colección:

Proporcionar un nombre de colección y hacer clic en el botón Crear lo llevará a la siguiente página del administrador de contenido:

Desde la página del administrador de contenido anterior, puede comenzar a completar su colección de productos utilizando los íconos más relevantes. Pero antes de comenzar a agregar productos a su colección, deberá crear los campos apropiados.

Mire la página del administrador de contenido arriba; actualmente tiene un campo: título. No puede eliminar este campo porque es el campo principal (o identificador único), que debe tener cada colección. Sin embargo, puede darle un título más apropiado, como el nombre del producto o la identificación.

Para cambiar el nombre de un campo existente en su colección, simplemente haga clic en el campo en cuestión y verá varias opciones.

Al seleccionar la opción de propiedad que puede ver en la imagen de arriba, aparecerá el siguiente formulario emergente:

El formulario emergente anterior le permite cambiar el nombre del campo ingresando el título que desea en el campo de texto etiquetado como "nombre del campo" y haciendo clic en Guardar.

Agregar un nuevo campo

Hay dos formas de agregar un nuevo campo a su colección. La primera opción es hacer clic en el ícono más a la derecha del título existente en la colección. Este método generará el siguiente formulario:

El nuevo formulario de campo le permite proporcionar un nombre de campo, una clave de campo (para integrar en su código) y un tipo de campo. El tipo de campo puede ser cualquiera de los siguientes:

• Texto
• Imagen
• booleano
• Número
• Fecha y hora
• Hora
• Texto rico
• Referencia
• Multi-Referencia
• URL

La segunda forma de agregar un nuevo campo a su colección es haciendo clic en la sección "campos ocultos" y seleccionando la opción "Agregar campo" de la lista de campos emergente. Deberías ver algo como la imagen de abajo:

Adición de elementos a la colección Para agregar un nuevo elemento a su colección, puede hacer clic en el botón "Agregar elemento" a la derecha de la página del administrador de contenido o hacer clic en el signo más debajo de los títulos de los campos. Después de agregar su primer artículo a su colección, debería verse así:

Ahora puede agregar tantos artículos como sea posible a su colección utilizando cualquiera de los métodos anteriores. Sin embargo, para actualizar su sitio web con cualquier colección, primero deberá publicar el sitio.

Lo que hace que Velo sea emocionante

Ahora ya sabe cómo personalizar su sitio web utilizando código JavaScript en Velo IDE. También puede crear colecciones personalizadas con tantos elementos como desee en la base de datos de Velo. Pero lo que posiblemente sea lo mejor de Velo es la capacidad de importar y usar paquetes npm.

¿Qué es npm? Explicación del administrador de paquetes de JavaScript

Mejore sus proyectos con paquetes npm.

Leer siguiente

Sobre el Autor