Создание приложения CRM с Nodejs, repl.it и mongodb

Автор оригинала: Gareth Dwyer.

В этом руководстве мы будем использовать nodejs on reft.it вместе с базой данных MongoDB для создания основных Crud (Создать, прочитать, обновлять, удалить) CRM (Управление взаимоотношениями с клиентами) приложение. CRM позволяет хранить информацию о клиентах, чтобы помочь вам отслеживать статус всех отношений с клиентами. Это может помочь предприятиям отслеживать своих клиентов и в конечном итоге увеличить продажи. Приложение сможет хранить и редактировать детали клиентов, а также продолжать заметки о них.

Этот учебник не будет покрывать основы Node.js, но каждая строка кода будет подробно объяснена.

Установка

Весь код будет написан и размещен в REPL.IT, поэтому вам не нужно будет установить дополнительное программное обеспечение на вашем компьютере.

Для настройки мы будем ходить за вами через следующие шаги. Пропустите любой, кто не относится к вам (например, если у вас уже есть учетная запись reft.it, вам не нужно сделать новый).

Создание учетной записи на Reft.it.
Создание учетной записи на Монгодб Атлас

Создание учетной записи на repl.it

Первое, что вам нужно сделать, это создать учетную запись в REPL.IT. Вы можете найти инструкции о том, как сделать это здесь. Как только вы закончите, вернитесь здесь и продолжите учебник.

Создание учетной записи на Mongodb Atlas

Mongodb Atlas – это полностью управляемая база данных – AS-A-Service. Он предоставляет базу данных документов (часто называемая NoSQL), в отличие от более традиционной реляционной базы данных, такую как PostgreSQL.

Перейти к Монгодб Атлас и нажмите кнопку «Попробуйте бесплатно». Затем вы должны зарегистрироваться, нажав кнопку «Начать работу бесплатно», чтобы завершить процесс.

После подписания в разделе «Общие кластеры» нажмите кнопку «Создать кластерную».

Теперь вы должны выбрать провайдер и регион. Для целей этого урока мы выбрали платформу Google Cloud Platform в качестве поставщика и IOWA (US-Central1) в качестве региона, хотя он должен работать независимо от провайдера и региона.

** Изображение: 1 ** * Кластерная область *

Под «именем кластера» вы можете изменить имя вашего кластера. Обратите внимание, что вы можете изменить только имя сейчас – он не может быть изменен после создания кластера. После того, как вы сделали это, нажмите «Создать кластер».

Через немного времени ваш кластер будет создан. Как только он будет доступен, нажмите «Доступ к базе данных» в заголовке безопасности в левом столбце, а затем нажмите «Добавить новую базу данных пользователя». Вам нужен пользователь базы данных для хранения и извлечения данных. Введите имя пользователя и пароль для пользователя и запишите эти детали – вам понадобится их позже. Выберите «Прочитайте и запишите в любую базу данных» в качестве привилегии пользователя. Нажмите «Добавить пользователя», чтобы завершить этот шаг.

** Изображение: 3 ** * Добавление нового пользователя базы данных *

Далее необходимо разрешить доступ к сети к базе данных. Нажмите на «Доступ к сети» в левой колонке и «Добавить IP-адрес». Поскольку у нас не будет статического IP-адреса от reft.it, мы просто собираемся разрешить доступ из любого места – не волнуйтесь, база данных все еще закреплена с именем пользователя и паролем, которое вы создали ранее. В всплывающем окне нажмите «Разрешить доступ из любого места», а затем «Подтвердить».

** Изображение: 4 ** * Разрешить доступ из любого места *

Теперь выберите «кластеры», в разделе «Хранение данных» в левом столбце. Нажмите «Подключиться» и выберите «Подключите приложение». Это изменит всплывающий вид. Скопируйте «подключенную строку», поскольку вам понадобится в ближайшее время, чтобы подключиться к вашей базе данных из REPL.IT. Это будет выглядеть что-то подобное: mongodb + srv://<имя пользователя>: <пароль> @ cluster0-zrtwi.gcp.mongodb.net/test? RectryWrites = true & w = большинство

