Criando novos aplicativos

Use um dos esquemas Angulares fornecidos pela IBMpara gerar um novo aplicativo e, em seguida, acessar o aplicativo no Order Hub a partir de um novo item de menu.

Menu do Order Hub com um novo item de menu que diz "Página personalizada" que pode apontar para seu novo aplicativo

Quando você cria um aplicativo com o schematics, o aplicativo resultante é configurado automaticamente para incluir as bibliotecas que são usadas pelo Order Hub para se comunicar com vários serviços, como:

O back-end do sistema Sterling™ Order Management System
Locatários doSterling Intelligent Promising Inventory Visibility
Outros locatários de microsserviço
Bibliotecas da IU do Carbon para projetar páginas para que tenham a mesma aparência e comportamento das páginas existentes no Order Hub.

É possível usar os scripts para gerar um dos repositórios Angulares a seguir:

Um monorepo angular, semelhante a como todo o código Order Hub é orquestrado.
Um repositório Angular básico.

Criando um Order Hub monorepo

Este esquema cria um novo monorepo usando Lerna e Single-Spa.

Certifique-se de ter extraído o código Order Hub . Para obter mais informações, consulte Introdução à customização do Order Hub.
Abra um terminal e acesse o diretório de código Order Hub .
- O local padrão é devtoolkit_docker/orderhub-code..
Execute o comando a seguir para configurar strict-ssl como false
```
npm config set "strict-ssl" false
```
Execute um dos comandos a seguir para reinstalar a versão mais recente de @buc/schematics e acessar os esquemas fornecidos pelo site IBM. Para o Angular v18, execute o seguinte comando.
```
npm uninstall -g @buc/schematics
npm install -g ./lib/buc/schematics/schematics-v4latest.tgz
```
Para Angular v20, execute o seguinte comando.
```
npm uninstall -g @buc/schematics
npm install -g ./lib/buc/schematics/schematics-v5latest.tgz
```

Crie uma pasta para o seu aplicativo O nome da pasta é o nome do módulo Na pasta, crie um arquivo app-config.json que descreva as rotas no módulo O valor para "name" deve ser o nome do módulo. Por exemplo,

{
  "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"
          }
      }
  }
}

No terminal, vá para a pasta criada.
Execute o seguinte comando.
```
ng new --collection=@buc/schematics \
--app-config-json=<app-config.json-file-name> \
--module-short-name=<short-name-for-the-module> \
--prefix=<selector-prefix> 
```
O esquema suporta as opções a seguir.
- --skip-git: não inicializar um repositório GitHub . Padrão false.
- --commit: Informações iniciais de confirmação do repositório Git. Padrão true.
- --app-config-json: Esta opção é necessária.. Use o arquivo app-config.json criado na etapa 5.
- --module-short-name: o nome abreviado para o módulo. Se o nome do módulo tiver traços, então o nome abreviado deverá ser o texto após o último traço Por exemplo, se o nome do módulo for buc-app-settings, o nome abreviado do módulo deverá ser settings..
  Nota: o pacote root-config é gerado com base no module-short-name. Não renomeie ou inclua um prefixo no module-short-name ou não será possível implementar as customizações.
