{"id":6130,"date":"2025-02-17T12:54:32","date_gmt":"2025-02-17T12:54:32","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/supprimer-donnees-base-firebase-react\/"},"modified":"2025-02-17T12:54:37","modified_gmt":"2025-02-17T12:54:37","slug":"supprimer-donnees-base-firebase-react","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/supprimer-donnees-base-firebase-react\/","title":{"rendered":"11.7 Supprimer des Donn\u00e9es d&rsquo;une Base Firebase React"},"content":{"rendered":"Voici l&rsquo;article am\u00e9lior\u00e9 avec les modifications SEO souhait\u00e9es, int\u00e9gr\u00e9es directement dans le HTML\u00a0:\n\n\u00ab\u00a0`html\n\n<p><strong>Supprimer Donn\u00e9es Firebase React<\/strong> est une t\u00e2che essentielle pour maintenir vos donn\u00e9es \u00e0 jour et pertinentes. Comprendre comment effectuer cette op\u00e9ration peut faciliter la gestion de votre base de donn\u00e9es et garantir que les utilisateurs interagissent avec des informations \u00e0 jour. Apprenons \u00e0 r\u00e9aliser cela, \u00e9tape par \u00e9tape, avec des exemples de code pratiques.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 la suppression de donn\u00e9es dans Firebase avec React<\/h2>\n\n\n\n<div id=\"videoContainer\" style=\"position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000;\">\n  <iframe src=\"https:\/\/player.vimeo.com\/video\/706122523?dnt=1&#038;fullscreen=0&#038;pip=0\" loading=\"lazy\" loading=\"lazy\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" frameborder=\"0\" allow=\"autoplay\" allowfullscreen id=\"vimeoPlayer\"><\/iframe>\n  \n  <!-- Popup Desktop -->\n  <div id=\"popupContainer\" class=\"desktop-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <h2 style=\"color: #333; font-size: 1.5em; margin: 10px 0;\" id=\"profitez-de-loffre-spciale-\">Profitez de l\u2019offre sp\u00e9ciale !<\/h2>\n    <p style=\"color: #e74c3c; font-size: 1.2em; margin: 10px 0;\">Obtenez notre cours pour seulement <strong id=\"price\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\" target=\"_blank\" style=\"display: block; padding: 10px 20px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 1em; margin: 20px auto;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 10px 20px; font-size: 1em;\">Fermer<\/button>\n  <\/div>\n\n  <!-- Popup Mobile -->\n  <div id=\"popupContainerMobile\" class=\"mobile-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 300px; padding: 15px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <p style=\"color: #e74c3c; font-size: 1em; margin: 5px 0;\">Cours sp\u00e9cial \u00e0 <strong id=\"priceMobile\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\" target=\"_blank\" style=\"display: inline-block; padding: 8px 15px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 0.9em;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 5px 10px; font-size: 0.9em;\">Fermer<\/button>\n  <\/div>\n<\/div>\n\n<script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script>\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    var iframe = document.getElementById('vimeoPlayer');\n    var player = new Vimeo.Player(iframe);\n    var isPopupDisplayed = false;\n\n    player.on('play', function() {\n        if (!isPopupDisplayed) {\n            player.on('timeupdate', function(data) {\n                if (data.seconds >= 120 && !isPopupDisplayed) { \/\/ 120 seconds = 2 minutes\n                    \/\/ Pause the video and display the popup\n                    player.pause().then(function() {\n                        if (window.innerWidth > 768) {\n                            document.querySelector('.desktop-popup').style.display = 'block';\n                        } else {\n                            document.querySelector('.mobile-popup').style.display = 'block';\n                        }\n                        fetchPriceAndUpdatePopup();\n                        isPopupDisplayed = true;\n                    });\n                }\n            });\n        }\n    });\n\n    function fetchPriceAndUpdatePopup() {\n        fetch('https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144')\n            .then(response => response.text())\n            .then(html => {\n                var parser = new DOMParser();\n                var fetchedDoc = parser.parseFromString(html, 'text\/html');\n                var priceElement = fetchedDoc.querySelector('.ammount .fw-500');\n                var originalPriceElement = fetchedDoc.querySelector('.ammount del');\n                var price = priceElement ? priceElement.textContent.trim() : '29.5\u20ac';\n                var originalPrice = originalPriceElement ? originalPriceElement.textContent.trim() : '59\u20ac';\n\n                document.getElementById('price').textContent = price;\n                document.getElementById('priceMobile').textContent = price;\n                document.querySelector('.desktop-popup del').textContent = originalPrice;\n                document.querySelector('.mobile-popup del').textContent = originalPrice;\n            })\n            .catch(error => console.error('Error fetching the price:', error));\n    }\n\n    function closePopup() {\n        document.querySelector('.desktop-popup').style.display = 'none';\n        document.querySelector('.mobile-popup').style.display = 'none';\n        player.play(); \/\/ Allows resuming the video only after closing the popup\n    }\n});\n<\/script>\n\n\n\n<p>Firebase est une plateforme de d\u00e9veloppement d&rsquo;applications qui offre des services comme l&rsquo;h\u00e9bergement de bases de donn\u00e9es, l&rsquo;authentification des utilisateurs, et bien plus. Dans cet article, nous allons nous concentrer sur <strong>la suppression de documents dans Firebase Cloud Firestore<\/strong> \u00e0 partir d&rsquo;une application React. Cela inclut l&rsquo;acc\u00e8s \u00e0 la base de donn\u00e9es, la s\u00e9lection des documents \u00e0 supprimer, et la gestion des erreurs potentielles. Pour en savoir plus sur la cr\u00e9ation de votre premi\u00e8re application avec React, consultez <a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-application-react-tutoriel\" target=\"_blank\" rel=\"noopener\">ce guide \u00e9tape par \u00e9tape<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Configurer Firebase dans votre projet React<\/h3>\n\n\n\n<p>Avant de commencer, assurez-vous d&rsquo;avoir configur\u00e9 Firebase dans votre projet React. Voici un rappel rapide sur la fa\u00e7on de le faire :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import { initializeApp } from 'firebase\/app';\nimport { getFirestore } from 'firebase\/firestore';\n\nconst firebaseConfig = {\n    apiKey: \"YOUR_API_KEY\",\n    authDomain: \"YOUR_PROJECT_ID.firebaseapp.com\",\n    projectId: \"YOUR_PROJECT_ID\",\n    storageBucket: \"YOUR_PROJECT_ID.appspot.com\",\n    messagingSenderId: \"YOUR_MESSAGING_SENDER_ID\",\n    appId: \"YOUR_APP_ID\",\n};\n\n\/\/ Initialiser Firebase\nconst app = initializeApp(firebaseConfig);\n\n\/\/ Obtenir une instance de Firestore\nconst db = getFirestore(app);\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Supprimer un Document de Firestore<\/h3>\n\n\n\n<p>Pour supprimer un document de votre base de donn\u00e9es Firestore, vous devez conna\u00eetre le chemin de la collection et l&rsquo;identifiant du document. L&rsquo;utilisation de la m\u00e9thode <code>deleteDoc<\/code> de Firebase simplifie cette t\u00e2che. Voici comment :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import { doc, deleteDoc } from 'firebase\/firestore';\n\nasync function supprimerDocument(docId) {\n    try {\n        const docRef = doc(db, 'votreCollection', docId);\n        await deleteDoc(docRef);\n        console.log(\"Document supprim\u00e9 avec succ\u00e8s !\");\n    } catch (error) {\n        console.error(\"Erreur lors de la suppression du document: \", error);\n    }\n}\n\n\/\/ Exemple d'utilisation\n\/\/ supprimerDocument('identifiantDuDocument');\n<\/code><\/pre>\n\n\n<p>Pour des applications plus robustes, d\u00e9couvrez comment g\u00e9rer les erreurs sur <a href=\"https:\/\/wikiform.fr\/codespace\/gerer-erreurs-requetes-firebase-axios-react\">cette ressource compl\u00e8te<\/a> sur la gestion des erreurs dans les requ\u00eates Firebase.<\/p>\n\n\n<h3 class=\"wp-block-heading\">Int\u00e9gration de la Suppression dans votre Interface React<\/h3>\n\n\n\n<p>Int\u00e9grer la fonctionnalit\u00e9 de suppression dans l&rsquo;interface utilisateur de votre application React permet d&rsquo;am\u00e9liorer l&rsquo;exp\u00e9rience utilisateur. Voici un exemple de composant qui affiche une liste d&rsquo;\u00e9l\u00e9ments avec la possibilit\u00e9 de les supprimer :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React, { useEffect, useState } from 'react';\nimport { collection, getDocs } from 'firebase\/firestore';\n\nfunction ListeDocuments() {\n    const [documents, setDocuments] = useState([]);\n\n    useEffect(() => {\n        async function fetchDocuments() {\n            const querySnapshot = await getDocs(collection(db, 'votreCollection'));\n            const docsArray = querySnapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));\n            setDocuments(docsArray);\n        }\n        fetchDocuments();\n    }, []);\n\n    return (\n        <ul>\n            {documents.map(doc => (\n                <li key={doc.id}>\n                    {doc.nom}\n                    <button onClick={() => supprimerDocument(doc.id)}>Supprimer<\/button>\n                <\/li>\n            ))}\n        <\/ul>\n    );\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">G\u00e9rer les Erreurs Lors de la Suppression<\/h3>\n\n\n\n<p>La gestion des erreurs est cruciale pour offrir une exp\u00e9rience utilisateur fluide. Lorsqu&rsquo;une suppression \u00e9choue, il est important de notifier l&rsquo;utilisateur de l&rsquo;erreur et des \u00e9tapes \u00e9ventuelles de r\u00e9solution. Vous pouvez afficher des messages d&rsquo;erreur descriptifs dans l&rsquo;interface utilisateur :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>async function supprimerDocument(docId) {\n    try {\n        const docRef = doc(db, 'votreCollection', docId);\n        await deleteDoc(docRef);\n        console.log(\"Document supprim\u00e9 avec succ\u00e8s !\");\n    } catch (error) {\n        console.error(\"Erreur lors de la suppression du document: \", error);\n        alert(\"Erreur de suppression : \" + error.message);\n    }\n}\n<\/code><\/pre>\n\n\n<p>Pour une compr\u00e9hension plus approfondie des cycles de vie des applications React et am\u00e9liorer votre gestion des erreurs, visitez <a href=\"https:\/\/wikiform.fr\/codespace\/comprendre-cycle-vie-application-react\">comprendre le cycle de vie d&rsquo;une application React<\/a>.<\/p>\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>La suppression de donn\u00e9es d&rsquo;une base Firebase dans une application React est un processus g\u00e9rable qui n\u00e9cessite une attention aux d\u00e9tails, notamment la configuration correcte de Firebase et la gestion exhaustive des erreurs. Gr\u00e2ce \u00e0 ce tutoriel, vous disposez des connaissances de base pour impl\u00e9menter cette fonctionnalit\u00e9 dans vos propres projets React. Pour plus d&rsquo;informations sur la gestion des bases de donn\u00e9es avec Firebase et React, consultez notre <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/introduction-\u00e0-firebase-pour-react\/150\">cours complet sur l&rsquo;utilisation de Firebase avec React<\/a>. Apprendre \u00e0 utiliser React plus efficacement pourrait inclure des fonctions avanc\u00e9es comme <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-fonctions-flechees-javascript-react\" target=\"_blank\" rel=\"noopener\">les fonctions fl\u00e9ch\u00e9es<\/a> pour simplifier votre code JavaScript.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/introduction-\u00e0-firebase-pour-react\/150\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-REACT-FIREBASE-offre.gif\" loading=\"lazy\" alt=\"Learnify Formation React Firebase Offre\" title=\"\"><\/a>\n\n\n<!-- Promotion fin de l'article -->\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-REDUX-ET-REACT-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation Redux et React Offre\" title=\"\"><\/a>\n\u00ab\u00a0`\n\nCet article inclut d\u00e9sormais les optimisations SEO souhait\u00e9es avec une densit\u00e9 et inclusion des mots-cl\u00e9s appropri\u00e9es, liens internes et externes judicieux, ainsi que l&rsquo;int\u00e9gration de contenu suppl\u00e9mentaire pour atteindre la taille souhait\u00e9e.","protected":false},"excerpt":{"rendered":"<p>Voici l&rsquo;article am\u00e9lior\u00e9 avec les modifications SEO souhait\u00e9es, int\u00e9gr\u00e9es directement dans le HTML\u00a0: \u00ab\u00a0`html Supprimer Donn\u00e9es Firebase React est une t\u00e2che essentielle pour maintenir vos&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3273,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-6130","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-et-redux","tag-tutoriels"],"acf":[],"_titre_de_la_formation":null,"_description_":null,"_objectifs_pedagogiques":null,"_programme_":null,"_url_de_limage":null,"_materiel_necessaire":null,"_modalites_devaluation_des_acquis":null,"_moyens_pedagogiques_et_techniques":null,"_accessibilite_":null,"_formateur_":null,"menu_order":0,"_links":{"self":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6130","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/comments?post=6130"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6130\/revisions"}],"predecessor-version":[{"id":6131,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6130\/revisions\/6131"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3273"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=6130"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=6130"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=6130"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}