Exercício: usar código-fonte no Visual Studio Code

  • 15 minutos

Neste cenário, você foi solicitado a criar um aplicativo de gerenciamento de contas para sua organização. Você decidiu criar um aplicativo de tela e disponibilizar o código-fonte do aplicativo no formato de texto para cumprir os requisitos legais da organização. As políticas de desenvolvimento da sua empresa exigem que todos os ativos criados pelos desenvolvedores sejam armazenados no repositório de controle do código-fonte. O código-fonte deve ser confirmado no repositório no formato de texto, sempre que possível, para simplificar o processo de colaboração em um ambiente de equipe de projeto e disponibilizar o código-fonte para digitalização e diferenciação automáticas.

Requisitos

Para concluir este exercício, você precisa ter um ambiente do Microsoft Dataverse com banco de dados instalado.

Objetivos

A meta deste exercício é aprender como:

  • Editar um aplicativo de tela no Visual Studio Code.

  • Empacotar um aplicativo de tela no Visual Studio Code.

  • Carregar um aplicativo de tela no Power Apps Studio.

  • Criar e inicializar repositórios Git locais e remotos.

  • Sincronizar os repositórios locais e remotos e trabalhar com as alterações.

Pré-requisito

Verifique se você concluiu o laboratório anterior deste módulo antes de iniciar este exercício.

Exercício 1: Editar o aplicativo

Neste exercício, você editará o aplicativo gerenciador de contas no Visual Studio Code.

Tarefa: Editar o aplicativo

Nesta tarefa, você editará o aplicativo no Visual Studio Code.

  1. Abra o Visual Studio Code.

  2. Se a pasta Learn lab account manager não abrir automaticamente, selecione Arquivo > Abrir Pasta. Localize e abra a pasta Learn lab account manager.

  3. Expanda as pastas src e depois expanda Src. Então, selecione o arquivo BrowseScreen1.fx.yaml.

    Captura de tela do arquivo BrowseScreen.

  4. Localize LblAppName1.

  5. Altere o valor de Texto de LblAppName1 para Empresas e o Tamanho para 28.

    Captura de tela do valor de texto e de tamanho.

  6. Localize IconNewItem1.

  7. Altere a transição da fórmula Navigate de Nenhum para CoverRight e adicione a expressão Trace() a seguir:

    ;Trace("New Item Selected")

    Captura de tela da transição de fórmula Navigate e da expressão de rastreamento.

  8. Selecione o arquivo DetailScreen1.fx.yaml.

  9. Localize LblAppName2.

  10. Altere o valor de Texto de LblAppName2 para Empresas e o Tamanho para 28.

  11. Selecione o arquivo EditScreen1.fx.yaml.

  12. Localize LblAppName3.

  13. Altere o valor de Texto de LblAppName3 para Empresas e o Tamanho para 28.

  14. Selecione Arquivo > Salvar tudo.

Exercício 2: Compactar e carregar

Neste exercício, você compactará o aplicativo e o carregará no seu ambiente.

Tarefa: Empacotar e carregar

Nesta tarefa, você empacotará e carregará o aplicativo.

  1. Abra Terminal e execute o comando a seguir:

    pac canvas pack --msapp "Account manager.msapp" --sources src

    Captura de tela do comando para empacotar o aplicativo.

  2. Você pode receber esta mensagem de aviso: Aviso PA2001: incompatibilidade de soma de verificação. Você pode ignorar essa mensagem com segurança.

  3. Alterne para o navegador, vá para o Power Apps Maker Portal e verifique se está no ambiente correto.

  4. Selecione Aplicativos.

  5. Selecione o aplicativo Gerente de conta e, depois, Editar.

  6. Selecione Arquivo > Abrir > Procurar.

    Captura de tela do botão Procurar arquivos.

  7. Selecione o arquivo Account manager.msapp localizado na pasta Learn lab account manager e selecione Abrir.

    Captura de tela do aplicativo de tela a ser importado.

  8. Selecione Visualizar o aplicativo.

    Captura de tela do botão Visualizar o aplicativo.

  9. O texto do rótulo deve mostrar as alterações feitas no Visual Studio Code. Selecione o ícone de adição (+) para adicionar uma nova conta.

    Captura de tela do botão adicionar nova conta.

  10. O texto do rótulo deve mostrar as alterações feitas no Visual Studio Code. Preencha o formulário e selecione Salvar.

    Captura de tela da janela Criar nova conta.

  11. Selecione para abrir a nova conta.

  12. O texto do rótulo deve mostrar as alterações feitas por você. Feche a versão preliminar do aplicativo.

    Captura de tela do botão Fechar versão preliminar do aplicativo.

  13. Selecione Arquivo > Salvar.

  14. Selecione Publicar.

  15. Selecione Publicar esta versão e aguarde o término do processo de publicação.

