Cómo configurar una base de datos si eres un desarrollador front-end

Alguien me preguntó recientemente cuál es la forma más fácil para que un desarrollador front-end guarde los datos de los usuarios. Así que voy a explicar cómo hacer precisamente eso.

Configurando la base de datos

Lo primero que necesitaremos es una base de datos real. Puede dirigirse a mlab para obtener uno gratis. Una vez que se haya registrado, haga clic en crear nuevoen la pestaña Implementaciones de MongoDB. La base de datos de la zona de pruebas es gratuita, así que esa es la que vamos a utilizar.

Una vez que hemos creado la base de datos, necesitamos crear una cuenta para que podamos autenticarnos. Haga clic en el nombre de la base de datos, luego en los usuarios,y agregue el usuario de la base de datos . Anote el nombre de usuario y la contraseña que eligió, ya que los necesitaremos más adelante.

En la parte superior de la página de la base de datos, debería ver un URI de MongoDB. Esta es la dirección web de nuestra base de datos. El URI de su base de datos es como la URL de una página web. Por convención, el URI de MongoDB es el siguiente:

mongodb://:@
    
     :/
    

El mío, por ejemplo, es:

mongodb://admin:[email protected]:11885/medium

Configurar el servidor

Vamos a utilizar Node en nuestro back-end. Para evitar tener que configurarlo, puede clonar mi proyecto en Glitch haciendo clic aquí

Eche un vistazo al server.jsarchivo inicial que proporcioné:

Comenzamos importando express: es la biblioteca que usaremos para manejar las solicitudes a nuestro servidor.

Necesitamos use(require(cors))permitir solicitudes entre dominios. Son solicitudes de un sitio web alojado en un dominio a un servidor en otro dominio.

app.use(require('body-parser').json()) analiza automáticamente la solicitud a JSON por nosotros.

Luego pasamos al getmétodo la ruta que queremos manejar y el callback que lo manejará. Esto significa que cada vez que alguien abre la página /de nuestro sitio web, la solicitud será manejada por esa devolución de llamada. El dominio base es implícito, por lo que si su dominio es //shiny-koala.glitch.com,la ruta /aboutserá //shiny-koala.glitch.com/about .

Para ser precisos, cuando digo "abrir la página", me refiero a que hace una solicitud utilizando el GETmétodo a nuestro servidor. Los métodos HTTP son solo tipos de solicitudes que puede realizar a un servidor. Solo usaremos lo siguiente:

  • GETEste método se utiliza para recuperar recursos de un servidor. Por ejemplo, cuando abre Facebook, carga el HTML, CSS y JavaScript necesarios.
  • POSTEste método se utiliza para crear recursos en un servidor. Por ejemplo, cuando publica algo en Facebook, la información que escribió en esa publicación se envía a los servidores de Facebook en una POSTsolicitud.
  • PUTEste método se usa para actualizar recursos en un servidor. Por ejemplo, cuando edita una publicación, sus ediciones se envían al servidor de Facebook en una PUTsolicitud.

Los app.posty app.putfuncionan exactamente igual app.get, pero manejan el método POST y PUT en lugar de GET de manera bastante razonable.

Enrutamiento

Mientras desarrolla el servidor, deberá realizar algunas pruebas. Para ejecutar solicitudes HTTP, puede utilizar la práctica prueba de prueba REST del sitio o la aplicación Insomnia.

Para verificar la URL de su aplicación Glitch, haga clic en el botón Mostrar .

Hasta ahora, hemos estado usando solo la ruta /. Pero queremos almacenar información diferente sobre diferentes usuarios, por lo que necesitamos una ruta diferente para cada usuario.

Por ejemplo: /ZaninAndreay/JohnGreen

Ahora tenemos un problema: no podemos codificar todas las rutas, ya que no es un enfoque muy escalable. Lo que necesitamos son parámetros de ruta. Solo codificaremos una ruta:/:user

Los dos puntos le dicen a Express que tome cualquier ruta que comience con /y luego solo caracteres alfanuméricos.

Algunos ejemplos:

  • /ZaninAndrea será atrapado
  • /Johnny45 será atrapado
  • /alex/scoreserá no ser atrapado

Luego podemos recuperar el valor de useren la variablerequest.params.user

Nuestro servidor ahora responde a cada consulta repitiendo el nombre de usuario.

Agregar datos a la base de datos

Sabemos quién es el usuario y ahora queremos poder almacenar información sobre él.

Para consultar la base de datos usaremos la mongodbbiblioteca. Puede instalarlo de dos formas:

npm install mongodb --save

o si está usando Glitch, vaya al package.jsonarchivo y haga clic en el botón Agregar paquete .

Carguemos la biblioteca y almacenemos el URI de MongoDB en una variable:

El URI es información muy confidencial, es todo lo que se necesita para acceder a su base de datos. Es mejor ponerlo en un .envarchivo que no será visible para otros.

Glitch cargará automáticamente las variables del .envarchivo a la process.envvariable.

La conexión a la base de datos es una operación asincrónica, por lo que necesitamos envolver toda la configuración del servidor en una devolución de llamada como esta:

Las bases de datos están organizadas en colecciones y las colecciones contienen documentos (básicamente archivos JSON). Así que conectemos a la usercolección (se creará la primera vez que accedamos).

Primero, vamos a manejar la POSTruta. Ese es el que usaremos cuando agreguemos datos sobre un usuario por primera vez. Luego usaremos la PUTruta para actualizarlo.

El collection.insertOnemétodo agrega un nuevo documento a la colección. En nuestro caso, cada usuario tendrá su propio documento.

{ ...request.body, user : request.params.user } aprovecha el operador de propagación para fusionar los datos proporcionados a través del cuerpo de la solicitud y el usuario proporcionado a través de la URL.

El resultado es el documento que se almacenará en la colección.

El segundo argumento es una devolución de llamada y simplemente notifica al usuario sobre el resultado de la operación.

Obtener datos de la base de datos

Ahora que tenemos algunos datos en el servidor, queremos poder leerlos. Usamos el GETmétodo para hacer esto.

Esta vez, el primer argumento es un filtro que le dice a la base de datos que solo nos envíe los documentos con la propiedad de usuario correcta.

Los documentos se devuelven al usuario en una matriz, porque teóricamente podría haber más de un documento con esa propiedad de usuario. Depende de nosotros asegurarnos de que esto no suceda.

Actualización de datos en la base de datos

Por último, pero no menos importante, está el PUTmétodo que usamos para actualizar un usuario ya existente.

El primer argumento es un filtro, como el que usamos en el GETmétodo.

El segundo argumento es un documento de actualización; puede leer más sobre ellos aquí. En nuestro caso, le estamos diciendo a la base de datos que combine los datos pasados ​​por el usuario con los datos ya existentes.

Sin embargo, tenga cuidado, porque los parámetros anidados se reemplazarán y no se fusionarán.

Despedida

Esto está lejos de ser una guía completa sobre bases de datos y programación de back-end, pero es suficiente para comenzar y para impulsar proyectos personales.

Probablemente escribiré sobre la autenticación en un artículo futuro. Hasta entonces, no lo utilice para almacenar datos confidenciales.

Puede jugar con el proyecto completo aquí, necesitará su propia base de datos, si aún no ha creado una, vuelva a la sección Configuración de la base de datos .

Si te ha gustado este artículo, aplaude para que más personas lo vean. ¡Gracias!