В начале блокировки я оценил свои технические навыки и понял, что их довольно не хватает - конечно, я раньше работал с некоторыми веб-технологиями для рабочего проекта, и я пассивно проходил онлайн-курс по разработке Swift, но У меня не было ничего конкретного, чтобы показать это участие. Вот почему я решил бросить вызов самому себе и создать приложение с полным стеком в течение мая, чтобы получить больше опыта с технологиями отраслевого уровня (с дополнительным преимуществом улучшения моего портфеля работ - вы можете проверить это здесь ).
Результатом этого вызова стало Настроение. веб-приложение, созданное на Vue.js, включающее обнаружение выражений и Spotify API. Это приложение стало счастливым результатом того, что мне нужна была новая музыка, а также того факта, что я ранее прошел курс Coursera по TensorFlow.js, который я еще не освоил. Он принимает входные данные веб-камеры о лице пользователя, определяет его выражение лица и использует это выражение в вызове API, чтобы рекомендовать плейлисты. Он был развернут с использованием AWS S3 и CloudFront и использует Serverless для размещения серверной части Express.js. В настоящее время это демонстрация концепции, ограниченная выражениями, предоставляемыми faces-api.js.
В этой статье я подробно расскажу о реализации клиента и сервера и расскажу о некоторых проблемах, с которыми я столкнулся при создании приложения. Я также даю ссылки на полезные ресурсы для всех, кому это интересно.
Архитектура
Ниже представлена архитектура приложения, а также начальный каркас, который я создал в Sketch. Я считаю, что использование каркаса позволяет мне визуализировать иерархию и взаимодействие различных компонентов моих страниц. Архитектура позволяет то же самое, за исключением понимания моих запросов и данных, которые я ожидаю от этих запросов.
Краткое изложение: пользователь делает лицо перед веб-камерой, которая фиксирует выражение лица и запускает модели face-api.js в браузере. Эти модели возвращают выражение, которое сопоставляется с «настроением», которое затем используется для запроса Spotify API. Spotify возвращает ответ JSON, содержащий несколько плейлистов, и эти плейлисты отображаются во внешнем интерфейсе Vue.
Клиентская реализация
Клиент был создан с помощью интерфейса командной строки Vue.js и стилизован с помощью BootstrapVue. Одно из самых больших преимуществ Vue - это архитектура на основе компонентов, которую он продвигает, что позволило мне создавать компоненты для различных элементов внешнего интерфейса, в которых в домашнем представлении будут размещаться:
- Компоненты веб-камеры
- Компоненты верхнего и нижнего колонтитула
- Компонент плейлиста
При монтировании объекта Home я создал метод инициализации для настройки моих моделей обнаружения лица и определения выражения. При нажатии кнопки захвата событие отправляется из элемента веб-камеры в родительский элемент, который затем вызывает метод getEmotion (). Это передает захваченное изображение в качестве входных данных для модели, которая возвращает undefined, если выражение не обнаружено.
В конце этого потока изображение соответствует выражению, которое задается как настроение пользователя. Затем это настроение передается в качестве опоры компоненту рекомендаций, который отслеживает изменения в опоре и обращается к Spotify API.
API возвращает json из 9 списков воспроизведения, которые привязаны к моему компоненту Playlist и отображаются динамически с использованием цикла v-for.
Реализация сервера
Сервер был построен с использованием Express.js и использует оболочку узла для Spotify Web API. Он содержит единственную конечную точку / рекомендовать, которая ожидает, что запрос запроса будет содержать строку настроения, и использует это настроение при вызове Spotify Web API.
Развертывание
На мой взгляд, это была самая захватывающая часть проекта, так как это был первый раз, когда я когда-либо создавал / развертывал какое-либо приложение. Я нашел полезное руководство от Okta, в котором рассказывается о развертывании SPA с использованием AWS S3, полное описание которого вы можете найти здесь.
Я не буду вдаваться в подробности процесса, так как связал его, но он включает:
- Запуск npm run build для создания моей папки dist (статические файлы, необходимые для обслуживания веб-сайта)
- Создание корзины Amazon S3 для статического хостинга веб-сайтов и настройка соответствующих политик корзины
- Развертывание каталога сборки с помощью aws-cli
- Создание раздачи CloudFront
Что касается сервера, я использовал Serverless для развертывания бэкэнда Express - термин serverless используется для описания «приложения, работающего в облаке, которое не требует от разработчика выделения выделенных серверов для запуска кода».
В этом процессе участвовали:
- Бессерверная установка с помощью npm
- Создание бессерверной конфигурации в серверном приложении
- Развертывание указанной бессерверной конфигурации
В результате создается конечная точка в форме ниже, которую затем можно использовать в ваших вызовах Vue API. ({proxy +} - это подстановочный знак, означающий, что любая конечная точка с корнем / dev / может быть обслужена - при условии, что она учтена в коде вашего сервера, например, / dev / Recommended, / dev / check и т. д.
endpoints:
ANY - https://YOUR_END_POINT.amazonaws.com/dev/{proxy+}Я использовал файл dotenv, чтобы отслеживать свои конечные точки, и убедился, что мой производственный код вызывает эту конечную точку.
Демо
Вот гифка, показывающая, как работает настроение. Я буду работать над добавлением индикаторов прогресса и обработкой ошибок, чтобы улучшить взаимодействие с пользователем.
Проблемы, с которыми я столкнулся
- Интеграция Faces-api
Некоторое время я боролся с интеграцией детектора выражений, но затем из документации понял, что я использовал версию tfjs-core, для которой она не была создана. Кроме того, я неправильно обрабатывал свои ошибки в случаях, когда лицо не было обнаружено, поэтому, хотя модель обнаруживала, она возвращала undefined (что испортило остальную часть процесса).
2. Ошибки CORS
CORS (Cross-Origin Resource Sharing) - это механизм, который позволяет запрашивать ограниченные ресурсы на веб-странице из другого домена за пределами домена, из которого был обслужен первый ресурс. - Википедия
В этой теме может быть отдельная статья, но в основном при создании приложения доступ к ресурсам, выходящим за рамки указанного приложения, по умолчанию не включен. Ошибки CORS обычно возникают, когда указанный механизм не включен, и если вы используете Node, использование пакета cors может сэкономить вам немного времени.
Когда дело доходит до Serverless и AWS, это становится немного сложнее, но существует множество ресурсов, документирующих процесс обеспечения разрешения CORS для развернутого приложения.
Вывод
Процесс создания этого приложения был действительно хорошим (иногда разочаровывающим) опытом обучения. От того, как я узнал, как правильно передавать реквизиты и общаться между родителем и потомком в Vue.js, до того, как мне стало удобнее проверять документацию и известные проблемы библиотеки - я знаю, что принял правильное решение о том, как проводить свободное время в мае. (после того, как в марте началась изоляция от Netflix, ха-ха).
Этот процесс также помог мне демистифицировать процесс разработки приложения и расширил мое знакомство с отраслевыми стандартными инструментами, такими как AWS - о чем я постоянно читал, но на самом деле никогда не пробовал.
Да, это было определенно сложно, но тот факт, что мне удалось, наконец, довести проект до конца, также кажется мне полностью полезным. Мои основные выводы из этого заключаются в том, что задачу, которая кажется непосильной, всегда можно решить, и постоянная работа над ней (избегая склонности к чрезмерному обдумыванию) творит чудеса как для прогресса, так и для уверенности в себе.
А вот и следующая задача - GraphQL всегда заинтриговал меня!
