Wiki

¡Esta es una revisión vieja del documento!

---

Configuración del entorno frontend paso a paso

1. Descargar e Instalar Git Bash

1. Descarga e instala Git Bash desde https://www.git-scm.com/downloads

2. Crear una Carpeta para el Proyecto 3. Instalar NVM (Node Version Manager)

1. Descarga e instala NVM (Node Version Manager) desde https://github.com/coreybutler/nvm-windows/releases/download/1.1.12/nvm-setup.exe

4. Instalar Node.js Versión 20

1. Ejecuta el siguiente comando en Git Bash:

nvm install 20

   ```
 - Verifica que la instalación fue exitosa verificando su versión con:
   
   nvm ls
   ```
 - Si estás utilizando otra versión de Node.js, ejecuta:
   
   nvm use 20
   ```

5. Clonar el Proyecto con Git Clone

1. Utiliza el siguiente comando para clonar el proyecto desde GitHub:

git clone https://github.com/simongilr/appVersionOne.git

   ```

6. Crear Rama de desarrollo - Para crear su rama de desarrollo ejecute en gitbash:

   
   git checkout -b hotfix/nombre-de-la-rama
   ```

7. Instalar Dependencias del Proyecto

1. En Git Bash, navega hasta el directorio del proyecto y ejecuta:

npm install

   ```

7. Iniciar y Compilar el Proyecto

1. Para iniciar el proyecto, ejecuta:

npm run start

   ```
 - Para generar el traspilado, utiliza:
   
   npm run build
   ```
 - Se puede especificar el ambiente deseado agregando un sufijo, por ejemplo:
   
   npm run start:qa
   npm run build:qa
   ```

8. Generar Componentes Angular

1. Al generar un componente usando `ng g c rutal-del-componente/nombre-del-componente`, ten en cuenta que los componentes standalone no se están utilizando.
2. Elimina las líneas de imports y standalone.
3. En su lugar, crea un módulo usando:

ng g m /ruta-al-componente-generado-anteriormente

   
 - O ejecuta el comando siguiente para crear el componente sin standalone:
   
   ng g c /ruta-del-componente/nombre-del-componente --standalone false
   

9. Configurar Módulos de Angular

1. Dentro del módulo creado, agrega el componente en “imports” y “exports” para su uso dentro del proyecto.
2. Para hacer uso del componente se debe de exportar el módulo

10. Componentes de PrimeNG - Antes de hacer uso de los componentes de PrimeNG se debe de seguir sus pasos de instalación los cuales puedes encontrar en: https://primeng.org/installation - Una vez instala PrimeNG se puede hacer uso de los componentes de la sección “Componentes” de su página web, sección FEATURES. - Copie y pegue el componente que desea usar y acomode a sus necesidades - En la sección de API puede encontrar todas las propiedades del componente que necesite

Ejemplo: se desea hacer uso de un calendario de PrimeNG; en este caso se consigue el código:

<ng-container *ngIf=“field.type === 'calendar'”>

      <div class="flex-auto">
          <label for="buttondisplay" class="font-bold block mb-2"> Button </label>
          <p-calendar [(ngModel)]="user[field.model]" dateFormat="yy-mm-dd" [utc]="true" firstDayOfWeek="0"
              [(ngModel)]="date1" 
              [showIcon]="true" 
              inputId="buttondisplay" 
              [showOnFocus]="false" />
      </div>

</ng-container>

Este segmento hace parte de un formulario, pero se debe enlazar a la API formterceros.ts para enlazar el componente con el backend

    { id: 'fechadecreacion', name: 'fechadecreacion', label: 'Fecha de creación', type: 'calendar', placeholder: 'fechadecreacion', model: 'fechadecreacion', maxlength: 80, required: false },

De esta forma “fechadecreacion” es tipo “calendar” lo que lo enlaza al componente