Firebase CRUD con JS y HTML: 읽기, 업데이트 및 삭제

En la segunda parte de este proyecto, terminaremos de Implementer las otras funciones(Read, Update y Delete), siguiendo dando estilos con Bootstrap. 모든 최종적인 예술품은 보호 기능을 위한 앱 기능, 편집 또는 타레아스의 힘줄입니다.

1. 리모스 다토스

🟨 Agreguemos otro cachito de código a nuestro script para que pueda leer datos. Para esto, vamos a necesitar tener algún "container"en nuestro archivo html para poder contener todas las tareas, y debe ser con un id . En mi caso, pongo esto debajo del 형식:

<div id="task_todo">
</div>

Y luego desde el script, obtengo el elemento e inserto los datos Consultados de la DB (pongo todo el script entero, ya que hice un par de cambios de nombres con reveno al anterior artículo):

const db = firebase.firestore();

const todoForm = document.getElementById('todo_form');
const taskToDo = document.getElementById('task_todo');

const createTask = (name, url, description) => {
    db.collection('tasks').doc().set({
        name,
        url,
        description
    });
};

const getTasks = (callback) => db.collection('tasks').onSnapshot(callback);

window.addEventListener('DOMContentLoaded', async (e) => {
    getTasks((querySnapshot) => {
        taskToDo.innerHTML = '';
        querySnapshot.forEach(doc => {
            console.log(doc.data());
            const if_url = `<a href="${doc.data().url}">URL de tarea</a>` 
            taskToDo.innerHTML += `
                <div>
                    <h4>${doc.data().name}</h4>
                    <p>${doc.data().description}</p>
                    ${doc.data().url ? 
                        if_url
                        : ''
                    }
                </div>
            `
        });
    });
});

todoForm.addEventListener('submit', async e => {
    e.preventDefault();
    const name = todoForm['todo_name'].value;
    const url = todoForm['todo_url'].value;
    const description = todoForm['todo_description'].value;

    await createTask(name, url, description); // Llamo a mi función create
    todoForm.reset(); // Reseteamos los campos
});

🟨 Como el campo de URL es opcional, entonces coloco un condicionalif in line para insertar o no una etiquetaa .
Estas tareas se visualizan utilizando window.addEventListener('DOMContentLoaded', ... ) , dando uso del método onSnapshot que nos brinda Firebase para actualizar únicamente si hay nuevos datos.
Visualmente nos quedaría así:

2. Eliminemos datos

🟨 Tener tantas tareas es medio molesto, 아니? Ahora agreguemos dos botones: Eliminar y Editar. Ahora solo laburaremos para el botón Eliminar.
Estos botones los agregamos dentro de innerHTML que usamos al leer datos, quedaría así (agrego un par de estilos de Bootstrap de paso):

const deleteTask = id => db.collection('tasks').doc(id).delete();

window.addEventListener('DOMContentLoaded', async (e) => {
    getTasks((querySnapshot) => {
        taskToDo.innerHTML = '';
        querySnapshot.forEach(doc => {
            const if_url = `<a href="${doc.data().url}">URL de tarea</a>` 
            taskToDo.innerHTML += `
                <div class="card my-2 p-2">
                    <h4>${doc.data().name}</h4>
                    <p>${doc.data().description}</p>
                    ${doc.data().url ? 
                        if_url
                        : ''
                    }
                    <div>
                        <button class="btn btn-secondary btn-edit" data-id="${doc.id}">Editar</button>
                        <button class="btn btn-primary btn-delete" data-id="${doc.id}">Eliminar</button>
                    </div>
                </div>
            `;

            const deleteButtons = document.querySelectorAll('.btn-delete');
            deleteButtons.forEach(btn => {
                btn.addEventListener('click', async (e) => {
                    await deleteTask(e.target.dataset.id);
                })
            })
        });
    });
});

🟨 Al leer cada documento, Guardamos los datos en doc . Con doc.data() obtenemos la información que guardamos y con doc.id obtenemos el id generado para cada documento. Esto último nos sirve para identificar cada par de 버튼.
Cuando escucho los eventos click en los buttons Eliminar, me fijo el id puesto en data-id y llamo a la función deleteTask para eliminar la tarea del button accionado.
Nos queda algo así:

