Merge branch 'codigoencasa:main' into main

.gitignore

@@ -14,6 +14,10 @@ mediaSend/*
 !mediaSend/nota-de-voz.mp3
 .env
 .wwebjs_auth
+/session
+/session/*
+/tokens
+/tokens/*
 packages/cli/config.json
 config.json
 .yarnrc.yml

packages/bot/core/core.class.js

@@ -123,7 +123,7 @@ class CoreClass {
 
         // 📄 [options: callback]: Si se tiene un callback se ejecuta
         if (!fallBackFlag) {
-            if (refToContinue?.options?.capture) cbEveryCtx(refToContinue?.ref)
+            if (prevMsg?.options?.capture) cbEveryCtx(prevMsg?.ref)
             for (const ite of this.flowClass.find(body)) {
                 if (!ite?.options?.capture) cbEveryCtx(ite?.ref)
             }

packages/bot/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bot-whatsapp/bot",
-    "version": "0.0.41-alpha.0",
+    "version": "0.0.45-alpha.0",
     "description": "",
     "main": "./lib/bundle.bot.cjs",
     "scripts": {

packages/cli/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bot-whatsapp/cli",
-    "version": "0.0.48-alpha.0",
+    "version": "0.0.52-alpha.0",
     "description": "",
     "main": "index.js",
     "devDependencies": {

packages/contexts/src/dialogflow/dialogflow.class.js

@@ -97,13 +97,21 @@ class DialogFlowContext extends CoreClass {
             })
 
             customPayload = {
-                media: fields?.media?.stringValue,
-                buttons: mapButtons,
+                options: {
+                    media: fields?.media?.stringValue,
+                    buttons: mapButtons,
+                },
             }
+
+            const ctxFromDX = {
+                ...customPayload,
+                answer: fields?.answer?.stringValue,
+            }
+            this.sendFlow([ctxFromDX], from)
+            return
         }
 
         const ctxFromDX = {
-            ...customPayload,
             answer: queryResult?.fulfillmentText,
         }
 

packages/create-bot-whatsapp/package.json

@@ -1,6 +1,6 @@
 {
     "name": "create-bot-whatsapp",
-    "version": "0.0.59-alpha.0",
+    "version": "0.0.63-alpha.0",
     "description": "",
     "main": "./lib/bundle.create-bot-whatsapp.cjs",
     "files": [

packages/database/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bot-whatsapp/database",
-    "version": "0.0.40-alpha.0",
+    "version": "0.0.44-alpha.0",
     "description": "Esto es el conector a  mysql, pg, mongo",
     "main": "./lib/mock/index.cjs",
     "keywords": [],

packages/provider/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bot-whatsapp/provider",
-    "version": "0.0.46-alpha.0",
+    "version": "0.0.50-alpha.0",
     "description": "Esto es el conector a Twilio, Meta, etc...",
     "main": "./lib/mock/index.cjs",
     "keywords": [],

packages/provider/src/baileys/index.js

@@ -4,7 +4,7 @@ const pino = require('pino')
 const rimraf = require('rimraf')
 const mime = require('mime-types')
 const { join } = require('path')
-const { existsSync, createWriteStream } = require('fs')
+const { existsSync, createWriteStream, readFileSync } = require('fs')
 const { Console } = require('console')
 
 const {
@@ -137,7 +137,7 @@ class BaileysProvider extends ProviderClass {
                 }
 
                 const btnCtx =
-                    payload?.message?.templateButtonReplyMessage
+                    payload?.message?.buttonsResponseMessage
                         ?.selectedDisplayText
 
                 if (btnCtx) payload.body = btnCtx
@@ -167,8 +167,8 @@ class BaileysProvider extends ProviderClass {
     sendMedia = async (number, imageUrl, text) => {
         const fileDownloaded = await baileyDownloadMedia(imageUrl)
         return this.vendor.sendMessage(number, {
-            image: { url: fileDownloaded },
-            text,
+            image: readFileSync(fileDownloaded),
+            caption: text,
         })
     }
 
@@ -229,20 +229,22 @@ class BaileysProvider extends ProviderClass {
      */
 
     sendButtons = async (number, text, buttons) => {
-        const numberClean = number.replace('+', '')
+        const numberClean = baileyCleanNumber(number)
+
         const templateButtons = buttons.map((btn, i) => ({
-            index: `${i}`,
-            quickReplyButton: {
-                displayText: btn.body,
-                id: `id-btn-${i}`,
-            },
+            buttonId: `id-btn-${i}`,
+            buttonText: { displayText: btn.body },
+            type: 1,
         }))
 
-        return this.vendor.sendMessage(`${numberClean}@c.us`, {
+        const buttonMessage = {
             text,
             footer: '',
-            templateButtons: templateButtons,
-        })
+            buttons: templateButtons,
+            headerType: 1,
+        }
+
+        return this.vendor.sendMessage(numberClean, buttonMessage)
     }
 
     /**

packages/provider/src/web-whatsapp/index.js

@@ -24,6 +24,7 @@ class WebWhatsappProvider extends ProviderClass {
         super()
         this.vendor = new Client({
             authStrategy: new LocalAuth(),
+            puppeteer: { headless: true, args: ['--no-sandbox', '--disable-setuid-sandbox', '--unhandled-rejections=strict'] }
         })
 
         const listEvents = this.busEvents()

starters/apps/base-baileys-json/Dockerfile

@@ -0,0 +1,7 @@
+FROM node:lts-bullseye as bot
+WORKDIR /app
+COPY package*.json ./
+RUN npm i
+COPY . .
+ARG PORT
+CMD ["npm", "start"]

starters/apps/base-baileys-json/app.js

@@ -5,6 +5,8 @@ const {
     addKeyword,
 } = require('@bot-whatsapp/bot')
 
+require('./server.http')
+
 const BaileysProvider = require('@bot-whatsapp/provider/baileys')
 const JsonFileAdapter = require('@bot-whatsapp/database/json')
 

starters/apps/base-baileys-json/public/index.html

@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="es">
+    <head>
+        <meta charset="UTF-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <link rel="preconnect" href="https://rsms.me/" />
+        <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
+        <title>🤖 Crear chatbot WhatsApp en minutos</title>
+        <style>
+            html,
+            body {
+                display: flex;
+                margin: 0;
+                padding: 0;
+                width: 100%;
+                height: 100%;
+                justify-content: center;
+                align-self: center;
+                align-items: center;
+                font-family: 'Inter', sans-serif;
+            }
+        </style>
+    </head>
+    <body>
+        <div
+            style="
+                display: flex;
+                gap: 2rem;
+                justify-content: center;
+                align-items: center;
+            "
+        >
+            <img
+                style="
+                    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
+                        rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
+                    border-radius: 15px;
+                    object-fit: contain;
+                "
+                width="400"
+                height="400"
+                src="qr.png"
+                alt="Escanear QR"
+            />
+            <div style="width: 400px; display: grid; gap: 1rem">
+                <h1 style="margin: 0">Whatsapp QR</h1>
+                <p>
+                    <strong
+                        >F5 para actualizar, el codigo se actualiza cada minuto. </strong
+                    ><br />
+                    Con esta libreria, puedes configurar respuestas
+                    automatizadas para preguntas frecuentes , recibir y
+                    responder mensajes de manera automatizada, y hacer un
+                    seguimiento de las interacciones con los clientes. Además,
+                    nuestro Chatbot se integra fácilmente con otros sistemas y
+                    herramientas que ya esté utilizando en su negocio.
+                </p>
+                <div>
+                    <a
+                        target="_blank"
+                        style="
+                            background: white;
+                            box-shadow: rgb(0 0 0 / 16%) 0px 10px 36px 0px,
+                                rgb(0 0 0 / 6%) 0px 0px 0px 1px;
+                            padding: 10px;
+                            border-radius: 5px;
+                            font-weight: 600;
+                            text-decoration: none;
+                            color: #1a1a1a;
+                            border: solid 1px #afafaf;
+                        "
+                        href="https://bot-whatsapp.netlify.app/"
+                        >Ver documentación</a
+                    >
+                </div>
+            </div>
+        </div>
+    </body>
+</html>

starters/apps/base-baileys-json/server.http.js

@@ -0,0 +1,34 @@
+const http = require('http')
+const fs = require('fs')
+const path = require('path')
+
+const PORT = process.env.PORT || 3000
+
+/**
+ * Levantar un HTTP Server
+ */
+http.createServer(function (req, res) {
+    var cssPath = undefined
+    var fileStream = undefined
+    var imagePath = undefined
+
+    if (req.url === '/') {
+        fs.readFile('./public/index.html', 'UTF-8', function (err, html) {
+            res.writeHead(200, { 'Content-Type': 'text/html' })
+            res.end(html)
+        })
+    } else if (req.url.match('.css$')) {
+        cssPath = path.join(__dirname, 'public', req.url)
+        fileStream = fs.createReadStream(cssPath, 'UTF-8')
+        res.writeHead(200, { 'Content-Type': 'text/css' })
+        fileStream.pipe(res)
+    } else if (req.url.match('.png$')) {
+        imagePath = path.join(__dirname, req.url)
+        fileStream = fs.createReadStream(imagePath)
+        res.writeHead(200, { 'Content-Type': 'image/png' })
+        fileStream.pipe(res)
+    } else {
+        res.writeHead(404, { 'Content-Type': 'text/html' })
+        res.end('No Page Found')
+    }
+}).listen(PORT, () => console.log(`Escanear QR Code http://localhost:${PORT}`))

