Содержание


Создание и развертывание в Bluemix приложения для отображения графиков Всемирного банка с помощью Python, Django и MongoDB

Comments

Всемирный банк предоставляет бесплатный и открытый доступ к томам данных об индексах развития, относящихся к экономике, здравоохранению, окружающей среде, энергетике, инфраструктуре, благосостоянию, социальному развитию, образованию, науке и технике разных стран. Возможность визуализировать данные Всемирного банка в виде графиков и диаграмм помогает аналитикам дать оценку текущего состояния и темпов роста страны в этих областях.

В этой статье я покажу, как разработать веб-приложение, которое извлекает данные из API Всемирного банка и выводит их в виде наглядных графиков.

Разработчикам это позволит создавать приложения, использующие данные Всемирного банка, которые помогут правительству принимать заблаговременные и эффективные меры, чтобы лучше управлять ресурсами своих стран, добиваясь ускоренного развития. В этой статье я покажу, как разработать веб-приложение, которое извлекает данные из API Всемирного банка и выводит их в виде наглядных графиков.

Для простоты программирования и объяснения приложение сосредоточено на демонстрации тенденций энергопотребления в разных странах. График энергопотребления обеспечивает быстрый анализ тенденций использования в разных странах таких источников энергии, как солнечная энергия, биомасса, гидроэнергия, энергия ветра и геотермальная энергия.

Запустить приложениеПолучить код

Сведения о приложении

Приложение разработано на платформе IBM Bluemix с использованием Python, Django и MongoDB (для кэширования данных). В клиентской части используются графические API, предоставляемые JavaScript-механизмом построения диаграмм Highcharts. Highcharts также позволяет распечатывать диаграммы или загружать их в виде изображений или PDF-файлов. Django – это платформа веб-приложений с открытым исходным кодом на основе Python, которая помогает быстро разрабатывать веб-приложения и писать чистый, легко поддерживаемый код. В число популярных сайтов, использующих Django, входят Pinterest, Instagram, Mozilla, The Washington Times, Disqus и Public Broadcasting Service.

Всякий раз, когда приложение запрашивает статистические или количественные данные, такие как потребление солнечной энергии в США, оно извлекает данные в формате JSON, связанные с этим показателем, из REST API Всемирного банка и сохраняет их в коллекциях MongoDB с помощью сеанса PyMongo. Эти данные хранятся к кэше MongoDB одни сутки. Затем запросы той же статистики обслуживаются путем считывания данных из кэша MongoDB, вместо запросов к API Всемирного банка. Данные в кэше обновляется каждый день и вновь заполняются при первом вызове приложения.

В заключительной части статьи я покажу, как легко развернуть приложение в Bluemix – облачной среде на основе открытого стандарта IBM, предназначенной для создания, управления и запуска приложений и услуг.

Итак, приступим к созданию приложения для построения графиков!

Что требуется для создания этого приложения

  • Учетная запись IBM Bluemix.
  • Общее представление о следующих предметах:

Те, кто хочет, не разрабатывая приложение локально, сразу развернуть его в Bluemix, могут пропустить шаги 1-3 и перейти к шагу 4 настоящей статьи Развертывание приложения в Bluemix. Исходный код можно скопировать из репозитория IBM DevOps Services с помощью команды:

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

Также можно нажать кнопку Получить код в начале статьи и просмотреть весь код в онлайне с помощью IBM DevOps Services. Подробное описание кода приведено в шаге 3 Создание и настройка приложения для построения графиков.