3. Editemos 데이터

🟨 Para terminar, tenemos que crear la funcionalidad de editar las tareas para hacer. Es similar a lo que hicimos para eliminar, solo que deseamos que nos aparezca los datos en el formulario y luego enviar los datos actualizados. Debemos를 실행하는 방식의 목록, 시리즈:

옵테너 엘 ID 델 버튼 액시오나도

"Editar"의 텍스트 상자 형식 버튼

Obtener los valores de cada campo del form

Firebase를 사용할 수 있는 환경, 버튼을 사용할 수 없음

"Guardar"

의 텍스트 상자 형식 상자

🟨 Teniendo en cuenta esto, debemos crear un par de variables para cambiar entre el estado Editar y Guardar, las cuales llamaremoseditState yid .
El código 최종 세리아 에스테:

const db = firebase.firestore();

const todoForm = document.getElementById('todo_form');
const taskToDo = document.getElementById('task_todo');

let editState = false;
let id = '';

const createTask = (name, url, description) => {
    db.collection('tasks').doc().set({
        name,
        url,
        description
    });
};

const getTask = id => db.collection('tasks').doc(id).get();

const getTasks = (callback) => db.collection('tasks').onSnapshot(callback);

const deleteTask = id => db.collection('tasks').doc(id).delete();

const updateTask = (id, updatedTask) => db.collection('tasks').doc(id).update(updatedTask);

window.addEventListener('DOMContentLoaded', async (e) => {
    getTasks((querySnapshot) => {
        taskToDo.innerHTML = '';
        querySnapshot.forEach(doc => {
            const if_url = `<a href="${doc.data().url}">URL de tarea</a>` 
            taskToDo.innerHTML += `
                <div class="card my-2 p-2">
                    <h4>${doc.data().name}</h4>
                    <p>${doc.data().description}</p>
                    ${doc.data().url ? 
                        if_url
                        : ''
                    }
                    <div>
                        <button class="btn btn-secondary btn-edit" data-id="${doc.id}">Editar</button>
                        <button class="btn btn-primary btn-delete" data-id="${doc.id}">Eliminar</button>
                    </div>
                </div>
            `;

            const deleteButtons = document.querySelectorAll('.btn-delete');
            deleteButtons.forEach(btn => {
                btn.addEventListener('click', async (e) => {
                    await deleteTask(e.target.dataset.id);
                })
            })

            const editButtons = document.querySelectorAll('.btn-edit');
            editButtons.forEach(btn => {
                btn.addEventListener('click', async (e) => {
                    const doc = await getTask(e.target.dataset.id);
                    const task = doc.data();

                    editState = true;
                    id = doc.id;

                    todoForm['todo_name'].value = task.name;
                    todoForm['todo_url'].value = task.url;
                    todoForm['todo_description'].value = task.description;
                    todoForm['btn_todo_form'].innerHTML = 'Editar';
                })
            })
        });
    });
});

todoForm.addEventListener('submit', async e => {
    e.preventDefault();
    const name = todoForm['todo_name'].value;
    const url = todoForm['todo_url'].value;
    const description = todoForm['todo_description'].value;

    if (!editState) {
        await createTask(name, url, description); // Llamo a mi función create
    } else {
        await updateTask(id, {name, url, description});
        editState = false;
        id = '';
        todoForm['btn_todo_form'].innerHTML = 'Guardar';
    }

    todoForm.reset(); // Reseteamos los campos
});

Al apretar uno de los botones Editar de las tareas, tenemos esto:



Ahora mismo tenemos una aplicación web funcionando. Hay varias cosas para editar y que en esta serie de artículos no tendremos en cuenta:

Cualquiera puede editar, guardary y eliminar datos.

건초 인증이 없습니다.

반응이 없습니다.

무덤이 없습니다.
Firebase에 대한 문서를 작성하고 문제 해결 방법을 확인하세요(Agregando autenticación, reglas en la DB y demás).

En el próximo y último artículo, haremos el deploy para tenerlo en línea!