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, + })) +}