starters/apps/base-baileys-memory/Dockerfile

@@ -0,0 +1,7 @@
+FROM node:lts-bullseye as bot
+WORKDIR /app
+COPY package*.json ./
+RUN npm i
+COPY . .
+ARG PORT
+CMD ["npm", "start"]

starters/apps/base-baileys-memory/app.js

@@ -5,6 +5,8 @@ const {
     addKeyword,
 } = require('@bot-whatsapp/bot')
 
+require('./server.http')
+
 const BaileysProvider = require('@bot-whatsapp/provider/baileys')
 const MockAdapter = require('@bot-whatsapp/database/mock')
 

starters/apps/base-baileys-memory/public/index.html

@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="es">
+    <head>
+        <meta charset="UTF-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <link rel="preconnect" href="https://rsms.me/" />
+        <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
+        <title>🤖 Crear chatbot WhatsApp en minutos</title>
+        <style>
+            html,
+            body {
+                display: flex;
+                margin: 0;
+                padding: 0;
+                width: 100%;
+                height: 100%;
+                justify-content: center;
+                align-self: center;
+                align-items: center;
+                font-family: 'Inter', sans-serif;
+            }
+        </style>
+    </head>
+    <body>
+        <div
+            style="
+                display: flex;
+                gap: 2rem;
+                justify-content: center;
+                align-items: center;
+            "
+        >
+            <img
+                style="
+                    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
+                        rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
+                    border-radius: 15px;
+                    object-fit: contain;
+                "
+                width="400"
+                height="400"
+                src="qr.png"
+                alt="Escanear QR"
+            />
+            <div style="width: 400px; display: grid; gap: 1rem">
+                <h1 style="margin: 0">Whatsapp QR</h1>
+                <p>
+                    <strong
+                        >F5 para actualizar, el codigo se actualiza cada minuto. </strong
+                    ><br />
+                    Con esta libreria, puedes configurar respuestas
+                    automatizadas para preguntas frecuentes , recibir y
+                    responder mensajes de manera automatizada, y hacer un
+                    seguimiento de las interacciones con los clientes. Además,
+                    nuestro Chatbot se integra fácilmente con otros sistemas y
+                    herramientas que ya esté utilizando en su negocio.
+                </p>
+                <div>
+                    <a
+                        target="_blank"
+                        style="
+                            background: white;
+                            box-shadow: rgb(0 0 0 / 16%) 0px 10px 36px 0px,
+                                rgb(0 0 0 / 6%) 0px 0px 0px 1px;
+                            padding: 10px;
+                            border-radius: 5px;
+                            font-weight: 600;
+                            text-decoration: none;
+                            color: #1a1a1a;
+                            border: solid 1px #afafaf;
+                        "
+                        href="https://bot-whatsapp.netlify.app/"
+                        >Ver documentación</a
+                    >
+                </div>
+            </div>
+        </div>
+    </body>
+</html>

starters/apps/base-baileys-memory/server.http.js

@@ -0,0 +1,34 @@
+const http = require('http')
+const fs = require('fs')
+const path = require('path')
+
+const PORT = process.env.PORT || 3000
+
+/**
+ * Levantar un HTTP Server
+ */
+http.createServer(function (req, res) {
+    var cssPath = undefined
+    var fileStream = undefined
+    var imagePath = undefined
+
+    if (req.url === '/') {
+        fs.readFile('./public/index.html', 'UTF-8', function (err, html) {
+            res.writeHead(200, { 'Content-Type': 'text/html' })
+            res.end(html)
+        })
+    } else if (req.url.match('.css$')) {
+        cssPath = path.join(__dirname, 'public', req.url)
+        fileStream = fs.createReadStream(cssPath, 'UTF-8')
+        res.writeHead(200, { 'Content-Type': 'text/css' })
+        fileStream.pipe(res)
+    } else if (req.url.match('.png$')) {
+        imagePath = path.join(__dirname, req.url)
+        fileStream = fs.createReadStream(imagePath)
+        res.writeHead(200, { 'Content-Type': 'image/png' })
+        fileStream.pipe(res)
+    } else {
+        res.writeHead(404, { 'Content-Type': 'text/html' })
+        res.end('No Page Found')
+    }
+}).listen(PORT, () => console.log(`Escanear QR Code http://localhost:${PORT}`))

starters/apps/base-baileys-mongo/Dockerfile

@@ -0,0 +1,7 @@
+FROM node:lts-bullseye as bot
+WORKDIR /app
+COPY package*.json ./
+RUN npm i
+COPY . .
+ARG PORT
+CMD ["npm", "start"]

starters/apps/base-baileys-mongo/app.js

@@ -5,6 +5,8 @@ const {
     addKeyword,
 } = require('@bot-whatsapp/bot')
 
+require('./server.http')
+
 const BaileysProvider = require('@bot-whatsapp/provider/baileys')
 const MongoAdapter = require('@bot-whatsapp/database/mongo')
 

starters/apps/base-baileys-mongo/public/index.html

