Crea fácilmente una aplicación web con Wix Code

Este es un artículo patrocinado y fue posible gracias a Wix. Los contenidos y opiniones reales son la única opinión del autor que mantiene la independencia editorial, incluso cuando una publicación está patrocinada.

Cuando se trata de crear un sitio web, si es un desarrollador, puede usar el enfoque y el código de bricolaje y alojar todo usted mismo. Si usted es un usuario final / consumidor como la mayoría de nosotros, puede utilizar un software de creación de sitios web para crear hermosos sitios web con solo unos clics.

Wix pertenece a este último, ya que es un creador web que le permite crear hermosos sitios web gratuitos con solo unos pocos clics del mouse. Pero con la introducción de Código Wix, ha difuminado las líneas entre hacerlo usted mismo y usar un creador web. Ahora puedes hacer ambas cosas.

Si está creando una aplicación web o un sitio web dinámico, tendrá que utilizar una jerga tecnológica complicada como bases de datos, formularios y javascripts para crear un sitio web interactivo. La mayoría de los creadores de sitios web no brindan este tipo de herramientas, ya que agregan toneladas de complicaciones a su aplicación.

Wix Code agrega tales cosas a sus herramientas de creación web existentes sin la complicación. Ofrece varias plantillas para que usted cree y administre sus bases de datos, formularios y también le permite agregar código javascript a su sitio. Lo mejor de todo es que puede hacer uso de la función de páginas dinámicas para completar rápidamente el contenido de la base de datos, haciéndola más como un sistema de gestión de contenido en lugar de un creador de sitios web.

En el siguiente ejemplo, crearemos un blog sencillo Make Tech Easier y le agregaremos funciones dinámicas desde Wix Code.

Configurando un nuevo sitio con Wix

Suponiendo que eres nuevo en Wix, puedes comenzar por registrando una cuenta con Wix. Una vez que haya creado una cuenta, se le pedirá que cree su sitio web.

A continuación, le pedirá que seleccione el tipo de sitio web que desea crear. Como estoy replicando un blog Make Tech Easyier, seleccioné la opción «Blog».

La siguiente pantalla le preguntará cómo desea crear su sitio web.

Wix ADI utiliza inteligencia artificial para crear un sitio automáticamente para ti. Si prefieres ir de forma manual, selecciona el método Wix Editor. (Para acceder a Wix Code tienes que usar este último. Si has elegido Wix ADI, aún puedes cambiar al modo Editor más adelante).

Para este ejemplo, utilicé el Editor de Wix porque quería tener un control total sobre la apariencia del sitio. A partir de ahí, puede comenzar con una plantilla. (Hay miles de ellos.)

Para simplificar, comencé con una plantilla en blanco con un diseño clásico. La siguiente imagen es lo que parece.

Accediendo al código de Wix

Para acceder a Wix Code, ve a «Herramientas» y marca la opción «Herramientas de desarrollo».

Ahora verá una nueva columna «Estructura del sitio». Aquí es donde puedes acceder a todas las funciones de Wix Code.

Crear bases de datos para almacenar publicaciones

Una de las grandes características de Wix Code es la función de Base de datos que te permite crear bases de datos (también conocidas como Colección) y almacenar datos en ella. Para un blog, necesitaremos crear una base de datos para almacenar todas nuestras publicaciones. En la sección Base de datos, haga clic en «Agregar nueva colección». Dé un nombre a su colección y especifique su propósito. Hay varios tipos de bases de datos entre los que puede elegir, que van desde contenido generado por el usuario, envío de miembros, datos privados, etc.

Una vez que se crea la colección, puede comenzar a agregar campos y datos en ella.

Lo que hemos creado es una base de datos de publicaciones que contiene el título, el contenido, la fecha de publicación y varios aspectos de una publicación de blog. A continuación, necesitamos completar el contenido de la base de datos en el sitio principal.

Páginas dinámicas

Las páginas dinámicas son más como una página de plantilla en la que puede crear un diseño y conectarlo a la base de datos, y completará automáticamente todos los elementos de su base de datos en la página principal con sus propias URL. Por ejemplo, tenemos seis publicaciones en la base de datos. Con una sola página dinámica, podemos hacer que muestre todas las publicaciones en el sitio principal. Esto le ahorra el esfuerzo de crear manualmente una sola página para cada publicación. Hay dos tipos principales de páginas dinámicas en Wix Code: una es para mostrar un solo elemento, mientras que la otra es para Categoría (una colección de elementos similares en una lista).

A continuación se muestra cómo crear páginas dinámicas y vincularlas al sitio.

1. En la barra de herramientas flotante, haga clic en el primer icono y seleccione «Páginas dinámicas». Haga clic en el botón «Agregar al sitio».