- --prefix: O seletor HTML a ser usado para componentes gerados. Padrão: buc
- --shared-library-name: O nome da biblioteca compartilhada. O nome padrão é <module-short-name>-shared.. O nome do pacote é @ < prefix> / < module-short-name>-shared.
- --generate-root-config: indica se um projeto do roteador de configuração raiz deve ser gerado. Padrão true.
- --skip-install: Indica se os pacotes devem ser instalados. Padrão false.
Por exemplo:
```
ng new --collection=@buc/schematics  --app-config-json=app-config.json
      --module-short-name=monorepo  --prefix=monorepo
```
Após a conclusão do comando, uma mensagem de êxito aparece: "Pacotes instalados com êxito".
Observação: se você encontrar um erro semelhante à mensagem a seguir, pode ignorá-lo com segurança. Esses erros não afetam os ícones usados pelo Order Hub.
```
Erro: Falha ao compilar ponto de entrada @carbon/icons-angular/
```
Inicie o servidor.
```
yarn start-app
```
Nota: você vê a seguinte mensagem.
```
" ** Angular Live Development Server está atendendo no bucgenerichost: < port>, 
abra seu navegador em https://localhost: < port> / < module> / < route> ** "
```
Você pode ignorar essa mensagem.
Nota: se você encontrar um erro semelhante à seguinte mensagem, aumente o tamanho de heap antes de iniciar o novo aplicativo.
```
O comando de erro falhou com o código 134 existente
lerna ERR! Início da execução do yarn .... saiu 134
```
Execute o comando a seguir e, em seguida, inicie o novo aplicativo
- Prompt do Windows CMD:
```
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: Se for necessário parar o servidor, pare a tarefa do servidor e execute o comando yarn stop-app para verificar se tudo está parado corretamente
Depois de desenvolver seu aplicativo, configure o Order Hub para se conectar ao servidor e carregar a nova página dentro da interface com o usuário. Para obter mais informações, consulte Teste de novos aplicativos ou rotas no Order Hub
Se você desejar testar suas customizações com um servidor OMS diferente do servidor configurado em seu locatário do Order Hub , atualize o arquivo <module-name>/packages/<route-name>/src/environments/environment.ts incluindo as informações a seguir:
```
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');
```
Em que host e port são os valores do nome do host e do número da porta do servidor OMS que você deseja testar

Criando um repositório Angular básico do Order Hub

Certifique-se de ter extraído o código Order Hub . Para obter mais informações, consulte Introdução à personalização do Order Hub.
Abra um terminal e acesse o diretório de código Order Hub .
- O local padrão é devtoolkit_docker/orderhub-code..
Execute o comando a seguir para configurar strict-ssl como false
```
npm config set "strict-ssl" false
```
Execute um dos comandos a seguir para reinstalar a versão mais recente de @buc/schematics e acessar os esquemas fornecidos pelo site IBM. Para o Angular v18, execute o seguinte comando.
```
npm uninstall -g @buc/schematics
npm install -g ./lib/buc/schematics/schematics-v4latest.tgz
```
Para Angular v20, execute o seguinte comando.
```
npm uninstall -g @buc/schematics
npm install -g ./lib/buc/schematics/schematics-v5latest.tgz
```
Crie uma pasta para o seu aplicativo O nome da pasta será o nome do módulo Na pasta, execute o comando a seguir: O valor para --module-name deve ser o nome do 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> 
```
As opções a seguir são suportadas pelo esquema.
- --skip-git: não inicializar um repositório Git.. Padrão false.
- --commit: Informações de confirmação iniciais do repositório GitHub . Padrão true.
- --module-name: Obrigatório O nome do módulo. Por exemplo, buc-app-settings
- --module-short-name: o nome abreviado para o módulo. Se o nome do módulo tiver traços, então o nome abreviado deverá ser o texto após o último traço Por exemplo, se o nome do módulo for buc-app-settings, o nome abreviado do módulo deverá ser settings..
- --prefix: O seletor HTML a ser usado para componentes gerados. Padrão: buc
Por exemplo:
```
ng new --collection=@buc/schematics  --module-name=custom-angularrepo
      --module-short-name=angularrepo  --prefix=angularrepo
```
Nota: Se você encontrar um erro semelhante à mensagem a seguir, será possível ignorar o erro com segurança Esses erros não afetam os ícones usados pelo Order Hub.
```
Erro: Falha ao compilar ponto de entrada @carbon/icons-angular/
```
Inicie o servidor.
```
yarn start --host=bucgenerichost
```
Nota:
- Você vê uma mensagem:
```
"** Angular Live Development Server is listening on bucgenerichost:<port>, 
open your browser on https://bucgenerichost:<port>/<module>/<route> **"
```
  Você pode ignorar essa mensagem. Conecte seu locatário do Order Hub à estação de trabalho local para visualizar suas customizações. Para obter mais informações, consulte Teste de personalizações de módulos existentes no Order Hub.

Atualize o arquivo src/app/app.component.html e inclua algum texto para exibir no aplicativo. Por exemplo, para incluirHello, World!, use o código a seguir:


<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>

Depois de desenvolver seu aplicativo, configure o Order Hub para se conectar ao servidor e carregar a nova página dentro da interface com o usuário. Para obter mais informações, consulte Teste de novos aplicativos ou rotas no Order Hub
Para testar suas customizações com um servidor OMS diferente do servidor configurado em seu locatário do Order Hub , atualize o arquivo <module-name>/src/environments/environment.ts incluindo as informações a seguir:
```
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');
```
Em que host e port são os valores do nome do host e do número da porta do servidor OMS que você deseja testar