@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="es">
+    <head>
+        <meta charset="UTF-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <link rel="preconnect" href="https://rsms.me/" />
+        <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
+        <title>🤖 Crear chatbot WhatsApp en minutos</title>
+        <style>
+            html,
+            body {
+                display: flex;
+                margin: 0;
+                padding: 0;
+                width: 100%;
+                height: 100%;
+                justify-content: center;
+                align-self: center;
+                align-items: center;
+                font-family: 'Inter', sans-serif;
+            }
+        </style>
+    </head>
+    <body>
+        <div
+            style="
+                display: flex;
+                gap: 2rem;
+                justify-content: center;
+                align-items: center;
+            "
+        >
+            <img
+                style="
+                    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
+                        rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
+                    border-radius: 15px;
+                    object-fit: contain;
+                "
+                width="400"
+                height="400"
+                src="qr.png"
+                alt="Escanear QR"
+            />
+            <div style="width: 400px; display: grid; gap: 1rem">
+                <h1 style="margin: 0">Whatsapp QR</h1>
+                <p>
+                    <strong
+                        >F5 para actualizar, el codigo se actualiza cada minuto. </strong
+                    ><br />
+                    Con esta libreria, puedes configurar respuestas
+                    automatizadas para preguntas frecuentes , recibir y
+                    responder mensajes de manera automatizada, y hacer un
+                    seguimiento de las interacciones con los clientes. Además,
+                    nuestro Chatbot se integra fácilmente con otros sistemas y
+                    herramientas que ya esté utilizando en su negocio.
+                </p>
+                <div>
+                    <a
+                        target="_blank"
+                        style="
+                            background: white;
+                            box-shadow: rgb(0 0 0 / 16%) 0px 10px 36px 0px,
+                                rgb(0 0 0 / 6%) 0px 0px 0px 1px;
+                            padding: 10px;
+                            border-radius: 5px;
+                            font-weight: 600;
+                            text-decoration: none;
+                            color: #1a1a1a;
+                            border: solid 1px #afafaf;
+                        "
+                        href="https://bot-whatsapp.netlify.app/"
+                        >Ver documentación</a
+                    >
+                </div>
+            </div>
+        </div>
+    </body>
+</html>

starters/apps/base-baileys-mongo/server.http.js

@@ -0,0 +1,34 @@
+const http = require('http')
+const fs = require('fs')
+const path = require('path')
+
+const PORT = process.env.PORT || 3000
+
+/**
+ * Levantar un HTTP Server
+ */
+http.createServer(function (req, res) {
+    var cssPath = undefined
+    var fileStream = undefined
+    var imagePath = undefined
+
+    if (req.url === '/') {
+        fs.readFile('./public/index.html', 'UTF-8', function (err, html) {
+            res.writeHead(200, { 'Content-Type': 'text/html' })
+            res.end(html)
+        })
+    } else if (req.url.match('.css$')) {
+        cssPath = path.join(__dirname, 'public', req.url)
+        fileStream = fs.createReadStream(cssPath, 'UTF-8')
+        res.writeHead(200, { 'Content-Type': 'text/css' })
+        fileStream.pipe(res)
+    } else if (req.url.match('.png$')) {
+        imagePath = path.join(__dirname, req.url)
+        fileStream = fs.createReadStream(imagePath)
+        res.writeHead(200, { 'Content-Type': 'image/png' })
+        fileStream.pipe(res)
+    } else {
+        res.writeHead(404, { 'Content-Type': 'text/html' })
+        res.end('No Page Found')
+    }
+}).listen(PORT, () => console.log(`Escanear QR Code http://localhost:${PORT}`))

starters/apps/base-baileys-mysql/Dockerfile

@@ -0,0 +1,7 @@
+FROM node:lts-bullseye as bot
+WORKDIR /app
+COPY package*.json ./
+RUN npm i
+COPY . .
+ARG PORT
+CMD ["npm", "start"]

starters/apps/base-baileys-mysql/app.js

@@ -5,6 +5,8 @@ const {
     addKeyword,
 } = require('@bot-whatsapp/bot')
 
+require('./server.http')
+
 const BaileysProvider = require('@bot-whatsapp/provider/baileys')
 const MySQLAdapter = require('@bot-whatsapp/database/mysql')
 

starters/apps/base-baileys-mysql/public/index.html

@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="es">
+    <head>
+        <meta charset="UTF-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <link rel="preconnect" href="https://rsms.me/" />
+        <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
+        <title>🤖 Crear chatbot WhatsApp en minutos</title>
+        <style>
+            html,
+            body {
+                display: flex;
+                margin: 0;
+                padding: 0;
+                width: 100%;
+                height: 100%;
+                justify-content: center;
+                align-self: center;
+                align-items: center;
+                font-family: 'Inter', sans-serif;
+            }
+        </style>
+    </head>
+    <body>
+        <div
+            style="
+                display: flex;
+                gap: 2rem;
+                justify-content: center;
+                align-items: center;
+            "
+        >
+            <img
+                style="
+                    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
+                        rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
+                    border-radius: 15px;
+                    object-fit: contain;
+                "
+                width="400"
+                height="400"
+                src="qr.png"
+                alt="Escanear QR"
+            />
+            <div style="width: 400px; display: grid; gap: 1rem">
+                <h1 style="margin: 0">Whatsapp QR</h1>
+                <p>
+                    <strong
+                        >F5 para actualizar, el codigo se actualiza cada minuto. </strong
+                    ><br />
+                    Con esta libreria, puedes configurar respuestas
+                    automatizadas para preguntas frecuentes , recibir y
+                    responder mensajes de manera automatizada, y hacer un
+                    seguimiento de las interacciones con los clientes. Además,
+                    nuestro Chatbot se integra fácilmente con otros sistemas y
+                    herramientas que ya esté utilizando en su negocio.
+                </p>
+                <div>
+                    <a
+                        target="_blank"
+                        style="
+                            background: white;
+                            box-shadow: rgb(0 0 0 / 16%) 0px 10px 36px 0px,
+                                rgb(0 0 0 / 6%) 0px 0px 0px 1px;
+                            padding: 10px;
+                            border-radius: 5px;
+                            font-weight: 600;
+                            text-decoration: none;
+                            color: #1a1a1a;
+                            border: solid 1px #afafaf;
+                        "
+                        href="https://bot-whatsapp.netlify.app/"
+                        >Ver documentación</a
+                    >
+                </div>
+            </div>
+        </div>
+    </body>
+</html>

starters/apps/base-baileys-mysql/server.http.js

@@ -0,0 +1,34 @@
+const http = require('http')
+const fs = require('fs')
+const path = require('path')
+
+const PORT = process.env.PORT || 3000
+
+/**
+ * Levantar un HTTP Server
+ */
+http.createServer(function (req, res) {
+    var cssPath = undefined
+    var fileStream = undefined
+    var imagePath = undefined
+
+    if (req.url === '/') {
+        fs.readFile('./public/index.html', 'UTF-8', function (err, html) {
+            res.writeHead(200, { 'Content-Type': 'text/html' })
+            res.end(html)
+        })
+    } else if (req.url.match('.css$')) {
+        cssPath = path.join(__dirname, 'public', req.url)
+        fileStream = fs.createReadStream(cssPath, 'UTF-8')
+        res.writeHead(200, { 'Content-Type': 'text/css' })
+        fileStream.pipe(res)
+    } else if (req.url.match('.png$')) {
+        imagePath = path.join(__dirname, req.url)
+        fileStream = fs.createReadStream(imagePath)
+        res.writeHead(200, { 'Content-Type': 'image/png' })
+        fileStream.pipe(res)
+    } else {
+        res.writeHead(404, { 'Content-Type': 'text/html' })
+        res.end('No Page Found')
+    }
+}).listen(PORT, () => console.log(`Escanear QR Code http://localhost:${PORT}`))

starters/apps/base-venom-json/Dockerfile

