Este proyecto fue desarrollado como requerimiento para la asignatura de Desarrollo de Aplicaciones Web perteneciente al Departamento de Telemática del programa de Ingeniería en Electrónica y Telecomunicaciones de la Universidad del Cauca. El objetivo específico del desarrollo del proyecto es reforzar los conceptos más importantes para la implementación de aplicaciones web desde el desarrollo FrontEnd.
Para replicar este proyecto, debe realizar los siguientes pasos:
-
Para crear el nuevo proyecto utilizando Firebase como Backend as a Service (BaaS), debe ingresar a:
Después, debe dar click en "Agregar proyecto".
-
Para crear la nueva aplicación web, debe dar click en el icono web
</>
en la sección "Agregar Firebase a su aplicación". Una vez en esta vista, debe asignarle un nombre a su aplicación web y paso seguido debe almacenar los valores de configuración de su aplicación (como los presentados a manera de ejemplo en la siguiente imagen), para poderlos configurar como variables de entorno más adelante. -
Una vez que ya ha generado correctamente su proyecto y ha configurado su aplicación web para que funcione la autenticación de la aplicación, debe configurar a Google como proveedor. Para ello, en el panel lateral izquierdo debe observar una sección que dice "Build", dentro de ella encontrará una subsección que dice "Authentication". Dando click en esa subsección, también deberá dar un click en el botón "Get Started". La imagen a continuación lo guiará de manera visual.
Después debe dar click en el botón "Google", y habilitarlo como proveedor de autenticación. La imagen a continuación lo guiará de manera visual.
-
En la misma subsección que dice "Authentication", debe habilitar la autenticación con correo y contraseña. La imagen a continuación lo guiará de manera visual.
-
Las base de datos en Firestore es el método de persistencia más famoso que brinda Firebase a sus usuarios. Para habilitarlo, nuevamente en el panel lateral izquierdo en la sección "Build" debe seleccionar la subsección "Firestore". Nuevamente debe dar click en el botón "Create database". La imagen a continuación lo guiará de manera visual.
Otro punto importante en la habilitación de Firestore es la configuración de las reglas de seguridad. Para este caso, el proyecto está en estado de desarrollo, por este motivo debe seleccionar la opción "Start in test mode". La imagen a continuación lo guiará de manera visual.
-
Storage es una opción muy útil brindada por Firebase para el almacenamiento de recursos audiovisuales de forma sencilla pero eficiente. De forma similar al paso anterior, en la sección "Build" debe seleccionar la subsección "Storage" y configurar las reglas de seguridad seleccionando la opción "Start in test mode". La imagen a continuación lo guiará de manera visual.
Una vez ha configurado Firebase, para clonar el repositorio en su entorno local ejecute:
git clone http://github.com/jdcarvajalc/crud-react-app.git
No olvide dejar su estrella ⭐ a este repositorio por favor!
En su consola de preferencia ejecute:
npm install
Caution
No comparta sus variables de entorno
Es importante que sean cambiadas las variables de entorno en el archivo .env_example, reemplazando YOURS
en cada de una de ellas con los datos proporcionados en la creación de la aplicación web con Firebase.
REACT_APP_FIREBASE_API_KEY="YOURS"
REACT_APP_FIREBASE_AUTH_DOMAIN="YOURS"
REACT_APP_FIREBASE_PROJECT_ID="YOURS"
REACT_APP_FIREBASE_STORAGE_BUCKET="YOURS"
REACT_APP_FIREBASE_MESSAGING_SENDER_ID="YOURS"
REACT_APP_FIREBASE_APP_ID="YOURS"
Después, para que funcionen las variables de entorno debe cambiar el nombre del archivo .env_example a .env
en su repositorio local.
Una vez que haya terminado de instalar las dependencias y haya configurado las variables de entorno, puede ejecutar el proyecto. En su consola de preferencia ejecute:
npm start
Este comando ejecuta la aplicación en modo de desarrollo.
Abra http://localhost:3000 para verla en su navegador de preferencia.
Color | Hex |
---|---|
Color principal | #1f3c4d |
Color de título | #0d1e2b |
Color de texto | #45637d |
Color de texto claro | #afafb8 |
Color de borde | #a0a7ac |
Color de contenedor | #fff |
Color de cuerpo | #fafbfb |