How to Develop a CRUD Application with Deno? A Comprehensive Guide

descripción general esta guía demuestra cómo crear una aplicación crud simple (crear, leer, actualizar, eliminar) utilizando deno aprovecharemos back4app como nuestra plataforma de gestión de backend, configurándola para operar como una solución de base de datos confiable y utilizaremos el enfoque de api para interactuar con nuestros servicios de backend en este tutorial, usted configurar un proyecto de back4app llamado basic crud app deno diseñar y configurar su esquema de base de datos con colecciones y campos adaptados para operaciones crud utilizar la aplicación de administración de back4app para gestionar sus colecciones a través de una interfaz intuitiva de arrastrar y soltar conectar su frontend de deno con back4app utilizando llamadas rest/graphql asegurar su backend con medidas de control de acceso robustas al final de esta guía, habrá construido una aplicación web lista para producción que soporta operaciones de datos esenciales y autenticación de usuarios perspectivas esenciales dominar las funcionalidades crud para manejar datos de manera eficiente aprender a diseñar un backend escalable integrado con un frontend basado en deno utilizar la aplicación de administración de back4app para una gestión de datos sin problemas descubrir estrategias de implementación, incluyendo la contenedorización con docker requisitos previos antes de comenzar, asegúrate de tener una cuenta de back4app y un proyecto inicializado consulta introducción a back4app https //www back4app com/docs/get started/new parse app si es necesario una configuración de desarrollo de deno asegúrate de que deno esté instalado y actualizado (se recomienda la versión 1 10+) familiaridad con javascript/typescript, deno y conceptos de api rest consulta el manual de deno https //deno land/manual para más información paso 1 – inicializando tu proyecto lanzando un nuevo proyecto de back4app inicia sesión en tu cuenta de back4app haz clic en el botón “nueva app” en tu panel de control nombra tu proyecto basic crud app deno y sigue las instrucciones en pantalla crear nuevo proyecto después de que se cree el proyecto, será visible en su panel de control, sentando las bases para su configuración de backend paso 2 – creando el esquema de la base de datos estructurando su modelo de datos para esta aplicación crud, definirá múltiples colecciones a continuación se presentan colecciones de ejemplo con campos sugeridos para facilitar las operaciones básicas 1\ colección artículos esta colección contiene detalles para cada artículo campo tipo propósito id objectid clave primaria generada automáticamente título cadena nombre del artículo descripción cadena resumen breve del artículo creado en fecha marca de tiempo de cuando se agregó el elemento actualizado en fecha marca de tiempo para la última actualización 2\ colección usuarios esta colección almacena perfiles de usuario y datos de autenticación campo tipo propósito id objectid clave primaria generada automáticamente nombre de usuario cadena identificador único para el usuario correo electrónico cadena la dirección de correo electrónico única del usuario hash de contraseña cadena contraseña hash segura creado en fecha marca de tiempo de creación de la cuenta actualizado en fecha última marca de tiempo actualizada puedes crear manualmente estas colecciones en el panel de control de back4app estableciendo una nueva clase para cada una y añadiendo columnas para definir cada campo crear nueva clase también puedes agregar campos seleccionando su tipo, nombrándolos, estableciendo valores predeterminados y marcándolos como obligatorios crear columna empleando el agente ai de back4app para la creación de esquemas el agente ai de back4app simplifica la generación de esquemas al permitirte ingresar un aviso descriptivo, que luego crea automáticamente las colecciones y campos requeridos pasos para usar el agente ai accede al agente ai abre tu panel de back4app y localiza la opción del agente ai ingresa la descripción de tu modelo de datos proporciona un aviso detallado enumerando tus colecciones y campos revisa y aplica inspecciona las sugerencias de esquema generadas e implementa en tu proyecto ejemplo de aviso create the following collections in my back4app application 1\) collection items \ fields \ id objectid (auto generated) \ title string \ description string \ created at date (auto generated) \ updated at date (auto updated) 2\) collection users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto generated) \ updated at date (auto updated) este enfoque asegura consistencia y eficiencia en la configuración de tu esquema de backend paso 3 – activando la interfaz de administrador y funciones crud descripción general de la interfaz de administrador la aplicación de administrador de back4app ofrece una interfaz sin código para manejar tus datos de backend su diseño intuitivo de arrastrar y soltar facilita la gestión de operaciones crud activando la aplicación de administrador ve al menú “más” en tu panel de back4app selecciona “admin app” y haz clic en “habilitar admin app ” configura tus credenciales de administrador creando un usuario administrador inicial, que también configura roles (por ejemplo, b4aadminuser ) y colecciones del sistema habilitar admin app una vez activado, inicia sesión en la admin app para gestionar tus colecciones sin esfuerzo panel de admin app gestionando operaciones crud a través de la admin app en la admin app, puedes agregar registros haz clic en “agregar registro” en cualquier colección (por ejemplo, artículos) para crear nuevas entradas ver/editar registros selecciona registros para inspeccionar o modificar detalles eliminar registros elimina entradas que ya no son necesarias esta herramienta sencilla agiliza el proceso de realizar operaciones básicas de datos paso 4 – conectando deno con back4app con tu backend configurado, es hora de vincular tu frontend de deno usando apis rest o graphql opción usando llamadas a la api rest/graphql confiamos en llamadas a la api para interactuar con back4app ejemplo recuperando datos a través de rest en deno crea un módulo (por ejemplo, fetchitems ts ) con el siguiente código const application id = "your application id"; const rest api key = "your rest api key"; const server url = "https //parseapi back4app com/classes/items"; export async function fetchitems() { try { const response = await fetch(server url, { headers { "x parse application id" application id, "x parse rest api key" rest api key, }, }); const data = await response json(); console log("retrieved items ", data results); } catch (error) { console error("error retrieving items ", error); } } fetchitems(); integra tales llamadas a la api en tu aplicación deno según sea necesario paso 5 – fortaleciendo la seguridad de tu backend implementación de listas de control de acceso (acls) protege tus datos asignando acls a cada objeto por ejemplo, para asegurar que un elemento sea privado async function createprivateitem(itemdata { title string; description string }, ownertoken string) { const server url = "https //parseapi back4app com/classes/items"; const response = await fetch(server url, { method "post", headers { "content type" "application/json", "x parse application id" "your application id", "x parse rest api key" "your rest api key", "x parse session token" ownertoken, }, body json stringify({ title itemdata title, description itemdata description, acl { " " { read false, write false }, \[ownertoken] { read true, write true } } }), }); const result = await response json(); console log("private item created ", result); } configurando permisos a nivel de clase (clps) dentro del panel de control de back4app, ajusta los clps para cada colección para definir políticas de acceso predeterminadas, asegurando que solo los usuarios autenticados o autorizados puedan acceder o modificar datos sensibles paso 6 – gestión de la autenticación de usuarios creando cuentas de usuario back4app utiliza la clase de usuario de parse para la autenticación en tu aplicación deno, gestiona el registro y el inicio de sesión de usuarios a través de llamadas a la api rest ejemplo registro de usuario en deno async function registeruser(username string, password string, email string) { const server url = "https //parseapi back4app com/users"; try { const response = await fetch(server url, { method "post", headers { "content type" "application/json", "x parse application id" "your application id", "x parse rest api key" "your rest api key" }, body json stringify({ username, password, email }) }); const data = await response json(); console log("user registered ", data); } catch (error) { console error("registration error ", error); } } registeruser("newuser", "securepassword", "user\@example com"); este enfoque también se puede aplicar a la gestión de inicio de sesión y sesiones paso 7 – desplegando tu frontend de deno con despliegue web la función de despliegue web de back4app te permite alojar tu frontend basado en deno desplegando código directamente desde un repositorio de github 7 1 – construyendo tu versión de producción abre tu directorio de proyecto en la terminal ejecuta el comando de construcción por ejemplo, si usas un empaquetador como esbuild deno run allow read allow write build script ts confirma la salida de la construcción asegúrate de que el directorio de salida (por ejemplo, dist ) contenga los archivos estáticos necesarios como index html , javascript empaquetado, css e imágenes 7 2 – organizando y comprometiendo tu código tu repositorio debe incluir todos los archivos fuente para tu frontend de deno una estructura de ejemplo podría ser basic crud app deno/ ├── deps ts ├── controllers/ ├── public/ │ └── index html ├── routes/ ├── src/ │ ├── app ts │ └── fetchitems ts ├── dockerfile ├── build script ts └── readme md archivo de ejemplo deps ts export { serve } from "https //deno land/std\@0 140 0/http/server ts"; archivo de ejemplo src/app ts import { serve } from " /deps ts"; import { fetchitems } from " /fetchitems ts"; serve(async (req) => { const { pathname } = new url(req url); if (pathname === "/api/items") { const items = await fetchitems(); return new response(json stringify(items), { headers { "content type" "application/json" }, }); } return new response(await deno readtextfile(" /public/index html"), { headers { "content type" "text/html" }, }); }); comprometiendo tu código a github inicializa git git init prepara todos los archivos git add confirma tus cambios git commit m "compromiso inicial para el frontend crud de deno" empuja a github crea un repositorio (por ejemplo, basic crud app deno ) y empuja git remote add origin https //github com/your username/basic crud app deno git git push u origin main 7 3 – vinculando github con la implementación web de back4app inicia sesión en back4app y navega a tu proyecto haz clic en la función de implementación web conecta tu cuenta de github siguiendo las indicaciones selecciona tu repositorio y rama (por ejemplo, main ) que contiene tu código deno 7 4 – configurando la configuración de implementación especificar comando de construcción si no existe una carpeta dist preconstruida, establece el comando (por ejemplo, deno run allow read allow write build script ts ) directorio de salida define la carpeta de salida, como dist variables de entorno agrega cualquier variable de entorno necesaria (por ejemplo, claves api) 7 5 – dockerizando tu aplicación deno para desplegar con docker, incluye un dockerfile en tu proyecto \# use the official deno image from denoland/deno\ alpine 1 25 0 \# set the working directory workdir /app \# cache dependencies copy deps ts run deno cache deps ts \# copy the application code copy \# expose port 8000 expose 8000 \# run the application cmd \["run", " allow net", " allow read", "src/app ts"] elige la opción de despliegue de docker en back4app si prefieres la contenedorización 7 6 – lanzando tu aplicación iniciar despliegue haz clic en el desplegar botón en tu panel de back4app monitorea el proceso back4app obtendrá tu código, ejecutará los pasos de construcción y desplegará tu aplicación accede a tu sitio después del despliegue, se proporcionará una url donde tu aplicación deno estará activa 7 7 – confirmando el éxito del despliegue visita la url proporcionada abre la url en tu navegador prueba tu aplicación asegúrate de que todas las rutas, activos estáticos y puntos finales de api funcionen correctamente soluciona problemas si aparecen problemas, consulta los registros de despliegue y verifica tu configuración paso 8 – conclusiones y direcciones futuras ¡felicidades! has construido con éxito una aplicación crud básica utilizando deno con back4app como tu backend configuraste el proyecto basic crud app deno , estructuraste tu base de datos, gestionaste datos a través de la aplicación de administración, conectaste tu frontend de deno a través de llamadas api y aseguraste tus datos con acls y clps mejoras futuras expandir el frontend agregar características como vistas detalladas, filtros de búsqueda o actualizaciones en tiempo real lógica avanzada de backend integrar funciones en la nube o integraciones adicionales de api profundizar en la seguridad explorar el acceso basado en roles y medidas de autenticación adicionales para más detalles, consulta la documentación de back4app https //www back4app com/docs y explora recursos adicionales ¡feliz codificación y disfruta construyendo tu aplicación crud escalable en deno!