{"id":6146,"date":"2025-04-14T11:54:26","date_gmt":"2025-04-14T11:54:26","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/configurer-firebase-to-do-list-amelioree-react\/"},"modified":"2025-04-14T11:54:31","modified_gmt":"2025-04-14T11:54:31","slug":"configurer-firebase-to-do-list-amelioree-react","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/configurer-firebase-to-do-list-amelioree-react\/","title":{"rendered":"12.4 Configurer Firebase pour une TO-DO List Am\u00e9lior\u00e9e React"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Configurer Firebase pour une To-Do List Am\u00e9lior\u00e9e avec React<\/strong> est une \u00e9tape essentielle pour ceux qui souhaitent am\u00e9liorer la fonctionnalit\u00e9 et la scalabilit\u00e9 de leurs applications web. Firebase, gr\u00e2ce \u00e0 ses fonctionnalit\u00e9s robustes, permet une gestion de donn\u00e9es en temps r\u00e9el, une authentification simple et un h\u00e9bergement fiable. Dans cet article, nous allons explorer pas \u00e0 pas comment int\u00e9grer Firebase dans une application To-Do List utilisant React pour offrir une exp\u00e9rience utilisateur enrichie.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 <strong>Firebase<\/strong><\/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\/706133310?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                    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();\n    }\n});\n<\/script>\n\n\n\n<p>En utilisant Firebase, une plateforme de d\u00e9veloppement d&rsquo;applications mobiles et web, on peut b\u00e9n\u00e9ficier de services tels que l&rsquo;authentification, la base de donn\u00e9es en temps r\u00e9el, le stockage et plus encore. Ce tutoriel vise \u00e0 vous guider \u00e0 travers le processus de mise en place de Firebase dans votre application React et \u00e0 impl\u00e9menter une gestion optimis\u00e9e des t\u00e2ches.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er et Configurer Votre Projet Firebase<\/h3>\n\n\n\n<p>Avant d&rsquo;ajouter Firebase \u00e0 votre projet React, vous devez d&rsquo;abord configurer un projet Firebase. Cela implique de se connecter \u00e0 la <a href=\"https:\/\/console.firebase.google.com\/\" target=\"_blank\" rel=\"noopener\">console Firebase<\/a> et de cr\u00e9er un nouveau projet :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-console\"><code>1. Connectez-vous \u00e0 Firebase.\n2. Cliquez sur \"Ajouter un projet\".\n3. Entrez un nom de projet et acceptez les conditions g\u00e9n\u00e9rales.\n4. Cliquez sur \"Cr\u00e9er un projet\".<\/code><\/pre>\n\n\n\n<p>Une fois cela fait, vous pouvez ajouter l&rsquo;application Web \u00e0 votre projet Firebase, ce qui vous permettra d&rsquo;int\u00e9grer Firebase \u00e0 votre application React :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-console\"><code>1. Dans le tableau de bord du projet Firebase, cliquez sur \"Web\".\n2. Suivez les instructions pour enregistrer votre application.\n3. Copiez la configuration de votre SDK Firebase lorsque vous y \u00eates invit\u00e9.<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Int\u00e9grer Firebase \u00e0 une Application React<\/h3>\n\n\n\n<p>Avec le projet Firebase configur\u00e9, il est temps d&rsquo;int\u00e9grer Firebase dans votre application React. Cette int\u00e9gration n\u00e9cessitera l&rsquo;ajout du SDK Firebase \u00e0 votre projet :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Installation du SDK Firebase\nnpm install firebase\n\n\/\/ Configuration de Firebase dans votre application React\nimport { initializeApp } from 'firebase\/app';\nimport { getFirestore } from 'firebase\/firestore';\n\n\/\/ Remplacez avec votre configuration Firebase\nconst firebaseConfig = {\n  apiKey: \"AIzaSyXXXXX-XXXXXX-XXXXX\",\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\/\/ Initialisation de Firebase\nconst app = initializeApp(firebaseConfig);\nconst db = getFirestore(app);\n\nexport { db };\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Mise en \u0152uvre de la To-Do List avec Firestore<\/h3>\n\n\n\n<p>Firestore, qui est une base de donn\u00e9es NoSQL h\u00e9berg\u00e9e par Firebase, permet un stockage et une synchronisation efficaces des donn\u00e9es en temps r\u00e9el. Nous allons maintenant voir comment cr\u00e9er, lire, mettre \u00e0 jour et supprimer des t\u00e2ches dans Firestore. Pour des informations plus d\u00e9taill\u00e9es sur <a href=\"https:\/\/wikiform.fr\/codespace\/comprendre-cycle-vie-application-react\" target=\"_blank\" rel=\"noopener\">le cycle de vie de l&rsquo;application React<\/a>, consultez notre guide complet.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import { collection, addDoc, getDocs, updateDoc, deleteDoc, doc } from 'firebase\/firestore';\nimport { db } from '.\/firebaseConfig';\n\n\/\/ Ajouter une t\u00e2che\nconst addTask = async (task) => {\n  try {\n    await addDoc(collection(db, 'tasks'), { task, completed: false });\n  } catch (e) {\n    console.error(\"Erreur lors de l'ajout de la t\u00e2che : \", e);\n  }\n};\n\n\/\/ Lire les t\u00e2ches\nconst getTasks = async () => {\n  const tasksSnapshot = await getDocs(collection(db, 'tasks'));\n  const taskList = tasksSnapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));\n  return taskList;\n};\n\n\/\/ Mettre \u00e0 jour une t\u00e2che\nconst updateTask = async (id, updatedTask) => {\n  const taskDocRef = doc(db, 'tasks', id);\n  try {\n    await updateDoc(taskDocRef, updatedTask);\n  } catch (e) {\n    console.error(\"Erreur lors de la mise \u00e0 jour de la t\u00e2che : \", e);\n  }\n};\n\n\/\/ Supprimer une t\u00e2che\nconst deleteTask = async (id) => {\n  const taskDocRef = doc(db, 'tasks', id);\n  try {\n    await deleteDoc(taskDocRef);\n  } catch (e) {\n    console.error(\"Erreur lors de la suppression de la t\u00e2che : \", e);\n  }\n};\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">H\u00e9bergement de Votre Application avec Firebase<\/h3>\n\n\n\n<p>Pour h\u00e9berger votre application, Firebase propose une solution d&rsquo;h\u00e9bergement gratuite et facile \u00e0 utiliser qui s&rsquo;int\u00e8gre directement avec votre projet. Passez par les \u00e9tapes suivantes pour d\u00e9ployer votre application :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-console\"><code>1. Installez l'outil CLI Firebase :\n   npm install -g firebase-tools\n\n2. Authentifiez-vous avec Firebase :\n   firebase login\n\n3. Initialisez Firebase Hosting dans votre projet :\n   firebase init hosting\n\n4. Enfin, d\u00e9ployez votre application :\n   firebase deploy<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Ajouter une Authentification pour S\u00e9curiser les Listes<\/h3>\n\n\n\n<p>L&rsquo;authentification Firebase peut renforcer la s\u00e9curit\u00e9 de votre application en limitant l&rsquo;acc\u00e8s aux listes de t\u00e2ches par utilisateur. Pour ajouter l&rsquo;authentification, assurez-vous d&rsquo;importer les modules n\u00e9cessaires et de configurer les m\u00e9thodes d&rsquo;authentification requises dans Firebase. D\u00e9couvrez comment <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-refs-react-tutoriel\" target=\"_blank\" rel=\"noopener\">utiliser les r\u00e9f\u00e9rences dans React<\/a> pour am\u00e9liorer l&rsquo;interactivit\u00e9 de votre application.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import { getAuth, signInWithEmailAndPassword, createUserWithEmailAndPassword } from 'firebase\/auth';\n\n\/\/ Initialisation du service d'authentification\nconst auth = getAuth();\n\n\/\/ Inscription utilisateur\nconst registerUser = async (email, password) => {\n  try {\n    await createUserWithEmailAndPassword(auth, email, password);\n  } catch (error) {\n    console.log('Erreur lors de l\\'inscription de l\\'utilisateur :', error.message);\n  }\n};\n\n\/\/ Connexion utilisateur\nconst loginUser = async (email, password) => {\n  try {\n    await signInWithEmailAndPassword(auth, email, password);\n  } catch (error) {\n    console.log('Erreur lors de la connexion de l\\'utilisateur :', error.message);\n  }\n};\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>En configurant Firebase pour une To-Do List am\u00e9lior\u00e9e avec React, vous \u00eates en mesure de cr\u00e9er des applications plus dynamiques et s\u00e9curis\u00e9es. Firebase facilite la gestion des donn\u00e9es en temps r\u00e9el, autorise un h\u00e9bergement rapide, et permet l\u2019impl\u00e9mentation ais\u00e9e de l&rsquo;authentification. En suivant ce guide, vous avez les \u00e9l\u00e9ments essentiels pour enrichir votre application React avec les puissantes fonctionnalit\u00e9s de Firebase. Continuez \u00e0 approfondir vos connaissances en explorant davantage les documents et tutoriels disponibles, et testez de nouvelles fa\u00e7ons de rendre votre application encore plus interactive et r\u00e9active.<\/p>\n\n\n\n<a href=\"https:\/\/path.to.your.course\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/placekitten.com\/800\/400\" loading=\"lazy\" alt=\"Enhance your React skills with Firebase\" title=\"\"><\/a>\n\n\n\n<p>Pour en savoir plus sur la cr\u00e9ation d&rsquo;applications avec React, consultez notre section sur <a href=\"https:\/\/wikiform.fr\/codespace\/formulaires-react-guide-complet\" target=\"_blank\" rel=\"noopener\">les formulaires dans React<\/a>. Vous pouvez \u00e9galement approfondir vos connaissances sur <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-react-hooks-guide-introduction\" target=\"_blank\" rel=\"noopener\">les React Hooks<\/a> et leur utilisation avanc\u00e9e.<\/p>\n\n\n\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=\"Promotion Learnify\" title=\"\"><\/a>\n.\n\u00ab\u00a0`","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Configurer Firebase pour une To-Do List Am\u00e9lior\u00e9e avec React est une \u00e9tape essentielle pour ceux qui souhaitent am\u00e9liorer la fonctionnalit\u00e9 et la scalabilit\u00e9 de&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3186,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-6146","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\/6146","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=6146"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6146\/revisions"}],"predecessor-version":[{"id":6147,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6146\/revisions\/6147"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3186"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=6146"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=6146"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=6146"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}