UNIVERSIDAD DISTRITAL FRANCISCO JOSE DE CALDAS

FACULTAD DE INGENIERIA
INGENIERIA CATASTRAL Y GEODESIA

PROYECTO FINAL

PROGRAMACION ORIENTADA A OBJETOS

Docente PAULO CESAR CORONADO SANCHEZ

DAYANA ALEXANDRA GUZMÁN TIBATA

20182025002

BOGOTA D.C., 19 DE AGOSTO DE 2020

 PROYECTO FINAL

Contenido:
1. Introducción
2. Objetivos
3. Casos de uso y Mockups
4. Desarrollo del proyecto
5. Bibliografía y referencias
 1. Introducción:

Se propone la creación de un portal web a partir de los conocimientos obtenidos durante el

semestre. Este portal web estará basado principalmente en lenguajes HTML, JS y CSS sobre
un entorno de NODE.JS además del uso de diferentes Frameworks, una base de datos MySQL
y un repositorio remoto en GitLab.
El desarrollo del código se hará sobre la plataforma Visual Studio Code y se busca que tenga
coherencia con los paradigmas de la programación orientada a objetos. La combinación de
estas temáticas nos permitirá el diseño del portal web donde un usuario podrá ver los aspectos
fundamentales de la localidad de Bosa.

2. Objetivos:

 Afianzar los conocimientos adquiridos a partir del desarrollo de una aplicación web.
 Aplicar el manejo de MERN (MySQL, Express, React, Node) de forma conjunta con el
fin de entender el desarrollo de aplicaciones web.
 Crear un portal web que interactúe con el usuario y muestre los aspectos
fundamentales de la localidad de Bosa.
 3. Casos de uso y Mockups

Diseño de un portal web donde se muestren los aspectos fundamentales de la localidad en

donde vive, el cual tendrá dos secciones: Vida en la localidad y Sitios de interés.

 Página Principal: Diseño de la página principal con dos botones que den accesos a
las secciones correspondientes.

 Vida en la localidad: Diseño de página secundaria la cual tendrá una división con un
mapa que mostrara los eventos de la localidad, también tendrá una división que
mostrara todo lo relacionado con dichos eventos. Además, tendrá un botón que
permita al usuario agregar un evento y una línea de tiempo de eventos.

1. Mapa de georeferencia: Usando el visor Cesium se mostrará a medida que el

usuario seleccione alguno de los eventos establecidos, los cuales estarán al
lado del mapa.

2. Formulario de eventos: Se creará un formulario donde el usuario registrara los

datos del evento y estos quedaran guardados en la base de datos.

3. Línea de tiempo: De acuerdo al timestamp, se organizarán los eventos de

acuerdo a la fecha actual y en orden de mayor a menor.
 Sitios de interés: Diseño de página secundaria la cual tendrá una división con un
mapa que mostrará los sitios de interés, también tendrá una división para
descripción, una división que muestre los sitios de interés disponibles de manera
categórica con su respectivo identificador, una galería de imágenes, una barra de
búsqueda y dos botones que permitan acceder a un formulario para agregar un sitio
de interés y otro para agregar imágenes de la localidad.

1. Mapa de georeferencia: Usando el visor Leafleat se mostrarán los sitios de

interés previamente establecidos, a medida que el usuario agregue eventos,
estos se mostrarán en el mapa.

2. Descripción: Al hacer clic sobre un sitio este mostrara en la descripción del sitio.

3. Formulario de sitios de interés: Se creará un formulario donde el usuario

registrara los datos del sitio o lugar de interés y estos quedaran guardados en la
base de datos

4. Formulario carga de imágenes: Se creará un formulario donde el usuario

registrara los datos del evento y estos quedaran guardados en la base de datos

5. Jerarquía de sitios: Taxonomía de descripción de los sitios de interés

6. Búsqueda de sitios: Usando la barra de búsqueda, el usuario podrá digitar

características o nombres de sitios los cuales serán buscados en las bases de
datos y los que más se relacione serán mostrados.
 6.1. Búsqueda de sitios cercanos: Una vez seleccionado un sitio de interés por
el usuario, mostrar 5 sitios cercanos a este con las mismas condiciones.

 Casos de uso:

1. Caso de uso: Vida en la localidad

Nombre Vida en la localidad

Estado Exploración
Descripción El usuario obtiene información sobre un evento próximo
Usuario
Actor(es)
Sitio
1. El usuario deberá ingresar al sitio de búsqueda
Precondición
2. Escoger un evento
El caso de uso comienza cuando el usuario escoge un
evento
1. El usuario selecciona el evento
Escenario básico 2. El sitio registra dicha acción y obtiene la
información del evento
3. El sitio muestra la información obtenida del evento
4. Finaliza el caso de uso
Escenarios alternativos
Alternativa 1 El sitio no tiene información del evento
 2. El sitio le dice al usuario que no tiene información del
evento
3. Vuelve al paso 1.
Puntos de extensión
Extensión 1
El usuario tendrá la información disponible del evento
Postcondición
seleccionado.

