INSTITUTO TECNOLOGICO DE LA PIEDAD

PROGRAMACION WEB

PORTADA
DOCUMENTACION

PRESENTADO POR:
STEFFANIA RODRIGUEZ ZAMBRANO 20640211
SAUL TAFOLLA RAMIREZ 20640214

LA PIEDAD, MICHOACÁN 28 DE FEBRERO DEL 2024

 CREACION DEL PROYECTO

Primero verificamos que tengamos el nmp

Lo tenemos que actualizar a la versión 20

Ahora vamos a entrar a ionic y copiamos la línea para instalarlo

Ya solo checamos que se haya instalado

Ahora creamos un directorio para poder almacenar nuestros proyectos

Entramos a nuestro directorio e inciamos ionic para crear nuestro proyecto

Ahora vamos a seleccionar nuestro framework que vamos a utilizar y le damos nombre al proyecto
Ahora en el template vamos a seleccionar que vamos a iniciarlo en blanco

Nos dira si queremos crear una cuenta en ionic, le vamos a dar no

Ahora entramos a nuestro proyecto y vamos a levantar el servidor de nuestra aplicación

Nos pedirá deshabilitar el firewall y le damos acceso

Ya que le dimos acceso nos dira que se habilito un puerto

Se nos abrirá una nueva ventana la cual contendrá la ventana principal de nuestra aplicación web
Ahora abrimos una nueva terminal en nuestro proyecto y e ingresamos el siguiente comando
“ionic generate” y pondremos en generar una pagina

Después nos pedirá el nombre que le queramos poner a la pagina en nuestro caso será el main

Esto también se puede hacer en una sola línea de comando, haciéndolo de la siguiente manera:

Es importante recordar este comando ya que lo utilizaremos mucho, cada vez que queramos crear
una pagina nueva de nuestra aplicación web.
En el apartado de routers de nuestro proyecto verificamos que nos haya creado la pagina
correctamente

Ya teniendo esto, abriremos el archivo .html de nuestro main para asi empezar a estructurar
nuestro proyecto
 FUENTES

Para poner las fuentes primero nos vamos a Google fonts y descargamos las que queramos usar
dentro de nuestro proyecto:

Ya descargado, debemos descomprimir el archivo y agregar lo que viene dentro a nuestro proyecto

Para ponerlas en nuestro proyecto primero creamos una carpeta llamada fuentes en la selección
de assets.

Luego entraremos al archivo fonts.scss

Y definiremos nuestras fuentes redireccionándolas a la carpeta creada anteriormente

Ademas debemos importar algunas librerías para que todo esto funcione correctamente

Ya para terminar esta importación, solamente la agregamos al archivo global.scss

 COLORES

Para nuestro proyecto tuvimos que crear distintos colores de acuerdo a nuestra aplicación, estos
los generamos con una herramienta de ionic que se encuentra en su pagina web

Este generador de colores nos ayuda y ya solamente tenemos que copiar el código y colocarlo en
nuestros respectivos archivos. En este caso, todos los colores creados se guardaron en
Variables.scss
Estos colores ya tienen su nombre y solamente debemos mandarlos llamar en el código para que
funcionen

ROUTER LINK

Router link es un componente que nos sirve para redireccionar a un lugar indicado, para empezar a
usarlo debemos entrar a nuestro archivo main.ts y ahí importar el componente, de la siguiente
manera:

Estas importaciones las debemos tener en todos los archivos .ts de nuestras páginas de la
aplicación para que pueda funcionar correctamente, la forma de utilizarlo es de la siguiente
manera:

Y asi poniendo dentro de las comillas la pagina a la cual queremos redireccionarnos.

 ION ICONS

En esta parte seguimos usando herramientas de ionic, lo primero es ver que iconos tiene ionic en
su pagina y asi utilizarlos dentro de botones o cualquier cosa.

Escribimos cualquier palabra clave, y esto nos generara un código que solamente debemos
importar en el archivo de nuestra aplicacion
Ahora este código lo ponemos dentro de un boton

Y el resultado de este botón se vera algo asi

Este botón tiene mas componentes para que funcione de esa manera, a continuación, se muestra
el código:
RESPONSIVE