Exercício 3: GitHub (opcional)

Neste exercício, você criará um novo repositório no GitHub, inicializará o repositório e trabalhará com as alterações.

Tarefa 1: Inicializar o repositório remoto

Nesta tarefa, você inicializará o repositório remoto.

  1. Entre no GitHub. Se for a primeira vez, selecione Inscrever-se e siga as instruções para concluir o processo de inscrição.

  2. Selecione o botão de adição (+) e, depois, Novo repositório.

    Captura de tela do botão Novo repositório em GitHub.

  3. Digite Contoto_Man para o Nome do repositório, selecione Particular e, depois, Criar repositório.

    Captura de tela da janela Criar um novo repositório com a opção Particular selecionada.

  4. Copie a URL e cole-a no Bloco de Notas para usá-la posteriormente.

    Captura de tela do botão Copiar URL do repositório.

Tarefa 2: Inicializar o repositório local

Nesta tarefa, você inicializará o repositório local.

  1. Abra o Visual Studio Code.

  2. Se a pasta Learn lab account manager não abrir automaticamente, selecione Arquivo > Abrir Pasta. Localize e abra a pasta Learn lab account manager.

  3. Selecione o menu Exibir e, depois, SCM (gerente do controle do código-fonte).

  4. Selecione Inicializar Repositório.

    Captura de tela do botão Inicializar Repositório.

  5. Passe o cursor sobre a opção Alterações e selecione o ícone de adição (+) para Preparar Todas as Alterações.

    Captura de tela do botão Preparar Todas as Alterações.

  6. Digite Confirmação inicial para a mensagem e selecione Confirmar (botão de caixa de seleção).

    Captura de tela do botão confirmar alterações para a confirmação inicial.

Tarefa 3: Adicionar e sincronizar um repositório remoto

Nesta tarefa, você adicionará um repositório remoto e, depois, sincronizará o repositório.

  1. Selecione o botão de reticências (...) e, depois, Remoto > Adicionar Remoto.

    Captura de tela do botão Adicionar Remoto.

  2. Cole a URL do repositório que você copiou e selecione Adicionar remoto da URL. Entre, se for solicitado.

    Captura de tela do botão Adicionar remoto da URL.

  3. Digite Origem como o nome remoto e pressione a tecla Enter.

    Captura de tela do nome remoto definido como Origem.

  4. Selecione o botão de reticências (...) e, depois, Enviar por Pull, Enviar por Push > Sincronizar.

    Captura de tela do botão Sincronizar repositórios.

  5. Selecione OK.

  6. Vá para GitHub e abra o repositório Contoso_Man.

  7. Selecione para abrir a pasta src.

    Captura de tela da pasta de repositório.

  8. Examine o conteúdo da pasta.

Tarefa 4: Trabalhar com alterações

Nesta tarefa, você trabalhará com as alterações.

  1. Alterne para Visual Studio Code e selecione o arquivo BrowseScreen1.fx.yaml.

  2. Localize IconNewItem1 e altere a transição da fórmula Navigate de CoverRight para UnCover.

    Captura de tela do tipo de transição de navegação.

1 Selecione Arquivo > Salvar tudo.

  1. Selecione Controle do Código-fonte > Preparar todas as alterações.

    Captura de tela do Controle do Código-fonte, com o botão Preparar Todas as Alterações selecionado.

  2. Digite Alterar a transição de acordo com as diretrizes do UX para a mensagem e, depois, selecione Confirmar (ícone de caixa de seleção).

    Captura de tela do botão confirmar alterações.

  3. Selecione o botão de reticências (...) e, depois, Enviar por push.

  4. Retorne para GitHub e abra o repositório Contoso_Man.

  5. Selecione para abrir a confirmação.

    Captura de tela do botão para abrir a confirmação.

  6. Revise as alterações.

    Captura de tela da revisão para confirmar alterações.