Удивительно простой подход к демонстрации ваших графиков Matplotlib и фреймов данных Pandas в Интернете для всеобщего обозрения - менее чем в 100 строках кода.
Вы когда-нибудь хотели, чтобы визуализация или фрейм данных были доступны с вашего ноутбука или телефона без необходимости каждый раз запускать код? Разве не было бы замечательно, если бы вы могли оставить его работающим в фоновом режиме и иметь веб-адрес, по которому вы могли бы получать доступ к данным в любое время и в любом месте (при наличии подключения к Интернету)? Особенно тот, который может автоматически обновляться при появлении новых данных.
Оказывается, можно, и это совсем не сложно. Я научился это делать за последнюю неделю только в Google, но там много чепухи, так что вот самый простой способ, который я нашел. Могут быть альтернативы получше, о которых я не знаю, поэтому, пожалуйста, дайте мне знать, если они есть. Мне искренне любопытно. Однако то, что вы определенно можете гарантировать от этого метода, так это его простоту. Это также не будет стоить вам ни копейки. Я также абсолютно не веб-разработчик, поэтому заранее прошу прощения, если я убил любую терминологию.
Эта статья не ожидает от вас многого, достаточно базового понимания Python. Небольшое знание HTML было бы полезно, но совершенно не обязательно. Понимание Flask уже сделало бы это кусок пирога, но если вы знаете Flask, вы, вероятно, уже знаете, как это сделать. Структура будет немного похожа на эту, и вы действительно сможете все заработать в течение часа, без проблем.
- Настройка фляги
- Базовая маршрутизация
- Фреймы данных Pandas
- Графики Matplotlib
- Хостинг на PythonAnywhere
Настройка Flask
Это статья не о веб-дизайне, так как я, конечно, не в состоянии говорить об этом. Это статья просто о том, как разместить фреймы данных и графики на вашем веб-сайте. Самое главное, графики и фреймы данных, которые обновляются автоматически. Вы можете просто «сохранить.fig» свои графики и засунуть их в свою статическую папку и постоянно обновлять их при поступлении свежих данных, но это утомительная работа, и я не люблю утомительную работу.
Итак, прежде всего, мы собираемся создать очень простой веб-сайт с двумя страницами. Одна страница демонстрирует ваши блестящие графики, а одна страница выделяет ваш красивый фрейм данных Pandas.
Это будет выглядеть именно так.
Я знаю, это очень уродливо, но вы можете сделать его красивее с помощью CSS или JS, но это в другой раз. Это просто показать вам, как их туда поместить, вы можете побеспокоиться о том, чтобы они выглядели намного позже.
Вот код. Я пройдусь по этому разделу за разделом. Как видите, в основном файле всего 69 строк.
Мы можем начать с строк 0–16. Это все, что нужно импортировать. Первый блок (строка 4) - это пакеты флаконов, которые помогут вам справиться со всей маршрутизацией и структурой веб-сайта. Все они говорят сами за себя по названию, и вам не нужно об этом слишком много думать. Некоторые из них, как видите, вам не понадобятся в базовой версии. Однако они чрезвычайно полезны, поэтому я всегда стараюсь их импортировать.
Следующая порция импорта (строки 6–12) предназначена для построения графиков ваших данных. Опять же, все они довольно распространены и не требуют пояснений. Единственное, что может вам понравиться, - это строка 11 - «matplotlib.use (« Agg) ». По какой-то причине, которую я не совсем понимаю, бэкэнд plt по умолчанию не работает с Flask - эта строка кода исправляет это. Если вы не используете plt, не волнуйтесь, но если вы используете его, я предлагаю вам включить его. Строка 15 - это просто еще один пакет, который нам понадобится позже, и я постараюсь объяснить, когда мы до него дойдем.
Теперь нам нужно получить данные для использования. В этом файле у меня есть два подхода. Я считаю, что это самый простой способ получить ваши данные - те, которые не закомментированы. Просто пусть Pandas внесет их через файл CSV. Однако с этим есть несколько проблем. Во-первых, при размещении веб-сайта на PythonAnywhere (PA) позже путь может быть другим и относиться к вашей среде PA, а не к вашему локальному рабочему столу. Поэтому убедитесь, что вы указали правильный путь в зависимости от того, тестируете ли вы локально или пытаетесь опубликовать его в Интернете. Во-вторых, это не будет обновляться автоматически, если вы не обновите файлы CSV автоматически. Если вы хотите, чтобы данные автоматически обновлялись, я лично предпочитаю определить функцию, которая извлекает их из Интернета и очищает их до фрейма данных Pandas. Я не буду вдаваться в парсинг в этой статье, но пример того, как это сделать, находится в этом репозитории GitHub вместе с остальной частью кода, задействованного в этом небольшом проекте. Итак, чтобы сделать графики динамическими, все, что вам нужно сделать, это найти динамический источник данных (обычно лучше всего в Интернете) и создать файл, который будет очищать его каждый раз при запуске основного файла. Строки 19 и 21 вызывают функции в другом файле, который очищает Интернет, чтобы сделать именно это.
Итак, наконец, о самом приложении Flask. Первое, что вам нужно сделать, это просто инициализировать приложение - строка 25. Есть место для персонализации, но я бы не стал. Легко все испортить. Я всегда придерживаюсь именно этой линии.
Базовая маршрутизация
Flask использует декораторы маршрутов, чтобы вы могли указать, какие функции должны выполняться по каждому URL-адресу. Следовательно, идея здесь состоит в том, чтобы создать два URL-адреса, которые возвращают две разные функции - одну, которая показывает нам наш фрейм данных, и другую, которая показывает нам наш график. Базовый декоратор маршрута можно увидеть в строке 28. Этот аргумент декоратора представляет собой просто /, который эффективно сообщает Flask, что это наша домашняя страница, а функция, указанная ниже, должна запускаться с нашего начального URL-адреса - в моем случае: Http://jasher4994.pythonanywhere.com/. Как видите, если вы удалите / из URL-адреса, ничего не изменится. Поэтому для создания новых страниц с расширенными URL-адресами вы можете просто создать новую с помощью декоратора маршрута. Этим мы и займемся ниже.
Фреймы данных Pandas
Итак, во-первых, мы можем сделать это для нашего фрейма данных Pandas, который мы также можем сделать нашей домашней страницей. Мы уже видели оператор маршрута в действии в строке 28, поэтому мы можем расширить его и создать новую страницу под названием «Панды» в строке 29. На этот раз мы это сделаем. то же самое, за исключением создания нового URL-адреса под названием «Pandas» и заявления о том, что мы хотим использовать методы «POST» и «GET». Это два наиболее распространенных метода HTTP, которые используются для отправки и запроса данных на сервер соответственно.
Таким образом, теперь у нас есть два URL-адреса, которые будут вызывать одну и ту же функцию. Функция определена ниже в строке 30. Это традиционная функция Python, которая возвращает другую функцию - «render_template ()». Эта функция чрезвычайно полезна и эффективно сообщает Flask о необходимости визуализации в шаблоне HTML из папки шаблонов (шаблон должен находиться в подкаталоге с именем «templates», поэтому убедитесь, что это так). Ниже представлен HTML-шаблон, который вам нужно будет создать. Это предельно просто, всего лишь строки 7–10 - это все, что вам нужно добавить к традиционному шаблону HTML. Строка 7 даже не обязательна, это просто тег заголовка.
Так что же происходит? В строке 33 нашего основного файла мы передаем «table» в качестве аргумента нашей функции шаблона рендеринга. Таблица - это просто наш фрейм данных pandas, в котором был применен метод to_html (). Я почти уверен, что вы догадались, что это значит. Остальная часть строки просто указывает, нужны ли нам такие вещи, как индекс и заголовки столбцов. Затем в нашем HTML-файле мы можем использовать эту таблицу.
На самом деле Flask использует Jinja2 (механизм шаблонов Python для создания HTML), что вы можете увидеть в строках 7–10. Вы можете не беспокоиться об этом слишком сильно, но эти 3 строки эффективно отображают вашу таблицу в HTML.
Это так просто! Если вы запустите основной файл в своем терминале сейчас, вы должны получить локальную ссылку, которую вы можете скопировать и вставить в свой браузер, и вы должны увидеть свой фрейм данных!
Графики Matplotlib
Графики Matplotlib сначала казались немного более сложными для работы во Flask, но в конце концов оказалось, что они довольно просты. В этом разделе мы будем работать снизу вверх, так что терпите меня.
Если ваш график никогда не меняется, вы можете просто использовать его как статический файл в папке изображений и напрямую ссылаться на него.
Однако, если его нужно регулярно менять, этот подход для вас. Например, данные, которые я здесь использую, касаются ожидаемых чистых результатов футбольных команд (вероятности того, что они не пропустят гол). Это, конечно, меняет игру за игрой в зависимости от соперника. Итак, у меня есть еще один файл, который регулярно очищает и обновляет эти данные. Если бы я использовал его как статический файл, он бы не обновлялся, а просто отображал бы график первых недель. С помощью этого метода график будет отображаться на лету, и мне никогда не нужно будет его обновлять. Я никогда не тестировал это на данных «в реальном времени» и подозреваю, что он не будет работать очень хорошо и, вероятно, потребует некоторого JavaScript. Если ваши данные обновляются ежедневно или даже ежечасно, я подозреваю, что этот метод будет работать абсолютно нормально.
Ссылаясь сначала на раздел Matplotlib (строки 50–63) в файле Python, мы можем сначала взглянуть на функцию create_fig (). Все, что для этого нужно, - это создать фигуру (график) и нанести на график нужные нам данные. В этом случае на оси абсцисс отображается «команда», а на оси y - «ожидаемые цели». Я изменил цвет и поворот крестиков из эстетических соображений.
Поднимаясь вверх, мы переходим к функции plot_png () (44–48). Этот немного сложнее, но не намного. Короче говоря, он создает веб-страницу, которая показывает только график, который мы отображали ранее - в формате png. «BytesIO ()» создает буфер в памяти, необязательно заполняемый данными, которые вы предоставляете в качестве аргумента, и позволяет вам выполнять с ним файловые операции.
В результате будет создана веб-страница с изображением, которое мы создали на ней. Опять же, создание нового маршрута, как и раньше, можно увидеть здесь. Это полезно, но недостаточно. Конечно, в будущем нам может понадобиться текст, описывающий наш прекрасный сюжет, или, может быть, какие-то другие сюжеты на той же странице, а не просто страница, полная одного большого сюжета.
Поэтому мы хотим, чтобы наш сюжет был частью страницы, а не всей страницей.
Поэтому мы создаем один последний маршрут (строки 38–40) и визуализируем наш второй и последний шаблон, который представлен ниже.
Как видно, это очень просто. Всего две строки кода, отличные от стандартного HTML-шаблона, и одна из них - заголовок! Строка 7 является здесь важной: она идет по маршруту, который мы создали ранее с полной страницей png, берет изображение и затем помещает его в наш HTML-файл. Теперь изображение является частью нашей страницы и не поглощает все целиком.
Та-Да! Теперь у вас есть способ отображать ваши графики и фреймы данных в браузере. Но только локально, так что толку от этого нет. К счастью, опубликовать их в Интернете для всеобщего обозрения с помощью pythonanywhere очень просто. В следующем разделе показано, как это сделать.
Хостинг на Python где угодно
Теперь, последний шаг, размещение вашего сайта. Pythonanywhere (PA) - отличное и простое место для этого. Если все сделано правильно, вы сможете начать работу менее чем за пять минут. Итак, когда у вас есть три файла (ваш основной файл Flask и два ваших HTML-файла) и создайте учетную запись PA, для этого вам понадобится только учетная запись новичка - которая бесплатна. После того, как вы все зарегистрировались, вы должны увидеть панель управления, которая выглядит следующим образом.
В основном мы будем использовать здесь вкладки «Интернет» и «Файлы», но не требуется буйного воображения, чтобы подумать о том, что предлагают другие вкладки.
Во-первых, нам нужно создать наше веб-приложение. Итак, на панели инструментов слева нажмите «Добавить новое веб-приложение» и следуйте инструкциям. Выберите ту версию Python, которую вы использовали, и, конечно же, ваш фреймворк - Flask. Затем он создаст для вас веб-приложение, вы можете указать имя - я назвал свое «mysite», чтобы было проще.
Итак, теперь нам нужно загрузить наши файлы в PA. Если вы знаете Git, замечательно, у PA есть консоль, которую вы можете открыть и вытащить из своего репозитория напрямую, и тогда вы в основном готовы к работе.
Для людей, не знакомых с Git, это очень просто, и ниже я покажу вам, как это сделать. Сначала перейдите в раздел файлов. Затем слева щелкните путь к своему веб-приложению (mysite). В этом каталоге добавьте свой файл Flask. Затем в этом каталоге создайте новый каталог под названием «шаблоны». Для Flask важно, чтобы вы выполнили этот шаг точно, чтобы он знал, где искать шаблоны HTML. Затем в этот новый каталог шаблонов добавьте два ваших файла HTML. Должно получиться вот так.
Почти готово! И последнее, что вам нужно проверить, это убедиться, что исходный код указан напрямую. Если это не так ...
Затем измените его так, как оно есть.
..и наконец! Нажмите эту большую сексуальную зеленую кнопку вверху, чтобы перезагрузить приложение, а затем щелкните ссылку.
Et voila, теперь у вас есть Pandas и Matplotlib, работающие на веб-странице. Python в любом месте будет запускать это бесконечно бесплатно, но вам нужно будет входить в систему каждые три месяца, чтобы сообщить им, что вы все еще живы и хотите запустить веб-сайт. Однако они отправят вам электронное письмо за неделю до этого, поэтому нет необходимости устанавливать какие-либо напоминания.
Как только вы разработаете такой красивый скелет, в наши дни невероятно просто сделать веб-сайт достаточно профессиональным с помощью таких ресурсов, как https://getbootstrap.com/.
Я очень надеюсь, что это поможет, и мы будем благодарны за любые отзывы. Некоторые похожие статьи, которые я написал, которые могут вам понравиться, приведены ниже.
Если я вдохновил вас присоединиться к среде, я был бы очень благодарен, если бы вы сделали это по этой ссылке - это поможет мне в будущем писать лучший контент.
Ваше здоровье,
Джеймс
