Windows Phone WinJS. Изучаем Pivot / Хабр

И что в итоге?

На примере акселерации (и трех pivot’ов) стартапа MoneyHero/EasyScript можно сделать следующие выводы:

1. Стремитесь выработать схему, которая позволит тестировать бизнес-модель как можно быстрее. «Первую бизнес-модель мы тестировали месяц, вторую – 2 недели, сейчас нам хватает и трех дней до получения первых результатов».
2. Сначала старайтесь продать продукт, а потом уже программировать. Полноценного продукта может и не быть, но его ценность лучше подтвердить заранее, чтобы не тратить время и ресурсы зря. Обидно сделать хороший продукт, который никому не нужен.
3. Важно сразу подтвердить, что продукт будут покупать. Используйте подходы «Бережливого стартапа» Эрика Риса или другие методологии, использующие понятие минимально жизнеспособного продукта. «Мы решили попробовать продать недоработанный продукт за меньшую сумму. Чтобы подтвердить спрос, сайт можно сделать и на конструкторе. Если идея пойдет – тогда вперед в ТЗ и разработку».
4. Только цифры могут сказать, насколько эффективен проект и идея, субъективизм лучше отбросить в сторону и посчитать метрики.
5. Убивать неработающие проекты очень тяжело, но иногда лучше вовремя остановиться. Когда это сделать – подскажут цифры. Например, гипотезы по EasyScript звучали так:
6. Амбициозные цели лучше реалистичных: 500 тысяч при цели в 1 млн. рублей – больше, чем 110 тыс. при цели 100 тыс. Кроме того, большие цифры сразу указывают на узкие места в финансовой модели.
7. Работая над проектом в сфере, «подводные камни» которой вам неизвестны, стремитесь минимизировать количество внешних элементов в вашей бизнес-модели и зависимость результатов вашей работы от них. «После работы над проектом «Деньги на бизнес» мы решили, что лучше создавать модель, в которой ключевые показатели зависят только от нас. В нашем случае мы достаточно сильно зависели от партнеров. Поэтому новый продукт мы продаем сами».

PS. Подать заявку на очную акселерацию во ФРИИ можно

. Для тех проектов, у которых пока не готов MVP, или есть трудности в формировании заявки, есть бесплатная онлайн-программа подготовки к презентации перед инвесторами –

Рассказ о проекте MoneyHero подготовлен совместно с Марией Любимцевой (специалист по контенту, ФРИИ).

Pivot второй – тестирование новой бизнес-модели заняло три дня

«Мы стали думать, на чем еще можно попробовать заработать? Интересной темой нам показалось перекредитование для физических лиц». Тестирование бизнес-модели сервиса НетКредитов проводилось в течение трех дней. В первый был сделан сайт с помощью конструктора, во второй туда привлекли трафик.

Лендинг на скорую руку выглядел так:

Pivot первый – тестирование нового рынка заняло две недели

О перспективности рынка займов для юридических лиц говорили следующие факты:

1. Объем рынка микрозаймов для юридических лиц по данным на конец первого полугодия 2022 года составил 18,2 млрд рублей, что меньше, чем займы для физ.лиц (28 млрд), но тоже неплохо.
2. Комиссия составляла столько же — 2-3% от суммы выданного займа. Но! Средний чек займов для физ.лиц — 10 тысяч рублей на одну-две недели, для юридических лиц – около 300 тысяч сроком на месяц или два.
3. Онлайн-займов на этом рынке не бывает, но компаниям требовались только контакты заемщика, встречались они с клиентом уже самостоятельно.