** Изображение: 5 ** * Получить строку подключения *

Создание замены и подключения к нашей базе данных

Во-первых, нам нужно создать новый Node.js all, чтобы написать код, необходимый для подключения к нашей блестящей новой базе данных. Перейдите к REPL.IT и создайте новую замену, выбрав «Node.js» в качестве языка.

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

Чтобы решить эту проблему, мы будем использовать Переменные среды , как мы сделали в предыдущих учебниках. Мы создадим специальный файл, который reply.it распознает и держит в частном порядке для вас, и в этом файле мы объявляем переменные, которые становятся частью нашей среды разработки REPL.IT и доступны в нашем коде.

В вашем REPL создайте файл под названием .env Выбирая «файлы» на левой панели и нажмите кнопку «Добавить файл». Обратите внимание, что правописание должно быть точным или файлом не будет распознан. Добавьте имя пользователя и пароль базы данных MongoDB (не ваши данные входа в Mongodb Atlas) в файл в формате ниже:

MONGO_USERNAME=username
MONGO_PASSWORD=password

Заменить Имя пользователя и пароль С вашей базой данных имени пользователя и пароль
Расходные средства Отказ Убедитесь, что вы не добавляете пробелы до или после = знак

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

MongoDB достаточно добры, чтобы предоставить клиенту, который мы можем использовать. Чтобы проверить нашу связь с базой данных, мы собираемся вставить некоторые данные клиента в нашу базу данных. В вашем index.js Файл (созданный автоматически и найден под панелью файлов), добавьте следующий код:

const MongoClient = require('mongodb').MongoClient;
const mongo_username = process.env.MONGO_USERNAME
const mongo_password = process.env.MONGO_PASSWORD

const uri = `mongodb+srv://${mongo_username}:${mongo_password}@cluster0-zrtwi.gcp.mongodb.net/crmdb?retryWrites=true&w=majority`;
const client = new MongoClient(uri, { useNewUrlParser: true });

Давайте сломаем это, чтобы увидеть, что происходит и то, что нам все еще нужно изменить:

Линия 1 Добавляет зависимость для клиента MongoDB. Как мы обсуждали ранее, reft.it делает все возможное, устанавливая все зависимости для нас, поэтому нам не нужно использовать что-то вроде NPM, чтобы сделать это вручную.
Линия 2 & 3 Мы извлекаем наше имя пользователя Mongodb и пароль из переменных среды, которые мы устанавливаем ранее.
Линия 5 Имеет несколько очень важных деталей, которые нам нужно правильно.
- Замените раздел между @ и следующий / С той же частью вашей соединительной строки от MongoDB, которую мы скопировали ранее. Вы можете заметить $ {mongo_username} и $ {mongo_password} до и после толстой кишки возле начала строки. Они называются шаблонными литералами. Шаблонные литералы позволяют нам поставить переменные в строке, которую у Node.js потом поможет заменить с фактическими значениями переменных.
- Примечание CRMDB после / и до ? Отказ Это будет название базы данных, которую мы будем использовать. Mongodb создает базу данных, если она не существует для нас. Вы можете изменить это на все, что вы хотите назвать базу данных, но помните, что вы изменили его на будущие разделы этого урока.
Линия 6 Создает клиент, который мы будем использовать для подключения к базе данных.

Создание пользовательского интерфейса для вставки данных клиентов

Мы собираемся сделать HTML-форму, которая будет захватывать данные клиента и отправить его на наш код REPL.IT, который затем вставит его в нашу базу данных.

Чтобы на самом деле представить и обрабатывать HTML-форму, нам нужен способ обрабатывать HTTP GET и POST запросов. Самый простой способ сделать это – использовать рамки веб-приложения. Структура веб-приложений предназначена для поддержки разработки веб-приложений – это дает вам стандартный способ создания приложения и позволяет быстро построить вашу приложение без необходимости выполнения кода BoverPlate.

