Como criar um painel baseado na Web com Django, MongoDB e Tabela Dinâmica

Olá, a comunidade freeCodeCamp!

Neste tutorial, gostaria de compartilhar com você uma abordagem para visualização de dados em Python, que você pode aplicar ainda mais no desenvolvimento do Django.

Se você já encontrou a necessidade de construir um painel interativo ou você gostaria de tentar fazer isso, pode seguir as etapas deste tutorial.

Se você tiver alguma dúvida sobre o processo, pergunte nos comentários. Ficarei feliz em ajudá-lo.

Aqui está a lista de habilidades que você dominará após a conclusão do tutorial:

• Como criar um básico Django aplicativo
• Como hospedar remoto MongoDB dados em MongoDB Atlas
• Como importar JSON e CSV dados para MongoDB
• Como adicionar um ferramenta de relatórios para o aplicativo Django

Vamos começar! 👩🏽‍💻👨🏽‍💻

Pré-requisitos

• Conhecimento básico de desenvolvimento web
• Conhecimento confiante de Pitão
• Experiência básica com NoSQL bancos de dados (por exemplo, MongoDB)

• Django – uma estrutura da Web Python de alto nível.
• Atlas MongoDB – um serviço de banco de dados em nuvem para aplicativos modernos. Aqui, hospedaremos nosso banco de dados MongoDB.
• Tabela dinâmica e gráficos de Flexmonster – um componente da web JavaScript para geração de relatórios. Ele lidará com tarefas de visualização de dados no lado do cliente.
• O conector MongoDB para Flexmonster – uma ferramenta do lado do servidor para comunicação rápida entre a Tabela Dinâmica e o MongoDB.
• PyCharm Community Edition – um IDE para desenvolvimento em Python.
• Kaggle dados

Estabelecer um projeto Django

Se você é novo no desenvolvimento do Django, tudo bem. Passo a passo, configuraremos tudo para tornar nosso aplicativo excelente.

• Verifique se você já Django instalado em sua máquina.
• Primeiro, abra o diretório em que você deseja que seu projeto seja criado. Abra o console e execute o seguinte comando para criar um novo projeto Django brilhante:

django-admin startproject django_reporting_project

• Em seguida, navegue para este projeto:

cd django_reporting_project

• Vamos verificar se tudo funciona como esperado. Execute o servidor Django:

python manage.py runserver

Salvo indicação em contrário, o servidor de desenvolvimento inicia na porta 8000. Aberto http://127.0.0.1:8000/ no seu navegador. Se você pode ver este foguete legal, estamos no caminho certo!

Crie um aplicativo

Agora é hora de criar nosso aplicativo com recursos de relatório.

Se você não se sentir confiante sobre a diferença entre projetos e aplicativos no Django, aqui está uma referência rápida para ajudá-lo a descobrir.

• Vamos chamá-lo dashboard:

python manage.py startapp dashboard

• Em seguida, abra o projeto no seu IDE favorito. Eu recomendo usar PyCharm já que faz todo o processo de programação em Python uma felicidade. Também gerencia convenientemente a criação de um ambiente virtual isolado específico do projeto.
• Após a criação de um aplicativo, é necessário registrá-lo no nível do projeto. Abra o django_reporting_project/settings.py e adicione o nome do aplicativo ao final do INSTALLED_APPS Lista:

INSTALLED_APPS = [    'django.contrib.admin',    'django.contrib.auth',    'django.contrib.contenttypes',    'django.contrib.sessions',    'django.contrib.messages',    'django.contrib.staticfiles',    'dashboard',]

Viva! Agora, o projeto sabe da existência do seu aplicativo e estamos prontos para avançar para a configuração do banco de dados.

Configurar o banco de dados MongoDB usando o MongoDB Atlas

Vamos deixar o aplicativo de lado até terminarmos de organizar nosso banco de dados. Sugiro que pratiquemos a criação do banco de dados remoto do MongoDB hospedando-o no MongoDB Atlas – um serviço de banco de dados em nuvem para aplicativos. Como alternativa, você pode preparar um banco de dados local e trabalhar com ele de qualquer maneira conveniente (por exemplo, via MongoDB Compass ou o mongo shell)

• Depois de fazer login na sua conta do MongoDB, crie nosso primeiro projeto. Vamos nomear ECommerceData:

• Em seguida, adicione membros (se necessário) e defina permissões. Você pode convidar usuários para participar do seu projeto via endereço de email.
• Crie um cluster:

