El equipo de Couchbase DevRel ha estado trabajando con el Club del mal sitio web en freeCodeCamp materiales.
freeCodeCamp es una organización sin ánimo de lucro que consta de una plataforma web de aprendizaje interactivo, un foro comunitario en línea, salas de chat, publicaciones en línea y organizaciones locales que pretenden hacer accesible a cualquiera el aprendizaje del desarrollo de software.
El Bad Website Club es una comunidad en línea que ayuda a los principiantes en su viaje por la programación.
Hemos estado transmitiendo para mostrar a los alumnos de fCC lo que podría ocurrir con su proyecto en condiciones más "reales". Empezamos con el curso Responsive Web Design, tomamos algunos ejemplos como el formulario de encuesta, los completamos y los llevamos a producción. Toda la serie se retransmite en YouTube, LinkedIn, Twitter y Twitch, y las grabaciones están disponibles en esta lista de reproducción de YouTube si quieres echar un vistazo: Nuevo Couchbase Streams: A partir del 31 de julio
Yo personalmente estaba transmitiendo en el Proyecto de encuesta. En esta serie de entradas de blog, te mostraré todos los pasos adicionales que puedes hacer publicando el código en GitHub, desplegando la Encuesta online con Netlify, y almacenando su contenido en Couchbase Capella.
Paso 1 - Crear un formulario HTML
Inspirándome mucho en el ejemplo de encuesta de FreeCodeCamp (copiar, pegar y recortar), obtengo el siguiente formulario HTML. Es un poco más simple que el original.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
<!DOCTYPE html> <html> <cabeza> <enlace rel="hoja de estilo" href="./styles.css" /> </cabeza> <cuerpo> <div clase="contenedor"> <cabecera clase="cabecera"> <h1 id="título clase="texto-centro">Encuesta Formulario</h1> <p id="descripción" clase="descripción texto-centro"> Gracias usted para tomando el tiempo a ayuda us mejorar el plataforma </p> </cabecera> <formulario id="formulario-encuesta"> <div clase="forma-grupo"> <etiqueta id="nombre-etiqueta" para="nombre">Nombre</etiqueta> <entrada tipo="texto" nombre="nombre" id="nombre" clase="control-forma" marcador de posición="Introduzca su nombre" obligatorio /> </div> <div clase="forma-grupo"> <etiqueta id="etiqueta-número" para="número" >Edad<span clase="pista">(opcional)</span></etiqueta > <entrada tipo="número" nombre="edad" id="número" min="10" max="99" clase="control-forma" marcador de posición="Edad" /> </div> <div clase="forma-grupo"> <p> ¿Podría usted recomiende este impresionante encuesta a a Amigo ? </p> <etiqueta ><entrada nombre="recomendar" valor="recomendar" tipo="casilla de verificación" clase="input-checkbox" />sí</etiqueta > </div> <div clase="forma-grupo"> <botón tipo="enviar" id="enviar" clase="submit-button"> Enviar </botón> </div> </formulario> </div> </cuerpo> </html> |
En estilos.css es exactamente igual que el original. Abrir aquí para ver el formulario de la encuesta en acción. Puede abrir en su navegador, haga clic con el botón derecho en la página y debería ver algo como ver la fuente de la página o inspeccionar. Haga clic en él y se abrirá un panel que muestra el código de la página. Mientras esté en esta vista puede hacer clic en enlaces como style.css o haga clic en el botón estilos para ver también el CSS aplicado a determinados elementos.
Para probar este ejemplo de código, primero puede clonar este repositorio en su ordenador local utilizando el terminal o puede descargarlo como archivo zip).
Vaya a su navegador y en la barra superior seleccione archivo, abraa continuación, seleccione index.html de la carpeta (o carpeta zip) que se descargó. Echa un vistazo a la URL de tu navegador, muestra una ruta a un archivo local. Y usted debe ver algo como esto, que no hace nada cuando se hace clic en enviar.
La pregunta entonces es, ¿cómo lo desplegamos en Internet, cómo hacemos que haga algo? Necesitamos algún código backend que se ejecute después del clic. Y luego hacer que ese código almacene el contenido del formulario en la base de datos.
Paso 2 - Git, Github, Netlify
Empecemos por desplegar este formulario en directo en Internet. Para ello vamos a utilizar Netlify. Lo primero es asegurarnos de que tenemos el archivo Netlify CLI disponible, y que hemos iniciado sesión. Si no está instalado, la ruta más rápida es escribir en su terminal:
|
1 |
npm instale netlify-cli -g |
Encontrará más información en Documentación de inicio de Netlify.
Mecanografía versión de netlify en mi terminal actualmente me da netlify-cli/15.6.0 win32-x64 node-v18.5.0. Así que sé que está instalado y listo.
Lo siguiente que hay que hacer es escribir netlify login en tu terminal. Te llevará a través del formulario de registro de Netflify.
Ahora todo debería estar listo para pasar a la fase de despliegue. Pero sólo para asegurarse de que vamos a probar las cosas a nivel local. Porque eso es lo que hacen la mayoría de los desarrolladores. Para ello, escriba netlify dev en tu terminal.
Debería mostrar lo siguiente en tu terminal y abrir tu formulario en tu navegador.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
◈ Netlify Dev ◈ ◈ Ignorado general contexto env var: LANG (definido en proceso) ◈ No aplicación servidor detectado. Utilizando simple estático servidor ◈ Imposible a determine público carpeta a servir archivos de. Utilizando actual trabajando directorio ◈ Configurar a netlify.toml archivo con a [dev] sección a especifique su dev servidor ajustes. ◈ Véase docs en: https://cli.netlify.com/netlify-dev#project-detection ◈ Ejecutar estático servidor de "freecodecamp-encuesta" ◈ Configuración arriba local desarrollo servidor ◈ Estática servidor escuchando a 3999 Añadir local .netlify carpeta a .gitignore archivo... ┌─────────────────────────────────────────────────┐ │ │ │ ◈ Servidor ahora listo en http://localhost:8888 │ │ │ └─────────────────────────────────────────────────┘ |
Si vuelves a mirar la barra de URL del navegador, verás que es diferente. Parece una dirección web, no un archivo local. Enhorabuena, acabas de ejecutar tu primer servidor local, sirviendo tu archivo HTML y CSS, usando Netlify dev¡! Usted tiene un sitio web que se ejecuta en su máquina. Ahora vamos a hacer esto accesible a todos en Internet, tanto el código fuente y el sitio en sí.
Ve a GitHub (o GitLab, o Heptapod, o cualquier otra solución de alojamiento de código fuente, ¡hay otras por ahí!) y crea un nuevo Repositorio. Visita https://github.com/new para Github. Ahora estás en el asistente de creación de repositorios. Sólo he configurado mi organización, mi nombre repo y una descripción que haga clic en el Crear repositorio botón.
Te dará todas las instrucciones necesarias para convertir tu carpeta de trabajo en un git y enlázalo a tu proyecto GitHub. Esto es lo que escribí en mi terminal (puedes copiar y pegar lo siguiente en tu terminal o presionar enter después de cada línea para que se ejecute. Ten en cuenta que tendrás que cambiar la línea 6 para que sea la URL del repositorio de tu proyecto):
|
1 2 3 4 5 6 7 |
echo "# miproyecto" >> LÉAME.md git init git añada LÉAME.md git escriba a -m "primer compromiso" git rama -M principal git remoto añada origen https://github.com/ldoguin/myproject.git git pulse -u origen principal |
Esta es la salida del terminal resultante:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
[C:\Código\Couchbase\miproyecto] $ echo "# miproyecto" >> LÉAME.md [C:\Código\Couchbase\miproyecto] $ ls Directorio: C:\Código\Couchbase\miproyecto Modo LastWriteTime Longitud Nombre ---- ------------- ------ ---- -a---- 8/4/2023 12:11 PM 28 LÉAME.md [C:\Código\Couchbase\miproyecto] $ git init pista: Utilizando maestro como el nombre para el inicial rama. Este por defecto rama nombre pista: es tema a cambiar. A configure el inicial rama nombre a utilice en todos pista: de su nuevo repositorios, que se suprimir este advertencia, llame a: pista: pista: git config --global init.defaultBranch <nombre> pista: pista: Nombres comúnmente elegido en su lugar de maestro son principal, tronco y pista: desarrollo. En sólo-creado rama puede sea rebautizado vía este comando: pista: pista: git rama -m <nombre> Inicializado vacío Git repositorio en C:/Usuarios/Laurent Doguin/Documentos/Couchbase/miproyecto/.git/ [C:\Código\Couchbase\miproyecto] $ git config --global init.defaultBranch principal [C:\Código\Couchbase\miproyecto] $ git rama -m principal [C:\Código\Couchbase\miproyecto] $ git añada .\LÉAME.md .\índice.html .\estilos.css [C:\Código\Couchbase\miproyecto] $ git escriba a -m "primer compromiso" [principal (raíz-escriba a) 356ece7] primero escriba a 3 archivos cambiado, 245 inserciones(+) crear modo 100644 LÉAME.md crear modo 100644 índice.html crear modo 100644 estilos.css [C:\Código\Couchbase\miproyecto] $ git remoto añada origen https://github.com/ldoguin/myproject.git [C:\Código\Couchbase\miproyecto] $ git pulse -u origen principal Enumeración objetos: 5, hecho. Contando objetos: 100% (5/5), hecho. Delta compresión utilizando arriba a 8 hilos Comprimir objetos: 100% (4/4), hecho. Escribir objetos: 100% (5/5), 1.95 KiB | 999.00 KiB/s, hecho. Total 5 (delta 0), reutilizado 0 (delta 0), envase-reutilizado 0 A https://github.com/ldoguin/myproject.git * [nuevo rama] principal -> principal rama principal configure arriba a pista origen/principal. [C:\Código\Couchbase\miproyecto] $ |
Ahora si vuelvo a la página de Github y la recargo, esto es lo que veo:
Enhorabuena, tu código ya está disponible en Github, para que todo el mundo lo vea, aprenda de él y contribuya. ¡Ahora es el momento de la producción! Vamos a hacer que el sitio web en vivo 💪
Visite https://app.netlify.com/start/deploy. Esto le llevará al nuevo asistente de proyecto de Netify. Verá varios botones para ayudarle a empezar, GitHub, GitLab, Bitbucket, AzureDevops. Vamos a hacer clic en GitHub.
Verás un par de ventanas pidiéndote que vincules tu perfil de GitHub a Netlify. Sigue adelante y procede, te llevará a la siguiente página.
Netlify me dice que no tengo ninguna aplicación Netlify instalada en ningún org de GitHub. Haga clic en Configurar Netlify en GitHubse abrirá una ventana pidiéndote que selecciones el org de GitHub en el que quieres instalar Netlify, y a qué repositorio quieres darle acceso.
Dejo el valor por defecto y proceder al siguiente paso. A partir de ahora deberías ver todos los repositorios en tu cuenta de GitHub.
Voy a dejar el valor por defecto y haga clic en Despliegue miproyecto:
Usted verá un enlace a su recién desplegado en el sitio web de Internet, para mí es https://jolly-sfogliatella-3e6c07.netlify.app/. Netlify proporciona un entorno de sandboxes bajo la plataforma netlify.app para que puedas desplegar cosas sin tener tu propio nombre de dominio.
Enhorabuena, tu web ya está en Internet. Tómate un minuto para celebrarlo 🎉.
Ahora podemos vincular este proyecto Netlify introduciendo enlace netlify en el terminal. Se ofrecerá una lista de opciones. Seleccione la predeterminada, que debería ser Utilizar el origen remoto git actual (https://github.com/yourOrg/yourProject). Debido a que ha desplegado a través de GitHub, Netlify tiene la información git de su repositorio y puede inferir qué proyecto utilizar (y también en ese punto es probable que sólo tenga un proyecto). Esto es lo que la salida se ve para mí:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
[C:\Código\Couchbase\miproyecto] $ netlify enlace netlify enlace se conecte este carpeta a a sitio en Netlify ? Cómo do usted desea a enlace este carpeta a a sitio? Utilice actual git remoto origen (https://github.com/ldoguin/myproject) En para sitios conectado a https://github.com/ldoguin/myproject... Directorio Enlace Admin url: https://app.netlify.com/sites/jolly-sfogliatella-3e6c07 Página web url: https://jolly-sfogliatella-3e6c07.netlify.app Usted puede ahora ejecute otros `netlify` cli comandos en este directorio [C:\Código\Couchbase\miproyecto] $ |
Ahora podemos probar un par de cosas. Voy a añadir un emoji 🐼 a mi formulario porque por qué no. En index.htmlEstoy modificando la línea 9 de esto: <h1 id="”title”" class="”text-center”">Formulario de encuesta</h1> a este <h1 id="”title”" class="”text-center”">Formulario de encuesta 🐼</h1>
A continuación, guardo el archivo y envío los cambios a Github. Luego, en el terminal, escribo netlify open:site:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
[C:\Código\Couchbase\miproyecto] $ git añada .\índice.html [C:\Código\Couchbase\miproyecto] $ git escriba a -m"Panda" [principal caa6f87] Panda 1 archivo cambiado, 1 inserción(+), 1 supresión(-) [C:\Código\Couchbase\miproyecto] $ git pulse Enumeración objetos: 5, hecho. Contando objetos: 100% (5/5), hecho. Delta compresión utilizando arriba a 8 hilos Comprimir objetos: 100% (3/3), hecho. Escribir objetos: 100% (3/3), 360 bytes | 180.00 KiB/s, hecho. Total 3 (delta 1), reutilizado 0 (delta 0), envase-reutilizado 0 remoto: Resolver deltas: 100% (1/1), completado con 1 local objeto. A https://github.com/ldoguin/myproject.git 356ece7..8a2ebe2 principal -> principal [C:\Código\Couchbase\miproyecto] $ netlify abra:sitio Apertura "jolly-sfogliatella-3e6c07" sitio url: > https://jolly-sfogliatella-3e6c07.netlify.app |
Algo muy guay está pasando. Debido a que su repositorio de GitHub está vinculado a Netlify, un nuevo despliegue se hará automáticamente por Netlify. Así que al abrir el sitio web, verá el Panda <3.
En ese punto tenemos un repositorio de Github que contiene nuestro código, que está integrado a Netlify, que creará automáticamente un nuevo despliegue cuando empuje nuevo código. Y también tenemos un configurado netlify CLI en nuestra carpeta de trabajo. ¡Estamos listos para escribir código backend!
Paso 3 - Backend
En este capítulo responderemos a la siguiente pregunta: ¿Qué ocurre cuando alguien rellena el formulario y hace clic en enviar ?
La respuesta ahora mismo es: Nada. Cambiemos eso. Escribiendo algo de JavaScript. Vamos a mostrar una alerta emergente cuando alguien introduzca información válida y haga clic en Enviar. En su index.html pondrá lo siguiente <script> entre la última etiqueta div de cierre </div> y antes de la etiqueta de cierre del cuerpo </body>.
|
1 2 3 4 5 6 7 8 9 10 |
<script> const formulario = documento.getElementById(formulario-encuesta); <1> formulario.addEventListener("enviar, handleForm); <2> async función handleForm(e) { e.preventDefault() <3> alerta("¡Envío de formulario!") <4> } </script> |
|
1 2 3 4 |
<1> Visite el Dom elemento representando a el formulario por utilizando su id <2> Cada tiempo el enviar evento se produce, ejecute el handleForm función <3> En natural comportamiento de a formulario presentación es a recargar el página, nosotros don't necesita que, de ahí nosotros prevenir el por defecto comportamiento a suceder <4> En alerta función mostrar a ventana emergente con a mensaje |
Si guarda su código y vuelve a cargar la página, rellene el formulario, haga clic en enviardeberías ver algo como esto:
Ahora que tenemos algo que sucede cuando un usuario envía el formulario, vamos a ir un poco más allá. Queremos ver el contenido del formulario y asegurarnos de que podemos obtener los datos correctos en JSON. Queremos una cadena para el nombre, un entero para la edad y un booleano para la recomendación.
Y resulta que la casilla de verificación HTML no juega limpio. El valor que da por defecto es ningún valor, y una vez marcado da el contenido del campo valor. Vamos a añadir otro campo de entrada, oculto, para asegurarnos de que el valor por defecto será False.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<etiqueta> <entrada id="hiddenRecommend" nombre="recomendar" valor="falso" tipo="oculto" /> <entrada id="recomendar" nombre="recomendar" valor="true" tipo="casilla de verificación" clase="input-checkbox" />sí</etiqueta> |
En cuanto al código JavaScript, hay algunas líneas nuevas interesantes.
|
1 2 3 4 5 6 7 8 9 10 11 |
const formulario = documento.getElementById(formulario-encuesta); formulario.addEventListener("enviar, handleForm); async función handleForm(e) { <1> e.preventDefault() const datos = nuevo FormData(e.objetivo); <1> const valor = Objeto.deEntradas(datos.entradas()); <2> const detalles = `nombre: ${valor.nombre}\nage: ${valor.edad}\nrecomendamos: ${valor.recomiende}`; <3> consola.registro(detalles); <4> } |
|
1 2 3 4 |
<1> En parámetro de el handleForm función es un objeto(e) con a campo llamado objetivo. Este objetivo puede sea transformar en a FormData objeto. <2> En FormData objeto puede sea transformado en a JSON objeto. <3> Ahora que nosotros tienen a JSON objeto nosotros puede imprimir fuera el valores nosotros son interesados en. <4> Este tiempo en su lugar de mostrando un alerta caja, nosotros son registro el detalles cadena a el consola. En consola puede sea consultado en a través de su navegador's dev herramientas. En es gran para depuración. |
Una vez aclarado esto, pongámonos serios y empecemos a crear una función Netlify. Introduzca netlify función:crear en tu terminal. Deberías ver algo como:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
[C:\Código\Couchbase\miproyecto] $ netlify función:crear ? Seleccione el tipo de función usted'd como a crear Sin servidor función (Nodo/Vaya a) ◈ funciones directorio no especificado en netlify.toml o INTERFAZ DE USUARIO ajustes ? Entre en el ruta, relativa a su sitio's base directorio en su repositorio, donde su funciones debe en directo: netlify/funciones ◈ actualización de sitio ajustes con netlify/funciones ◈ funciones directorio netlify/funciones actualizado en sitio ajustes ◈ funciones directorio netlify/funciones hace no existe pero, crear it... ◈ funciones directorio netlify/funciones creado ? Seleccione el idioma de su función JavaScript ? Elige a plantilla javascript-hola-mundo ? Nombre su función: saveform ◈ Creación de función saveform ◈ Creado netlify\funciones\saveform\saveform.js [C:\Código\Couchbase\miproyecto] $ |
Seleccione Sin servidor deja el valor por defecto para la siguiente pregunta sobre la ruta, mantiene JavaScript como lenguaje, mantiene el valor por defecto hola-mundo plantilla, que dar un nombre a su función. La mía se llama saveform. Esto generará nuevos archivos en la carpeta netlify. Si ejecuta netlify dev ahora, verá nuevas líneas en los registros:
|
1 2 |
Cargado función saveform http://localhost:8888/.netlify/functions/saveform. ◈ Funciones servidor es escuchando en 62431 |
Esto significa que nuestro servidor netlify dev también está sirviendo a nuestra función recién creada. Echa un vistazo al archivo recién generado ./netlify/functions/saveform/saveform.js.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
// Documentos sobre eventos y contextos https://docs.netlify.com/functions/build/#code-your-function-2 const manipulador = async (evento) => { <1> pruebe { const tema = evento.queryStringParameters.nombre || Mundo <2> devolver { statusCode: 200, cuerpo: JSON.stringify({ mensaje: `Hola ${tema}` }), <3> // // más claves que puede devolver: // cabeceras: { "headerName": "headerValue", ... }, // isBase64Encoded: true, } } captura (error) { devolver { statusCode: 500, cuerpo: error.toString() } <4> } } módulo.exportaciones = { manipulador } |
|
1 2 3 4 |
<1> el firma de el función es aisíncrono (el async palabra clave),y tiene un evento parámetro. Asíncrono significa algunos código en el función puede sea asíncrono y nosotros puede espere para el código a sea ejecutado con el await palabra clave, en su lugar de gestión de el JavaScript Promesa objeto tradicionalmente devuelto por async funciones. <2> el `evento` objeto tiene algunos propiedades y métodos, como `queryStringParameters` que permite us a consiga el nombre consulta param <3> este función debe devolver a JSON objeto con un HTTP estado código y un Objeto cuerpo. Si todo trabajado bien, nosotros devolver a JSON cuerpo que contiene a mensaje campo y el código 200. Código Inicio con 2 significa cosas fue bien. <4> Si cosas fue equivocado, nosotros devolver el estado código 500. Código Inicio con 5 significa algo fue equivocado en el servidor. Y el cuerpo campo se contienen el error. |
Probémoslo llamando a esta función cuando el usuario haga clic en enviar. Basta con añadir el siguiente código después del último console.log llamar:
|
1 2 3 4 5 6 7 8 9 10 11 |
consola.registro(detalles); const respuesta = await buscar("/.netlify/functions/saveform", { <1> método: GET, <2> cabeceras: { <3> Tipo de contenido: aplicación/json, }, }) si (respuesta.estado == 200) { <4> consola.registro(await respuesta.texto()); } |
|
1 2 3 4 |
<1> buscar es el método usted puede llame a a enviar un HTTP solicitar a a servidor. Aquí nosotros son enviando a solicitar a `/.netlify/funciones/saveform`. Aviso el await palabra clave que significa este método normalmente devuelve a prometa. Aquí nosotros son sólo asignar el resultado de el prometa a el campo respuesta. <2> HTTP solicitar tienen métodos, alguna vez también conocido como HTTP verbos. Aquí nosotros son no modificar cualquier cosa en el servidor, nosotros son recuperar información, así que nosotros son utilizando el método GET <3> HTTP solicita tienen [cabeceras](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Type). Proporcionan metadatos adicionales como el Content-type, aquí establecido en `application/json`. Lo que significa es que estamos manipulando JSON. `application/text` significaría que estamos manipulando cualquier forma de texto. Estos se llaman [Mime types o Media type](https://developer.mozilla.org/en-US/docs/Glossary/MIME_type). <4> Nosotros son pruebas el estado código devuelto por el servidor. Si it's 200, it significa todo fue bien. Nosotros tienen a mensaje a mostrar en el consola. |
Añadir, confirmar y empujar. netlify open:admin
En este punto, usted tiene un frontend y un backend desplegados, en Internet. Pero todo lo que estamos haciendo es llamar a la función por defecto creada por el asistente de Netlify. El siguiente paso es enviar el contenido del formulario a esa función, y almacenarlo en una base de datos.
Paso 4 - Base de datos
Lo primero que hay que hacer es averiguar cómo enviar los detalles del formulario a la función. Esto requiere que cambiemos nuestro método GET por un método POST. Estas cosas se llaman métodos de petición HTTP, a veces referidos como verbos HTTP. Puedes consultar la lista completa en MDN. Una solicitud del método Get sólo se utiliza para recuperar datos. Un método post se utiliza para crear o modificar datos. Esto es exactamente lo que queremos. Queremos crear una nueva entrada en nuestro Dababase cuando alguien envía un formulario. Una petición HTTP tiene un método, algunas cabeceras (metadatos sobre sus peticiones, aquí estamos diciendo que la petición será contenido JSON con la cabecera Content-Typ), y un cuerpo. El cuerpo de nuestra petición será texto JSON.
|
1 2 3 4 5 6 7 |
const respuesta = await buscar("/.netlify/functions/saveform", { método: POST, <1> cabeceras: { Tipo de contenido: aplicación/json, }, cuerpo: JSON.stringify(valor), <2> }) |
|
1 2 |
<1> Nosotros cambiar el HTTP método a POST porque nosotros desea a cambiar algo en su lugar de sólo recuperar información. <2> A solicitar puede también tienen a cuerpo. Aquí nosotros son enviando a texto versión de nuestra JSON objeto. |
Nuestra petición HTTP del frontend a nuestro backend ha cambiado, ahora necesitamos adaptar el código del backend.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
const manipulador = async (evento) => { pruebe { var datos = JSON.analizar(evento.cuerpo); <1> devolver { statusCode: 200, cuerpo: JSON.stringify({ nombre: datos.nombre }) <2> } } captura (error) { devolver { statusCode: 500, cuerpo: error.toString() } } } módulo.exportaciones = { manipulador } |
|
1 2 |
<1> En evento objeto permite us a consiga el cuerpo de el solicitar. En's texto, nosotros puede analizar este texto en a JSON objeto y asignar it a el campo llamado `datos`. <2> A escriba a seguro nosotros hizo reciba nuestra JSON objeto, nosotros cambiar el devuelto mensaje y utilice el campo `datos.nombre`. |
Debería ver un mensaje diferente en la consola de desarrollo web, debería ver {"name": "yourName"}.
Hemos enviado los datos del formulario al backend y nos hemos asegurado de ello. Ahora en el lado de la base de datos de las cosas. Trabajando en Couchbase, esta es la base de datos que voy a utilizar. Una forma sencilla de probar, vaya a https://cloud.couchbase.com/sign-upCrea una cuenta y disfruta de 30 días de prueba sin necesidad de tarjeta de crédito.
Puedes dejar activada la opción por defecto o elegir tu proveedor de nube favorito y la región más cercana. Haga clic en Desplegar ahora y espere a que se despliegue su base de datos.
Dos cosas que queremos hacer desde allí. Asegurarnos de que podemos conectarnos a esa base de datos desde nuestro código backend, y asegurarnos de que podemos escribir los datos en alguna parte. Siga adelante y haga clic en el Conectar ficha.
En Couchbase almacenamos los datos en Buckets. Por defecto la prueba viene con un bucket de muestra de viaje preimportado. No vamos a utilizarlo. En su lugar vamos a crear nuestro propio bucket. Haz click en Ajustes en el menú de nivel superior, que en Cubos en el menú de la izquierda.
Ahora haga clic en + Crear cubodale un nombre y deja el resto con la configuración por defecto. Crear cubo.
Tenemos un nuevo Bucket, ahora necesitamos crear las credenciales asociadas. Haz clic en el botón Acceso a bases de datos que Crear acceso a base de datos botón.
Asegúrese de recordar tanto el nombre de usuario como la contraseña y haga clic en Crear base de datos. Una última cosa que hay que hacer es permitir que esta base de datos sea accesible públicamente. Ahora mismo está oculta. Haga clic en Direcciones IP permitidasque Añadir IP permitida. Haga clic en Permitir el acceso desde cualquier lugarSiga las instrucciones. Esto debería rellenar el formulario, a continuación, haga clic en el botón Añadir IP permitida botón. Puede que pienses que esto es un poco engorroso. ¿Por qué no viene por defecto?
Ahora haga clic en el botón Conectar pestaña. Verá el icono Cadena de conexiónselecciona las credenciales de tu base de datos, cambia el lenguaje a Node, y nos dará las instrucciones correctas para conectarnos a la base de datos desde nuestro código backend.
Podemos copiar y pegar esto en el código de nuestra función, y añadir un par de cosas más:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
const cripto = requiere("cripto"); <1> const couchbase = requiere("couchbase"); <2> const manipulador = async (evento) => { pruebe { const clusterConnStr = "couchbases://cb.ar0qqwli6cczm1u.cloud.couchbase.com"; // Sustitúyalo por Cadena de conexión const nombre de usuario = "Administrador"; // Sustitúyalo por el nombre de usuario de las credenciales de acceso a la base de datos const contraseña = "Sofá#123"; // Sustitúyalo por la contraseña de las credenciales de acceso a la base de datos // Obtener una referencia al cluster const grupo = await couchbase.conecte(clusterConnStr, { <4> nombre de usuario: nombre de usuario, contraseña: contraseña, // Utilice el perfil preconfigurado a continuación para evitar problemas de latencia en su conexión. configProfile: "wanDesarrollo", }); const cubo = grupo.cubo("formulario de encuesta"); <5> const colección = cubo.defaultCollection(); <6> var datos = JSON.analizar(evento.cuerpo); deje resultado = await colección.insertar(cripto.randomUUID(), datos); <7> devolver { statusCode: 200, cuerpo: JSON.stringify({ nombre: datos.nombre }) } } captura (error) { consola.registro(error); devolver { statusCode: 500, cuerpo: error.toString() } } } módulo.exportaciones = { manipulador } |
|
1 2 |
<1> Usted puede véase nosotros tienen dos nuevo dependencias a nuestra proyecto. En cripto paquete es proporcionado por nodo. En permite us a generar a al azar identificador para nuestra documento <2> En couchbase paquete es el Couchbase NodeJS SDK. En's cada bit de código usted necesita a conecte a a Couchbase base de datos. Este proyectos son también a menudo llamado conductores para otros bases de datos, o clientes. |
Para Couchbase es necesario instalarlo. Ejecutar npm i couchbase@4.2.4 hará el truco. En este momento la compatibilidad Netlify/Couchbase está asegurada para Couchbase versión 4.2.4 o inferior. Esto se debe a la naturaleza de nuestro SDK. Es una interfaz de JavaScript en la parte superior de nuestro C SDK. Y las dependencias de C esperan encontrar sus dependencias del sistema en la versión correcta. Ahora mismo Couchbase 4.2.5 espera encontrar GLIBC_29 pero no está disponible en el sistema Ubuntu que ejecuta nuestro código backend Netlify.
Ahora que tenemos dependencias, seamos explícitos en cómo construirlas. Puedes añadir un netlify.toml en la raíz del repositorio con el siguiente contenido:
|
1 2 3 |
[construya] comando = "npm install && strip --strip-debug ./node_modules/couchbase/build/Release/couchbase_impl.node" publicar = "." |
Hace un par de cosas. Instalar las dependencias y eliminar la tabla de símbolos de depuración de couchbase_impl.node. Este archivo es la librería C usada por nuestro SDK de Node. Y es demasiado grande para Netlify en este momento. Así que estamos eliminando el desorden innecesario que viene del proceso de construcción.
|
1 2 3 4 5 |
<3> Este variables son el información necesario para el SDK a conecte a el grupo. A conexiones cadena, a nombre de usuario y a contraseña. <4> `couchbase.conecte` toma el conexión cadena como primero parámetro, que a JSON objeto con nombre de usuario, contraseña y otros opciones. Aquí nosotros también dé el `wanDesarrollo` config perfiles. En se aumentar el por defecto tiempo de espera valores de todos Couchbase operaciones. Básicamente si su conexión es lento it ganóno te grite. Del objeto Cluster obtenemos un Bucket. Un bucket es donde almacenamos Scopes y Collections. Aquí obtenemos el bucket `surveyform`. Ya tiene un ámbito por defecto y una colección por defecto. Desde el bucket podemos obtener la Colección por defecto. Una Collection es donde almacenamos Document, o pares clave/valor. Piensa en la clave como el identificador del documento, y el valor como tus datos JSON. Pero puede ser cualquier otra cosa. Desde el objeto colección, llamamos al método insertar. Toma dos parámetros, la clave y el valor. Entonces llamamos al método randomUUID() del paquete crypto, para generar un identificador aleatorio. Y pasamos el objeto data como valor. Contiene nuestro JSON. Esta función es asíncrona.s en a solicitar a el Couchbase Capella grupo. Nosotros await para el grupo's respuesta. |
Ahora usted podría agregar los nuevos archivos, confirmar y empujar a GitHub. Pero eso sería empujar su contraseña a GitHub. No queremos eso. En su lugar puedes probarlo ejecutando netlify dev. Siga adelante y vuelva a enviar el formulario.
Si todo ha ido bien, ¡has escrito datos en tu Base de Datos! Puedes comprobarlo fácilmente accediendo a la UI de Couchbase Capella. Haz clic en Herramientas de datosSeleccione el cubo, el ámbito y la colección, y debería ver su encuesta desde el documento.
Esto es genial, ¡acabas de escribir código para conectar tu base de datos!
Paso 5 - Gestión de la configuración
Para evitar empujar nuestras credenciales en GitHub, vamos a utilizar variables de entorno. Las variables de entorno son comunes a todos los sistemas operativos y es la mejor manera de gestionar la configuración a través de diferentes entornos (diferentes sistemas operativos, nubes, prueba, puesta en escena, preproducción, producción, lo que se adapte a su flujo de trabajo).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.... const PUNTO FINAL = proceso.env.COUCHBASE_ENDPOINT || "couchbase://localhost"; <1> const NOMBRE = proceso.env.COUCHBASE_USERNAME || "Administrador";<1> const CONTRASEÑA = proceso.env.COUCHBASE_PASSWORD || "contraseña";<1> const CUBO = proceso.env.CUBO_CAMA || "formulario de encuesta"<1> const manipulador = async (evento) => { pruebe { const clusterConnStr = PUNTO FINAL; // Sustitúyalo por la cadena de conexión const nombre de usuario = NOMBRE; // Sustitúyalo por el nombre de usuario de las credenciales de acceso a la base de datos const contraseña = CONTRASEÑA; // Sustitúyalo por la contraseña de las credenciales de acceso a la base de datos // Obtener una referencia al cluster const grupo = await couchbase.conecte(clusterConnStr, { usernme: nombre de usuario, contraseña: contraseña, // Utilice el perfil preconfigurado a continuación para evitar problemas de latencia en su conexión. configProfile: "wanDesarrollo", }); const cubo = grupo.cubo(CUBO); ... |
|
1 |
<1> En proceso objeto es siempre disponible con nodo así que no necesita para a específico biblioteca importar. Utilizando || permite a proporcionar a por defecto valor para cada variable si ellos son no definido. |
En Mac o Linux, puede ejecutar export MYVARIABLE="valor" en tu terminal. En Windows puede ejecutar $Env:MYVARIABLE="valor"
Para definirlos en el contexto de Netlify, puede ir a través de la interfaz de usuario y hacerlo manualmente, o utilizar la CLI:
|
1 2 3 4 |
netlify env:configure COUCHBASE_ENDPOINT sofás cama://cb.ar0qqwli6cczm1u.cloud.couchbase.com netlify env:configure COUCHBASE_USERNAME Administrador netlify env:configure COUCHBASE_PASSWORD contraseña netlify env:configure CUBO_CAMA formulario de encuesta |
Ahora puedes añadir tus archivos, hacer commit y push de tu código. Felicidades, te has vuelto fullstack. Backend, Frontend y Base de Datos. ¡Y desplegado todo en vivo! Pero nuestro trabajo no ha terminado. Todavía hay un par de cosas que podemos hacer para que esto sea más profesional.
Paso 6 - Comentarios de los usuarios
En este momento no tenemos mucho que sucede cuando el usuario hace clic en el Enviar de nuestro formulario. Tenemos que cambiar esto para hacerles saber que han sido recortados con éxito, o no. El primer paso es comprobar si hay un error en el lado dev de las cosas. Los códigos de estado HTTP están bien hechos, cualquier cosa igual o superior a 400 suele ser un error, así que podemos hacer algo como esto:
|
1 2 3 4 5 |
si (respuesta.estado >= 400) { <1> consola.registro("Algo cuando mal"); <2> consola.registro(await respuesta.texto()); <3> devolver falso; } |
|
1 2 3 |
<1> Estado código que comienza con 4 normalmente significa algo fue equivocado en el cliente lateral. En equivocado datos fue enviado, el cliente hace no tienen el derecha permiso, el página hace no existe etc... Aquí nosotros prueba si el código es es igual a o superior que 400. <2> Si it es, nosotros registro a mensaje en el consola <3> Nosotros también registro el error mensaje devuelto por el servidor |
Para probarlo, simplemente comete un error en alguna parte de tu cadena de conexión o credenciales a Couchbase. Deberías ver errores en la consola web al hacer clic en Enviar. Pero la consola web es sólo para nosotros, tenemos que añadir un error adecuado o mensaje de éxito a nuestro usuario.
He añadido un par de elementos span HTML con mensajes de error y éxito justo antes del final del formulario. Tenga en cuenta el ocultar Clase CSS que los hace invisibles por ahora.
|
1 2 3 4 5 6 7 8 |
... </div> <span id="error de formulario" clase="ocultar-mensaje-de-error"></span> <span id="mensaje de agradecimiento" clase="esconder"> Su participación tiene ha sido grabado, gracias usted!. </span> </formulario> ... |
Y aquí está el CSS correspondiente. Mostrando el error en rojo, ocultando o mostrando un elemento, y una bonita animación de desvanecimiento porque soy así de elegante.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
.container .error-message { color: rojo; } .ocultar { mostrar: ninguno; } .mostrar { mostrar: bloque; } .fade-out { animación: fadeOut Facilidad 8s; -webkit-animación: fadeOut Facilidad 8s; -moz-animation: fadeOut Facilidad 8s; -o-animación: fadeOut Facilidad 8s; -ms-animation: fadeOut Facilidad 8s; }@fadeOut de fotogramas clave { 0% { opacidad:1; } 100% { opacidad:0; } } @-moz-keyframes fadeOut { 0% { opacidad:1; } 100% { opacidad:0; } } @-webkit-keyframes fadeOut { 0% { opacidad:1; } 100% { opacidad:0; } } @-o-keyframes fadeOut { 0% { opacidad:1; } 100% { opacidad:0; } } @-ms-keyframes fadeOut { 0% { opacidad:1; } 100% { opacidad:0; mostrar: ninguno; } |
Ahora a juntarlo todo. Las dos primeras líneas obtienen los nuevos elementos span que se acaban de añadir. La llamada a form.reset() es borrar todos los valores del formulario cuando el código de estado de respuesta devuelto es 200. El resto es jugar con las clases CSS para hacer que el mensaje aparezca, que se desvanezca con la adición de la clase fade-out, que una función de tiempo de espera de 7000ms eliminará todas las clases y ocultará el elemento de nuevo. Es más o menos lo mismo cuando hay un error.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
const mensaje de agradecimiento = documento.getElementById(mensaje de agradecimiento); <1> const formError = documento.getElementById("error de formulario"); <1> si (respuesta.estado == 200) { formulario.reiniciar(); <2> mensaje de agradecimiento.classList.añada(mostrar); <3> mensaje de agradecimiento.classList.añada(desvanecimiento); <3> setTimeout(función(){mensaje de agradecimiento.classList.eliminar(desvanecimiento);mensaje de agradecimiento.classList.eliminar(mostrar);}, 7000); <3> consola.registro(await respuesta.texto()); devolver falso; } si (respuesta.estado >= 400) { consola.registro("Algo cuando mal"); consola.registro(await respuesta.texto()); formError.textoContenido = "Algo salió mal al grabar tu contacto".; <4> formError.classList.alternar(mostrar); <4> formError.classList.alternar(desvanecimiento); <4> setTimeout(función(){formError.classList.alternar(desvanecimiento);formError.classList.alternar(mostrar);}, 7000); <4> devolver falso; } |
|
1 2 3 4 |
<1> Nosotros asignar nuestra nuevo abarca a variables <2> Si cosas fue bien, nosotros reiniciar el formulario's datos, it muestra a el usuario que it trabajado. <3> Nosotros primero añada a CSS clase que muestra el error mensaje, que aplicar el desvanecerse-fuera CSS clase, que llame a el tiempo de espera función. En 7000 ms, el desvanecerse-fuera y Mostrar CSS clase se sea eliminado, ocultar el éxito mensaje de nuevo. <4> Nosotros do el mismo cosa cuando allí es un error, utilizando el formError HTML elemento en su lugar. |
Ahora puedes probar a enviar un formulario de nuevo y ver los diferentes mensajes de éxito o error, dependiendo de lo que hayas decidido hacer. Cuando estés satisfecho puedes añadir, confirmar y empujar ese código.
Enhorabuena, ¡has llegado al final de esta guía! Has utilizado git, GitHub, Netlify y Couchbase Capella para desplegar un formulario HTML en la web, y te has asegurado de que el contenido se almacenaba en una base de datos cada vez que los usuarios enviaban el formulario.
¿Quieres más?
-
- Echa un vistazo Recursos para desarrolladores de Couchbase: ejemplos de aplicaciones, código y tutoriales.
- Únete a Centro comunitario para utilizar Discord, foros y mucho más.
