Как создать веб-приложение для рассылки новостей с помощью 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.
- Сначала перейдите к https://us2.admin.mailchimp.com/account/api/ и нажмите создать ключ, чтобы сгенерировать новый ключ API. . Этот ключ API нам понадобится позже.
- Перейдите на https://mailchimp.com/ и нажмите Аудитория› Настройки , чтобы найти свой идентификатор аудитории.
- Получив ключ 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/ и нажмем Аудитория, мы увидим, что мы успешно добавили подписчика в список!