Para hacer que la aplicación sea responsiva y pueda verse bien en cualquier dispositivo, es
necesario dividir los distintos componentes en filas y columnas, y a estas darles distintos valores
dependiendo del dispositivo en el que se va a ver.

Lo primero que hicimos fue agregar una etiqueta <ion-row> y a esta le asignamos una clase con el
nombre de principal

Luego ponemos un <ion-col> igual que al anterior le asignamos una clase con el nombre que
queramos, pero a este componente le agregaremos algo mas que es el tamaño, este puede ir de 1
a 12 que es el tamaño de los dispositivos y como se van a distribuir en la pantalla

Adentro de estas etiquetas pondremos lo que queremos que tengan, es necesario agregarle estilos
a nuestras tarjetas para que se puedan distribuir correctamente y todo se vea bien, esto se hace
agregando lo siguiente:
 PROYECTO AGENDA

Lo primero que realizamos en nuestro proyecto fue el inicio de sesión, para esto tuvimos que crear
distintas paginas para movernos entre ellas con los comandos correspondientes aprendidos en
clases.

ROUTER LINK

Lo primero que realizamos fue la utilización del routerlink para asi poder cambiar de pagina,
nosotros lo usamos en botones o incluso enlaces

Estos dos botones nos redireccionan a las distintas paginas dependiendo si queremos iniciar sesión
o registrarnos en la pagina, a continuación se muestra el código:
ION ICONS

Lo siguiente que haremos es utilizar algunos iconos de Ionic, estos los agregamos con ion-fab y asi
que tenga mas diseño nuestra pagina, lo que realizamos fue redireccionar a algunas redes sociales,
aquí podemos ver como se ven los iconos

Todas las opciones que aparecen nos redireccionan a algún lugar, para esto no se utilizo routerlink
sino el href ya que tenían que redireccionar a algún sitio web, a continuación mostramos una parte
del código:
IMPLEMENTACION DE ION-DATETIME

Para nuestra aplicación de agenda es necesario agregar el componente datetime para que nos
muestre un calendario:

Para esto solamente tenemos que agregar el ion-datetame y darle un limite de fechas para que nos
muestre un solo mes, además agregamos el highlightedDates para que las fechas seleccionadas se
vean diferentes dependiendo el estilo que escogamos, a continuación se muestra el código

Para que la clase highlightedDates funcione, tenemos que agregarla en nuestro documento .ts,
como se muestra a continuación:

Aquí lo que hacemos es escoger la fecha que queremos diferente, escogemos el color del texto y el
color de fondo, además se le pueden agregar algunos estilos scss para que se vea mejor
PAGINA PRINCIPAL

Nuestra pagina principal nos muestra un header en el que podemos ver dos botones, para iniciar
sesión y para registrarse, fuera de eso encontramos un calendario pero sin datos ya que no se ha
iniciado sesión y pide que se inicie para que pueda ver algo, ya por debajo se encuentra el footer

A continuación se muestra una parte del código, esto solamente es diseño ya que no se ha
programado nada del backend
Ahora lo siguiente es que al registrarse nos mande a un formulario, el botón de registro nos
redirecciona a la siguiente página:

A continuación mostramos el código del formulario

Al iniciar sesión, nos pedirá un correo electrónico con el que nos hayamos registrado, el login nos
manda a la siguiente pagina

Ahora mostramos el código del formulario:

Esta pestaña tendrá dos opciones, una para continuar y otra por si es que olvido su contraseña,
estas nos redireccionaran a distintas páginas, la pagina de olvido su contraseña se muestra a
continuación:

Y el botón de siguiente nos mandara a poner la contraseña:

Ya que este todo completado podremos acceder al calendario y las fechas registradas de la agenda,
se mostrara la actividad por cada fecha seleccionada del calendario.

Para esta parte si fue necesario definir los highlightedDates para que se vean las fechas como se
muestran ahí.
Ahora vamos a realizar el back-End, para esto utilizaremos un proyecto nuevo y crearemos una
nueva aplicación en la plataforma de firebase, en la cual vamos a utilizar para realizar el back-end
de la aplicación.

Vamos a entrar en la plataforma para poder a comenzar el proyecto. Ya que estemos aquí damos
en agregar un nuevo proyecto

