How to Build a Basic CRUD App with Knockout.js: A Step-by-Step Guide

descripción general en esta guía, aprenderás cómo crear una aplicación crud (crear, leer, actualizar, eliminar) completa utilizando knockout js este tutorial demuestra cómo implementar operaciones esenciales dentro de una aplicación web mientras aprovechas back4app como tu servicio backend comenzaremos configurando un proyecto de back4app titulado basic crud app knockout , estableciendo un sistema de gestión de datos confiable para tu aplicación después de eso, diseñarás un esquema de base de datos flexible definiendo colecciones y campos, ya sea manualmente o con la ayuda del agente ai de back4app, para asegurar que tu aplicación pueda manejar todas las operaciones crud de manera efectiva a continuación, utilizarás la aplicación administrativa de back4app, una herramienta fácil de usar de arrastrar y soltar, para gestionar tus colecciones con facilidad esta interfaz simplifica el proceso de ejecución de operaciones crud finalmente, integrarás tu frontend de knockout js con back4app utilizando llamadas a la api rest esta integración también cubrirá prácticas seguras de backend con controles de acceso adecuados al final de este tutorial, habrás construido una aplicación web lista para producción que soporta funcionalidad crud básica, incluye autenticación de usuarios y presenta una gestión de datos robusta puntos clave entender cómo desarrollar aplicaciones crud que gestionen datos de manera eficiente utilizando back4app ganar experiencia práctica en el diseño de un backend escalable y vincularlo con un frontend de knockout js aprender a usar una herramienta de administración sin código (back4app admin app) para ejecutar operaciones de crear, leer, actualizar y eliminar descubrir estrategias de implementación, incluyendo la contenedorización con docker, para lanzar tu aplicación web rápidamente requisitos previos antes de comenzar, asegúrate de tener una cuenta de back4app y un proyecto activo consulta introducción a back4app https //www back4app com/docs/get started/new parse app si necesitas orientación un entorno de desarrollo configurado para knockout js incluye bibliotecas a través de cdn o instala a través de npm si prefieres una configuración modular conocimientos básicos de javascript, knockout js y rest apis consulta la documentación de knockout js https //knockoutjs com/documentation/introduction html para una introducción paso 1 – inicialización del proyecto configurando tu proyecto de back4app accede a tu cuenta de back4app selecciona la opción “nueva aplicación” desde tu panel de control ingresa el nombre del proyecto basic crud app knockout y completa el proceso de configuración crear nuevo proyecto una vez creado, tu proyecto será visible en tu panel de control, formando la columna vertebral de tu configuración de backend paso 2 – creando el esquema de tu base de datos diseñando la estructura de datos para esta aplicación crud, crearás varias colecciones a continuación se presentan colecciones de muestra con campos y tipos de datos sugeridos para guiar el diseño de tu base de datos este esquema admite las operaciones crud fundamentales 1 colección de artículos campo tipo de dato detalles id objectid clave única generada automáticamente título cadena el título del artículo descripción cadena un breve resumen del artículo creado en fecha marca de tiempo cuando se crea el elemento actualizado en fecha marca de tiempo de la última actualización 2 colección de usuarios campo tipo de dato detalles id objectid identificador único generado automáticamente nombre de usuario cadena identificador único para cada usuario correo electrónico cadena dirección de correo electrónico única del usuario hash de contraseña cadena hash seguro de la contraseña del usuario creado en fecha marca de tiempo de creación de cuenta actualizado en fecha marca de tiempo para la última actualización de la cuenta puedes crear manualmente estas colecciones en el panel de control de back4app añadiendo una nueva clase para cada colección y definiendo los campos crear nueva clase define tus campos eligiendo un tipo de dato, nombrando el campo, estableciendo valores predeterminados y marcando los campos requeridos crear columna uso del agente ai de back4app para la automatización de esquemas el agente ai de back4app simplifica la generación de esquemas directamente desde tu panel de control puede crear automáticamente colecciones y campos basados en tu descripción pasos para usar el agente ai lanza el agente ai accede a él a través de tu panel de control de back4app o configuraciones del proyecto detalla tu modelo de datos pega un aviso descriptivo enumerando tus colecciones y campos requeridos revisa y aplica el agente propondrá un esquema revisa y confirma las sugerencias para integrarlas en tu proyecto ejemplo de aviso create the following collections in my back4app project 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 proceso ahorra tiempo y asegura un esquema consistente y optimizado para tu aplicación paso 3 – activar la aplicación de administrador y gestionar operaciones crud descripción de la interfaz de administración la aplicación de administración de back4app proporciona una solución sin código para gestionar tus datos de backend su intuitiva interfaz de arrastrar y soltar permite realizar operaciones crud sin esfuerzo cómo activar la aplicación de administración ve al menú “más” en tu panel de control de back4app selecciona “aplicación de administración” y haz clic en “habilitar aplicación de administración ” configura tus credenciales de administrador creando el primer usuario administrador, lo que también configura roles como b4aadminuser y colecciones de sistema esenciales habilitar aplicación de administración después de la activación, inicia sesión en la aplicación de administración para comenzar la gestión de datos panel de administración de la aplicación uso de la interfaz de administración para crud dentro de la aplicación de administración puedes agregar registros haz clic en el botón “agregar registro” en una colección (por ejemplo, artículos) para crear nuevas entradas ver/modificar registros selecciona un registro para inspeccionar sus detalles o actualizar campos eliminar registros elimina cualquier entrada que ya no sea necesaria esta interfaz simplificada mejora la usabilidad y acelera la gestión de tus datos paso 4 – conectando knockout js con back4app con tu backend en su lugar, es hora de integrar tu frontend de knockout js utilizando llamadas a la api rest uso de la api rest para operaciones crud dado que el sdk de parse no se utiliza típicamente con knockout js, realizarás llamadas a la api directamente a continuación se presentan ejemplos de cómo manejar tareas crud ejemplo de obtención de elementos // example rest call to retrieve items function fetchitems() { fetch('https //parseapi back4app com/classes/items', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }) then(response => response json()) then(data => { viewmodel items(data results); }) catch(error => console error('error retrieving items ', error)); } fetchitems(); ejemplo de viewmodel de knockout js a continuación se presenta un ejemplo de viewmodel para gestionar tus elementos function appviewmodel() { var self = this; self items = ko observablearray(\[]); self newtitle = ko observable(""); self newdescription = ko observable(""); self additem = function() { var newitem = { title self newtitle(), description self newdescription() }; fetch('https //parseapi back4app com/classes/items', { 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(newitem) }) then(response => response json()) then(data => { self items push(data); self newtitle(""); self newdescription(""); }) catch(error => console error('error adding item ', error)); }; self deleteitem = function(item) { fetch('https //parseapi back4app com/classes/items/' + item objectid, { method 'delete', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }) then(() => { self items remove(item); }) catch(error => console error('error deleting item ', error)); }; // additional methods for update and read operations can be added similarly } // activate knockout js ko applybindings(new appviewmodel()); este viewmodel integra llamadas a la api para crear y eliminar elementos mientras gestiona el estado con observables de knockout js paso 5 – asegurando tu backend listas de control de acceso (acls) protege tus datos asignando acls a cada objeto por ejemplo, para hacer que un elemento sea accesible solo para su creador function createsecureitem(itemdata, owneruserid) { var newitem = { title itemdata title, description itemdata description, acl { " " { "read" false, "write" false }, \[owneruserid] { "read" true, "write" true } } }; fetch('https //parseapi back4app com/classes/items', { 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(newitem) }) then(response => response json()) then(data => console log('secure item created ', data)) catch(error => console error('error creating item ', error)); } permisos a nivel de clase (clps) dentro del panel de control de back4app, establece clps para cada colección para asegurar que solo los usuarios autenticados o autorizados puedan acceder a información sensible paso 6 – implementación de la autenticación de usuarios configuración de cuentas de usuario back4app utiliza una clase de usuario para gestionar la autenticación en tu aplicación knockout js, maneja el registro y el inicio de sesión de usuarios utilizando llamadas a la api rest ejemplo registro de usuario function registeruser(username, password, email) { var user = { username username, password password, email email }; fetch('https //parseapi back4app com/users', { 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(user) }) then(response => response json()) then(data => alert('registration successful!')) catch(error => alert('registration error ' + error message)); } se puede seguir un enfoque similar para el inicio de sesión de usuarios y la gestión de sesiones funciones adicionales como la verificación de correo electrónico y los restablecimientos de contraseña se pueden configurar a través de back4app paso 7 – desplegando tu frontend de knockout js usando despliegue web la función de despliegue web de back4app te permite alojar tu frontend de knockout js sin esfuerzo al vincular tu repositorio de github sigue estos pasos 7 1 construye tus archivos de producción abre el directorio de tu proyecto en una terminal ejecuta tu proceso de construcción si estás usando una herramienta de construcción como webpack, ejecuta el comando apropiado (por ejemplo, npm run build ) para compilar tus activos confirma la construcción asegúrate de que tu carpeta de construcción contenga un index html y todos los activos estáticos requeridos 7 2 organiza y commitea tu código en github tu repositorio debe incluir todos los archivos fuente para tu frontend de knockout js una estructura de ejemplo podría ser basic crud app knockout frontend/ ├── node modules/ ├── public/ │ └── index html ├── src/ │ ├── index js │ ├── appviewmodel js │ └── styles css ├── package json └── readme md archivo de ejemplo src/appviewmodel js function appviewmodel() { var self = this; self items = ko observablearray(\[]); self newtitle = ko observable(""); self newdescription = ko observable(""); self additem = function() { var itemdata = { title self newtitle(), description self newdescription() }; fetch('https //parseapi back4app com/classes/items', { 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(itemdata) }) then(response => response json()) then(data => { self items push(data); self newtitle(""); self newdescription(""); }) catch(error => console error('error adding item ', error)); }; // additional crud methods (update, delete) can be defined similarly } // apply knockout bindings ko applybindings(new appviewmodel()); comitear y subir código a github inicializa git (si no se ha hecho ya) git init prepara tus archivos git add confirma tus cambios git commit m "confirmación inicial para el frontend de knockout js" crea un repositorio en github (por ejemplo, basic crud app knockout frontend ) envía tu código git remote add origin https //github com/tu nombre de usuario/basic crud app knockout frontend git git push u origin main 7 3 vinculando tu repositorio de github con el despliegue web accede a la función de despliegue web en tu panel de control de back4app, selecciona tu proyecto (basic crud app knockout) y haz clic en despliegue web conéctate a github sigue las instrucciones para integrar tu cuenta de github elige tu repositorio y rama selecciona tu repositorio (por ejemplo, basic crud app knockout frontend ) y la rama (por ejemplo, main ) que contiene tu código 7 4 configuraciones de despliegue comando de construcción si tu repositorio no incluye una carpeta preconstruida, especifica el comando de construcción (por ejemplo, npm run build ) directorio de salida establece esto en la carpeta que contiene tus archivos estáticos (por ejemplo, build o public ) variables de entorno agrega cualquier variable de entorno requerida, como claves de api 7 5 contenerizando tu aplicación con docker (opcional) si deseas usar docker, incluye un dockerfile en tu repositorio # use an official node image for building from node 16 alpine as build \# set working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy source code and build the app copy run npm run build \# use nginx to serve the static files from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 7 6 desplegando tu aplicación haz clic en el botón desplegar después de configurar los ajustes, inicia el despliegue monitorea el proceso back4app buscará tu código, lo construirá (si es necesario) y desplegará tu aplicación en contenedor accede a tu aplicación una vez completado, back4app proporcionará una url para acceder a tu aplicación knockout js 7 7 probando el despliegue abre la url proporcionada verifica si tu aplicación se carga correctamente ejecuta pruebas asegúrate de que todas las rutas y activos (css, js, imágenes) estén funcionando depura si es necesario utiliza herramientas de desarrollador para inspeccionar cualquier error y consulta los registros de despliegue de back4app paso 8 – conclusión y direcciones futuras ¡bien hecho! has construido con éxito una aplicación crud básica utilizando knockout js y back4app has configurado un proyecto llamado basic crud app knockout , creado colecciones detalladas para items y users, y gestionado tus datos a través de la admin app además, integraste tu frontend de knockout js con tu backend utilizando llamadas a la api rest e implementaste controles de acceso seguros próximos pasos expande tu frontend mejora tu aplicación con características como vistas detalladas de los elementos, capacidades de búsqueda o actualizaciones en vivo agrega lógica avanzada en el backend explora el uso de cloud functions o la integración de servicios de terceros profundiza más consulta la documentación de back4app https //www back4app com/docs para una mayor optimización e integraciones avanzadas al seguir este tutorial, ahora tienes el conocimiento para construir una aplicación crud robusta y escalable con knockout js utilizando back4app ¡feliz codificación!