Catly

Introducción

En este tutorial, construiremos una aplicación simple de acortamiento de URLs que te permitirá recortar instantáneamente URLs extensas en versiones fácilmente compartibles. Construiremos esta aplicación como una aplicación React de página única usando el plugin React de Catalyst y aprovechando algunos otros servicios de Catalyst.

La apariencia final de la aplicación cliente se asemejará a esta pantalla:

Puedes acceder a una aplicación funcional y probar su funcionamiento aquí: ¡Prueba la App!

Nombraremos esta aplicación Cat.ly, y se construirá usando los siguientes componentes de Catalyst:

1. Catalyst Serverless:

   • Functions : Una función Node.js (del tipo Advanced I/O) contendrá la lógica para acortar la URL proporcionada.

2. Catalyst Cloud Scale:

   • Data Store : Se usa para almacenar las URLs originales y sus versiones acortadas.
   • ZCQL : Recupera las URLs originales del Data Store mediante consultas cuando se accede a sus versiones acortadas.
   • Cache : Almacena las URLs de acceso frecuente junto con sus versiones acortadas para permitir una recuperación y renderizado más rápidos.
   • Web Client Hosting : Aloja el front end de la aplicación. El cliente se construirá en el framework React usando el plugin React de Catalyst (zcatalyst-cli-plugin-react). Este plugin contiene ciertos módulos de node y archivos de biblioteca que manejan internamente varias operaciones involucradas en el desarrollo y prueba de la aplicación React. Esto permite un proceso de construcción de aplicaciones más rápido y eficiente.

Hemos proporcionado el código fuente de la aplicación en este repositorio de GitHub.

Puedes descargar el código de este repositorio a tu sistema local. Proporcionaremos instrucciones paso a paso para trabajar con el código en los archivos del repositorio y construir la aplicación final desplegable en las siguientes secciones.

La aplicación final de Cat.ly contendrá la siguiente estructura de directorios:

Antes de profundizar en el código, primero veremos la arquitectura general de la aplicación y el uso de cada uno de los componentes de Catalyst.

Arquitectura de la aplicación

La arquitectura de la aplicación Cat.ly se puede describir de la siguiente manera:

1. Un usuario ingresa una URL para acortar en un cuadro de texto en el cliente de la aplicación.
2. La función Advanced I/O verifica si la URL ingresada es válida. Si la URL es válida, se genera un ID corto, que es la parte del ID de la versión acortada de la URL.
3. La URL original y el ID corto de la URL se guardan en un segmento de Catalyst Cloud Scale Cache para un acceso más fácil. También se guardan en una tabla en el Catalyst Cloud Scale Data Store.
4. La URL original y su versión acortada se muestran en la aplicación cliente. Se incrementa una variable de conteo para mostrar el número de URLs acortadas usando la aplicación.
5. Cuando el usuario hace clic en la URL acortada desde el cliente, se ejecuta una consulta ZCQL para obtener su URL original del segmento de cache. Si el elemento de cache ha expirado, los datos se obtienen de la tabla en el Data Store en su lugar y se persisten nuevamente en el cache. El elemento de cache se sobrescribe cada vez que se accede a la URL, y su expiración se actualiza cada vez.
6. Se envía una señal de redirección al navegador para abrir la URL original en una nueva pestaña.