Ya que lo hayamos empezado nos pedirá un nombre para el mismo le pondremos calendario-app
Nos dira que si queremos deshabilitar el Google analytics, en este caso no lo vamos a desactivar lo
dejamos asi y damos en continuar
Ahora ya solo vamos a esperar a que el proyecto se cree
Ya que se haya creado nos va aparecer la consola del proyecto y vamos a dar clic en el icono web
para crear la aplicación del proyecto

Ahora nos pedirá registrar nuestra app y para ello le tenemos que poner un nombre
Ya solo damos en siguiente hasta que creemos la aplicación y ya al final nos dira que va a
redirigirnos a la consola

En el lado izquierdo en el recuadro de compilación entraremos a authentication

Por el momento solo sera por medio de correo electrónico, le daremos clic sobre correo
electrónico / contraseña

Ahora solo lo habilitamos y ya tendríamos nuestro servicio de autenticación, guardamos cambio y

quedaría listo
Ahora ya que lo tenemos vamos a dirigirnos hacia el sitio web de angular fire el cual nos permitirá
agregar firebase a nuestro proyecto de angular

*** imagen de github***

Ahora en la termina de nuestra computadora agregamos el siguiente comando

Ng add @angular/fire

Ahora seleccionamos las siguientes casillas y damos enter

- Ng deploy
- Authentication
- Google analytics
- Firestore
- Cloud storage

Ahora nos va a perdir alguna cuenta para poder acceder a nuestros proyectos

Ahora solo seleccionamos nuestro proyecto que hemos creado

Ahora vamos a seleccionar la ruta para nuestro host

Después vamos a seleccionar la app de nuestro proyecto

Y ahora tenemos que agregar nuesta app key a nuestro proyecto, para esto debemos ir al
documento de “environment.ts”

Ahora vamos a ingresar el comando “ionic g s common/service/firestore” y se crearan dos nuevos

archivos, pero borraremos el archivo de spect
DIRECTORIO TELEFONICO

Ahora en el archivo de firestore.service.ts vamos a gregar un estilo para un objeto json

Después en nuestro archivo ts crearemos una constante al que le asignaremos los valores del
usuario creado anteriormente

Luego ponemos su constructor para la utilización del objeto user

Ahora agregaremos algunos valores manualmente a nuestro objeto json, esto solo para hacer
pruebas de que todo este correctamente

Aquí utilizamos lo que creamos anteriormente y se lo asignamos a la constante que creamos al

principio,
Después en nuestro documento html agregaremos el siguiente código para que nos lo muestre en
nuestra aplicación

Asi de esta manera asignamos un nombre al cuadro que aparecerá en pantalla y después
recuperamos los valores que hemos definido anteriormente.

RECUPERAR DATOS DE FIREBASE

Las funciones creadas anteriormente nos ayudaran para recuperar los datos desde Firebase,
solamente les tenemos que hacer algunas modificaciones

En la parte de loadUsers lo modificaremos de la siguiente manera para que asi nos vaya
recuperando datos desde el firestoreService que es una librería

La librería de firestore se importa de la siguiente manera

Es necesario agregar lo siguiente al archivo tsconfig.json, para que algunos componentes
posteriores nos funcionen correctamente

Ahora ya que tenemos todo esto creado (y una tabla en firebase que a continuación se explica
cómo hacerlo) solamente debemos modificar el código html de la siguiente manera

Y nos mostrara lo siguiente en nuestra aplicacion

En este caso en la tabla de firebase no le agregamos ningún valor a la variable nombre y es por esta
razón por la cual no aparece nada, pero ya esta recuperando valores de firebase.
CREACION DE TABLA EN FIREBASE

Ahora vamos a crear un directorio telefónico el cual va a tener todos los contactos de distintos
departamentos que existen en el plantel, para esto vamos a crear una nueva colección en firebase,
para aquí guardar todos nuestros contactos,

daremos en siguiente para poder asignar los campos a nuestra colección, en este caso el ID será
puesto de forma automática, en el campo le daremos el nombre de nuestro campo los cuales
serán

- Nombre
- Correo
- Numero de control (opcional)
Una vez llenados los campos quedaría de la siguiente forma ya solo damos a guardar y quedaría
registrado un usuario

