Как создать веб-приложение для дисплея Meta Ray-Ban

Создание веб-приложения для Meta Ray-Ban Display начинается с привычных веб-инструментов, но макет и элементы управления должны работать на экране внутри ваших очков. В этом руководстве на примере простого списка покупок объясняется, как создать автономное веб-приложение, протестировать его взаимодействие, опубликовать его в интернете и открыть на очках Display без создания отдельного мобильного приложения. Пример начинается с трех файлов проекта: index.html, style.css и app.js. HTML предоставляет заголовок, пункты списка и текст прогресса. CSS управляет читаемостью и интервалами. JavaScript делает элементы интерактивными, обновляет счетчик выполненных действий и сохраняет каждый выбор с помощью localStorage, чтобы список мог сохранять свое состояние при повторном открытии. В видео также объясняется, как дополнительные инструменты Meta Web App AI Toolkit и UI Toolkit могут помочь в более сложных проектах, хотя ни один из них не является обязательным для базового HTML-приложения. Обычного мобильного макета недостаточно для отображения на линзах. В Meta Ray-Ban Display используется аддитивный экран размером 600 на 600 пикселей, где темные области становятся прозрачными, а яркие графические элементы остаются видимыми на фоне окружающего пространства. Поэтому дизайн должен обладать высокой контрастностью, достаточно крупным текстом, четким индикатором фокусировки и элементами управления, которые удобно размещаются в компактном режиме. Адаптивная верстка важна, поскольку одна и та же страница должна быть удобна для использования в настольном браузере при разработке. Важное отличие – взаимодействие с пользователем. Веб-страница, управляемая мышью, может выглядеть корректно, но быть неудобна для использования с очков. В контрольном списке используются фокусируемые HTML-кнопки и обработка ввода с помощью клавиш со стрелками, а клавиша Enter активирует текущий выбор. Эти привычные события клавиатуры предоставляют практичный способ разработки и тестирования навигации для поддерживаемых элементов управления очков, включая Meta Neural Band. В примере намеренно избегаются разрешения и внешние API, которые не требуются для локального контрольного списка. Перед установкой приложения в руководстве рассматривается тестирование с помощью Meta Ray-Ban Display Web App Simulator, расширения для Chrome, которое воссоздает область отображения и ввод с помощью клавиш со стрелками. Вы можете проверить, что каждый элемент доступен, завершенные элементы обновляются корректно, счетчик прогресса остается точным, а сохраненные варианты сохраняются после перезагрузки. После успешного прохождения этих проверок три файла можно опубликовать на статическом веб-сайте по общедоступному HTTPS-адресу. Заключительный этап — подключение размещенного веб-приложения к Meta Ray-Ban Display через мобильное приложение Meta AI. Включив режим разработчика, откройте настройки очков Display, найдите «Подключения приложений» и «Веб-приложения», добавьте имя приложения и HTTPS-адрес. В результате вы получите небольшое, независимо размещенное приложение, предназначенное для запуска непосредственно на очках. Для тестирования на реальных устройствах используйте сопряженную модель Display; обычные очки Ray-Ban Meta не имеют экрана, необходимого для отображения интерфейса. Отказ от ответственности Для установки веб-приложений вручную требуется совместимое программное обеспечение Meta Ray-Ban Display и режим разработчика. Названия меню Meta AI и доступ к функциям разработчика могут изменяться с обновлениями приложения, поэтому, если отсутствует опция «Веб-приложения», подтвердите текущие инструкции по настройке.