Каждый год я дарил своему брату рождественские подарки нетрадиционным способом. Подарок в этом году пока самый лучший

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

В прошлом году я заставил его позвонить и написать свои подарки, чтобы узнать, готовы ли они к открытию. За год до этого ему пришлось провести некоторое исследование пород собак AKC и использовать это, чтобы выяснить, в каком порядке открывать свои подарки.

Однако в этом году ... в этом году все по-другому.

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

Я сделал для него игру. Игра, в которую он может «играть» на своем телефоне, чтобы выяснить, как открыть свои подарки.

Кикер?

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

Игра

Я сделал базовую игру про подземелья. Я начал с сетки 8x8 и нарисовал пол подземелья со стенами, запертыми дверями и предметами, спрятанными вокруг карты. Цель состоит в том, чтобы найти все предметы и пройти через темницу.

Найдя предмет, он может открыть соответствующий подарок перед собой на Рождество.

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

Когда он перемещается между комнатами, карта начинает заполняться. С каждым движением он видит больше схемы подземелья. В каждой комнате Алекса расскажет ему часть истории. Чем глубже он проникает в темницу, тем сложнее становится история.

Довольно весело, правда?

Мобильное приложение

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

Само приложение довольно простое. Фактически, это приложение только для чтения. Поскольку все команды проходят через Alexa, ему нечего делать, кроме как смотреть на нее и планировать свой следующий ход.

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

Когда мне нужно что-то быстро построить, я иду в OutSystems. Это интуитивно понятная платформа с низким кодом, которая позволяет быстро создавать реактивные веб-страницы, веб-службы и мобильные приложения. Лучшая часть? Его можно использовать для проверки концепций!

Есть всего несколько движущихся частей, чтобы сделать это волшебным опытом:

  • API
  • Мобильное приложение
  • Алекса навык
  • WebSocket

API

У приложения должен быть мозг для выполнения логики и сохранения состояния. Лучший рождественский подарок - это простой API, встроенный в OutSystems. Он загружает ваше местоположение на карту, проверяет, можете ли вы двигаться так, как хотите, перемещает вас, а затем рассказывает вам небольшой кусочек истории.

На самом деле все приложение имеет только две конечные точки API: одну для перемещения, а другую для получения текущего состояния. Получение текущего состояния возможно только тогда, когда он покидает приложение и возвращается (потому что я знаю, что моему брату в какой-то момент понадобится сделать перерыв).

За кулисами у нас есть модель данных ниже, которая строит карту, историю, инвентарь рождественских подарков и переходы между комнатами.

С помощью OutSystems я создал модель данных, логику для перемещения персонажа и REST API для управления всем. Пришло время построить переднюю часть!

Мобильное приложение

И снова здесь на помощь приходит OutSystems. Они предоставляют простой в использовании пользовательский интерфейс, который позволяет вам перетаскивать компоненты на экран, а затем компилировать все это для вас в мобильное приложение.

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

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

Навык Алекса

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

Оказывается, команда Alexa в AWS действительно знает, что делает. Это одно из лучших представлений простого решения сложной проблемы, которое я когда-либо видел. На самом деле есть два компонента навыка Alexa:

  • Модель взаимодействия
  • Внутренний код

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

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

Внутренний код также было легко написать. Вы можете закодировать свой навык прямо в VS Code и перенести его в облако с расширением Alexa.

Достаточно просто.

Для кода вы должны определить, что будет делать каждое намерение при его вызове. Что касается игры, все, что я делал, это вызывал API, который я построил в OutSystems. Поэтому я быстро позвонил с помощью axios в соответствующую конечную точку API для каждого намерения и попросил Алекса попугая вернуть ответное сообщение.

Готово и готово!

WebSocket

Во время тестирования приложения я быстро понял, что кое-что забыл. Как обновить мобильное приложение, когда Алекса перемещает персонажа?

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

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

За WebSocket стоит многое. К счастью для меня, есть компании, которые стремятся облегчить их жизнь потребителям.

Я создал бесплатную учетную запись на Pusher, в несколько кликов настроил свое приложение и был готов интегрировать его в свой API и мобильное приложение.

Вы можете думать о WebSocket почти как о подходе pub / sub. Когда что-то происходит в системе, вы запускаете событие, и подписчик берет его и выполняет действие.

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

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

Быстрая проверка с помощью моего Echo заставила персонажа автоматически перемещаться по карте, как только слова срывались с моего рта. Как это круто?

Разоблачение

Пишу эту статью перед Рождеством. Мой брат еще не получил удовольствия пройти игру.

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

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

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

И это было бесплатно! Все, что я делал для этого подарка, выпадает на бесплатный уровень, а это значит, что единственными расходами было мое время. Я потратил около 30 часов на то, чтобы придумывать историю, рисовать карту и строить все подряд. Конечно, это была инвестиция.

Мы узнаем к Рождеству, стоило ли оно того. Я обязательно опубликую отчет с результатами.

Счастливого Рождества!