Intégration du Hook Parse React pour des mises à jour temps réel

commencer avec le hook parse react pour des mises à jour en temps réel utilisant parse introduction la manière la plus simple d'intégrer parse/back4app dans votre projet basé sur javascript est à travers le parse javascript sdk cette bibliothèque fonctionne sur plusieurs environnements javascript tels que nodejs, reactjs, vuejs, angularjs, react native, et vous donne accès aux fonctionnalités de back4app l'objectif du hook parse react est d'améliorer encore cette expérience pour les développeurs reactjs en fournissant une couche légère et facile à utiliser qui offre une configuration minimale et une réutilisabilité du code utiliser ce package garantira que des éléments comme la configuration des identifiants, les requêtes http, la synchronisation en temps réel, et l'interaction hors ligne sont automatiquement disponibles pour votre application react la bibliothèque est entièrement écrite en typescript, sur le parse javascript sdk , et est actuellement en version alpha dans ce guide initial, vous allez installer et configurer la @parse/react @parse/react bibliothèque sur votre projet react @parse/react @parse/react est actuellement en version alpha la bibliothèque est en phase de test, donc nous recommandons de procéder avec prudence vos retours sont très appréciés, n'hésitez pas à utiliser la bibliothèque et à nous envoyer vos questions et premières impressions en envoyant un email à community\@back4app com prérequis pour compléter ce tutoriel, vous aurez besoin de une application créée sur back4app; suivez le tutoriel activer live query npm ou yarn installés; npx exécuteur de package installé 1 installation installez @parse/react @parse/react et sa dépendance parente parse parse dans votre application react 2 configuration de l'application pour permettre à l'application de se connecter aux serveurs back4app de manière sécurisée, vous devez fournir au sdk javascript parse les identifiants de l'application dans votre app js app js (ou app tsx app tsx ) fichier n'oubliez pas d'utiliser votre sous domaine back4app créé lorsque vous avez activé votre application pour effectuer des requêtes en direct app js or app tsx 1 import { initializeparse } from '@parse/react'; 2&#x9; 3 initializeparse( 4 'your back4app subdomain', // e g your app name b4a io 5 'your application id', 6 'your javascript key' 7 ); notez que la initializeparse initializeparse méthode remplace la parse initialize parse initialize habituelle vous pouvez trouver votre id d'app id d'app et clé javascript clé javascript en ouvrant votre app tableau de bord tableau de bord à site web back4app https //www back4app com/ et en cliquant sur paramètres principaux paramètres principaux , sous paramètres du serveur paramètres du serveur 3 créer votre première requête ensuite, vous allez construire votre première requête et l'afficher dans votre application la @parse/react @parse/react bibliothèque exporte un useparsequery useparsequery hook, donc vous n'avez pas besoin de perdre du temps à chercher comment implémenter des fonctionnalités comme le support hors ligne, les changements en temps réel, etc il prend un parse query parse query et renvoie un objet avec certaines propriétés que vous pouvez utiliser pour accéder aux données retournées par les requêtes app js or app tsx 1 import react from 'react'; 2 import parse from 'parse'; 3 import { initializeparse, useparsequery } from '@parse/react'; 4&#x9; 5 initializeparse( 6 'your back4app subdomain', // e g your app name b4a io 7 'your application id', 8 'your javascript key' 9 ); 10&#x9; 11 export default function app() { 12 //make sure your class is enabled for real time notifications (live query) checking the menu > app settings > server settings > server url and live query 13 const parsequery = new parse query('your class name here'); 14 const { 15 islive, 16 isloading, 17 issyncing, 18 results, 19 count, 20 error, 21 reload 22 } = useparsequery(parsequery); 23&#x9; 24 return ( 25 \<div> 26 {isloading && ( 27 \<p>loading \</p> 28 )} 29 {islive && ( 30 \<p>live!\</p> 31 )} 32 {issyncing && ( 33 \<p>syncing \</p> 34 )} 35 {results && ( 36 \<ul> 37 {results map(result => ( 38 \<li key={result id}> 39 {result get('class column name here')} 40 \</li> 41 ))} 42 \</ul> 43 )} 44 \<p>{count}\</p> 45 {error && ( 46 \<p>{error message}\</p> 47 )} 48 \<button 49 onclick={reload} 50 > 51 reload 52 \</button> 53 \</div> 54 ); 55 } lors du passage d'une requête au hook, il recherchera d'abord les résultats mis en cache qu'il pourrait avoir stockés ensuite, il crée une connexion websocket pour communiquer avec le serveur livequery de back4app, qui se synchronise automatiquement en d'autres termes, l'approche hors ligne d'abord et les changements en temps réel sont activés par défaut pour vérifier l'état de la requête, utilisez les props props renvoyés par le hook islive islive si true true , cela indique que la requête a souscrit à des mises à jour en temps réel isloading isloading si true true , la requête est en train de récupérer les résultats issyncing issyncing si true true , la requête obtient des résultats mis à jour des serveurs back4app results results ce sont les données renvoyées par la requête count count indique le nombre d'objets qui ont correspondu à la requête error error lorsque quelque chose ne va pas avec la requête, elle renvoie une erreur reload reload rechargez les résultats de votre requête vous pouvez voir la documentation complète pour plus de détails sur la façon de configurer et d'utiliser la @parse/react @parse/react bibliothèque 4 tester le hook de l'app maintenant, vous devriez être en mesure de lancer votre application react et de voir les résultats gardez à l'esprit que vous devez ajouter des données à votre projet back4app pour voir des éléments dans votre application c'est fait! à ce stade, vous avez installé @parse/react @parse/react sur votre projet, configuré les connexions avec back4app, et écrit votre première requête dans le prochain guide, vous verrez l'une des principales fonctionnalités de cette bibliothèque, comment l'utiliser en créant une application de chat en direct