Как создать веб-приложение для рассылки новостей с помощью API Mailchimp.

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

Прежде чем мы начнем

Наше приложение будет состоять из страницы регистрации, которая будет подключена к серверам Mailchimp через их API. Для тех читателей, которые не знакомы с этим, Mailchimp - это платформа для автоматизации маркетинга и служба электронного маркетинга. Чтобы создать учетную запись, перейдите на страницу регистрации Mailchimp и нажмите Зарегистрироваться бесплатно.

Хватит разговоров ... давайте код!

Настройте страницу регистрации

1.Для удобства разработки мы разместим наше приложение локально:

  • Откройте командную строку и cd туда, где вы хотите создать этот новый проект (например, cd Desktop/).
  • Создайте новую папку с именем Newsletter и внутри нее создайте новые app.js, signup.html, success.htmlи failure.html.

  • Инициализировать npm (npm init -y, чтобы без вопросов инициализировать его стандартными параметрами).

  • Установите модули npm body-parser и express.

  • Откройте проект в текстовом редакторе.
  • Запросите модули npm для проекта в app.js.
  • Создайте новое экспресс-приложение и настройте его на прослушивание порта 8080.

🚨 Если вы не понимаете, о чем я говорю, обязательно ознакомьтесь с моей предыдущей статьей о том, как Настроить локальный веб-сервер.

2. Теперь нам нужно создать нашу страницу регистрации. Для простоты мы будем использовать очень популярную библиотеку HTML, CSS и JS: Bootstrap.

  • Посетите https://getbootstrap.com/docs/4.5/examples/sign-in/ и используйте ctrl + U, чтобы открыть окно с исходным кодом сайта. если вы используете Mac, то же ярлык - Command + Option + U.

  • Скопируйте и вставьте в наш signup.html.
  • Теперь нам нужно включить Bootstrap на наш веб-сайт. Для этого мы должны взять Boostrap CDN и вставить его в signup.html, заменив часть кода между двумя комментариями ‹! - Загрузочный основной CSS → и ‹! - Фавиконы →.

  • Мы также должны добавить собственный шаблон CSS. Вы можете найти код CSS сразу после ‹! - Пользовательские стили для этого шаблона →, нажав signin.css в исходном коде сайта.

  • Создайте новый документ с именем style.css и вставьте туда код.
  • Свяжите signup.html с документом style.css.
  • Давайте теперь персонализируем наш веб-сайт, изменив заголовок, часть контента и логотип.

3. Затем мы должны настроить «получить маршрут» к нашей странице регистрации:

  • Используйте app.get и укажите маршрут (в данном случае домашний маршрут «/»).
  • Добавьте функцию обратного вызова с req и res и определите ответ: res.sendFile(_dirname + “/signup.html").
  • Создайте папку с именем public и внутри нее добавьте новую папку с именем CSS и поместите туда style.css документ. Чтобы все статические файлы были собраны в одном месте, создайте также папку с именем images в общедоступной папке.

  • Добавьте app.use(express.static('public')) в файлapp.js. Таким образом, наш сервер сможет обслуживать статические файлы (как наши CSS или изображения).

4. Теперь нам нужно будет использовать Body Parser, чтобы получить данные из нашей формы регистрации.

  • Добавьте app.use(bodyParser.urlencoded({extended:true})); в файлapp.js.
  • Создайте почтовый маршрут для отправки этих данных на наши серверы с помощью body-parser:
app.post("/", function (req, res) {
const firstName = req.body.fName;
const lastName = req.body.lName;
const email = req.body.email;
})

Если вы застряли, скопируйте и вставьте полные файлы signup.html и style.css отсюда:

5. Наконец-то пришло время включить наш API.

  • Получив ключ API и ваш идентификатор аудитории, мы должны установить пакет Mailchimp NPM и потребовать его:

npm install @mailchimp/mailchimp_marketing

const mailchimp = require("@mailchimp/mailchimp_marketing");

  • Используя только что созданную const mailchimp, установите ее ключ API (который вы получили ранее) и его код сервера.
mailchimp.setConfig({
 apiKey:"YOUR API KEY",
 server: "SERVER CODE"
})
  • Определите переменную для идентификатора списка аудитории.

const listID = "YOUR AUDIENCE LIST ID";

  • Создайте объект JSON на основе введенных пользователем данных (имя, фамилия и адрес электронной почты).
  • Сделайте async function.
  • Запустите функцию.
  • Создайте и настройте файлы success.html и failure.html.
  • Перенаправьте пользователя в файл success.html, если response.status ==== “subscribed”, в противном случае - в файл failure.html в случае произошла ошибка.

Весь код для app.js файла:

Вы можете протестировать свою веб-страницу локально, набрав nodemon app.js в командной строке.

Вот как будет выглядеть наш окончательный результат:

Большой!

А теперь, если мы перейдем на https://mailchimp.com/ и нажмем Аудитория, мы увидим, что мы успешно добавили подписчика в список!