Exercício – Configurar o projeto

  • 8 minutos

É um novo programados na Tailwind Traders. Antes de começar, você precisa configurar seu ambiente de desenvolvimento. Não se preocupe, a Tailwind Traders facilitou o processo de integração. Existem apenas alguns pequenos passos que precisa de seguir para começar a trabalhar.

Estruturar os recursos do projeto

  1. Ative a sandbox e inicie sessão no Azure Cloud Shell (também conhecido como Ambiente de Produção Tailwind Traders), conforme indicado na parte superior desta página.

  2. Copie a linha a seguir e cole-a no terminal do Azure Cloud Shell à direita.

    git clone https://github.com/MicrosoftDocs/mslearn-build-api-azure-functions && ./mslearn-build-api-azure-functions/DB_SETUP/CREATE_DATABASE.sh

    Este comando cria um novo banco de dados com dados do produto. Este processo pode demorar cerca de 10 minutos. Sinta-se à vontade para continuar com o módulo. O processo continua a ser executado mesmo se você sair desta página.

Clonar o projeto no Visual Studio Code

  1. Abra o Visual Studio Code.

  2. Na barra de menu superior, selecione Exibir>paleta de comandos.

  3. No prompt, digite Clone.

  4. Na Paleta de comandos, selecione Git: Clone.

  5. Insira o seguinte URL de repositório:

    https://github.com/MicrosoftDocs/mslearn-build-api-azure-functions

  6. Selecione uma pasta na unidade local onde você deseja que o projeto seja clonado.

  7. Quando lhe for pedido para abrir o repositório clonado, clique em Open (Abrir).

  8. Visual Studio Code deteta um arquivo de espaço de trabalho neste projeto e pergunta se você deseja abri-lo. Selecione Open Workspace (Abrir Área de Trabalho).

    Captura de ecrã a mostrar o pedido de notificação do Visual Studio Code para abrir a área de trabalho.

Quando o espaço de trabalho é aberto, dois projetos aparecem no Visual Studio Code: frontend e api. O projeto "front-end" contém a aplicação Web. O api projeto é onde você cria a API sem servidor com o Azure Functions.

Executar o projeto de front-end

  1. Para abrir o terminal integrado no Visual Studio Code, prima Ctrl + Shift + `.

  2. Selecione frontend.

  3. Para executar o projeto front-end no navegador, no terminal integrado, execute o npm start comando.

    npm start

    Um pequeno servidor Web chamado serve é executado na janela do terminal do Visual Studio Code. Ele exibe a URL onde o aplicativo front-end está sendo executado.

    Captura de ecrã a mostrar o terminal do Visual Studio Code com uma nota de aviso a realçar o URL e a porta da aplicação em execução.

  4. Para abrir o aplicativo no navegador, selecione esse URL na janela do terminal.

    O aplicativo é carregado, mas não há dados presentes porque você não criou a API para este aplicativo.

    Captura de tela do aplicativo em execução em um navegador. Nenhum dado é exibido e uma mensagem de erro explicando que a operação get falhou.

Excelente! Configurou com sucesso o seu ambiente para ser um programador produtivo na Tailwind Traders. o que significa que está na hora de criar o projeto das Funções do Azure que servirá como a API para a aplicação Gestor de Produtos.