2. Seleccione «Página de elementos» en la ventana emergente.

3. En la URL, seleccione el campo (en la base de datos) que desea utilizar para la URL. En este caso, configuro el «título» para que sea la URL.

4. A continuación, diseñe la página y agregue campos de la base de datos. Con cada elemento que arrastre a la página, puede hacer clic en el botón «Conectar a datos» para vincularlo con el campo de la base de datos. Por ejemplo, arrastré un elemento «Encabezado 1» a la página y lo vinculé al campo «Título» en la base de datos de Publicaciones.

E hice lo mismo con la imagen destacada, el contenido de la publicación, etc.

5. Una vez que haya terminado con el diseño, puede obtener una vista previa y ver cómo se ve en la parte frontal.

6. El siguiente paso es vincular la página dinámica desde la página de inicio. Cargue la página de inicio y agregue un widget de repetidor de la sección «Listas y cuadrículas». Conecte el widget a la base de datos de Publicaciones y vincule cada elemento del widget con los campos de la base de datos. En la sección «Enlace se conecta a», desplácese hacia abajo y seleccione «Publicaciones» en la sección Páginas dinámicas.

Eso es todo.

Lo que puede ver es que solo hemos creado una página dinámica, y automáticamente generará todas las páginas para cada elemento en la base de datos. También puede hacer lo mismo para agregar una página dinámica de categoría.

Agregar javascript a las páginas

Si es un codificador de JavaScript experto, puede agregar JavaScript a cada función adicional en cada página. Por ejemplo, si ha agregado un formulario de usuario a su página, puede utilizar javascript para validar el campo del formulario antes de enviarlo.

Nota: para agregar código javascript a una página, vaya a cualquier página (o la página donde desea que aparezca el código) y haga clic en el botón «Código de página» en la parte inferior del código. Aparecerá una ventana y podrá agregar su código allí.

1. Hemos creado un formulario simple que recopilará el nombre, apellido y dirección de correo electrónico del usuario. Para este formulario queremos validar la dirección de correo electrónico y asegurarnos de que el campo «Confirmar correo electrónico» sea el mismo que el campo «Correo electrónico».

2. Agregue el siguiente código a la sección «Código de página»:

$w.onReady(function () {
 
	const validateEmail = (otherEmailElementId) => (value, reject) => {
		let otherEmailElement = $w(otherEmailElementId);
	 	if (value === otherEmailElement.value) {
  			otherEmailElement.validity.valid = true;
  			otherEmailElement.resetValidityIndication();
	    	return;
	  	} 
	  	console.log("Email and Confirm Your Email fields do not match");
	  	otherEmailElement.validity.valid = false;
	  	otherEmailElement.updateValidityIndication();
	  	reject("Email and Confirm Email fields do not match");
	};
	$w("#emailConfirmInput").onCustomValidation(validateEmail("#emailInput"));
	$w("#emailInput").onCustomValidation(validateEmail("#emailConfirmInput"));
 
	$w('#dataset1').onBeforeSave(() => {
		let validationMessage = '';
 
		if (!$w('#emailInput').valid) {
		    if (!$w('#emailInput').value)
			validationMessage += 'Please enter an email addressn';
		    else if ($w('#emailInput').value !== $w("#emailConfirmInput").value) {
			validationMessage += 'Email and Confirm Email fields do not matchn';
		    }	
                   $w('#validationMessages').text = validationMessage;
                   $w('#validationMessages').expand();		
                }
		else 
		    $w('#validationMessages').collapse();
 
        });
});

Esto validará la dirección de correo electrónico y mostrará el mensaje de error si el correo electrónico no es válido.

Hay muchas cosas que puede hacer con Javascript. Revisar la ejemplos aquí para más información.

API externas

Este es el único paso en el que podría complicarse más. Wix Code ahora se integra con una API externa, por lo que puede conectarse fácilmente a servicios de terceros como Amazon, Dropbox, Google Drive, Twitter, IFTTT, Zapier, etc. No entraré en detalles aquí, pero si está interesado, puede ver su Documentación de la API.

Conclusión

Si no tiene conocimientos técnicos o no es un desarrollador, crear su propio sitio web puede ser una tarea tediosa. Wix ha hecho un buen trabajo al facilitar la creación de sitios web. Con Wix Code va un paso más allá y te da mucho control sobre tu sitio. Ahora tiene acceso a complicadas herramientas de desarrollo web y un control total de cómo debería funcionar su sitio, todo hecho con un simple clic, arrastrar y soltar sin necesidad de experiencia en codificación.

Felicitaciones a Wix por crear una herramienta tan fácil de usar que resolverá muchos problemas.

Prueba Wix Code y cuéntanos qué te parece.

Código Wix