Utilisation de useParseQuery pour Apps React Native en Temps Réel

utiliser le hook useparsequery pour construire une application react native en temps réel introduction dans ce guide, vous explorerez les principales fonctionnalités de @parse/react native @parse/react native en utilisant un exemple d'application todo react native vous utiliserez le useparsequery useparsequery hook pour interroger des tâches en temps réel et stocker les résultats localement sur cette application en utilisant diverses requêtes parse, vous découvrirez comment utiliser la nouvelle bibliothèque parse dans votre projet parse react native est actuellement en version alpha la bibliothèque est en cours de test, nous vous recommandons donc 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 par e mail à community\@back4app com objectif explorer les principaux cas d'utilisation de la bibliothèque parse react native en créant une application todo prérequis pour compléter ce tutoriel, vous aurez besoin de une application créée sur back4app suivez le https //www back4app com/docs/platform/parse live query remarque suivez le https //www back4app com/docs/react native/parse sdk/real time/react hook real time pour apprendre à démarrer avec @parse/react native 1 configurer le projet initial avant de commencer, vous devrez obtenir le projet bootstrap react native que nous avons configuré comme point de départ pour ce tutoriel c'est un simple react native init react native init projet avec toutes les dépendances et styles prédéfinis pour vous permettre de vous concentrer sur l'exploration des @parse/react native @parse/react native fonctionnalités vous pouvez https //github com/templates back4app/react native todo app/archive/main zip ou cloner le projet git clone https //github com/templates back4app/react native todo app git ensuite, installez les dépendances du projet cd react native todo app \# avec yarn yarn install \# avec npm npm install pour ios, installez les pods cd ios && npx pod install dans le guide précédent, https //www back4app com/docs/react native/parse react native sdk/getting started , vous avez appris à utiliser initializeparse initializeparse pour activer la connexion avec les serveurs back4app configurez votre app id app id et javascriptkey javascriptkey dans le composant point d'entrée situé à src/index js src/index js 1 // src/index js 2 initializeparse( 3 'https //parseapi back4app com/', 4 'application id', 5 'javascript key' 6 ); allez y et exécutez le projet \# pour ios npx react native run ios \# pour android npx react native run android après cela, vous aurez réussi à configurer le projet de démarrage et l'application ressemblera à ce qui suit la structure du répertoire du projet react native todo app ├── src/ │ ├── config/ │ │ └── reactotronconfig js │ ├── images/ │ │ ├── back4app logo png │ │ └── bg jpg │ ├── components/ │ │ └── cardtodobutton/ │ │ └── index js // composant d'élément de bouton de carte │ │ └── menu/ │ │ └── index js // menu avec boutons de carte │ │ └── tasklist/ │ │ └── index js // composant de liste de tâches │ ├── pages/ │ │ └── addtodo/ │ │ └── index js // page ajouter une tâche │ │ └── learning/ │ │ └── index js // page d'apprentissage │ │ └── main/ │ │ └── index js // page principale │ │ └── shopping/ │ │ └── index js // page de shopping │ │ └── work/ │ │ └── index js // page de travail │ ├── services/ │ │ └── api js │ ├── index js // point d'entrée de l'application │ └── routes js // configuration des routes de navigation ├── editorconfig ├── eslintrc json ├── gitignore ├── babel config js ├── dependencies json ├── devdependencies json ├── index js ├── jsconfig js ├── license ├── package json └── readme md le projet initial a 4 pages principales page d'apprentissage montre les tâches qui appartiennent à la catégorie apprentissage page de shopping montre les tâches qui appartiennent à la catégorie shopping page de travail montre les tâches qui appartiennent à la catégorie travail page ajouter une tâche formulaire de base pour créer une nouvelle tâche 2 création d'une nouvelle tâche une caractéristique commune d'une application todo est de permettre aux utilisateurs de créer de nouvelles tâches pour cela, la fonction de création de tâche utilisera le sdk javascript de parse pour créer un nouvel objet parse et l'enregistrer sur back4app sur la addtodo addtodo page du projet de démarrage, vous aurez un formulaire de base avec un champ pour insérer la description de la tâche, quelques cases à cocher pour sélectionner la catégorie de la tâche et un bouton de soumission dans ce tutoriel, vous allez créer parse object parse object pour les tâches qui auront les attributs suivants consultez le guide du sdk javascript de parse https //www back4app com/docs/react native/parse sdk/react native save data pour plus d'informations sur la création d'objets parse 1 { 2 description 'simple string of task descrition', 3 author 'person creating the task', 4 completed false, // or true 5 createdat date, // automatically created by back4app 6 } maintenant, implémentez la méthode pour créer une tâche lorsque l'utilisateur clique sur soumettre au pages/addtodo/index js pages/addtodo/index js composant, implémentons la handlesubmit handlesubmit méthode 1 async function handlesubmit() { 2 try { 3 const task = new parse object extend('task'); 4 // create a new instance of that class 5 const task = new task(); 6 task set('description', description); 7 task set('category', category); 8 task set('author', 'anonymous'); 9 task set('completed', false); 10 await task save(); 11&#x9; 12 alert alert('new task created '); 13 } catch (error) { 14 console log('error while creating task ', error); 15 } 16 } après cela, vous pourrez maintenant créer des tâches n'hésitez pas à créer autant de tâches que vous le souhaitez dans les étapes suivantes, vous les interrogez 3 interroger et filtrer les tâches maintenant que vous avez créé quelques tâches, il est temps d'utiliser la bibliothèque parse react native vous allez écrire quelques requêtes et les passer au useparsequery useparsequery hook les requêtes listeront toutes les tâches non complétées dans la catégorie apprentissage c'est le premier cas d'utilisation du hook, vous allez construire une requête de récupération unique, en définissant enablelivequery\ false enablelivequery\ false , qui s'exécute lorsque le composant de la page d'apprentissage se rend le enablelivequery enablelivequery est true true par défaut, et changer à false false désactivera l'abonnement aux changements en temps réel dans le pages/learning/index js pages/learning/index js composant, écrivons notre parse query parse query 1 const task = new parse object extend('task'); 2 const query = new parse query(task); 3 query equalto('completed', false); 4 query equalto('category', 'learning'); passez la requête en tant qu'argument au useparsequery useparsequery hook const {results} = useparsequery(query, {enablelivequery false}); le code ci dessus montre une utilisation basique du hook parse le hook useparsequery est une nouvelle ressource que vous pouvez utiliser avec n'importe quel parse query utilisez https //docs parseplatform org/js/guide/#queries pour récupérer vos objets de données et le hook rendra cette expérience encore meilleure après avoir obtenu les résultats, passez les au composant tasklist pour afficher les tâches sur l'application 1 //learning/index js 2 import react, {useeffect} from 'react'; 3 import {activityindicator} from 'react native'; 4 import tasklist from ' / /components/tasklist'; 5 import parse from 'parse/react native js'; 6 import {useparsequery} from '@parse/react native'; 7&#x9; 8 const learning = () => { 9 const task = new parse object extend('task'); 10 const query = new parse query(task); 11 query equalto('completed', false); 12 query equalto('category', 'learning'); 13&#x9; 14 const {results, isloading} = useparsequery(query, {enablelivequery false}); 15&#x9; 16 if (isloading) { 17 return \<activityindicator/>; 18 } 19&#x9; 20 return \<tasklist todos={results} />; 21 }; 22&#x9; 23 export default learning; votre application devrait afficher avec succès la liste des tâches comme ceci 4 changements en temps réel la deuxième utilisation que vous allez explorer est les mises à jour en temps réel le useparsequery useparsequery hook encapsule la parse live query et fournit un support prêt à l'emploi pour les changements en temps réel en passant une requête au hook, il crée une connexion websocket pour communiquer avec le serveur back4app livequery, qui se synchronise automatiquement vous ajouterez cette fonctionnalité aux tâches de la catégorie shopping il est important de noter que live query et le sous domaine back4app doivent être activés sur votre tableau de bord back4app une fois que vous avez fait cela, ajoutez l'url de votre sous domaine à initializeparse initializeparse et les résultats du hook parse react native auront toujours des données mises à jour si vous ne configurez pas le sous domaine, useparsequery useparsequery le hook ne pourra pas récupérer les données en temps réel 1 // src/index js 2 initializeparse( 3 '\<yoursubdomain> b4a io', 4 'application id', 5 'javascript key' 6 ); dans le pages/shopping/index js pages/shopping/index js composant, écrivons notre parse query parse query 1 const task = new parse object extend('task'); 2 const query = new parse query(task); 3 query equalto('completed', false); 4 query equalto('category', 'shopping'); ensuite, passez la requête en tant qu'argument au useparsequery useparsequery hook const {results, isloading, issyncing} = useparsequery(query); notez qu'il n'est pas nécessaire d'ajouter des paramètres supplémentaires puisque les changements en temps réel sont activés par défaut après avoir obtenu les résultats, passez les au tasklist tasklist composant pour afficher les tâches sur l'application 1 import react from 'react'; 2 import {activityindicator} from 'react native'; 3 import tasklist from ' / /components/tasklist'; 4 import parse from 'parse/react native js'; 5 import {useparsequery} from '@parse/react native'; 6&#x9; 7 const shopping = () => { 8 const task = new parse object extend('task'); 9 const query = new parse query(task); 10 query equalto('completed', false); 11 query equalto('category', 'shopping'); 12&#x9; 13 const {results, isloading, issyncing} = useparsequery(query); 14&#x9; 15 if (isloading || issyncing) { 16 return \<activityindicator />; 17 } 18 return \<tasklist todos={results || \[]} />; 19 }; 20&#x9; 21 export default shopping; 5 support hors ligne le troisième cas d'utilisation pour @parse/react native @parse/react native est l'utilisation du cache hors ligne des résultats de requête cela est utile si votre application react native doit fonctionner lorsque les utilisateurs rencontrent des latences réseau ou des problèmes de connectivité internet le support hors ligne améliore la réactivité de vos applications react native et l'expérience utilisateur la bonne nouvelle est qu'aucune étape supplémentaire n'est requise ! l'approche prioritaire hors ligne et les abonnements en temps réel sont activés par défaut en résumé, l'utilisation simple du useparsequery useparsequery hook garantit que votre application mettra en cache les résultats de requête pour le support hors ligne combiné avec les abonnements live query pour lorsque votre utilisateur se reconnecte 6 limitation et tri des requêtes supposons que la liste des tâches de la catégorie travail soit trop importante pour qu'une personne puisse la gérer et que vous souhaitiez n'en montrer qu'un sous ensemble pour la journée de plus, trier par date de création sur le pages/shopping/index js pages/shopping/index js composant, écrivons notre parse query parse query 1 const task = new parse object extend('task'); 2 const query = new parse query(task); 3 query equalto('completed', false); 4 query equalto('category', 'work'); 5 query ascending('createdat'); // order by creation date 6 query limit(5); // limit to 5 tasks ensuite, passez la requête en tant qu'argument au useparsequery useparsequery hook et passez les au tasklist tasklist composant pour afficher les tâches sur l'application 1 import react from 'react'; 2 import {activityindicator} from 'react native'; 3 import parse from 'parse/react native js'; 4 import {useparsequery} from '@parse/react native'; 5 import tasklist from ' / /components/tasklist'; 6 // import { container } from ' /styles'; 7&#x9; 8 const work = () => { 9 const task = new parse object extend('task'); 10 const query = new parse query(task); 11 query equalto('completed', false); 12 query equalto('category', 'work'); 13 query ascending('createdat'); 14 query limit(5); 15&#x9; 16 const {results, isloading} = useparsequery(query, { 17 enablelivequery false, 18 }); 19&#x9; 20 if (isloading) { 21 return \<activityindicator />; 22 } 23 return \<tasklist todos={results} />; 24 }; 25&#x9; 26 export default work; 7 spécification des arguments de useparsequery vous avez utilisé @parse/react native @parse/react native pour récupérer des données de back4app avec des fonctionnalités telles que live query dans les étapes précédentes par conséquent, une explication de l'interface exportée est nécessaire le useparsequery useparsequery hook accepte un parse query parse query et un useparsequeryoptions useparsequeryoptions objet comme arguments l'objet de configuration optionnel par défaut est le suivant 1 { 2 enablelivequery true, 3 enablelocaldatastore true, 4 initialload \[] 5 } enablelivequery la fonctionnalité realtime live query est activée par défaut enablelocaldatastore active la mise en cache locale des résultats de données, la valeur par défaut est true true mais vous pouvez désactiver en réglant sur false false initialload si vous avez déjà des données chargées en mémoire, vous pouvez les définir pour montrer un aperçu des données aux utilisateurs c'est fait! à ce stade, vous avez appris à utiliser le @parse/react native @parse/react native lib en créant une application todo react native sur back4app