Conteúdo


Desenvolva e implemente um aplicativo de gráfico do Banco Mundial no IBM Cloud usando Python, Django e MongoDB

Comments

O Banco Mundial fornece acesso livre e gratuito a volumes de dados sobre índices de desenvolvimento como economia, saúde, ambiente, energia, infraestrutura, pobreza, desenvolvimento social, educação, ciência e tecnologia de países em todo o mundo. Ser capaz de visualizar os dados do Banco Mundial em formatos de diagrama e gráfico pode ajudar os analistas de dados a entenderem a avaliação atual do crescimento de um país nessas diversas áreas.

Neste artigo, mostrarei como desenvolver um aplicativo de gráfico baseado na web que realiza o pull de dados de APIs do Banco Mundial e os renderiza em gráficos compreensíveis.

Para os desenvolvedores isso apresenta uma oportunidade de desenvolver aplicativos usando os dados do Banco Mundial que podem ajudar os governos a adotar medidas preventivas e corretivas para que os recursos de seu país possam ser mais bem gerenciados para o desenvolvimento rápido. Neste artigo, mostrarei como desenvolver um aplicativo de gráfico baseado na web que realiza o pull de dados de APIs do Banco Mundial e os renderiza em gráficos compreensíveis.

Para simplificar o código e a explicação, meu aplicativo de gráfico se concentra em mostrar as tendências de consumo de energia em vários países. O painel de consumo de energia fornece um insight rápido sobre as tendências de consumo de várias fontes de energia, como energia solar, biomassa, hídrica, eólica e geotérmica em diferentes países.

Execute o aplicativoObtenha o código

Sobre o aplicativo

Esse aplicativo é desenvolvido no IBM Cloud usando Python, Django e MongoDB (como cache de dados). O frontend é projetado usando as APIs de gráfico expostas pelo mecanismo de gráficos JavaScript Highcharts. O Highcharts também permite que os usuários imprimam os gráficos ou façam o download deles como imagens ou PDFs. O Django é uma estrutura de aplicativo da web de software livre baseada em Python que encoraja o desenvolvimento rápido de aplicativos da web e permite que os usuários escrevam um código limpo e fácil de manter. Alguns sites conhecidos que usam Django incluem o Pinterest, Instagram, Mozilla, The Washington Times, Disqus e o Public Broadcasting Service.

Sempre que o aplicativo é consultado para quaisquer estatísticas ou métricas, como o consumo de energia solar dos Estados Unidos, ele busca os dados JSON associados a tal métrica das APIs REST do Banco Mundial e os armazena nas coleções do MongoDB usando uma sessão do PyMongo. Esses dados são armazenados em cache no MongoDB por um dia. Consultas buscando as mesmas estatísticas são atendidas realizando o pull dos dados do cache do MongoDB em vez de consultar a API do Banco Mundial. O cache de dados é atualizado diariamente e preenchido novamente com a primeira chamada para o aplicativo.

Na parte final desse artigo, eu mostro como é fácil implementar o aplicativo no IBM Cloud, a plataforma baseada em nuvem de padrão aberto da IBM para desenvolver, gerenciar e executar aplicativos e serviços.

Ok, vamos começar a desenvolver o aplicativo de gráfico.

O que será necessário para desenvolver esse aplicativo

Se você deseja implementar o aplicativo diretamente no IBM Cloud e não deseja desenvolver localmente, é possível ignorar as Etapas de 1 a 3 desse artigo e ir para a Etapa 4. Implemente o aplicativo no IBM Cloud. É possível clonar o código-fonte do repositório do IBM DevOps Services com o comando:

git clone https://hub.jazz.net/git/mamtasharma/trendsapp001

Também é possível clicar no botão Obtenha o código acima e buscar código online completo usando o IBM DevOps Services. Para uma explicação detalhada do código, consulte Etapa 3. Crie e configure o aplicativo de gráfico desse artigo.

