Nas primeira e segunda parte desta série de três partes tutorial, vimos como esquematizar a estrutura do modelo em um aplicativo baseado em balão usando Jinja2 de forma modular e como criar processadores de contexto personalizado, filtros e macros em Jinja2.

Nesta parte, vamos cobrir como fazer implementação avançadas de data e hora no nível do modelo em Jinja2 usando moment.js.

Guia de introdução

Data e hora é uma coisa dolorosa para manipular em aplicativos da web. Manuseá-los no nível do Python, usando a biblioteca de datetime, aumenta a sobrecarga e é bastante complexa quando se trata de manipulação fusos horários corretamente. Nós devemos padronizar os carimbos de hora UTC quando armazenados no banco de dados, mas em seguida os carimbos de hora precisam ser processadas a cada vez que eles precisam ser apresentados aos usuários em todo o mundo.

É uma coisa inteligente para adiar esse processamento ao lado do cliente, ou seja, o navegador. O navegador sempre sabe o fuso horário atual do usuário e será capaz de fazer a manipulação de data e hora corretamente. Também, isso tira a sobrecarga necessária de nossos servidores de aplicação.

Assim como qualquer biblioteca JS, Moment.js podem ser incluídos em nosso aplicativo da seguinte maneira. Temos de colocar o arquivo JS, moment.min.js, na pasta static/js. Isto pode ser usado no nosso arquivo HTML, adicionando a seguinte instrução juntamente com outras bibliotecas JS:

<script src="/static/js/moment.min.js"></script>

O uso básico de Moment.js é mostrado no código a seguir. Isto pode ser feito no console do navegador para JavaScript:

>>> moment().calendar();
"Today at 9:37 PM"
>>> moment().endOf('day').fromNow();
"in 2 hours"
>>> moment().format('LLLL');
"Wednesday, January 27, 2016 9:38 PM"

Para usar o Moment.js em nosso aplicativo, a melhor maneira será escrever um wrapper em Python e usá-lo através de variáveis de ambiente do jinja2. Consulte este executável para obter mais informações. Adicione um arquivo chamado momentjs.py no mesmo nível como my_app.py.

flask_app/momentjs.py

from jinja2 import Markup

class momentjs(object):

    def __init__(self, timestamp):
        self.timestamp = timestamp

        # Wrapper to call moment.js method
        def render(self, format):
            return Markup("<script>\ndocument.write(moment(\"%s\").%s);\n</script>" % (self.timestamp.strftime("%Y-%m-%dT%H:%M:%S"), format))

        # Format time
        def format(self, fmt):
            return self.render("format(\"%s\")" % fmt)

        def calendar(self):
            return self.render("calendar()")

        def fromNow(self):
            return self.render("fromNow()")

Adicione a seguinte linha no flask_app/my_app.py após a inicialização do app. Isto irá adicionar a classe momentjs para as variáveis de ambiente de jinja.

# Set jinja template global
app.jinja_env.globals['momentjs'] = momentjs

Agora moment.js pode ser usado para formatar Data e Hora em modelos como segue:

<p>Current time: {{ momentjs(timestamp).calendar() }}</p>
<br/>
<p>Time: {{momentjs(timestamp).format('YYYY-MM-DD HH:mm:ss')}}</p>
<br/>
<p>From now: {{momentjs(timestamp).fromNow()}}</p> 

Conclusão

Nesta série de tutorial, abordamos os conceitos básicos de modelagem Jinja2 na perspectiva do Flask. Começamos com o básico do básico do Jinja2 e aprendido as práticas recomendadas sobre como colocar para fora a estrutura do modelo e alavancar os padrões de herança.

Então, nós criamos alguns processadores de contexto personalizado, filtros e macros que vêm muito útil na modelagem avançada. O tutorial final de como moment.js pode ser utilizada juntamente com o Jinja2 para criar aplicações altamente flexíveis e poderosas com o Date Time formatando.