@@ -0,0 +1,24 @@
+FROM node:18-alpine as node
+
+WORKDIR /app
+# Installs latest Chromium (92) package.
+RUN apk add --no-cache \
+      chromium \
+      nss \
+      freetype \
+      harfbuzz \
+      ca-certificates \
+      ttf-freefont \
+      nodejs \
+      yarn
+
+# Tell Puppeteer to skip installing Chrome. We'll be using the installed package.
+ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true \
+    PUPPETEER_EXECUTABLE_PATH=/usr/bin/chromium-browser
+
+# Puppeteer v10.0.0 works with Chromium 92.
+COPY . .
+RUN npm install puppeteer@10.0.0
+RUN npm install
+
+CMD ["npm", "start"]

starters/apps/base-venom-json/app.js

@@ -5,6 +5,8 @@ const {
     addKeyword,
 } = require('@bot-whatsapp/bot')
 
+require('./server.http')
+
 const VenomProvider = require('@bot-whatsapp/provider/venom')
 const JsonFileAdapter = require('@bot-whatsapp/database/json')
 

starters/apps/base-venom-json/public/index.html

@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="es">
+    <head>
+        <meta charset="UTF-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <link rel="preconnect" href="https://rsms.me/" />
+        <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
+        <title>🤖 Crear chatbot WhatsApp en minutos</title>
+        <style>
+            html,
+            body {
+                display: flex;
+                margin: 0;
+                padding: 0;
+                width: 100%;
+                height: 100%;
+                justify-content: center;
+                align-self: center;
+                align-items: center;
+                font-family: 'Inter', sans-serif;
+            }
+        </style>
+    </head>
+    <body>
+        <div
+            style="
+                display: flex;
+                gap: 2rem;
+                justify-content: center;
+                align-items: center;
+            "
+        >
+            <img
+                style="
+                    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
+                        rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
+                    border-radius: 15px;
+                    object-fit: contain;
+                "
+                width="400"
+                height="400"
+                src="qr.png"
+                alt="Escanear QR"
+            />
+            <div style="width: 400px; display: grid; gap: 1rem">
+                <h1 style="margin: 0">Whatsapp QR</h1>
+                <p>
+                    <strong
+                        >F5 para actualizar, el codigo se actualiza cada minuto. </strong
+                    ><br />
+                    Con esta libreria, puedes configurar respuestas
+                    automatizadas para preguntas frecuentes , recibir y
+                    responder mensajes de manera automatizada, y hacer un
+                    seguimiento de las interacciones con los clientes. Además,
+                    nuestro Chatbot se integra fácilmente con otros sistemas y
+                    herramientas que ya esté utilizando en su negocio.
+                </p>
+                <div>
+                    <a
+                        target="_blank"
+                        style="
+                            background: white;
+                            box-shadow: rgb(0 0 0 / 16%) 0px 10px 36px 0px,
+                                rgb(0 0 0 / 6%) 0px 0px 0px 1px;
+                            padding: 10px;
+                            border-radius: 5px;
+                            font-weight: 600;
+                            text-decoration: none;
+                            color: #1a1a1a;
+                            border: solid 1px #afafaf;
+                        "
+                        href="https://bot-whatsapp.netlify.app/"
+                        >Ver documentación</a
+                    >
+                </div>
+            </div>
+        </div>
+    </body>
+</html>

starters/apps/base-venom-json/server.http.js

@@ -0,0 +1,34 @@
+const http = require('http')
+const fs = require('fs')
+const path = require('path')
+
+const PORT = process.env.PORT || 3000
+
+/**
+ * Levantar un HTTP Server
+ */
+http.createServer(function (req, res) {
+    var cssPath = undefined
+    var fileStream = undefined
+    var imagePath = undefined
+
+    if (req.url === '/') {
+        fs.readFile('./public/index.html', 'UTF-8', function (err, html) {
+            res.writeHead(200, { 'Content-Type': 'text/html' })
+            res.end(html)
+        })
+    } else if (req.url.match('.css$')) {
+        cssPath = path.join(__dirname, 'public', req.url)
+        fileStream = fs.createReadStream(cssPath, 'UTF-8')
+        res.writeHead(200, { 'Content-Type': 'text/css' })
+        fileStream.pipe(res)
+    } else if (req.url.match('.png$')) {
+        imagePath = path.join(__dirname, req.url)
+        fileStream = fs.createReadStream(imagePath)
+        res.writeHead(200, { 'Content-Type': 'image/png' })
+        fileStream.pipe(res)
+    } else {
+        res.writeHead(404, { 'Content-Type': 'text/html' })
+        res.end('No Page Found')
+    }
+}).listen(PORT, () => console.log(`Escanear QR Code http://localhost:${PORT}`))

starters/apps/base-venom-memory/Dockerfile

@@ -0,0 +1,24 @@
+FROM node:18-alpine as node
+
+WORKDIR /app
+# Installs latest Chromium (92) package.
+RUN apk add --no-cache \
+      chromium \
+      nss \
+      freetype \
+      harfbuzz \
+      ca-certificates \
+      ttf-freefont \
+      nodejs \
+      yarn
+
+# Tell Puppeteer to skip installing Chrome. We'll be using the installed package.
+ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true \
+    PUPPETEER_EXECUTABLE_PATH=/usr/bin/chromium-browser
+
+# Puppeteer v10.0.0 works with Chromium 92.
+COPY . .
+RUN npm install puppeteer@10.0.0
+RUN npm install
+
+CMD ["npm", "start"]

starters/apps/base-venom-memory/app.js

@@ -5,6 +5,8 @@ const {
     addKeyword,
 } = require('@bot-whatsapp/bot')
 
+require('./server.http')
+
 const VenomProvider = require('@bot-whatsapp/provider/venom')
 const MockAdapter = require('@bot-whatsapp/database/mock')
 

starters/apps/base-venom-memory/public/index.html

@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="es">
+    <head>
+        <meta charset="UTF-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <link rel="preconnect" href="https://rsms.me/" />
+        <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
+        <title>🤖 Crear chatbot WhatsApp en minutos</title>
+        <style>
+            html,
+            body {
+                display: flex;
+                margin: 0;
+                padding: 0;
+                width: 100%;
+                height: 100%;
+                justify-content: center;
+                align-self: center;
+                align-items: center;
+                font-family: 'Inter', sans-serif;
+            }
+        </style>
+    </head>
+    <body>
+        <div
+            style="
+                display: flex;
+                gap: 2rem;
+                justify-content: center;
+                align-items: center;
+            "
+        >
+            <img
+                style="
+                    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
+                        rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
+                    border-radius: 15px;
+                    object-fit: contain;
+                "
+                width="400"
+                height="400"
+                src="qr.png"
+                alt="Escanear QR"
+            />
+            <div style="width: 400px; display: grid; gap: 1rem">
+                <h1 style="margin: 0">Whatsapp QR</h1>
+                <p>
+                    <strong
+                        >F5 para actualizar, el codigo se actualiza cada minuto. </strong
+                    ><br />
+                    Con esta libreria, puedes configurar respuestas
+                    automatizadas para preguntas frecuentes , recibir y
+                    responder mensajes de manera automatizada, y hacer un
+                    seguimiento de las interacciones con los clientes. Además,
+                    nuestro Chatbot se integra fácilmente con otros sistemas y
+                    herramientas que ya esté utilizando en su negocio.
+                </p>
+                <div>
+                    <a
+                        target="_blank"
+                        style="
+                            background: white;
+                            box-shadow: rgb(0 0 0 / 16%) 0px 10px 36px 0px,
+                                rgb(0 0 0 / 6%) 0px 0px 0px 1px;
+                            padding: 10px;
+                            border-radius: 5px;
+                            font-weight: 600;
+                            text-decoration: none;
+                            color: #1a1a1a;
+                            border: solid 1px #afafaf;
+                        "
+                        href="https://bot-whatsapp.netlify.app/"
+                        >Ver documentación</a
+                    >
+                </div>
+            </div>
+        </div>
+    </body>
+</html>

