Создание интеллектуального опыта распространения мобильных приложений с помощью ASP.NET и Twilio

Вы потратили часы на создание красивого мобильного приложения для своих клиентов. Приложили титанические усилия, чтобы адаптировать его под несколько мобильных платформ. «Создайте его, и они придут», — говорили вам. Но теперь ваше приложение теряется среди постоянно растущего моря мобильных приложений.

Если вы достигли этой точки, пора разработать маркетинговый план для вашего приложения, и распространение мобильных приложений (Mobile App Distribution, MAD) может стать важной частью этого плана. Приложение MAD упрощает процесс привлечения новых пользователей приложения до уровня посещения вашего сайта, позволяя вам доставлять приложение потенциальному пользователю напрямую, вместо того чтобы полагаться на печально известный плохой поиск в магазине приложений.

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

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

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

Создание этой страницы является простым и использует те же методы разработки, которые вы бы использовали при создании любого приложения ASP.NET MVC. Я начал в Visual Studio 2013 с создания проекта веб-приложения, затем добавил один контроллер и соответствующее представление. В представлении я использовал помощник Ajax для создания простой HTML-формы, которая просит пользователей ввести номер телефона:

Отправьте на свой телефон ссылку на мобильное приложение

@Html.TextBox(«phone», «», new { placeholder=»Введите ваш мобильный номер», style=»width:250px;font-size:18px» })

}

Для ясности в посте я сделал код выше очень простым. Однако в вашем приложении вы, вероятно, захотите добавить некоторую клиентскую валидацию, чтобы убедиться, что пользователь вводит значение, похожее на номер телефона. Вы также, вероятно, захотите дать пользователю обратную связь после нажатия кнопки отправки. Для расширенной версии формы ввода номера телефона, которая включает эти две функции, ознакомьтесь с исходным кодом на GitHub. Когда пользователь нажимает кнопку отправки, форма выполнит асинхронный обратный вызов метода действия в моем контроллере с именем Send, задача которого, как следует из названия, — использовать Twilio для отправки текстового сообщения со ссылкой на загрузку на указанный пользователем номер телефона.

Ссылка, включенная в текстовое сообщение, указывает на другой метод действия в моем контроллере с именем InstallRedirection, который я покажу немного позже в посте.

Обратите внимание, что URL в текстовом сообщении является прямой ссылкой на мое веб-приложение. Я сделал это, чтобы продемонстрировать в этом посте, что когда пользователь нажимает на ссылку на своем устройстве, HTTP-запрос отправляется обратно в мое приложение с устройства. В производственном приложении я бы рассмотрел возможность замены прямого URL на сокращенную версию, созданную сервисом вроде bit.ly. Сокращение URL освобождает ценные символы в текстовом сообщении, которые я могу использовать для более эффективного призыва к действию, а также дает мне уровень косвенности на случай, если мне позже понадобится изменить URL моего приложения. Вот и все, что нужно для создания базовой целевой страницы MAD. Далее я покажу вам, как интеллектуально направить пользователя в правильный магазин приложений после того, как он нажмет на ссылку для загрузки.

После того как я отправил пользователю текстовое сообщение со ссылкой на загрузку, следующей задачей моего приложения MAD является перенаправление пользователя в правильный магазин приложений после того, как он нажмет на ссылку. Но в какой магазин приложений мне его отправить? Я никогда не спрашивал его, какое устройство он использует, так что должен ли я направить его в Apple App Store, Google Play Store или Windows Phone Store? Хорошая новость заключается в том, что мне никогда не нужно напрямую спрашивать пользователя. HTTP-запрос, который устройство делает, когда пользователь нажимает на ссылку для загрузки в текстовом сообщении, включает строку User Agent, которая описывает его мобильное устройство. Анализируя эту строку, я могу определить, с какого устройства пользователь делает запрос, и направить его в правильный магазин. Как оказалось, существует множество хороших библиотек для анализа строки User Agent на .NET, которые делают это действительно просто. В своем приложении я решил использовать библиотеку UAParser, которая является открытой и доступна на NuGet с API, который я нашел простым и интуитивным. После того как я получил тип устройства с помощью библиотеки UAParser, я использую метод Redirect для возврата HTTP-ответа 302 Found из моего метода действия, указывая правильный URL магазина приложений, на который должно быть перенаправлено устройство.

