Crea un backend en Node.js con TypeScript y Puppeteer
La Industria 4.0 trajo innovaciones tecnológicas a nuestra realidad, principalmente en el campo de la automatización, pero ¿alguna vez has pensado en lo difícil que resulta para pequeñas empresas con poco capital de inversión adquirir tecnologías competitivas en el mercado actual?
En este artículo, vamos a desarrollar una herramienta para ayudar a esas pequeñas empresas a realizar pagos de forma automática y sin el costo de adquirir un servicio pago.
Paso 0 - Instalando Node
Instalar Node.js (npm) es muy sencillo. Puedes encontrar el instalador en su sitio web. Desde Visual Studio 2017 y Visual Studio 2015 Update 3 incluyen soporte para lenguaje TypeScript por defecto, pero el proceso es diferente. En este artículo vamos a seguir el paso a paso usando npm. En tu terminal ejecuta el comando:
Con esto puedes ejecutar cualquier archivo TypeScript. Por ejemplo, en el proyecto crea un archivo llamado greeter.ts:
Para ejecutar el archivo en su terminal en el mismo directorio que el proyecto, ejecuta:
Paso 1 - Creando el proyecto e instalando dependencias
Dentro de la carpeta donde deseas crear el proyecto, abre la terminal y ejecuta el comando:
Me gusta que cada vez que inicio un proyecto, comienzo a la par el repositorio en GitHub. Me saltaré la configuración paso a paso, pero tengo un consejo para hacer .gitignore más fácil: puedes ejecutar el comando:
Ejecuta el comando para instalar TypeScript en el proyecto:
Esto es equivalente a npm install --save-dev typescript. Usemos el framework Express. Instalamos así:
Si no has creado un archivo en la raíz del proyecto llamado tsconfig.json, ejecuta el comando:
Es una buena práctica poner en el archivo tsconfig.json en la línea outDir: outDir: “./dist”.
Instala las librerías que vamos a utilizar con el siguiente comando:
Ahora instala las librerías de desarrollo:
Para facilitar la ejecución de la aplicación en el archivo package.json, coloca en scripts:
Patrón del proyecto
El primer paso es configurar el servicio de Puppeteer, que será responsable de enviar mensajes. En la carpeta services crea un archivo llamado whatsapp.services.ts. En él, genera una clase con dos propiedades:
Hacerlo de esta manera permite que TypeScript reconozca las funciones internas de las clases, facilitando el desarrollo.
Crea una función para iniciar el servicio llamado online:
Nota que this. se llama para instanciar las propiedades antes definidas. De esa forma, podrás manipular las propiedades en las próximas funciones.
Es importante definir esta función para brindar compatibilidad en la siguiente función:
Considera ahora que esta función recibe un ID. Se realiza una solicitud a la base de datos que devuelve un objeto de cliente, por lo que puedes manipular un texto para enviarlo a tu cliente.
La función this.page.goto(url) hace que el navegador entre al link customizado.
La función this.page.waitForSelector(‘’) espera aparecer en la página en caso de usarse el botón de enviar.
La función this.sleep(1000) es el tiempo de animación para los objetos que realmente aparezcan en pantalla.
La función this.page.click(") dispara el evento de clicar en el botón de enviar mensaje de la conversación de WhatsApp.
Ahora vamos a la parte de las rutas. En la carpeta routers crea un archivo whatsapp.router.ts.
Ten en cuenta que instanciamos whatsAppServices e iniciamos la función online. Si lo hacemos así, el navegador iniciará automáticamente. Enseguida, iniciamos una ruta post con el cuerpo de la requisición con el id del cliente.
En la misma carpeta routers vamos a generar el archivo index.ts.
El objeto routers recibe el camino /whatsapp y la ruta anteriormente creada whatsappRouter. Posteriormente, exportamos routers.
Como en este ejemplo usamos una base de datos para registrar los clientes en el directorio config, crea un archivo llamado database.ts y coloca lo siguiente:
Si tienes mongoDB compass instalado, podrás visualizar toda la información por esa vía. Por Mongoose es posible modelar todos los objetos de la base de datos en la aplicación.
A continuación, en scr/, si no tienes el archivo app.ts, créalo y añade esto:
Inicia una variable que reciba Express y configúrala con cors(). Express.json() indica que el medio para recibir y enviar requisiciones será json. Routers informa a Express cuáles rutas usar, mientras que connection enlaza la base de datos y el servidor.
Esta aplicación es óptima para atender pequeñas demandas y con el programador adecuado, puedes integrar todo con una inteligencia artificial para responder a los clientes o para definir un sistema de pagos. De esa manera, economizas tiempo al disminuir la demanda de atención humanizada para cobranza.
Importante: cada envío de mensaje demora 30 segundos, en promedio. Por eso es recomendable enviarlos vía Puppeteer, algo ideal para empresas pequeñas.
Espero que este artículo te haya sido útil y que ahora puedas desarrollar proyectos con Node.js, TypeScript y Puppeteer.
En futuros contenidos abordaré otros detalles interesantes del mundo tecnológico.
¡Gracias por leerme! ¡Hasta luego!
Listopro Community da la bienvenida a todas las razas, etnias, nacionalidades, credos, géneros, orientaciones, puntos de vista e ideologías, siempre y cuando promuevan la diversidad, la equidad, la inclusión y el crecimiento profesional de los profesionales en tecnología.