starters/apps/base-venom-memory/server.http.js

@@ -0,0 +1,34 @@
+const http = require('http')
+const fs = require('fs')
+const path = require('path')
+
+const PORT = process.env.PORT || 3000
+
+/**
+ * Levantar un HTTP Server
+ */
+http.createServer(function (req, res) {
+    var cssPath = undefined
+    var fileStream = undefined
+    var imagePath = undefined
+
+    if (req.url === '/') {
+        fs.readFile('./public/index.html', 'UTF-8', function (err, html) {
+            res.writeHead(200, { 'Content-Type': 'text/html' })
+            res.end(html)
+        })
+    } else if (req.url.match('.css$')) {
+        cssPath = path.join(__dirname, 'public', req.url)
+        fileStream = fs.createReadStream(cssPath, 'UTF-8')
+        res.writeHead(200, { 'Content-Type': 'text/css' })
+        fileStream.pipe(res)
+    } else if (req.url.match('.png$')) {
+        imagePath = path.join(__dirname, req.url)
+        fileStream = fs.createReadStream(imagePath)
+        res.writeHead(200, { 'Content-Type': 'image/png' })
+        fileStream.pipe(res)
+    } else {
+        res.writeHead(404, { 'Content-Type': 'text/html' })
+        res.end('No Page Found')
+    }
+}).listen(PORT, () => console.log(`Escanear QR Code http://localhost:${PORT}`))

starters/apps/base-venom-mongo/Dockerfile

@@ -0,0 +1,24 @@
+FROM node:18-alpine as node
+
+WORKDIR /app
+# Installs latest Chromium (92) package.
+RUN apk add --no-cache \
+      chromium \
+      nss \
+      freetype \
+      harfbuzz \
+      ca-certificates \
+      ttf-freefont \
+      nodejs \
+      yarn
+
+# Tell Puppeteer to skip installing Chrome. We'll be using the installed package.
+ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true \
+    PUPPETEER_EXECUTABLE_PATH=/usr/bin/chromium-browser
+
+# Puppeteer v10.0.0 works with Chromium 92.
+COPY . .
+RUN npm install puppeteer@10.0.0
+RUN npm install
+
+CMD ["npm", "start"]

starters/apps/base-venom-mongo/app.js

@@ -5,6 +5,8 @@ const {
     addKeyword,
 } = require('@bot-whatsapp/bot')
 
+require('./server.http')
+
 const VenomProvider = require('@bot-whatsapp/provider/venom')
 const MongoAdapter = require('@bot-whatsapp/database/mongo')
 

starters/apps/base-venom-mongo/public/index.html

@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="es">
+    <head>
+        <meta charset="UTF-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <link rel="preconnect" href="https://rsms.me/" />
+        <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
+        <title>🤖 Crear chatbot WhatsApp en minutos</title>
+        <style>
+            html,
+            body {
+                display: flex;
+                margin: 0;
+                padding: 0;
+                width: 100%;
+                height: 100%;
+                justify-content: center;
+                align-self: center;
+                align-items: center;
+                font-family: 'Inter', sans-serif;
+            }
+        </style>
+    </head>
+    <body>
+        <div
+            style="
+                display: flex;
+                gap: 2rem;
+                justify-content: center;
+                align-items: center;
+            "
+        >
+            <img
+                style="
+                    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
+                        rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
+                    border-radius: 15px;
+                    object-fit: contain;
+                "
+                width="400"
+                height="400"
+                src="qr.png"
+                alt="Escanear QR"
+            />
+            <div style="width: 400px; display: grid; gap: 1rem">
+                <h1 style="margin: 0">Whatsapp QR</h1>
+                <p>
+                    <strong
+                        >F5 para actualizar, el codigo se actualiza cada minuto. </strong
+                    ><br />
+                    Con esta libreria, puedes configurar respuestas
+                    automatizadas para preguntas frecuentes , recibir y
+                    responder mensajes de manera automatizada, y hacer un
+                    seguimiento de las interacciones con los clientes. Además,
+                    nuestro Chatbot se integra fácilmente con otros sistemas y
+                    herramientas que ya esté utilizando en su negocio.
+                </p>
+                <div>
+                    <a
+                        target="_blank"
+                        style="
+                            background: white;
+                            box-shadow: rgb(0 0 0 / 16%) 0px 10px 36px 0px,
+                                rgb(0 0 0 / 6%) 0px 0px 0px 1px;
+                            padding: 10px;
+                            border-radius: 5px;
+                            font-weight: 600;
+                            text-decoration: none;
+                            color: #1a1a1a;
+                            border: solid 1px #afafaf;
+                        "
+                        href="https://bot-whatsapp.netlify.app/"
+                        >Ver documentación</a
+                    >
+                </div>
+            </div>
+        </div>
+    </body>
+</html>

starters/apps/base-venom-mongo/server.http.js

@@ -0,0 +1,34 @@
+const http = require('http')
+const fs = require('fs')
+const path = require('path')
+
+const PORT = process.env.PORT || 3000
+
+/**
+ * Levantar un HTTP Server
+ */
+http.createServer(function (req, res) {
+    var cssPath = undefined
+    var fileStream = undefined
+    var imagePath = undefined
+
+    if (req.url === '/') {
+        fs.readFile('./public/index.html', 'UTF-8', function (err, html) {
+            res.writeHead(200, { 'Content-Type': 'text/html' })
+            res.end(html)
+        })
+    } else if (req.url.match('.css$')) {
+        cssPath = path.join(__dirname, 'public', req.url)
+        fileStream = fs.createReadStream(cssPath, 'UTF-8')
+        res.writeHead(200, { 'Content-Type': 'text/css' })
+        fileStream.pipe(res)
+    } else if (req.url.match('.png$')) {
+        imagePath = path.join(__dirname, req.url)
+        fileStream = fs.createReadStream(imagePath)
+        res.writeHead(200, { 'Content-Type': 'image/png' })
+        fileStream.pipe(res)
+    } else {
+        res.writeHead(404, { 'Content-Type': 'text/html' })
+        res.end('No Page Found')
+    }
+}).listen(PORT, () => console.log(`Escanear QR Code http://localhost:${PORT}`))

starters/apps/base-venom-mysql/Dockerfile

@@ -0,0 +1,24 @@
+FROM node:18-alpine as node
+
+WORKDIR /app
+# Installs latest Chromium (92) package.
+RUN apk add --no-cache \
+      chromium \
+      nss \
+      freetype \
+      harfbuzz \
+      ca-certificates \
+      ttf-freefont \
+      nodejs \
+      yarn
+
+# Tell Puppeteer to skip installing Chrome. We'll be using the installed package.
+ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true \
+    PUPPETEER_EXECUTABLE_PATH=/usr/bin/chromium-browser
+
+# Puppeteer v10.0.0 works with Chromium 92.
+COPY . .
+RUN npm install puppeteer@10.0.0
+RUN npm install
+
+CMD ["npm", "start"]

starters/apps/base-venom-mysql/app.js

@@ -5,6 +5,8 @@ const {
     addKeyword,
 } = require('@bot-whatsapp/bot')
 
+require('./server.http')
+
 const VenomProvider = require('@bot-whatsapp/provider/venom')
 const MySQLAdapter = require('@bot-whatsapp/database/mysql')
 

starters/apps/base-venom-mysql/public/index.html