Как видно из этого примера, я перенаправляю либо в Apple Store, либо в Google Play Store, либо в Windows Phone Store в зависимости от устройства, которое использует пользователь. И с этим я создал базовое приложение для распространения мобильных приложений, которое должно значительно облегчить потенциальным пользователям загрузку и установку моего мобильного приложения. Теперь мне нужно протестировать мое приложение, но как? Один из вариантов — приобрести кучу физических устройств, но это может быть довольно дорого. Или, возможно, я могу одолжить устройства у друзей, но это тоже довольно хлопотно. Лучшим вариантом может быть симуляция запроса устройства с помощью моего собственного браузера, но делать это с моего компьютера не отправит правильную строку User Agent. Чтобы решить эту проблему, я установил расширение Chrome, которое позволяет мне изменять строку User Agent, отправляемую Chrome с запросами веб-страниц. Я обнаружил, что расширения User Agent Switcher или User Agent Switcher (да, у них одинаковое название, но это разные расширения) предоставляют мне наиболее полный список опций строк User Agent.

На данный момент у меня есть функциональное приложение для распространения мобильных приложений, которое значительно упрощает пользователю переход от просмотра моего сайта к установке моего мобильного приложения на его устройстве, но в моем текущем приложении остается интересная проблема. Оно оптимизировано для сценария, когда пользователь просматривает мой сайт с компьютера. Если он случайно заходит на мой сайт с мобильного устройства, отправка ему текстового сообщения самому себе не имеет особого смысла. Поэтому в качестве последней настройки моего приложения MAD я хочу создать отдельный опыт, оптимизированный для пользователей, которые заходят на мой сайт с мобильного устройства, и ASP.NET MVC делает это очень просто, используя, как вы догадались, строку User Agent устройства. ASP.NET MVC 4 представил функцию, которая позволяет создавать и возвращать специфичные для браузера представления из вашего приложения, и это то, что я собираюсь использовать для создания оптимизированного для мобильных устройств опыта для пользователей iOS и Android. На сайте ASP.NET есть фантастическое руководство о том, как сделать ваш сайт мобильным с помощью различных функций фреймворка. Если вы просто хотите узнать о создании специфичных для браузера представлений, прокрутите вниз до раздела под названием «Представления, специфичные для браузера». Как описано в этом разделе, я собираюсь добавить некоторый код в мой файл global.asax, который сообщит приложению, что у меня есть отдельные представления для устройств iPhone и Android.

Теперь я создаю эти представления, добавляя два файла, Index.iPhone.cshtml и Index.Android.cshtml, в мой проект. В этих представлениях я удалю HTML-форму, созданную ранее, и заменю ее значком магазина приложений, специфичным для устройства, с ссылкой на мое приложение в этом магазине. Например, в представлении, специфичном для iPhone, я заменю контент на это:

Теперь, если я зайду на мой сайт с iPhone или Android (или использую расширение Chrome User Agent для симуляции этого на своем настольном компьютере), я увижу, что ASP.NET MVC правильно определил, что я использую мобильное устройство, и вернул правильное представление, специфичное для устройства.

Включение распространения мобильных приложений в ваш маркетинговый план мобильного приложения — это важный способ облегчить пользователям установку вашего приложения. Как я показал в этом посте, создание базового приложения MAD с использованием Twilio, некоторых функций ASP.NET MVC и вспомогательной внешней библиотеки является простым и понятным. Вы можете начать сегодня, взяв исходный код, показанный в этом посте, с GitHub.