Действительно простой, быстрый и гибкий веб-прикладной ody.js – Экспресс , который обеспечивает надежный набор функций для разработки веб-приложений.

Первое, что нам нужно сделать, это добавить зависимости, которые нам нужны. Прямо в верхней части вашего файла index.js (над кодом MongoDB) добавьте следующие строки:

let express = require('express');
let app = express();
let bodyParser = require('body-parser');
let http = require('http').Server(app);

app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: true }));

Давайте сломаемся.

Линия 1 Добавляет зависимость в экспресс. Reft.it позаботится о установке этого для нас.
Линия 2 Создает New Express приложение, которое необходимо будет обрабатывать входящие запросы.
Линия 3 Добавляет зависимость для «тело-парсера». Это необходимо для Express Server, чтобы справиться с данными, которые отправят форму, и предоставят ее нам в полезный формат для использования в коде.
Линия 4 Добавляет зависимость для базового HTTP-сервера.
Линия 6 и 7 Скажите приложение Express, которые анализаторы используют при входящих данных. Это необходимо для обработки данных форм.

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

app.get('/', function (req, res) {
  res.sendFile('/index.html', {root:'.'});
});

app.get('/create', function (req, res) {
  res.sendFile('/create.html', {root:'.'});
});

app.get Рассказывает, что мы хотим, чтобы это обрабатывало запрос на получение.
'/' Рассказывает, что он должен ответить на получение запросов, отправленных в корневой URL. Корневой URL выглядит что-то вроде «https://crm.hawkiesza.repl.co» – обратите внимание, что после URL нет кособы.
'/Создать' Скажите Express, что он должен ответить на получение запросов к/создать после корневого URL-адреса I.E. https://crm.hawkiesza.repl.co/create
res.sendfile Скажите Express для отправки данного файла в качестве ответа.

Перед тем, как сервер начнет получать запросы и отправки ответов, нам нужно сказать ему. Добавьте следующий код ниже предыдущей строки.

app.set('port', process.env.PORT || 5000);
http.listen(app.get('port'), function() {
    console.log('listening on port', app.get('port'));
});

Линия 1 Скажите Express, чтобы установить номер порта на номер, определенный как переменную среды, или 5000, если определение не было сделано.
Линия 2-4 Сообщите серверу начать прослушивание запросов.

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

Сделать новый файл под названием index.html и вставить следующий код в него:

Это просто простой HTML, который кладет одну кнопку на странице. Когда эта кнопка нажала, он отправляет запрос на получение /Создать , который затем ответит на сервер в соответствии с кодом, который мы написали выше – в нашем случае он отправит обратно create.html Файл, который мы определим сейчас.

Сделать новый файл под названием create.html и вставить следующее в него:






Customer details


  Customer name *

  
  

  Customer address *

  
  

  Customer telephone *

  
  

  Customer note

Мы не будем углубиться в вышеуказанный HTML. Это очень базовая форма с 4 полями (имя, адрес, телефон, примечание) и кнопка отправки, которая создает интерфейс, который будет выглядеть ниже.

Когда пользователь нажимает кнопку «Отправить» запрос на почту?/Создать С данными в форме - мы все еще должны обрабатывать этот запрос в нашем коде, так как в настоящее время мы в настоящее время обрабатываем только запрос на получение / Отказ

Если вы сейчас запускаете свое приложение (щелкните кнопку «Запуск»). Новое окно должно появиться справа, которое отображает кнопку «Создать», мы определяли только сейчас в «Create.HTML». Вы также можете перейти к https://. .repl.co (Замените с тем, что вы назвали ваш ref (но без подчеркивания или пробелов) и с вашим именем пользователя rep), чтобы увидеть форму. Вы сможете увидеть этот URL в вашей рентаберее.

** Изображение: 7 ** * Запустите свое приложение *