• Escolha o plano. Como estamos no caminho de aprendizado, o plano gratuito mais simples será suficiente para nossas necessidades.
• Selecione um provedor de nuvem e uma região. As regiões recomendadas são inferidas através da sua localização e marcadas com estrelas.
• Dê um nome significativo ao nosso novo cluster. Observe que não pode ser alterado posteriormente. Vamos nomear ReportingData:

Preparar dados

Enquanto você espera que seu cluster seja criado, vamos analisar mais de perto os dados com os quais trabalharemos. Para este tutorial, vamos usar o conjunto de dados Kaggle com transações de um varejista do Reino Unido. Usando esses dados, tentaremos criar um relatório significativo que possa servir para Análise exploratória de dados dentro de uma organização real.

Além disso, usaremos simulação JSON dados sobre marketing. Isso nos ajudará a atingir o objetivo de estabelecer diferentes ferramentas de relatório no mesmo aplicativo. Você pode escolher qualquer dado de sua preferência.

Conecte-se ao seu cluster

Agora que nosso cluster está pronto, vamos conectar para isso!

• Coloque na lista branca seu endereço IP atual ou adicione outro.
• Crie um usuário do MongoDB. O primeiro terá atlasAdmin permissões para o projeto atual, o que significa possuir o seguintes funções e ações de privilégio. Por motivos de segurança, é recomendável gerar automaticamente uma senha forte.
• Escolha um método de conexão que melhor lhe convier. Para testar a conexão, podemos usar primeiro a cadeia de conexão do shell mongo. Mais tarde, também usaremos uma cadeia de conexão para um aplicativo.

• Conecte-se a ele através do shell mongo. Abra a linha de comando e execute o seguinte:

mongo "mongodb+srv://reportingdata-n8b3j.mongodb.net/test"  --username yourUserName

O prompt interativo solicitará uma senha para autenticação.

Verificar métricas de cluster

Ufa! Estamos quase lá.

Agora volte à página com o resumo do cluster e veja como ele ganhou vida! A partir de agora, podemos obter informações sobre as operações de gravação e leitura do banco de dados MongoDB, o número de conexões ativas, o tamanho lógico do nosso conjunto de réplicas – todas essas informações estatísticas estão à sua disposição. Mas o mais importante agora é possível criar e gerenciar bancos de dados e coleções.

Crie um banco de dados

Crie seu primeiro banco de dados e duas coleções. Vamos nomeá-los comércio eletrônico, transaçõese marketing correspondentemente.

Aqui está como nosso espaço de trabalho se parece agora:

Parece bastante vazio, não é?

Importar dados para o MongoDB

Vamos preencher a coleção com dados. Começaremos com os dados de varejo baixados anteriormente de Kaggle.

• Descompacte o arquivo compactado e navegue até o diretório em que seu conteúdo está armazenado.
• Em seguida, abra o prompt de comando e importe os dados para o diretório transações coleção do comércio eletrônico banco de dados usando o mongoimport comando e a cadeia de conexão fornecida para o shell mongo:

mongoimport --uri "mongodb+srv://username:[email protected]/ecommerce?retryWrites=true&w=majority" --collection transactions --drop --type csv --headerline --file data.csv

Remember Lembre-se de substituir nome do usuário e senha palavras-chave com suas credenciais.

---

Parabéns! Acabamos de baixar 541909 documentos para nossa coleção. Qual é o próximo?

• Faça o upload do conjunto de dados com métricas de marketing para o diretório marketing coleção. Aqui está o JSON Arquivo com os dados de amostra que vamos usar.

Importe a matriz JSON para a coleção usando o seguinte comando:

mongoimport --uri "mongodb+srv://username:[email protected]/ecommerce?retryWrites=true&w=majority" --collection marketing --drop --jsonArray marketing_data.json

Se esses dados não forem suficientes, poderíamos gerar dinamicamente mais dados usando o mongoengine / PyMongo modelos. É para isso que nosso próximo tutorial desta série será dedicado. Mas, por enquanto, pularemos esta parte e trabalharemos com os dados que já temos.

---

Agora que nossas coleções contêm dados, podemos explorar o número de documentos em cada coleção, bem como sua estrutura. Para mais informações, recomendo usar MongoDB Compass que é a ferramenta GUI oficial do MongoDB. Com ele, você pode explorar a estrutura de cada coleção, verificar a distribuição dos tipos de campo, criar pipelines de agregação, executar consultas, avaliar e otimizar seu desempenho. Para iniciar, baixar o aplicativo e use a cadeia de conexão do Compass fornecida pelo MongoDB Atlas.