@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="es">
+    <head>
+        <meta charset="UTF-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <link rel="preconnect" href="https://rsms.me/" />
+        <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
+        <title>🤖 Crear chatbot WhatsApp en minutos</title>
+        <style>
+            html,
+            body {
+                display: flex;
+                margin: 0;
+                padding: 0;
+                width: 100%;
+                height: 100%;
+                justify-content: center;
+                align-self: center;
+                align-items: center;
+                font-family: 'Inter', sans-serif;
+            }
+        </style>
+    </head>
+    <body>
+        <div
+            style="
+                display: flex;
+                gap: 2rem;
+                justify-content: center;
+                align-items: center;
+            "
+        >
+            <img
+                style="
+                    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
+                        rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
+                    border-radius: 15px;
+                    object-fit: contain;
+                "
+                width="400"
+                height="400"
+                src="qr.png"
+                alt="Escanear QR"
+            />
+            <div style="width: 400px; display: grid; gap: 1rem">
+                <h1 style="margin: 0">Whatsapp QR</h1>
+                <p>
+                    <strong
+                        >F5 para actualizar, el codigo se actualiza cada minuto. </strong
+                    ><br />
+                    Con esta libreria, puedes configurar respuestas
+                    automatizadas para preguntas frecuentes , recibir y
+                    responder mensajes de manera automatizada, y hacer un
+                    seguimiento de las interacciones con los clientes. Además,
+                    nuestro Chatbot se integra fácilmente con otros sistemas y
+                    herramientas que ya esté utilizando en su negocio.
+                </p>
+                <div>
+                    <a
+                        target="_blank"
+                        style="
+                            background: white;
+                            box-shadow: rgb(0 0 0 / 16%) 0px 10px 36px 0px,
+                                rgb(0 0 0 / 6%) 0px 0px 0px 1px;
+                            padding: 10px;
+                            border-radius: 5px;
+                            font-weight: 600;
+                            text-decoration: none;
+                            color: #1a1a1a;
+                            border: solid 1px #afafaf;
+                        "
+                        href="https://bot-whatsapp.netlify.app/"
+                        >Ver documentación</a
+                    >
+                </div>
+            </div>
+        </div>
+    </body>
+</html>

starters/apps/base-venom-mysql/server.http.js

@@ -0,0 +1,34 @@
+const http = require('http')
+const fs = require('fs')
+const path = require('path')
+
+const PORT = process.env.PORT || 3000
+
+/**
+ * Levantar un HTTP Server
+ */
+http.createServer(function (req, res) {
+    var cssPath = undefined
+    var fileStream = undefined
+    var imagePath = undefined
+
+    if (req.url === '/') {
+        fs.readFile('./public/index.html', 'UTF-8', function (err, html) {
+            res.writeHead(200, { 'Content-Type': 'text/html' })
+            res.end(html)
+        })
+    } else if (req.url.match('.css$')) {
+        cssPath = path.join(__dirname, 'public', req.url)
+        fileStream = fs.createReadStream(cssPath, 'UTF-8')
+        res.writeHead(200, { 'Content-Type': 'text/css' })
+        fileStream.pipe(res)
+    } else if (req.url.match('.png$')) {
+        imagePath = path.join(__dirname, req.url)
+        fileStream = fs.createReadStream(imagePath)
+        res.writeHead(200, { 'Content-Type': 'image/png' })
+        fileStream.pipe(res)
+    } else {
+        res.writeHead(404, { 'Content-Type': 'text/html' })
+        res.end('No Page Found')
+    }
+}).listen(PORT, () => console.log(`Escanear QR Code http://localhost:${PORT}`))

starters/apps/base-wweb-json/Dockerfile

@@ -0,0 +1,24 @@
+FROM node:18-alpine as node
+
+WORKDIR /app
+# Installs latest Chromium (92) package.
+RUN apk add --no-cache \
+      chromium \
+      nss \
+      freetype \
+      harfbuzz \
+      ca-certificates \
+      ttf-freefont \
+      nodejs \
+      yarn
+
+# Tell Puppeteer to skip installing Chrome. We'll be using the installed package.
+ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true \
+    PUPPETEER_EXECUTABLE_PATH=/usr/bin/chromium-browser
+
+# Puppeteer v10.0.0 works with Chromium 92.
+COPY . .
+RUN npm install puppeteer@10.0.0
+RUN npm install
+
+CMD ["npm", "start"]

starters/apps/base-wweb-json/app.js

@@ -5,6 +5,8 @@ const {
     addKeyword,
 } = require('@bot-whatsapp/bot')
 
+require('./server.http')
+
 const WebWhatsappProvider = require('@bot-whatsapp/provider/web-whatsapp')
 const JsonFileAdapter = require('@bot-whatsapp/database/json')
 

starters/apps/base-wweb-json/public/index.html

@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="es">
+    <head>
+        <meta charset="UTF-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <link rel="preconnect" href="https://rsms.me/" />
+        <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
+        <title>🤖 Crear chatbot WhatsApp en minutos</title>
+        <style>
+            html,
+            body {
+                display: flex;
+                margin: 0;
+                padding: 0;
+                width: 100%;
+                height: 100%;
+                justify-content: center;
+                align-self: center;
+                align-items: center;
+                font-family: 'Inter', sans-serif;
+            }
+        </style>
+    </head>
+    <body>
+        <div
+            style="
+                display: flex;
+                gap: 2rem;
+                justify-content: center;
+                align-items: center;
+            "
+        >
+            <img
+                style="
+                    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
+                        rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
+                    border-radius: 15px;
+                    object-fit: contain;
+                "
+                width="400"
+                height="400"
+                src="qr.png"
+                alt="Escanear QR"
+            />
+            <div style="width: 400px; display: grid; gap: 1rem">
+                <h1 style="margin: 0">Whatsapp QR</h1>
+                <p>
+                    <strong
+                        >F5 para actualizar, el codigo se actualiza cada minuto. </strong
+                    ><br />
+                    Con esta libreria, puedes configurar respuestas
+                    automatizadas para preguntas frecuentes , recibir y
+                    responder mensajes de manera automatizada, y hacer un
+                    seguimiento de las interacciones con los clientes. Además,
+                    nuestro Chatbot se integra fácilmente con otros sistemas y
+                    herramientas que ya esté utilizando en su negocio.
+                </p>
+                <div>
+                    <a
+                        target="_blank"
+                        style="
+                            background: white;
+                            box-shadow: rgb(0 0 0 / 16%) 0px 10px 36px 0px,
+                                rgb(0 0 0 / 6%) 0px 0px 0px 1px;
+                            padding: 10px;
+                            border-radius: 5px;
+                            font-weight: 600;
+                            text-decoration: none;
+                            color: #1a1a1a;
+                            border: solid 1px #afafaf;
+                        "
+                        href="https://bot-whatsapp.netlify.app/"
+                        >Ver documentación</a
+                    >
+                </div>
+            </div>
+        </div>
+    </body>
+</html>

starters/apps/base-wweb-json/server.http.js