Если вы выберете «Создать», а затем заполните форму и нажмите «Отправить», вы получите ответ на ответ, который говорит: Не может опубликовать/создавать Отказ Это потому, что мы не добавили код, который обрабатывает запрос Post Form, поэтому давайте сделаем это.

** Изображение: 8 ** * не может опубликовать/создавать *

Добавьте следующий код в свой index.js Файл ниже app.get запись, которую мы сделали выше.

app.post('/create', function (req, res, next) {
  client.connect(err => {
    const customers = client.db("crmdb").collection("customers");

    let customer = { name: req.body.name, address: req.body.address, telephone: req.body.telephone, note: req.body.note };
    customers.insertOne(customer, function(err, res) {
      if (err) throw err;
      console.log("1 customer inserted");
    });
  })
  res.send('Customer created');
})

Линия 1 Определяет новый маршрут, который слушает запрос HTTP «Post» в /Создать Отказ
Линия 2 Подключается к базе данных. Это происходит асинхронно, поэтому мы определяем функцию обратного вызова, которая будет называться, как только соединение сделано.
Линия 3 Создает новую коллекцию клиентов. Коллекции в MongoDB аналогичны таблицам в SQL.
Линия 5 Определяет данные клиента, которые будут вставлены в коллекцию. Это взято из входящего запроса. Данные формы проанализированы с использованием парсеров, которые мы определены ранее, и затем помещаются в req .body Переменная для нас использовать в коде.
Линия 6 Вставляет данные клиента в коллекцию. Это также происходит асинхронно, и поэтому мы определяем другой функцию обратного вызова, которая получит ошибку, если произошла ошибка, или ответ, если все произошло успешно.
Линия 7 бросает ошибку, если у вкладышей была проблема.
Линия 8 Дает нам некоторые отзывы, что вставка произошла успешно.

Если вы сейчас запустите REFR (вам, возможно, понадобится обновить его) и отправить заполненную форму, вы получите сообщение «Создать клиента». Если вы затем посмотрите в свой кластер в MongoDB и выберите кнопку «Коллекции», вы увидите, что документ был создан с деталями, которые мы отправили в форме.

** Изображение: 9 ** * создано клиента *

Обновление и удаление записей базы данных

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

Во-первых, давайте сделаем маршруты нашей новой странице. В вашем index.js Добавьте следующий код ниже остальной части вашего кода маршрутизации (т.е. перед кодом MongoDB):

app.get('/get', function (req, res) {
  res.sendFile('/get.html', {root:'.'});
});

app.get('/get-client', function (req, res) {
    client.connect(err => {
        client.db("crmdb").collection("customers").findOne({name: req.query.name}, function(err, result) {
          if (err) throw err;
          res.render('update', {oldname: result.name, oldaddress: result.address, oldtelephone: result.telephone, oldnote: result.note, name: result.name, address: result.address, telephone: result.telephone, note: result.note});
        });
      });
});

Линия 1-3 Как и прежде, это говорит Express, чтобы ответить на входящие запросы на /получить Отправляя get.html Файл, который мы определим ниже.
Линия 5-12 Это говорит выразить, чтобы ответить на входящие запросы на /Get-Client Отказ
- Линия 7 Вызывает базу данных для получения клиента по имени. Если есть более 1 с тем же именем, то первое найденное будет возвращено.
- Линия 9 говорит выразить, чтобы сделать Обновить Шаблон, замена переменных с заданными значениями, как он идет. Важно отметить, что мы также заменяем значения в полях скрытых форм, которые мы создали ранее с текущими значениями деталей клиентов. Это необходимо, чтобы мы обновляем или удалите правильный клиент.

В вашем index.html Файл, добавьте следующий код после тег:

Это добавляет новую кнопку, которая сделает запрос на получение /получить , что тогда вернется get.html Отказ

Сделать новый файл под названием get.html со следующим содержанием:





  
    Customer name *

Это делает простую форму со входом для имени клиента и кнопки.

** Изображение: 11 ** * Получить клиента *