Mapear padrões de URL para visualizações

Vamos voltar ao Django.

• Crio urls.py na pasta do aplicativo (dentro dashboard) Aqui, armazenaremos rotas de URL para nosso aplicativo. Esses padrões de URL corresponderão às visualizações definidas em dashboard/views.py:

from django.urls import pathfrom . import viewsurlpatterns = [    path('report/retail', views.ecommerce_report_page, name='retail_report'),    path('report/marketing', views.marketing_report_page, name='marketing_report'),]

• Os URLs do aplicativo precisam ser registrados no nível do projeto. Aberto django-reporting-project/urls.py e substitua o conteúdo pelo seguinte código:

from django.contrib import adminfrom django.urls import path, includeurlpatterns = [    path('admin/', admin.site.urls),    path('', include('dashboard.urls')),]

Criar visualizações

Uma visualização é simplesmente uma função que aceita uma solicitação da web e retorna uma resposta da web. A resposta pode ser de qualquer tipo. Usando o render () , retornaremos um modelo HTML e um contexto combinados em uma única HttpResponse objeto. Observe que as visualizações no Django também podem ser baseado em classe.

• No dashboard/views.py vamos criar duas visualizações simples para nossos relatórios:

from django.shortcuts import renderdef ecommerce_report_page(request):   return render(request, 'retail_report.html', {})def marketing_report_page(request):   return render(request, 'marketing_report.html', {})

Criar modelos

• Primeiro, crie o templates pasta dentro do diretório do seu aplicativo. É aqui que o Django estará pesquisando suas páginas HTML.
• A seguir, vamos projetar o layout do nosso aplicativo. Sugiro que adicionemos uma barra de navegação que será exibida em todas as páginas. Para isso, criaremos um modelo básico chamado base.html que todas as outras páginas serão estendidas de acordo com a lógica comercial. Desta forma, vamos tirar proveito de herança de modeloe – uma parte poderosa do mecanismo de modelos do Django. Por favor, encontre o código HTML em GitHub.

Como você deve ter notado, usaremos os estilos de Bootstrap. Isso é para embelezar nossas páginas com componentes de interface do usuário prontos para uso.

Observe que, na barra de navegação, adicionamos dois links que redirecionam para as páginas do relatório. Você pode fazer isso configurando o link href propriedade para o nome do padrão de URL, especificado pelo nome palavra-chave no padrão de URL. Por exemplo, da seguinte maneira:

href="https://www.freecodecamp.org/{% url"marketing_report' %}"

• É hora de criar páginas onde os relatórios serão localizados. Deixe-me mostrar-lhe como criar um relatório de varejo primeiro. Seguindo esses princípios, você pode criar quantas outras páginas de relatórios precisar.

1. Nos modelos, crie marketing_report.html.
2. Adicione um estende para herdar do modelo básico: {% extends "base.html" %}
3. Adicione um quadra para definir nosso modelo filho conteúdo: {% block content %}
{% endblock %}
4. Dentro do bloco, adicione scripts e contêineres do Flexmonster onde os componentes de relatório serão colocados (ou seja, a tabela dinâmica e os gráficos dinâmicos):

5. Adicionar

var pivot = new Flexmonster({    container: "#pivot",    componentFolder: "https://cdn.flexmonster.com/",    height: 600,    toolbar: true,    report: {        "dataSource": {            "type": "api",            "url": "http://localhost:9204/mongo", // the url where our connector is running            "index": "marketing" // specify the collection’s name        },        "slice": {}    }});

"slice": {        "rows": [            {                "uniqueName": "Country"            }        ],        "columns": [            {                "uniqueName": "[Measures]"            }        ],        "measures": [            {                "uniqueName": "Leads",                "aggregation": "sum"            },            {                "uniqueName": "Opportunities",                "aggregation": "sum"            }        ]    }

"mapping": {    "InvoiceNo": {        "caption": "Invoice Number",        "type": "string"    },    "StockCode": {        "caption": "Stock Code",        "type": "string"    },    "Description": {        "type": "string"    },    "Quantity": {        "type": "number"    },    "InvoiceDate": {        "type": "string",        "caption": "Invoice Date"    },    "UnitPrice": {        "type": "number",        "caption": "Unit Price"    },    "CustomerID": {        "type": "string",        "caption": "Customer ID"    },    "Country": {        "type": "string"    }}