Как вы можете построить свой свободный, серверусный комментарий

Автор оригинала: FreeCodeCamp Community Member.

Shaun Persad

Гибкое моделирование контента Cattiful выходит далеко за пределы блога. Вот как вы можете использовать кондиционеру и NetLify, чтобы создать вложенную систему комментариев, которая легко умерена и развертываю.

Мотивация

Я нахожу большинство систем комментирования, чтобы быть … не хватает. Disqus часто может быть медленным для рендеров, и их поведение отслеживания пользователя не имеет лучшей репутации. Между тем, плагин комментариев Facebook довольно хороший, но, конечно, ограничен пользователями Facebook.

То, что я действительно хотел, была родная скорость и подход к вложенным комментированным и модератором, принятым сайтами, такими как хакерские новости и инди-хакеры, но мне нужно было портативно для нескольких проектов.

Там только что не было здорово, поэтому я решил построить свой собственный, с моим списком функций:

Бесплатно
Низкий барьер для входа – Минимальные шаги, необходимые для отправки комментариев
Низкое обслуживание – не без вести, чтобы не беспокоиться о хостинге или масштабировании
Легко модерация – Используйте приборную панель для выполнения Crud На комментарии
PEFORTANT – Super-Fast, чтобы появиться на странице
Гибкий – Пользователи должны быть в состоянии войти через несколько платформ
Мощный – Комментарии должны иметь интеллектуальные функции форматирования
Высокий комментарий Качество – Пользователи могут расширить комментарии
Подписки – Пользователи могут получать уведомления, когда их комментарии отвечаются на

В течение этой серии мы построим систему комментариев, которая включает в себя каждый из вышеуказанных аспектов.

План

Наш стек изначально включает в себя:

Кончальный Как приборная панель базы данных и модерации
AWS LAMBDA через NetLify Как наш спиной
Реагировать на фронт

Мы создадим компонент React для обслуживания в качестве нашего окна комментариев и снабжать его возможностью сделать вызов API Containful для получения комментариев при необходимости. Он также сможет сделать вызов API для нашей функции Lambda, чтобы опубликовать комментарий к кончальному.

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

Кстати, вышеуказанный стек бесплатный! Ну, в основном. Если вы не собираетесь делать более 10 000 комментариев, это бесплатно. Кроме того, я не связан с любыми из этих компаний … Я просто люблю свои вещи:)

Удовлетворены за 10 секунд

Если вы еще не знакомы с кончальными и Как это работает Это «безголовый» (API-приводящий) CMS. Вы можете моделировать свой контент с различными полями и типами поля, а затем создать контент на основе этих моделей. Вы можете создать свой интерфейс, однако, как вам нравится, и запрашивайте ваши данные, используя их API. Это супер гибкий, а их приборная панель довольно приятно использовать. Это в основном самое лучшее, что произойдет с CMS с, ну, когда-либо?

Я уже использовал Containful для моих сообщений в блоге, поэтому я задавался вопросом, может ли быть жизнеспособным к комментариям? Я рад сообщить, что ответ да! Тем не менее, некоторые из предметов в моем желаний не совсем не работают, используя просто Кончальный. Но не волнуйтесь, мы доберемся туда … в последующих постах этой серии.

Мы будем использовать Containful, потому что:

Гибкое моделирование данных
Удобный API.
Модерация через панель инструментов
Вы уже можете использовать его для вашего сайта/блога, который нуждается в комментариях

NetLify за 10 секунд

Я думаю, что NetLify имеет самый приятный опыт развертывания для приложений в интерфейсах. Он ссылается на вашу репо GitHub и устанавливает вас, чтобы постоянно развернуть статический сайт для хостинга, поддерживающего CDN. У них также есть Функции NetLify , что позволит вам развернуть aws лямбда без какой-либо боли возиться в aws.

Вы можете начать работу в их документы , но, честно говоря, их приборная панель настолько проста в использовании и понимание, я рекомендую только Регистрация в и тыкать вокруг.

Мы будем использовать NetLify, потому что:

Безболезненная интеграция aws лямбда
Вы уже можете использовать его для вашего сайта/блога, который нуждается в комментариях
Если вы еще не используете его, вы все равно можете развернуть функции лямбда, которые мы создаем для самого AWS

Подожди, нет «реагировать за 10 секунд»?

