Ing. Sistemas Computacionales

Mostrando las entradas con la etiqueta full-stack. Mostrar todas las entradas
Mostrando las entradas con la etiqueta full-stack. 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







Proyecto | ReactJS + Axios | NodeJS + Express + Mongoose | CRUD de Mascotas

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

Mascotas | Aplicación web



Introducción

El proyecto Full-Stack consiste en registrar mascotas con información como edad, nombre, raza y enfermedades, por lo que todos pueden comparar la información de sus mascotas sin necesidad de registrarse a la aplicación web. Fue creado por mi mismo, el día 7 de abril de 2023, inicialmente fue creado una prueba técnica de un puesto de trabajo de desarrollador Full-Stack.


Este proyecto tiene una arquitectura de "FrontEnd y BackEnd desacoplados", fue desarrollado usando ReactJS + Axios para el lado de "FrontEnd" y usando NodeJS + Express + Mongoose para el lado del "BackEnd". 


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 representa un enfoque completo y moderno para el desarrollo de aplicaciones web, integrando frontend, backend, y bases de datos, junto con herramientas de virtualización y contenedores para un manejo eficiente del entorno de desarrollo y despliegue.


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

  • Proyecto con infraestructura virtualizada o proyecto Vagrantizado.

  • Proyecto dockerizado.

  • Proyecto de RectJS + Axios (FrontEnd).

  • Proyecto de NodeJS + Express + Moongose (BackEnd).

  • Base de datos usando MongoDB

  • Mapeador de Documentos a Objetos (ODM con Mongoose).

  • Notificaciones de sistema.

  • CRUD para mascotas (crear, leer, eliminar, actualizar).

¿Cómo funciona?

Es necesario crear un archivo `.env` del proyecto de backend dentro del path **./api**, opcionalmente puede hacer una copia del archivo `.env.example` con el nombre de **.env** que incluyen variables de entorno predeterminado o por default para funcionar con **docker-compose** y **vagrant**. <br> 


```text

# API Mascotas

API_PORT=3033 # Puerto para API mascotas

API_CORS_ORIGIN="http://localhost:3080" # URL de App mascotas


# Mongo Database para MongoDB Atlas

API_MONGO_HOST="<host>"

API_MONGO_PORT=<port>

API_MONGO_DATABASE="<database>"


# Mongo Database para MongoDB Local u Otro

API_MONGO_URI="mongodb://user_vagrant:pass@service_db/db_vagrant?authSource=admin"

```


Variables de entorno | Mascota Api

  • API_PORT *(Requerido)* Puerto para API mascota por default es `3033`

  • API_CORS_ORIGIN *(Requerido)* Es la URL del proyecto frontend de App Mascotas por default es `http://localhost:3033`


Variables de entorno para base de datos | Local u Otro

  • API_MONGO_HOST *(Requerido)*  

  • API_MONGO_PORT *(Requerido)* 

  • API_MONGO_DATABASE *(Requerido)*

  • API_MONGO_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`


Configuración Previa | Frontend | Mascota App

Es necesario crear un archivo `.env` del proyecto de backend dentro del path **./mascotas-app**, opcionalmente puede hacer una copia del archivo `.env.example` con el nombre de **.env** que incluyen variables de entorno predeterminado o por default para funcionar con **docker-compose** y **vagrant**. <br> 


```text

# Base URL de Moscota API

REACT_APP_MASCOTA_API="http://localhost:3033/api/v1/mascota"

```


Variables de entorno | Mascota App

*  **REACT_APP_MASCOTA_API** *(Requerido)* Es la URL del proyecto backend de Mascotas API por default es `http://localhost:3033/api/v1/mascota`


Correr aplicación de forma independiente (Usando npm)

Es necesario ejecutar el siguiente comando desde donde se encuentra el archivo **package.json** de cada respectivo proyecto. 


Configuración previa

Antes de ejecutar los proyectos Frontend (App Mascotas) y Backend (API Mascota) es necesario configurar el archivo `.env`  de cada respectivo proyecto. 


Ejecutar Frontend