Нажав на эту кнопку, затем получите звонок /Get-Client Что ответит с подробностями клиента, где мы сможем обновить или удалить их.

Чтобы на самом деле увидеть подробную информацию о клиентах после запроса их, нам нужен механизм шаблонов, чтобы сделать их на HTML-странице и отправить к нам. С помощью шаблонного двигателя вы определяете шаблон – страницу с переменными в нем – а затем дайте ему значения, которые вы хотите заполнить в переменные. В нашем случае мы собираемся запросить подробную информацию о клиентах из базы данных и сообщите шаблонному двигателю, чтобы сделать их на странице.

Мы собираемся использовать шаблонный двигатель под названием Мопс Отказ PUG – это простой шаблон, который полностью интегрируется с Express. Синтаксис, который использует мопс, очень похоже на HTML. Одним из важных различий в синтаксисе является то, что расстояние очень важно, поскольку он определяет иерархию вашего родителя/дочерней информации.

Во-первых, нам нужно сказать, каким шаблонным двигателем использовался и где найти наши шаблоны. Поместите следующую строку над определениями маршрута (то есть после другого приложения. Линии в Index.js):

app.engine('pug', require('pug').__express)
app.set('views', '.')
app.set('view engine', 'pug')

Теперь создайте новый файл под названием update.pug Со следующим контентом:

html
  body
    p #{message}
    h2= 'Customer details'
    form(method='POST' action='/update')
      input(type='hidden' id='oldname' name='oldname' value=oldname)
      input(type='hidden' id='oldaddress' name='oldaddress' value=oldaddress)
      input(type='hidden' id='oldtelephone' name='oldtelephone' value=oldtelephone)
      input(type='hidden' id='oldnote' name='oldnote' value=oldnote)
      label(for='name') Customer name:
      br
      input(type='text', placeholder='John Smith' name='name' value=name)
      br
      label(for='address') Customer address:
      br
      input(type='text', placeholder='42 Wallaby Way, Sydney' name='address' value=address)
      br
      label(for='telephone') Customer telephone:
      br
      input(type='text', placeholder='+275554202' name='telephone' value=telephone)
      br
      label(for='note') Customer note:
      br
      input(type='text', placeholder='Likes unicorns' name='note' value=note)
      br
      button(type='submit' formaction="/update") Update
      button(type='submit' formaction="/delete") Delete

Это очень похоже на HTML-форму, которую мы создали ранее для create.html Однако это написано на языке шаблонов мопсов. Мы создаем скрытый элемент для хранения «старого» имени, телефона, адреса и записей клиента – это для того, чтобы когда мы хотим сделать обновление.

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

Мы также поставили в переменные заполнителя для имени, адреса, телефона и заметок, и мы дали кнопки «Форма 2 с разными действиями».

Если вы теперь запустите код, у вас будет индексная страница с 2 кнопками. Нажатие кнопки «Обновление/удаление» приведет вас к новой странице, которая запрашивает имя клиента. Заполнение имени клиента и нажатии «Получить клиент», после небольшого времени загрузите страницу с деталями клиента и 2 кнопки ниже, которые говорят «Обновление» и «Удалить». Убедитесь, что вы введете имя клиента, которое вы ввели ранее.

** Изображение: 12 ** * Удалить обновление *

Наш следующий шаг – добавить функциональность «Обновить» и «Удалить». Добавьте следующий код ниже маршрутов в index.js :

app.post('/update', function(req, res) {
  client.connect(err => {
    if (err) throw err;
    let query = { name: req.body.oldname, address: req.body.oldaddress, telephone: req.body.oldtelephone, note: req.body.oldnote };
    let newvalues = { $set: {name: req.body.name, address: req.body.address, telephone: req.body.telephone, note: req.body.note } };
    client.db("crmdb").collection("customers").updateOne(query, newvalues, function(err, result) {
        if (err) throw err;
        console.log("1 document updated");
        res.render('update', {message: 'Customer updated!', oldname: req.body.name, oldaddress: req.body.address, oldtelephone: req.body.telephone, oldnote: req.body.note, name: req.body.name, address: req.body.address, telephone: req.body.telephone, note: req.body.note});
      });
  });
})

