Practica 4

INSTITUTO TECNOLÓGICO DE CELAYA
Ingeniería Mecatrónica
Práctica No. 4
"HTML Y FIREBASE"
Alan Belman Rodríguez 18030661, Christian Francisco González Cornejo 18030915, Juan Antonio
Valencia Vargas 18031472.
<span>, <img>, <aside>, <audio>, <canvas>, <datalist>,
Resumen—Se realizará una interfaz de usuario en formato <details>, <embed>, <nav>, <output> (en-US), <progress>,
HTML que servirá de ayuda para realizar diferentes consultas en <video>, <ul>, <ol>, <li> y muchos otros.
la base de datos creada previamente en Firebase cuya información
hace referencia a el acceso que se usó para controlar el encendido
Un elemento HTML se distingue de otro texto en un documento
y apagado de un led a través de tecnología RFID en determinada
fecha. mediante "etiquetas", que consisten en el nombre del elemento
rodeado por "<" y ">". El nombre de un elemento dentro de una
Palabras clave: Arduino, RFID, Interfaz de usuario, etiqueta no distingue entre mayúsculas y minúsculas. Es decir,
HTML, Registro se puede escribir en mayúsculas, minúsculas o una mezcla. Por
ejemplo, la etiqueta <title> se puede escribir como <Title>,
Abstract-- A user interface will be created in HTML format that <TITLE> o de cualquier otra forma.
will help to perform different queries in the database previously
created in Firebase whose information refers to the access that was
used to control the switching on and off of a LED through RFID Firebase de Google es una plataforma en la nube para el
technology on a certain date. desarrollo de aplicaciones web y móvil. Está disponible para
distintas plataformas (iOS, Android y web), con lo que es más
Keywords: Arduino, RFID, HTML, Record, User interface rápido trabajar en el desarrollo.
I. INTRODUCTION
HTML (Lenguaje de Marcas de Hipertexto, del inglés
HyperText Markup Language) es el componente más básico de
la Web. Define el significado y la estructura del contenido web.
Además de HTML, generalmente se utilizan otras tecnologías
para describir la apariencia/presentación de una página web
(CSS) o la funcionalidad/comportamiento (JavaScript).
"Hipertexto" hace referencia a los enlaces que conectan páginas

web entre sí, ya sea dentro de un único sitio web o entre sitios
web. Los enlaces son un aspecto fundamental de la Web. Al
subir contenido a Internet y vincularlo a las páginas creadas por
otras personas, te conviertes en un participante activo en la
Fig. 2. Logo de Firebase
«World Wide Web» (Red Informática Mundial).
Aunque fue creada en 2011 pasó a ser parte de Google en 2014,

comenzando como una base de datos en tiempo real. Sin
embargo, se añadieron más y más funciones que, en parte,
permitieron agrupar los SDK de productos de Google con
distintos fines, facilitando su uso.
Su función esencial es hacer más sencilla la creación de tanto
aplicaciones webs como móviles y su desarrollo, procurando
que el trabajo sea más rápido, pero sin renunciar a la calidad
requerida.
Sus herramientas son variadas y de fácil uso, considerando que

Fig. 1. Logotipo de HTML. su agrupación simplifica las tareas de gestión a una misma
plataforma. Las finalidades de las mismas se pueden dividir en
cuatro grupos: desarrollo, crecimiento, monetización y análisis.
HTML utiliza "marcas" para etiquetar texto, imágenes y otro Es especialmente interesante para que los desarrolladores no
contenido para mostrarlo en un navegador Web. Las marcas necesiten dedicarle tanto tiempo al backend, tanto en cuestiones
HTML incluyen "elementos" especiales como <head>, <title>, de desarrollo como de mantenimiento.
<body>, <header>, <footer>, <article>, <section>, <p>, <div>,
2
II. DESARROLLO <p>En esta practica lo que se desea es consultar la

Para poder llevar a cabo la presente práctica, es necesario informacion almacenada en una base de datos perteneciente a la
conocer los comandos de apertura y cierre para distintas cadenas plataforma FireBase
de acción en HTML (especialidades). Esto para estructurar por <br>de google. Esta informacion hace referencia a el
diferentes partes la página, ya sea en formato de imágenes, texto acceso para controlar el encendido y apagado de un led a traves
o un botón. de tecnologia RFID.
</p>
Presentación </article>
</section>
Se comenzó con los comandos básicos de apertura en formato
HTML poniendo el encabezado, el titulo, el comienzo del
cuerpo del programa y el encabezado con imágenes
representativas a la institución. Ver figura 3.
<!DOCTYPE html>
<html>
<head> Fig. 4. representación del código mostrado en la página.
<title>Practica</title>
</head> Conexión con Firebase
<body>
<header> En la última parte del código se añadió un cuadro de información
<img src="logo largo.png"/> y un botón para hacer las consultas en determinadas fechas
<h1 style="text-align:center">Practica: APP web / Fire
base</h1> <div id="ABuscar"> 
</header> <h3>Consulta</h3>
<p>Fecha</p>
<input id="buscaFecha" type="text"> <br><br>