Я не знаю, достаточно ли 10 секунд, чтобы сделать справедливость реагирования. Если вы еще этого не узнали, вы должны! Но пропустите материал Redux и Flux. Скорее всего, вам не нужно ничего из этого (но это еще одна тема в другое время).

Моделирование контента в кончаще

Сейчас до бизнеса.

Есть два разных подхода, которые мы могли бы взять в себе, как мы обращаемся к нашим пользователям: Autheness и войти в систему Комментирование:

AUTOMEND – Кто-нибудь может оставить комментарий, просто поставляя их имя
Войти в систему – только пользователи, которые аутентифицируются в какой-то системе auth

Я предпочитаю войти в комментию, потому что на мой взгляд, разговоры, как правило, более цивилизованы. Кроме того, вы склонны избегать спама. На флэйпсиде барьер для создания комментария немного выше.

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

Независимо от того, мы собираемся сначала надо Создать контент модель представлять наши комментарии.

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

Модель контента комментария

Это модель в основе нашей системы комментариев. Комментарии должны иметь четыре поля:

Тело

Фактическое тело комментария
Отметьте это как входное название
Не стесняйтесь также устанавливать максимальное и/или минимальное значение на его длину

Автор

Уникальный идентификатор, представляющий пользователь, который разместил этот комментарий.
Для неоднозначных комментариев вы бы использовали короткий текст и заполните имя автора в этой области
Для зарегистрированных комментариев в этом поле станет ссылкой на предстоящую модель комментариевутюра

Предмет

Уникальный идентификатор сообщения блога (или эквивалент), к которым принадлежат эти комментарии
Это также может быть URL страницы
Для максимальной гибкости я решил не предполагать, что вы храняте свои сообщения в блоге в Containful, иначе это будет ссылочное поле вместо короткого текста

Сортировка

Если этот комментарий отвечает на другой комментарий, мы ссылаемся на этот комментарий здесь
Это поле – это то, что позволяет нам создавать вложенные комментарии

Реализация невозможного комментирования

Для этой реализации мы хотим, чтобы пользователь ввести свое имя, прежде чем они смогут опубликовать комментарий. Я рекомендую выполнить начальную прочитанную по следующим шагам, а затем выяснить окончательный демонстрационный проект в конце, чтобы увидеть, как все это происходит вместе.

Внешний интерфейс

Теперь, когда наш комментарий сделана, пришло время создавать наш комментарий. Хорошая новость заключается в том, что я уже сделал общий «комментарий Box». Это разработано как Низкий заказ Компонент, где вы обертываете более высокий порядок Компонент вокруг него, чтобы обрабатывать вытеснение и создание кончальных комментариев, а также другой конкретной бизнес-логики.

Вы можете установить его и другие необходимые пакеты через NPM:

npm install react-commentbox contentful contentful-management --save

Github Repo Имеет список каждого опоры, который вы можете передать к нему, но минимально мы будем реализовывать и передавать их:

Получение : функция, которая возвращает обещание, которое решает на массив комментариев, заказанных из старых до новых
Normalizecomment : функция, которая отображает ваш массив комментариев к объектам, которые понимают компонент
Комментарий : функция, которая делает вызов API для создания комментариев и возвращает обещание
отключено : установить true, когда комментируя должны быть отключены
DisabledComponent : компонент, чтобы показать, когда комментирование отключено

Давайте создадим наш компонент более высокого уровня:

import React from 'react';import CommentBox from 'react-commentbox';

class MyCommentBox extends React.Component {

    state = { authorName: '', authorNameIsSet: false };

    onChangeAuthorName = (e) => this.setState({         authorName: e.currentTarget.value     });

    onSubmitAuthorName = (e) => {

        e.preventDefault();        this.setState({ authorNameIsSet: true });    };}

Обратите внимание, что компонент отвечает за установку имени автора.

Кстати, мы используем Преобразование-классовые свойства Babel Plugin, чтобы избежать утомительного настройки конструктора и привязки функций. Вам не нужно его использовать, но это довольно удобно.

Теперь нам нужно реализовать бизнес-логические реквизиты, которые React-Commentbox потребности.

Мы начнем, выявляя комментарии от Containful, и нормализуя их:

// fetch our comments from ContentfulgetComments = () => {

    return this.props.contentfulClient.getEntries({        'order': 'sys.createdAt',        'content_type': 'comment',        'fields.subject': this.props.subjectId,    }).then( response => {

        return response.items;

    }).catch(console.error);};