Шаг 1. Настройка проекта Django

  1. Установите Python и Django. Для локальной установки, прежде чем устанавливать Django, убедитесь, что у вас установлен Python.
  2. Создание проекта Django. Проект Django — это набор параметров экземпляра Django, включая конфигурацию базы данных, специальные параметры Django и специальные параметры приложения. Для создания проекта Django выполните следующую команду:
    django-admin.py startproject trends_app

    Команда startproject создает каталог с именем trends_app, содержащий пять файлов. Эти файлы, перечисленные ниже, представляют собой действующее приложение Django.

    trends_app/
        manage.py
        trends_app/
            __init__.py
            settings.py
            urls.py
            wsgi.py
  3. Те, кто уже знаком с Django, могут пропустить сведения об этих файлах. Для остальных мы приводим их краткое описание.
    • trends_app/: внешний каталог trends_app/ играет роль контейнера проекта Django;
    • manage.py: утилита на основе командной строки, которая позволяет взаимодействовать с проектом Django. Набрав python manage.py, вы получите список доступных команд;
    • trends_app/trends_app/: внутренний каталог trends_app/trends_app — собственно пакет Python для вашего проекта. Его имя – это имя пакета Python, которое нужно использовать для импорта в него чего бы то ни было, например, import trends_app.settings;
    • __init__.py: этот файл необходим для того, чтобы Python рассматривал каталог trends_app/ в качестве пакета (набора модулей Python);
    • settings.py: настройки/конфигурация этого проекта Django;
    • urls.py: URL-адреса для этого проекта Django. Считайте это «оглавлением» своего сайта на основе Django;
    • wsgi.py: точка входа для WSGI-совместимых веб-серверов, обслуживающих ваш проект.

Шаг 2. Запуск сервера разработки

В Django есть легкий встроенный веб-сервер разработки, который автоматически перезагружается при внесении любых изменений в исходный код.

  1. Чтобы запустить этот сервер, перейдите в каталог контейнера своего проекта (cd trends_app) и выполните команду:
    python manage.py runserver

    Следующее сообщение означает, что сервер запущен локально с выходом на порт 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. Введите в свой веб-браузер http://127.0.0.1:8000/, и вы увидите первую страницу, созданную Django. Первая страница, построенная Django
    Первая страница, построенная Django