Asi quedaría ya guardados

Ahora para poder recuperar estos datos necesitamos agregar en nuestro servicio varias cosas

Primero comenzamos con un get colector, que este nos va a poder ayudar a recuperar toda la
colección que hemos creado

Ahora en la el .ts vamos agregar varias cosas, en el constructor vamos a crear un servicio el cual
nos servirá para llamar todos los servicios que nos da firebase

Agregaremos la clase de “loadUsers” que nos ayuda a recuperar los datos y mostrarlos en pantalla,
aquí hay algo que resaltar y es ‘Usuarios’, este nos permite referenciar de que colección va a
recuperar los datos, esto dado que podemos tener multiples colecciones
INGRESAR DATOS A FIREBASE

Para ingresar datos seguiremos usando el objeto de usuarios, solamente que en vez de mostrar,
recibirá los valores, para empezar en el archivo .ts debemos realizar lo siguiente

Primero creamos la función de guardar, le asignamos el valor de sabe

Esta función primero manda llamar una variable cargando declarada anteriormente como un valor
booleano que es inicializado en true, después manda llamar la función del firestoreService que
hará todo el proceso y ya para terminar, la variable de cargando vuelve a ser falsa.

En el html escribiremos el siguiente código

Estos métodos utilizan el ngmodule para asi poder registrar los valores que se ingresaran en los
input creados y asi se creara un nuevo usuario, podrá verse de la siguiente manera:
BINDING BIDIRECCIONAL IONIC NGMODULE

El binding bidireccional nos permite asociar en ambas direcciones una etiqueta con una variable.
Por lo tanto, tanto si se produce un cambio en la vista como si se produce en el componente, dicho
cambio se verá reflejado en el otro.

Este tipo de binding es muy útil para los formularios en los que queremos asociar el valor de un
campo con una variable, de forma que inicialmente el campo se rellene con el contenido de la
variable y cuando el usuario escriba algo se actualice el valor de dicha variable.

Por ejemplo, imaginemos que tenemos el siguiente código en la plantilla:

En el componente simplemente tendríamos que definir la variable "nombre", para asociarla con el
input y de esa forma recuperar el texto escrito por el usuario. Además, si le asignamos un valor
inicial veríamos como el input aparecería rellenado con dicho valor.
APLICACION A NUESTRO PROYECTO

Ya teniendo esto funcionando, solamente deberemos copiar el código a nuestro proyecto y

modificar unas cosas en el, el primer punto es agregar un user.model dentro de este archivo, esto
poniéndole el nombre que queramos en este caso utilizamos fechas

Es necesario que para esto ya hayamos creado nuestra nueva colección en firebase

Aquí podemos ver que ya tenemos las 3

colecciones necesarias, directorio, fechas y
usuarios.

Ahora en firestore service, copiaremos el codigo creado anteriormente y esto lo repetiremos para
las diferentes colecciones que vayamos a agregar, solamente modificaremos el nombre de la
función en este caso fue createDocumentID2, luego crearemos un documento 2 y también
modificaremos la colección, en este caso es fechas
Ya que tenemos esto, ahora si nos vamos a nuestro archivo fechas.ts y lo primero que haremos
será importar el modelo creado anteriormente al que llamamos fechas

Esto para crear el componente con su constructor y agregar las funciones necesarias de este

Creamos la función que nos permitirá ver los datos de la base de datos, esto ya lo hicimos
anteriormente solo hemos estado copiando el codigo y pegando y solo cambiando algunos datos
con los de nuestro proyecto
Ahora el siguiente componente es el que nos ayudara a registrar las fechas y asi creando un nuevo
registro, este lo llamaremos después en el fechas.html.

Y ya por ultimo solamente crearemos la función que nos guardara lo que hayamos registrado en el
input

Ahora nos iremos a nuestro archivo html

Aquí solamente agregaremos una tarje, después un articulo y dentro le pondremos el nombre y el
input para que el usuario pueda ingresar los datos, para que se utilice las funciones creadas
anteriormente es necesario usar el ngModel como se muestra en la imagen, este proceso lo
repetimos para los diferentes objetos de nuestro componente
Despues de haber creado todos los inputs, creamos el botón de guardar y llamamos a la función
save creada anteriormente, utilizamos un objeto que nos permite ver que se esta guardando