app.post('/delete', function(req, res) {
  client.connect(err => {
    if (err) throw err;
    let query = { name: req.body.name, address: req.body.address ? req.body.address : null, telephone: req.body.telephone ? req.body.telephone : null, note: req.body.note ? req.body.note : null };
    client.db("crmdb").collection("customers").deleteOne(query, function(err, obj) {
      if (err) throw err;
      console.log("1 document deleted");
      res.send(`Customer ${req.body.name} deleted`);
    });
  });
})

Это представляет 2 новых «пост» обработчиков – один для /Обновить и один для /Удалить Отказ

Линия 2 Подключается к нашей базе данных MongoDB.
Линия 3 Бросает ошибку, если произошла проблема подключения к базе данных.
Линия 4 Определяет запрос, который мы будем использовать, чтобы найти документ для обновления. В этом случае мы используем детали клиента до Это было обновлено. Мы сохранили это имя ранее в скрытом поле в HTML. Попытка найти клиента по его обновленному имени, очевидно, не будет работать, потому что он еще не обновлен. Кроме того, обратите внимание, что мы устанавливаем некоторые поля для NULL, если они пусты. Это так, что база данных возвращает правильный документ, когда мы обновляем или удалите – если мы ищем документ, который не имеет адреса с адресом «(пустой строки), то наш запрос ничего не вернет.
Линия 5 Определяет новые значения, с которыми мы хотим обновить нашего клиента.
Линия 6 Обновляет клиента с новыми значениями, используя запрос
Линия 7 бросает ошибку, если возникла проблема с обновлением.
Линия 8 Журналы, что документ был обновлен.
Линия 9 Повторно отображает страницу обновления с сообщением, говорящим, что клиент был обновлен, и отображает новые значения.
Линия 15 Подключается к нашей базе данных MongoDB.
Линия 16 Бросает ошибку, если произошла проблема подключения к базе данных.
Линия 17 Определяет запрос, который мы будем использовать, чтобы найти документ для удаления. В этом случае мы используем все детали клиента до Любые изменения были сделаны в форме, чтобы убедиться, что мы удалили этот конкретный клиент.
Линия 18 Мы подключаемся к базе данных и удалите клиента.
Линия 19 бросает ошибку, если возникла проблема с удалением.
Линия 20 Журналы, которые документ был удален.
Линия 21 Отправляет ответ, чтобы сказать, что клиент был удален.

Положить все это вместе

Если вы запустите свое приложение сейчас, вы сможете создать, обновлять и удалять документы в базе данных MongoDB. Это очень базовое приложение CRUD, с очень базовым и нестандартным интерфейсом, но оно должно дать вам основу для создания гораздо более сложных приложений.

Некоторые идеи для этого: * Вы можете добавить поля в базу данных, чтобы классифицировать клиентов в соответствии с какой стадией они находятся в ваших продажах трубопровод Так что вы можете отследить, если клиент потенциально застрял где-то и связаться с ними, чтобы повторно заниматься. * Затем вы можете интегрировать некоторые основные маркетинговые автоматики с помощью страницы, позволяющей отправлять электронную почту или смс клиентам (хотя не спам клиенты!). * Вы также можете добавить поля, чтобы отслеживать информацию о покупке клиентов, чтобы вы могли видеть, какие продукты хорошо, с которыми покупатели.

Если вы хотите начать с того места, где этот учебник выключен, вилка reft в [https://repl.it/@garethdwyer1/nodejs-crm](https://repl.it/@garethdwyer1/nodejs-cr Получите дополнительные рекомендации из сообщества REP REPL, также присоединитесь к серверу REP RESPORD, используя эту ссылку «Пригласить» https://discord.gg/qwffghy .

Эта статья была предоставлена Геррит Вермеулен и отредактирована Кэтрин Джеймсом.