Здесь, в Elegant Seagulls, наша команда разделена между нашим офисом в Маркетте, Мичиган и другими офисами в Соединенных Штатах, что делает Slack нашим жизненным каналом для общения. Фактически, мы отправили более 22 тысяч сообщений только за последние 30 дней среди 11 из нас. Из этих 22k сообщений - ссылки на веб-сайты, которыми мы поделились либо в качестве вдохновения для дизайнерской работы, либо в качестве полезных трюков программирования, либо потому, что сайт просто выглядел потрясающе.

Как вы можете себе представить, с таким объемом сообщений было очень легко потерять из виду замечательную вдохновляющую ссылку просто потому, что никто не хочет прокручивать так далеко в нашей истории сообщений Slack. Несколько месяцев назад моему коллеге Бретту пришла в голову идея объединить все общие ссылки в одно, простое в использовании и доступное для поиска место - таким образом, начался Проект ссылок Gulls.

Обдумывая идеи о том, на каком языке программировать проект и какие функции добавить, мы договорились, что будем использовать различные библиотеки и сторонние инструменты, которые мы использовали в предыдущих клиентских проектах.

Наш первоначальный список выглядел так:

Мы выбрали AirTable, потому что было бы проще управлять данными, а не создавать интерфейсную панель администратора. Наш первоначальный прототип доказал, что данные, которые мы хотели сохранить, не будут работать с AirTable, и перешел к программе базы данных, ориентированной на документы, MongoDB. И наш текущий интерфейсный сайт, и сервер Mongo находятся в капле DigitalOcean.

Прототип

Обмен ссылками должен быть простым, поэтому мы выбрали простую команду Slack с косой чертой. Чтобы поделиться ссылкой, вы можете ввести следующую команду в любом канале или прямом сообщении:

Затем Slack отправит объект POST в наш API, чтобы начать процесс обмена.

Прежде всего, мы должны запустить URL-адрес, предоставленный через Microlink API, чтобы получить следующие метаданные:

site_title, site_image, site_description

и возвращать ошибку, если сайт не существует или отсутствует большая часть метаданных.

Затем мы будем использовать Slack API, чтобы получить полное имя участников и проверить, не является ли ссылка дубликатом. Если мы дойдем до этой точки, ссылка (URL-адрес, метаданные, имя участника и теги) будет сохранена и проиндексирована в Algolia. Чтобы в полной мере использовать преимущества Algolia и перспективные возможности для функции поиска, мы добавили «счетчик кликов» для каждой общей ссылки в Algolia (подробнее об этом позже).

Затем ссылки будут отображаться на нашем веб-сайте с использованием макета карточки. Карты загружаются по 12 за раз в стиле бесконечной прокрутки с использованием аккуратного компонента нумерации страниц, который написал Бретт.

Компонент вызывает конечную точку данных нашего API, когда пользователь попадает в определенную путевую точку, и добавляет ее к текущим ссылкам.

В интерфейсе вы также можете щелкнуть тег, чтобы отфильтровать ссылки. Фильтрация выполнялась через отдельную конечную точку API, которая извлекала данные непосредственно из Algolia. Это позволяет нам сортировать ссылки по тегам и популярности, используя «количество кликов», о котором я упоминал ранее.

Обеспокоенность

Нашей проблемой №1, озвученной нашим креативным директором Беном Джонсоном, было то, что часто случается со всеми нами, особенно с мобильными телефонами: слова с орфографическими ошибками.

Здесь в игру вступили интерактивные сообщения Slack. Мы добавили в Atom модуль проверка орфографии, чтобы проверять теги, сопровождающие каждый общий ресурс, и при любом слове с ошибкой возвращать пользователю Slack следующее интерактивное сообщение:

Вы можете отменить, использовать в любом случае или выбрать исправление орфографии.

Следующей нашей заботой была команда Slack с косой чертой. Насколько это просто? Смогут ли наши коллеги запомнить команду (и то, как разделить аргументы) достаточно быстро, чтобы действительно захотеть ее использовать?

Вместо этого мы выбрали диалоговое окно Slack, сделав процесс более лаконичным и простым (посмотрите, как это делается в нашем #inspire канале Slack ниже).

Наконец, проблема с мета-имиджем. Первоначально мы сохраняли URL-адрес изображения в нашей базе данных Mongo и вызывали его внешний интерфейс. В связи с этим возник вопрос: «Что происходит, когда этот сайт изменяет или удаляет свое мета-изображение?». Мы также не хотели использовать горячую ссылку.

У нас было два варианта: 1) сохранить изображение на нашем сервере или 2) изменить размер, оптимизировать и загрузить в AWS. Мы выбрали вариант №2, чтобы мы могли использовать другой сторонний сервис. Это также помогло ускорить загрузку страницы.

Версия 2 и будущее

Версия 2 была выпущена со всеми функциями, о которых говорилось выше, а также со столь необходимой функцией поиска.

Мы также хотели привязать общую ссылку к коллеге и поэтому добавили «{user} shared» в сообщение общего доступа Slack. Front-end мы создали новую страницу для всех акций пользователя.

Поскольку ошибки действительно случаются, мы настраиваем систему сообщений об ошибках, которая отправляет ошибку (вместе с назначенными уровнями приоритета) в наш выделенный резервный канал «Gulls Link».

После ввода проекта в эксплуатацию мы иногда замечали, что метаданные, возвращаемые Microlink API, не являются полными, и поэтому нам приходится вручную обновлять поля в базе данных. Чтобы обеспечить правильную индексацию Algolia, мы создали команду с косой чертой / reindex, которая берет все ссылки в базе данных и переиндексирует Algolia с любыми измененными данными. В долгосрочной перспективе это будет изменено на пакетную систему очередей.

В будущем мы будем обновлять способ поиска и извлечения ссылок из Algolia. Я упомянул «счетчик кликов», но в настоящее время он не используется. Наш план состоит в том, чтобы увеличивать счетчик каждый раз, когда пользователь нажимает на ссылку, тем самым повышая его «популярность». Мы также начали индексировать теги в отдельный индекс Algolia и также будем отслеживать клики по ним.

TL;DR

Мы создали простой метод обмена вдохновляющими ссылками в наших каналах Slack для хранения для дальнейшего доступа на интерфейсном сайте.