Используя наработки, полученные ранее, команда за несколько дней провела переговоры с 8 компаниями и договорилась с тремя крупнейшими партнерами (способными закрыть большую географию выдачи займов) о том, что будет привлекать для них клиентов. Также в MoneyHero купили новый домен (

Pivot третий: за две недели до конца акселерации

«29 августа мы окончательно утвердились в мысли, что ни один из этих проектов не сможет зарабатывать. Мы решились на третий и самый масштабный pivot: наш новый проект вообще был не связан с темой финансов». Команда придумала проект

– сервис для визуализации скриптов для телемаркетинга и входящих звонков.

Например, проследить за разговором оператора с клиентом в сервисе можно по вот такой схеме:

Команда начала тестировать рынок:

1. Первым делом команда распечатала свои скрипты и обратилась к другим проектам, презентовала им идею. «Уже на этом этапе мы нашли двух потенциальных клиентов. Модель работы EasyScript мы реализовали на сервисе опросов TypeForm».
2. Только после этого команда взялась за сайт. Лендинг был собран на конструкторе Wix и как только он был готов, участники проекта сразу рассказали о нем в своих соц.сетях. Всех регистрирующихся клиентов команда опрашивает, чтобы выявить потребность в телемаркетинге.
3. После создания демо клиенты выборочно получили бесплатный недельный доступ. Команда проекта помогала им разрабатывать скрипты и переносить в сервис их сценарии.
4. Через неделю клиентам сообщили о цене использования (полная цена – 3 000 рублей, сейчас – 1 000 рублей, так как команда проекта еще не полностью реализовала весь функционал). Цель – подтвердить ценность сервиса. Бесплатно он интересен многим, но ведь всем нужны платящие клиенты. «В настоящее время из 56 клиентов платят уже 6, а еще 23 тестируют – неплохая конверсия».
5. «Также мы отслеживаем вовлеченность клиентов путем изучения числа скриптов в их аккаунтах. Клиент создал скрипт – ему интересно. Нет – спрашиваем почему и предлагаем помочь с началом работы».
6. «Попробовали оценить рынок, но у нас возникла сложность. Как понять, сколько услуг по созданию скриптов продается на рынке консалтинга для продаж? Мы знаем, что объем рынка консалтинга – 34 млрд рублей, мы знаем, что количество релевантных запросов в Яндексе – около 10 тысяч, а что между ними – для нас пока не до конца понятно».

В ближайших планах EasyScript:

1. Доработка сервиса до уровня обещанного функционала, и проверка масштабирования проекта.
2. Формирование новых каналов продаж – через тренеров и консалтинговые компании.
3. Интеграция с CRM (AMO, Мегаплан, Скорозвон). С помощью сервиса можно будет обогащать данные CRM.

«Даже если наш проект в очередной раз не «полетит», выработанную за период акселерации во ФРИИ схему мы будем использовать и дальше, так как она сильно сокращает время и стоимость запуска проекта»:

1. Ручные продажи, проверка идеи;
2. Лендинг на сайте-конструкторе;
3. Трафик;
4. Тестирование на аудитории;
5. Доработка продукта;
6. Постановка ТЗ на полноценный сайт программисту.

Блокировка переключения вкладок

Давайте рассмотрим работу одного из свойств вкладок – блокировку переключения соседних вкладок. Для примера возьмем элемент управления Pivot, внутрь которого мы добавили элемент управления

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

При выделении элемента списка (ListView) на текущей вкладке, переключение между остальными вкладками можно заблокировать (скрыть), оставляя активной только текущую, на которой произошло выделение.

Для реализации блокировки соседней вкладки используйте свойство locked. Оно принимает два значения – true и false. Ниже реализована функция toggleSelectionMode, в которой проверяется значение свойства selectionModeActive элемента ListView. Если элемент не выделен (selectionModeActive = false), тогда свойству locked присваиваем значение false, если элемент выделен (selectionModeActive = true), то свойству locked присваиваем значение true.

function toggleSelectionMode(listView) {
	if (listView.selectionModeActive) {
		listView.selectionModeActive = false;
		pivotEl.winControl.locked = false;
		listView.tapBehavior = WinJS.UI.TapBehavior.invokeOnly;
		listView.selectionMode = WinJS.UI.SelectionMode.none;
		listView.selection.clear();
	} else {
		listView.selectionModeActive = true;
		pivotEl.winControl.locked = true;
		listView.tapBehavior = WinJS.UI.TapBehavior.toggleSelect;
		listView.selectionMode = WinJS.UI.SelectionMode.multi;
	}
	return listView.selectionModeActive;
};

Декларативное создание pivot (html)

Для создания Pivot — элемента необходимо добавить на страницу блок div с атрибутом «data-win-control», и присвоить ему значение

В ходе инициализации страницы библиотека WinJS автоматически создаст на базе этого блока Pivot-элемент с необходимыми стилями и разметкой. Дополнительно в разметке можно указать параметры создания элемента через атрибут

Добавление элемента управления pivot и winjs в веб

WinJS

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

Посмотрим, как добавить элемент управления Pivot на HTML страницу. Для этого создайте HTML страницу и добавьте два скрипта со ссылками на библиотеку WinJS. Также необходимо добавить ссылку на библиотеку темы отображения элемента управления. В данном примере используется светлая тема оформления.

Конфигуратор пк — онлайн сборка компьютера на заказ | topcomputer

Персональные компьютеры — купить в ростове-на-дону в интернет-магазине, персональные компьютеры — цены и характеристики в каталоге

Программное создание pivot (js)

Создание Pivot-элемента из кода на JS повторяет логику декларативного описания

//создаем элемент myPivot с заголовком 'WINJS - PIVOT'
var myPivot = new WinJS.UI.Pivot(null, { title: 'WINJS - PIVOT' });
//создаем вкладку myPivotItem с надписью 'one' в заголовке
var myPivotItem1 = new WinJS.UI.PivotItem(null, { 'header': 'one' });
//вставляем контент (текстовую строку) во вкладку myPivotItem
var item1Content = document.createElement("p");
item1Content.innerHTML = "Content - Item One";
myPivotItem1.contentElement.appendChild(item1Content);
//создаем вкладку myPivotItem с надписью 'two' в заголовке
var myPivotItem2 = new WinJS.UI.PivotItem(null, { 'header': 'two' });
//вставляем контент (текстовую строку) во вкладку myPivotItem
var item2Content = document.createElement("p");
item2Content.innerHTML = "Content - Item Two";
myPivotItem2.contentElement.appendChild(item2Content);
//создаем WinJS- объект Binding.List
var pivotItems = new WinJS.Binding.List();
//добавляем вкладки в объект WinJS.Binding.List
pivotItems.push(myPivotItem1);
pivotItems.push(myPivotItem2);
myPivot.items = pivotItems;
//добавляем созданный DOM – элемент в дерево
document.querySelector("#myPivotContainer").appendChild(myPivot.element);

Обратите внимание:

С чем пришли в акселератор

На момент прихода в Акселератор проекту MoneyHero было 6 месяцев. «Мы прошли в третий набор с проектом – агрегатором финансовых займов для физических лиц», – рассказывает сооснователь проекта Антон Утехин. В чем была суть идеи? Сфера микрокредитования такова, что заявку с большой вероятностью могут не одобрить.

Чтобы увеличить шансы, лучше оставить заявку сразу на нескольких сайтах разных компаний. На каждом из них нужно с нуля заполнять одну и ту же анкету. «Многим делать это не очень удобно и лень. Поэтому мы решили сделать сайт, на котором вы заполняете одну, максимально полную анкету, а уже она рассылается во все микрофинансовые организации (МФО). Мы ориентировались на компании, которые выдают займы онлайн».

По задумке основателей, микрофинансовые организации должны были платить сервису за привлечение клиентов от 1 до 3% от суммы выданного займа. Риски невозвращения займов были на стороне партнера, и в этом плане модель была интересной.

До прихода во ФРИИ сайт сервиса выглядел так:

Создание pivot

Давайте рассмотрим, как создать Pivot элемент. Существует два способа создания Pivot элемента — декларативный и программный.

Стилизация элемента управления pivot

Визуальное оформление элемента управления Pivot можно очень легко менять. Для того, чтобы изменить стиль заголовков или контента, достаточно определить различные CSS классы для элементов Pivota.

Для того, чтобы вставить внутрь заголовка картинку, используйте шрифт с соответствующими изображениями. Например, обратите внимание на шрифт Segoe UI.

Об остальных классах, позволяющих изменять стиль Pivota, можно почитать здесь.

Тестирование первой бизнес-модели заняло два месяца

ФРИИ сразу выставил высокую планку – к концу акселерации надо было зарабатывать не менее 1 млн. рублей в месяц, чтобы говорить о seed-раунде инвестиций. Чтобы проверить, сможет ли проект соответствовать этому требованию и нужен ли вообще клиентам этот продукт, MoneyHero разместили у себя на сайте анкету, которую создали с помощью стороннего сервиса. Все поступившие на нее заявки команда собиралась вручную вбивать в анкеты на сайтах партнеров.

Таким образом в компании хотели узнать следующие вещи:

1. Сколько заполненных анкет конвертируется в займы;
2. Сколько пользователей, заполнивших анкету, будут уже зарегистрированы в МФО.

Последний пункт был особенно важен, потому что в ходе переговоров с МФО возникло ограничение – все, кроме одной компании, не были готовы платить за повторные обращения клиентов. Это ставило под сомнение экономику проекта.

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

Результаты тестирования изначально были не такими плохими, учитывая, что анкета была сделана на скорую руку:

«И вот эти 52 анкеты мы стали вручную переносить на сайты партнеров. На это у нашего сотрудника ушло 3 полных рабочих дня. В процессе мы столкнулись с тем, что практически у всех МФО была смс-верификация телефонных номеров. Поэтому нам пришлось звонить каждому клиенту и спрашивать, какой смс-код ему пришел. А у некоторых компаний было по 2 смс-кода…», – рассказывает Антон.

В компании выяснили, что в 60% случаев клиенты были уже зарегистрированы в крупных онлайн-МФО.

Позже спартапу удалось договориться с одним из партнеров-МФО об API-интеграции, которая заняла около месяца. «Когда она завершилась, мы протестировали аудиторию в автоматическом режиме и выяснили, что 92% посетителей нашего сайта уже зарегистрированы на сайте этого партнера». Из тех, кто не был зарегистрирован, заем не был выдан никому.

«Главная ошибка, которую мы допустили на этом шаге – поверили самим МФО, что они выдают займы в среднем пятой части всех пришедших клиентов. Позже эти цифры не подтвердились. А изначально наша экономика строилась на них и на предположении, что за повторные заявки от тех же клиентов МФО нам тоже будут платить», – Антон Утехин.

В итоге, в компании пришли к следующим фактам:

1. Из восьми партнеров только один согласился платить за повторные заявки через сайт MoneyHero от того клиента, который уже есть в их базе.
2. Канал контекстной рекламы был практически «выбран» крупными онлайн-МФО. Аудитория из альтернативных каналов (социальные сети) не оставляла анкеты.
3. Общий доход от тех клиентов, которых одобряли к выплате займа, не покрывал общих затрат не привлечение всей клиентской базы в целом.
4. Экономика «Анкеты на заем» была интересна только при условии, что объем трафика — не менее 25 тысяч в месяц, а конверсия в займы – 7%. «Тогда мы могли бы добиться оборота в 1 млн рублей в месяц – минимальной суммы, которая может быть интересна инвесторам и ФРИИ. Вопрос с трафиком еще как-то можно было решить, но конверсия в займы в общем масштабе была равна практически 0%», – резюмирует сооснователь проекта.

Управление pivot из js

Вкладка Pivot (PivotItem) состоит из заголовка и контента, между вкладками реализуется закцикленная навигация. Рассмотрим, как программно реализовать переход между вкладками элемента. Сначала необходимо получить общее количество вкладок в элементе Pivot (при помощи свойства length), затем определить индекс выбранной вкладки и осуществить переход к следующей.

Обратите внимание, что тип items – Binding.List.

function gotoNextPivotItem() {
	// Выбираем Pivot-элемент 
	var pivotControl = document.getElementById("myPivot").winControl;
	// Узнаем количество вкладок 
	var pivotControlLength = pivotControl.items.length;
	// Выбираем какую-либо вкладку 
	var pivotSelected = pivotControl.selectedIndex;
	// Осуществляем переход к следующей вкладке 
	if (pivotSelected < pivotControlLength-1) {
		pivotControl.selectedIndex  ;
	}
	// Обрабатываем случай, когда номер следующей вкладки больше, чем количество всех вкладок
	else {
		pivotControl.selectedIndex = 0;
	}
}

Аналогично, вы можете перейти к предыдущей (следующей) вкладке (помните о зацикленности Pivot) или к конкретной вкладке, указав ее значение в selectedIndex.

Выводы:

Переход из сектора B2C в сектор B2B – довольно популярная практика pivot’а, не лишенная своих тонкостей, но, тем не менее, в целом вполне жизнеспособная. В первую очередь это, как правило, связано с вероятностью уменьшить давление со стороны конкурентов (если речь идет об электронном бизнесе) – в основном из-за пресыщенности рынка B2C. С другой стороны, как справедливо

Джон Бишке (John Bischke), CEO сервиса Entelo: «Если вы найдете и решите проблему, релевантную для тысячи B2C-клиентов, вы едва ли добьетесь успеха…Но если вы решите проблему тысячи клиентов в сфере B2B, у вас на руках будет весьма жизнеспособная компания. Да даже если вы решите проблему для ста компаний, ваш бизнес будет жизнеспособным».

В этом одно из основных преимуществ B2B-рынка: его проще сегментировать, легче охватить (нашим героям понадобилось три недели для того, чтобы охватить 0,7% рынка), клиенты в этой сфере оперируют более крупными суммами, а их платежеспособность, как правило, выше (в нашем примере средний чек займов для юридических лиц оказался в 30 раз больше среднего чека в сегменте B2C).

И тем не менее, незнание все тех же «подводных камней» сферы микрокредитования не позволило получить от идеи планируемую отдачу (надо отдать должное команде MoneyHero – на этот раз на тестирование новой бизнес-модели им потребовалось в два с половиной раза меньше времени).