Es necesario ejecutar el proyecto frontend usando el sig. comando dentro del path **./mascotas-app/**


$ npm run start



Ejecutar Backend

Es necesario ejecutar el proyecto backend usando el sig. comando dentro del path **./api/**

$ npm run dev


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 Frontend (App Mascotas) y Backend (API Mascota) es necesario configurar el archivo `.env`  de cada respectivo proyecto. 


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 la directorio/carpeta raíz donde se encuentra el archivo **Vagranfile** 


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 definidas en el archivo **docker-compose.yml** (Por defecto).


Configuración previa

Antes de ejecutar los proyectos Frontend (App Mascotas) y Backend (API Mascota) es necesario configurar el archivo `.env`  de cada respectivo proyecto.


Crear maquina virtual

Este comando crea una máquina virtual usando **'vagrant'** para correr *docker* y *docker-compose* dentro de ella. <br>

Por tal motivo, este comando se debe ejecutar una sola vez. 


$ vagrant up 



Construir y levantar el proyecto

Este comando reinicia la maquina virtual usando **'vagrant'**, así también ejecuta la provision *run-workspace* definida en el archivo *Vagrantfile*. <br>

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


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


$ vagrant reload 


Ejecutar los contenedor individualmente y manualmente


Este comando levanta en segundo plano el servicio *__service_db__*


  $ doc run -d -p 2780:2780 -v /home/vagrant/data:/data/db -t service_db mongod --port 27080 --dbpath /data/db



Este comando levanta en segundo plano el servicio *__service_api__*


$ doc run -p 3033:3033 -v /home/max98/workspace/api/node_modules -t service_api npm run dev --no-deps




Vista previas




domingo, 5 de diciembre de 2021

Práctica | ReactJS + SpringBoot | CRUD Full-Stack

diciembre 05, 2021 Creado por Victor Jesus Maximo Abundio Sin comentarios

CRUD | Full-Stack



Introducción

Esta práctica consiste en crear un CRUD para empleados con la información de nombre, puesto, correo electrónico. Fue creado por mi mismo, el día 5 de diciembre de 2021.


Este proyecto tiene una arquitectura de "FrontEnd y BackEnd desacoplados", fue desarrollado usando ReactJS + Axios para el lado de "FrontEnd" y usando Spring Boot + MySQL para el lado del "BackEnd". 


También se utilizó la base de datos de MySQL para almacenar los datos usando Hibernate + JPA DATA como ORM, por lo que los datos se guardan en la nube, y pueden ser fácilmente recuperados.


Ver proyecto (GitHub)

Objetivo

El objetivo de la práctica es usar la arquitectura que se enfoque completo y moderno para el desarrollo de aplicaciones web, integrando frontend, backend, y bases de datos.


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

  • Proyecto de RectJS + Axios (FrontEnd).

  • Proyecto de SpringBoot + MySQL (BackEnd).

  • Base de datos usando MySQL

  • Mapeo Objeto-Relacional (ORM con Hibernate y Data JPA).

  • CRUD para mascotas (crear, leer, eliminar, actualizar).

Las herramientas utilizadas para la práctica son:

  • Visual Studio Code (editor de texto)

  • NPM (gestor de paquetes)

  • Git (control de versiones)

  • GitHub (almacenamiento de repositorios)

  • MySQL (base de datos)

  • Terminal 

  • etc.

Conocimientos obtenidos

Spring Boot es un framework basado en Java que se utiliza para crear aplicaciones web y servicios backend de manera rápida y sencilla. 


ReactJS es una biblioteca de JavaScript de código abierto utilizada para construir interfaces de usuario, especialmente para aplicaciones web de una sola página (SPA, por sus siglas en inglés).


Axios es una biblioteca de JavaScript utilizada para realizar solicitudes HTTP desde el navegador o Node.js.


Al desarrollar la práctica se obtiene conocimientos acerca de 

  • SpringBoot   Para crear un servicio backend.

  • ReactJs  Para crear una aplicación web.

  • Hibernate y Data JPA  Manipular la base de datos en aplicaciones Java usando ORM.

  • MySQL  Para crear base de datos, crear tablas, insertar datos, actualizar datos, eliminar datos, consultar datos, etc.

  • Axios  Para enviar solicitudes de tipo GET, POST, PUT, DELETE, etc.

  • NPM  Para descargar, instalar y desinstalar paquetes.

  • Git  Para crear commit, crear ramas, fusionar ramas, subir repositorio a GitHub, etc.

  • etc.


Notas

  • El proyecto se ha desarrollado con una arquitectura de "BackEnd y FrontEnd desacoplado", por lo que, es necesario iniciar los servicios por separado.


¿Cómo funciona?

Correr aplicación de forma independiente (Usando npm)

Es necesario ejecutar el siguiente comando desde donde se encuentra el archivo **package.json** de cada respectivo proyecto. 


Configuración previa

Antes de ejecutar los proyectos Frontend (ReactJs) y Backend (API SpringBoot) es necesario configurar el archivo `.env`  de cada respectivo proyecto. 


Ejecutar Frontend

Es necesario ejecutar el proyecto frontend usando el sig. comando dentro del path **./react-app/**


$ npm install

$ npm run start


Ejecutar Backend

Es necesario ejecutar el proyecto backend usando el sig. comando dentro del path **./spring-api/**


$ mvn clean install

$  mvn spring-boot:run

 

Vista previas