Herramientas de usuario
ada:howto:sicoferp:factory:new-migracion-sicoferp:front:primeros
Diferencias
Muestra las diferencias entre dos versiones de la página.
| Próxima revisión | Revisión previa | ||
|
ada:howto:sicoferp:factory:new-migracion-sicoferp:front:primeros [2024/06/21 13:14] 192.168.177.98 creado |
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 | ||
| 2. Crear una Carpeta para el Proyecto | 2. Crear una Carpeta para el Proyecto | ||
| + | |||
| 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 Git Bash: | + | |
| - | ``` | + | * 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: | ||
| - | ``` | ||
| - | 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 | + | * Utiliza el siguiente comando para clonar el proyecto desde GitHub: |
| - | - En Git Bash, navega hasta el directorio del proyecto y ejecuta: | + | |
| - | ``` | + | * git clone https://github.com/simongilr/appVersionOne.git |
| + | |||
| + | |||
| + | 6. 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. 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. | + | 8. Crear Rama de desarrollo |
| - | - Elimina las líneas de imports y standalone. | + | Para crear su rama de desarrollo ejecute en gitbash: |
| - | - En su lugar, crea un módulo usando: | + | |
| - | ``` | + | git checkout -b hotfix/nombre-de-la-rama |
| + | |||
| + | 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. | ||
| + | * Elimina las líneas de imports y standalone. | ||
| + | * 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 72: | 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 83: | 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 92: | 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/primeros.1718975672.txt.gz · Última modificación: 2024/06/21 13:14 por 192.168.177.98
Herramientas de la página
