Home » Programação

Category Archives: Programação

[Tutorial] Primeiro Web App com Python e Flask

Python é uma das linguagens mais versáteis dentro das aplicações atuais. Podemos encontrar aplicações em scripts de infraestrutura, computação científica, inteligência artificial e também um web app.

A criação de um web app com Python necessita de uma ajuda tornando o projeto bem simples. O ajudante é o Flask, um micro framework do Python. Ser um micro framework trás alguns benefícios para o projeto, pois possibilita flexibilizar quais outros frameworks poderão ser acoplados para proporcionar melhor desempenho.

Chega de conversa, vamos codar!
Primeiro passo é instalar o pacote do Flask no projeto, no terminal execute:

pip install flask

Agora crie um arquivo Python e digite o seguinte código:

Na linha 1, é realizada a importação da classe Flask definida no pacote flask.

Na linha 3 é criado um objeto Flask, o seu construtor recebe como parâmetro o nome da aplicação. Pode ser informado como uma string ou utilizando uma variável de ambiente __name__.

A linha 5, cria o servidor de aplicação do Flask e o executa. Por padrão, ele sobe na porta 5000. Então acesse o endereço: http://localhost:5000/

O resultado que deve-se obter é:

O problema da página não encontrada é devido a falta de configuração de um rota de acesso com o retorno do HTML desejado. Para isso, vamos definir um método e atribuir uma anotação de rota para o método. A rota raiz de qualquer página web é o “/”, e geralmente é definida pelo arquivo index. Utilizaremos esse mesmo padrão para definir o método principal.

Entre as linhas 6 e 8, está a definição do método com a rota para acesso. A função deve retornar um HTML para que seja renderizado pelo navegador.

Reiniciando o servidor e acessando o endereço novamente, chegamos ao seguinte resultado:

Agora sim! A mágica aconteceu!!!
Mas claro, que misturar código HTML com Python não é uma boa prática! No próximo post vamos descobrir como renderizar um arquivo HTML com Flask.

Até a próxima!
E que a força esteja com você!

[Tutorial] Utilizando forEach em JavaScript

Em um programa de controle de notas, é criado uma tabela de visualização dos dados recuperados com as informações e notas dos alunos de uma turma X. Essa tabela possui 5 colunas de informação, são elas: Registro Acadêmico (RA), Nome, Nota da Avaliação 1 e da Avaliação 2, e a Média.

Exceto pela informação da média, todas as demais foram preenchidas a partir da consulta no banco de dados (premissa para o exemplo). A informação da média deve ser calculada após a construção da tela pelo navegador.

PS: É apenas para efeitos didáticos, os cálculos devem ser realizados a partir da aplicação back-end.

Ao abrir a página no navegador tem-se o seguinte resultado:

Página com as notas dos alunos, aguardando o cálculo das médias.

O primeiro passo é identifica o elemento do html que será manipulado, pelo JavaScript:

O elemento que interessa nesse momento é a tr, pois é nela que existem as informações sobre o aluno que são necessárias para o cálculo da média. O primeiro passo é identificar um seletor único que represente o objeto principal do sistema. Nesse caso é a classe aluno aplicada na tr da tabela. Depois, deve-se percorrer a lista de objetos gerada e a partir dos valores da avaliação 1 e 2, realizar o cálculo da média dos alunos. Veja o código a seguir:

Agora, a figura abaixo, apresenta o resultado visual do código em JavaScript aplicado:

Resultado após o primeiro código realizado.

O resultado não foi exatamente como o esperado, todas as médias tiveram o valor atribuído a NaN, isso significa nulo. Esse evento ocorreu, porque o tipo de valor retornado pela propriedade textContent é uma string (texto). Então, existe uma concatenação entre duas strings na linha 20, e na sequência uma divisão por 2 dessa concatenação. O resultado é um valor nulo, não existente.

Para realizar a correção desse código deve-se aplicar uma conversão das variáveis a1 e a2, que representam as notas das avaliações. Essa conversão é realizada através do método parseFloat (já que são números reais). Veja o código refinado:

O resultado obtido é:

Resultado após o parseFloat

Agora que foi possível realizar o cálculo da média das notas de cada aluno, é necessário estabelecer o padrão de exibição dos valores. O ideal é a exibição de duas casas decimais. O JavaScript auxilia o desenvolvedor com a função toFixed que recebe como parâmetro um inteiro que delimita a quantidade de casas decimais exibidas na tela. O código a seguir está com a função toFixed implementada no resultado do cálculo da média:

A linha 20 está destacada no código para apresentar a implementação da função toFixed. Agora o resultado obtido é apresentado na figura abaixo:

Exibição final do cálculo das médiasAté o momento utilizou-se o for tradicional. A implementação com o forEach é um pouco mais simples de realizar. Ele é um método incluso em qualquer objeto do tipo lista, no JavaScript. No caso do exemplo, a lista alunos possui esse método. O método forEach, recebe como parâmetro uma função anônima, que também possui um parâmetro. O parâmetro da função anônima representa um objeto do mesmo tipo do armazenado na lista. A cada iteração, o parâmetro da função anônima recebe um elemento da lista, até que esta seja totalmente percorrida. O código a seguir demonstra a implementação do código final para cálculo das médias dos alunos, utilizando a função forEach:

Basicamente, a linha 5 do código acima substitui as seguintes linhas do for tradicional:

A implementação com o forEach é mais simples e deixa o código mais legível. É uma boa prática para percorrer a lista inteira utilizando os recursos da linguagem JavaScript.

Qualquer dúvida que tiverem, podem deixar nos comentários ou entrar em contato que terei o prazer de esclarecer todas as dúvidas tiverem.