Link al proyecto ya desplegado ("puede que no funcione la conexion a la Base de datos por problemas con la conexion a la misma")
- Planteamiento de la problemática
- Propuesta de solución
- Solución
- FrontEnd
- BackEnd
- Servidor
- Base de datos
- Como desplegar la pagina en LocalHost
----Inicio^
En este proyecto se elaboro una propuesta de solución que satisface la problemática ambiental, de la mala divulgación de la información, pues esta problemática tiene el problema de que muchas veces la información del ¿como ayudar?, ¿donde ayudar? y etc, no esta al fácil acceso, incluso personas que participan activamente en campañas de limpieza, no se enteran de dichos eventos y esto provoca que el interés por hacer un cambio decaiga, puesto a que los humanos al ser seres sociales, todo aquello donde participa poca gente es menos atractivo que otro donde allá menos
----Inicio^
Visto la problemática, ha llegado la hora de plantear una solución, al inicio pensamos ¿que podríamos hacer para que
esta problemática de la mala divulgación de la información pueda ser solucionada? y la conclusion a la que llegamos
fue una aplicación web donde los usuarios puedan dejar su información de contacto para que por medio de ella podamos
enviar la información sobre otras campañas de limpieza, o hasta incluso otros tipos de campañas pra ayudar a otras
causas, para ser mas concretos una Landing Page que obtendrán la información de contacto de los usuarios, para poder contactarlas y brindarles todo tipo de información
----Inicio^
si bien nuestra solución no es la mejor diseñada, cumple con el propósito de obtener información del usuario para luego almacenarla en una bases de datos, para luego poder utilizarla donde se necesite para poder solucionar el problema.
----Inicio^
En esta parte fue utilizado la librería de react js, con las instalaciones de react-router-dom para las rutas y Axios para la parte de enviar y recibir datos desde un servidor de express js El front end esta dividido en 3 secciones las cuales son:
- Home
- Mas Información
- Ayuda
-Donde home se encarga de mostrar una vista general de la problemática con información estadística -Donde Mas Información se encarga de de proporcionar los principales problemas y sus soluciones -Donde Ayuda se encarga de hacer que el usuario proporcione la información de contacto incluso de poder hacer una donación para ayudar a la causa de salvar el océano
A qui esta el Link para poder ir a ver el diseño de la pagina en el readme
.
----Inicio^
En esta parte se utilizo Express JS para crear el servidor y también se utilizaron las dependencias de Mysql y de cors
En esta parte solo se configuro el despliegue del servidor con el build de react para poder abrir el servidor en el
puerto 3000
----Inicio^
Link al proyecto ya desplegado ("puede que no funcione la conexion a la Base de datos por problemas con la conexion a la misma")
(si esta leyendo esto, la pagina web no cuanta con una conexcion estable a la base de datos, pero si quiere puede ejecutar el servidor en LocalHost para poder probarlo)
Se utilizo el servidor de Azure para poder desplegar la pagina, utilizamos una maquina virtual donde se ejecutan los archivos de la carpeta servidor
----Inicio^
La base de datos llamada hackosean usa de 2 tablas
Una tabla llamada datospago con las columnas de Nombre, NombreDonador, Pago, MSG
Otra tabla llamada datoscandidatos con las comunas de Nombre, Edad, CorreoO también puede copiar los siguientes códigos para crear la base de datos desde cero
CREATE DATABASE hackosean
USE hackosean
CREATE TABLE `hackosean`.`datospago` ( `id` INT NOT NULL AUTO_INCREMENT , `Nombre` VARCHAR(50) NOT NULL , `NombreDonador` VARCHAR(50) NOT NULL , `Pago` INT(70) NOT NULL , `MSG` VARCHAR(100) NOT NULL , PRIMARY KEY (`id`));
CREATE TABLE `test`.`datoscandidatos` ( `id` INT NOT NULL AUTO_INCREMENT , `Nombre` VARCHAR(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NOT NULL , `Edad` INT(50) NOT NULL , `Correo` VARCHAR(70) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NOT NULL , PRIMARY KEY (`id`)) ;
----Inicio^
- Primero Debemos de importar la base de datos y para ello hay 2 formas, 1 crearla desde 0 con alguna interfaz gráfica o usar el código proporcionado arriba
1,1. Para poder usar la base de datos en Local Host es necesario que el usuario sea root y no tenga contraseña
Luego de esto hay que hacer un
npm identro de la carpeta de servidor, para luego escribir el comando denpm startLuego de eso hay que abrir el navegador y poner el url
http:\\localhost:3000Después de eso la pagina ya estaría en linea de forma LocalHost