Rápido desarrollo de comercio electrónico con Dreamweaver UltraDev y PayPal


Por Joel Martinez y Ray West (www.basic-ultradev.com)

Este artículo examina cómo integrar UltraDev con PayPal mediante un conjunto de conductas gratuitas de servidor para resolver tres situaciones de ventas por Internet. Los comportamientos de servidor, denominados Conjunto de extensiones de PayPal, están disponibles gracias a Mike Ahern de Shore Computers (http://www.shorecomp.com/ultradev/paypal/default.asp). El software es gratuito, pero le animamos a que realice un donativo, mediante PayPal, si lo utiliza.

Utilizar el carro de la compra de PayPal, incluso sin ayuda de este software de comportamiento de servidor, sólo requiere conocimientos de HTML. Si puede cortar y pegar texto, le resultará muy fácil aprovechar esta funcionalidad sin ayuda de esta extensión. Sin embargo, este conjunto de software se integra perfectamente con UltraDev y proporcionara una interfaz muy fácil de entender. Los tres siguientes ejemplos le enseñarán a utilizar el sistema de PayPal para tres tipos habituales de transacciones:
  • Compra de un solo artículo que le permite vender un artículo en un entorno tipo subasta.
  • Carro de la compra sencillo, que le permite configurar varios artículos que se pueden comprar en una transacción con PayPal.
  • Carro de la compra controlado por base de datos, que le permite configurar un sistema de inventario que se puede gestionar y entregar en sus páginas dinámicamente desde una base de datos.

Creación de un sitio de comercio electrónico con PayPal


Crear un sitio de comercio electrónico mediante PayPal es quizá la solución más fácil de implementar. El tiempo de programación que se ahorra puede convertirlo en una opción atractiva para proyectar un presupuesto. Existen ciertos inconvenientes. Como toda la dinámica se gestiona en una ventana emergente, aparte de la capacidad de incluir su logotipo en el carro, queda poco espacio para la personalización. Dicho esto, la mayoría de los sitios no requerirá una interfaz de usuario totalmente personalizada y se beneficiará en gran medida de utilizar este sistema. Las interfaces familiares producidas por PayPal realmente pueden servir para reafirmar la confianza de los clientes.

Al ser un conjunto de extensiones, existen numerosos comportamientos de servidor, cada uno de ellos con una funcionalidad ligeramente diferente. Sin embargo, tienen ciertos elementos en común.
  • Correo electrónico de PayPal: Cada comportamiento requerirá que introduzca la dirección de correo electrónico utilizada para su cuenta PayPal. Si va a realizar negocios a través de su cuenta, le conviene decidirse por una cuenta Empresas.
  • Campos estáticos o dinámicos: casi todos los comportamientos de servidor utilizan campos que le permitirán seleccionar elementos de la ventana de enlaces de datos en UltraDev o utilizar valores estáticos. Lo único que tendrá que recordar es que, para utilizar un valor estático, debe ir entre comillas dobles 5.00
  • Dinero: todos los campos monetarios deben tener el formato "xx,xx". Si va a asignar un valor de la paleta de enlaces de datos a uno de estos campos, asegúrese de que tiene este formato. Puede utilizar la funcionalidad integrada UltraDev para asignar un esquema de formato a este valor.

Figura 1: Paleta de enlaces de datos para asignar formato monetario.
  • Campos URL: algunos de los comportamientos de servidor le pedirán una URL de logotipo o una ubicación que enviar al usuario una vez procesada una transacción. Deben ser URL absolutas, lo que significa que se debe incluir http://www.sudominio.com.
Comportamientos de servidor

Los siguientes comportamientos de servidor están disponibles en el conjunto de software para interactuar con la funcionalidad de PayPal.
  1. Comportamiento de compra única
    Cuando se aplica a una imagen y a texto, este comportamiento de servidor realiza un vínculo directamente con la pantalla de pago de PayPal. Le permite crear vínculos como, por ejemplo, "Cómpreme ahora". Resulta muy útil para sitios que venden sólo un producto o servicio.
  2. Comportamiento del carro
    Si decide utilizar otra solución del carro de la compra como, por ejemplo, UltraCart II, aún puede utilizar los servicios que proporciona PayPal para aceptar pagos por sus productos. La única información que debe proporcionar (además de su identificación de PayPal y algunas URL) es un número de pedido y un importe total de venta. Esta información se recopila fácilmente y se transfiere a la sencilla interfaz de usuario.
  3. Comportamiento para añadir artículo al carro
    Quizá es el comportamiento de servidor que más se utilizará. El comportamiento para añadir artículo al carro se integra muy fácilmente con la pantalla de presentación de base de datos de artículos, lo que permite a los clientes ir de compras y añadir artículos a su carro. Siempre que se haga clic en el vínculo generado, se abrirá una ventana emergente con el contenido de su carro en una presentación agradable. Los usuarios ya pueden acceder desde esta pantalla al área de pago, en la que pueden iniciar sesión en su cuenta PayPal o simplemente proporcionar la información de pago.
  4. Comportamiento para ver el carro
    Se utiliza junto con el comportamiento para "añadir artículo al carro". Al hacer clic en un vínculo generado por el comportamiento Ver carro, aparece una ventana emergente con el contenido del carro. La única información necesaria es su Id. de correo electrónico de PayPal.
  5. Comportamiento para donativo
    El vínculo producido por este comportamiento de servidor llevará al usuario a una pantalla en la que podrá enviar su dinero desde una cuenta PayPal. Los vendedores de shareware o una organización sin fines de lucro se pueden beneficiar de este enfoque, ya que le permite aceptar dinero de su sitio web sin estar ligado a una compra específica.
  6. Comportamiento para suscripción
    Los sitios Web que ofrecen acceso basado en suscripción a su contenido se beneficiarán de este servicio único ofrecido por PayPal. Los usuarios que se registren para obtener un servicio de suscripción recibirán una factura periódica mensual de PayPal. El dinero irá directamente a su cuenta PayPal y recibirá un correo electrónico con cada pago que le comunicará la suscripción continuada del usuario. El vínculo generado por este comportamiento de servidor abrirá una ventana que le pedirá al usuario la información de facturación.

Aplicaciones prácticas para el conjunto de software de PayPal


Hay dos situaciones habituales que incluyen la mayoría de las situaciones de comercio electrónico de los sitios Web actuales. La compra única es parecida al modelo de subasta en el que un vendedor le ofrece un artículo y que, cuando se termina, se termina. El modelo de carro de la compra implica la venta de varios artículos, así como varias copias de esos artículos. A continuación, se muestran tres ejemplos que utilizan el servicio de PayPal para ofrecer la venta de un único artículo, un carro de la compra que utiliza el carro de la compra de PayPal y un carro de la compra que utiliza un carro de un tercero para interactuar con PayPal.

Hemos creado un sitio de demostración que puede visitar en http://www.codecube.net/teksales/. Los ejemplos descritos en este artículo se pueden encontrar en el sitio de demostración.


Figura 2: Sitio de demostración de teksales


"Me llevaré uno, por favor": Venta de un solo artículo


El comportamiento de servidor de compra única se utiliza cuando tiene un artículo que vender. Los usuarios de eBay llevan mucho tiempo utilizando esta funcionalidad para cobrar los pagos por sus subastas. Si su sitio va a vender más de un artículo, hay otros comportamientos que le pueden resultar más útiles. Pero para la venta única de un artículo usado o de coleccionista, el comportamiento de servidor de compra única proporciona una opción rápida y fácil de usar.

Imaginemos que tiene la motocicleta más increíble del lugar, la Ducati Monster S4Fogarty. Un día, en la autopista, un coche se le echa encima de repente al cambiar de carril. Se ha librado por poco, pero ha visto su vida pasar por delante de usted en un instante y no es capaz de avanzar ni un metro con la moto sin que le invada un sudor frío. Así que decide venderla en su sitio web. Realiza un rápido diseño con UltraDev y lo publica en su sitio.


Figura 3: Sitio de venta de Ducati..., anterior a boletín de servicio

Se imagina que la gente va a hacer cola en el buzón para enviarle el dinero por este cohete, pero, sorpresa, nadie va. Podría haber varios motivos. Quizá el precio es más de lo que muchos son capaces de escribir en un cheque.

Uso del comportamiento de servidor de compra única

Utilizar el comportamiento de servidor de compra única es muy sencillo. Una vez diseñada la página, sólo deberá seleccionar un objeto de la página para que funcione como botón de compra. Puede ser una imagen "Cómpreme" o algún texto que exprese ese mismo mensaje. Resalte el objeto y aplíquele el comportamiento de servidor tal como lo hace habitualmente. El comportamiento de servidor de compra única se puede encontrar en la paleta de comportamientos de servidor en PayPal> Compra única de PayPal.



Figura 4: Compra única de PayPal

Llene los campos en la interfaz del comportamiento de servidor y habrá terminado. Cuando un usuario hace clic en un vínculo generado por el comportamiento, aparece una página que contiene la información de cobro de los pagos y se conduce al usuario por el proceso de pago. Recibirá información de la venta completada de PayPal y podrá comenzar a empaquetar la motocicleta para depositarla en el receptáculo de la oficina de correos local.


"Me llevaré dos de cada, por favor": Carro de la compra sencillo


La venta de compra única constituye una gran mayoría de las transacciones basadas en Internet hoy en día, especialmente con la popularidad de las subastas por Internet. Pero quienes intenten convertir su sitio web en una empresa con actividad continua tienen que hacer frente a otras preocupaciones. A menudo ofrecen gran variedad de productos y esperan que sus clientes realicen varias y repetidas compras de su inventario.

Volvemos con usted, nuestro vendedor en ciernes de motocicletas. Tras vender su Ducati, ha caído en la cuenta de que existe una gran demanda de artículos relacionados con las motocicletas, por lo que ha decidido montar una empresa por Internet para ofrecer algunos. Con la nueva solución de pagos en Internet de PayPal, su empresa va viento en popa. Está ganando cantidades sustanciosas revendiendo motocicletas a través de su sitio web, pero necesita más para decidirse a comenzar a vender productos para complementar sus ventas de motocicletas como, por ejemplo, cascos y anteojos. Es un concepto bastante sencillo, pero no puede seguir utilizando la misma solución. En su visita semanal a un supermercado, se dio cuenta de lo que debe hacer al elegir una lata de desengrasante y ponerla en su carro de la compra, junto con la leche y los huevos. También necesita un carro de la compra.

En términos sencillos, un carro de la compra por Internet permite a sus visitantes comprar varios artículos en una transacción. A medida que el cliente navega por el sitio para ver la mercancía y elegir qué artículos quiere comprar, el carro de la compra 'recuerda', ya sea a través del uso de variables de sesión, de cookies y una base de datos, los artículos que se han elegido. Cuando el cliente decide pagar y enviar, puede introducir la información de pago una vez y el pedido se realizará para todos sus artículos.

Uso del carro de la compra de PayPal

Utilizar el comportamiento de servidor del carro de la compra es muy similar al comportamiento de compra única. Pero, como este comportamiento se debe utilizar con un carro de la compra, hay un par de diferencias notables. Primero, existe la opción de permitir a su cliente seleccionar las unidades de un artículo en particular, como dos pares de guantes o tres kits de parches de cuero para pantalones. Además, la acción que se realiza cuando se hace clic en un botón de compra, simplemente añade el artículo al carro de la compra y permite una compra continuada, en lugar de intentar recopilar información de pago inmediatamente.

Para aplicar el comportamiento de servidor a su artículo, basta con resaltar un objeto o texto de su página y seleccionar el comportamiento de servidor para añadir al carro en PayPal> Añadir artículo a carro de PayPal en la paleta de comportamientos de servidor. Repita el proceso con cada artículo de su sitio.



El vínculo creado abrirá una nueva ventana al sistema del carro de la compra de PayPal y mostrará todos los artículos que haya añadido. Si hace clic en el mismo artículo dos veces, el importe se doblará. Es el método preferido en esta situación porque los compradores quieren hacer lo menos posible para obtener los productos, así que si les ahorra aunque sean dos clics, estarán más satisfechos y los clientes satisfechos compran más.

Uso de un carro de la compra controlado por base de datos


Los ejemplos anteriores son buenos ejercicios de aprendizaje y puede incluso haber ocasiones en los que se encuentre en una situación parecida y sólo necesite la funcionalidad básica de PayPal. Pero la potencia de este conjunto de extensiones se nota realmente cuando se utiliza en conjunto con una solución de inventario controlada por base de datos. Al utilizar una base de datos para gestionar los productos, se puede requerir algo más de tiempo de programación al principio, pero las ventajas se harán patentes más adelante en la facilidad de gestión y de mantenimiento. Si se construye correctamente, su sitio irá como con piloto automático.

Estructura de tabla

La parte que más tiempo requiere para la construcción de este tipo de sitios es la base de datos propiamente dicha. En realidad, empezar a utilizar el sistema de compras de PayPal es trivial. Para este ejemplo, utilizaremos la clásica estructura de datos principal/secundario - maestro/detalle. Éste es el diseño de base de datos que se utiliza en el 99% de las bases de datos en toda la red. Si necesita ayuda con la parte de base de datos de este proyecto, hay muchos recursos en la Web que le pueden ser de utilidad.

Para cada fila de la tabla principal, puede haber de cero a varias filas en la tabla secundaria. En el contexto de un sitio de comercio electrónico, esto significa que vamos a tener una tabla de categorías como tabla maestra y la tabla de productos como secundaria. Ejemplo de datos que se podrían incluir:

Categoría de TV
- Sony 20"
- RCA 19"
- Magnavox 32"

Categoría de vídeo
- Panasonic de dos cabezales
- Samsung de cuatro cabezales

Comience por definir la tabla de categorías con los siguientes campos:
  • catID - autonumérico
  • catName - texto
Como puede ver, una tabla maestra no suele necesitar mucha información, ya que sólo es un organizador para las numerosas filas de la tabla secundaria. Otra información que se podría incluir en esta tabla podría ser:
  • una descripción extendida
  • una imagen de categorías
  • un campo activo que indique si esta categoría está activa actualmente
Esta tabla se puede utilizar en una página que muestre todas las categorías de artículos que haya disponibles en su sitio. El cliente puede seleccionar entonces una categoría para ver los detalles de los productos disponibles en cada categoría.

La siguiente tabla que necesitamos es la tabla de productos. Albergará información sobre cada producto en particular, así que debe incluir un campo para cada artículo correspondiente en el comportamiento de servidor para añadir al carro.
  • itemID - autonumérico
  • catID - numérico
  • itemName - texto
  • amount - divisa
  • shipping - divisa
  • handling - divisa
Si no va a utilizar alguno de estos campos (por no cobrar gastos de envío y manejo, por ejemplo) puede rellenarlos con ceros.

Como con la tabla de categorías, vamos a utilizar sólo los campos imprescindibles por brevedad. Otros posibles casos podrían ser:
  • Añadido el
  • Activo
  • Vistas de página

Figura 6: tekDB_relationship
Representación gráfica de la relación entre las dos tablas

Cuando tenga configurada la estructura de la base de datos, llene las tablas con algunos datos de prueba. Se pueden sustituir después con los datos de producción. En primer lugar, cree varias categorías.



Figura 7: tekDB_catTableContents

Recuerde que cada categoría no es más que un contenedor lógico de los productos secundarios. Se establece una relación entre la tabla de categorías y un producto en particular colocando el "catID" de la categoría principal en el campo "catID" numérico de la tabla de productos. Se podría crear una estructura de tabla más compleja para gestionar productos que pudieran incluirse en más de una categoría, pero así está bien de momento.


Figura 8: tekDB_ProductTableContents


Presentación de los datos

Cuando la base de datos ya tenga datos con los que poder trabajar, el siguiente paso es colocar los datos en una página. Sólo se necesitan dos páginas para esta demostración, una página que presente todas las categorías entre las que puede seleccionar el usuario y una página de detalle que muestra todos los artículos para la categoría seleccionada.

Primero, cree una tabla HTML para la interfaz de usuario. Una tabla de 2 dimensiones x 2 dimensiones funcionará bien. La primera fila será una simple cabecera que describirá el contenido de la columna que encabeza y la segunda fila será donde se albergue el resultado del conjunto de registros. Cree un juego de registros que seleccione el nombre de categoría y el Id. de la tabla.

Arrastre el nombre de categoría de la paleta de fuentes de datos a la segunda fila de la primera columna. La segunda columna albergará un vínculo de "vista".

Para crear un vínculo de vista, comience por resaltar el texto y utilizar el inspector de propiedades para navegar a la página en la que se presentarán los productos. Haga clic en el icono de carpeta y podrá ver una lista de las páginas existentes dentro de su sitio. Seleccione la página de productos y haga clic en Parámetros, cerca de la parte inferior del cuadro de diálogo. En la ventana Parámetros, puede crear un parámetro de URL denominado catID (que se utiliza para filtrar en el juego de registros de productos) y asignar un valor desde la base de datos seleccionando el campo catID con el icono del rayo. A continuación, cuando se haga clic en el botón de vista junto a esa categoría, se transferirá el Id. correspondiente al conjunto de registros de productos en la cadena de URL y sólo se mostrarán los productos de esa categoría en la página de detalle. Cuando termine, puede añadir el comportamiento de servidor para repetir región a la segunda fila.

Ahora que tenemos en marcha la página de categorías, el siguiente paso es crear la página de detalle. Sabemos que cualquiera que llegue a esta página vendrá de la página de categorías y como tal, tendrá el catID en la cadena de consulta. Así pues, empezamos creando un conjunto de registros que obtenga todos los campos de la tabla y filtramos el catID por el valor de la cadena de consulta que utiliza la solicitud ("catID").


Figura 9: tekDB_categoryRS

La interfaz de usuario para esta tabla puede tener exactamente el mismo diseño, excepto por una columna adicional para el precio. Arrastre el nombre de artículo a la primera columna, el precio a la segunda y escriba "Añadir al carro" en la tercera. Resalte el texto "Añadir al carro" y seleccione el comportamiento de servidor para añadir al carro desde la paleta del comportamiento de servidor. La mayoría de los campos de la interfaz de usuario tienen un pequeño rayo junto al cuadro de texto. Estos rayos le permiten rellenar los campos con campos de la base de datos a través del conjunto de registros que ha creado en la ventana Fuentes de datos. Seleccione un campo de la base de datos para cada artículo correspondiente del comportamiento de servidor. Hecho esto, puede añadir una región de repetición a la segunda fila. Cuando los productos se rellenan en la página desde la base de datos en tiempo de ejecución, cada instancia de añadir al carro tendrá adjunta la información adecuada. Cualquier artículo en el que se haga clic para su compra actualizará el carro de la compra con la información que ha introducido. Ya se puede realizar el mantenimiento en el artículo dentro de la base de datos sin tener que editar las páginas HTML.


Figura 10: tekDB_Addtocart

Esto es prácticamente todo. Los clientes ya pueden examinar su catálogo de artículos, elegir los que desean comprar y pagar y enviar. La rápida programación de aplicaciones es una de las cosas principales que hacen que el conjunto de software de PayPal sea un gran competidor en el comercio electrónico. Otros sistemas de carro de la compra requieren mucho tiempo de programación sin ocuparse realmente del asunto de cobro de los pagos. Esta demostración se creó aproximadamente en una hora utilizando la potencia de Dreamweaver UltraDev y el conjunto de software de PayPal.

Este artículo es un estado de cuenta del nuevo libro UltraDev E-commerce Concepts: Next Steps escrito por Ray West, Tom Muck y Joel Martinez. Para obtener más información sobre UltraDev y el comercio electrónico, visite UltraDev básico en www.basic-ultradev.com. Allí encontrará información sobre nuestros libros, guías y extensiones que pueden aumentar notablemente sus capacidades de programación Web.

RENUNCIA DE RESPONSABILIDAD: Los contenidos siguientes han sido proporcionados por los autores de cada artículo y no por PayPal, Inc. o ninguna de sus subsidiarias o empresas afiliadas. Estos artículos pueden contener errores, y PayPal no apoya ni se responsabiliza de su contenido. PayPal le recomienda que se ponga en contacto con los autores de dichos artículos si desea obtener más información sobre asistencia técnica, garantías o licencias, si es necesaria. Si decide confiar en el contenido de cualquiera de estos artículos, lo hará por su cuenta y riesgo. PayPal no será responsable de errores, daños o perjuicios que puedan surgir como resultado de la confianza puesta en estos contenidos, incluyendo cualquier tipo de daño incidental, especial, indirecto o emergente. PayPal RENUNCIA EXPRESAMENTE A TODA GARANTÍA relativa a dichos contenidos y al uso de los mismos.