Шаг 3. Создание и настройка приложения для построения графиков

  1. Создайте пример приложения Django с помощью следующей команды, которая создает Django-приложение trends.
    django-admin.py startapp trends
  2. Измените файл settings.py, используя следующий код:
    INSTALLED_APPS = (
        'django.contrib.auth',
        'django.contrib.contenttypes',
        'django.contrib.sessions',
        'django.contrib.sites',
        'django.contrib.messages',
        trends,
    )
  3. Теперь настройте отображение URL-адресов. Отображение диктует, как обращаться к вашему приложению. В следующем листинге показано, как должен выглядеть файл trends_app/urls.py:
    from django.conf.urls import include, url
    
    urlpatterns = [
        url(r'^trends/', include('trends.urls'))
    ]
  4. Измените файл trends/urls.py, включив код, который отображает URL-адрес fetch_and_draw_data/ на функцию fetch_and_draw_data(), как показано в следующем листинге. Файл trends/urls.py сопоставляет URL-адрес с функцией, чтобы Django «знал», где искать функции просмотра.
    urlpatterns = [
        url(r'^$', views.index, name='index'),
        url(r'^fetch_and_draw_data/', views.fetch_and_draw_data, name='fetch_and_draw_data'),
    ]
  5. Включите в файл trends/views.py следующую функцию просмотра fetch_and_draw_data(). Файл trends/views.py содержит функции Python, которые принимают запрос параметра и возвращают результат. Запрос обычно поступает от веб-сервера, и функция принимает любые параметры, переданные вместе с этим запросом. Затем функция выполняет логику, необходимую для определения соответствующей реакции.
    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)
        ...
        //Создание списка данных
        data_list = {"graphTitle": graphTitle ,"xAxisLabels" : xAxisLabels,
        "xAxisTitle" : xAxisTitle, "yAxisTitle" : yAxisTitle, "yAxisValues" : yAxisValues}
        return HttpResponse(simplejson.dumps(data_list))
  6. Создайте новый файл trends/connect.py и добавьте в него функцию initialize(). Файл trends/connect.py отвечает за подключение к MongoDB. Подключение устанавливается с помощью PyMongo – интерфейса Python к MongoDB – и инициализируется в MongoDB путем вызова функции initialize().

    В следующем листинге показано, как устанавливается сеанс PyMongo с использованием учетных данных соединения, полученных из переменных Bluemix VCAP_SERVICE (в предположении, что у вас уже есть экземпляр службы MongoDB, работающий в Bluemix).

    # Инициализация подключения MongoDB с учетными данными из vcap config
    def initialize():
      # Если подключение не инициализировано, инициализировать его.
      if not config.initialized:
        #Получить учетные данные соединения из переменных VCAP
        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. Добавьте в файл trends/connect.py функцию refresh(). Функция refresh() вызывается при выполнении функции initialize(). Это периодическая задача, которая выполняется каждые 24 часа и удаляет данные из коллекций MongoDB, так чтобы при следующем вызове приложение извлекало эти данные из URL-адреса REST Всемирного банка.
    # Периодическая задача очистки данных из коллекции MongoDB
    def refresh():
      config.collection.remove({})
      threading.Timer(86400, refresh).start()
  8. Добавьте в файл trends/connect.py функцию get_url(). Функция get_url() принимает в качестве параметров запроса код страны и показатель (например, потребление солнечной энергии) и создает URL API, как показано в следующем листинге:
    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. Добавьте в файл trends/connect.py функцию get_json_data(). Эта функция проверяет, присутствует ли уже URL-адрес в коллекции MongoDB. Если URL-адрес не найден, она извлекает данные в формате JSON, обращаясь к API URL-адресов, а затем кэширует его в коллекции MongoDB. Если запись найдена, она возвращает кэшированные данные, соответствующие существующему URL-адресу.

    В следующем листинге показано, как происходит извлечение и кэширование данных путем вызова функции get_json_data().

    # Обращение по URL-адресу Всемирного банка для получения данных
    def get_json_data(data_url):
      # Если данные находятся в кэше, они извлекаются
      if(config.collection.find_one({"url": data_url}) is not None):
        return config.collection.find_one({"url": data_url})["jsonData"]
      # В противном случае извлечь их из MongoDB
      else:
        response = urllib2.urlopen (data_url)
        jsonData = simplejson.load(response)
        config.collection.insert({'url': data_url, 'jsonData' : jsonData})
        return jsonData
  10. Добавьте в каталог trends_app каталог templates. Затем в каталоге templates добавьте файл index.html (единственный шаблон в проекте) и импортируйте в него библиотеку Highcharts JS. Highcharts JS – это JavaScript популярный механизм построения графиков с гибким и простым подходом к визуализации данных в виде интерактивных графиков и диаграмм.

    Следующий листинг иллюстрирует импорт Highcharts:

     # Импорт highchart javascript
    <script src="//code.highcharts.com/highcharts.js"></script>
    <script src="//code.highcharts.com/modules/exporting.js"></script>
  11. Добавьте в файл index.html функцию JavaScript fetch_and_draw(). Эта функция делает Ajax-вызов к функции fetch_and_draw_data на сервере, как показано в следующем листинге.
     $.ajax({
                    url : "/trends/fetch_and_draw_data",
                    type : "GET",
                    dataType: "json",
                    data : {
                        csrfmiddlewaretoken: '{{ csrf_token }}',
                        country : country,
                        metric : metric
                    },

    При выборе показателя из меню закладок или страны из раскрывающегося меню извлекается tab_id и вызывается функция fetch_and_draw(), которая, в свою очередь, получает данные от сервера, делая Ajax-вызов по URL-адресу fetch_and_draw_data. Наконец, с помощью Highcharts отображается линейчатая диаграмма. В следующем фрагменте кода показан вызов функции 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);
    
        });

    Полный листинг файлов views.py и index.html приведен в IBM DevOps Services.

Шаг 4. Развертывание приложения в Bluemix

