Quickstarters
Feature Overview
¿Cómo construir un backend para NativeScript?
47 min
introducción en este tutorial, aprenderás cómo construir un backend para nativescript utilizando back4app, una plataforma de código abierto que simplifica el desarrollo de backend para aplicaciones móviles recorreremos la integración de características esenciales de back4app—como la gestión de bases de datos, funciones de cloud code, puntos finales de api rest y graphql, autenticación de usuarios y consultas en tiempo real (consultas en vivo)—para crear un backend seguro y escalable para tus aplicaciones de nativescript también descubrirás cómo back4app reduce drásticamente el tiempo de configuración en comparación con las configuraciones manuales de servidores y bases de datos exploraremos mecanismos de seguridad avanzados, programación de tareas con cloud jobs y el uso de webhooks para conectarnos con servicios de terceros al final de esta guía, tendrás un backend flexible que aprovecha nativescript core, que impulsa las soluciones móviles multiplataforma de nativescript con esta base, estarás listo para integrar tu propia lógica personalizada o apis externas según sea necesario este será un gran paso hacia el desarrollo de aplicaciones nativescript listas para producción requisitos previos una cuenta de back4app y un nuevo proyecto de back4app comenzando con back4app https //www back4app com/docs/get started/new parse app si no tienes una cuenta, puedes crear una gratis sigue la guía anterior para preparar tu proyecto entorno básico de desarrollo de nativescript puedes configurarlo utilizando el cli de nativescript o otro flujo de trabajo preferido guía de inicio de nativescript https //docs nativescript org/environment setup node js (versión 14 o superior) instalado necesitarás node js para instalar paquetes npm y ejecutar el cli de nativescript instalando node js https //nodejs org/en/download/ familiaridad con javascript y nativescript core documentación oficial de nativescript https //docs nativescript org/ si eres nuevo en nativescript, revisa la documentación oficial o un tutorial para principiantes antes de comenzar asegúrate de tener todos estos requisitos previos en su lugar antes de comenzar tener tu proyecto de back4app configurado y tu entorno local de nativescript listo te ayudará a seguir más fácilmente paso 1 – configuración del proyecto back4app crear un nuevo proyecto el primer paso para construir tu backend de nativescript en back4app es crear un nuevo proyecto si aún no lo has hecho, sigue estos pasos inicia sesión en tu cuenta de back4app haz clic en el botón “nueva aplicación” en tu panel de control de back4app dale un nombre a tu aplicación (por ejemplo, “nativescript backend tutorial”) después de crear el proyecto, lo verás listado en tu panel de control de back4app este proyecto servirá como la base para todas las configuraciones de backend cubiertas en este tutorial conectar el sdk de parse back4app utiliza la plataforma parse para manejar tus datos, funcionalidad en tiempo real, autenticación de usuarios y más para conectar tu aplicación de nativescript a back4app, instala el parse paquete npm e inicialízalo con las credenciales que obtienes de tu panel de control de back4app recupera tus claves de parse en tu panel de control de back4app, ve a la sección “configuración de la aplicación” o “seguridad y claves” de tu aplicación busca tu id de aplicación , clave de javascript , y url del servidor parse (en el formato https //parseapi back4app com ) instalar el sdk de parse npm install parse luego, inicializa parse en un archivo de configuración o tu archivo de entrada principal (por ejemplo, app js ) por ejemplo, podrías crear un archivo llamado parseconfig js en un proyecto basado en nativescript src/parseconfig js import parse from 'parse'; // replace the placeholders with your back4app credentials parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; siempre que necesites acceder a parse en tu aplicación nativescript, simplemente importa este archivo al completar este paso, has establecido una conexión segura entre tu frontend de nativescript y el backend de back4app, simplificando las operaciones de datos paso 2 – configuración de la base de datos guardar y consultar datos con tu proyecto de back4app listo y el sdk de parse integrado, puedes guardar y consultar datos desde tu aplicación nativescript a continuación se muestra un ejemplo utilizando la parse object clase para guardar y obtener una lista de elementos // example create a task item import parse from ' /parseconfig'; async function createtaskitem(title, iscompleted) { const task = parse object extend('task'); const task = new task(); task set('title', title); task set('iscompleted', iscompleted); try { const savedtask = await task save(); console log('task saved successfully ', savedtask); return savedtask; } catch (error) { console error('error saving task ', error); } } // example query all task items async function fetchtasks() { const task = parse object extend('task'); const query = new parse query(task); try { const results = await query find(); console log('fetched task items ', results); return results; } catch (error) { console error('error fetching tasks ', error); } } también puedes usar la api rest de back4app si prefieres llamadas http directas curl x post \\ h "x parse application id your application id" \\ h "x parse rest api key your rest api key" \\ h "content type application/json" \\ d '{"title" "buy supplies", "iscompleted" false}' \\ https //parseapi back4app com/classes/task o usa graphql mutation { createtask(input { fields { title "clean the house" iscompleted false } }) { task { objectid title iscompleted } } } esta flexibilidad hace que sea conveniente construir características de backend para tus aplicaciones de nativescript a través del sdk de parse, rest o los puntos finales de la api de graphql diseño de esquema y tipos de datos por defecto, parse puede crear esquemas automáticamente sobre la marcha, o puedes definir tus clases y tipos de datos en el panel de control de back4app ve a la sección “base de datos” en tu panel de control de back4app crea una nueva clase (por ejemplo, “tarea”) y agrega columnas como título (string) y está completada (boolean) back4app soporta tipos de datos como string , number , boolean , object , date , file , pointer , array , relation , geopoint , y polygon puedes dejar que parse cree estas columnas cuando guardes un objeto por primera vez o definirlas para tener más control usar el agente ai de back4app también puede ayudarte a generar esquemas automáticamente abre el agente ai en el panel de control de tu aplicación describe tu modelo de datos deseado (por ejemplo, “por favor, crea una nueva clase de tarea para aplicaciones móviles con campos iscompleted y duedate ”) deja que el agente cree el esquema automáticamente datos relacionales si deseas datos relacionales—como un objeto categoría que apunta a múltiples tareas —usa punteros o relaciones en parse // linking a task to a category with a pointer async function createtaskforcategory(categoryobjectid, title) { const task = new parse object('task'); const categorypointer = new parse object('category'); categorypointer id = categoryobjectid; task set('title', title); task set('category', categorypointer); try { return await task save(); } catch (err) { console error('error creating task with category relationship ', err); } } // including the pointer data in a query const query = new parse query('task'); query include('category'); const taskswithcategory = await query find(); este enfoque te ayuda a obtener datos completos para una tarea y su categoría relacionada en una sola consulta consultas en vivo para actualizaciones en tiempo real, habilita consultas en vivo en configuraciones del servidor en el panel de control de back4app los desarrolladores de nativescript pueden suscribirse a cambios en una clase específica actualiza tu configuración de parse para incluir una url de servidor de consultas en vivo src/parseconfig js import parse from 'parse'; // replace the placeholders with your back4app credentials parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; parse livequeryserverurl = 'wss\ //your subdomain here b4a io'; export default parse; y luego suscríbete a eventos en tiempo real import parse from ' /parseconfig'; async function subscribetotasks(callback) { const query = new parse query('task'); const subscription = await query subscribe(); subscription on('create', (newtask) => { console log('new task created ', newtask); callback('create', newtask); }); subscription on('update', (updatedtask) => { console log('task updated ', updatedtask); callback('update', updatedtask); }); subscription on('delete', (deletedtask) => { console log('task deleted ', deletedtask); callback('delete', deletedtask); }); return subscription; } esta suscripción actualiza automáticamente su interfaz de usuario cada vez que se agrega, modifica o elimina una tarea —perfecto para aplicaciones colaborativas en tiempo real de nativescript paso 3 – aplicando seguridad con acls y clps mecanismo de seguridad de back4app back4app incorpora listas de control de acceso (acls) y permisos a nivel de clase (clps) para proteger sus datos estos modelos de seguridad le permiten controlar el acceso de lectura/escritura tanto a nivel de clase como de objeto listas de control de acceso (acls) una acl establece permisos para cada objeto por ejemplo, para dar solo al propietario acceso de lectura y escritura async function createprivatetask(title, owneruser) { const task = parse object extend('task'); const task = new task(); task set('title', title); const acl = new parse acl(owneruser); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); task setacl(acl); try { return await task save(); } catch (err) { console error('error saving private task ', err); } } esto asegura que solo el usuario especificado pueda modificar o leer el objeto permisos a nivel de clase (clps) los clps establecen los permisos predeterminados para toda una clase abre la base de datos en back4app y selecciona la clase relevante accede a los permisos a nivel de clase ajusta los permisos para el público, usuarios autenticados o roles específicos según sea necesario combinar acls y clps ofrece un modelo de seguridad sólido para aplicaciones de nativescript para más información, consulta directrices de seguridad de la aplicación https //www back4app com/docs/security/parse security paso 4 – escribir y desplegar funciones en la nube el código en la nube te permite ejecutar código javascript personalizado en el lado del servidor, por lo que no necesitas mantener la infraestructura tú mismo esto es ideal para agregar lógica avanzada o integraciones solo en el servidor en tu backend de nativescript cómo funciona normalmente colocas tu código en la nube (funciones de javascript, triggers y cualquier módulo npm requerido) en un main js archivo luego lo despliegas en back4app, y se ejecuta en el entorno de parse server sin configuración adicional del servidor ejemplo de estructura de main js const axios = require('axios'); parse cloud define('fetchexternaldata', async (request) => { const url = request params url; if (!url) { throw new error('url parameter is required'); } const response = await axios get(url); return response data; }); parse cloud beforesave('task', (request) => { const task = request object; if (!task get('title')) { throw new error('task must have a title'); } }); puedes instalar y usar paquetes npm como axios para solicitudes http este enfoque permite una amplia gama de integraciones, desde pasarelas de pago hasta apis externas, todo detrás de la seguridad de tu aplicación back4app casos de uso típicos lógica de negocios cálculos automáticos, transformaciones de datos o actualizaciones de estado validaciones de datos asegúrate de que los campos requeridos estén presentes antes de guardar triggers ejecuta código cuando se crea, actualiza o elimina datos integraciones conéctate con servicios externos para pagos, análisis o mensajería aplicación de seguridad valida los datos entrantes o los roles de usuario antes de continuar despliega tu función aquí hay una función simple que calcula la longitud del texto main js parse cloud define('calculatetextlength', async (request) => { const { text } = request params; if (!text) { throw new error('no text provided'); } return { length text length }; }); desplegando a través de https //www back4app com/docs/local development/parse cli instalar el cli curl https //raw\ githubusercontent com/back4app/parse cli/back4app/installer sh | sudo /bin/bash para windows, descarga el b4a exe https //github com/back4app/parse cli/releases/download/release 3 3 1/b4a exe archivo de la página de lanzamientos https //github com/back4app/parse cli/releases configura tu clave de cuenta b4a configure accountkey despliega tu código en la nube b4a deploy desplegando a través del panel de control ve a cloud code > functions en tu panel pega tu código de función en main js haz clic en desplegar llamando a tu función desde tu aplicación nativescript usando el sdk de parse import parse from ' /parseconfig'; async function gettextlength(text) { try { const result = await parse cloud run('calculatetextlength', { text }); console log('text length ', result length); } catch (err) { console error('error calling cloud function ', err); } } también puedes llamarlo usando rest o graphql curl x post \\ h "x parse application id your app id" \\ h "x parse rest api key your rest api key" \\ h "content type application/json" \\ d '{"text" "hello back4app"}' \\ https //parseapi back4app com/functions/calculatetextlength mutation { calculatetextlength(input { text "hello graphql" }) { result } } esto te brinda una forma flexible de integrar lógica del lado del servidor en tus aplicaciones móviles basadas en nativescript paso 5 – configurando la autenticación de usuarios autenticación de usuario en back4app back4app utiliza la clase parse user , para manejar la autenticación, que incluye el hash de contraseñas, tokens de sesión y más esto elimina gran parte de la complejidad asociada con la gestión de cuentas de usuario configuración de la autenticación de usuario en tu aplicación nativescript, puedes crear un nuevo usuario import parse from ' /parseconfig'; async function signupuser(username, password, email) { const user = new parse user(); user set('username', username); user set('password', password); user set('email', email); try { await user signup(); console log('user signed up successfully!'); } catch (error) { console error('error signing up user ', error); } } async function loginuser(username, password) { try { const user = await parse user login(username, password); console log('user logged in ', user); } catch (error) { console error('error logging in user ', error); } } un ejemplo de rest podría verse así curl x get \\ h "x parse application id your app id" \\ h "x parse rest api key your rest api key" \\ g \\ \ data urlencode 'username=alice' \\ \ data urlencode 'password=secret123' \\ https //parseapi back4app com/login gestión de sesiones después de iniciar sesión, parse asigna un token de sesión al usuario para verificar el usuario actualmente conectado const currentuser = parse user current(); if (currentuser) { console log('logged in user ', currentuser getusername()); } else { console log('no user is logged in'); } cerrar sesión es simple await parse user logout(); integración de inicio de sesión social parse también se integra con proveedores de oauth como google o facebook la configuración varía según el proveedor, así que consulta iniciar sesión con apple y otros https //www back4app com/docs/platform/sign in with apple para más detalles por ejemplo, con facebook const facebooklogin = async () => { try { const user = await parse facebookutils login('email'); console log(user existed() ? 'user logged in' 'user signed up and logged in'); } catch (error) { console error('error logging in with facebook ', error); } }; verificación de correo electrónico y restablecimiento de contraseña habilita estas funciones en tu panel de back4app navega a configuración de correo electrónico en tu aplicación de back4app habilita la verificación de correo electrónico y restablecimiento de contraseña configura tus plantillas de correo electrónico y la dirección “de” paso 6 – manejo del almacenamiento de archivos subiendo y recuperando archivos back4app soporta la gestión de archivos a través de la parse file clase en nativescript, puedes subir imágenes o documentos de manera similar import parse from ' /parseconfig'; async function uploadimage(file) { const name = file name; const parsefile = new parse file(name, file); try { const savedfile = await parsefile save(); console log('file saved ', savedfile url()); return savedfile url(); } catch (err) { console error('error uploading file ', err); } } async function createphotoobject(file) { const photo = parse object extend('photo'); const photo = new photo(); const parsefile = new parse file(file name, file); photo set('imagefile', parsefile); return await photo save(); } puedes recuperar la url del archivo desde el objeto guardado const imagefile = photo get('imagefile'); const imageurl = imagefile url(); // use imageurl in your nativescript ui components seguridad de archivos parse server te permite configurar la seguridad de la carga de archivos { "fileupload" { "enableforpublic" true, "enableforanonymoususer" true, "enableforauthenticateduser" true } } esto asegura que puedes limitar o permitir las cargas de archivos según tus preferencias de seguridad paso 7 – programando tareas con cloud jobs trabajos en la nube trabajos en la nube te ayudan a automatizar tareas rutinarias, como eliminar registros obsoletos o enviar notificaciones por ejemplo // main js parse cloud job('cleanupoldtasks', async (request) => { const task = parse object extend('task'); const query = new parse query(task); const now = new date(); const thirty days = 30 24 60 60 1000; const cutoff = new date(now thirty days); query lessthan('createdat', cutoff); try { const oldtasks = await query find({ usemasterkey true }); await parse object destroyall(oldtasks, { usemasterkey true }); return `deleted ${oldtasks length} old tasks `; } catch (err) { throw new error('cleanup error ' + err message); } }); desplegar este trabajo a través de cli o el panel de control en el panel de control de back4app > configuraciones del servidor > trabajos en segundo plano , prográmalo para que se ejecute diariamente o en un intervalo de tu elección paso 8 – integrando webhooks webhooks te permiten enviar solicitudes http a servicios externos cuando ocurren ciertos eventos en tu aplicación, como nuevos registros o registros de usuarios esto se puede usar para integrarse con slack, pasarelas de pago o plataformas de análisis ve a la configuración de webhooks en tu panel de control de back4app y selecciona agregar webhook agrega tu endpoint url (por ejemplo, https //your service com/webhook ) configura disparadores para clases o eventos específicos también puedes definir webhooks en cloud code o llamar a apis externas directamente en disparadores como beforesave o aftersave paso 9 – explorando el panel de administración de back4app el back4app admin app es una interfaz centrada en el modelo y fácil de usar para la gestión de datos ayuda a equipos o usuarios no técnicos a realizar operaciones crud, crear paneles personalizados y gestionar tareas a nivel empresarial sin necesidad de escribir código habilitando la aplicación de administración en tu app dashboard , haz clic en más > aplicación de administración habilitar aplicación de administración crea un primer usuario administrador (nombre de usuario/contraseña) esta configuración añade el b4aadminuser rol y las clases asociadas ( b4asetting , b4amenuitem , etc ) a tu esquema elige un subdominio, luego inicia sesión con tus nuevas credenciales de administrador este portal permite una rápida manipulación de datos sin salir de una interfaz gráfica, una gran solución para colaborar con miembros del equipo que pueden no estar familiarizados con la codificación conclusión siguiendo esta guía, has aprendido cómo construir un backend para nativescript utilizando back4app y creado un backend seguro para tus aplicaciones nativescript configurado una base de datos con clases, esquemas y relaciones implementado consultas en tiempo real para actualizaciones en vivo asegurado tus datos con acls y clps ampliado la funcionalidad con cloud code configurado la autenticación para el registro de usuarios, inicio de sesión y tokens de sesión gestionado cargas de archivos y recuperación a través de parse file programado cloud jobs para tareas automáticas y periódicas creado webhooks para integraciones de terceros usado el panel de administración de back4app para la gestión de datos sin código estos pasos forman una base sólida para construir aplicaciones móviles de código abierto y multiplataforma con nativescript core continúa explorando características avanzadas, incorpora más puntos finales de api o integra tu propia lógica personalizada para adaptar el backend a las necesidades exactas de tu aplicación próximos pasos escala tus aplicaciones nativescript optimizando el rendimiento, la caché y las reglas de seguridad explora la gestión avanzada de usuarios como permisos basados en roles consulta la documentación oficial de back4app para guías detalladas sobre seguridad, registros y rendimiento experimenta con integraciones del mundo real como herramientas de pagos o análisis ¡feliz codificación y disfruta del flujo de trabajo de desarrollo optimizado que back4app proporciona!