---
sourceDocument: Criar ou modificar aplicações do Xanadu
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/pt-BR/xanadu/application-development

 Release :

    - xanadu

ft:locale :

    - pt-BR

ft:publication_title :

    - Criar ou modificar aplicações do Xanadu

ft:clusterId :

    - cadev

bundleId :

    - cadev

workflow :

    - Creator


---

# Desenvolver um componente

# Desenvolver um componente {#ariaid-title1}

* Versão de lançamento: Xanadu
* 
* Atualizado 1 de ago. de 2024
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 1 min. de leitura

Adicione seu código de componente e teste-o usando um servidor de desenvolvimento local.

## Antes de Iniciar

* [Configurar seu ambiente](https://servicenow-prod.fluidtopics.net/ourC0hNhETgWb0BLV0Q8jA "Prepare seu ambiente local instalando o ambiente de tempo de execução JavaScript Node.js, o gerenciador de pacotes Node (npm) e o extensão do componente iu. Essas ferramentas permitem desenvolver e criar componentes localmente e implantá-los em sua instância.")
* [Configurar seu projeto](https://servicenow-prod.fluidtopics.net/Qf9laGAcmi1rtkVokT5uOQ "Crie o projeto de componente e o conjunto de arquivos necessários para desenvolver um componente. Você pode se conectar à sua instância e criar um escopo da aplicação para o seu componente ou pode reservar um escopo para verificar mais tarde.")
{#develop-component__ul_wb3_xbn_tkb}

## Por Que e Quando Desempenhar Esta Tarefa

Para obter um tutorial sobre como desenvolver um componente de contador, visite o [Site do desenvolvedor](https://developer.servicenow.com/dev.do#!/guide/sandiego/now-experience/ui-framework/examples/counter).

## Procedimento

1. No diretório do projeto, navegue até src/\<component-name\> /index.js .  
   Este é o arquivo de código primário de um componente.
2. Adicione seu código de componente.  
   Este exemplo mostra um exemplo de componente Hello World.

       import {createCustomElement} from '@servicenow/ui-core';
       import snabbdom from '@servicenow/ui-renderer-snabbdom';
       import styles from './styles.scss';

       const view = (state, {updateState}) => {
       	return (
       		<div>Hello World!</div>
       	);
       };

       createCustomElement('hello-world', {
       	renderer: {type: snabbdom},
       	view,
       	styles
       });

   Para desenvolver um componente para Virtual Agent, adicione propriedades e ações específicas para interagir com a interface do cliente Virtual Agent. As propriedades necessárias dependem do tipo de componente que você está criando. Para obter mais informações, consulte [Desenvolver um componente para Virtual Agent](https://servicenow-prod.fluidtopics.net/TpFAaC2Mvc7drIJFesgaBg "Crie um componente Virtual Agent personalizado para coletar informações de entrada ou exibir na interface do cliente Virtual Agent.") para obter mais informações.
3. **Opcional:** Adicionar componentes internos.  
   Um componente interno é um componente incluído em outro componente. Por exemplo, um componente de cartão pode incluir um componente de botão separado. O componente do botão se torna um componente interno que você deve importar, instalar e definir no projeto do componente do cartão.
   1. Instale o pacote do componente interno executando o comando de instalação usando a ferramenta de linha de comando do seu sistema:  

          npm install @servicenow/<now-inner-button> 

   2. Adicione uma declaração de importação à parte superior do arquivo index.js :  

          import '@servicenow/<now-inner-button>';

   3. Use o componente interno no arquivo index.js :  

          <now-inner-button label="Click Me" />

   4. Liste o componente interno na matriz `components.[component-name].innerComponents` no arquivo de configuração now-ui.json.  

          {
            "components": {
              "now-chart-timeseries": {
                "innerComponents": [
                  "now-inner-button"
                ],

   {#develop-component__substeps_k24_rsd_qjb}
4. Execute o comando do servidor de desenvolvimento para exibir seu componente em um navegador de teste.  

       $ snc ui-component develop [--entry entry --open --port port --host host]

   Passe valores para esses argumentos.  
   {#develop-component__table_lnx_bzt_vkb__entry__2}

   | Nome | Descrição |
   |-|-|
   | entrada | Caminho para o módulo de teste no seu projeto de componente. Padrão: example/index.js. |
   | em aberto | Abre o navegador padrão e navega até a página de teste. Padrão: falso. |
   | porta | Porta em que o servidor de desenvolvimento é executado. Padrão: 8081. |
   | Host | Endereço de host a ser usado se você quiser que o servidor de desenvolvimento local seja acessível externamente por outras pessoas. Normalmente definido como `0.0.0.0` |
   [ ]

   {#develop-component__table_lnx_bzt_vkb}  

       $ snc ui-component develop --entry example/hello.js --open --port 3000

## O que Fazer Depois

[Implantar um componente em uma instância](https://servicenow-prod.fluidtopics.net/FShv4NrX1MNtp0SZ8Apwvg "Implante seu componente para ser exibido em sua instância como um plug-in de aplicação.").
**Conceitos relacionados**   

* [Construtor de componente personalizado](https://servicenow-prod.fluidtopics.net/1fP78Qyn79GbWRJSiJ9ZaQ "Desenvolva componentes personalizados usando o Estrutura de IU do Next Experience e o extensão do componente iu.")