Y ya por ultimo mostramos los datos que se han almacenado, esto se eliminara ya que se muestran
los datos de toda la base pero aquí mostramos como se pueden recuperar

Ya solamente a esto le estaríamos modificando algunos diseños o cosas que se necesiten, y esto es
lo que se hará con los demás componentes que llevaran registros, solamente cambiando a sus
respectivos identificadores y modificando algunos elementos ya que no se pueden repetir, a esto
solamente le podemos cambiar el numero del final ya sea un 2 por un 3.
Aquí podemos ver nuestro componente de registro de fechas ya funcionando correctamente

En este se puede seleccionar el día, el mes y agregar una pequeña descripción del evento que se
realizara en esa fecha.
Directorio

Para la parte del directorio, primero agregamos todos los registros a firebase para asi después
poder recuperarlos, es necesario que para esta colección ya se haya creado lo que se explico
anteriormente, pero lo que hicimos fue agregar uno por uno directamente en la base de datos de
firebase

Aquí podemos ver todos los registros ya guardados, y para mostrarlos solamente usamos la
siguiente función en nuestro archivo html
Este código ya muestra los registros y los recupera de la base de datos del directorio, y se ve de la
siguiente manera

Aquí ya esta recuperando todos los datos de firebase, y si queremos agregar otro registro
solamente nos vamos hasta abajo y aparece la parte de agregar:

Al dar clic en este boton nos redireccionara a otra pantalla para registrar un nuevo usuario en el
directorio
Creamos una nueva página y pegamos en el archivo ts el siguiente código que ya se explicó
anteriormente

Esto para configurar que se pueda registrar bien el usuario y también para mostrar, para esto
también hay que agregar el createDocumentID desde el firestore.service
Y también agregar otro tipo de usuario en user.model

Ahora bien, solo falta el archivo html que se creara de la siguiente manera:
Y el resultado quedaría de la siguiente manera:
Ya que podemos guardar a nuestros usuarios en la base de datos, también hace falta guardarlos
para la autenticación con firebase, para esto debemos tener activa la autenticación de nuestro
proyecto, para esto nos dirigimos al apartado de compilación -> autenticación
Ya que hayamos entrado nos aparecerá un botón para comenzar damos clic y ahora nos pedirá que
seleccionemos con que método vamos a utilizar la autenticación en nuestro caso sera por correo
electrónico y contraseña

Ya solo nos dira si queremos habilitar, lo activamos y damos en guardar (nota: no activar el acceso
sin contraseña)
Y ya nos aparecerá la lista de usuarios que tenemos (si recién se crea no tendrá nada hasta que por
medio de la aplicación o por firebase demos de alta nuevos valores)

Ya que tenemos el método de autenticación falta agregar el back a nuestro proyecto, esto dado
que no podemos autenticar nuestros usuarios desde las colecciones que crea firebase.

Para esto necesitaremos el método de “createUserWithEmailAndPassword”. Este método necesita

tres parámetros para que pueda funcionar, el primero es una autenticación este es una función de
firebase asi que solo necesitamos importarla, después nos va a pedir nuestro correo, este lo vamos
a tomar de nuestro formulario, este se esta guardando el ngmodel y lo guarda en nuestro servicio
de usuarios, asi que solo llamamos con user.correo para solo obtener el valor del correo e
igualmente con la contraseña, esto nos va a permitir guardar a los usuarios para la autenticación
de estos
También para que estos queden guardados en la colección vamos a filtrar para que primero se
guarden en la autenticación y luego se guarden en la colección, este va a comparar si el usuario se
registró, en caso que si este va a guardarlo en la colección y nos va a redirigir a la pagina del login
para que el usuario pueda ingresar a la aplicación
LOGIN

ya que podemos guardar usuarios para su autenticación ahora solo falta utilizar esa autenticación y
para eso vamos a utilizar el login. Como esta diseñada nuestra apliacion primero pediremos el
correo

En este apartado no aremos mucho en cuestión al back solo mostraremos en consola y

