Reporte Base de Datos en La Nube

Instituto Tecnológico De Nuevo Laredo
Tópicos Avanzados de Bases de Datos
Ingeniería en Sistemas
Computacionales
Reporte Base de Datos en la Nube
• Alumno:
• José Eduardo Ortega García. #19100229
Docente: Ing. Carlos Arturo Guerrero Crespo.
Como podemos notar escribimos de titulo de tarea “Ejemplo de prueba ” y en
descripcion : “esta es una prueba” al dar clic en guardar en la consola de
desarrolladores al inspeccionar no marca ningún error, esto nos indica que
podemos revisar nuestra base de datos de FIRESTORE para comprobar si
efectivamente se recibió la información.
Esta es una captura de la base de datos con la colección tareas que recibió la
prueba de la conexión entre el formulario y la aplicación, ahora continuaremos con
las demás opciones del CRUD para su inserción, modificación, búsqueda y
eliminación.
Para realizar una consulta sobre todos los documentos que se encuentren en la
base de datos, necesitamos agregar una librería llamada getDocs, esta librería
ayuda a obtener los documentos en tiempo real de la base de datos, trabajando
desde una función asíncrona.
Ahora bien, si la función esta trabajando correctamente, debería mostrar algo asi en la consola del servidor donde lo
estamos ejecutando.
Como se puede notar la consulta QuerySnapshot esta trayendo consigo un registro, que en este caso fue el agregado
como prueba en la inserción anterior.
Ahora que la aplicación ya esta recibiendo las consultas de la base de datos, debemos agregar una nueva función
llamada onSnapshot, esta función se encargara de realizar todos los cambios que esten ocurriendo recientes en la base
de datos, asi no se tendría que refrescar la pagina cada que ocurra un cambio.
Para poder utilizar una función para eliminar se necesita importar la librería deleteDocs y doc, esto sirve para indicar a
través de firebase reciba el ID del objeto en cuestión para poder ser eliminado.
Aquí se exporta una variable o función que recibe el ID y pasa por el método de borrado que recibe, la librería de doc, lee
la base de datos, entra a la colección y recibe el ID que será borrado con cada botón.
Para el botón de modificar se toma como referencia el botón de eliminar, pues únicamente se necesita el ID para localizar
el documento a modificar.
Pero ahora exportamos la librería getDoc, similar a getDocs pero con la diferencia que obtiene un solo documento y no
toda la colección como en los demás casos.
También cabe mencionar que para hacer validos los cambios en el programa y en la base de datos se debe implementar
la librería updateDocs, que básicamente permite utilizar una función con propiedades extras para reflejar los cambios en
caso de ser necesario.
Aquí se crea un método que lee los campos y el id del documentos y permite actualizarlos a excepción del ID.
El botón editar permite obtener los valores de la base de datos, tomando su id de forma automática, los envia al
formulario y los plasma en sus cajas de texto, la variable auxiliar Modificar se activa y la variable auxiliar id recibe el ID del
documento, ahora el botón AGREGAR pasa a ser ACTUALIZAR y al dar clic se activa el evento para la inserción.
If para validar si la variable Modificar esta inactiva pasa únicamente a guardar, de ser contrario permite editar los campos.
Despues de asegurar las operaciones principales del CRUD, bajo las observaciones del profesor se decidio por mejorar
un resultado de búsqueda, puede ser por ID, TITULO, DESCRIPCION, todo esto puede realizar una búsqueda en
especifico o solo con palabras que tengan en común, por ejemplo:
Como se puede ver en el textfield de búsqueda obtuvo la tarea con el titulo especifico, pero que pasa si solo agregamos
la palabra “Tarea”:
Nos trajo de vuelta todos los resultados que coincidían con la palabra tarea, incluso el que buscamos específicamente
con anterioridad.
Estos son los métodos que se necesitan para validar la búsqueda de forma especifica y de forma “General”.
Una vez realizado cada uno de las opciones del crud, se le asigna un formato de diseño personal.
CODIGO DE LAS PAGINAS DEL PROYECTO:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet"
href="https://bootswatch.com/5/quartz/bootstrap.min.css">
<title>BASE DE DATOS EN LA NUBE (FIREBASE)</title>

</head>
<body>
<div class="container p-4">

<div class="row">
<div class="col-md-6">
<div class="card">
<div class="card-body">
<h1 class="h4"> A G R E G A R______T A R E A </h1>