// turn Contentful entries to objects that react-commentbox expects.normalizeComment = (comment) => {

    const { id, createdAt } = comment.sys;    const { body, author, parentComment } = comment.fields;

    return {        id,        bodyDisplay: body,        userNameDisplay: author,        timestampDisplay: createdAt.split('T')[0],        belongsToAuthor: false,        parentCommentId: parentComment ? parentComment.sys.id : null    };};

Далее нам нужно сделать вызов API для создания комментариев:

// make an API call to post a commentcomment = (body, parentCommentId = null) => {

    return this.props.postData('/create-comment', {        body,        parentCommentId,        authorName: this.state.authorName,        subjectId: this.props.subjectId    });};

Нам также нужно попросить пользователя своего имени, прежде чем они смогут комментировать:

// will be shown when the comment box is initially disableddisabledComponent = (props) => {

    return (                                        
    );};

Тогда возьмите все это вместе в оказывать , передавая соответствующие реквизиты на React-Commentbox :

render() {

    return (                    Comments
                    
    );};

Мы также установили отключено оперить правда Пока имя автора не установлено. Это отключает Textarea и показывает DisabledComponent Форма мы сделали, чтобы получить имя автора.

Вы можете просмотреть полный компонент здесь Отказ

Возможно, вы заметили, что наши недавно созданные MyCommentBox Также ожидает, что несколько реквизит: субъект , Postdata и Contentforclient Отказ

субъект Просто какой-то уникальный идентификатор или URL-адрес блога (или эквивалентного объекта), для которых эти комментарии.

Postdata это функция, которая делает вызовы post ajax. Использование извлекать это может выглядеть так:

function postData(url, data) {

    return fetch(`.netlify/functions${url}`, {        body: JSON.stringify(data),        headers: {            'content-type': 'application/json'        },        method: 'POST',        mode: 'cors' // if your endpoints are on a different domain    }).then(response => response.json());}

Contentforclient является экземпляром клиента, который вы получаете при использовании кончальный пакет NPM (убедитесь, что вы его установили):

import { createClient } from 'contentful';const contentfulClient = createClient({    space: 'my-space-id',    accessToken: 'my-access-token'});

Вы можете получить свой идентификатор пространства в кончальной панели инструментов в разделе «Настройки пространства»> «Общие настройки».

Вы можете получить токен доступа к «Space Settings»> «API клавиш»> «Доставка контента/предварительного просмотра токенов»> «Добавить ключ API».

Затем вы можете пройти в своих реквизитах при создании MyCommentBox , как показано здесь Отказ

Спина

Мы осуществим наше /create-comment Конечная точка как функция aws lambda.

Предпосылки

Чтобы иметь возможность построить, предварительный просмотр и в конечном итоге развернуть эти функции, мы собираемся использовать удобные NetLify-лямбда пакет NPM. Он позволяет вам писать свои функции лямбда в качестве обычных функций ES6 в конкретном исходном каталоге, а затем он создает их в пустяке для Lambda и ставит их в каталог назначения, готов к развертыванию. Даже лучше, это также позволяет нам предварительно просмотреть эти функции, развертывая их локально.

Итак, вам нужно создать конкретный исходный каталог для хранения вашей функции (например, SRC/Lambda ), затем создайте netlify.toml Файл в вашем корневом каталоге. Минимально этот файл должен выглядеть так:

[build] Functions = "lambda"

Вышесказанное говорит NetLify-лямбда Какой каталог наносит свои созданные функции, то есть он построит функции в SRC/лямбда и хранить их в ./lambda Отказ Кроме того, когда приходит время для развертывания, NetLify будет смотреть в ./lambda каталог для развертывания к AWS.

Чтобы запустить функции лямбда локально, используйте следующую команду:

netlify-lambda serve

Это позволит вам запустить ваши функции на http://localhost: 9000/{Функциональное имя} Отказ

Это поведение по умолчанию, но он не совсем совпадает с тем, что произойдет в производстве, потому что он работает наши функции на другом домене с нашего интерфейса. В производстве наши функции будут доступны в том же домене, что и наш интерфейс, через URL {домен}/. NetLify/functions/{function-name} Отказ

Чтобы повторить это поведение на местном уровне, нам нужно прокси передовые звонки от /.netLify/functions/(function-name} к http://localhost: 9000/{Функциональное имя} Отказ

Выполнение этого отличается в зависимости от вашей настройки проекта. Я охвачу две популярные настройки:

Для Create-React-App Проекты, добавьте следующее на ваш Package.json :

"proxy": {        "/.netlify/functions": {        "target": "http://localhost:9000",        "pathRewrite": {            "^/\\.netlify/functions": ""        }    }}

Для GATSBY.JS Проекты, добавьте следующее на ваш gatsby-config.js :

const proxy = require('http-proxy-middleware');...developMiddleware: app => {    app.use(        '/.netlify/functions/',        proxy({            target: 'http://lambda:9000',            pathRewrite: {                '/.netlify/functions/': '',            }        })    );},

Для большинства других проектов вы можете использовать SEV WebPack SEV, который имеет Поддержка прокси Отказ

Написание нашей функции

Прежде чем мы добраться до написания кода, специфичного лямбда, мы сначала создам общую функцию для обработки большей части нашей логики. Таким образом, наш код остается портативным за пределами лямбда.

Давайте создадим CreateComment Функция:

const contentful = require('contentful-management');const client = contentful.createClient({    accessToken: process.env.CONTENTFUL_CONTENT_MANAGEMENT_ACCESS_TOKEN});

module.exports = function createComment(    body,     authorName,     subjectId,     parentCommentId = null) {

    return client.getSpace('my-space-id')        .then(space => space.getEnvironment('master'))        .then(environment => environment.createEntry('comment', {            fields: {                body: {                    'en-US': body                },                author: {                    'en-US': authorName                },                subject: {                    'en-US': subjectId                },                parentComment: {                    'en-US': {                        sys: {                            type: 'Link',                            linkType: 'Entry',                            id: parentCommentId                        }                    }                }            }        }))        .then(entry => entry.publish());};

Вы можете поставить вышеуказанную функцию где-то как Utils каталог. Он использует Управляющее управление Пакет NPM для создания и публикации нового комментариев в записи и возвращает обещание. Обратите внимание, мы указали наш ключ управления API в качестве переменной среды. Вы определенно не хотите, чтобы сложный код. При развертывании на NetLify или где-нибудь еще не забудьте убедиться, что ваши переменные среды установлены.

Вы можете получить ваш токен доступа к управлению от кончальной панели инструментов в «Space Settings»> «API ключей»> «Токены управления контентом»> «Создать личный токен».

Теперь давайте создадим нашу функцию, специфичную лямбда:

const createComment = require('../utils/createComment');

exports.handler = function (event, context, callback) {

    const { body, authorName, subjectId, parentCommentId } = JSON.parse(event.body);

    createComment(body, authorName, subjectId, parentCommentId)        .then(entry => callback(null, {            headers: {                'Content-Type': 'application/json'            },            statusCode: 200,            body: JSON.stringify({ message: 'OK' })        }))        .catch(callback);};

Поместите эту функцию в исходный каталог лямбда, и назовите файл с пути, который вы хотите, чтобы URL был, например, create-comment.js Отказ Это сделает вашу функцию доступной на URL /.netLify/Functions/Create- Отказ

Большая картинка

Чтобы проиллюстрировать наш полной настроек в интернет-концевой и задней части, я создал Проект Create-React-App Это функционирует как легко-развертываемый, полностью функциональный пример.

Обратите внимание, что в примере проекта netlify.toml Файл, есть еще несколько строк, которые вы должны добавить в свой собственный файл. Команда Рассказывает NetLify, какие команды будут работать, чтобы построить проект. Опубликовать Рассказывает NetLify, где найти статические активы, готовые к развертыванию после завершения сборки. Вы можете прочитать больше об этом файле в сети NetLify Документация Отказ

Пример проекта также легко кломируемо и развернут к вашей собственной учетной записи NetLify через удобную кнопку развертывания в README.

Если вы внесли это в свой собственный проект, отправляйтесь на Приборная панель NetLify И следуйте своим простым инструкциям, чтобы настроить репо, чтобы развернуть.

Как только он работает и работает, вы сможете начать комментировать как босс.

(Примечание: это просто скриншот, поэтому не пытайтесь нажать на него ^ _ ^)

До скорого

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

Спасибо за прочтение! – Шаун

Первоначально опубликовано shaunasaservice.com .