<button id="buscar">Buscar</button>
Fig. 3. representación del código mostrado en la página.
<h3 id="escribeAccion" type="text"></h3>
Posteriormente se inició una sección que contiene una <h3 id="escribeFecha" type="text"></h3>
descripción del proyecto y una tabla con los integrantes del <h3 id="escribeHora" type="text"></h3>
equipo. Ver figura 4. </div>
<section>
<article> 
<h3 style="text-align:center">Tercer parcial<br>Internet
de las cosas </h3>
<h3>Integrantes del equipo</h3>
<table>
<tbody>
<tr>
<td>Belman Rodriguez Alan</td>
<td>18030661</td>
Fig. 5. representación del código mostrado en la página.
</tr>
<tr>
<td>Gonzalez Cornejo Christian Francisco</td> Después se hace la parte de conexión a firebase donde se
<td>18030915</td> importan los datos necesarios para conectar con Python, y se
</tr> ajusta la conexión a la cuenta correspondiente.
<tr>
<td>Valencia Vargas Juan Antonio</td> <script type="module">
<td>18031472</td>
</tr> import { initializeApp } from
</tbody> "https://www.gstatic.com/firebasejs/9.6.3/firebase-app.js";
</table>
<h3></h3> const firebaseConfig = {
</article> apiKey:
"AIzaSyBwYJsE3PpSyTxX3LNVZj7IlDmwKPfrO9A",
<article> 
3
authDomain: "practicap3-iot.firebaseapp.com", III. RESULTADOS

databaseURL: "https://practicap3-iot-default- Tras iniciar el código completo se puede ver la pagina completa
rtdb.firebaseio.com",
projectId: "practicap3-iot",
storageBucket: "practicap3-iot.appspot.com",
messagingSenderId: "293151403812",
appId:
"1:293151403812:web:b63d8a451e40340f148db1",
measurementId: "G-ZQKX8GVKQF"
};
const app = initializeApp(firebaseConfig);
import {getDatabase,set,get,update,remove,ref,child}
from "https://www.gstatic.com/firebasejs/9.6.3/firebase-
database.js"
const db=getDatabase();
var
Fig. 6. Portada de la página en HTML.
buscaFecha=document.querySelector("#buscaFecha");
var buscaHora=document.querySelector("#buscaHora");
Tambien se puede aprecias que si no encuentra el usuario,
aparece el mensaje de error.
var btnBuscar=document.querySelector("#buscar");
Finalmente se hace una función que recaude la fecha

