Desarrollo de Front-end alquiler Kit desarrollo HTML

Crear un nuevo sitio web de reservas con el Kit de desarrollo HTML

1. Introducción

En este documento vamos a detallar los pasos necesarios para poder crear un sitio web de reservas para su negocio utilizando nuestro Kit HTML.

Antes de empezar, necesita descargar nuestro kit de desarrollo html. En estos momentos disponemos de una versión implementada sobre ZURB Template Foundation 6.0.

2. ¿Cómo empezar?

2.1 Kit de desarrollo Zurb Foundation​

Para utilizar el kit necesitas NodeJS(0.12 o superior) y Git instalados en tu computadora.

Descargar el kit

# Descarga el Kit mybooking ZURB template con Git
git clone https://github.com/mybooking-es/mybooking-kit-html.git

# Situate en la carpeta del proyecto, e instala las dependencias

cd projectname
npm install

# Construye el proyecto
npm start

Con npm start arrancas Gulp, que creará el sitio en la carpeta dist visible desde la siguiente URL: http://localhost:8000

Para crear una versión del sito para producción, con los assets comprimidos, ejecuta npm run build.

Referencias

Foundation 6

ZURB template Foundation 6

Estructura del sitio de reservas

An image

El proceso de reserva se lleva a cabo en 4 pasos:

  1. Página de inicio : formulario de búsqueda
  2. Selección de producto
  3. Completar datos
  4. Resumen

Existen varios kits para la implementación de un frontend, pero todos ellos tienen características en común y están implementados de manera que si seguimos ciertas normas el tema funcionará completamente sólo tocando la parte de HTML y de CSS. Por lo tanto, si mantenemos la nomenclatura el sistema funcionará automáticamente con el código JS suministrado. La comunicación con los servidores de mybooking se realiza a través del API REST y está encapsulada en el código JS correspondiente a cada página.

Para representar los datos que provienen de las consultas del servidor, utilizamos un sistema de templates desarrollado por John Resig. Por lo tanto, en las páginas html, encontrarán una serie de tags <script type=”text/tmpl”>. Su contenido debería modificarse de acuerdo a la maquetación deseada.

4. Construir tu sitio web de reservas

4.1 Página de inicio

Presenta un formulario de búsqueda con los campos necesarios en función del tipo de negocio

form

Implementación

<form
  action="/choose_product.html"
  method="get"
  enctype="application/x-www-form-urlencoded"
></form>

En el formulario de búsqueda se pueden utilizar los siguientes campos.

id name description
pickup_place pickup_place Lugar de entrega
date_from date_from Fecha de entrega
time_from time_from Hora de entrega
return_place return_place Lugar de devolución
date to date to Fecha de devolución
time_to time_to Hora de devolución
promotion_code promotion_code Código de promoción
numbers_of_adults numbers_of_adults Número de adultos
number_of_children number_of_children Número de niños
driver_age_rule driver_age_rule Regla para la edad del conductor

4.2 Selección producto

Muestra los resultados de la búsqueda y permite que el usuario pueda seleccionar el producto o productos que desea contratar.

También permite modificar los datos introducidos en la primera pantalla cuando inició la búsqueda.

choose product

Implementación

La página de selección de producto muestra un listado con el resultado de la búsqueda de productos y muestra un formulario con los datos de la reserva indicados, que nos permiten cambiar los criterios de búsqueda.

Listado de productos

  • La página html tendrá un div vacío con id product_listing
  • La representación de cada uno de los productos estará implementada en un script template con id script_detailed_product
<script type="text/tpml" id="script_detailed_product">
    <div class="cell">
      <div class="description">
        <p class="product-name"><%=product.name%></p>
        <p class="short-description color-gray-500"><%=product.short_description%></p>
        <p class="price"><%=new Number(product.price).toFixed(2)%></p>
      </div>
      <img class="float-right" src="<%=product.photo%>" alt="">
      <% if (product.availability) { %>
      <a class="button button-invert small hollow secondary btn-choose-product" data-product="<%=product.code%>">Seleccionar</a>
      <% } else { %>
      <p>Consulta telefónica</p>
      <% } %>
    </div>
</script>

Formulario modificación datos de la reserva

Se trata de un formulario HTML que sigue los mismos criterios que el formulario de búsqueda detallado en el apartado anterior.

4.3 Completar datos

Esta pantalla permite al usuario completar los datos de su reserva. Se muestra una vez hemos seleccionado el producto o productos que deseamos contratar. Permite introducir los datos del cliente y tambien realizar una solicitud de reserva o pasar a realizar el pago.

complete

Implementación

La página de completar datos presenta 5 áreas:

  • Información del producto(s) contratado(s)
  • Detalle de la reserva
  • Selección de los extras
  • Formulario para completar los datos del cliente.
  • Pago online

Información del producto contratado

  • La página html tendrá un div vacío con id selected_product
  • La representación del producto estará en un script template con id script_product_detail

Extra

  • La página html tendrá un div vacío con id extras_listing
  • La representación de cada uno de los extras estará implementada en un script template con id script_detailed_extra

Detalle de la reserva

  • La página html tendrá un div vacío con id reservation_detail
  • La representación del producto estará en un script template con id script_reservation_summary

Pago online

  • La página html tendrá un div vacío con id payment_detail
  • La representación del producto estará en un script template con id script_payment_detail

Formulario completar datos del cliente

  • La página html tendrá un form con name reservation_form y con id form-reservation
  • El formulario tendrá un botón de type submit, que es el que está v
  • Este formulario puede contener los siguientes campos

En el formulario completar datos pueden utilizarse los siguientes campos

name id decription Tipo de negocio
destination_acommodation
driver_name Alquiler de vehículos
driver_surname Alquiler de vehículos

4.4 Resumen de la reserva

Implementación

La página de completar datos presenta 5 áreas:

  • Información del producto(s) contratado(s)
  • Detalle de la reserva
  • Selección de los extras
  • Formulario para completar los datos del cliente
  • Pago online

5. Desplegar tu sitio web

5.1 Despliegue con FTP

Para crear una versión del sito para producción, con los assets comprimidos, ejecuta npm run build.

Ahora ya puedes subir todos los archivos de la carpeta site a tu servidor con el cliente ftp que más te guste, FileZilla, Transmit etc..

5.2 Despliegue con Netlify

Netlify​ es un servicio de hosting para sitios web estáticos.

Con Netlify desplegar tu sitio web mybooking es tan sencillo como crear tu cuenta y arrastrar la carpeta site a Netlify.

Netlify ofrece continuo despliegue desde GitHub, GitLab o Bitbucket, CDN global, SSL, optimización de assets y dominio propio.

See the Pen fruit shop with vue by Marcel Reig (@MarcelReig) on CodePen.