Последовательность порождает последовательность
Я помешан на продуктивности. Раньше я каждый день следил за своими задачами с помощью ручки и бумаги. Затем, когда задачи стали более сложными, я начал записывать их в электронную таблицу. Четыре недели это работало нормально, но потом я потерял мотивацию. Мне нужен был толчок, чтобы следовать своему распорядку. Вот тут-то и появляется график вклада.
Если вы используете GitHub, вы видели тепловую карту в своем профиле, на которой показаны ваши взносы (коммиты, запросы на вытягивание и т. Д.) За каждый день года — как показано на изображении выше. Я каждый день работал над проектом, чтобы не отставать от GitHub — все время ненавидел этот серый квадрат в моем профиле! Я нашел этот учебник в Node.js. Но мне нравится Python, поэтому я построил его самостоятельно, используя Flask и Google Sheets API.
В этом руководстве я рассмотрю каждый шаг, от создания приложения до его развертывания на Heroku. Я также поделюсь найденными ошибками и их решениями.
Настройте среду вашего проекта
Начнем с создания среды для работы над проектом. Я предполагаю, что вы уже установили Python (желательно Python 3) и подключили его к своей системе — в противном случае загрузите Python здесь и следуйте инструкциям. Pip — это менеджер пакетов для Python, который помогает устанавливать дополнительные библиотеки и зависимости, необходимые для вашего приложения. Проверьте, установлен ли pip, используя эту команду в командной строке: pip —version.
- Вам нужна изолированная среда для вашего приложения и его зависимостей, поэтому начните с настройки виртуальной среды. Перейдите в новый каталог, в котором вы хотите настроить свой проект, откройте командную строку и установите virtualenv с помощью команды pip install virtualenv.
- Установите virtualenvwrapper, который представляет собой набор расширений для virtualenv, набрав pip install virtualenvwrapper-win (Примечание: эта команда предназначена только для Windows. Для среды на основе Unix следуйте этому руководству).
- Создайте виртуальную среду, введя mkvirtualenv your-env-name.
- Вы можете активировать виртуальную среду с помощью workon your-env-name и деактивировать с помощью команды deactivate.
- После того, как виртуальная среда будет запущена, установите flask, введя pip install flask.
Создайте свою электронную таблицу вкладов
Теперь приступим к созданию электронной таблицы, которая будет действовать как база данных. Вы можете посмотреть мой лист здесь. В нем четыре поля:
- Date, я отформатировал это поле так же, как на GitHub. Вы можете отформатировать его как хотите.
- Task ,, который содержит название каждой задачи и ее описание (необязательно).
- Number of Tasks , который содержит количество задач.
- Level , который использует формулу =IF(C2=0,»0″,if(C2<=2,»1″,if(C2<=4,»2″,»3″))) для вычисления уровня на основе количества задач. Этой формулой заполнен весь столбец.
Вы можете настроить эти поля по своему усмотрению, но должно быть поле аналогичного уровня, потому что оно используется для определения цвета, которым заполняется каждый квадрат на графике.
Получите API для использования вашей электронной таблицы
Этот шаг имеет решающее значение, поскольку он позволяет нашему приложению подключаться к Google Таблицам:
- Перейдите в Консоль разработчика Google и войдите в свою учетную запись Google.
- Создайте новый проект и нажмите «Включить API».
- Найдите Google Drive API и нажмите «ВКЛЮЧИТЬ».
- После включения API нажмите «Создать учетные данные». Откроется мастер учетных данных. Заполните каждое поле, как показано ниже.
- На втором этапе назовите свою учетную запись службы и выберите «Роль» ›Проект› Редактор. Нажмите «Продолжить», и он сгенерирует файл .json, который выглядит так, как показано ниже. Переименуйте его в Client_Secret.json.
- Если вы попытаетесь получить доступ к своей таблице сейчас, вы получите Insufficient Permission ошибку.
- Помимо Google Drive API, вам также необходимо включить Google Sheets API.
- После того, как вы включите API, перейдите к листу, с которого вы хотите получить данные, и нажмите кнопку «Поделиться».
- В Client_Secret.json будет client_email. Скопируйте это электронное письмо, вставьте его во всплывающее окно и нажмите «Отправить».
Вот и все! Теперь давайте возьмем данные из электронной таблицы и отобразим их в нашем приложении.
Структурирование вашего приложения Flask:
Не волнуйтесь, я объясню, для чего предназначен каждый файл и что он делает, по ходу дела. Это просто, чтобы дать вам представление о нашей структуре папок. Вы можете перейти сюда, чтобы узнать больше о структурировании приложений Flask.
Доступ к данным Google Таблиц
Теперь посмотрим, сможем ли мы получить доступ к данным из нашей таблицы. Существует популярный Python API под названием gspread, который упрощает чтение и запись из Google Таблиц и Oauth и позволяет вашему приложению вызывать Google API от имени учетной записи службы. Установите gspread и oauth2 с помощью pip, pip install gspread oauth2.
Файл JSON вложен в папку static (все статические файлы, которые не изменяются, например CSS, JS, хранятся здесь), поэтому доступ к нему осуществляется из корня с помощью модуля os os.path.realpath(os.path.dirname(__file__)). Затем создайте переменную scope, которая содержит ссылку на каналы на диске, и переменную creds для доступа к файлу JSON с использованием учетных данных учетной записи службы. Создается client переменная, чтобы разрешить gspread использовать учетные данные.
Теперь вы можете получить доступ к листу, используя client.open(‘Daily Contribution’).sheet1, где Daily Contribution — имя файла, а sheet1 — имя первого листа. Мы сохраним значения каждого столбца в переменной и создадим общую переменную data, которая будет содержать их все и назначить ее возвращаемому значению функции getData(), как показано в приведенном ниже коде.
Чтобы проверить, правильно ли это работает, вы можете напечатать data в командной строке с помощью python spreadsheet.py.
Данные для нашего приложения готовы. А теперь давайте сделаем это красиво!
Стилизация приложения
Создайте файл index.html и вложите его в папку шаблонов. Flask обычно ищет файлы Html внутри этой папки, поскольку он использует библиотеку шаблонов Jinja для визуализации шаблонов.
Что касается CSS, я нашел этот увлекательный урок от Ире Адеринокун по воссозданию Graph. Это сэкономило мне время, но вы можете реализовать это как хотите.
Я также создал легенду, включая всплывающие подсказки, и изменил цвет квадрата на розовый. Это игровая площадка, проявите себя настолько креативно, насколько хотите!
Свяжите данные с шаблоном
Создайте промежуточный файл, который отправляет данные в файлы HTML, я назову его app.py. Импортируйте spreadsheet.py и присвойте значение, возвращаемое функцией getData(), переменной. Передайте переменную функции render_template() вместе с HTML.
Код в if block автоматически перезагружает содержимое приложения при каждом изменении.
Теперь запустите приложение из командной строки с помощью команды python app.py (убедитесь, что вы активировали виртуальную среду). Если все прошло хорошо, ваше приложение должно быть запущено и работать на локальном хосте https://127.0.0.1:5000/, и я уверен, что оно выглядит красиво!
Развертывание приложения с помощью Heroku
Для использования Heroku требуется, чтобы у вас был установлен Git:
- Загрузите Heroku CLI отсюда и следуйте инструкциям по установке.
- Откройте командную строку (рекомендуется использовать Git Bash) и проверьте, установлен ли Heroku с помощью Heroku —version.
- Создайте учетную запись бесплатно на сайте Heroku здесь.
- После настройки учетной записи войдите в систему с помощью оболочки, набравHeroku login -i и введите свои учетные данные.
- Мы будем использовать gunicorn для развертывания нашего приложения, поскольку оно относительно быстрое и может обрабатывать несколько запросов одновременно. Установите его с помощью команды pip install gunicorn.
- Создайте requirements.txt файл, который информирует Heroku о зависимостях для нашего приложения, набрав pip freeze > requirements.txt.
- Я столкнулся с таким количеством ошибок по своей глупости. Я заморозил файл требований, не активируя виртуальную среду. Всегда убедитесь, что вы работаете, когда виртуальная среда включена.
- Создайте новый файл в корневом каталоге и введите web: gunicorn —bind 0.0.0.0:$PORT app:app. Назовите его Procfile (Примечание: не используйте расширения). Procfile — это то, что сообщает Heroku, какие команды будут запускаться приложением при запуске.
- В app:app первый app относится к имени файла (например: app.py), а второй app относится к app = Flask(__name__). Чтобы узнать больше о последнем приложении, загляните сюда (я напортачил с этим, не зная разницы).
- У меня был H14 error: no web processes running, но я избавился от него, выполнив эту команду: heroku ps:scale web=1. Это информирует Heroku о том, что у нас нет веб-серверов. Если не поняли, отлично — продолжайте.
- Теперь создайте пустой репозиторий git внутри вашего рабочего каталога, используя git init.
- Теперь добавьте все файлы git add . и сделайте фиксацию git commit -m «Initial Commit».
- Создайте новое приложение на Heroku, используя heroku create, который генерирует ссылку для вашего приложения и URL-адрес удаленного репо, затем введите heroku open, который откроет приложение в вашем браузере.
- Добавьте удаленное репо, используя git remote add heroku ‘repo-link-generated-on-heroku-create’.
- Теперь внесите изменения, git push heroku master
Ваше приложение теперь работает в сети!
Это ссылка на мою.
Вы можете проверить мои окончательные файлы в моем репозитории GitHub здесь.
Спасибо, что прочитали здесь полностью. Дайте мне знать в разделе комментариев, если у вас есть какие-либо проблемы, отзывы или критика. Хорошего дня!
Источник: