Creación de nuevas aplicaciones

Utilice uno de los esquemas angulares proporcionados por IBMpara generar una nueva aplicación y, a continuación, acceder a la aplicación dentro de Order Hub desde un nuevo elemento de menú.

Menú Order Hub con un nuevo elemento de menú que indica "Página personalizada" que puede apuntar a la nueva aplicación

Cuando crea una aplicación con los esquemas, la aplicación resultante se configura automáticamente para incluir las bibliotecas utilizadas por Order Hub para comunicarse con diversos servicios, como por ejemplo:

El backend del sistema Sterling™ Order Management System
Sterling Intelligent Promising Inventory Visibility arrendatarios
Otros arrendatarios de microservicios
Bibliotecas de IU de Carbon para diseñar páginas con el mismo aspecto que las páginas existentes en Order Hub.

Puede utilizar los scripts para generar uno de los siguientes repositorios angulares:

Un monorepo angular, similar a cómo se orquesta todo el código de Order Hub .
Un repositorio Angular básico.

Creación de un monorepo de Order Hub

Este esquema crea un nuevo monorepo utilizando Lerna y Single-Spa.

Asegúrese de que ha extraído el código de Order Hub . Para obtener más información, consulte Iniciación a la personalización de Order Hub.
Abra un terminal y vaya al directorio de código Order Hub .
- La ubicación predeterminada es devtoolkit_docker/orderhub-code.
Ejecute el mandato siguiente para establecer strict-ssl en false.
```
npm config set "strict-ssl" false
```
Ejecute uno de los siguientes comandos para reinstalar la última versión de @buc/schematics y acceder a los esquemas proporcionados por IBM. Para Angular v18, ejecute el siguiente comando.
```
npm uninstall -g @buc/schematics
npm install -g ./lib/buc/schematics/schematics-v4latest.tgz
```
Para Angular v20, ejecute el siguiente comando.
```
npm uninstall -g @buc/schematics
npm install -g ./lib/buc/schematics/schematics-v5latest.tgz
```

Cree una carpeta para la aplicación. El nombre de la carpeta es el nombre del módulo. En la carpeta, cree un archivo app-config.json que describa las rutas del módulo. El valor de "name" debe ser el nombre del módulo. Por ejemplo:

{
  "name": "custom-monorepo",
  "devServerConfig": {
      "port": 9300,
      "contextRoot": "/custom-monorepo"
  },
  "prodServerConfig": {
      "hostName": "static.omsbusinessusercontrols.ibm.com"
  },
  "routes": {
      "custom-page1": {
          "devServerConfig": {
              "port": 9301,
              "contextRoot": "/custom-page1"
          }
      },
      "custom-page2": {
          "devServerConfig": {
              "port": 9302,
              "contextRoot": "/custom-page2"
          }
      }
  }
}

En el terminal, vaya a la carpeta que ha creado.
Ejecute el mandato siguiente.
```
ng new --collection=@buc/schematics \
--app-config-json=<app-config.json-file-name> \
--module-short-name=<short-name-for-the-module> \
--prefix=<selector-prefix> 
```
El esquema da soporte a las opciones siguientes.
- --skip-git: no inicialice un repositorio GitHub . El valor predeterminado es false.
- --commit: Información de confirmación de repositorio git inicial. El valor predeterminado es true.
- --app-config-json: esta opción es obligatoria. Utilice el archivo app-config.json que ha creado en el paso 5.
- --module-short-name: el nombre abreviado del módulo. Si el nombre del módulo tiene guiones, el nombre abreviado debe ser el texto después del último guión. Por ejemplo, si el nombre del módulo es buc-app-settings, el nombre abreviado del módulo debe ser settings.
  Nota: El paquete root-config se genera basándose en module-short-name. No cambie el nombre ni añada un prefijo a module-short-name o no podrá desplegar las personalizaciones.
- --prefix: el selector HTML que se utiliza para los componentes generados. Valor predeterminado: buc
- --shared-library-name: el nombre de la biblioteca compartida. El nombre predeterminado es <module-short-name>-shared. El nombre del paquete es @ < prefijo>/< nombre-abreviado_módulo>-shared.
- --generate-root-config: Indica si se debe generar un proyecto de direccionador de configuración raíz. El valor predeterminado es true.
- --skip-install: Indica si se deben instalar paquetes. El valor predeterminado es false.
Por ejemplo:
```
ng new --collection=@buc/schematics  --app-config-json=app-config.json
      --module-short-name=monorepo  --prefix=monorepo
```
Una vez completado el mandato, aparece un mensaje de éxito: "Los paquetes se han instalado correctamente."
Nota: Si se encuentra con un error similar al siguiente mensaje, puede ignorarlo sin problema. Estos errores no afectan a los iconos que utiliza Order Hub.
```
Error: No se ha podido compilar el punto de entrada @carbon/icons-angular/
```
Inicie el servidor.
```
yarn start-app
```
Nota: verá el siguiente mensaje.
```
" ** Angular Live Development Server está a la escucha en bucgenerichost: < puerto>, 
abra el navegador en https://localhost: < puerto>/< module>/< route> ** "
```
Puede hacer caso omiso de este mensaje.
Nota: Si encuentra un error similar al mensaje siguiente, aumente el tamaño del almacenamiento dinámico antes de iniciar la nueva aplicación.
```
El mandato de error ha fallado con el código 134 existente.
¡Lerna ERR! inicio de ejecución de yarn .... salida 134
```
Ejecute el mandato siguiente y, a continuación, inicie la nueva aplicación.
- Solicitud CMD de Windows:
```
SET NODE_OPTIONS=--max_old_space_size=8048
```
- Bash/ Git Bash:
```
export NODE_OPTIONS=--max_old_space_size=8048
```
- Powershell:
```
$Env:NODE_OPTIONS=--max_old_space_size=8048
```
Nota: Si necesita detener el servidor, detenga el trabajo del servidor y ejecute el mandato yarn stop-app para verificar que todo se ha detenido correctamente.
Después de desarrollar la aplicación, configure Order Hub para conectarse al servidor y cargar la nueva página en la interfaz de usuario. Para obtener más información, consulte Probar nuevas aplicaciones o rutas en Order Hub
Si desea probar las personalizaciones con un servidor OMS distinto del servidor configurado en el arrendatario de Order Hub , actualice el archivo <module-name>/packages/<route-name>/src/environments/environment.ts añadiendo la información siguiente:
```
import { BucSvcAngularStaticAppInfoFacadeUtil } from '@buc/svc-angular';

// set url to the OMS app server
// example url:  https://mydomain.mycompany.com:9443/smcfs
BucSvcAngularStaticAppInfoFacadeUtil.setLocalDevModeCustomizationTeamOMSUrl('https://<host>:<port>/smcfs');
```
Donde host y port son los valores del nombre de host y número de puerto del servidor OMS que desea probar.