guardaremos el correo que se haya ingresado en la caja de texto, esto para en la próxima pantalla
poder obtener este valor para poder validar la autenticación dado que necesitamos el correo para
esta
Ya que nos haya redirigido a la siguiente pagina solo vamos a ingresar nuestra contraseña para
poder tener los datos necesarios para el login

Ahora en la parte del back vamos a realizar lo siguiente, primero vamos a recuperar el valor del
correo con el siguiente método
Ahora vamos a crear el método login para poder iniciar sesión en nuestra aplicación, en este
método vamos a utilizar el método de singUp este nos permite de una manera más sencilla utilizar
la autenticación del usuario, dado que el solo necesita el objeto y pues el método se encarga de
recuperar los datos necesarios, también implementamos una función para atrapar los errores esto
en caso que puedan a llegar a surgir (como pueden ser: error en el correo, error en la contraseña,
que no tengas conexión, que no se haya encontrado el usuario entre otros). En dado que no haya
problemas nos va a redireccionar a nuestra página principal, en caso que haya un problema nos
arrojara un modal con un mensaje de error al iniciar sesión
CERRAR SESION

Ya que podemos iniciar sesión también debemos cerrar estas, para esto firebase nos ofrece un
método para cerrar sesión y lo hace de una forma muy sencilla, para esto vamos a utilizar el
método signOut el cual nos va a pedir: primero que el usuario esta autenticado y después la sesión
del usuario que va a remover, ya por ultimo nos va a redirigir a la pestaña principal
MOSTRAR EVENTOS

Para esto se utilizo un modal el cual se abrirá al dar clic sobre la fecha que se desea saber que
eventos existen en ella,

Para esto primero vamos al html que nos debe de quedar de esta forma, para que sea de una
forma más interactiva se utiliza un modal el cual se activara cada que demos clic sobre una fecha
Esta será nuestra base de nuestro modal el cual vamos a utilizar para cualquier fecha, solo con la
cualidad que se van a recuperar los datos de nuestra base de datos y de esta forma sea más
dinámico pero para que todo esto funcione vamos a tener agregar varias funciones al back
Para poder abrir el modal tenemos que crear un método llamado setOpen el cual también necesita
una variable booleana la cual vamos a iniciarla en false, este método lo vamos asignar en las fechas
para que al dar clic se abra el modal y muestre los eventos
Ya que se haya creado el método para abrir el modal vamos a crear otro método para que este se
pueda abrir y pueda mandar llamar el método que nos permitirá recuperar los eventos de firebase
el cual se va a llamar cambios, lo más importante a destacar son varias cosas:

- Recibe un valor booleano: esto para poder llamar el método para poder abrir el modal,
- El arreglo para la fecha: este nos va a permitir obtener la fecha y la hora de la cual
hayamos dado clic, esto para poderla utilizar para filtrar los datos de la colección
- Llamar loadEventos: este método nos permite filtrar los datos de la colección para poder
mostrar solo los que vamos a utilizar

En el front se utiliza en esta parte y como podemos observar este recibe un valor “true” el cual nos
va a servir para poder utilizar este método y poder abrir el modal
ya que tenemos el método que nos permitirá abrir el modal y tomar la fecha seleccionada solo
falta filtrar los datos de firebase. Primero en el método lo que se realiza es un filtrado de la fecha,
esto para que compara que el valor que esta recibiendo no sea null o el dato este vacío, si el dato si
contiene valores pues pasa a la consulta, pues para esto utilizando el servicio de firebase vamos a
recuperar los datos de la colección “Eventos”, después con el “.suscribe” vamos a manejar los datos
que se reciban de la colección, esto también implica que recibirá actualizaciones que se hayan
hecho en estos, después con “if(cambios)” vamos a comparar que los datos recibidos no sean
“null” o estén vacíos, en el caso que hayamos recibido datos con información pasamos a la última
parte del método que es asignar los datos recibidos, para esto se utilizó la propiedad filter el cual
nos permite filtrar los datos que solo necesitamos, esto lo vamos a comparar con la fecha obtenida
en el método “cambios” y vamos a filtrar los eventos que coincidan con la fecha seleccionada y
todos los datos obtenidos vamos a guardarlos en la lista llamada eventos