GUI-DGT-001 Guía de desarrollo para LinkBridge

v 2.1

Objetivo

Esta guía tiene como objetivo brindar asesoramiento sobre entornos de trabajo y paquetes a nuevos desarrolladores que se integren al proyecto. Su implementación busca garantizar un sistema y entorno de desarrollo correctamente adaptado, promoviendo la eficiencia, calidad y coherencia en el desarrollo de software dentro del equipo.

Notas introductorias

En este documento se describen las herramientas, paquetes y claves necesarias para configurar un entorno de desarrollo adecuado. Se abordan desde las aplicaciones a instalar hasta los comandos específicos para la configuración de software, facilitando así la integración y colaboración efectiva dentro del equipo de desarrollo.

Contenido

1. Herramientas a descargar

Antes de comenzar a desarrollar código, es importante que los desarrolladores cuenten con las herramientas adecuadas para garantizar la coherencia de arquitectura de desarrollo, eficiencia y colaboración en el proceso de desarrollo de software.

A continuación, se presentan las herramientas necesarias que todo integrante debe descargar en su ordenador para contribuir de manera correcta.

a. Visual Studio Code

Entorno de desarrollo y editor de código fuente que proporciona herramientas para el desarrollo de software logrando simplificar el proceso al brindar soporte en una gran variedad de lenguajes de programación

En el siguiente link encontrarás las opciones de descarga de visual studio code, descarga la ideal para tu ordenador, teniendo el paquete de descarga, da doble click en él para ejecutar el archivo de instalación, sigue las indicaciones del asistente de instalación para lograr una descarga exitosa.

b. Node.JS

Es el entorno de ejecución utilizado como la plataforma principal para ejecutar y gestionar el servidor del backend, manejando las solicitudes HTTP y procesando la lógica de negocio.

Visita el siguiente link descarga la opción adecuada para tu sistema operativo, teniendo el paquete de instalación sigue las indicaciones del asistente y completas de manera correcta.

c. WindScribe VPN

Permite superar la protección VPN básica al ceder y proteger la navegación privada por internet, bloqueo de anuncios y rastreadores.

En el siguiente link encontrarás las diferentes opciones de descarga, selecciona la que se adapte a tu sistema operativo, teniendo el paquete de descarga, da doble click en él para ejecutar el archivo de instalación, sigue las indicaciones del asistente de instalación para lograr una descarga exitosa.

d. DBeaver

Permite crear componentes de base de datos y realizar funciones básicas en los gestores de las mismas.

Accede al siguiente link y descarga la versión adecuada para tu sistema operativo, Una vez completada la descarga, sigue las indicaciones que te brindaran para instalar la herramienta en tu ordenador.

e. Postman

Facilita hacer solicitudes a API 's REST propias o de terceros, permitiendo el testeo de las mismas.

En este link encontrarás diferentes opciones de descarga e instalación. Escoge la de tu preferencia (te recomendamos hacer la descarga directamente en tu ordenador) y sigue las instrucciones que te proporcionan.

f. Discord

Aplicación de comunicación que permite el uso de texto, foto, video, encuestas, entre otros para facilitar la comunicación entre personas.

Te invitamos a descargarlo en tu ordenador, aquí encontrarás el link para descargarlo, igual tienes opción de usarlo en la web, te recomendamos descargarlo para que recibas notificaciones y no pierdas comunicación de valor. Al descargarlo deberás seguir las instrucciones que te solicite para la correcta instalación.

2. Paquetes a instalar

Es importante asegurar a los desarrolladores de tener los paquetes necesarios para trabajar de manera adecuada, estos paquetes son primordiales en la arquitectura y el trabajo dentro del proyecto.

Paquetes necesarios para el desarrollo de backend:

a. PNPM

Node package manager

En tu terminal escribe el siguiente comando:

npm install -g pnpm

b. Prisma

ORM (Object Relational Mapping) que facilita el acceso y la manipulación de bases de datos. Se utiliza para interactuar con la base de datos, modelar las entidades y realizar consultas de manera más sencilla y segura.

En tu terminal escribe el siguiente comando:

pnpm install -g prisma

c. Express

Framework web minimalista y flexible para Node.js que proporciona un conjunto robusto de características para el desarrollo de aplicaciones web y móviles.

En tu terminal escribe el siguiente comando:

pnpm install -g express

d. Mocha & Chai

Framework de pruebas para JavaScript que permite la ejecución de tests de manera flexible y configurable. Chai es una biblioteca de aserciones que se utiliza junto con Mocha para realizar afirmaciones en las pruebas. Se utilizan para escribir y ejecutar pruebas unitarias y de integración, asegurando la calidad y el correcto funcionamiento del código del backend.

En tu terminal escribe los siguientes comandos:

pnpm install -g chai
pnpm install --save-dev @types/chai
pnpm install -g mocha
pnpm install --save-dev @types/mocha

Paquetes necesarios para el desarrollo de frontend:

a. Tailwind