Creación de un repositorio Angular básico de Order Hub

Asegúrese de que ha extraído el código de Order Hub . Para obtener más información, consulte Primeros pasos con la personalización de Order Hub.
Abra un terminal y vaya al directorio de código Order Hub .
- La ubicación predeterminada es devtoolkit_docker/orderhub-code.
Ejecute el mandato siguiente para establecer strict-ssl en false.
```
npm config set "strict-ssl" false
```
Ejecute uno de los siguientes comandos para reinstalar la última versión de @buc/schematics y acceder a los esquemas proporcionados por IBM. Para Angular v18, ejecute el siguiente comando.
```
npm uninstall -g @buc/schematics
npm install -g ./lib/buc/schematics/schematics-v4latest.tgz
```
Para Angular v20, ejecute el siguiente comando.
```
npm uninstall -g @buc/schematics
npm install -g ./lib/buc/schematics/schematics-v5latest.tgz
```
Cree una carpeta para la aplicación. El nombre de la carpeta será el nombre del módulo. En la carpeta, ejecute el mandato siguiente. El valor de --module-name debe ser el nombre del módulo.
```
ng new --collection=@buc/schematics \
--module-name=<name-of-the-module> \
--module-short-name=<the-short-name-for-the-module> \
--prefix=<selector-prefix> 
```
Las opciones siguientes están soportadas por el esquema.
- --skip-git: no inicialice un repositorio git. El valor predeterminado es false.
- --commit: información inicial de confirmación del repositorio GitHub . El valor predeterminado es true.
- --module-name: Necesario. El nombre del módulo. Por ejemplo, buc-app-settings.
- --module-short-name: el nombre abreviado del módulo. Si el nombre del módulo tiene guiones, el nombre abreviado debe ser el texto después del último guión. Por ejemplo, si el nombre del módulo es buc-app-settings, el nombre abreviado del módulo debe ser settings.
- --prefix: el selector HTML que se utiliza para los componentes generados. Valor predeterminado: buc
Por ejemplo:
```
ng new --collection=@buc/schematics  --module-name=custom-angularrepo
      --module-short-name=angularrepo  --prefix=angularrepo
```
Nota: Si encuentra un error similar al mensaje siguiente, puede ignorar el error de forma segura. Estos errores no afectan a los iconos que utiliza Order Hub.
```
Error: No se ha podido compilar el punto de entrada @carbon/icons-angular/
```
Inicie el servidor.
```
yarn start --host=bucgenerichost
```
Nota:
- Verá un mensaje:
```
"** Angular Live Development Server is listening on bucgenerichost:<port>, 
open your browser on https://bucgenerichost:<port>/<module>/<route> **"
```
  Puede hacer caso omiso de este mensaje. Conecte el arrendatario de Order Hub a la estación de trabajo local para ver las personalizaciones. Para obtener más información, consulte Probar las personalizaciones de módulos existentes en Order Hub.

Actualice el archivo src/app/app.component.html y añada texto para visualizarlo en la aplicación. Por ejemplo, para añadirHello, World!, utilice el código siguiente:


<div class="app-root-custom-angularrepo">
	<div class="app-region-body">
		<div class="app-body-content" *ngIf="isBucTenantChangeSuccess || isBucJwtRefreshSuccess">
			<router-outlet></router-outlet>
		</div>
		<div *ngIf="isInitialState" class="app-loading">
			<div ibmCol>
				<buc-loading [isActive]="isInitialState"></buc-loading>
			</div>
		</div>

Hello World!

	</div>
</div>

Después de desarrollar la aplicación, configure Order Hub para conectarse al servidor y cargar la nueva página en la interfaz de usuario. Para obtener más información, consulte Probar nuevas aplicaciones o rutas en Order Hub
Para probar las personalizaciones con un servidor OMS distinto del servidor configurado en el arrendatario de Order Hub , actualice el archivo <module-name>/src/environments/environment.ts añadiendo la siguiente información:
```
import { BucSvcAngularStaticAppInfoFacadeUtil } from '@buc/svc-angular';

// set url to the OMS app server
// example url:  https://mydomain.mycompany.com:9443/smcfs
BucSvcAngularStaticAppInfoFacadeUtil.setLocalDevModeCustomizationTeamOMSUrl('https://<host>:<port>/smcfs');
```
Donde host y port son los valores del nombre de host y número de puerto del servidor OMS que desea probar.