{"id":6148,"date":"2025-04-21T11:53:50","date_gmt":"2025-04-21T11:53:50","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/ajouter-tache-firebase-to-do-list-amelioree\/"},"modified":"2025-04-21T11:53:55","modified_gmt":"2025-04-21T11:53:55","slug":"ajouter-tache-firebase-to-do-list-amelioree","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/ajouter-tache-firebase-to-do-list-amelioree\/","title":{"rendered":"12.5 Ajouter une T\u00e2che sur Firebase TO-DO List Am\u00e9lior\u00e9e"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Ajouter T\u00e2che Firebase TO-DO List Am\u00e9lior\u00e9e<\/strong> est une fonctionnalit\u00e9 essentielle pour pratiquer l&rsquo;int\u00e9gration de Firebase dans une application web moderne. Comprendre comment d\u00e9velopper cette fonctionnalit\u00e9 permettra non seulement de renforcer vos comp\u00e9tences en gestion de bases de donn\u00e9es en temps r\u00e9el mais aussi d&rsquo;accro\u00eetre l&rsquo;interactivit\u00e9 de votre application TO-DO. Plongeons dans la mise en \u0153uvre de cette fonctionnalit\u00e9 avec des instructions d\u00e9taill\u00e9es et des exemples de code pratiques.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 l&rsquo;Ajout de T\u00e2ches avec Firebase<\/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\/706133359?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>Ajouter des t\u00e2ches dans une application TO-DO list requiert l&rsquo;utilisation d&rsquo;une base de donn\u00e9es pour stocker et g\u00e9rer ces t\u00e2ches de mani\u00e8re efficace. Firebase, par le biais de Firestore, offre une solution en temps r\u00e9el permettant de manipuler les donn\u00e9es promptement et de synchroniser les \u00e9tats \u00e0 travers les dispositifs des utilisateurs. En ma\u00eetrisant l&rsquo;<a href=\"https:\/\/wikiform.fr\/codespace\/creer-application-firebase-react\" target=\"_blank\" rel=\"noopener\">cr\u00e9ation d&rsquo;une application Firebase avec React<\/a>, vous pouvez passer \u00e0 des projets plus ambitieux comme le d\u00e9veloppement d&rsquo;une <a href=\"https:\/\/wikiform.fr\/codespace\/ajouter-donnees-base-firebase-react\" target=\"_blank\" rel=\"noopener\">To-Do List am\u00e9lior\u00e9e.<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Configuration de votre Projet Firebase<\/h3>\n\n\n\n<p>Avant de commencer \u00e0 ajouter des t\u00e2ches, il est crucial de configurer Firebase. Suivez ces \u00e9tapes simples :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n    <li>Cr\u00e9ez un projet dans <a href=\"https:\/\/console.firebase.google.com\/\" target=\"_blank\" rel=\"noopener\">Firebase Console<\/a>.<\/li>\n    <li>Ajoutez une base de donn\u00e9es Firestore.<\/li>\n    <li>Ajustez les r\u00e8gles de s\u00e9curit\u00e9 pour permettre \u00ab\u00a0lecture\/\u00e9criture\u00a0\u00bb si vous \u00eates en d\u00e9veloppement.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">2. Int\u00e9gration de Firebase dans votre Application<\/h3>\n\n\n\n<p>Pour interagir avec Firebase, vous devez inclure la biblioth\u00e8que n\u00e9cessaire dans votre projet. Utilisez les liens CDN ou installez-les via npm :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Utiliser npm\n\/\/ npm install firebase\n\n\/\/ Importer la librairie Firebase\nimport { initializeApp } from \"firebase\/app\";\nimport { getFirestore, collection, addDoc } from \"firebase\/firestore\"; \n\n\/\/ Configuration Firebase\nconst firebaseConfig = {\n  apiKey: \"YOUR_API_KEY\",\n  authDomain: \"your-app.firebaseapp.com\",\n  projectId: \"your-app-id\",\n  storageBucket: \"your-app.appspot.com\",\n  messagingSenderId: \"your-sender-id\",\n  appId: \"your-app-id\"\n};\n\n\/\/ Initialiser Firebase\nconst app = initializeApp(firebaseConfig);\nconst db = getFirestore(app);\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">3. D\u00e9velopper la Fonctionnalit\u00e9 d&rsquo;Ajout de T\u00e2che<\/h3>\n\n\n\n<p>Pour permettre l\u2019ajout de t\u00e2ches, nous allons cr\u00e9er une fonction qui interagira avec Firestore pour stocker les donn\u00e9es :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>async function addTask(task) {\n  try {\n    const docRef = await addDoc(collection(db, \"tasks\"), {\n      title: task.title,\n      description: task.description,\n      completed: false,\n      timestamp: new Date()\n    });\n    console.log(\"Document written with ID: \", docRef.id);\n  } catch (e) {\n    console.error(\"Error adding document: \", e);\n  }\n}\n\n\/\/ Exemple d'utilisation\naddTask({ title: \"Nouvelle T\u00e2che\", description: \"Description de la t\u00e2che\" });\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">4. Mettre en Place l&rsquo;Interface Utilisateur<\/h3>\n\n\n\n<p>\u00c0 pr\u00e9sent, d\u00e9veloppons l\u2019interface utilisateur permettant \u00e0 l\u2019utilisateur d\u2019entrer des t\u00e2ches :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;form id=\"taskForm\"&gt;\n  &lt;input type=\"text\" id=\"taskTitle\" placeholder=\"Titre de la t\u00e2che\" required&gt;\n  &lt;textarea id=\"taskDescription\" placeholder=\"Description\" required&gt;&lt;\/textarea&gt;\n  &lt;button type=\"submit\"&gt;Ajouter une t\u00e2che&lt;\/button&gt;\n&lt;\/form&gt;\n\n&lt;script&gt;\ndocument.getElementById('taskForm').addEventListener('submit', function(event) {\n  event.preventDefault();\n  const title = document.getElementById('taskTitle').value;\n  const description = document.getElementById('taskDescription').value;\n  addTask({ title, description });\n});\n&lt;\/script&gt;\n<\/code><\/pre>\n\n\n\n<p>Pour en savoir davantage sur la mise en \u0153uvre des interfaces, n&rsquo;h\u00e9sitez pas \u00e0 explorer notre guide complet sur <a href=\"https:\/\/wikiform.fr\/codespace\/formulaires-react-guide-complet\" target=\"_blank\" rel=\"noopener\">les formulaires en React<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion sur l&rsquo;Ajout T\u00e2che Firebase TO-DO List Am\u00e9lior\u00e9e<\/h2>\n\n\n\n<p>En int\u00e9grant Firebase Firestore, vous pouvez facilement ajouter des fonctionnalit\u00e9s pour g\u00e9rer les t\u00e2ches dans votre application TO-DO list. Cette approche augmente la r\u00e9activit\u00e9 de l&rsquo;application et am\u00e9liore l&rsquo;exp\u00e9rience utilisateur. N&rsquo;h\u00e9sitez pas \u00e0 explorer davantage les fonctionnalit\u00e9s de Firebase pour enrichir votre application et \u00e0 consulter la <a href=\"https:\/\/firebase.google.com\/docs\" target=\"_blank\" rel=\"noopener\">documentation Firebase<\/a> pour des d\u00e9tails suppl\u00e9mentaires. Pour aller plus loin, d\u00e9couvrez comment rendre votre application encore plus interactive gr\u00e2ce \u00e0 l&rsquo;authentification utilisateur dans notre prochain tutoriel. Pour plus de pratiques avec React, consultez notre guide consacr\u00e9 \u00e0 <a href=\"https:\/\/wikiform.fr\/codespace\/ajouter-tache-firebase-to-do-list-amelioree\" target=\"_blank\" rel=\"noopener\">ajouter des t\u00e2ches Firebase TO-DO List Am\u00e9lior\u00e9e<\/a>.<\/p>\n\n\n<!-- Promotion Learnify -->\n<div style=\"text-align:center; margin-top: 20px;\">\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\">\n    <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 React et Redux\" style=\"max-width: 100%; height: auto;\" title=\"\">\n  <\/a>\n<\/div>\n\u00ab\u00a0`","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Ajouter T\u00e2che Firebase TO-DO List Am\u00e9lior\u00e9e est une fonctionnalit\u00e9 essentielle pour pratiquer l&rsquo;int\u00e9gration de Firebase dans une application web moderne. Comprendre comment d\u00e9velopper cette&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3164,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-6148","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\/6148","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=6148"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6148\/revisions"}],"predecessor-version":[{"id":6149,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6148\/revisions\/6149"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3164"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=6148"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=6148"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=6148"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}