React Hook para Actualizaciones en Tiempo Real con Parse

10 min

comenzando con el gancho de react para actualizaciones en tiempo real usando parse introducción ¡bienvenido a parse react native lib! en esta guía, aprenderás qué es la biblioteca parse react, cómo instalarla y comenzar a usarla en tu proyecto de react native motivación la forma más fácil de integrar parse/back4app en tu proyecto basado en javascript es a través de la parse javascript sdk https //www npmjs com/package/parse esta biblioteca funciona en múltiples entornos de javascript como nodejs, reactjs, vuejs, angularjs, react native, y te da acceso a las características de back4app el objetivo de parse react native es hacer que esta experiencia sea aún mejor para los desarrolladores de react native al ofrecer una capa ligera y fácil de usar que proporciona una configuración mínima, reutilización de código y optimizaciones nativas para android e ios usar este paquete asegurará que elementos como la configuración de credenciales, solicitudes http, sincronización en tiempo real, interacción offline first estén automáticamente disponibles para tu aplicación de react native la biblioteca está escrita completamente en typescript, sobre parse javascript sdk https //www npmjs com/package/parse , y actualmente está en la versión alpha en esta guía inicial, instalarás y configurarás la biblioteca @parse/react native en tu proyecto de react native parse react native está actualmente en la versión alpha la biblioteca está en pruebas, por lo que recomendamos proceder con precaución tu retroalimentación es muy apreciada, así que siéntete libre de usar la biblioteca y enviarnos tus preguntas e impresiones iniciales enviando un correo a community\@back4app com requisitos previos para completar este tutorial, necesitarás una aplicación creada https //www back4app com/docs/get started/new parse app en back4app sigue el tutorial de habilitar live query https //www back4app com/docs/platform/parse live query npm https //www npmjs com/get npm?utm source=house\&utm medium=homepage\&utm campaign=free%20orgs\&utm term=install%20npm o yarn instalados npx https //www npmjs com/package/npx paquete ejecutor instalado 1 instalación si no tienes una aplicación de react native, entonces adelante y crea un nuevo proyecto con \npx\ paquete ejecutor usando la siguiente línea de comando npx react native init startwithparsern instala \@parse/react native\ y su dependencia par \parse\ en tu aplicación de react native \# usando yarn yarn add @parse/react native parse \# usando npm npm install save @parse/react native parse 2 configuración de la aplicación para permitir que la aplicación se conecte a los servidores de back4app de manera segura, debes proporcionar al sdk de javascript de parse las credenciales de la aplicación 1 //in your app js 2 import { initializeparse } from '@parse/react native'; 3	 4 initializeparse( 5 'https //your subdomain b4a io/', 6 'application id', 7 'javascript key' 8 ); puedes encontrar tu \id de la app\ y \clave de javascript\ credenciales abriendo tu app \tablero\ en sitio web de back4app https //www back4app com/ y haciendo clic en \configuraciones de la app\ > \configuraciones básicas\ , bajo \configuraciones del servidor\ tu subdominio debe estar habilitado en \configuraciones de la app\ > \configuraciones básicas\ > \url del servidor y consulta en vivo\ para más información, por favor revisa esta guía aquí https //www back4app com/docs/platform/parse live query 3 creando tu primera consulta a continuación, construirás tu primera consulta y la mostrarás en tu app la \@parse/react native\ biblioteca exporta un \useparsequery\ hook, así que no pierdes tiempo investigando cómo implementar características como soporte offline, cambios en tiempo real, y así sucesivamente se necesita un \parse query\ y devuelve un objeto con algunas propiedades que puedes usar para acceder a los datos devueltos por las consultas 1 // in your app js 2	 3 import react from 'react'; 4 import { activityindicator, flatlist, view,text } from 'react native'; 5 import { initializeparse, useparsequery } from '@parse/react native'; 6	 7 // remember to call initializeparse with your credentials before using useparsequery 8 initializeparse( 9 'https //your subdomain b4a io/', 10 'application id', 11 'javascript key' 12 ); 13	 14 export default function app() { 15 const parsequery = new parse query('todo'); 16 const { 17 islive, 18 isloading, 19 issyncing, 20 results, 21 count, 22 error, 23 reload 24 } = useparsequery(parsequery); 25	 26 if (isloading) { 27 return \<activityindicator/>; 28 } 29	 30 return ( 31 \<flatlist 32 data={results} 33 renderitem={({item}) => ( 34 \<view 35 style={ { 36 height 70, 37 flex 1, 38 alignitems 'center', 39 justifycontent 'center', 40 } }> 41 \<text>task {item get('title')}\</text> 42 \</view> 43 )} 44 />); 45 } al pasar una consulta al hook, primero buscará resultados en caché que pueda haber almacenado luego, crea una conexión websocket para comunicarse con el servidor back4app livequery, que se sincroniza automáticamente en otras palabras, el enfoque offline first y los cambios en tiempo real están habilitados por defecto para verificar el estado de la consulta, utiliza las \props\ devueltas por el hook \islive\ si \true\ , indica que la consulta se ha suscrito a actualizaciones en tiempo real \isloading\ si \true\ , la consulta está obteniendo los resultados \issyncing\ si \true\ , la consulta está obteniendo resultados actualizados de los servidores de back4app \results\ estos son los datos devueltos de la consulta \count\ indica el número de objetos que coincidieron con la consulta \error\ cuando algo sale mal con la consulta, devuelve un error \reload\ recarga los resultados de tu consulta el \useparsequery\ acepta cualquier \parse query\ , y puedes ver la documentación completa https //github com/neon bindings/examples/blob/master/thread count/native/src/lib rs con ejemplos sobre consultas de parse 4 prueba el app hook ahora deberías poder ejecutar tu aplicación react native y ver los resultados \# en android npx react native run android \# en ios npx react native run ios ten en cuenta que debes agregar algunos datos a tu proyecto de back4app para ver algunos elementos en tu aplicación ¡está hecho! en este punto, has instalado \@parse/react native\ en tu proyecto, configurado las conexiones con back4app y escrito tu primera consulta en la siguiente guía, verás una de las principales características de esta biblioteca y cómo usarla continuemos a “cambios en tiempo real” https //reactnavigation org/docs/1 x/hello react navigation para comenzar a escribir algunas consultas más