From 98793d0cfc1674830beaa3707f933c5a791eec14 Mon Sep 17 00:00:00 2001 From: Leifer Mendez Date: Mon, 16 Jan 2023 17:32:09 +0100 Subject: [PATCH 1/7] fix(bot): :memo: more docs --- .../src/components/widgets/Collaborator.tsx | 6 +- packages/docs/src/components/widgets/Hero.tsx | 2 +- .../docs/src/components/widgets/Members.tsx | 54 +++++++++ packages/docs/src/root.tsx | 12 +- .../src/routes/docs/deploy/cloud/index.mdx | 108 ++++++++++++++++++ .../src/routes/docs/deploy/docker/index.mdx | 32 ++++++ .../src/routes/docs/deploy/local/index.mdx | 26 +++++ .../docs/src/routes/docs/masterclass/index.md | 24 ---- .../src/routes/docs/masterclass/index.mdx | 26 +++++ packages/docs/src/routes/index.tsx | 21 +++- packages/docs/src/services/github.ts | 7 +- packages/docs/src/services/opencollective.ts | 19 +++ 12 files changed, 301 insertions(+), 36 deletions(-) create mode 100644 packages/docs/src/components/widgets/Members.tsx create mode 100644 packages/docs/src/routes/docs/deploy/cloud/index.mdx create mode 100644 packages/docs/src/routes/docs/deploy/docker/index.mdx create mode 100644 packages/docs/src/routes/docs/deploy/local/index.mdx delete mode 100644 packages/docs/src/routes/docs/masterclass/index.md create mode 100644 packages/docs/src/routes/docs/masterclass/index.mdx create mode 100644 packages/docs/src/services/opencollective.ts diff --git a/packages/docs/src/components/widgets/Collaborator.tsx b/packages/docs/src/components/widgets/Collaborator.tsx index 4337d2b..bc72b08 100644 --- a/packages/docs/src/components/widgets/Collaborator.tsx +++ b/packages/docs/src/components/widgets/Collaborator.tsx @@ -14,7 +14,7 @@ export default component$( {props.user.login}
-
{props.user.login}
+
+ {props.user.login} +
diff --git a/packages/docs/src/components/widgets/Hero.tsx b/packages/docs/src/components/widgets/Hero.tsx index 0e7cc5e..b3761f8 100644 --- a/packages/docs/src/components/widgets/Hero.tsx +++ b/packages/docs/src/components/widgets/Hero.tsx @@ -56,7 +56,7 @@ export default component$(() => { Ver video diff --git a/packages/docs/src/components/widgets/Members.tsx b/packages/docs/src/components/widgets/Members.tsx new file mode 100644 index 0000000..36ec435 --- /dev/null +++ b/packages/docs/src/components/widgets/Members.tsx @@ -0,0 +1,54 @@ +import { component$ } from '@builder.io/qwik' +import { RequestHandlerCloudflarePages } from '@builder.io/qwik-city/middleware/cloudflare-pages' +import { User } from '~/contexts' +import Collaborator from './Collaborator' + +export const onRequest: RequestHandlerCloudflarePages = async () => { + console.log('??heree') +} + +export const TaleUsers = component$((props: { users: User[] }) => { + return ( + <> + {props.users.map((user) => ( +
+ {' '} + +
+ ))} + + ) +}) + +export default component$((props: { users: User[] }) => { + return ( +
+
+
+

+ Premium +

+

+ Miembros +

+

+ Conviértete en un miembro destacado y forma parte del + proyecto y disfruta de manera adelantada de las + actualizaciones{' '} + + Únete + +

+
+ +
+ +
+
+
+ ) +}) diff --git a/packages/docs/src/root.tsx b/packages/docs/src/root.tsx index 7d6db36..2cddda0 100644 --- a/packages/docs/src/root.tsx +++ b/packages/docs/src/root.tsx @@ -52,16 +52,22 @@ export default component$(() => { title: 'Avanzado', list: [ { name: 'Migración', link: '/docs/migration' }, - { name: 'Extender funcionalidades', link: '/docs/custom' }, + { name: 'MasterClass', link: '/docs/masterclass' }, + ], + }, + { + title: 'Despliegue', + list: [ + { name: 'Local', link: '/docs/deploy/local' }, + { name: 'Docker', link: '/docs/deploy/docker' }, + { name: 'Cloud', link: '/docs/deploy/cloud' }, ], }, { title: 'Comunidad', list: [ - { name: 'MasterClass', link: '/docs/masterclass' }, { name: 'Colabores', link: '/docs/contributing' }, { name: 'Unirme al proyecto', link: '/docs/join' }, - { name: 'Sponsors', link: '/docs/sponsors' }, ], }, ]) diff --git a/packages/docs/src/routes/docs/deploy/cloud/index.mdx b/packages/docs/src/routes/docs/deploy/cloud/index.mdx new file mode 100644 index 0000000..2e38ff3 --- /dev/null +++ b/packages/docs/src/routes/docs/deploy/cloud/index.mdx @@ -0,0 +1,108 @@ +import Alert from '../../../../components/widgets/Alert' +import Navigation from '../../../../components/widgets/Navigation' + +# Entorno Cloud + +Si deseas tener tu chatbot en ejecución en un servidor en la nueba esta, guía te ayudará. +El servidor deberá cumplir con los requisitos mínimos, puedes ver en [este enlace.](/docs/requirements) + +--- + +Dependiendo de tu proveedor de **servicio Cloud** debes crear una instancia (máquina virtual), este ejemplo iremos orientando en un entorno de AWS. +En nuestro ejemplo creamos una maquina virtual con **Ubuntu 20.04** + +![](https://i.imgur.com/5zRCz9q.png) + +--- + +Posterior al proceso de crear la máquina esperamos unos minutos hasta que ya está operativo y tomamos nota del usuario y la IP pública para proceder a conectarnos vía SSH + +## ![](https://i.imgur.com/ljyJPBm.png) + +## Conectarse via SSH + +Luego de obtener los datos necesarios para conectarnos a nuestra máquina, procedemos a hacerlo + +```shell +ssh -i llaveBot.pem ubutnu@34.228.208.104 +``` + +--- + +Luego puede aparecer un mensaje como el siguiente donde solo debes de responder **yes** + +![](https://i.imgur.com/rUBASqR.png) + +--- + +Una vez conectado ya estás dentro de la máquina virtual, te aconsejamos la primera vez hacer una actualización de dependencias de Ubuntu con los siguientes comandos + +```shell +sudo apt-get update +``` + +```shell +sudo apt-get upgrade +``` + +--- + +## Recuerda instalar Node 16 o superior + +Puedes ver más a detalle los pasos de la instalacion en este [blog](https://www.digitalocean.com/community/tutorials/how-to-install-node-js-on-ubuntu-20-04-es) + +```shell +curl -sL https://deb.nodesource.com/setup_18.x -o nodesource_setup.sh +``` + +```shell +sudo bash nodesource_setup.sh +``` + +```shell +sudo apt-get install -y nodejs +``` + +--- + +## Implementar el bot + +Si tienes el código de tu chatbot en un repositorio, solo falta que clones el repo en el servidor y ejecutes `npm start` + +Para escanear el **QR** puedes hacerlo vía WEB accediendo a la URL `http://[TU_IP_PUBLICA]:3000` en este ejemplo seria `http://34.228.208.10:3000` + +![](https://i.imgur.com/xcovczm.png) + +--- + +## Firewall + +Si no te abre la pagina web asegurate de tener el puerto abierto en tu firewall. +Ejemplo permitir el puerto **3000** + +![](https://i.imgur.com/0dAz0B1.png) + +--- + +## Escanear QR + +![](https://i.imgur.com/2m3NbXC.png) + +--- + +## Ejecutar en Producción + +Debes ubicarte en el directorio donde tienes el codigo fuente de tu chatbot. + +Independientemente de tu sistema operativo deberás ejecutar el chatbot con el comando atrevés de un sistema que mantenga el proceso en ejecución. +Recomendamos [Pm2](https://pm2.keymetrics.io/) + +```shell +pm2 start app.js --name=bot1 +``` + +![](https://i.imgur.com/ilPS75H.png) + +La consola de devolver un mensaje con una lista de procesos, en el ejemplo puedes observar, que tenemos un proceso llamado `bot1` + +De esta manera ya puedes cerrar la terminal y tu bot seguirá en ejecución sin problema diff --git a/packages/docs/src/routes/docs/deploy/docker/index.mdx b/packages/docs/src/routes/docs/deploy/docker/index.mdx new file mode 100644 index 0000000..9db9e2e --- /dev/null +++ b/packages/docs/src/routes/docs/deploy/docker/index.mdx @@ -0,0 +1,32 @@ +import Alert from '../../../../components/widgets/Alert' +import Navigation from '../../../../components/widgets/Navigation' + +# Entorno Docker + +Previamente, necesitas tener instalado Docker en tu servidor dependiendo del sistema operativo, los procesos cambian, +puedes encontrar toda la información oficial de docker en [este enlace.](https://docs.docker.com/get-docker/) + +--- + +Dependiendo del proveedor que has elegido necesitaras una implementación de Docker específica, pero no te preocupes, ya que viene implementada automáticamente en un archivo llamado **Dockerfile**, también puedes ver los otros Dockerfile en el apartado de [plantillas.](https://github.com/codigoencasa/bot-whatsapp/tree/main/starters/apps) + +![](https://i.imgur.com/cDspa0R.png) + +--- + +## Contruir imagen + +Solo es necesario construir la imagen del docker lo puedes hacer con el siguiente comando + +```shell +docker build . -t botwhatsapp:latest +``` + +## Iniciar contenedor + +Para iniciar el contenedor con la imagen previamente construida puedes realizarlo ejecutando el siguiente comando. +Se utiliza el puerto **3001** solo com un ejemplo puedes usar el puerto que tu quieras + +```shell +docker run -e PORT=3001 -p 3001:3001 botwhatsapp:latest +``` diff --git a/packages/docs/src/routes/docs/deploy/local/index.mdx b/packages/docs/src/routes/docs/deploy/local/index.mdx new file mode 100644 index 0000000..394af82 --- /dev/null +++ b/packages/docs/src/routes/docs/deploy/local/index.mdx @@ -0,0 +1,26 @@ +import Alert from '../../../../components/widgets/Alert' +import Navigation from '../../../../components/widgets/Navigation' + +# Entorno Local + +Si deseas tener tu chatbot en ejecución en un servidor local (computadora personal, etc.) esta, guía te ayudará. +El servidor local deberá cumplir con los requisitos mínimos, puedes ver en [este enlace.](/docs/requirements) + +--- + +Si deseas instalar pm2 puedes ejecutar `npm install pm2 --global` + +Debes ubicarte en el directorio donde tienes el codigo fuente de tu chatbot. + +Independientemente de tu sistema operativo deberás ejecutar el chatbot con el comando atrevés de un sistema que mantenga el proceso en ejecución. +Recomendamos [Pm2](https://pm2.keymetrics.io/) + +```shell +pm2 start app.js --name=bot1 +``` + +![](https://i.imgur.com/ilPS75H.png) + +La consola de devolver un mensaje con una lista de procesos, en el ejemplo puedes observar, que tenemos un proceso llamado `bot1` + +De esta manera ya puedes cerrar la terminal y tu bot seguirá en ejecución sin problema diff --git a/packages/docs/src/routes/docs/masterclass/index.md b/packages/docs/src/routes/docs/masterclass/index.md deleted file mode 100644 index 9f94b4e..0000000 --- a/packages/docs/src/routes/docs/masterclass/index.md +++ /dev/null @@ -1,24 +0,0 @@ -[![hackmd-github-sync-badge](https://hackmd.io/79xQyVSgRD6RsTpqtMPPdw/badge)](https://hackmd.io/79xQyVSgRD6RsTpqtMPPdw) -### Preguntas Frecuentes para Master Class BOT v2 -> Anota aqui las preguntas o dudas que tengas -> Pronto estare publicando fecha y hora para la masterclass - -1.- Si necesito correr dos bots al mismo tiempo ¿donde puedo cambiar el puerto? - -2.- Si necesito agregar o modificar funciones del bot, ¿como puedo hacerlo? - -3.- Si quiero mi bot con otra base de datos diferente a MySQL ¿como lo puedo hacer? - -4.- Quiero conectarme a tal o cual API con JSON/XML/etc, ¿se puede hacer? - -5.- ¿Como integrar listas? - -6.- Preguntas y respuestas con el Bot - -7.- Guardar conversaciones en Excel. - -8.- ¿Puedo usar 2 o mas sesiones (códigos QR) al mismo tiempo? - -9.- ¿Puede ser que al usar el provider bailey, al leer el qr.png, que sea desde una url en el navegador, y no desde visual studio? Gracias - -10.- ¿Cómo tomo los datos que me envían en un mensaje para utilizarlo internamente en la búsqueda de datos propios y devolver la respuesta? diff --git a/packages/docs/src/routes/docs/masterclass/index.mdx b/packages/docs/src/routes/docs/masterclass/index.mdx new file mode 100644 index 0000000..97612b4 --- /dev/null +++ b/packages/docs/src/routes/docs/masterclass/index.mdx @@ -0,0 +1,26 @@ +# MasterClass + + + +--- + +### Preguntas de la masterclass + +- Si necesito correr dos bots al mismo tiempo ¿donde puedo cambiar el puerto? +- Si necesito agregar o modificar funciones del bot, ¿como puedo hacerlo? +- Si quiero mi bot con otra base de datos diferente a MySQL ¿como lo puedo hacer? +- Quiero conectarme a tal o cual API con JSON/XML/etc, ¿se puede hacer? +- ¿Como integrar listas? +- Preguntas y respuestas con el Bot +- Guardar conversaciones en Excel. +- ¿Puedo usar 2 o mas sesiones (códigos QR) al mismo tiempo? +- ¿Puede ser que al usar el provider bailey, al leer el qr.png, que sea desde una url en el navegador, y no desde visual studio? Gracias +- ¿Cómo tomo los datos que me envían en un mensaje para utilizarlo internamente en la búsqueda de datos propios y devolver la respuesta? diff --git a/packages/docs/src/routes/index.tsx b/packages/docs/src/routes/index.tsx index aa594f8..8ad3b75 100644 --- a/packages/docs/src/routes/index.tsx +++ b/packages/docs/src/routes/index.tsx @@ -5,7 +5,9 @@ import Features from '~/components/widgets/Features' import FAQs from '~/components/widgets/FAQs' import CallToAction from '~/components/widgets/CallToAction' import Collaborators from '~/components/widgets/Collaborators' +import Members from '~/components/widgets/Members' import { fetchGithub } from '~/services/github' +import { fetchOpenCollective } from '~/services/opencollective' import { RequestHandlerNetlify } from '@builder.io/qwik-city/middleware/netlify-edge' import { GITHUB_TOKEN } from './docs/constant' @@ -13,8 +15,12 @@ export const onGet: RequestHandlerNetlify = async ({ platform }) => { const CHECK_GITHUB_TOKEN = (platform as any)?.['GITHUB_TOKEN'] ?? GITHUB_TOKEN console.log(`[🚩 platform]: `, GITHUB_TOKEN) - const data = await fetchGithub(CHECK_GITHUB_TOKEN) - return data + const dataGithub = await fetchGithub(CHECK_GITHUB_TOKEN) + const dataOpenCollective = await fetchOpenCollective() + return { + dataGithub, + dataOpenCollective, + } } export default component$(() => { @@ -27,9 +33,16 @@ export default component$(() => { } + onResolved={(data: any) => { + return ( + <> + + + + + ) + }} > - ) }) diff --git a/packages/docs/src/services/github.ts b/packages/docs/src/services/github.ts index 05d2b8f..e60d250 100644 --- a/packages/docs/src/services/github.ts +++ b/packages/docs/src/services/github.ts @@ -14,6 +14,9 @@ export const fetchGithub = async (token: string) => { }, } ) - const listUsers = data.json() - return listUsers + const listUsers = await data.json() + return listUsers.map((u: any) => ({ + ...u, + avatar_url: `${u.avatar_url}&s=80`, + })) } diff --git a/packages/docs/src/services/opencollective.ts b/packages/docs/src/services/opencollective.ts new file mode 100644 index 0000000..2eb60c8 --- /dev/null +++ b/packages/docs/src/services/opencollective.ts @@ -0,0 +1,19 @@ +/** + * GET API from OpenCollective + * @returns + */ +export const fetchOpenCollective = async () => { + const data = await fetch( + `https://opencollective.com/bot-whatsapp/members/users.json?limit=10&offset=0`, + { + method: 'GET', + } + ) + const listUsers = await data.json() + return listUsers.map((u: any) => ({ + html_url: u.profile, + avatar_url: u.image ?? 'https://i.imgur.com/HhiYKwN.png', + login: u.name, + id: u.MemberId, + })) +} From 126158000449fab7612d42c605000b6f7d236696 Mon Sep 17 00:00:00 2001 From: Leifer Mendez Date: Tue, 17 Jan 2023 09:05:29 +0100 Subject: [PATCH 2/7] chore: :rocket: launch DEV --- .github/workflows/releases-dev.yml | 1 - packages/cli/interactive/index.js | 6 +++--- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/.github/workflows/releases-dev.yml b/.github/workflows/releases-dev.yml index 4e5c169..e793e01 100644 --- a/.github/workflows/releases-dev.yml +++ b/.github/workflows/releases-dev.yml @@ -54,4 +54,3 @@ jobs: uses: stefanzweifel/git-auto-commit-action@v4 with: commit_message: 'ci(version): :zap: automatic - "${date}" updated versions every packages' - branch: dev diff --git a/packages/cli/interactive/index.js b/packages/cli/interactive/index.js index b3f063d..53cc885 100644 --- a/packages/cli/interactive/index.js +++ b/packages/cli/interactive/index.js @@ -48,11 +48,11 @@ const nextSteps = async () => { name: 'providerWs', message: '¿Cuál proveedor de whatsapp quieres utilizar?', choices: [ - { title: 'whatsapp-web.js (gratis)', value: 'wweb' }, - { title: 'Venom (gratis)', value: 'venom' }, { title: 'Baileys (gratis)', value: 'baileys' }, + { title: 'Venom (gratis)', value: 'venom' }, + { title: 'whatsapp-web.js (gratis)', value: 'wweb' }, { title: 'Twilio', value: 'twilio' }, - { title: 'API Oficial (Meta)', value: 'meta' }, + { title: 'Meta', value: 'meta' }, ], max: 1, hint: 'Espacio para seleccionar', From 7e25dcaa93b036e2230b88ce58ee7c76872cc8dd Mon Sep 17 00:00:00 2001 From: Leifer Mendez Date: Tue, 17 Jan 2023 09:11:08 +0100 Subject: [PATCH 3/7] chore: :rocket: launch DEV --- .github/workflows/releases-dev.yml | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/.github/workflows/releases-dev.yml b/.github/workflows/releases-dev.yml index e793e01..2c11144 100644 --- a/.github/workflows/releases-dev.yml +++ b/.github/workflows/releases-dev.yml @@ -13,6 +13,10 @@ jobs: steps: - name: Checkout uses: actions/checkout@v3 + with: + fetch-depth: 0 + ref: ${{github.event.after}} + persist-credentials: false - name: Setup Node uses: actions/setup-node@v3 @@ -50,7 +54,13 @@ jobs: - name: Release @bot-whatsapp/portal run: yarn node ./scripts/release.js --name=portal --version= --token="${{ secrets.NPM_TOKEN }}" - - name: Commit Versioning & Push changes - uses: stefanzweifel/git-auto-commit-action@v4 + - name: Set output + id: vars + run: echo "commit=$(git log --format=%B -n 1 ${{github.event.after}})" >> $GITHUB_OUTPUT + + - name: Commit & Push changes + uses: actions-js/push@master with: - commit_message: 'ci(version): :zap: automatic - "${date}" updated versions every packages' + branch: release/next + github_token: ${{ secrets.GITHUB_TOKEN }} + force: true From cb047cca8e9f356bdd8dbe5f226d99c3d9ac4fc4 Mon Sep 17 00:00:00 2001 From: Leifer Mendez Date: Tue, 17 Jan 2023 09:17:32 +0100 Subject: [PATCH 4/7] chore: :rocket: launch DEV --- .github/workflows/releases-dev.yml | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.github/workflows/releases-dev.yml b/.github/workflows/releases-dev.yml index 2c11144..8a01895 100644 --- a/.github/workflows/releases-dev.yml +++ b/.github/workflows/releases-dev.yml @@ -10,6 +10,8 @@ jobs: release: name: Release runs-on: ubuntu-latest + outputs: + commit: ${{ steps.vars.outputs.commit }} steps: - name: Checkout uses: actions/checkout@v3 From 5edd755491ae0cc3611181a7b0bc653725507cca Mon Sep 17 00:00:00 2001 From: Leifer Mendez Date: Tue, 17 Jan 2023 09:23:22 +0100 Subject: [PATCH 5/7] chore: :rocket: launch DEV --- .github/workflows/releases-dev.yml | 4 ---- 1 file changed, 4 deletions(-) diff --git a/.github/workflows/releases-dev.yml b/.github/workflows/releases-dev.yml index 8a01895..be2e1d6 100644 --- a/.github/workflows/releases-dev.yml +++ b/.github/workflows/releases-dev.yml @@ -56,10 +56,6 @@ jobs: - name: Release @bot-whatsapp/portal run: yarn node ./scripts/release.js --name=portal --version= --token="${{ secrets.NPM_TOKEN }}" - - name: Set output - id: vars - run: echo "commit=$(git log --format=%B -n 1 ${{github.event.after}})" >> $GITHUB_OUTPUT - - name: Commit & Push changes uses: actions-js/push@master with: From 4ade5f02a7eca55532fa735425670ea6d9fdd037 Mon Sep 17 00:00:00 2001 From: Leifer Mendez Date: Tue, 17 Jan 2023 10:00:21 +0100 Subject: [PATCH 6/7] chore: :rocket: launch DEV --- .github/workflows/releases.yml | 13 ++++--------- 1 file changed, 4 insertions(+), 9 deletions(-) diff --git a/.github/workflows/releases.yml b/.github/workflows/releases.yml index d587c64..acbc5c4 100644 --- a/.github/workflows/releases.yml +++ b/.github/workflows/releases.yml @@ -67,13 +67,8 @@ jobs: - name: Release Github run: yarn node ./scripts/github.js --version="${{ steps.package-version.outputs.current-version}}" --token="${{ secrets.OCTO_TOKEN }}" - - name: 'Run if changes have been detected' - run: | - git add . - git commit -m "chore(version): pre release" - - - name: Commit Versioning & Push changes - if: github.event_name == 'push' - uses: stefanzweifel/git-auto-commit-action@v4 + - name: Commit & Push changes + uses: actions-js/push@master with: - commit_message: 'chore(version): launch release 🚀 "${{ steps.package-version.outputs.current-version}}"' + github_token: ${{ secrets.GITHUB_TOKEN }} + force: true From fcd1a636765920445e8d871764647e772d75322e Mon Sep 17 00:00:00 2001 From: Leifer Mendez Date: Tue, 17 Jan 2023 10:02:14 +0100 Subject: [PATCH 7/7] chore: :rocket: launch DEV --- .github/workflows/releases.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/.github/workflows/releases.yml b/.github/workflows/releases.yml index acbc5c4..a9b490f 100644 --- a/.github/workflows/releases.yml +++ b/.github/workflows/releases.yml @@ -70,5 +70,6 @@ jobs: - name: Commit & Push changes uses: actions-js/push@master with: + branch: release/production github_token: ${{ secrets.GITHUB_TOKEN }} force: true