Crear un usuario es una de las prácticas más importantes en la creación de un aplicación con accesos privados. En este post, te enseñaremos cómo crear usuario con JavaScript y sparREST para que tus proyectos estén conectados con una API local.
Antes de empezar a crear usuarios con JavaScript y sparREST
Para crear usuario con JavaScript y sparREST, antes debes tener preparados dos aspectos fundamentales: sparREST y tu proyecto.
Para lo primero, te aconsejamos leer nuestros posts sobre levantar sparREST y cómo usar sparREST, donde aprenderás cómo funciona este repositorio y cómo usarlo para crear una API en local que interactúe con tu base de datos.
Para lo segundo, deberás definir qué parte de tu proyecto se encargará de la petición HTTP a la API. Es decir, aquella que nos permitirá crear un usuario con los datos proporcionados. En nuestro caso, crearemos un archivo signupservice para que se encargue de esta acción.
Ahora que hemos creado un archivo individual, te enseñaremos cómo crear usuario con JavaScript y sparREST.
¿Cómo crear usuario con JavaScript y sparREST?
Dentro de nuestro archivo SignupService.js, crearemos una clase en donde haremos peticiones HTTP con fetch. Esto nos permitirá mantener un código más limpio mientras crece nuestro proyecto.
A continuación, puedes ver las primeras líneas de código que insertamos para preparar este archivo. Allí instanciamos una clase y la exportamos, siguiendo el patrón singleton.
class SignupService {
}
export const signupService = new SignupService ( )Ahora, dentro de la clase SignupService, crearemos una función llamada createuser que recibirá los datos del usuario (es decir, un username y un password).
class SignupService {
constructor ( ) { }
createUser (username, password) {
}
}Esta función usará el método fetch para hacerle una petición a nuestra API y mandar estos datos. Sin embargo, usaremos fetch de un modo diferente, pues deberemos hacer una petición POST y fetch, por defecto, hace peticiones de tipo GET.
Cada vez que vayas a usar un método o patrón nuevo en tu proyecto, te recomendamos revisar su documentación para conocer su funcionamiento normal. En este caso, te recomendamos ir al artículo sobre el uso de fetch en la MDN. Allí podrás leer cómo suministrar opciones de petición usando la propiedad method, que nos permite definir la petición POST.
A continuación, puedes ver cómo usamos este aspecto del método fetch para hacer esta petición. Para ello, pasamos la URL de nuestra API y definimos la propiedad method con el verbo POST:
class SignupService {
constructor ( ) { }
createUser (username, password) {
fetch ('http://localhost:8000, {
method: "POST"
});
}
}Ahora que hemos insertado este método en nuestra función, debemos controlar las reacciones que tendrá nuestro proyecto a las distintas opciones. Entonces, como el método fetch devuelve una promesa, podremos usar los métodos async y await para determinar el comportamiento que sigue a esta petición.
A continuación, puedes ver cómo transformamos la función anterior a ser un método asíncrono:
async createUser (username, password) {
const response = await fetch ('http://localhost:8000
method: 'POST'
});
}Ahora, con solo las líneas anteriores, nuestra petición nos devolverá un 404. Este tipo de errores se da cuando el recurso al que estamos intentando acceder no existe. Esto sucede porque, cuando queremos crear usuario con JavaScript y sparREST, no debemos acceder a la URL base de nuestra API, sino a la URL del endpoint de creación de usuario. Es decir, aquel que termina en /auth/register.
Una vez resuelto este problema, podrás ver desde el inspector de tu navegador que la petición ahora nos devuelve un error de status 400, que quiere decir que hemos hecho una bad request a la API. Esto significa que no estamos cumpliendo el contrato de esta API.
Para lograr crear usuario con JavaScript y sparREST, debemos tener en cuenta que esta última herramienta trata con datos codificados en JSON. Entonces, deberemos aprender a enviar datos JSON con fetch.
A continuación, puedes ver cómo nos han quedado las líneas de código finales para crear usuario con JavaScript y sparREST. Allí, hemos definido un método que recibe unas variables de registro. Luego, hemos transformado estas variables en JSON para enviarlas a una API y crear nuestro usuario.
class SignupService {
constructor ( ) { }
async createUser (username, password) {
const user= {
username,
password,
};
const response = await fetch ("http://localhost: 8000/auth/register", {
method: "POST",
body: JSON.stringify (user),
headers: {
"Content type": "application/json",
},
});
}
}
export const signupService = new SignupService ( );Ahora que sabes cómo crear usuario con JavaScript y sparREST, ¡ha llegado el momento de crear tus propios proyectos con esta herramienta! Para seguir aprendiendo sobre la creación y desarrollo de todo tipo de proyectos web, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un espacio de formación intensiva donde aprenderás a desarrollar tus propias líneas de código con los lenguajes, herramientas y patrones fundamentales para este ejercicio. ¡Anímate a pedir más información y empieza a transformar tu vida!
