Herramientas de usuario
ada:howto:sicoferp:factory:new-migracion-sicoferp:front:primeros
Diferencias
Muestra las diferencias entre dos versiones de la página.
| 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:12] 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 | ||
| Línea 16: | Línea 17: | ||
| nvm install 20 | nvm install 20 | ||
| - | * Ítem de lista desordenadaVerifica 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 | ||
| Línea 28: | Línea 29: | ||
| * 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 |
| - | + | ||
| - | git checkout -b hotfix/nombre-de-la-rama | + | |
| - | + | ||
| - | + | ||
| - | 7. Instalar Dependencias del Proyecto | + | |
| * En Git Bash, navega hasta el directorio del proyecto y ejecuta: | * En Git Bash, navega hasta el directorio del proyecto y ejecuta: | ||
| Línea 52: | Línea 48: | ||
| 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 | ||
| - | 8. Generar Componentes Angular | + | 9. 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. | ||
| Línea 65: | Línea 67: | ||
| 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 77: | 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 88: | 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 97: | 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.1719231125.txt.gz · Última modificación: 2024/06/24 12:12 por 192.168.177.98
Herramientas de la página
