Exercício – atualizar a aplicação no Visual Studio Code e publicar as atualizações

Concluído

Quando tiver alterações a implementar na aplicação Web, pode utilizar as mesmas ferramentas no Visual Studio Code.

Imagine que pretende fazer uma melhoria ao site de prova de conceito: Em vez de mostrar a contagem decrescente em milissegundos, quer mostrá-la em dias. Quer fazer esta alteração e implementá-la no Azure antes de mostrar a página aos intervenientes.

Nesta unidade, irá modificar o código e voltar a implementar o site.

Modificar o código para calcular a contagem decrescente em dias

Vamos começar por modificar o código para que este calcule um número inteiro de dias:

  1. Inicie o Visual Studio Code, se este ainda não estiver em execução.

  2. Se a pasta countdownExpressApp ainda não estiver aberta, no menu File (Ficheiro), selecione Open Folder... (Abrir Pasta...) e navegue para a pasta.

  3. Na janela Explorer (Explorador) do Visual Studio Code, expanda routes (rotas) e, em seguida, selecione index.js.

  4. Localize esta linha de código:

    let numberOfMilliseconds = parseInt(launchTime - currentTime);
    
  5. Na linha seguinte, escreva este novo código:

    let numberOfDays = parseInt(numberOfMilliseconds/(24 * 3600 * 1000));
    
  6. Localize esta linha de código:

    res.render('index', { title: 'Countdown to Launch', countDown: numberOfMilliseconds });
    
  7. Substitua essa linha por esta linha de código:

    res.render('index', { title: 'Countdown to Launch', countDown: numberOfDays });
    
  8. No menu File (Ficheiro), selecione Save (Guardar) e, em seguida, feche o ficheiro index.js.

Modificar a vista para mostrar a contagem decrescente em dias

Tem também de alterar a vista ligeiramente:

  1. Na janela Explorer (Explorador) do Code, abra /views/index.jade.

  2. Localize esta linha de código:

    p Countdown: #{countDown} milliseconds
    
  3. Substitua essa linha por esta linha de código:

    p Countdown: #{countDown} days
    
  4. No menu File (Ficheiro), selecione Save (Guardar) e, em seguida, feche o ficheiro index.jade.

Publicar a nova versão

As suas alterações foram concluídas. Vamos implementar o site concluído no Azure:

  1. No explorador do Azure do Visual Studio Code, clique com o botão direito do rato na aplicação Web que criou e, em seguida, selecione Deploy to Web App (Implementar na Aplicação Web).

  2. Selecione a pasta countdownExpressApp e, em seguida, selecione Deploy (Implementar).

  3. Quando a implementação estiver concluída, selecione Browse Website. Em seguida, o site do Azure será apresentado no seu browser. Repare que a contagem decrescente é agora apresentada em dias.

    Site Express.js alojado no Azure.

Quando tiver alterações a implementar na aplicação Web, pode utilizar as mesmas ferramentas no Visual Studio Code.

Imagine que pretende fazer uma melhoria ao site de prova de conceito: Em vez de mostrar a contagem decrescente em milissegundos, quer mostrá-la em dias. Quer fazer esta alteração e implementá-la no Azure antes de mostrar a página aos intervenientes.

Nesta unidade, irá modificar o código e voltar a implementar o site.

Modificar o código para calcular a contagem decrescente em dias

Vamos começar por modificar o código para que este calcule um número inteiro de dias:

  1. Inicie o Visual Studio Code, se este ainda não estiver em execução.

  2. Se a pasta CountdownFlaskApp ainda não estiver aberta, então no Windows no menu Ficheiro , selecione Abrir Pasta... e, em seguida, navegue na pasta e selecione Selecione Pasta. Ou, no macOS, no menu Ficheiro, selecione Abrir... e navegue para a pasta e, em seguida, selecione Abrir.

  3. Na janela Explorer (Explorador) do Visual Studio Code, selecione app.py.

  4. Localize esta linha de código:

    numberOfMilliseconds = int(diff.total_seconds() * 1000)
    
  5. Substitua essa linha por esta linha de código:

    numberOfDays = diff.days
    
  6. Localize esta linha de código:

    return render_template(
        "countdown.html",
        time=numberOfMilliseconds
    )
    
  7. Atualize o código para utilizar numberOfDays em vez de numberOfMilliseconds:

    return render_template(
        "countdown.html",
        time=numberOfDays
    )
    
  8. No menu File (Ficheiro), selecione Save (Guardar) e, em seguida, feche o ficheiro app.py.

Modificar a vista para mostrar a contagem decrescente em dias

Tem também de alterar a vista ligeiramente:

  1. Na janela Explorador, abra /templates/countdown.html.

  2. Localize esta linha de código:

    <p>Countdown: {{ time }} milliseconds</p>
    
  3. Substitua essa linha por esta linha de código:

    <p>Countdown: {{ time }} days</p>
    
  4. No menu File (Ficheiro), selecione Save (Guardar) e, em seguida, feche o ficheiro countdown.html.

  5. Teste novamente as alterações ao selecionar Terminal e, em seguida, New Terminal (Novo Terminal).

  6. Confirme que o pedido possui o prefixo (env) e, em seguida, inicie o servidor de programação. No Windows, introduza o seguinte na linha de comandos:

    py -m flask run
    

    No macOS, introduza o seguinte na linha de comandos:

    python3 -m flask run
    
  7. Abra um browser para http://127.0.0.1:5000 e confirme que as alterações funcionam corretamente.

  8. No Terminal do Visual Studio Code no Windows e no Linux, prima Ctrl+C para sair do servidor de programação. No macOS, selecione Comando+C para sair do servidor de programação.

Publicar a nova versão

As suas alterações foram concluídas. Vamos implementar o site concluído no Azure:

  1. No explorador do Azure do Visual Studio Code, clique com o botão direito do rato na aplicação Web que criou e, em seguida, selecione Deploy to Web App (Implementar na Aplicação Web).

  2. Selecione a pasta countdownFlaskApp e, em seguida, selecione Deploy (Implementar).

  3. Quando a implementação estiver concluída, selecione Browse Website. Em seguida, o site do Azure será apresentado no seu browser. Repare que a contagem decrescente é agora apresentada em dias.

    Site Python alojado no Azure.