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> <head> <link rel="stylesheet" href="./styles.css" /> </head> <body> <div class="container"> <header class="header"> <h1 id="title" class="text-center">Survey Form</h1> <p id="description" class="description text-center"> Thank you for taking the time to help us improve the platform </p> </header> <form id="survey-form"> <div class="form-group"> <label id="name-label" for="name">Name</label> <input type="text" name="name" id="name" class="form-control" placeholder="Enter your name" required /> </div> <div class="form-group"> <label id="number-label" for="number" >Age<span class="clue">(optional)</span></label > <input type="number" name="age" id="number" min="10" max="99" class="form-control" placeholder="Age" /> </div> <div class="form-group"> <p> Would you recommend this awesome survey to a Friend ? </p> <label ><input name="recommend" value="recommend" type="checkbox" class="input-checkbox" />yes</label > </div> <div class="form-group"> <button type="submit" id="submit" class="submit-button"> Submit </button> </div> </form> </div> </body> </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 install 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 ◈ ◈ Ignored general context env var: LANG (defined in process) ◈ No app server detected. Using simple static server ◈ Unable to determine public folder to serve files from. Using current working directory ◈ Setup a netlify.toml file with a [dev] section to specify your dev server settings. ◈ See docs at: https://cli.netlify.com/netlify-dev#project-detection ◈ Running static server from "freecodecamp-survey" ◈ Setting up local development server ◈ Static server listening to 3999 Adding local .netlify folder to .gitignore file... ┌─────────────────────────────────────────────────┐ │ │ │ ◈ Server now ready on https://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 "# myproject" >> README.md git init git add README.md git commit -m "first commit" git branch -M main git remote add origin https://github.com/ldoguin/myproject.git git push -u origin main |
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:\Code\Couchbase\myproject] $ echo "# myproject" >> README.md [C:\Code\Couchbase\myproject] $ ls Directory: C:\Code\Couchbase\myproject Mode LastWriteTime Length Name ---- ------------- ------ ---- -a---- 8/4/2023 12:11 PM 28 README.md [C:\Code\Couchbase\myproject] $ git init hint: Using 'master' as the name for the initial branch. This default branch name hint: is subject to change. To configure the initial branch name to use in all hint: of your new repositories, which will suppress this warning, call: hint: hint: git config --global init.defaultBranch <name> hint: hint: Names commonly chosen instead of 'master' are 'main', 'trunk' and hint: 'development'. The just-created branch can be renamed via this command: hint: hint: git branch -m <name> Initialized empty Git repository in C:/Users/Laurent Doguin/Documents/Couchbase/myproject/.git/ [C:\Code\Couchbase\myproject] $ git config --global init.defaultBranch main [C:\Code\Couchbase\myproject] $ git branch -m main [C:\Code\Couchbase\myproject] $ git add .\README.md .\index.html .\styles.css [C:\Code\Couchbase\myproject] $ git commit -m "first commit" [main (root-commit) 356ece7] first commit 3 files changed, 245 insertions(+) create mode 100644 README.md create mode 100644 index.html create mode 100644 styles.css [C:\Code\Couchbase\myproject] $ git remote add origin https://github.com/ldoguin/myproject.git [C:\Code\Couchbase\myproject] $ git push -u origin main Enumerating objects: 5, done. Counting objects: 100% (5/5), done. Delta compression using up to 8 threads Compressing objects: 100% (4/4), done. Writing objects: 100% (5/5), 1.95 KiB | 999.00 KiB/s, done. Total 5 (delta 0), reused 0 (delta 0), pack-reused 0 To https://github.com/ldoguin/myproject.git * [new branch] main -> main branch 'main' set up to track 'origin/main'. [C:\Code\Couchbase\myproject] $ |
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:\Code\Couchbase\myproject] $ netlify link netlify link will connect this folder to a site on Netlify ? How do you want to link this folder to a site? Use current git remote origin (https://github.com/ldoguin/myproject) Looking for sites connected to 'https://github.com/ldoguin/myproject'... Directory Linked Admin url: https://app.netlify.com/sites/jolly-sfogliatella-3e6c07 Site url: https://jolly-sfogliatella-3e6c07.netlify.app You can now run other `netlify` cli commands in this directory [C:\Code\Couchbase\myproject] $ |
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:\Code\Couchbase\myproject] $ git add .\index.html [C:\Code\Couchbase\myproject] $ git commit -m"Panda" [main caa6f87] Panda 1 file changed, 1 insertion(+), 1 deletion(-) [C:\Code\Couchbase\myproject] $ git push Enumerating objects: 5, done. Counting objects: 100% (5/5), done. Delta compression using up to 8 threads Compressing objects: 100% (3/3), done. Writing objects: 100% (3/3), 360 bytes | 180.00 KiB/s, done. Total 3 (delta 1), reused 0 (delta 0), pack-reused 0 remote: Resolving deltas: 100% (1/1), completed with 1 local object. To https://github.com/ldoguin/myproject.git 356ece7..8a2ebe2 main -> main [C:\Code\Couchbase\myproject] $ netlify open:site Opening "jolly-sfogliatella-3e6c07" site 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 form = document.getElementById('survey-form'); <1> form.addEventListener('submit', handleForm); <2> async function handleForm(e) { e.preventDefault() <3> alert("Form Submission !") <4> } </script> |
|
1 2 3 4 |
<1> Get the Dom element representing the form by using its id <2> Each time the submit event occurs, run the handleForm function <3> The natural behavior of a form submission is to reload the page, we don't need that, hence we prevent the default behavior to happen <4> The alert function display a popup with a message |
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 |
<label> <input id="hiddenRecommend" name="recommend" value="false" type="hidden" /> <input id="recommend" name="recommend" value="true" type="checkbox" class="input-checkbox" />yes</label> |
En cuanto al código JavaScript, hay algunas líneas nuevas interesantes.
|
1 2 3 4 5 6 7 8 9 10 11 |
const form = document.getElementById('survey-form'); form.addEventListener('submit', handleForm); async function handleForm(e) { <1> e.preventDefault() const data = new FormData(e.target); <1> const value = Object.fromEntries(data.entries()); <2> const details = `name: ${value.name}\nage: ${value.age}\nrecommend: ${value.recommend}`; <3> console.log(details); <4> } |
|
1 2 3 4 |
<1> The parameter of the handleForm function is an object(e) with a field called target. This target can be transform into a FormData object. <2> The FormData object can be transformed into a JSON object. <3> Now that we have a JSON object we can print out the values we are interested in. <4> This time instead of displaying an alert box, we are logging the details string to the console. The console can be accessed through your browser's dev tools. It is great for debugging. |
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:\Code\Couchbase\myproject] $ netlify function:create ? Select the type of function you'd like to create Serverless function (Node/Go) ◈ functions directory not specified in netlify.toml or UI settings ? Enter the path, relative to your site’s base directory in your repository, where your functions should live: netlify/functions ◈ updating site settings with netlify/functions ◈ functions directory netlify/functions updated in site settings ◈ functions directory netlify/functions does not exist yet, creating it... ◈ functions directory netlify/functions created ? Select the language of your function JavaScript ? Pick a template javascript-hello-world ? Name your function: saveform ◈ Creating function saveform ◈ Created netlify\functions\saveform\saveform.js [C:\Code\Couchbase\myproject] $ |
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 |
Loaded function saveform https://localhost:8888/.netlify/functions/saveform. ◈ Functions server is listening on 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 |
// Docs on event and context https://docs.netlify.com/functions/build/#code-your-function-2 const handler = async (event) => { <1> try { const subject = event.queryStringParameters.name || 'World' <2> return { statusCode: 200, body: JSON.stringify({ message: `Hello ${subject}` }), <3> // // more keys you can return: // headers: { "headerName": "headerValue", ... }, // isBase64Encoded: true, } } catch (error) { return { statusCode: 500, body: error.toString() } <4> } } module.exports = { handler } |
|
1 2 3 4 |
<1> the signature of the function is aysynchronous (the async keyword),and has an event parameter. Asynchronous means some code inside the function can be asynchronous and we can wait for the code to be executed with the await keyword, instead of managing the JavaScript Promess object traditionally returned by async functions. <2> the `event` object has some properties and methods, like `queryStringParameters` that allows us to get the name query param <3> this function must return a JSON object with an HTTP status code and an Object body. If everything worked well, we return a JSON body containing a message field and the code 200. Code starting with 2 means things went well. <4> If things went wrong, we return the status code 500. Code starting with 5 means something went wrong on the server. And the body field will contain the 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 |
console.log(details); const response = await fetch("/.netlify/functions/saveform", { <1> method: 'GET', <2> headers: { <3> 'Content-Type': 'application/json', }, }) if (response.status == 200) { <4> console.log(await response.text()); } |
|
1 2 3 4 |
<1> fetch is the method you can call to send an HTTP request to a server. Here we are sending a request to `/.netlify/functions/saveform`. Notice the await keyword that means this method usually returns a promess. Here we are just assign the result of the promess to the field response. <2> HTTP request have methods, sometime also known as HTTP verbs. Here we are not modifying anything on the server, we are retrieving information, so we are using the method GET <3> HTTP requests have [headers](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Type). They provide additional metadata like the Content-type, here set to `application/json`. What it means is that we are manipulating JSON. `application/text` would mean we are manipulating any form of text. These are called [Mime types or Media type](https://developer.mozilla.org/en-US/docs/Glossary/MIME_type). <4> We are testing the status code returned by the server. If it's 200, it means everything went well. We have a message to display in the console. |
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 response = await fetch("/.netlify/functions/saveform", { method: 'POST', <1> headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(value), <2> }) |
|
1 2 |
<1> We change the HTTP method to POST because we want to change something instead of just retrieving information. <2> A request can also have a body. Here we are sending a text version of our JSON object. |
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 handler = async (event) => { try { var data = JSON.parse(event.body); <1> return { statusCode: 200, body: JSON.stringify({ name: data.name }) <2> } } catch (error) { return { statusCode: 500, body: error.toString() } } } module.exports = { handler } |
|
1 2 |
<1> The event object allows us to get the body of the request. It's text, we can parse this text into a JSON object and assign it to the field called `data`. <2> To make sure we did receive our JSON object, we change the returned message and use the field `data.name`. |
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 crypto = require("crypto"); <1> const couchbase = require("couchbase"); <2> const handler = async (event) => { try { const clusterConnStr = "couchbases://cb.ar0qqwli6cczm1u.cloud.couchbase.com"; // Replace this with Connection String <3> const username = "Adminstrator"; // Replace this with username from database access credentials <3> const password = "Couch#123"; // Replace this with password from database access credentials <3> // Get a reference to the cluster const cluster = await couchbase.connect(clusterConnStr, { <4> username: username, password: password, // Use the pre-configured profile below to avoid latency issues with your connection. configProfile: "wanDevelopment", }); const bucket = cluster.bucket("surveyform"); <5> const collection = bucket.defaultCollection(); <6> var data = JSON.parse(event.body); let result = await collection.insert(crypto.randomUUID(), data); <7> return { statusCode: 200, body: JSON.stringify({ name: data.name }) } } catch (error) { console.log(error); return { statusCode: 500, body: error.toString() } } } module.exports = { handler } |
|
1 2 |
<1> You can see we have two new dependencies to our project. The 'crypto' package is provided by node. It allows us to generate a random identifier for our document <2> The 'couchbase' package is the Couchbase NodeJS SDK. It's every bit of code you need to connect to a Couchbase database. This projects are also often called drivers for other databases, or clients. |
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 |
[build] command = "npm install && strip --strip-debug ./node_modules/couchbase/build/Release/couchbase_impl.node" publish = "." |
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> This variables are the informations needed for the SDK to connect to the cluster. A connections string, a username and a password. <4> `couchbase.connect` takes the connection string as first parameter, than a JSON object with username, password and other options. Here we also give the `wanDevelopment` config profiles. It will increase the default timeout values of all Couchbase operations. Basically if your connection is slow it won't scream at you. <5> From the Cluster object we get a Bucket. A bucket is where we store Scopes and Collections. Here we get the `surveyform` bucket. It already has a default scope and a default collection. <6> From the bucket we can get the default Collection. A Collection is where we store Document, or key/value pairs. Think of the key as the identifier of the document, and the value as your JSON data. But it could be anything else. <7> From the collection object, we call the insert method. It takes two parameters, the key and the value. So we call the randomUUID() method from the crypto package, to generate a random identifier. And we pass the data object as value. It contains our JSON. This function is asynchronous, it's making a request to the Couchbase Capella cluster. We await for the cluster's response. |
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 ENDPOINT = process.env.COUCHBASE_ENDPOINT || "couchbase://localhost"; <1> const USERNAME = process.env.COUCHBASE_USERNAME || "Administrator";<1> const PASSWORD = process.env.COUCHBASE_PASSWORD || "password";<1> const BUCKET = process.env.COUCHBASE_BUCKET || "surveyform"<1> const handler = async (event) => { try { const clusterConnStr = ENDPOINT; // Replace this with Connection String const username = USERNAME; // Replace this with username from database access credentials const password = PASSWORD; // Replace this with password from database access credentials // Get a reference to the cluster const cluster = await couchbase.connect(clusterConnStr, { usernme: username, password: password, // Use the pre-configured profile below to avoid latency issues with your connection. configProfile: "wanDevelopment", }); const bucket = cluster.bucket(BUCKET); ... |
|
1 |
<1> The process object is always available with node so no need for a specific library import. Using || allows to provide a default value for each variable if they are not defined. |
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:set COUCHBASE_ENDPOINT couchbases://cb.ar0qqwli6cczm1u.cloud.couchbase.com netlify env:set COUCHBASE_USERNAME Administrator netlify env:set COUCHBASE_PASSWORD password netlify env:set COUCHBASE_BUCKET surveyform |
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 |
if (response.status >= 400) { <1> console.log("Something when wrong"); <2> console.log(await response.text()); <3> return false; } |
|
1 2 3 |
<1> Status code that starts with 4 usually means something went wrong on the client side. The wrong data was sent, the client does not have the right permission, the page does not exist etc... Here we test if the code is equals or higher than 400. <2> If it is, we log a message in the console <3> We also log the error message returned by the server |
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="form-error" class="error-message hide"></span> <span id="thank-you-message" class="hide"> Your participation has been recorded, thank you!. </span> </form> ... |
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: red; } .hide { display: none; } .show { display: block; } .fade-out { animation: fadeOut ease 8s; -webkit-animation: fadeOut ease 8s; -moz-animation: fadeOut ease 8s; -o-animation: fadeOut ease 8s; -ms-animation: fadeOut ease 8s; }@keyframes fadeOut { 0% { opacity:1; } 100% { opacity:0; } } @-moz-keyframes fadeOut { 0% { opacity:1; } 100% { opacity:0; } } @-webkit-keyframes fadeOut { 0% { opacity:1; } 100% { opacity:0; } } @-o-keyframes fadeOut { 0% { opacity:1; } 100% { opacity:0; } } @-ms-keyframes fadeOut { 0% { opacity:1; } 100% { opacity:0; display: none; } |
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 thankYouMessage = document.getElementById('thank-you-message'); <1> const formError = document.getElementById("form-error"); <1> if (response.status == 200) { form.reset(); <2> thankYouMessage.classList.add('show'); <3> thankYouMessage.classList.add('fade-out'); <3> setTimeout(function(){thankYouMessage.classList.remove('fade-out');thankYouMessage.classList.remove('show');}, 7000); <3> console.log(await response.text()); return false; } if (response.status >= 400) { console.log("Something when wrong"); console.log(await response.text()); formError.textContent = "Something went wrong while recording your contact."; <4> formError.classList.toggle('show'); <4> formError.classList.toggle('fade-out'); <4> setTimeout(function(){formError.classList.toggle('fade-out');formError.classList.toggle('show');}, 7000); <4> return false; } |
|
1 2 3 4 |
<1> We assign our new spans to variables <2> If things went well, we reset the form's data, it shows to the user that it worked. <3> We first add a CSS class that shows the error message, than apply the fade-out CSS class, than call the timeout function. In 7000 ms, the fade-out and show CSS class will be removed, hiding the success message again. <4> We do the same thing when there is an error, using the formError HTML element instead. |
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.