Etapa 1. Configure um projeto Django

  1. Instale o Python e o Django. Para a instalação local, certifique-se de ter instalado o Python antes de instalar o Django.
  2. Crie um projeto Django. Um projeto Django é uma coleção de configurações para uma instância do Django, incluindo a configuração do banco de dados, opções específicas do Django e configurações específicas do aplicativo. Para criar um projeto Django, execute o seguinte comando:
    django-admin.py startproject trends_app

    O fluxo de regra startproject (comando) cria um diretório chamado trends_app contendo cinco arquivos. Esses arquivos, listados abaixo, já compõem um aplicativo Django ativo.

    trends_app/
        manage.py
        trends_app/
            __init__.py
            settings.py
            urls.py
            wsgi.py
  3. Se já estiver familiarizado com o Django, é possível ignorar os detalhes a seguir sobre esses arquivos. Se não, as breves descrições a seguir devem ajudá-lo com o entendimento básico de o que esses arquivos fazem.
    • trends_app/: O diretório trends_app/ externo atua como um contêiner para o projeto Django.
    • manage.py: Um utilitário de linha de comando que permite que você interaja com seu projeto Django. Ao digitar python manage.py , é exibida uma lista dos comandos disponíveis.
    • trends_app/trends_app/: O diretório trends_app/trends_app interno é o pacote Python real do seu projeto. Seu nome é o nome do pacote Python que será necessário usar para importar qualquer coisa dentro dele, por exemplo, import trends_app.settings.
    • __init__.py: Esse arquivo é necessário para o Python tratar o diretório trends_app/ como um pacote (um grupo de módulos Python).
    • settings.py: As definições/configurações para esse projeto Django.
    • urls.py: As URLs para esse projeto Django. Pense nele como o "índice" do seu site desenvolvido com Django.
    • wsgi.py: Um ponto de entrada para servidores da web compatíveis com WSGI para entregar seu projeto.

Etapa 2. Inicie o servidor de desenvolvimento

O Django possui um servidor da web de desenvolvimento leve integrado que automaticamente recarrega quando são feitas quaisquer alterações no código-fonte.

  1. Para iniciar o servidor, mude para o diretório de contêiner do seu projeto (cd trends_app) e execute este comando:
    python manage.py runserver

    Se você visualizar a mensagem a seguir, significa que o servidor está ativado localmente na porta 8000.

    Validating models...
    
    0 errors found
    August 25, 2014 - 21:51:25
    Django version 1.6.5, using settings 'trends_app.settings'
    Starting development server at http://127.0.0.1:8000/
    Quit the server with CTRL-BREAK.
  2. Visite http://127.0.0.1:8000/ com seu navegador da web e você verá sua primeira página desenvolvida com Django. First django-powered page
    First django-powered page

