Recriar um aplicativo brilhante com o Flask

cupom com desconto - o melhor site de cupom de desconto cupomcomdesconto.com.br


[Esteartigofoipublicadopelaprimeiravezem[Thisarticlewasfirstpublishedon r – Rios saltando, e gentilmente contribuiu para os R-blogueiros]. (Você pode relatar um problema sobre o conteúdo desta página aqui)


Deseja compartilhar seu conteúdo com R-blogueiros? clique aqui se você tiver um blog ou aqui se não tiver.

Portanto, o RStudio Connect adotou o Python e agora executa aplicativos Flask! Na Jumping Rivers, usamos muito o R, o brilhante e o Python para criar ferramentas visuais para nossos clientes. O Shiny possui muitos recursos interessantes, em particular, é muito rápido para a criação de protótipos de aplicativos da web. Durante nossa reunião matinal, discutimos o fato de que o balão em breve chegaria aos produtos RStudio e imaginamos como seria fácil recriar um dos exemplos simples e brilhantes como um aplicativo de balão. Como sugeri, trabalhei com o balão por uma hora para recriar a demonstração brilhante do histograma de erupções fiéis – o resultado final está hospedado no nosso servidor Connect. Para este post, não é necessário que você saiba brilhante, mas farei referência a ele em vários lugares.

Spoiler

Brilhante e balão são ferramentas diferentes com forças diferentes. Se você tem um aplicativo brilhante simples, o brilhante é de longe a ferramenta mais rápida para realizar o trabalho e requer menos conhecimento sobre tecnologias baseadas na Web. No entanto, o balão oferece uma flexibilidade muito maior do que a que pode ser facilmente alcançada com brilho.

Espero que isso se transforme em uma série de postagens no blog sobre o balão para aplicativos de ciência de dados.

Com isso em mente, vamos tratar isso como um exercício para criar um aplicativo de balão simples para visualização de alguns dados com um pouco de interatividade. Para referência, o aplicativo brilhante ao qual me refiro pode ser visualizado juntamente com o tutorial sobre como construí-lo.

O que é o Flask?

O Flask é um micro framework da Web escrito em Python com diversas extensões para autenticação, validação de formulários e ORMs. Ele fornece as ferramentas para criar aplicativos baseados na Web. Embora seja muito leve, combinado com as extensões, é muito poderoso. Significando que seu aplicativo da web pode ser uma API simples para um modelo de aprendizado de máquina que você criou ou um aplicativo da web completo. O Pinterest e o LinkedIn usam o balão, por exemplo.

Configure seu aplicativo

Crie uma estrutura de diretórios para abrigar seu projeto. Podemos criar rapidamente uma raiz de projeto e outros diretórios necessários. Explicaremos a utilidade de cada um dos diretórios em breve.

mkdir -p app_example/{static,templates,data} && cd app_example

Eu recomendo que todos os projetos Python configurem um ambiente virtual. Existem várias ferramentas para gerenciar ambientes virtuais no Python, mas eu costumo usar virtualenv. Podemos criar um novo ambiente virtual para este projeto no diretório atual e ativá-lo.

Em 2020, também não é preciso dizer que estamos usando o Python 3 para esta atividade, especificamente 3.7.3.

virtualenv venv
source venv/bin/activate

Outros diretórios

dados:

Para o nosso projeto, também queremos um lugar para abrigar os dados. Como estamos falando de um conjunto de dados tabulares muito pequeno de 2 variáveis ​​e 272 casos, qualquer tipo de banco de dados seria um exagero. Então, vamos apenas ler de um CSV no disco. Podemos criar esse conjunto de dados via

Rscript -e "readr::write_csv(faithful, 'data/faithful.csv')"

modelos:

Leia Também  RcppArmadillo 0.9.870.2.0 | R-bloggers

Os elementos visuais do aplicativo de balão serão páginas da Web renderizadas a partir de modelos html. O nome templates é escolhido especificamente aqui, pois é o diretório padrão que seu aplicativo de balão procurará ao tentar renderizar páginas da web.

estático:

Este será o nosso lugar para armazenar quaisquer recursos estáticos, como folhas de estilo CSS e código JavaScript.

Pacotes

Para este projeto, precisaremos de alguns pacotes python

  • frasco (obviamente)
  • pandas – útil para manipulação de dados, mas neste caso apenas
    usado para ler dados do disco
  • entorpecido – usaremos para calcular as caixas do histograma e
    frequências
  • conspirador – minha biblioteca de gráficos preferida em Python no momento
    e adequado para aplicativos baseados na Web
pip install flask pandas plotly numpy

Escolhendo seu editor

Meu editor de escolha para qualquer coisa que não esteja relacionada ao R é o VScode, que considero particularmente adequado para aplicativos criados usando uma mistura de idiomas diferentes. Existem muitos plugins para Python, HTML, CSS e JavaScript para fins de conclusão de código, trechos, linting e execução de terminal, o que significa que eu posso escrever, testar e executar todas as partes do meu aplicativo no conforto de um único local.

Hello Flask

Com tudo configurado, podemos iniciar nosso aplicativo Flask. Uma das coisas de que realmente gosto no balão é a sintaxe simples para adicionar pontos de extremidade de URL ao nosso site. Podemos criar um exemplo de estilo “olá mundo” com o seguinte código python (salvo neste caso em app.py)

# required imports
from flask import Flask

# instantiate the application object
app = Flask(__name__)

# create an endpoint with a decorator
@app.route("/")
def hello():
  return "Hello World"

if __name__ == "__main__":
  app.run()

De volta ao terminal, poderíamos executar este aplicativo com

python app.py

e visualize no URL padrão de localhost:5000. Acho que a parte interessante do trecho de código acima é o decorador de rotas

@app.route("/)

As rotas referem-se aos padrões de URL do nosso aplicativo da web. o "/" é efetivamente a rota raiz. ou seja, o que você veria em um endereço da web como “mycoolpage.com”. O decorador aqui nos permite especificar uma função Python que deve ser executada quando um usuário navega para uma URL específica em nosso nome de domínio (ou manipulador).

O que nosso aplicativo precisa

Estamos criando um aplicativo aqui que permite aos usuários escolher uma entrada por meio de um controle deslizante, o que faz com que um histograma seja redesenhado. Para isso, nosso aplicativo precisará de duas rotas

  • Uma rota para gerar os histogramas
  • Uma página html que o usuário verá

Criando um histograma

Poderíamos escrever uma função que desenhe um histograma usando conspirador razoavelmente facilmente.

# imports
from pandas import read_csv
import plotly.express as px

# read data from disk
faithful = read_csv('./data/faithful.csv')
def hist(bins = 30):
  # calculate the bins
  x = faithful['waiting']
  counts, bins = np.histogram(x, bins=np.linspace(np.min(x), np.max(x), bins+1))
  bins = 0.5* (bins[:-1] + bins[1:])
  p = px.bar(
    x=bins, y=counts,
    title='Histogram of waiting times',
    labels={
      'x': 'Waiting time to next eruption (in mins)',
      'y': 'Frequency'
    },
    template='simple_white'
  )
  return p

Esse é o tipo de coisa que podemos criar fora do contexto de aplicativos da web para visualizar esses dados. Se você quiser ver o enredo, faça algo como

plot = hist()
plot.show()

No entanto, queremos fazer algumas modificações para uso em nosso aplicativo da web.

  1. Queremos transformar nosso trabalho em um aplicativo de balão. Podemos começar adicionando as importações e a estrutura necessárias ao nosso app.py com o hist função nele.

    cupom com desconto - o melhor site de cupom de desconto cupomcomdesconto.com.br
    from flask import Flask
    # other imports
    # instantiate app
    app = Flask(__name__)
    ...
    
    # At the end of our script
    if __name__ == '__main__':
      app.run()
  2. Queremos levar o número de posições de uma solicitação para nosso servidor da web. Poderíamos conseguir isso, em vez de levar o número de compartimentos do argumento para a nossa função, retirando-o do argumento na solicitação do cliente. Quando um aplicativo Flask manipula um objeto de solicitação, ele cria um objeto de Solicitação que pode ser acessado via request proxy. Argumentos podem ser obtidos nesse contexto

    from flask import request
    
    def hist():
      bins = int(request.args['bins'])
      ...
  3. Queremos que a função esteja disponível em uma rota. O contexto da solicitação realmente só faz sentido dentro de uma solicitação de um cliente. Como o cliente solicitará que o nosso histograma seja atualizado dependendo da entrada, decoramos nossa função com um decorador de rotas

    @app.route('/graph')
    def hist():
      ...
  4. Retorne o JSON para enviar ao cliente. Em vez de retornar um objeto de figura, retornamos alguns JSON que podemos processar com JavaScript no lado do cliente

    import json
    from plotly.utils import PlotlyJSONEncoder
    
    @app.route('/graph')
    def hist():
      ...
      return json.dumps(p, cls=PlotlyJSONEncoder)

    Se você executasse novamente o servidor Flask agora e navegue no navegador para localhost:5000/graph?bins=30 você veria o fruto do seu trabalho. Embora não seja uma fruta muito saborosa no momento, como tudo o que você verá é toda a saída JSON do seu gráfico. Então, vamos montar a interface do usuário.

Criando a interface do usuário

Vamos querer pegar algumas dependências de front-end. Por uma questão de brevidade, eles são incluídos aqui ao se vincular à CDN. O aplicativo brilhante que estamos imitando usa bootstrap para seu estilo, que também usaremos. Da mesma forma, o sliderInput() função em brilhante usa o ion-rangslider Pacote JS, então vamos também. Iremos usar a biblioteca Plotly js (para a qual o pacote plotly python é um wrapper). Não precisaremos saber como criar esses gráficos em JavaScript, mas usá-lo para obter o gráfico retornado do servidor de balão e renderizá-lo do lado do cliente no navegador.

A cabeça do nosso arquivo HTML em templates/index.html então parece



  
  
  
  
  
  
  
  

  
  
  
  
  

  
  
  Hello Flask
  
  

o {{}} A notação na parte inferior aqui é a sintaxe jinja. O Flask utiliza o modelo jinja para criar páginas da Web que seus usuários consumirão. url_for é uma função que está automaticamente disponível quando você renderiza um modelo usando o balão, usado para gerar URLs para visualizações em vez de precisar escrevê-las manualmente. O modelo Jinja é uma maneira realmente interessante de combinar a marcação bruta com suas variáveis ​​e funções python e algumas instruções lógicas, como para loops. Ainda não escrevemos nenhum estilo, mas criaremos o arquivo pronto para mais tarde, também criaremos um lugar para conter nosso JavaScript

mkdir -p static/{css,js} && touch static/css/app.css static/js/hist.js

Com todas as dependências em vigor, é relativamente fácil criar um layout simples. Temos um layout de 1/3 a 2/3 de duas colunas para controles e conteúdo principal, respectivamente, em algum lugar para conter nossos elementos de entrada e um contêiner vazio para o histograma. o nosso index.html então é



  
Hello Flask!

Voltaremos ao nosso app.py e adicione a rota para esta visualização

@app.route('/')
def home():
  return render_template('index.html')

Nossa completa app.py é então

# app.py
from flask import Flask, render_template, request
from pandas import read_csv
import plotly.express as px
from plotly.utils import PlotlyJSONEncoder
import json
import numpy as np

faithful = read_csv('./data/faithful.csv')
app = Flask(__name__)

@app.route('/graph', methods=['GET'])
def hist():
  # calculate the bins
  x = faithful['waiting']
  counts, bins = np.histogram(x, bins=np.linspace(np.min(x), np.max(x), int(request.args['bins'])+1))
  bins = 0.5* (bins[:-1] + bins[1:])
  p = px.bar(
    x=bins, y=counts,
    title='Histogram of waiting times',
    labels={
      'x': 'Waiting time to next eruption (in mins)',
      'y': 'Frequency'
    },
    template='simple_white'
  )
  return json.dumps(p, cls=PlotlyJSONEncoder)

@app.route('/')
def home():
  return render_template('index.html')

if __name__ == '__main__':
  app.run()

A execução do servidor e a visualização do nosso trabalho ainda não parecerão muito impressionantes, mas estamos quase lá. No final de nossa página, incluímos um arquivo JavaScript, para inicializar nosso controle deslizante de intervalo de íons e usá-lo para enviar o valor escolhido de cliente para servidor para solicitar a plotagem atualizada.

Podemos usar AJAX (JavaScript assíncrono e XML) para enviar os dados do controle deslizante para o nosso /graph A rota da URL e, na resposta, desenhe um novo gráfico no elemento div com o parâmetro histogram Eu iria. Queremos que essa função seja executada quando carregamos a página pela primeira vez e sempre que um usuário move o controle deslizante

// hist.js
const updatePlot = (data) => {
  $.ajax({
      url: 'graph',
      type: 'GET',
      contentType: 'application/json;charset=UTF-8',
      data: {
        'bins': data.from
      },
      dataType: 'json',
      success: function(data){
        Plotly.newPlot('histogram', data)
      }
    });
}

$('.js-range-slider').ionRangeSlider({
    type: 'single',
    skin: 'big',
    min: 1,
    max: 50,
    step: 1,
    from: 30,
    grid: true,
    onStart: updatePlot,
    onFinish: updatePlot
});

Agora estamos chegando a algum lugar. Execute seu aplicativo e navegue até localhost:5000 para ver o controle e o gráfico de saída. Ao arrastar o controle deslizante, o gráfico será redesenhado.

Para finalizar, adicionaremos um pouco de estilo, apenas para nos aproximar do nosso objetivo de exemplo brilhante. Na nossa app.css arquivo em static/css adicionamos o estilo aos controles de entrada e destacamos um pouco mais o título.

.title {
  font-size: 2rem;
}
.well {
  background-color: #f5f5f5;
  padding: 20px;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
}

Execute novamente nosso aplicativo com

python app.py

E pronto, em localhost:5000 temos algo que corresponde bastante ao nosso objetivo. Eu realmente gosto do balão como uma ferramenta para criar aplicativos da Web e APIs para dados e modelos. Existe uma enorme quantidade de poder e flexibilidade disponível no que pode ser criado usando o conjunto de ferramentas explorado aqui.

Veja o resultado final no nosso servidor Connect.

Assista a este espaço para mais posts sobre balões, onde podemos começar a explorar algumas aplicações mais interessantes.


Jumping Rivers são parceiros certificados de serviço completo RStudio. Parte de nossa função é oferecer suporte nos produtos RStudio Pro. Se você usa algum produto RStudio Pro, não hesite em entrar em contato conosco ([email protected]). Podemos oferecer suporte gratuito.

O post Recriando um aplicativo brilhante com o Flask apareceu pela primeira vez em Jumping Rivers.

var vglnk = {key: ‘949efb41171ac6ec1bf7f206d57e90b8’};

(função (d, t) {
var s = d.createElement
s.src = ‘//cdn.viglink.com/api/vglnk.js’;
var r = d.getElementsByTagName
} (documento, ‘script’));

Para Deixe um comentário para o autor, siga o link e comente no blog: r – Rios saltando.

R-bloggers.com oferece atualizações diárias por email sobre notícias e tutoriais do R sobre o aprendizado do R e muitos outros tópicos. Clique aqui se você deseja publicar ou encontrar um emprego em ciência da dados / R.


Deseja compartilhar seu conteúdo com R-blogueiros? clique aqui se você tiver um blog ou aqui se não tiver.



cupom com desconto - o melhor site de cupom de desconto cupomcomdesconto.com.br