Когда код приложения написан, его можно развернуть в Bluemix.

  1. Добавьте в корневой каталог своего проекта файл requirement.txt. Файл requirement.txt должен содержать все внешние зависимости (такие как Django и PyMongo), необходимые для запуска приложения для построения графиков. При запуске приложения Bluemix считывает этот файл и устанавливает перечисленные в нем зависимости.

    Вот файл requirement.txt для этого проекта:

    Django==1.6.5
    pymongo==2.7.1
  2. Создайте в корневом каталоге своего проекта файл run.sh. Файл run.sh – это сценарий оболочки, который запускает веб-приложение после его развертывания в Bluemix. Убедитесь, что вы получили значение порта из переменной среды VCAP_APP_PORT при запуске веб-сервера.

    Добавьте в файл 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. Скачайте и установите инструмент командной строки Cloud Foundry (cf), который будет использоваться для загрузки и администрирования приложения. Чтобы убедиться, что Cloud Foundry успешно установлен, выполните следующую команду, которая возвращает номер версии:
    cf --version
  4. Войдите в Bluemix и установите конечную точку. В Bluemix можно войти из командной строки, выполнив следующую команду:
    cf login -a https://api.ng.bluemix.net
  5. Переместите приложение в Bluemix. Перейдите в корневой каталог своего проекта (trends_app/) и загрузите приложение для построения диаграмм в Bluemix, выполнив следующую команду:
    cf push  trendsapp001 --no-manifest --no-start -b https://github.com/cloudfoundry/python-buildpack  -c "sh run.sh"

    Параметр --no-start указывает, что приложение не должно запускаться, пока оно не привязано к требуемым службам. Это гарантирует подключение службы MongoDB к приложению перед его запуском.

    Параметр -c используется для указания начальной команды, которая должна исполняться в Bluemix при запуске приложения.

    Флаг -b указывает, что должен использоваться buildpack. Для данного приложения нужна среда исполнения Python, которая получается путем передачи URL Git-репозитария Python buildpack (https://github.com/cloudfoundry/python-buildpack) с параметром -b.

    Также в файле конфигурации manifest.yml можно указать имя приложения, информацию buildpack и команду shrun.sh:

    ---
    applications:
    - name: trendsapp001
      memory: 256M
      command: sh run.sh
      buildpack: https://github.com/cloudfoundry/python-buildpack
  6. Включите файл manifest.yml в корневой каталог проекта. Используя файл manifest.yml, переместите приложение в Bluemix с помощью следующей команды:
    cf push  --no-start

    Выберите другое имя хоста, так чтобы получившийся маршрут URL не конфликтовал с демонстрационным URL-адресом. При переносе приложения в Bluemix вы должны увидеть экран, аналогичный показанному ниже.

    Команда cf push
    Команда cf push
  7. Создайте экземпляр службы MongoDB. В терминале перейдите в корневую папку проекта и создайте экземпляр службы MongoDB с уникальным именем, выполнив следующую команду:
    cf create-service mongodb 100 mongodb001
  8. Свяжите экземпляр службы MongoDB с новым приложением, в нашем случае trendsapp001, выполнив следующую команду:
    cf bind-service trendsapp001 mongodb001

    Экземпляр службы MongoDB можно также создать на панели управления Bluemix, разыскав приложение в меню APPS.

    Панель управления Bluemix - список приложений
  9. Выберите свое приложение и на открывшейся странице нажмите кнопку Add Service, чтобы добавить службу MongoDB. Добавление службы MongoDB
    Добавление службы MongoDB

    Теперь вы должны увидеть на панели управления Bluemix экземпляр службы MongoDB, привязанный к вашему приложению.

    Панель управления Bluemix - перечень подключенных служб
    Панель управления Bluemix - перечень подключенных служб

    После подключения к приложению экземпляра службы MongoDB к переменной среды VCAP_SERVICES добавляется следующая конфигурация.

    Панель управления Bluemix - переменные среды
    Панель управления Bluemix - переменные среды
  10. Для запуска приложения выполните следующую команду.
    cf start trendsapp001
  11. Доступ к приложению для построения диаграмм осуществляется по адресу: trendsapp001.mybluemix.net/trends (замените trendsapp001 уникальным именем хоста, указанным в файле manifest.yml). Посмотрите также демонстрационную версию, нажав кнопку Запустить приложение в начале статьи.

    Следующий снимок экрана иллюстрирует график потребления солнечной энергии в США, отображаемый в приложении. С помощью меню в правой части экрана можно распечатать этот график или скачать его в графическом формате или в формате PDF.

    Потребление энергии
    Потребление энергии

Заключение

В этой статье показано, как создать Django-приложение и развернуть его на платформе Bluemix. В ней также объясняется, как использовать службу MongoDB Bluemix в качестве кэша данных и интегрировать ее с платформой Django. Исходный код приложения, представленный в этой статье, можно скачать из IBM DevOps Services вместе со всеми необходимыми файлами конфигурации. Построив это приложение, вы сможете создавать собственные проекты, применяя аналогичный процесс. Возможности безграничны!


Ресурсы для скачивания


Комментарии

Войдите или зарегистрируйтесь для того чтобы оставлять комментарии или подписаться на них.

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=40
Zone=Облачные вычисления
ArticleID=1010692
ArticleTitle=Создание и развертывание в Bluemix приложения для отображения графиков Всемирного банка с помощью Python, Django и MongoDB
publish-date=07102015