Ing. Sistemas Computacionales

Mostrando las entradas con la etiqueta handlebars. Mostrar todas las entradas
Mostrando las entradas con la etiqueta handlebars. Mostrar todas las entradas

viernes, 7 de abril de 2023

Proyecto | ReactJS | MusicApp

abril 07, 2023 Creado por Victor Jesus Maximo Abundio Sin comentarios

MusicApp | Aplicación web





Introducción



El proyecto Full-Stack consiste en registrar música con información sobre título, artista, género y año, por lo que todos pueden compartir la información de sus canciones favoritas sin necesidad de registrarse a la aplicación web. Fue creado por mi mismo, el día 7 de abril de 2023.


Este proyecto tiene una arquitectura "monolítica", fue desarrollado usando usando NodeJS + Express + Mongoose + MongoDB + Handlebars. Así también, se utilizó la base de datos de MongoDB para almacenar los datos usando Mongoose cómo ODM, por lo que los datos se guardan en la nube, y pueden ser fácilmente recuperados.


Por último, pero no menos importante, este proyecto, implementa Vagrant con Ubuntu 18.02LTS como sistema operativo, además de incluir Docker y Docker-compose para crear y lanzar servicios (mongodb:4.0, node:14.21.3-slim, ) por contenedores. Por lo que, se puede probar usando Docker / Docker-compose / NPM.


Ver proyecto (GitHub)

Funciones

Esta arquitectura está compuesto por un solo código que maneja las rutas (endpoints), la lógica de negocio, y la interacción con la base de datos, sigue el enfoque de una arquitectura "monolítica", similar a cómo se estructuran las aplicaciones con Laravel.

Este conjunto de tecnologías y características para este aplicación web:

  • Proyecto con infraestructura virtualizada o proyecto Vagrantizado.
  • Proyecto dockerizado.
  • Proyecto con arquitectura "monolítica".
  • Patrón de diseño MVC (Modelo-Vista-Controlador)
  • Base de datos usando MongoDB.
  • Mapeador de Documentos a Objetos (ODM con Mongoose).
  • Notificaciones de sistema.
  • CRUD para música (crear, leer, eliminar, actualizar).

¿Cómo funciona?

Configuración Backend