ingresada a la base de datos y dando la información
correspondiente a esa consulta. E indicando si no se encontró
registro alguno.
function BuscarInfo(){
const dbref=ref(db);
get(child(dbref,"practica-
parcial3/RegistrosControl/"+buscaFecha.value))
.then((snapshot)=>{
if(snapshot.exists()){
escribeAccion.innerHTML="Accion del control=
"+snapshot.val().Comunicacion;
Fig. 7. Error de usuario.
escribeFecha.innerHTML="Fecha del control=
"+snapshot.val().Fecha; También si se ingresa un registro existente, manda la
escribeHora.innerHTML="Hora del control= información correspondiente a ese registro, ver figura 8.
"+snapshot.val().Hora;
}else{
alert("No se encontro el usuario");
}
})
.catch((error)=>{
alert(error);
})
}
btnBuscar.addEventListener("click",BuscarInfo)
</script>
</body>
</html>
Fig. 8. Registro consultado en la página de HTML.

4
<header>
<img src="logo largo.png"/>
<h1 style="text-align:center">Practica: APP web / Fire
base</h1>
</header>
<section>
<article> 
<h3 style="text-align:center">Tercer parcial<br>Internet
de las cosas </h3>
<h3>Integrantes del equipo</h3>
<table>
Fig. 9. Registro existente en firebase. <tbody>
<tr>
IV. CONCLUSIONES <td>Belman Rodriguez Alan</td>
<td>18030661</td>
A. Alan Belman Rodríguez </tr>
La tecnología referente a base de datos es bastante interesante <tr>
y no es para nada complicada de manejar. El saber aplicarla <td>Gonzalez Cornejo Christian Francisco</td>
correctamente abre infinitas posibilidades a aplicaciones reales <td>18030915</td>
y cotidianas relacionadas con la seguridad y una accesibilidad </tr>
amigable al usuario. Además, el guardado de datos aumenta la <tr>
seguridad de nuestro sistema, haciendo de la presente práctica <td>Valencia Vargas Juan Antonio</td>
un avance importante para futuros proyectos. <td>18031472</td>
</tr>
B. Christian Francisco González Cornejo </tbody>
En conclusión, la importancia que tiene la comunicación de </table>
información entre diferentes plataformas de desarrollo como <h3></h3>
pueden ser HTMLy FIREBASE sirve de antesala para futuros </article>
proyectos y prototipos. Además, conjunta la parte de consultas
de una base de datos con la búsqueda de dicha información <article> 
desde otra plataforma, de este modo, acciones que se mandan <p>En esta practica lo que se desea es consultar la
desde un ordenador repercuten de forma física en el entorno de informacion almacenada en una base de datos perteneciente a
una manera casi inmediata. la plataforma FireBase
<br>de google. Esta informacion hace referencia a el
C. Juan Antonio Valencia Vargas acceso para controlar el encendido y apagado de un led a traves
Guardar los datos de un cambio de variables, es importante a de tecnologia RFID.
la hora de hacer registros de actividades en diferentes </p>
plataformas. Además en sistemas multifuncionales donde se </article>
requiere una comunicación a tiempo real, es aún más importante </section>
la comunicación entre distintas plataformas, de manera que se
puedan consultar nuevos datos en tiempo real. <div id="ABuscar"> 
<h3>Consulta</h3>
REFERENCIAS <p>Fecha</p>
<input id="buscaFecha" type="text"> <br><br>
[1] HTML: Lenguaje de etiquetas de hipertexto | MDN. (2023, 13 marzo). 
<button id="buscar">Buscar</button>
[2] Mora, S. L. (2022, 4 octubre). Firebase: qué es, para qué sirve,
funcionalidades y ventajas. DIGITAL55. https://digital55.com/blog/que-
es-firebase-funcionalidades-ventajas-conclusiones/ <h3 id="escribeAccion" type="text"></h3>
<h3 id="escribeFecha" type="text"></h3>
ANEXOS <h3 id="escribeHora" type="text"></h3>
</div>
ANEXO I. CÓDIGO FUENTE PARA LA CONFIGURACIÓN DE LA PÁGINA EN HTML
<script type="module">
<!DOCTYPE html>
<html> import { initializeApp } from
<head> "https://www.gstatic.com/firebasejs/9.6.3/firebase-app.js";
<title>Practica</title>
</head> const firebaseConfig = {
<body>
5
apiKey:
"AIzaSyBwYJsE3PpSyTxX3LNVZj7IlDmwKPfrO9A",
authDomain: "practicap3-iot.firebaseapp.com",
databaseURL: "https://practicap3-iot-default-
rtdb.firebaseio.com",
projectId: "practicap3-iot",
storageBucket: "practicap3-iot.appspot.com",
messagingSenderId: "293151403812",
appId:
"1:293151403812:web:b63d8a451e40340f148db1",
measurementId: "G-ZQKX8GVKQF"
};
const app = initializeApp(firebaseConfig);
import {getDatabase,set,get,update,remove,ref,child}
from "https://www.gstatic.com/firebasejs/9.6.3/firebase-
database.js"
const db=getDatabase();
var buscaFecha=document.querySelector("#buscaFecha");
var buscaHora=document.querySelector("#buscaHora");
var btnBuscar=document.querySelector("#buscar");
function BuscarInfo(){
const dbref=ref(db);
get(child(dbref,"practica-
parcial3/RegistrosControl/"+buscaFecha.value))
.then((snapshot)=>{
if(snapshot.exists()){
escribeAccion.innerHTML="Accion del control=
"+snapshot.val().Comunicacion;
escribeFecha.innerHTML="Fecha del control=
"+snapshot.val().Fecha;
escribeHora.innerHTML="Hora del control=
"+snapshot.val().Hora;
}else{
alert("No se encontro el usuario");
}
})
.catch((error)=>{
alert(error);
})
}
btnBuscar.addEventListener("click",BuscarInfo)
</script>
</body>
</html>

Practica 4

Cargado por

Información del documento

Descripción original:

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

Practica 4

Cargado por

Copyright:

Formatos disponibles

INSTITUTO TECNOLÓGICO DE CELAYA

"Hipertexto" hace referencia a los enlaces que conectan páginas

Aunque fue creada en 2011 pasó a ser parte de Google en 2014,

Sus herramientas son variadas y de fácil uso, considerando que

II. DESARROLLO <p>En esta practica lo que se desea es consultar la

authDomain: "practicap3-iot.firebaseapp.com", III. RESULTADOS

Finalmente se hace una función que recaude la fecha

Fig. 8. Registro consultado en la página de HTML.

const app = initializeApp(firebaseConfig);

También podría gustarte