Exercício: usar a CLI do Power Apps

  • 15 minutos

Neste exercício, você instalará o Power Platform CLI e criará seu primeiro componente do Power Apps Component Framework (PCF).

Tarefa 1: Instalar a CLI

  1. Instale o Npm (incluído no Node.js) ou o Node.js (incluído no npm). Recomendamos que você use o LTS (Suporte de Longo Prazo) versão 10.15.3 ou superior.

  2. Instalar o Visual Studio Code.

  3. Instale a extensãoPower Platform Tools.

  4. Inicie o Visual Studio Code.

  5. Selecione Terminal e, depois, Novo Terminal.

    Captura de tela mostrando o novo botão do terminal.

  6. Execute o comando pac para ver quais comandos estão disponíveis:

    pac

    Captura de tela mostrando uma lista de comandos.

  7. Você pode inserir pac e um comando para ver quais opções ele tem. Por exemplo, experimente o seguinte:

    pac admin

  8. Navegue até o Power Apps maker portal e verifique se o ambiente Dev está selecionado.

  9. No canto superior direito da tela, selecione o ícone Configurações e escolha Detalhes da sessão.

    Captura de tela mostrando o botão de detalhes da sessão.

  10. Na caixa de diálogo de detalhes da sessão do Power Apps, selecione o valor da url da instância e copie-a para uso posterior no exercício.

    Captura de tela dos detalhes da sessão e de onde encontrar o valor da U R L da instância.

  11. Volte para o terminal do Visual Studio Code, digite o comando a seguir para estabelecer uma conexão da CLI e entre em seu ambiente de teste quando solicitado.

    pac auth create --name Lab --url <Your Instance URL>

  12. Digite o comando who a seguir, que exibirá o ambiente e as informações do usuário. Isso lhe permite garantir que você está no ambiente correto.

    pac org who

Tarefa 2: criar um componente PCF

  1. Execute o comando abaixo para criar uma nova pasta chamada labPCF na pasta do usuário.

    md labPCF

  2. Altere o diretório para a pasta que você criou.

    cd labPCF

  3. Execute o comando abaixo para inicializar o projeto do componente.

    pac pcf init --namespace lab --name FirstControl --template field

  4. Digite o comando a seguir e pressione enter. Isso obtém todas as dependências do repositório npm.

    npm install

  5. Abra a pasta no Visual Studio Code.

    code -a .

  6. Explore os arquivos que foram criados.

  7. Abra Index.ts na pasta FirstControl.

  8. Cole as duas variáveis a seguir na exportação.

    private label: HTMLInputElement;

    private _container: HTMLDivElement;

    Captura de tela mostrando a colocação das duas variáveis no código do componente.

  9. Cole o item a seguir na função init() para criar os controles HTML e definir o valor do rótulo.

    this.label = document.createElement("input");
this.label.setAttribute("type", "label");
this.label.value = "My First PCF";
this._container = document.createElement("div");
this._container.appendChild(this.label);
container.appendChild(this._container);

  10. Salve o arquivo.

  11. Vá para o terminal, insira o comando a seguir e, depois, pressione enter. Isso iniciará a estrutura de teste com o código mais recente.

    npm start

  12. A estrutura de teste é eficaz para usar no início do projeto, para ver como é seu controle visualmente, sem ter que implantá-lo em um ambiente. Você pode definir valores de propriedade para alterar o tamanho da área de controle. Depois que você terminar de explorar o agente de teste, volte para o terminal e pressione Ctrl-C para encerrar a execução do agente de teste.

  13. Digite Y e pressione [ENTER].

  14. Execute o comando a seguir para listar soluções no seu ambiente.

    pac solution list

  15. Essas são as soluções atuais que estão em seu ambiente. A próxima etapa adicionará um para o componente.

  16. Digite o comando push a seguir para enviar nosso controle ao ambiente.

    pac pcf push --publisher-prefix lab

  17. Execute o comando pac solution list novamente. Você verá uma solução PowerAppsTools_lab listada. É assim que seu componente é instalado no ambiente de desenvolvimento para teste de unidade antes de ser empacotado para teste de usuário ou produção ou ser incluído como parte de outra solução.

Tarefa 3: Usar o componente em um aplicativo (opcional)

  1. Navegue até o Centro de Administração do Microsoft Power Platform.

  2. Selecione o ambiente que você está usando para o laboratório.

  3. Selecione Configurações.

  4. Expanda a área Produto e selecione Recursos.

  5. No lado direito, habilite o recurso Permitir a publicação de aplicativos de tela com componentes de código.

    Captura de tela mostrando onde habilitar os componentes da tela.

  6. Navegue até o Power Apps maker portal e verifique se você está no ambiente correto.

  7. Selecione Soluções.

  8. Selecione para abrir a solução PowerAppsTools_lab.

  9. Você deve ver seu componente listado.

  10. Selecione + Novo | Aplicativo | Aplicativo de tela.

  11. Selecione Telefone para Formato, insira Primeiro PCF para Nome do aplicativo e selecione Criar.

  12. No painel esquerdo, selecione a guia Adicionar (+) e, depois, Obter mais componentes.

  13. Selecione a guia Código.

  14. Selecione seu componente.

    Captura de tela mostrando a importação do componente que você acabou de criar.

  15. Selecione Importar.

  16. Na barra de ferramentas esquerda, selecione + e expanda Componentes de código.

  17. Selecione FirstControl. Agora você deve ver o controle com o texto Meu Primeiro PCF na tela.

    Captura de tela mostrando como arrastar seu componente para a tela.

  18. Selecione Salvar para salvar o aplicativo.

Você criou seu primeiro componente PCF e ele é usado em um aplicativo de tela.