Framework de CSS que proporciona clases de utilidad para un diseño rápido y responsivo, utilizado para estilizar la aplicación.

En tu terminal escribe el siguiente comando:

pnpm install -D tailwindcss

b. TypeScript

Superset de JavaScript que añade tipado estático y otros elementos para mejorar la escalabilidad y el mantenimiento del código.

En tu terminal escribe el siguiente comando:

pnpm install -g typescript

c. MUI

Libreria de componentes de react de código abierto que sigue los principios de Material Design de Google.

En tu terminal escribe el siguiente comando:

pnpm add @mui/material @emotion/react @emotion/styled

3. Claves de entorno

Es esencial destacar la organización y accesibilidad de las variables de entorno que se utilizan en nuestro proyecto. Para garantizar que todos los miembros del equipo tengan fácil acceso a esta información crucial, hemos centralizado todas las variables de entorno en la herramienta de Discord.

Puedes encontrarlas en la sección de "ZEITGEIST", específicamente en el canal denominado “🔧env".

Este canal está dedicado exclusivamente a listar y actualizar las variables de entorno necesarias para el desarrollo y despliegue de nuestras aplicaciones. Asegúrate de consultar este canal regularmente para obtener las últimas actualizaciones y cambios en las variables de entorno, lo que facilitará la configuración de tu entorno de desarrollo local y ayudará a mantener la coherencia en todos los entornos de desarrollo y producción.

4. Utilización de Herramientas

a. Prisma

Prisma es un ORM (Object Relational Mapping) que facilita el trabajo con bases de datos en aplicaciones Node.js y TypeScript. Ofrece un modelo de datos declarativo y una API de cliente para realizar consultas a la base de datos de manera segura y eficiente.

Comandos importantes:

npx prisma init

Inicializa un nuevo proyecto de Prisma en tu directorio actual, creando los archivos necesarios, como el esquema de Prisma (schema.prisma) y el archivo de configuración de la base de datos (.env).

npx prisma generate

Genera el cliente de Prisma que se utilizará en tu aplicación para interactuar con tu base de datos. Este paso es crucial después de hacer cualquier cambio en el archivo schema.prisma.

npx prisma studio

Lanza Prisma Studio, una interfaz gráfica para explorar y manipular los datos en tu base de datos de manera visual. Es una herramienta útil para desarrolladores y equipos que prefieren una interfaz más intuitiva para gestionar datos.

npx prisma migrate dev

Realiza migraciones de base de datos en entornos de desarrollo. Este comando crea o actualiza tablas en la base de datos según los modelos definidos en tu archivo schema.prisma.

Para hacer migraciones, se necesita un proceso más extenso. Para conocer el proceso consulta la Guía para Hacer Migraciones con Prisma

b. ReactVite

Enfoque moderno para configurar aplicaciones React usando Vite, una herramienta de construcción que mejora significativamente el tiempo de inicio del servidor de desarrollo y ofrece compilaciones rápidas. Vite está diseñado para ofrecer una experiencia de desarrollo más rápida mediante el uso de módulos ES nativos en el navegador, lo que elimina la necesidad de herramientas de empaquetado durante el desarrollo y simplifica el proceso de configuración.

Comandos importantes:

npm create vite@latest

Este comando te permite crear un nuevo proyecto utilizando Vite. Durante la instalación, puedes seleccionar React como framework, configurando así un proyecto ReactVite listo para usar.

npm run dev

Inicia el servidor de desarrollo. Gracias a Vite, el servidor se inicia casi instantáneamente y actualiza los módulos en el navegador tan pronto como haces cambios en el código.

npm run build

Compila tu aplicación para producción. Vite optimiza tu proyecto React utilizando técnicas avanzadas como la división de código y la carga perezosa, asegurando que tu aplicación sea rápida y eficiente.

npm run serve

Este comando permite servir la versión de producción de tu aplicación desde un servidor local para pruebas finales antes del despliegue.

c. Discord

Discord es una herramienta esencial de comunicación para nuestro equipo. Nos permite mantener comunicación fluida, compartir archivos importantes y gestionar información relevante del proyecto de manera eficiente. Utilizamos canales específicos para organizar las discusiones, asegurando que toda la información vital sea fácilmente accesible a todos los miembros del equipo. Este enfoque centralizado en la comunicación ayuda a mantener a todos informados y coordina efectivamente las actividades del proyecto.

Control de cambios

Versión	Cambio realizado	Análisis	Autor	Revisor(es)	Fecha de cambio
v 1.0	Creación de la guía	N/A	Frida Bailleres Denisse Domínguez Sergio Garnica	Olimpia García	15/04/2024
v 2.0	Ajuste de formato	Se modificó el contenido de la guía de acuerdo a la plantilla porque el documento tenía información no requeridas	Yuna Chung	Ricardo Fernández	24/04/2024
v 2.1	Cambio a link relativo	Los links relativos avisan si se rompen	Ricardo Fernández		1/05/2024