Wiki

Has cargado una revisión vieja del documento! Si la guardas crearás una versión nueva con estos datos.

Configuración del entorno frontend paso a paso

1. Descargar e Instalar Git Bash
   - 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)
   - 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
   - Ejecuta el siguiente comando en Powershell:
     
     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
   - 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
   - En Git Bash, navega hasta el directorio del proyecto y ejecuta:
     
     npm install

7. Iniciar y Compilar el Proyecto
   - 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
   - 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.
   - Elimina las líneas de imports y standalone.
   - 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
   - Dentro del módulo creado, agrega el componente en “imports” y “exports” para su uso dentro del proyecto.
   - 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

[[ada:howto:sicoferp:factory:new-migracion-sicoferp:front|←Regresar]]

Resumen de la edición

Wiki

Herramientas de usuario

Herramientas del sitio

Herramientas de la página