Herramientas de usuario

Herramientas del sitio


ada:howto:sicoferp:factory:new-migracion-sicoferp:front:primeros

Diferencias

Muestra las diferencias entre dos versiones de la página.

Enlace a la vista de comparación

Ambos lados, revisión anterior Revisión previa
Próxima revisión
Revisión previa
ada:howto:sicoferp:factory:new-migracion-sicoferp:front:primeros [2024/06/24 12:07]
192.168.177.98
ada:howto:sicoferp:factory:new-migracion-sicoferp:front:primeros [2024/08/28 12:32] (actual)
192.168.177.30
Línea 1: Línea 1:
-Configuración del entorno frontend paso a paso+**Configuración del entorno frontend paso a paso 
 +**
  
 1. Descargar e Instalar Git Bash 1. Descargar e Instalar Git Bash
 +
   * Descarga e instala Git Bash desde https://​www.git-scm.com/​downloads   * Descarga e instala Git Bash desde https://​www.git-scm.com/​downloads
  
Línea 7: Línea 9:
  
 3. Instalar NVM (Node Version Manager) 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   * 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 4. Instalar Node.js Versión 20
-   ​- ​Ejecuta el siguiente comando en Powershell: + 
-     ​+  *  ​Ejecuta el siguiente comando en Powershell: ​    
      nvm install 20      nvm install 20
  
-   ​- ​Verifica que la instalación fue exitosa verificando su versión con: +  * Verifica que la instalación fue exitosa verificando su versión con:
-     +
      nvm ls      nvm ls
            
-   ​- ​Si estás utilizando otra versión de Node.js, ejecuta: +  * Si estás utilizando otra versión de Node.js, ejecuta: ​    
-     ​+
      nvm use 20      nvm use 20
            
 5. Clonar el Proyecto con Git Clone 5. Clonar el Proyecto con Git Clone
-   ​- ​Utiliza el siguiente comando para clonar el proyecto desde GitHub:+ 
 +  * Utiliza el siguiente comando para clonar el proyecto desde GitHub:
            
-     git clone https://​github.com/​simongilr/​appVersionOne.git+  * git clone https://​github.com/​simongilr/​appVersionOne.git
   ​   ​
-6. Crear Rama de desarrollo +   
-- Para crear su rama de desarrollo ejecute en gitbash: +6. Instalar Dependencias del Proyecto 
-      +  ​* ​En Git Bash, navega hasta el directorio del proyecto y ejecuta:
-     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      npm install
  
 7. Iniciar y Compilar el Proyecto 7. Iniciar y Compilar el Proyecto
-   ​- ​Para iniciar el proyecto, ejecuta: +  * Para iniciar el proyecto, ejecuta:  
-     ​+    
      npm run start      npm run start
  
-   ​- ​Para generar el traspilado, utiliza:+  * Para generar el traspilado, utiliza:
            
      npm run build      npm run build
  
-   ​- ​Se puede especificar el ambiente deseado agregando un sufijo, por ejemplo:+  * Se puede especificar el ambiente deseado agregando un sufijo, por ejemplo:
            
      npm run start:qa      npm run start:qa
      npm run build:qa      npm run build:qa
 +     
 +     
 +8. Crear Rama de desarrollo
 + Para crear su rama de desarrollo ejecute en gitbash:
 +     
 + git checkout -b hotfix/​nombre-de-la-rama
 +
 +9. Generar Componentes Angular
  
-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. 
-   ​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. 
-   - Elimina las líneas de imports y standalone. +  ​* ​En su lugar, crea un módulo usando:
-   - En su lugar, crea un módulo usando:+
            
      ng g m /​ruta-al-componente-generado-anteriormente      ng g m /​ruta-al-componente-generado-anteriormente
            
-   ​- ​O ejecuta el comando siguiente para crear el componente sin standalone:+  * O ejecuta el comando siguiente para crear el componente sin standalone:
            
      ng g c /​ruta-del-componente/​nombre-del-componente --standalone false      ng g c /​ruta-del-componente/​nombre-del-componente --standalone false
            
-9. Configurar Módulos de Angular+10. Configurar Módulos de Angular
    - Dentro del módulo creado, agrega el componente en “imports” y “exports” para su uso dentro del proyecto.    - 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    - Para hacer uso del componente se debe de exportar el módulo
  
-10. Componentes de PrimeNG+11. 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 ​ - 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. ​ - Una vez instala PrimeNG se puede hacer uso de los componentes de la sección “Componentes” de su página web, sección FEATURES. ​
Línea 75: Línea 79:
 Ejemplo: se desea hacer uso de un calendario de PrimeNG; en este caso se consigue el código: ​ Ejemplo: se desea hacer uso de un calendario de PrimeNG; en este caso se consigue el código: ​
  
 +<​code>​
 <​ng-container *ngIf="​field.type === '​calendar'">​ <​ng-container *ngIf="​field.type === '​calendar'">​
         <div class="​flex-auto">​         <div class="​flex-auto">​
Línea 86: Línea 90:
         </​div>​         </​div>​
 </​ng-container>​ </​ng-container>​
 +</​code>​
 +
  
 Este segmento hace parte de un formulario, pero se debe enlazar a la API formterceros.ts para enlazar el componente con el backend Este segmento hace parte de un formulario, pero se debe enlazar a la API formterceros.ts para enlazar el componente con el backend
Línea 95: Línea 101:
 De esta forma “fechadecreacion” es tipo “calendar” lo que lo enlaza al componente De esta forma “fechadecreacion” es tipo “calendar” lo que lo enlaza al componente
  
 +
 +12. Configurar hook git en el proyecto.
 +
 +Es necesario que el hook locales tengan permiso en la raiz del proyecto ​
 +  * chmod +x /​hooks/​pre-push
 +
 +Es necesario que git apunte al directorio hock
 +  *  git config core.hooksPath hooks
 +
 +Importante
 +
 +Si se requiere hacer un push tradicional sin que le afecte el hook y por ende no genere versionado se debe utilizar la siguiente bandera git push –no-verify
 +
 +También aplica para posibles problemas con la receta hook o si no ha preparado el proyecto local para el hook como se indicó anteriormente.
 +
 +Para más información consultar guía de versionado.
  
 [[ada:​howto:​sicoferp:​factory:​new-migracion-sicoferp:​front|←Regresar]] [[ada:​howto:​sicoferp:​factory:​new-migracion-sicoferp:​front|←Regresar]]
 +
  
ada/howto/sicoferp/factory/new-migracion-sicoferp/front/primeros.1719230823.txt.gz · Última modificación: 2024/06/24 12:07 por 192.168.177.98