Creando un formulario de contacto con React y Discord.
Hoy en día Discord es una herramienta que nos permite ser parte de un sin fin de comunidades y nos provee herramientas a las cuales les podemos sacar todo el provecho.
Los WebHook de Discord, estos nos permiten enviar información a nuestros canales de Discord desde un desarrollo externo. En este ejemplo, vamos a crear un formulario de contacto para nuestra página web, el formulario lo haremos con ReactJS el será el que se encargue de enviar los datos de contacto un canal de nuestro servidor de Discord.
1.- CONFIGURANDO DISCORD “SERVIDOR Y CANAL”.
Obviare que ya contamos con una cuenta en Discord, con base en ello procedemos a crear nuestro servidor y nuestro canal en donde recibiremos los mensajes enviados desde nuestro formulario de contacto.
NOMBRANDO SERVIDOR DISCORD “ACME”
CREANDO CANAL PRIVADO DE TEXTO, “CONTACT”
2.- WEBHOOK
Es hora de crear nuestro Webhook, que será el encargado de recibir y enviar la información a nuestro canal “contact” de nuestros futuros clientes.
Dentro de nuestro canal contact en Discord damos clic en la opción editar.
nos abrirá una pantalla con la información de nuestro canal.
Hasta ahí todo bien, es hora de crear nuestro webhook, para ello nos vamos a la opción de integraciones .
Damos clic en crear webhook, le asignaremos un nombre, podemos ponerle un avatar es opcional, ahora guardamos los cambios, más a delante regresaremos por la URL de nuestro webhook.
3.- CREANDO NUESTRA APP REACT
Creamos un proyecto nuevo de React con el nombre de nuestra pagina web.
“npx create-react-app acme”
una vez que termine el proceso de creación, ejecutaremos el siguiente comando.
`cd acme`
listo, ahora arranquemos nuestro proyecto con el siguiente comando.
`yarn start o npm start`
Hasta este punto tenemos el proyecto de nuestra pagina web funcionando.
4.- CREANDO NUESTRO FORMULARIO DE CONTACTO.
Limpiamos nuestro proyecto de las cosas que no necesitaremos, nuestro proyecto nos debe quedar con la siguiente estructura y el navegador se debe mostrar como la siguiente imagen.
Ahora dentro de la carpeta src de nuestro proyecto creamos una nueva carpeta llamada “pages”
Dentro de esa carpeta crearemos un archivo llamado Contact.js, aquí es donde vamos a crear nuestro formulario de contacto.
Ahora importaremos nuestra pagina a nuestro archivo app.js para comenzar a ver los resultados de nuestro formulario.
Veremos ya nuestro proyecto de esta forma.
Genial!; Es hora de escribir el código para nuestro formulario.
Nota: El proyecto usara Tailwind y styled-components y lo primero es instalarlos.
Instalaremos tailwind y styles-componente, esto para el manejo de nuestros estilos, si aun no conoces como instalar tailwind, dejo la referencia de como instalarlo. [instalar taildwind](https://tailwindcss.com/docs/guides/create-react-app)
Ahora nuestro archivo contact.js debe quedar de la siguiente manera, aquí agregamos la estructura HTML y los campos de Descripción, teléfono y nombre de contacto.
De igual forma agregaremos los estados necesarios para el funcionamiento de nuestro formulario, datos para validación y para el manejo de estilos.
y nuestro formulario deberá tener el siguiente aspecto.
Listo!, ya con eso estamos preparados para mandar nuestra información del formulario hacia Discord, ahora agregaremos nuestro End-Point a donde comenzaremos a mandar los datos capturados de nuestro futuro cliente, para ello en nuestra función de send agregamos el siguiente código.
Este código es el que nos permitirá comunicarnos con nuestro canal de Discord además de hacer las validaciones necesarias. Hasta ahí todo bien, sin embargo, nos hace falta lo esencial para la comunicación con nuestro Webhook y es nuestra url de nuestro webhook, si recordamos en un punto anterior mencionamos que regresaríamos por la url, pues en efecto es esa url la que necesitamos, vayamos por ella.
Dentro de nuestro cliente discord, damos clic en copiar la url de nuestro webhook como nos muestra la siguiente imagen.
veremos una url como la siguiente:
Esta ruta es la que debemos pegar en nuestro código, quedando algo como esto.
bueno, ahora probemos nuestro formulario.
Lo primero que probaremos es que cuando queremos mandar un formulario vacío, probemos dando clic en nuestro botón, este nos mostrara un error y lo mostrara como etiqueta propia del botón.
Genial!, ahora llenemos el formulario y veamos si nuestro Discord recibe nuestra información.
Excelente!, Discord esta recibiendo nuestra información, cabe aclarar que Discord cuenta con la documentación necesaria para el manejo de su API, en este enlace puedes ver la documentación de su API.
https://discord.com/developers/docs/resources/webhook
Ahora nuestro formulario le dará las gracias a tu cliente, pasos siguientes es ponerte en contacto con el y concretar alguna cita de negocios.
Conclusión.
Hoy en día tenemos mucho más herramientas para poder convertir nuestra página web en un mejor gestor de información, Discord nos ayuda mucho, solo es poner un poco de creatividad y listo.
Gracias por la lectura y espero te sirva y lo pongas en practica.