@@ -0,0 +1,34 @@
+const http = require('http')
+const fs = require('fs')
+const path = require('path')
+
+const PORT = process.env.PORT || 3000
+
+/**
+ * Levantar un HTTP Server
+ */
+http.createServer(function (req, res) {
+    var cssPath = undefined
+    var fileStream = undefined
+    var imagePath = undefined
+
+    if (req.url === '/') {
+        fs.readFile('./public/index.html', 'UTF-8', function (err, html) {
+            res.writeHead(200, { 'Content-Type': 'text/html' })
+            res.end(html)
+        })
+    } else if (req.url.match('.css$')) {
+        cssPath = path.join(__dirname, 'public', req.url)
+        fileStream = fs.createReadStream(cssPath, 'UTF-8')
+        res.writeHead(200, { 'Content-Type': 'text/css' })
+        fileStream.pipe(res)
+    } else if (req.url.match('.png$')) {
+        imagePath = path.join(__dirname, req.url)
+        fileStream = fs.createReadStream(imagePath)
+        res.writeHead(200, { 'Content-Type': 'image/png' })
+        fileStream.pipe(res)
+    } else {
+        res.writeHead(404, { 'Content-Type': 'text/html' })
+        res.end('No Page Found')
+    }
+}).listen(PORT, () => console.log(`Escanear QR Code http://localhost:${PORT}`))

starters/apps/base-wweb-memory/Dockerfile

@@ -0,0 +1,24 @@
+FROM node:18-alpine as node
+
+WORKDIR /app
+# Installs latest Chromium (92) package.
+RUN apk add --no-cache \
+      chromium \
+      nss \
+      freetype \
+      harfbuzz \
+      ca-certificates \
+      ttf-freefont \
+      nodejs \
+      yarn
+
+# Tell Puppeteer to skip installing Chrome. We'll be using the installed package.
+ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true \
+    PUPPETEER_EXECUTABLE_PATH=/usr/bin/chromium-browser
+
+# Puppeteer v10.0.0 works with Chromium 92.
+COPY . .
+RUN npm install puppeteer@10.0.0
+RUN npm install
+
+CMD ["npm", "start"]

starters/apps/base-wweb-memory/app.js

@@ -5,6 +5,8 @@ const {
     addKeyword,
 } = require('@bot-whatsapp/bot')
 
+require('./server.http')
+
 const WebWhatsappProvider = require('@bot-whatsapp/provider/web-whatsapp')
 const MockAdapter = require('@bot-whatsapp/database/mock')
 

starters/apps/base-wweb-memory/public/index.html

@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="es">
+    <head>
+        <meta charset="UTF-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <link rel="preconnect" href="https://rsms.me/" />
+        <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
+        <title>🤖 Crear chatbot WhatsApp en minutos</title>
+        <style>
+            html,
+            body {
+                display: flex;
+                margin: 0;
+                padding: 0;
+                width: 100%;
+                height: 100%;
+                justify-content: center;
+                align-self: center;
+                align-items: center;
+                font-family: 'Inter', sans-serif;
+            }
+        </style>
+    </head>
+    <body>
+        <div
+            style="
+                display: flex;
+                gap: 2rem;
+                justify-content: center;
+                align-items: center;
+            "
+        >
+            <img
+                style="
+                    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
+                        rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
+                    border-radius: 15px;
+                    object-fit: contain;
+                "
+                width="400"
+                height="400"
+                src="qr.png"
+                alt="Escanear QR"
+            />
+            <div style="width: 400px; display: grid; gap: 1rem">
+                <h1 style="margin: 0">Whatsapp QR</h1>
+                <p>
+                    <strong
+                        >F5 para actualizar, el codigo se actualiza cada minuto. </strong
+                    ><br />
+                    Con esta libreria, puedes configurar respuestas
+                    automatizadas para preguntas frecuentes , recibir y
+                    responder mensajes de manera automatizada, y hacer un
+                    seguimiento de las interacciones con los clientes. Además,
+                    nuestro Chatbot se integra fácilmente con otros sistemas y
+                    herramientas que ya esté utilizando en su negocio.
+                </p>
+                <div>
+                    <a
+                        target="_blank"
+                        style="
+                            background: white;
+                            box-shadow: rgb(0 0 0 / 16%) 0px 10px 36px 0px,
+                                rgb(0 0 0 / 6%) 0px 0px 0px 1px;
+                            padding: 10px;
+                            border-radius: 5px;
+                            font-weight: 600;
+                            text-decoration: none;
+                            color: #1a1a1a;
+                            border: solid 1px #afafaf;
+                        "
+                        href="https://bot-whatsapp.netlify.app/"
+                        >Ver documentación</a
+                    >
+                </div>
+            </div>
+        </div>
+    </body>
+</html>

starters/apps/base-wweb-memory/server.http.js

@@ -0,0 +1,34 @@
+const http = require('http')
+const fs = require('fs')
+const path = require('path')
+
+const PORT = process.env.PORT || 3000
+
+/**
+ * Levantar un HTTP Server
+ */
+http.createServer(function (req, res) {
+    var cssPath = undefined
+    var fileStream = undefined
+    var imagePath = undefined
+
+    if (req.url === '/') {
+        fs.readFile('./public/index.html', 'UTF-8', function (err, html) {
+            res.writeHead(200, { 'Content-Type': 'text/html' })
+            res.end(html)
+        })
+    } else if (req.url.match('.css$')) {
+        cssPath = path.join(__dirname, 'public', req.url)
+        fileStream = fs.createReadStream(cssPath, 'UTF-8')
+        res.writeHead(200, { 'Content-Type': 'text/css' })
+        fileStream.pipe(res)
+    } else if (req.url.match('.png$')) {
+        imagePath = path.join(__dirname, req.url)
+        fileStream = fs.createReadStream(imagePath)
+        res.writeHead(200, { 'Content-Type': 'image/png' })
+        fileStream.pipe(res)
+    } else {
+        res.writeHead(404, { 'Content-Type': 'text/html' })
+        res.end('No Page Found')
+    }
+}).listen(PORT, () => console.log(`Escanear QR Code http://localhost:${PORT}`))

starters/apps/base-wweb-mongo/Dockerfile

@@ -0,0 +1,24 @@
+FROM node:18-alpine as node
+
+WORKDIR /app
+# Installs latest Chromium (92) package.
+RUN apk add --no-cache \
+      chromium \
+      nss \
+      freetype \
+      harfbuzz \
+      ca-certificates \
+      ttf-freefont \
+      nodejs \
+      yarn
+
+# Tell Puppeteer to skip installing Chrome. We'll be using the installed package.
+ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true \
+    PUPPETEER_EXECUTABLE_PATH=/usr/bin/chromium-browser
+
+# Puppeteer v10.0.0 works with Chromium 92.
+COPY . .
+RUN npm install puppeteer@10.0.0
+RUN npm install
+
+CMD ["npm", "start"]

starters/apps/base-wweb-mongo/app.js

