Opérations CRUD avec JavaScript dans un Environnement Sans Serveur
Cette section explique comment implémenter les opérations CRUD (Créer, Lire, Mettre à jour et Supprimer) dans un environnement JavaScript via Back4App. Elle fournit également des extraits de code et un environnement en ligne pour exécuter et tester votre code sans configuration locale.
Voir plus sur le SDK Parse à Référence API du SDK JavaScript Parse et documentation open source de Parse pour le SDK JavaScript.
Il n'y a pas de requis supplémentaires autres que d'avoir des connaissances de base en JavaScript. Optionnel : Pour compléter ce tutoriel en utilisant votre propre application, vous aurez besoin de :
- Une application créée et configurée pour JavaScript sur Back4App.
- Remarque : Suivez le tutoriel d'installation du SDK Parse JavaScript pour apprendre comment faire cela.
Ce guide utilise la JSbin plateforme comme éditeur de code. C’est très facile à utiliser, il vous suffit d’ouvrir sa page principale et de cliquer sur les HTML, JavaScript et Console boutons:
La première étape pour commencer à coder est d’inclure l’API Parse et d’ajouter les clés de votre application.
Pour ce tutoriel, une application Back4App publique a été créée afin que vous puissiez vérifier vos modifications sur la base de données sans avoir à créer votre propre application.
Optionnel : Pour vérifier la base de données Parse pour cet exemple, vous devez créer votre propre application et accéder à l’ Interface de gestion Parse option.
Pour inclure l’API Parse dans votre application, ajoutez la ligne de code suivante à l’intérieur de la HTML’s head tag:
Ajoutez ensuite vos identifiants au début du JavaScript fichier. Les clés par défaut sont celles liées à notre application publique.
Dans ce tutoriel, nous allons construire les Opérations CRUD basées sur une classe Pet qui a des champs de nom et d'âge, où le nom est une chaîne et l'âge est un nombre. Pour cela, le code doit commencer par créer une sous-classe de la classe Pet afin qu'elle puisse être utilisée plus tard dans nos fonctions, comme montré ci-dessous:
Toutes les opérations de base nécessiteront que l'utilisateur indique quel est le nom du Pet souhaité. Ainsi, créez une variable globale “textName”. C'est aussi une bonne idée de créer une variable “textAge”, qui sera utilisée dans les méthodes de création et de mise à jour.
La create fonction va créer un nouvel animal de compagnie avec le nom et l'âge que vous avez fournis dans les variables “textName” et “textAge”.
Pour construire cette fonction, suivez simplement ces étapes :
- Créez une nouvelle instance de la classe Pet de Parse avec la commande
- Utilisez la set fonction pour définir les paramètres de cet objet.
- Appelez la save fonction, qui enregistrera effectivement l'animal de compagnie dans votre base de données dans leParse Dashboard.
Vous pouvez ouvrir le Back4App JavaScript Create Function pour voir le code qui a déjà été implémenté.
Le code pour la create fonction est écrit ci-dessous :
Pour le tester, collez ce code dans le fichier JavaScript dans le JSbin, cliquez sur le Exécuter bouton dans la partie console et attendez la sortie. Cela devrait imprimer que l'animal de compagnie a été créé avec succès. Pour confirmer que le nouvel objet est dans la base de données, vous pouvez accéder au Tableau de bord Parse ou vous pouvez coder la fonction de lecture.
La fonction de lecture est responsable de l'interrogation de la base de données et du retour de l'objet qui correspond à vos critères de recherche. Elle peut également être utilisée pour vérifier l'existence d'un objet. Voici le guide étape par étape pour construire votre propre fonction de lecture :
- Faites une instance de la classe Query de Parse.
- Ajoutez des contraintes à votre requête pour restreindre la recherche. Plus d'options de contraintes peuvent être trouvées dans la documentation des requêtes Parse.
- Effectuez la méthode de recherche de la requête. Ce tutoriel utilisera query.first pour obtenir uniquement le premier élément qui correspond à vos critères.
- Si les opérations réussissent, un objet animal de compagnie sera retourné. Si aucun objet n'est trouvé, l'objet retourné aura une valeur de undefined.
Vous pouvez ouvrir le Fonction de lecture JavaScript Back4App pour voir le code qui a déjà été implémenté.
Le code pour la lecture fonction est le suivant :
Pour tester la lecture, collez le code dans votre fichier JavaScript JSBin. Lorsque le code s'exécute, il affichera l'âge de l'animal trouvé (s'il est trouvé) ou affichera qu'aucun animal n'a été trouvé.
Si, lors du test, l'âge affiché ne correspond pas à l'âge de votre objet, cela signifie qu'il y a plusieurs objets avec le même nom, mais votre requête ne renvoie qu'un seul d'entre eux. Donc, pour vraiment tester la lecture fonction, créez un objet avec un autre nom, un que personne n'a encore créé, puis exécutez la fonction, qui affichera correctement l'âge de l'objet.
Pour la mise à jour, un animal est passé en paramètre et la fonction change son âge pour celui que vous avez fourni dans la variable “textAge”. Pour trouver l'animal qui sera passé, nous utilisons une version modifiée de notre lecture fonction.
Voici les étapes pour créer votre propre mise à jour fonction :
- Écrivez une fonction de lecture modifiée appelée readThenUpdate, qui appelle la mise à jour fonction lorsqu'elle trouve un animal avec succès.
- Dans la mise à jour fonction, utilisez la définir fonction pour modifier les paramètres de votre animal.
- Appelez la sauvegarder fonction pour cet animal afin de pousser les modifications dans la base de données.
Vous pouvez ouvrir le Fonction de mise à jour JavaScript Back4App pour voir le code qui a déjà été implémenté.
Voici le code pour la readThenUpdate fonction et update fonction :
Pour confirmer si la update fonction fonctionne, collez le code ci-dessus dans le fichier JavaScript sur la page JSBin. Utilisez un nom inhabituel pour votre objet afin de ne pas entrer en conflit avec d'autres utilisateurs, puis suivez ces étapes : 1. Créez un objet avec le nom souhaité. 2. Vérifiez que l'objet est créé avec votre read fonction. 3. Appelez votre readThenUpdate fonction créée dans ce sujet avec un âge différent de celui d'origine. 4. Vérifiez si l'âge de l'animal a changé en appelant à nouveau votre read fonction.
La suppression fonction efface un animal de compagnie reçu par la lecture fonction. C'est une action irréversible, ce qui signifie que vous devez faire attention en l'utilisant, surtout parce que votre lecture fonction pourrait renvoyer plus d'objets que vous ne souhaitez réellement supprimer. Pour cette raison, il est recommandé de supprimer un seul objet à la fois. Les étapes pour écrire votre propre suppression fonction peuvent être trouvées ci-dessous:
- À la fin du succès de votre fonction “lecture” (lirePuisSupprimer dans cet exemple), faites un appel à la suppression fonction.
- Dans la supprimerAnimal fonction, appelez la méthode destroy sur l'objet reçu “foundPet”.
Vous pouvez ouvrir le Fonction de Suppression JavaScript Back4App pour voir le code qui a déjà été implémenté.
Voici le code pour le readThenDelete fonction et deletePet fonction :
Pour le tester, il est recommandé de créer un objet avec un nom inhabituel tout comme les autres fonctions pour ne pas entrer en conflit avec les objets d'autres utilisateurs. Il suffit de coller le code dans le JSBin et d'exécuter le code avec le nom de votre objet et l'objet qui sera supprimé. Ensuite, vous pouvez appeler votre read fonction pour confirmer qu'il n'y a pas d'objets avec ce nom.
Si la lecture renvoie un objet, ce qui ne devrait pas être le cas, cela signifie probablement que vous avez plusieurs objets avec le même nom et qu'il en a renvoyé un comme le delete fonction ne supprime qu'un seul objet. Vous pouvez vérifier votre objet en accédant à votre Parse Dashboard.
À ce stade, vous avez appris à effectuer les opérations CRUD de base avec JavaScript.