В 2018 году Skyeng представила онлайн-классы по математике.
Так мы столкнулись с тем, что наша платформа, адаптированная для устного английского, не очень подходит для письменных занятий с дробями, формулами и геометрическими фигурами.
Тогда мы сделали интерактивную доску, на которой ученик и преподаватель могли писать как бы от руки.
Онлайн-доска, на которой вы можете рисовать и записывать решения примеров и задач, как если бы вы это делали в блокноте.
Но остается одна проблема.
У нас была «цифровая тетрадь», но детям было сложно писать мышкой в браузере.
В школе обычно пишут ручкой на одном и том же листе бумаги.
Мы решили, что нужно подключить к платформе дополнительный инструмент ввода.
Мы, честно говоря, не хотели резать свой велосипед, а взяли что-то готовое.
Skyeng — компания-разработчик программного обеспечения.
Распиливание собственного B2C-железа — такой опыт есть лишь у немногих игроков в IT. И понятно почему.
Поэтому сначала команда математиков под руководством продакт-менеджера Саши Перфиловой задалась изучением того, что нам может подойти.
Основной список требований был кратким:
- устройство можно легко подключить к нашей платформе в браузере и настроить для работы только с областью доски;
- с его помощью вы сможете писать комфортно и привычно;
- оно должно стоить менее 5 тысяч рублей – мы хотели отдать его при покупке большого пакета уроков и дать родителям возможность купить устройство отдельно;
- его не нужно часто заряжать.
Фото умной ручки из обзора ребят из Medgadgets. Отдельный класс устройств, таких как «умные» ручки, также не вызвал удовлетворения.
Стоили они дорого (а потерять легко), к тому же не очень удобно лежали в детской руке.
Графические планшеты со стилусами, которые обычно используются для рисования, показались лучшим вариантом.
Стилус отображается на компьютере как курсор, все «написанное» появляется на экране.
Но возникла проблема с пользовательским опытом: если учителя могли быстро подключить и освоить такое устройство, то ученикам нужен был более простой вариант, настоящий plug&play. Идеально было бы писать «как обычно», то есть в блокноте.
Но как тогда учитель мог сразу увидеть, что пишет ученик? Умельцы посоветовали прислать ученикам «веб-камеру на гибкой ножке», которая снимала бы то, что они пишут в тетрадях, и передавала бы это на платформу в виде третьего видеопотока (на камеру преподавателя и ученика).
Но.
Оказалось, что эту проблему решило одно устройство, которое было у производителя планшетов Wacom. 
Встречайте графический планшет Wacom Bamboo Spark с блокнотом и оцифровкой написанного.
Вот как это работает: на планшет-оцифровщик кладется обычный бумажный блокнот. Чтобы блокнот не выдвинулся, его крышка вставляется в прорезь на крышке планшета.
Затем вы пишете на листе бумаги специальной ручкой и чернилами, а планшет фиксирует движения и передает их на компьютер через Bluetooth или USB-соединение.
Так изображение с листа бумаги в блокноте воспроизводится в реальном времени на цифровом двойнике.
Планшет Wacom был почти идеален, но имел два фатальных недостатка: его цена оказалась вдвое выше, чем мы ожидали.
И самое главное, у устройства не было открытого API для macOS, поэтому у многих пользователей возникли бы трудности с подключением его к нашей платформе.
Мы, конечно, связывались с представителями бренда и пытались договориться, чтобы устройства были адаптированы под наш запрос (а они еще и намекали на снижение цены).
Но если вы читаете этот пост, то уже понимаете, что переговоры не увенчались успехом.
«Если я тебе понадоблюсь, ищи меня в Китае»
Но теперь мы точно знали, чего хотим.Пришла идея поискать других производителей.
Сначала мы просто зашли на Alibaba — сначала убедиться, что есть и другие производители.
А во-вторых, мы честно пытались пообщаться с несколькими, но.
впечатления от общения были так себе.
Alibaba и 40 страниц результатов, от которых открываются глаза.
Чтобы не искать производителя вслепую, мы решили спросить совета у тех, кто уже работал с производством гаджетов и может дать рекомендации.
На вопрос «Знаете ли вы кого-нибудь, кто мог бы посоветовать, как недорого изготовить устройство с нужным функционаломЭ» Саша пришел на канал, чтобы присоединиться к другим продуктам.
Этот канал открыт - вопрос случайно увидел Кирилл Сидоров из отдела продаж.
На предыдущей работе он участвовал в проекте по производству электроники с частичной кастомизацией в Китае и сразу предложил план действий.
Мы начали искать проверенную компанию, которая стала бы посредником между нами и фабрикой-производителем и контролировала весь производственный процесс.
По рекомендации нашли компанию в Китае с русскоязычным менеджером – и с этого все началось.
Глава, в которой мы тестируем китайские образцы и программу документации Hand Face.
Вместе с подрядчиком мы выбрали несколько производителей и заказали образцы планшетов, у каждого запросили SDK и проверили, как все работает в браузере.Первый тест немного разочаровал.
Практически у всех устройств была проблема с чувствительностью: не все движения пера отражались на экране.
Как это выглядело на листе бумаги.
Но эти закорючки вместо примеров на экране.
Покопались в документации, залезли в настройки, нашли и исправили.
Постепенно выявились и другие недостатки.
Просто установить драйвера оказалось недостаточно — нужно было еще запустить из SDK специальный сервис, который слушает планшет и отправляет координаты в браузер.
При установке драйвера под macOS выдавалось сообщение об ошибке, хотя драйвер действительно был установлен.
В какой-то момент вообще ничего не подключалось ни под Windows, ни под macOS. Также мы обнаружили важный недостаток в конструкции: если вместо стационарного блокнота использовать обычный блокнот, нужно следить за тем, чтобы он не выдвигался.
Например, если нарисовать круг, переместить блокнот и написать в этом круге единицу, то на экране единицы в круге уже не будет. В конце мы провели онлайн-тестирование с несколькими студентами: отправили им образцы, объяснили, как все настроить, попробовали провести урок и собрали обратную связь.
Мы узнали, что образцы кажутся громоздкими.
Стало понятно, что работать придется как над самим планшетом, так и над программной частью.
Начинаем дорабатывать напильником (но изначально нам нужна была просто небольшая кастомизация)
Мы решили начать с чехла для планшета.Дело в том, что планшет, который мы взяли за образец, предназначался для блокнота.
И это позволяло фиксировать бумажный носитель только через горизонтальную прорезь в корпусе.
Российские школьники в основном пользуются тетрадями.
Мы подумали, что логично было бы сделать сбоку прорезь для фиксации ноутбука.
Но поскольку в блокноте написано с двух сторон, похоже, понадобится еще один слот. Нет, это будет неудобно: вместо того, чтобы просто перелистнуть страницу, как все делают, вам придется вынимать блокнот из чехла с одной стороны, вставлять его с другой стороны, а затем запоминать, на чем вы остановились.
Детям этот сценарий показался очень трудным.
Тогда мы решили сделать универсальный чехол для ноутбука, который бы как-то фиксировался на планшете.
Например, с помощью магнитов.
Вот так выглядел самый первый дизайн нашего планшета.
К концу проекта почти все изменится.
Но эта идея подразумевала изменения в дизайне самого планшета.
При этом нам все равно хотелось получить аккуратное и приятное устройство небольшого размера, которым было бы удобно пользоваться детям.
Спойлер Еще была идея сделать чехол, который сам по себе будет служить планшетом.
То есть просто положил его на ноутбук, подключил по USB к компьютеру - и все, можно пользоваться.
Но после переговоров с инженерами от него наконец решили отказаться: на изгибе ломалась внутренняя сетка, через которую передается сигнал от ручки.
Техническое задание усложняется и обрастает деталями
Здесь у нас сформировались новые требования к тому, чего мы должны достичь.
- Таблетка должен быть немного больше обычной школьной тетради, а его рабочая область — размером с тетрадный лист. По углам рабочей зоны расположены 4 магнита для фиксации крышки с ноутбуком.
В местах, где будут находиться магниты, должны быть небольшие углубления.
Мы решили оставить слот для блокнота.
Кроме того, сбоку должна быть прикреплена ручка.
- Крышка должен быть изготовлен из износостойкого материала, иметь 8 магнитов (по углам рабочих зон).
Снаружи в местах расположения магнитов должны быть «выступы», чтобы ноутбук можно было легко расположить на планшете.
- Сам планшет необходимо подключить к компьютеру через USB-кабель , чтобы учащимся не приходилось разбираться с соединением Bluetooth.
- В комплект должен входить ручка и сменные наполнители .
Окончательный дизайн планшета с чехлом для блокнота.
В плане программного обеспечения планшет должен одинаково хорошо и стабильно работать под Windows и macOS, без лишних движений со стороны учащихся и без ошибок с установкой драйверов и распознаванием устройства.
Было важно, чтобы компьютер по умолчанию не распознавал ее как мышь и курсор не перемещался по всему экрану, а рабочая область в браузере ограничивалась только нашей доской.
Все эти требования мы отправили подрядчику, и началась долгая история с уточнением деталей: какие магниты нужны, какие материалы использовать для покрытия планшета, какая ткань должна быть у чехла.
Глава, в которой наш человек отправляется в Китай
Шел энный месяц переписки, стотысячный вопрос был отправлен на почту и WeChat.
Когда мистер Переводчик и мистер Робот — один человек К лету 2019 года стало понятно, что решить все эти вопросы удаленно не получится, поэтому нужно кого-то отправить на производство и протестировать образцы на месте.
Мы решили, что Кирилл поедет. Ему дали все возможные виды школьных тетрадей (12, 18, 24, 48 листов с разными обложками) и отправили в командировку.
Кириллу сразу же подарили первый образец планшета.
Прошито криво, но работает! Практически каждый день завод изготавливал новый образец, исправляя недостатки вчерашней версии.
Было много мелких деталей, которые пришлось изменить: например, слот для ноутбука на самом деле оказался меньше ширины стандартного ноутбука, и вообще находился не на том месте, где должен быть.
Покровный материал был приятным на ощупь, но тонким, поэтому через пару дней порвался.
Другой был более плотным, но грубым.
У третьего был отвратительный запах.
Папка с образцами материалов.
Выбрать работу непросто.
Там чай в банках, если что :) И одной из самых серьезных проблем оказалось то, что магниты, которыми мы хотели закрепить ноутбук, глушили сигнал электромагнитной сетки.
И если вы писали в том месте, где находился магнит, на экране ничего не появлялось.
Когда мы попросили вставить более слабые магниты, чехол стал плохо фиксироваться и начал соскальзывать.
Но китайские инженеры все же нашли выход: выбрали неодимовые магниты определенной формы, помехи от которых были минимальными.
Мы запросили драйвера, но вместо этого получили некомпилированный код
Пока Кирилл в Китае общался с заводом, фронтенд-разработчик Антон, автор той самой онлайн-доски по математике, сидел в Москве и пытался раздобыть у китайских коллег драйвера, которые бы работали по нужному нам сценарию.
Даже кодировка должна быть похожа на иероглифы) Нам было важно, чтобы устройство работало корректно сразу после подключения.
Все сценарии с кучей всплывающих окон, флажками разрешений и т. д. усложняли работу учащихся — мы хотели этого избежать.
В самом начале вместе с первыми образцами нам прислали SDK, который использовал устаревшую технологию ActiveX для работы в браузере под Windows. Потом был SDK и драйвер, работавший через WebSocket. Но почему-то оно было только для Windows, а просьба написать его для macOS поставила китайского разработчика в тупик.
В итоге парень просто отправил исходники в Xcode. Еще минусом было то, что при установке этого драйвера появлялись какие-то дополнительные окна, либо он вообще не видел устройство.
В идеале для нас все должно было бы работать в Chrome через WebUSB API, потому что здесь задействован знакомый пользователю сценарий, когда нужно разрешить браузеру включать камеру и микрофон.
А вот WebUSB в целях безопасности запрещает работу с клавиатурой и мышкой (и всем HID-устройства ), чтобы его не использовали как шпиона и не украли пароли.
Мы попросили аппаратно отключить поведение планшета в качестве мыши — вместо этого по умолчанию он должен отображаться как класс «другие устройства».
Донести эту идею китайскому разработчику было очень сложно, но все же удалось.
Правда, для версий Windows ниже семёрки драйвера всё же нужно установить, но это гораздо проще.
По сути, это просто сертификат, который позволяет подключаться к устройству в браузерах через WebUSB. Тогда это было уже просто: получаем с планшета размер, пропорции, координаты точек и силу нажатия.
Остается только отобразить все на нашей браузерной платформе.
Полученный код «нашего драйвера» занимает пару экранов.
Доска — это область в классе, на которой можно рисовать с помощью мыши и графического планшета.
Это обертка над библиотекой Fabric.js с самодельными инструментами — математическими фигурами и графиками.
Fabric.js отображается в браузере в , но внутри он хранит все состояние рисунка в векторном формате, близком к svg. В этом формате мы отправляем все нарисованное через WebSocket (Pusher) и оно синхронизируется между всеми онлайн-пользователями урока.
API Fabric.js позволяет рисовать по координатам.
Это не сканирование.
Нет распознавания фотографий.
Не распечатка.
Не очень похожий рисунок.
Через WebUSB слушаем координаты планшета и силу нажатия.
Если этого было достаточно, то проводим линию между текущей и предыдущей координатами.
Аппаратное обеспечение имеет встроенную чувствительность 8192 градусов давления.
Антону пришлось немного повозиться, настроив этот параметр так, чтобы видимая чернильная линия на бумаге соответствовала программной строке.
Как мы проводили эксперименты на детях (ни один ученик не пострадал)
В январе 2020 года мы получили первую партию планшетов для испытания в бою — и сразу решили испытать их на групповом занятии.Только что мы запустили формат, когда к уроку присоединяются до 10 учеников, а преподаватель работает как в классе: объясняет тему, дает задания, проверяет решения и анализирует ошибки.
Групповое занятие на примере английского языка Пока все выполняют задания, преподаватель переключается между учениками и видит их доски с письменным решением.
Для теста мы выбрали группу девятиклассников, готовившихся к ОГ?.
Вот отзыв преподавателя: 
"Наше счастье зависит от вашего успеха" (с) Так мы поняли, что все было не зря.
Студенты писали в тетрадях как обычно, ни на что не отвлекаясь и даже не задумываясь о том, как изображение переносится в браузер.
Больше всего их волновало, будут ли ручки разного цвета - дети такие дети :)
Остается один вопрос: как растаможить таблетки во время пандемии?
Мы были готовы запустить серийное производство и импортировать устройства в Россию.Наш руководитель проекта Ульяна никогда раньше не сталкивалась с производством, Китаем и растаможкой.
Даже отдельно.
И тут ее ждал джекпот. И даже в разгар событий 2020 года.
Эта сторона отвечала за доставку в аэропорт Гонконга: представитель компании-подрядчика проверил груз, подписал документы и передал их перевозчику.
Все прошло быстро и гладко.
Но когда груз прибыл на российскую таможню, Ульяну чуть не задавила бюрократия: ей пришлось собрать внушительную папку с документами.
Возможно, кому-то это покажется банальным, но мы с этим столкнулись впервые.
Хэппи-энд: внутри этой коробки находится планшет с ручкой и крышкой.
Красиво упаковано, как мы и хотели! Прошло почти 2 года с момента возникновения идеи планшета.
Мы сделали это вовремя рефакторить математическая платформа и задумай запуск ряда изделий на его основе .
Нам удалось переименовать проект Skysmart из Skyeng. И аудитория значительно выросла.
И сделали оригинальный планшет, адаптированный под наши задачи на основе контрактного производства – и это при том, что у устройства будет несколько тысяч пользователей.
Кто-то скажет, что это слишком сложно.
И мы просто скажем: «Мы это сделали».
И это был очень крутой опыт. Теги: #Производство и разработка электроники #Управление проектами #ИТ-компании #ИТ-компании #Разработка сайтов #разработка электроники #Планшеты #грабли
-
Фичино, Марсилио
19 Oct, 24 -
Мировой Рынок Ipo Упал На 31%
19 Oct, 24 -
Красивая, А Главное Удобная Тема Gmail
19 Oct, 24 -
В Сша Запрещены Кликовые Убийства
19 Oct, 24 -
Интересный Случай.
19 Oct, 24