@@ -8,6 +8,8 @@ const {
 const WebWhatsappProvider = require('@bot-whatsapp/provider/web-whatsapp')
 const MongoAdapter = require('@bot-whatsapp/database/mongo')
 
+require('./server.http')
+
 /**
  * Declaramos las conexiones de Mongo
  */

starters/apps/base-wweb-mongo/public/index.html

@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="es">
+    <head>
+        <meta charset="UTF-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <link rel="preconnect" href="https://rsms.me/" />
+        <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
+        <title>🤖 Crear chatbot WhatsApp en minutos</title>
+        <style>
+            html,
+            body {
+                display: flex;
+                margin: 0;
+                padding: 0;
+                width: 100%;
+                height: 100%;
+                justify-content: center;
+                align-self: center;
+                align-items: center;
+                font-family: 'Inter', sans-serif;
+            }
+        </style>
+    </head>
+    <body>
+        <div
+            style="
+                display: flex;
+                gap: 2rem;
+                justify-content: center;
+                align-items: center;
+            "
+        >
+            <img
+                style="
+                    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
+                        rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
+                    border-radius: 15px;
+                    object-fit: contain;
+                "
+                width="400"
+                height="400"
+                src="qr.png"
+                alt="Escanear QR"
+            />
+            <div style="width: 400px; display: grid; gap: 1rem">
+                <h1 style="margin: 0">Whatsapp QR</h1>
+                <p>
+                    <strong
+                        >F5 para actualizar, el codigo se actualiza cada minuto. </strong
+                    ><br />
+                    Con esta libreria, puedes configurar respuestas
+                    automatizadas para preguntas frecuentes , recibir y
+                    responder mensajes de manera automatizada, y hacer un
+                    seguimiento de las interacciones con los clientes. Además,
+                    nuestro Chatbot se integra fácilmente con otros sistemas y
+                    herramientas que ya esté utilizando en su negocio.
+                </p>
+                <div>
+                    <a
+                        target="_blank"
+                        style="
+                            background: white;
+                            box-shadow: rgb(0 0 0 / 16%) 0px 10px 36px 0px,
+                                rgb(0 0 0 / 6%) 0px 0px 0px 1px;
+                            padding: 10px;
+                            border-radius: 5px;
+                            font-weight: 600;
+                            text-decoration: none;
+                            color: #1a1a1a;
+                            border: solid 1px #afafaf;
+                        "
+                        href="https://bot-whatsapp.netlify.app/"
+                        >Ver documentación</a
+                    >
+                </div>
+            </div>
+        </div>
+    </body>
+</html>

starters/apps/base-wweb-mongo/server.http.js

@@ -0,0 +1,34 @@
+const http = require('http')
+const fs = require('fs')
+const path = require('path')
+
+const PORT = process.env.PORT || 3000
+
+/**
+ * Levantar un HTTP Server
+ */
+http.createServer(function (req, res) {
+    var cssPath = undefined
+    var fileStream = undefined
+    var imagePath = undefined
+
+    if (req.url === '/') {
+        fs.readFile('./public/index.html', 'UTF-8', function (err, html) {
+            res.writeHead(200, { 'Content-Type': 'text/html' })
+            res.end(html)
+        })
+    } else if (req.url.match('.css$')) {
+        cssPath = path.join(__dirname, 'public', req.url)
+        fileStream = fs.createReadStream(cssPath, 'UTF-8')
+        res.writeHead(200, { 'Content-Type': 'text/css' })
+        fileStream.pipe(res)
+    } else if (req.url.match('.png$')) {
+        imagePath = path.join(__dirname, req.url)
+        fileStream = fs.createReadStream(imagePath)
+        res.writeHead(200, { 'Content-Type': 'image/png' })
+        fileStream.pipe(res)
+    } else {
+        res.writeHead(404, { 'Content-Type': 'text/html' })
+        res.end('No Page Found')
+    }
+}).listen(PORT, () => console.log(`Escanear QR Code http://localhost:${PORT}`))

starters/apps/base-wweb-mysql/Dockerfile

@@ -0,0 +1,24 @@
+FROM node:18-alpine as node
+
+WORKDIR /app
+# Installs latest Chromium (92) package.
+RUN apk add --no-cache \
+      chromium \
+      nss \
+      freetype \
+      harfbuzz \
+      ca-certificates \
+      ttf-freefont \
+      nodejs \
+      yarn
+
+# Tell Puppeteer to skip installing Chrome. We'll be using the installed package.
+ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true \
+    PUPPETEER_EXECUTABLE_PATH=/usr/bin/chromium-browser
+
+# Puppeteer v10.0.0 works with Chromium 92.
+COPY . .
+RUN npm install puppeteer@10.0.0
+RUN npm install
+
+CMD ["npm", "start"]

starters/apps/base-wweb-mysql/app.js

@@ -5,6 +5,8 @@ const {
     addKeyword,
 } = require('@bot-whatsapp/bot')
 
+require('./server.http')
+
 const WebWhatsappProvider = require('@bot-whatsapp/provider/web-whatsapp')
 const MySQLAdapter = require('@bot-whatsapp/database/mysql')
 

starters/apps/base-wweb-mysql/public/index.html

@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="es">
+    <head>
+        <meta charset="UTF-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <link rel="preconnect" href="https://rsms.me/" />
+        <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
+        <title>🤖 Crear chatbot WhatsApp en minutos</title>
+        <style>
+            html,
+            body {
+                display: flex;
+                margin: 0;
+                padding: 0;
+                width: 100%;
+                height: 100%;
+                justify-content: center;
+                align-self: center;
+                align-items: center;
+                font-family: 'Inter', sans-serif;
+            }
+        </style>
+    </head>
+    <body>
+        <div
+            style="
+                display: flex;
+                gap: 2rem;
+                justify-content: center;
+                align-items: center;
+            "
+        >
+            <img
+                style="
+                    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
+                        rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
+                    border-radius: 15px;
+                    object-fit: contain;
+                "
+                width="400"
+                height="400"
+                src="qr.png"
+                alt="Escanear QR"
+            />
+            <div style="width: 400px; display: grid; gap: 1rem">
+                <h1 style="margin: 0">Whatsapp QR</h1>
+                <p>
+                    <strong
+                        >F5 para actualizar, el codigo se actualiza cada minuto. </strong
+                    ><br />
+                    Con esta libreria, puedes configurar respuestas
+                    automatizadas para preguntas frecuentes , recibir y
+                    responder mensajes de manera automatizada, y hacer un
+                    seguimiento de las interacciones con los clientes. Además,
+                    nuestro Chatbot se integra fácilmente con otros sistemas y
+                    herramientas que ya esté utilizando en su negocio.
+                </p>
+                <div>
+                    <a
+                        target="_blank"
+                        style="
+                            background: white;
+                            box-shadow: rgb(0 0 0 / 16%) 0px 10px 36px 0px,
+                                rgb(0 0 0 / 6%) 0px 0px 0px 1px;
+                            padding: 10px;
+                            border-radius: 5px;
+                            font-weight: 600;
+                            text-decoration: none;
+                            color: #1a1a1a;
+                            border: solid 1px #afafaf;
+                        "
+                        href="https://bot-whatsapp.netlify.app/"
+                        >Ver documentación</a
+                    >
+                </div>
+            </div>
+        </div>
+    </body>
+</html>

starters/apps/base-wweb-mysql/server.http.js

@@ -0,0 +1,34 @@
+const http = require('http')
+const fs = require('fs')
+const path = require('path')
+
+const PORT = process.env.PORT || 3000
+
+/**
+ * Levantar un HTTP Server
+ */
+http.createServer(function (req, res) {
+    var cssPath = undefined
+    var fileStream = undefined
+    var imagePath = undefined
+
+    if (req.url === '/') {
+        fs.readFile('./public/index.html', 'UTF-8', function (err, html) {
+            res.writeHead(200, { 'Content-Type': 'text/html' })
+            res.end(html)
+        })
+    } else if (req.url.match('.css$')) {
+        cssPath = path.join(__dirname, 'public', req.url)
+        fileStream = fs.createReadStream(cssPath, 'UTF-8')
+        res.writeHead(200, { 'Content-Type': 'text/css' })
+        fileStream.pipe(res)
+    } else if (req.url.match('.png$')) {
+        imagePath = path.join(__dirname, req.url)
+        fileStream = fs.createReadStream(imagePath)
+        res.writeHead(200, { 'Content-Type': 'image/png' })
+        fileStream.pipe(res)
+    } else {
+        res.writeHead(404, { 'Content-Type': 'text/html' })
+        res.end('No Page Found')
+    }
+}).listen(PORT, () => console.log(`Escanear QR Code http://localhost:${PORT}`))