Создание брендированных MMS-купонов с помощью Python и Twilio

В 2013 году 72,3% клиентов сообщили об использовании купона во время покупки. Однако потребители становятся всё более цифровыми и мобильными. MMS-купоны вместо бумажных распечаток предлагают альтернативный способ взаимодействия с клиентами, использующими телефоны.

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

Когда получатель купона развернёт сообщение, он увидит полноразмерное изображение, как на примере ниже.

Для создания приложения брендированных купонов мы будем использовать следующие три технологии:

— Python с Flask, Pillow, requests и PyBarcode для создания и предоставления купонов

— Аккаунт Twilio и номер Twilio в США для отправки купонов через MMS

— Heroku для развёртывания приложения

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

Это руководство по созданию приложения для купонов состоит из пяти разделов:

— Создание структуры веб-приложения Flask для генерации купонов

— Написание кода для обработки пользовательского ввода и HTML-шаблонов

— Использование Pillow и PyBarcode для генерации брендированного изображения купона

— Создание кода для отправки изображения купона клиенту через MMS

— Развёртывание приложения для купонов на Heroku

Давайте начнём постепенно создавать наш генератор купонов, сформировав структуру приложения Flask.

Сначала настройте приложение Flask. Если вы не хотите набирать этот код самостоятельно, существует тег tutorial-step-1 с уже созданными файлами.

В этом разделе мы создадим следующий список файлов и директорий:

*requirements.txt* – указывает необходимые библиотеки Python

*app.py* – запускает локальный сервер разработки для нашего приложения Flask