2. Caso de uso: Búsqueda de sitios

Nombre Búsqueda de sitios

Estado Exploración
A partir de una identificación dada por el usuario se
Descripción
realiza una búsqueda y se muestra la información.
Usuario
Actor(es)
Sitio
1. El usuario deberá ingresar al sitio de búsqueda
Precondición
2. Establece los parámetros de búsqueda
El caso de uso comienza cuando el usuario establece
parámetros de búsqueda:

1. El usuario selecciona la búsqueda

2. El usuario proporciona un identificador, característica
o categoría de un sitio de interés
Escenario básico 3. El sitio realiza una búsqueda de los sitios que cumplan
los parámetros
4. El sitio muestra la descripción el sitio de interés .
5. El sitio muestra cinco sitios cercanos que cumplan o
se relacionen con el sitio buscado
6. Finaliza el caso de uso

Escenarios alternativos
Si en el paso 2 el usuario digita un identificador que no
se encuentra en la base de datos, entonces:

3. El sitio muestra un mensaje que solicite al usuario

Alternativa 1 cambiar los parámetros de búsqueda y que verifique si
su búsqueda está en las categorías disponibles.
4. Si el usuario cambia la búsqueda, el caso de uso
continua en el paso 1, de lo contrario finaliza el caso de
uso.
Puntos de extensión
Extensión 1
El usuario tendrá la información disponible de los sitios
Postcondición
de interés buscados.
3. Agregar un evento o un sitio de interés.

Nombre Agregar un evento o sitio de interés

Estado Exploración
 El usuario usa los formularios establecidos por el sitio
Descripción
para agregar un evento o un sitio
Usuario
Actor(es)
Sitio
1. El usuario deberá ingresar al sitio
Precondición
2. Escoge un formulario
El caso de uso comienza cuando el usuario escoge un
formulario:

1. El usuario selecciona el formulario (eventos o sitios de

interés)
2. El usuario proporciona las características y la
descripción del evento o sitio que quiera agregar.
Escenario básico
3. El sitio verifica que el formulario este diligenciado
correctamente
4. El sitio agrega los datos del sitio o evento a la base de
datos
5. El sitio mostrara una vez agregado, el sitio o evento
6. Finaliza el caso de uso

Escenarios alternativos
Si en el paso 3 el formulario no está correctamente
diligenciado

3. El sitio muestra un mensaje que solicite al usuario

Alternativa 1 cambiar los datos del formulario o que verifique si esta
correctamente diligenciados.
4. Si el usuario cambia los datos del formulario, el caso
de uso continua en el paso 3, de lo contrario repite el
paso anterior.
Puntos de extensión
Extensión 1
Postcondición El usuario tendrá su evento o sitio de interés en el Sitio.

4. Agregar imágenes a la galería.

Nombre Agregar imágenes

Estado Exploración
El usuario usa el formulario establecidos por el sitio para
Descripción
agregar imágenes
Usuario
Actor(es)
Sitio
1. El usuario deberá ingresar al sitio
Precondición
2. Escoge el formulario de carga de imágenes
Escenario básico El caso de uso comienza cuando el usuario escoge el
formulario:

1. El usuario selecciona el formulario

 2. El usuario carga el archivo de la imagen.
3. El sitio verifica que el formulario este diligenciado
correctamente y que el archivo corresponda a la imagen
4. El sitio agrega la imagen a la galería
5. El sitio mostrara una vez agregado la imagen
6. Finaliza el caso de uso

Escenarios alternativos
Si en el paso 3 el formulario no está correctamente
diligenciado o no corresponde a un archivo de imagen

3. El sitio muestra un mensaje que solicite al usuario

Alternativa 1 cambiar los datos del formulario o que verifique el
archivo cargado corresponda a una imagen.
4. Si el usuario cambia los datos del formulario o la
imagen, el caso de uso continua en el paso 3, de lo
contrario repite el paso anterior.
Puntos de extensión
Extensión 1
Postcondición El usuario tendrá su imagen en la galería del Sitio.

4. Desarrollo del proyecto

Herramientas a usar:

 HTML: es el lenguaje con el que se define el contenido de las páginas web.

Básicamente se trata de un conjunto de etiquetas que sirven para definir el texto y
otros elementos que compondrán una página web, como imágenes, listas, vídeos,
etc.
HTML es el lenguaje de marcado que usamos para estructurar y dar significado a
nuestro contenido web, por ejemplo, definiendo párrafos, encabezados y tablas de
datos, o insertando imágenes y videos en la página.

 JS: es un lenguaje de secuencias de comandos que te permite crear contenido de

actualización dinámica, controlar multimedia, animar imágenes, etc.
JavaScript es un lenguaje de programación interpretado, dialecto del estándar
ECMAScript. Se define como orientado a objetos, basado en prototipos, imperativo,
débilmente tipado y dinámico.

 CSS: es un lenguaje de reglas de estilo que usamos para aplicar estilo a nuestro
contenido HTML, por ejemplo, establecer colores de fondo y tipos de letra, y distribuir
nuestro contenido en múltiples columnas.
 CSS (en inglés Cascading Style Sheets) es lo que se denomina lenguaje de hojas de
estilo en cascada y se usa para estilizar elementos escritos en un lenguaje de
marcado como HTML. CSS separa el contenido de la representación visual del sitio.

 Node.js: Ideado como un entorno de ejecución de JavaScript orientado a eventos

asíncronos, Node.js está diseñado para crear aplicaciones network escalables.
Es una Máquina Virtual tremendamente rápida y de gran calidad escrita por gente
como Lars Bak, uno de los mejores ingenieros del mundo especializados en
VMs(Virtual Machines). No olvidemos que V8 es actualizado constantemente y es
uno de los intérpretes más rápidos que puedan existir en la actualidad para cualquier
lenguaje dinámico. Además las capacidades de Node.js para I/O (Entrada/Salida)
son realmente ligeras y potentes, dando al desarrollador la posibilidad de utilizar a
tope la I/O del sistema.
Node soporta protocolos TCP, DNS y HTTP. Y fue creado por Ryan Dahl en 2009 y
su evolución está apadrinada por la empresa Joyent que además tiene contratado a
Dahl.
Uno de los puntos fuertes de Node.js es su capacidad de mantener muchas conexiones
abiertas y esperando.

 Express: Express es una infraestructura de aplicaciones web Node.js mínima y

flexible que proporciona un conjunto sólido de características para las aplicaciones
web y móviles.

 React: React es una biblioteca JavaScript de código abierto diseñada para crear
interfaces de usuario con el objetivo de facilitar el desarrollo de aplicaciones en una
sola página. Es mantenido por Facebook y la comunidad de software libre. Han
participado en el proyecto más de mil desarrolladores diferentes.

 MySQL: MySQL es un sistema de gestión de bases de datos relacional desarrollado

bajo licencia dual: Licencia pública general/Licencia comercial por Oracle
Corporation y está considerada como la base de datos de código abierto más
popular del mundo, y una de las más populares en general junto a Oracle y Microsoft
SQL Server, todo para entornos de desarrollo web.

 Leaflet: Leaflet es una biblioteca de JavaScript de código abierto ampliamente

utilizada para crear aplicaciones de mapas web . Lanzado por primera vez en 2011,
es compatible con la mayoría de las plataformas móviles y de escritorio, y admite
HTML5 y CSS3 . Junto con OpenLayers y la API de Google Maps , es una de las
bibliotecas de mapas de JavaScript más populares y es utilizada por los principales
sitios web como FourSquare , Pinterest y Flickr .
Leaflet permite a los desarrolladores sin experiencia en SIG visualizar fácilmente
mapas web en mosaico alojados en un servidor público, con superposiciones en
mosaico opcionales. Puede cargar datos de entidades de archivos GeoJSON ,
diseñarlos y crear capas interactivas, como marcadores con ventanas emergentes
 cuando se hace clic.

 Cesium: Es una biblioteca de JavaScript para crear globos 3D y mapas 2D en un

navegador web sin complementos. Utiliza WebGL para gráficos acelerados por
hardware, y es multiplataforma, navegador cruzado y ajustado para la visualización
de datos dinámicos.

 Bootstrap: Es un framework CSS utilizado en aplicaciones front-end — es decir, en

la pantalla de interfaz con el usuario— para desarrollar aplicaciones que se adaptan
a cualquier dispositivo.

Desarrollo de la aplicación web:

Unas instaladas las herramientas a usar en nuestro medio de trabajo, abrimos Visual Studio
Code, crearemos una carpeta que contendrá todo el proyecto.
Usaremos express para crear nuestro backend ya que este framework nos permitirá conectar la
base de datos y nuestro frontend.
Para crear nuestra aplicación de backend usaremos el comando: express backend, esto nos
creara una carpeta con los correspondientes archivos que nos permitirán crear nuestra
aplicación.
En esta carpeta, para ser mar ordenamos creamos una carpeta denominada src, la cual
contendrá nuestros archivos JS
Usaremos react para crear el frontend ya que nos permite establecer componentes de manera
organizada para así importarlos como módulos y renderizarlos en nuestro documento HTML.
React usa JSX el cual es una extensión al lenguaje de JavaScript que pareciera, combinar este
lenguaje con HTML. Para crear nuestra aplicación de frontend usaremos el comando: npx
create-react-app Frontend, de igual forma nos creara una carpeta con los respectivos archivos.

5. Bibliografía y referencias
https://desarrolloweb.com/articulos/que-es-html.html
https://developer.mozilla.org/es/docs/Learn/JavaScript/First_steps/Qu%C3%A9_es_JavaScript
https://www.hostinger.co/tutoriales/que-es-css/
https://nodejs.org/es/about/
https://devcode.la/blog/que-es-nodejs/
https://expressjs.com/es/
https://www.mysql.com/
https://leafletjs.com/
https://cesium.com/
https://getbootstrap.com/