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 en back4app sigue el tutorial de habilitar 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 npx paquete ejecutor usando la siguiente línea de comando instala @parse/react native @parse/react native y su dependencia par parse parse en tu aplicación de react native 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 id de la app y clave de javascript clave de javascript credenciales abriendo tu app tablero tablero en sitio web de back4app https //www back4app com/ y haciendo clic en configuraciones de la app configuraciones de la app > configuraciones básicas configuraciones básicas , bajo configuraciones del servidor configuraciones del servidor tu subdominio debe estar habilitado en configuraciones de la app configuraciones de la app > configuraciones básicas configuraciones básicas > url del servidor y consulta en vivo 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 @parse/react native biblioteca exporta un useparsequery 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 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 props devueltas por el hook islive islive si true true , indica que la consulta se ha suscrito a actualizaciones en tiempo real isloading isloading si true true , la consulta está obteniendo los resultados issyncing issyncing si true true , la consulta está obteniendo resultados actualizados de los servidores de back4app results results estos son los datos devueltos de la consulta count count indica el número de objetos que coincidieron con la consulta error error cuando algo sale mal con la consulta, devuelve un error reload reload recarga los resultados de tu consulta el useparsequery useparsequery acepta cualquier parse query 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 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 @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