<Form id="task-form">
<label for="id">ID: </label>
<input class="form-control mb-2" type="text"
placeholder="Ingresar ID" id="task-ide" name="task-ide"/>
<label for="title">Titulo: </label>
<input class="form-control mb-3" type="text"
placeholder="Ingresar Tarea" id="task-title" name="task-title"/>
<label for="descripcion">Descripcion: </label>
<textarea class="form-control mb-3" id="task-description"
rows="3" placeholder="Ingresar Descripcion de la Tarea"></textarea>
<button class="btn btn-primary" id="btn-save-task">G U A R D A
R</button>
<br>
<label for="search-type">Tipo de búsqueda:</label>
<select id="search-type">
<option value="ide">ID</option> <option
value="title">Título</option> <option
value="description">Descripción</option> </select>
<br>
<input type="text" id="search-value"class="form-control mb-2"
placeholder="B U S C A R" >
</Form>
<br><br>
<div>
<button class="btn btn-primary" id="btn-reset"> R E S E T E A R</button>
<button class="btn btn-primary" id="search-button">B U S C A R</button>
</div>
</div>
</div>
</div>
<div class="col-md-6" id="tasks-container"></id=>
</div>
</div>
</div>
<div class="modal" id="modalAlerta" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">INFORMACION</h5>
<button type="button" class="close" data-dismiss="modal" aria-
label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>GUARDADO CON EXITO.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-
dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script type="module" src="./index.js"></script>

</body>
</html>
import { saveTask, getTasks, onGetTasks, deleteTask, getTask,

updateTask,searchTasks, searchTasking } from './firabase.js'
const taskForm = document.getElementById('task-form')

const tasksContainer= document.getElementById('tasks-container')
let Modificar= false;
let idh = '';

const resetButton = document.getElementById('btn-reset');
function resetPage() {
// Vaciar el contenedor de tareas

tasksContainer.innerHTML = '';
// Llamar de nuevo a la función para obtener las tareas

onGetTasks(taskForm);
// Resetear el formulario
taskForm.reset();
// Resetear variables de estado

Modificar = false;
idh = '';
// Cambiar texto del botón Guardar

btnsubmit.innerText = 'G U A R D A R';
alert('ACTUALIZADO CON EXITO');
}
resetButton.addEventListener('click', resetPage);
const btnsubmit = document.getElementById('btn-save-task');

btnsubmit.addEventListener('click',(e)=>{
e.preventDefault()
const idn = taskForm['task-ide']
const title = taskForm['task-title']
const description = taskForm['task-description']
if(!Modificar)
{
saveTask(idn.value, title.value, description.value);
alert('INSERTADO CON EXITO')
}
else{
console.log(description.value);
console.log(title.value);
updateTask(idh,{title: title.value, description:description.value})
Modificar = false
alert('ACTUALIZADO CON EXITO');
}
taskForm.reset()
})
const searchButton = document.getElementById('search-button');

searchButton.addEventListener('click', async () => {
const searchField = document.getElementById('search-type').value;

const searchValue = document.getElementById('search-value').value;
//console.log(searchType," ",searchValue)
const tasks = await searchTasks(searchField, searchValue);
const tasksLike = await searchTasking(searchField,searchValue)
console.log(tasksLike)
if (tasksLike[0] == undefined){
alert("no existe esa tarea con ese: " + searchField)
}
else{
alert("LIKE")
tasksContainer.innerHTML='';
tasksLike.forEach(Busqueda =>{
console.log(Busqueda.title,Busqueda.id,Busqueda.description)
tasksContainer.innerHTML += `
<div class="card card-body mt-2 border-primary">
<h1 class ="h4"> ${Busqueda.ide}</h1>
<h2 class="h5">${Busqueda.title}</h2>
<p>${Busqueda.description}</p>
<div>
<button class='btn btn-primary btn-borrar' data-id="${Busqueda.id}">B O R
R A R </button>
<button class='btn btn-secondary btn-editar' data-id="${Busqueda.id}"> E D
I T A R </button>
</div>
</div>
`;
const btnBorrar = tasksContainer.querySelectorAll('.btn-borrar')
btnBorrar.forEach(btn => {
btn.addEventListener('click',({target: {dataset}})=>{
deleteTask(dataset.id)
alert('ELIMINADO CON EXITO');
})
})
const btnEditar = tasksContainer.querySelectorAll('.btn-editar')

btnEditar.forEach((btn) => {
btn.addEventListener('click', async (e) => {
const doc = await getTask(e.target.dataset.id)
console.log(e.target.dataset.id)
const task = doc.data()
console.log(doc.data());
taskForm['task-title'].value= task.title
taskForm['task-ide'].value = task.ide
taskForm['task-description'].value= task.description
Modificar=true;
idh= e.target.dataset.id;
taskForm['btn-save-task'].innerText = 'A C T U A L I Z A R'
})
})
})
}
// renderizar resultados
console.log(searchField)
})
// Import the functions you need from the SDKs you need
import { initializeApp } from
"https://www.gstatic.com/firebasejs/10.4.0/firebase-app.js";
import { getFirestore, collection, addDoc, getDocs, onSnapshot, deleteDoc,
doc, getDoc, updateDoc,query ,where, startAt, endAt,orderBy} from
"https://www.gstatic.com/firebasejs/10.4.0/firebase-firestore.js"
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration

const firebaseConfig = {
apiKey: "AIzaSyD-lWtIZuvwiuvVs9_xhWwt-GaR3hRzKZ8",
authDomain: "crud-be135.firebaseapp.com",
projectId: "crud-be135",
storageBucket: "crud-be135.appspot.com",
messagingSenderId: "858207262697",
appId: "1:858207262697:web:0740bb36a768d045395d78"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const db = getFirestore()
export const saveTask =(ide, title, description)=>{

addDoc(collection(db,'tasks'), {ide, title,description}) //metodo de
insertar
}
export const getTasks= () => getDocs(collection(db,'tasks')) //metodo de

consultar
export const onGetTasks = (callback) => onSnapshot(collection(db,'tasks'),

callback)//metodo para mandar llamar la ubicacion de la coleccion
export const deleteTask = (id) => deleteDoc(doc(db,'tasks',id))//metodo

para borrar un documento
export const getTask = (id) => getDoc(doc(db,"tasks", id)) //metodo para
editar un documento
metodo actualizar nuevos campos
export const updateTask = (id, newFields) => updateDoc(doc(db,'tasks',
id),newFields)//metodo actualizar nuevos campos
// Método para buscar documentos

export async function searchTasks(searchField, searchValue) {
console.log(searchField," ", searchValue)
let tasks = [];
const collectionRef = collection(db, 'tasks');

const q = query(collectionRef, where(searchField, '==', searchValue));
console.log(q)
const querySnapshot = await getDocs(q);

console.log(querySnapshot)
querySnapshot.forEach((doc) => {
tasks.push({...doc.data(), id: doc.id});
});
//alert(tasks[0])
return tasks;
export async function searchTasking(searchField,searchValue) {

console.log(searchField," ", searchValue)
let tasks = [];
const collectionRef = collection(db, 'tasks');

const q = query(collectionRef, orderBy(searchField),
startAt(searchValue), endAt(searchValue+'\uf8ff'));
console.log(q)
const querySnapshot = await getDocs(q);

console.log(querySnapshot)
querySnapshot.forEach((doc) => {
tasks.push({...doc.data(), id: doc.id});
});
//alert(tasks[0])
return tasks;
}

Reporte Base de Datos en La Nube

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Reporte Base de Datos en La Nube

Cargado por

Copyright:

Formatos disponibles

Instituto Tecnológico De Nuevo Laredo

Tópicos Avanzados de Bases de Datos

<title>BASE DE DATOS EN LA NUBE (FIREBASE)</title>

<div class="container p-4">

<h1 class="h4"> A G R E G A R______T A R E A </h1>

<div class="col-md-6" id="tasks-container"></id=>

<script type="module" src="./index.js"></script>

import { saveTask, getTasks, onGetTasks, deleteTask, getTask,

const taskForm = document.getElementById('task-form')

let idh = '';

// Vaciar el contenedor de tareas

// Llamar de nuevo a la función para obtener las tareas

// Resetear variables de estado

// Cambiar texto del botón Guardar

const btnsubmit = document.getElementById('btn-save-task');

const searchButton = document.getElementById('search-button');

const searchField = document.getElementById('search-type').value;

const btnEditar = tasksContainer.querySelectorAll('.btn-editar')

// Your web app's Firebase configuration

export const saveTask =(ide, title, description)=>{

export const getTasks= () => getDocs(collection(db,'tasks')) //metodo de

export const onGetTasks = (callback) => onSnapshot(collection(db,'tasks'),

export const deleteTask = (id) => deleteDoc(doc(db,'tasks',id))//metodo

// Método para buscar documentos

const collectionRef = collection(db, 'tasks');

const querySnapshot = await getDocs(q);

export async function searchTasking(searchField,searchValue) {

const collectionRef = collection(db, 'tasks');

const querySnapshot = await getDocs(q);

También podría gustarte