Etapa 3. Crie e configure o aplicativo de gráfico

  1. Crie um aplicativo Django de amostra com o seguinte comando, que cria um aplicativo Django chamado trends.
    django-admin.py startapp trends
  2. Modifique o arquivo settings.py para usar o código a seguir:
    INSTALLED_APPS = (
        'django.contrib.auth',
        'django.contrib.contenttypes',
        'django.contrib.sessions',
        'django.contrib.sites',
        'django.contrib.messages',
        trends,
    )
  3. Agora configure o mapeamento de URL. O mapeamento determina como você acessa seu aplicativo. A listagem de código a seguir mostra como o arquivo trends_app/urls.py deve ser:
    from django.conf.urls import include, url
    
    urlpatterns = [
        url(r'^trends/', include('trends.urls'))
    ]
  4. Altere o arquivo trends/urls.py para incluir o código que mapeia a URL fetch_and_draw_data/ para a chamada fetch_and_draw_data() (função de visualização), como mostrado na listagem de código a seguir. O arquivo trends/urls.py mapeia uma URL para uma função de visualização para que o Django saiba onde encontrar as funções de visualização.
    urlpatterns = [
        url(r'^$', views.index, name='index'),
        url(r'^fetch_and_draw_data/', views.fetch_and_draw_data, name='fetch_and_draw_data'),
    ]
  5. Inclua a função de visualização a seguir chamada fetch_and_draw_data() no arquivo trends/views.py. O arquivo trends/views.py contém uma função do Python que aceita um parâmetro de solicitação e retorna uma resposta. A solicitação normalmente é uma solicitação do servidor da web e a visualização recebe todos os parâmetros passados juntamente com essa solicitação. Em seguida, a visualização executa a lógica necessária para determinar a resposta adequada.
    def fetch_and_draw_data(request):
        connect.initialize()
        country = request.GET.get('country', 'USA')
        metric = request.GET.get('metric', 'Total')
    
        country_code = countries_mapping[country]
        indicator_code = indicators_mapping[metric]
        data_url = get_url(country_code, indicator_code)
        json_from_cache = connect.get_json_data(data_url)
        ...
        //create a data list
        data_list = {"graphTitle": graphTitle ,"xAxisLabels" : xAxisLabels,
        "xAxisTitle" : xAxisTitle, "yAxisTitle" : yAxisTitle, "yAxisValues" : yAxisValues}
        return HttpResponse(simplejson.dumps(data_list))
  6. Crie um novo arquivo chamado trends/connect.py e inclua a função initialize() nele. O arquivo trends/connect.py é responsável pela conexão com o MongoDB. A conexão é estabelecida usando o PyMongo, que é uma interface Python para o MongoDB e é inicializada no MongoDB chamando a função initialize() .

    O fragmento de código a seguir mostra como uma sessão do PyMongo é estabelecida usando credenciais de conexão obtidas das variáveis VCAP_SERVICE do IBM Cloud (supondo que você já tem uma instância do serviço MongoDB em execução no IBM Cloud).

    # Initialize MongoDB connection with credentials from vcap config
    def initialize():
      # If connection is not initialized, initialize it.
      if not config.initialized:
        #Get the connection credentials from VCAP variables
        vcap_config = os.environ.get('VCAP_SERVICES')
        decoded_config = json.loads(vcap_config)
        for key, value in decoded_config.iteritems():
             if key.startswith('mongodb'):
                 mongo_creds = decoded_config[key][0]['credentials']
        mongo_url = str(mongo_creds['url'])
    
        client = pymongo.MongoClient(mongo_url)
        config.db = config.client['db']
        config.collection = config.db['mycollection']
        config.collection.remove({})
        config.initialized=True
        refresh()
  7. Inclua a função refresh() no arquivo trends/connect.py. O fluxo de regra refresh() (função) é chamada quando a função initialize() é executada. Ela é uma tarefa periódica que entra em ação a cada 24 horas e limpa os dados existentes nas coleções do MongoDB para que a próxima chamada para o aplicativo busque dados da URL REST do Banco Mundial.
    # Periodic task to purge data from MongoDB collection
    def refresh():
      config.collection.remove({})
      threading.Timer(86400, refresh).start()
  8. Inclua a função get_url() no arquivo trends/views.py. O fluxo de regra get_url() (função) adota o código do país e o nome da métrica (por exemplo, consumo de energia solar) como um parâmetro de solicitação e cria uma URL de API, como mostrado na listagem de código a seguir:
    def get_url(country_code, indicators):
      return ("http://api.worldbank.org/countries/%s/indicators/%s?per_page=10&date=2000:2010&format=json" % (country_code, indicators)) ;
  9. Inclua a função get_json_data() no arquivo trends/connect.py. Essa função verifica se a URL já está presente na coleção do MongoDB. Se a entrada para a URL não for encontrada, ela recupera os dados no formato JSON fazendo uma chamada para a URL da API e depois os armazena em cache na coleção do MongoDB. Se a entrada for encontrada, ela retorna os dados em cache correspondentes à URL existente.

    A listagem de código a seguir mostra como a busca e o armazenamento em cache dos dados acontecem através de uma chamada para a função get_json_data() .

    # Hit the World Bank url to retrieve data
    def get_json_data(data_url):
      # If data is in cache, return it
      if(config.collection.find_one({"url": data_url}) is not None):
        return config.collection.find_one({"url": data_url})["jsonData"]
      # Fetch it from MongoDB otherwise
      else:
        response = urllib2.urlopen (data_url)
        jsonData = simplejson.load(response)
        config.collection.insert({'url': data_url, 'jsonData' : jsonData})
        return jsonData
  10. Inclua um diretório chamado templates no diretório trends_app. Em seguida, no diretório templates, inclua um arquivo chamado index.html (o único modelo no projeto) e importe a biblioteca Highcharts JS nele. O Highcharts JS é um mecanismo de gráficos JavaScript popular por sua abordagem simples e flexível da renderização de dados na forma de gráficos interativos.

    A listagem de código a seguir mostra a importação do Highcharts:

     # Import highchart javascript
    <script src="//code.highcharts.com/highcharts.js"></script>
    <script src="//code.highcharts.com/modules/exporting.js"></script>
  11. Inclua a função JavaScript fetch_and_draw() no arquivo index.html. Essa função faz uma chamada Ajax para a função de visualização fetch_and_draw_data do backend, como mostrado na listagem de código a seguir.
    $.ajax({
    url : "/trends/fetch_and_draw_data",
                    type : "GET",
                    dataType: "json",
                    data : {
                        csrfmiddlewaretoken: '{{ csrf_token }}',
                        country : country,
                        metric : metric
                    },

    Quando uma métrica é selecionada no menu da guia ou um país é selecionado no menu suspenso, tab_id é recuperado e a função fetch_and_draw() é chamada, que, por sua vez, obtém os dados do backend fazendo uma chamada Ajax para a URL fetch_and_draw_data . Por fim, o gráfico de barras é renderizado usando o Highcharts. O fragmento de código a seguir mostra a chamada para a função JavaScript fetch_and_draw() :

    $('#tabs').tabs({
            activate: function(event ,ui){
              var tab_id = ($("#tabs").tabs('option', 'active'));
              tab_id += 1;
              fetch_and_draw(tab_id);
                
            }
        });
    
    
    $('#countries_id').change(function()
            {
              var tab_id = ($("#tabs").tabs('option', 'active'));
              tab_id += 1;
              fetch_and_draw(tab_id);
    
            });

    É possível ver a listagem de código completa dos arquivos views.py e index.html no IBM DevOps Services.

Etapa 4. Implemente o aplicativo no IBM Cloud

Após o aplicativo ser codificado, é hora de implementá-lo no IBM Cloud.

  1. Inclua o arquivo requirement.txt na raiz do seu projeto. O arquivo requirement.txt deve conter todas as dependências externas (como o Django e o PyMongo) que são necessárias para executar o aplicativo de gráfico. Ao executar o aplicativo, o IBM Cloud garante que esse arquivo é lido e que as dependências listadas estão instaladas.

    O arquivo requirement.txt necessário para esse projeto é:

    Django==1.6.5
    pymongo==2.7.1
  2. Crie o arquivo run.sh na raiz do seu projeto. O arquivo run.sh é o shell script que inicia o aplicativo da web após o aplicativo ser implementado no IBM Cloud. Certifique-se de obter o valor da porta da variável de ambiente VCAP_APP_PORT ao iniciar o servidor da web.

    Inclua as linhas a seguir no arquivo run.sh.

    #!/bin/bash
    if [ -z "$VCAP_APP_PORT" ];
    then SERVER_PORT=5000;
    else SERVER_PORT="$VCAP_APP_PORT";
    fi
    echo port is $SERVER_PORT
    python manage.py runserver --noreload 0.0.0.0:$SERVER_PORT
  3. Faça o download e instale a ferramenta de linha de comando Cloud Foundry (cf) que será usada para fazer o upload e gerenciar o aplicativo. Para validar se o Cloud Foundry está instalado com sucesso, é possível executar o comando a seguir para retornar a versão:
    cf --version
  4. Efetue login no IBM Cloud e configure o terminal. É possível efetuar login no IBM Cloud a partir da CLI executando o comando:
    cf login -a https://api.ng.bluemix.net
  5. Realize o push do aplicativo para o IBM Cloud. Acesse a raiz do seu projeto (trends_app/) e faça o upload do aplicativo de gráfico para o IBM Cloud executando o comando a seguir:
    cf push  trendsapp001 --no-manifest --no-start -b https://github.com/cloudfoundry/python-buildpack  -c "sh run.sh"

    O fluxo de regra --no-start (opção) indica que o aplicativo não deve ser iniciado a menos que ele esteja vinculado aos serviços necessários. Isso garante que o serviço MongoDB está vinculado ao aplicativo antes de ele ser iniciado.

    O fluxo de regra -c (opção) é usada para especificar o comando inicial que deve ser executado pelo IBM Cloud ao iniciar o aplicativo.

    O fluxo de regra -b (sinalização) indica o buildpack a ser usado. Para esse aplicativo de gráfico, precisamos do tempo de execução Python, que é obtido passando a URL do repositório Git do buildpack Python ( https://github.com/cloudfoundry/python-buildpack) com a diretiva -b .

    Também é possível fornecer o nome do aplicativo, informações do buildpack e o comando sh run.sh no arquivo de configuração manifest.yml, como a seguir:

    ---
    applications:
    - name: trendsapp001
      memory: 256M
      command: sh run.sh
      buildpack: https://github.com/cloudfoundry/python-buildpack
  6. Inclua o arquivo manifest.yml na raiz do projeto. Ao usar o arquivo manifest.yml, realize o push do aplicativo para o IBM Cloud usando o comando a seguir:
    cf push  --no-start

    Lembre-se de escolher um nome de host diferente para que sua rota de URL resultante não conflite com a URL da demo. Você deve ver uma tela semelhante à abaixo ao realizar o push do aplicativo de gráfico para o IBM Cloud.

    Screen capture of output of 'cf push' command
    Screen capture of output of 'cf push' command
  7. Crie uma instância do serviço MongoDB. No terminal, acesse a raiz do projeto e crie uma instância do serviço MongoDB com um nome exclusivo digitando o comando a seguir:
    cf create-service mongodb 100 mongodb001
  8. Vincule a instância do serviço MongoDB ao novo aplicativo, trendsapp001 no nosso caso, digitando o seguinte comando:
    cf bind-service trendsapp001 mongodb001

    De maneira alternativa, também é possível criar uma instância do serviço MongoDB efetuando login no painel de administração do IBM Cloud e localizando o aplicativo de gráfico no menu APPS do SoftLayer.

    IBM Cloud dashboard - application listing
  9. Selecione seu aplicativo e, na página resultante, use a opção Add Service para incluir o serviço MongoDB no seu aplicativo. Screen capture of IBM Cloud dashboard - adding MongoDB as a service
    Screen capture of IBM Cloud dashboard - adding MongoDB as a service

    Agora você deve ver uma instância do serviço MongoDB que está vinculada ao seu aplicativo no painel de administração do IBM Cloud.

    Screen capture of IBM Cloud dashboard - listing bound services
    Screen capture of IBM Cloud dashboard - listing bound services

    Após vincular uma instância do serviço MongoDB ao aplicativo, a configuração a seguir é incluída na variável de ambiente VCAP_SERVICES:

    IBM Cloud dashboard - environment variables
    IBM Cloud dashboard - environment variables
  10. Execute o comando a seguir para iniciar o aplicativo.
    cf start trendsapp001
  11. Acesse seu aplicativo de gráfico visitando trendsapp001.mybluemix.net/trends (substituindo trendsapp001 pelo nome do host exclusivo que você forneceu no seu arquivo manifest.yml). Além disso, teste a demo na produção clicando no botão Execute o aplicativo no início desse artigo.

    A captura de tela a seguir mostra o gráfico de consumo de energia solar dos Estados Unidos conforme mostrado no aplicativo. É possível imprimir o gráfico ou fazer o download dele no formato de imagem ou PDF clicando no menu à direita da tela.

    Screen capture - Energy Consumption Dashboard
    Screen capture - Energy Consumption Dashboard

Conclusão

Nesse artigo, eu demonstrei como os aplicativos Django podem ser criados e implementados na plataforma IBM Cloud. Também inclui detalhes sobre como usar o serviço MongoDB do IBM Cloud como um cache de dados e como integrá-lo à estrutura Django. O código-fonte do aplicativo de gráfico apresentado nesse artigo pode ser transferido por download a partir de seu repositório do IBM DevOps Services, juntamente com todos os arquivos de configuração necessários para deixá-lo funcionando. Após desenvolver esse aplicativo de gráfico, agora você deve ser capaz de aplicar o processo em seus próprios projetos. As possibilidades são infinitas.


Recursos para download


Comentários

Acesse ou registre-se para adicionar e acompanhar os comentários.

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=80
Zone=Cloud computing
ArticleID=993403
ArticleTitle=Desenvolva e implemente um aplicativo de gráfico do Banco Mundial no IBM Cloud usando Python, Django e MongoDB
publish-date=12262014