Это был долгий день. Я поймал небольшой перерыв и немного поиграл в бета-версию Overwatch, прежде чем догнать своего партнера по паре на вечер и снова открыть кодовую базу, чтобы продолжить ночь. Я отстаю, но уверенно догоняю.

Быть парнем, задающим тон в области технологий, означает, что я должен делать и пытаться придерживаться действительно разумных оценок. Я не буду жалеть слов: тревога и депрессия полностью разрушили мою временную шкалу. Сейчас под прицелом все стягиваю, но не без небольших задержек. Я делаю оценки, но работа в реальном бизнесе означает, что эти оценки по-прежнему часто имеют внешнее значение. Я летаю (в основном) в одиночку, так что, к сожалению, это среда, созданная мной лично и полностью противоречащая моей идее правильного баланса между работой и личной жизнью.

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

Начнем с того, над чем я сейчас работаю. Несколько месяцев назад я начал новую работу в качестве технического директора Sales Genii, Inc. В настоящее время я работаю над созданием новой версии нашей платформы SaaS для программ лояльности и маркетинга на основе SMS.

Есть две основные вещи, которые делают нашу систему уникальной:

  1. Он основан на игре. Клиенты играют в простую игру, чтобы подписаться на программу лояльности и маркетинговую платформу.
  2. Мгновенное удовлетворение. Клиенты мгновенно получают приз/награду после игры, которую они могут использовать на все, что они уже собирались купить.

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

«Какое это имеет отношение к коду?» ты спрашиваешь. Ну, это просто контекст, чтобы я мог немного лучше объяснить фактические технические детали.

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

Технические детали этого одновременно интересны и довольно уродливы. Мы стремимся к будущему, в котором у нас также будет спецификация оборудования, под которую мы будем разрабатывать, поэтому мы будем знать, что такие вещи, как минимальная версия браузера и разрешение экрана, всегда будут постоянными. Здесь происходит много абсолютного позиционирования и динамического изменения размеров элементов (в частности, колеса) с использованием JavaScript.

Но давайте немного поговорим о самом колесе. Его конструкция немного интересна, потому что мы на самом деле рисуем его на холсте HTML5. На странице два полотна. Один для самого колеса, а затем один для крышки колеса, которая находится сверху (логотип Spin & Win и внешняя граница). Если вы никогда раньше не рисовали фигуры непосредственно на элементах ‹canvas›, полезно помнить, что в остальном вы рисуете дуги в радианах.

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

Сейчас я воспользуюсь моментом, чтобы немного рассказать о предыдущем разработчике этого приложения. Когда я взялся за эту работу, генеральный директор сказал мне, что он знает, что существующая система не может быть устойчивой в долгосрочной перспективе. По сути, это был прототип, который изначально был построен специально для ресторана, которым он владел. Разработчик, которого он нанял для сборки системы, был… скажем так, не самым лучшим. Объедините плохие знания в области разработки с, возможно, оскорбительной тактикой отношений с клиентами, и вы получите рецепт нездоровых профессиональных отношений. Я не буду вдаваться в подробности того, что я унаследовал и как этот парень обращался с генеральным директором, но просто знайте, что я не собираюсь терпеть никаких ударов, и этот парень полностью заслуживает этого за то, что воспользовался нетехническим клиентом.

Из-за нехватки времени я планировал перенести существующую страницу колеса, которую вы можете видеть на изображении выше, на новую систему, которую я создавал с намерением переписать ее после выпуска. К сожалению… На самом деле все пошло не так. Работая над этим прошлой ночью, я обнаружил кое-что, что заставило меня и парня, с которым я работал в паре, буквально упасть со стула от смеха (плакать?).

Оказывается, предыдущий разработчик встроил в серверную часть API, который будет возвращать количество оборотов, которое должно совершать колесо, в градусах на основе жестко закодированной матрицы количества призов в градусах:

$sa3['1'] = 61;
$sa3['2'] = 181;
$sa3['0'] = 301;
$sa4['1'] = 46;
$sa4['2'] = 136;
$sa4['3'] = 226;
$sa4['0'] = 316;
$sa5['1'] = 37;
$sa5['2'] = 109;
$sa5['3'] = 181;
$sa5['4'] = 253;
$sa5['0'] = 325;

Такой массив существовал для каждой призовой комбинации колеса до 20 призов на колесе. Причина этого в том, что когда вы рисуете дуги на холсте в радианах, вам нужно знать положение каждой дуги в градусах, чтобы иметь возможность поворачиваться к ней.

Вы знаете, что такое математика, чтобы перевести радианы в градусы? Неважно, потому что Google делает. (Кстати, это радианы * (180/Пи).)

В общем, код для поиска призов на колесе и его вращения с нужным количеством оборотов занял почти 1000 строк PHP и JavaScript. И включены такие драгоценные камни:

function getArrayIndexPosition($nameofarray,$value2find){
 $i = 0; // 0 is set as the defualt table
 foreach($nameofarray as $val) { if($val == $value2find){ goto END; } $i++; }
 $i = 1;// not in array
 END:
 return $i;
}

В случае, если вы запутались, это буквально PHP array_search (который, я могу добавить, был в языке с PHP4), реализованный с использованием foreach и goto. Переход.

Вы помните, как я упоминал, что у нас уже есть радианы, так как мы уже рисуем чертов круг? Мое окончательное решение этой проблемы состояло в том, чтобы просто сообщить призам, где они находятся на колесе в градусах. По мере того, как мы перебираем список призов для создания сегментов, я добавляю начальную и конечную градусы призовому объекту, чтобы он просто осознавал свое собственное положение на колесе:

wheel.prizes[i].startAngle = -Math.round(lastAngle * (180/Math.PI));
wheel.prizes[i].endAngle = -Math.round(angle * (180/Math.PI));

Наконец, мы можем вращать колесо, просто передав призовой объект, который мы получаем от API. Функция вращения находит его в массиве призов, и мы вращаем, чтобы выиграть!

Итак, в итоге я перешел от четырех цифр исходного кода к менее чем 20 строкам для достижения той же функциональности. Я бы назвал это победой. И намного меньше площади поверхности, где что-то может пойти не так. Мораль этой истории в том, что простые решения могут решить (на первый взгляд) сложные проблемы. Чтобы быть хорошим разработчиком, нужно больше знать что нельзя кодировать, чем то, что можно кодировать.

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