Es necesario crear un archivo `.env` del proyecto de backend dentro del path **/**(raíz), opcionalmente puede hacer una copia del archivo `.env.example` con el nombre de **.env** que incluyen variables de entorno


Variables de entorno para proyecto | Musicapp

  • APP_PORT *(Requerido)* Puerto para la aplicación por defecto es `3015`


Variables de entorno para base de datos | MongoDB Atlas

  • APP_DB_USER *(Requerido)*
  • APP_DB_PASSWORD *(Requerido)*
  • APP_DB_DATABASE *(Requerido)*


Variables de entorno para base de datos | Otros

  • APP_DB_URI *(Opcional)*
Solo en caso de requerir usuario y contraseña, por ejemplo: `mongodb://<user>:<password>@<host>:<port>/<database>?<options>`. Esta variable de entorno anula las anteriores.

El URI por defecto es mongodb://user_vagrant:pass@service_db/db_vagrant?authSource=admin

Correr aplicación de forma independiente (Usando npm)

Configuración previa

Antes de ejecutar la aplicación es necesario configurar el archivo `.env` en la ruta **./** (raíz), la configuración necesario es la siguiente:

```text
# MusicApp
APP_PORT=3015 # Puerto para Music App

# Database para Servidor de MongoDB Atlas
APP_DB_USER="<user>"
APP_DB_PASSWORD="<password>"
APP_DB_DATABASE="<database>"

# Database para Servidor Local
APP_DB_URI="mongodb://user_musicapp:pass@service_db/db_musicapp?authSource=admin" # Opcional
```

Iniciar la aplicación

Es necesario ejecutar el comando dentro del path para iniciar la aplicación ./ (raíz)

$ npm run start

Correr aplicación de forma automatizada (Usando docker-compose)


Es necesario ejecutar el siguiente comando desde donde se encuentra el archivo docker-compose.yml

Configuración previa

Antes de ejecutar los proyectos es necesario configurar el archivo `.env` en la ruta ./musicapp, la configuración necesario es la siguiente:

```text
# MusicApp
APP_PORT=3015 # Puerto para Music App

# Database para Servidor de MongoDB Atlas
APP_DB_USER="<user>"
APP_DB_PASSWORD="<password>"
APP_DB_DATABASE="<database>"

# Database para Servidor Local
APP_DB_URI="mongodb://user_musicapp:pass@service_db/db_musicapp?authSource=admin" # Opcional
```


Esto construye y corre la aplicación en segundo plano

$ docker-compose build && docker-compose up -d

Esto detiene y elimina la aplicación

$ docker-compose stop -f && docker-compose rm -f


Correr aplicación de forma automatizada (Usando vagrant)

Nota:

Es necesario ejecutar el siguiente comando desde el directorio/carpeta raíz donde se encuentra el archivo docker-compose.yml.


Cabe mencionar que el archivo docker-compose.yml es creado y configurado específicamente para ejecutarse dentro de vagrant.

Así también el comando "vagrant up" o "vagrant reload", levanta los servicios definidos en el archivo docker-compose.yml (Por defecto).

Configuración previa

Antes de ejecutar los proyectos es necesario configurar el archivo `.env` en la ruta ./musicapp, la configuración necesario es la siguiente:


```text
# MusicApp
APP_PORT=3015 # Puerto para Music App

# Database para Servidor de MongoDB Atlas
APP_DB_USER="<user>"
APP_DB_PASSWORD="<password>"
APP_DB_DATABASE="<database>"

# Database para Servidor Local
APP_DB_URI="mongodb://user_musicapp:pass@service_db/db_musicapp?authSource=admin" # Opcional
```



Crear maquina virtual

Este comando crea una máquina virtual usando 'vagrant' para correr docker y docker-compose dentro de ella. Por tal motivo, este comando se debe ejecutar una sola vez.

$ vagrant up


Construir y levantar el proyecto
Este comando reinicia la máquina virtual usando 'vagrant', así también ejecuta la provision run-workspace definida en el archivo Vagrantfile.

run-workspace : Suspende, Elimina, Construye y Levanta los servicios de __docker-compose__ en el mismo orden.

Por tal motivo, este comando se puede ejecutar las veces que sean necesarias.

$ vagrant reload

Vista previas







martes, 30 de noviembre de 2021

Proyecto | NodeJS + Express + MongoDB + HandleBars | Notas App

noviembre 30, 2021 Creado por Victor Jesus Maximo Abundio Sin comentarios

Notas App | Aplicación web




Introducción

Este proyecto fue creado en 30 Noviembre de 2021, es un proyecto que consiste en un CRUD para notas con la funcionalidad de un sistema de autenticación, es decir, el sistema permite verificar la identidad de un usuario (con login y register).

La aplicación web cuenta con una conexión a base de datos, es decir, que almacena información en la nube, y se puede recuperar en cualquier momento.

Cada usuario se puede registrar con su correo electrónico y una contraseña, y dentro del sistema cada usuario puede registrar notas.

La aplicación web fue desarrollado usando: NodeJS + MongoDB + Bootstrap v5

Además de incluir módulos de npm como : bcryptjs, connect-flash, express-handlebars, mongoose, etc.

Ver proyecto (GitHub)

Funciones

La aplicación web cuenta con las siguientes funcionalidades y componentes:
  • Registrar usuario con correo electrónico y contraseña.
  • Iniciar sesión (o login)
  • Cerrar sesión (o logout)
  • Notificaciones de sistema.
  • Encriptación de contraseñas.
  • Motor de plantillas (con Handlebars).
  • Mapeador de Documentos a Objetos (ODM con Mongoose).
  • Conexión a una base de datos usando MongoDB.
  • Recuperar datos de cada usuario.
  • CRUD para notas (crear, leer, eliminar, actualizar).
En conjunto, estos elementos forman un sistema web que permite a los usuarios:
  • Autenticarse (registrarse, iniciar sesión, cerrar sesión).
  • Gestionar notas personales.
  • Interactuar con la base de datos a través de MongoDB y Mongoose, utilizando un enfoque seguro (encriptación de contraseñas) y una interfaz dinámica creada con Handlebars.

¿Cómo funciona?

Para hacer funcionar la aplicación web es necesario tener instalado Node JS y MongoDB, en sus máquina de host, posteriormente puede seguir las siguientes instrucciones para poder usarlo de forma local.

Paso 1)
Accede a la carpeta del proyecto usando el sig. comando desde la terminal:

```shell

$ cd ./app-notas-mongodb-nodejs

```

Paso 2)
Crear una copia del archivo `.env.local` con el nombre de `.env` para establecer variables de entorno, para la aplicación.

NOTA: Puede modificar los valores de cada variable de entorno, o también puede dejarlo por defecto.

Paso 4)
Ejecutar el sig. comando para descargar dependencias de NodeJS

```shell
$ npm install
```

Paso 5)
Ejecutar el sig. comando para correr la aplicación web.

```shell
$ npm run dev
```

Vista previas