[TL;DR: Во второй части серии я настраиваю исходный механизм рекомендаций, добавляю дополнительный источник данных и пишу клиент Angular для использования данных.]
В статье ” Создание механизма рекомендаций, подобного Amazon, с использованием Slash GraphQL ” недавно выпущенный Slash GraphQL размещенный сервер GraphQL от Graph использовался в качестве системы записи для механизма рекомендаций на основе Java. Графическое хранилище данных отлично подходит для такого варианта использования, как механизм рекомендаций, где взаимосвязи между данными так же важны, как и сами данные. А использование Slash GraphQL позволило мне быстро запустить и запустить полностью управляемую базу данных GraphQL с минимальными усилиями.
В статье также содержится информация о том, как семейство алгоритмов совместной фильтрации Slope One может быть использовано для прогнозирования уровня интереса к продукту на основе существующих рейтингов. Короче говоря, алгоритм оценки Slope One будет лежать в основе механизма рекомендаций.
Статья завершилась предоставлением URL-адресов RESTful в механизме рекомендаций Spring Boot для предоставления рекомендаций на основе данных, хранящихся в Dgraph Slash GraphQL Предложение услуг SaaS.
В этой статье мы немного продвинемся вперед и представим клиент Angular для представления этих данных в более удобном для использования виде… и, надеюсь, оценит.
Усовершенствования в области данных
В то время как в оригинальной статье было показано, как будет работать механизм рекомендаций, мне показалось, что моя исходная выборка данных дала слишком много оценок для нескольких клиентов из выборки. Кроме того, я чувствовал, что мне нужно расширить количество исполнителей, используемых для этого второго примера.
В результате я очистил данные в моей существующей базе данных Slash GraphQL и начал все сначала. Хотя это было бы легко обновить, базовую схему не нужно было менять для этого упражнения, и она осталась такой, как показано ниже:
type Artist {
name: String! @id @search(by: [hash, regexp])
ratings: [Rating] @hasInverse(field: about)
}
type Customer {
username: String! @id @search(by: [hash, regexp])
ratings: [Rating] @hasInverse(field: by)
}
type Rating {
id: ID!
about: Artist!
by: Customer!
score: Int @search
}
Новый список элементов исполнителя был добавлен с использованием следующей мутации в пользовательском интерфейсе Slash GraphQL:
mutation {
addArtist(input: [
{name: "Eric Johnson"},
{name: "Genesis"},
{name: "Journey"},
{name: "Led Zeppelin"},
{name: "Night Ranger"},
{name: "Rush"},
{name: "Tool"},
{name: "Triumph"},
{name: "Van Halen"},
{name: "Yes"}]) {
artist {
name
}
}
}
Также были вставлены обновленные записи клиентов:
mutation {
addCustomer(input: [
{username: "David"},
{username: "Doug"},
{username: "Jeff"},
{username: "John"},
{username: "Russell"},
{username: "Stacy"}]) {
customer {
username
}
}
Используя ту же мутацию, что и в оригинальной статье, рейтинги были добавлены в соответствии с приведенной ниже таблицей:
Представляем H2 (в памяти) База данных
Для этой второй статьи я хотел представить дополнительный источник данных. Это высветило бы реальность того, что информация и факты часто поступают из нескольких источников данных. Я решил использовать H2 – легковесную базу данных Java с открытым исходным кодом и встроенной памятью. Базу данных H2 можно быстро и легко добавить в Spring Boot, используя следующую зависимость Maven:
com.h2database h2 runtime
База данных H2 предоставит дополнительную информацию для записей исполнителей, хранящихся в Slash GraphQL. Записи будут храниться в таблице с именем Artists, а первичным ключом будет просто имя исполнителя:
@Data
@Entity
@Table(name = "artists")
public class Artist {
@Id
private String name;
private String yearFormed;
private boolean active;
private String imageUrl;
}
Файл data.sql, содержащий информацию для этой таблицы, был создан и сохранен в папке resources репозитория Spring Boot. В результате при каждом запуске сервера будет заполняться база данных H2.
Развитие механизма рекомендаций
Чтобы увидеть значение в механизме рекомендаций, результаты, предоставляемые механизмом, должны включать всю необходимую информацию, касающуюся рекомендации. Чтобы удовлетворить эту потребность, полезная нагрузка рекомендаций в ответе была обновлена, чтобы включить больше атрибутов исполнителя, как показано ниже:
{
"matchedCustomer": {
"username": string
},
"recommendations": [
{
"name": string,
"yearFormed": string,
"active": boolean,
"imageUrl": string,
"rating": number,
"score": number
} ...
]
}
Механизм рекомендаций нуждался в усовершенствованиях, чтобы принимать две дополнительные формы метаданных:
- выбранный в данный момент исполнитель
- текущий клиент
Зная выбранного в данный момент исполнителя, механизм рекомендаций будет знать, чтобы исключить любые рекомендации для того же исполнителя. Кроме того, возможность узнать текущего клиента избавляет от необходимости просто выбирать клиента наугад.
Представляем Угловой клиент
Чтобы быстро создать клиент, я решил использовать Angular CLI . Angular CLI – это интерфейс командной строки, который позволяет быстро и легко создавать и выделять компоненты, службы и базовые функциональные возможности, позволяя разработчикам сосредоточиться на написании бизнес-логики для удовлетворения своих текущих потребностей. Это был идеальный выбор для моего набора навыков.
За короткий промежуток времени я смог использовать Angular CLI для представления следующих элементов:
- службы, подключенные к объектам Исполнителя, Клиента и рекомендации в Spring Boot
- компонент list-artists для предоставления простого списка исполнителей
- просмотр-компонент исполнителя для отображения рекомендаций для активного клиента и исполнителя
Благодаря сильному сообществу Angular и npm я даже смог включить графическое решение с рейтингом звезд, используя пакеты angular-star-rating и css-star-rating с несколькими командами и базовыми изменениями конфигурации. Конечно, также были включены пакеты @ng-bootstrap и bootstrap, что сделало стиль немного более презентабельным.
Использование клиента Angular
После настройки клиента Angular и запуска механизма рекомендаций Spring Boot для запуска приложения можно использовать следующий URL-адрес:
http://localhost:4200
Когда приложение загружается, отображается следующий экран:
Список (из компонента список исполнителей) предоставляет информацию как из базы данных H2, так и из средних оценок из базы данных Dgraph Slash GraphQL.
Одиночный щелчок по записи Rush вызывает компонент view-artist и отображает информацию, как показано ниже:
В этом случае я выбрал Рассела в качестве текущего клиента. В верхней части экрана отображается та же информация, с изображением полосы в правой части. Ниже приведена информация из API рекомендаций в службе Spring Boot.
Результаты рассчитаны на клиента по имени Рассел и намеренно избегают давать рекомендации для группы по имени Раш.
Если клиент изменен на Стейси, обновляется тот же экран, как показано ниже:
В то время как данные в верхней половине экрана остаются прежними, раздел рекомендаций полностью отличается и предназначен для вновь выбранного пользователя.
Вывод
В этой статье механизм рекомендаций был подключен к клиентскому приложению и дополнительно доработан, чтобы обеспечить большую ценность, чем то, что было представлено в оригинальной статье.
Хотя этот примерный дизайн очень прост, используемые концепции и подходы могут быть включены в полнофункциональный механизм рекомендаций.
Использование Dgraph Slash GraphQL и Spring Boot, безусловно, способствовал очень небольшому времени выхода на рынок. Они позволяют легко создавать прототипы, анализировать и внедрять новые проекты на основе извлеченных уроков.
Для тех, кто заинтересован в полном исходном коде, пожалуйста, ознакомьтесь с репозиторием slash-graph-ql-angular GitLab/| .
Оригинал: “https://dev.to/mbogan/building-a-recommendation-engine-using-slash-graphql-part-2-4hen”