*coupons/* – содержит приложение Flask, которое генерирует и отправляет купоны

Заполним зависимости в файле requirements.txt. Каждая из этих зависимостей имеет несколько других библиотек, от которых она зависит, поэтому этот список короче, чем тот, который вы увидите в репозитории.

Для хранения кода приложения потребуется несколько директорий. Создайте директорию *coupons* в корневой директории проекта. Внутри coupons потребуются две поддиректории: *templates* и *static*. Внутри *static* также нужны поддиректории *css* и *img*.

Команда mkdir создаёт поддиректории в Linux или Mac OS X. В Windows можно создать папки и подпапки через Проводник Windows. Получившаяся структура директорий должна выглядеть следующим образом.

Обратите внимание, что Git не передаёт пустые папки при отправке в удалённый репозиторий. Каждая из созданных нами папок будет содержать файл, кроме поддиректории *img/*. Нам нужно исправить это, чтобы приложение работало, поместив файл в эту папку. Скачайте и сохраните это изображение логотипа Twilio или любой другой логотип в формате .png по вашему выбору в директорию *img/*.

Теперь наше приложение имеет зависимости в файле requirements.txt и поддиректории для приложения Flask.

Далее создайте файл *app.py* для запуска локального сервера разработки Flask. Этот файл будет находиться в корневой директории нашего проекта и содержать следующие строки.

Поддиректорию *coupons/* нужно превратить в пакет Python. Создайте пустой файл с именем *__init__.py* в *coupons/*.

Нам также нужно создать второй файл *app.py* в поддиректории *coupons/*, который будет запускать наше приложение Flask. Следующий код с двумя заглушками функций будет находиться в этом файле.

Этот файл *app.py* импортирует Flask и создаёт новое веб-приложение coupons. Приложение загружает конфигурацию Flask из файла Python с именем *config.py*.

Файл также содержит две заглушки функций, которые мы заполним позже в этом руководстве. Первая функция create_coupon будет отображать страницу формы создания купона, а также обрабатывать данные из POST-запросов формы.

Вторая функция coupon_confirmation будет страницей подтверждения после успешной отправки купона.

Файл *app.py* ссылается на файл *config.py*. Создайте файл *config.py* сейчас в поддиректории *coupons/* и поместите в него следующий код для загрузки переменных окружения для нашего приложения.

Файл *config.py* ищет настройки Flask и учётные данные Twilio в переменных окружения, установленных локально в Linux или Windows, поэтому, если вы собираетесь запускать приложение локально, создайте эти переменные сейчас.

COUPON_SAVE_DIR — это директория, в которую следует временно сохранять изображения купонов. Установите COUPON_SAVE_DIR как директорию кода вашего приложения coupons плюс «/static/img/». Например, «/app/coupons/static/img/». Если вы запускаете приложение локально, директория будет представлять собой путь к вашему приложению Flask плюс «/coupons/static/img/».

QUALIFIED_MEDIA_URL — это полный путь для сохранённых купонов. Например, если ваше приложение развёрнуто на Heroku с именем «mms-coupon-creator», это значение должно быть установлено как «http://mms-coupon-creator.herokuapp.com/static/img/».

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

Ещё один специфичный для Flask файл Python требуется для обработки пользовательского ввода. Поля ввода на веб-странице позволят пользователю указать номер телефона для отправки купона, а также необязательно логотип, штрихкод и текст сообщения для отправки вместе с купоном. Поля ввода веб-страницы будут выглядеть как на следующем скриншоте.

В приведённом выше файле мы обрабатываем обязательный номер телефона и три необязательных поля: logo_image_url, coupon_text и serial_number. Происходит базовая проверка, чтобы убедиться в правильности полей, но валидаторы определённо могут быть усилены в улучшенной версии генератора купонов.

На этом структура приложения Flask завершена, но для создания веб-интерфейса потребуется несколько HTML-шаблонов в директории templates. Эти файлы взяты из темы Narrow Jumbotron проекта Bootstrap, адаптированной под наши поля ввода. Каждый из этих файлов ниже ссылается на шаблон в репозитории GitHub.

— base.html – другие шаблоны расширяют этот для корректного HTML

— _formhelpers.html – вспомогательная функция для отображения полей формы и ошибок

— create_coupon.html – страница ввода для создания купонов

— confirmation.html – страница подтверждения после отправки купонов

Также есть два CSS-файла в директории static/css:

— bootstrap.min.css – Twitter Bootstrap с пользовательской темой Flatly от Bootswatch

— jumbotron-narrow.css – несколько дополнительных CSS-правил для центрирования страницы создания купона

Теперь мы можем запустить приложение с помощью команды python app.py в корневой директории проекта. Однако в окне браузера будет отображаться только «stub». Давайте напишем код для генерации изображений купонов, чтобы наше приложение создавало купоны, и свяжем его с представлениями нашего приложения.

Мы написали код для структуры приложения Flask в первых двух разделах. Если вы хотите начать с уже написанного кода, ознакомьтесь с тегом tutorial-step-1.

Код в *coupons/app.py* вызывает функции из файла *utils.py*, который мы создадим сейчас. Хотя мы могли бы написать весь код в *app.py*, хорошей практикой является выделение логики в отдельные функции для упрощения тестирования. Следующий код должен быть помещён в этот файл *utils.py*.

Приведённая выше функция открывает файл изображения из URL, переданного в качестве параметра. Функция open_image_file_from_url загружает внешний файл .png, который будет использоваться для объединения со штрихкодом в брендированном купоне.

В том же файле *utils.py* напишите функцию create_background_image с приведённым ниже кодом, которая возвращает пустое изображение-холст, используемое в качестве фона для нашего купона.

Третья функция для записи в *utils.py* генерирует изображение штрихкода. Эта функция будет называться generate_barcode_image. Она оборачивает библиотеку PyBarcode и возвращает готовое изображение. С возвращаемым значением этой функции у нас есть сканируемое изображение штрихкода, которое будет вставлено другой функцией на пустое фоновое изображение.

Теперь переходим к основной части файла *utils.py*. Следующая функция под названием combine_images_into_coupon принимает наш логотип, загруженный с URL, указанного на веб-странице приложения, вместе с готовым штрихкодом. Результатом является URL нашего вновь созданного файла купона с объединёнными логотипом и штрихкодом в одном изображении.

Функция combine_images_into_coupon — это место, где логотип и сгенерированный штрихкод объединяются в одно изображение. Мы гарантируем, что логотип или штрихкод помещаются в пределах размера фонового изображения. Затем мы вставляем изображение логотипа, а следом — изображение штрихкода на фон. Если в логотипе есть прозрачность, нам нужно добавить маску, но если это не удаётся, мы просто не добавляем маску к изображению.

Ещё одна функция для *utils.py* под названием save_image показана ниже.

В функции save_image мы сохраняем сгенерированный купон в уникальное имя файла, созданное с помощью библиотеки uuid в Python. Файл изображения купона для нашего приложения не нужно хранить долгосрочно, он просто должен быть сохранён и немедленно доступен по URL для этапа отправки MMS-купона.

Генерация штрихкода возможна с помощью написанного выше кода, но нам также нужно связать её с приложением Flask. В файле *app.py* добавьте следующий выделенный код в функцию create_coupon и удалите заглушку return ‘stub’.

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

Для функции coupon_confirmation также в app.py замените заглушку return ‘stub’ следующими двумя строками.

С приведённым выше кодом пользователь может создать купон, отправив форму либо на целевой странице, либо на странице подтверждения.

Если мы запустим приложение сейчас с помощью python app.py, мы сгенерируем купон, но теперь нам нужно доставить его непосредственно пользователю, что мы можем сделать с помощью Twilio MMS.

Теперь у нас есть код для создания изображений купонов со штрихкодами. Если вы хотите начать с кода на этом этапе руководства, ознакомьтесь с тегом tutorial-step-2. Теперь давайте добавим код для распространения этих купонов через MMS.

Вернитесь к файлу *utils.py*. Добавьте следующие два импорта в начало, а также инициализацию библиотеки-помощника Twilio Python.

Для отправки MMS на основе пользовательского ввода требуется функция. Добавьте этот код в конец файла *utils.py*.

Наконец, мы вызовем эту новую функцию в конце нашей функции create_image в *coupons/app.py*. Дополнительная строка для отправки сообщений с MMS-купонами выделена ниже.

Поздравляем! Теперь у вас есть полностью функционирующий сервис создания и распространения цифровых купонов. Или почти.

Протестируйте приложение на своём компьютере, и вы увидите, что оно не сможет отправить MMS-сообщение. Это связано с тем, что Twilio требуется общедоступный URL, с которого можно загрузить изображения купонов. Вы можете использовать отличный сервис, такой как ngrok, для тестирования приложения на своём локальном компьютере, или, что ещё лучше, просто разверните приложение на Heroku.

Наше приложение должно обладать желаемой функциональностью, но нам нужно развернуть его, иначе URL-адреса купонов не будут доступны для Twilio. Для развёртывания приложения на Heroku нам нужно зафиксировать наш код в репозитории Git и указать сервису, как использовать наше приложение, с помощью Procfile. Для получения дополнительной информации о развёртывании приложения Python с Gunicorn на Heroku ознакомьтесь с их официальным руководством.

Создайте Procfile в корневой директории нашего проекта с следующей однострочной инструкцией для запуска приложения через Gunicorn.

web: gunicorn app:app

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

Убедитесь, что вы установили QUALIFIED_MEDIA_URL с именем вашего приложения Heroku и косой чертой в конце URL. COUPON_SAVE_DIR также должен иметь косую черту в конце пути.

Перейдите к новому экземпляру Heroku, и вы увидите следующий экран ввода.

Теперь мы можем отправлять брендированные купоны с текстом скидки на номер клиента!

Вот один с логотипом Twilio. Это также логотип по умолчанию, если вы решите не указывать логотип в формате .png во время процесса генерации купона.

Отлично! Мы объединили Python, Flask и Twilio для создания веб-приложения, которое отправляет цифровые купоны клиентам. Теперь у вас есть возможность отправлять MMS-купоны своим клиентам, использующим телефоны, в качестве альтернативы бумажным купонам, которые могут потеряться или быть забыты дома.

Это веб-приложение можно улучшить множеством способов, поэтому не стесняйтесь создавать его форк и свяжитесь со мной по адресу makai@twilio.com, если у вас возникнут вопросы по нашему новому приложению для брендированных MMS-купонов.