Сегодня мы собираемся создать клон WhatsApp для обмена сообщениями. Полный клон WhatsApp будет включать в себя обмен сообщениями в реальном времени, уведомления и разворачивание URL с использованием React, Flux, сокетов и универсального javascript. Однако мы не будем рассматривать все это в нашем первом посте. Вместо этого первым шагом будет настройка архитектуры нашей системы на бэкенде с использованием Node.js и Heroku.
Шаги для запуска нашей системной архитектуры следующие:
- Настройка нашей локальной рабочей среды
- Настройка локального тестового сервера
- Перезагрузка и линтинг
- Настройка Heroku (нашего производственного сервера)
- Установка Node Express
- Добавление базы данных Redis
- Запуск наших локальных серверов на Heroku и тестирование
- Давайте начнем!
Настройка нашего рабочего окружения
Вам понадобится учетная запись Github, учетная запись Heroku и доступ к терминалу. Мы будем использовать Node 6.9.1 TLS, поэтому убедитесь, что он установлен. Проверьте, набрав:
node -v
В терминале должно быть написано:
Now using node v6.9.1 (npm v3.10.8)
Установка Node выходит за рамки нашего обзора, пожалуйста, ознакомьтесь с установками на Mac или PC.
Давайте форкнем наш первый репозиторий, проверим новую ветку под названием dev и создадим файл package.json. Перейдите к нашему начальному репозиторию и нажмите Fork в правом верхнем углу. Смотрите здесь:
Выберите свое имя, и он должен автоматически настроить новое репо на учетной записи GitHub и отвезти вас к нему. Затем в вашем новом разветвленном репо, нажмите Клон или скачать Зеленая кнопка, скопируйте содержимое и используйте его вместо кода ниже.
git clone git@github.com:your_username/wa-clone.git cd wa-clone git checkout -b dev npm init
Выберите свое имя, и он автоматически создаст новое репо в вашей учетной записи Github и переведет вас в него. Затем в новом форкнутом репо нажмите зеленую кнопку Clone or Download, скопируйте содержимое и используйте его вместо приведенного ниже кода.
touch .gitignore atom ./wa-clone
Вы можете принять все параметры по умолчанию и в конце ввести yes. Давайте продолжим и добавим файл .gitignore, чтобы все было более организованно, когда мы сохраняем нашу работу на Github и открываем наш проект в Atom.
.idea/ node_modules/ dist/ .env
Рабочая среда готова к работе. Если вы привыкли к транспонированию ES6 с помощью Babel, обратите внимание, что с Node 6.9.1 TLS вам больше не понадобится Babel, поскольку он нативно поддерживает большую часть ES6. Единственным исключением будут импорты модулей, которые вы увидите по мере работы над следующими разделами.
Настройка тестового сервера
Давайте создадим новую папку в каталоге проекта под названием src. Внутри нее создадим новый файл test-server.js
mkdir src cd src touch test-server.js
Добавьте наш начальный серверный код в систему через Atom.
const http = require('http');
const port = process.env.PORT || 3000;
const server = http.createServer((req, res) => {
res.statusCode = 200;
res.setHeader('Content-Type', 'text/plain');
res.end('Hello World - \n');
});
server.listen(port, () => {
console.log(`Server running at port ${port}.`);
});Сохраните его, и давайте запустим наш сервер и посетим его.
node test-server.js
Откройте браузер и перейдите по адресу: localhost:3000. Теперь вы должны увидеть “Hello World -” в окне браузера!
Автоперезагрузка и линтинг
Возможность автоматически перезагружать сервер и проверять качество вашего кода по мере его написания очень поможет вам в разработке проекта. Итак, давайте начнем с двух замечательных инструментов, nodemon и eslint. Нажмите Control-C на терминале, чтобы остановить сервер, и введите в командную строку.
cd .. npm install nodemon --save-dev
После завершения установки откройте файл package.json в Atom и добавьте следующее в верхнюю секцию:
{
...
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"nodemon": "nodemon --exec node"
},
...
}Давайте продолжим и запустим наш скрипт через node в терминале.
npm run nodemon src/test-server.js
Вуаля! Перейдите в файл src/test-server.js, внесите любые изменения в строку ‘Hello World! – \n’, сохраните его, и вы должны увидеть перезагрузку сервера в терминале. Зайдите в браузер, обновите его, и вы увидите свои изменения! Теперь вам не нужно заходить в терминал, чтобы перезагрузить сервер каждый раз, когда вы вносите изменения. Удобно, да? Переходим к eslint.
Остановите ваш сервер или откройте новую вкладку. В терминале установите eslint и настройте его.
npm install eslint --save-dev ./node_modules/.bin/eslint --init
Конфигурации могут варьироваться, однако для наших целей подойдут эти. Все правила ESlint можно найти здесь. Пожалуйста, никаких войн между пробелами и табуляцией. “Вверх и вниз” перемещают курсор, “пробел” выбирает опцию (или несколько), а “y/N” подтверждает.
? How would you like to configure ESLint? Answer questions about your style ? Are you using ECMAScript 6 features? Yes ? Are you using ES6 modules? Yes ? Where will your code run? Browser, Node ? Do you use CommonJS? No ? Do you use JSX? Yes ? Do you use React Yes ? What style of indentation do you use? Tabs ? What quotes do you use for strings? Single ? What line endings do you use? Unix ? Do you require semicolons? Yes ? What format do you want your config file to be in? JSON
Поскольку мы хотим добавить консольную регистрацию в наш код и не хотим, чтобы ESlint жаловался на это, мы должны добавить следующее в наш только что созданный файл .eslintrc.json в нашей основной директории.
{
...
"semi": [
"error",
"always"
],
"no-console": [
"off"
]
}
...
}Давайте проверим это в нашем терминале…
./node_modules/.bin/eslint src/*
У вас может возникнуть несколько проблем с форматированием, поэтому не стесняйтесь их исправлять. Давайте зафиксируем наши изменения в gitbut вместо того, чтобы проталкивать их через терминал.
git add . git commit -m "Initial tasks, setup"
Потрясающе. Теперь перейдем к Heroku.
Настройка Heroku
Я предполагаю, что вы уже настроили инструментарий Heroku как часть установки Heroku. Если нет, скачайте Heroku toolbelt здесь или ознакомьтесь с полной документацией по установке Herou. Давайте продолжим и войдем в систему через терминал.
heroku login
Введите свою электронную почту и пароль. Затем создайте новый экземпляр сервера для размещения нашего приложения.
heroku create
Это даст нам url для использования, который начинается с https:// и обычно отображается синим цветом в вашем терминале. Теперь нам нужно создать Procfile для Heroku – это просто то, что вам нужно сделать для Heroku, чтобы понять, где что находится. Для создания этого файла мы воспользуемся командой ‘touch‘.
touch Procfile
Откройте ваш Procfile в Atom и добавьте одну строку:
web: node dist/api-server.js
Heroku также необходимо точно знать, какие версии node и npm использовать, поэтому давайте явно укажем их в нашем файле package.json. Если вы не знаете версию, вы можете ввести node -v или npm -v в терминале.
{
...
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"nodemon": "nodemon --exec node",
},
"engines": {
"node": "6.9.1",
"npm": "3.10.8"
},
...
}Хорошая работа. Давайте зафиксируем наши изменения и изменим ветку с dev на release.
git add . git commit -m "Heroku setup" git checkout -b release
Поскольку Heroku автоматически, по умолчанию, берет ваше репо из основной ветки, мы должны сообщить Heroku, что вместо этого он должен взять релизную ветку.
git push heroku release:master
Это займет несколько минут, поэтому дайте всему этому запуститься. Чтобы открыть свой сайт Heroku, просто введите в терминале следующее:
heroku open
Поздравляем! Ваш сайт Heroku теперь работает. Если у вас возникли вопросы по этому поводу, пожалуйста, вернитесь и прочитайте полную документацию по установке Heroku. Разработчики используют Heroku, и у него есть отличная документация и поддержка на StackOverflow, если вы запутались.
Установка Express
Express – это фреймворк веб-приложений для Node. Хотя Node может создать сервер, в долгосрочной перспективе будет намного проще, если вы используете фреймворк приложений, такой как Express, и это очень распространенная практика. Итак, давайте продолжим, установим Express и создадим новый файл сервера.
npm install express --save touch src/api-server.js
В новом файле api-server.js добавьте код сервера, который должен показаться вам знакомым.
const express = require('express');
const app = express();
const port = process.env.PORT || 3000;
app.get('/', (req, res) => {
res.send('Hello World from Express.js!');
});
app.listen(port, () => {
console.log('Express app listening on port 3000');
});Протестируйте его на своем локальном сервере:
npm run nodemon src/api-server.js
Запустите localhost:3000 в вашем браузере, и вы должны увидеть ваш Hello World из Express.js! вот! Давайте изменим наш Procfile и развернем его на Heroku.
Procfile:
web: node dist/api-server.js
Терминал:
git add . git commit -m "Adds Express.js" git push heroku release:master heroku open
Поздравляем! Ваш сайт должен быть запущен на Heroku с Express.js!
Добавление простой базы данных
Настройка базы данных может быть долгим и трудным процессом. Для целей этого проекта мы будем использовать сервер Redis, который обычно используется в качестве локальной базы данных и кэширующего колучинга. Вот инструкции по установке Redis. Вам также может понадобиться wget – вот инструкции по установке для Mac.
Когда вы запустите программу установки Redis, она выйдет в основной каталог Redis, который на данный момент – redis-3.2.5. Запустите сервер Redis в этой папке.
src/redis-server
Вы можете открыть новую вкладку в терминале и продолжить работу. Давайте установим библиотеку Redis в наше приложение, чтобы мы могли подключиться к серверу Redis. Мы также должны установить файл redis-client.js, чтобы разместить в нем наш код для подключения.
npm install redis --save touch src/redis-client.js
Давайте продолжим и добавим код для подключения базы данных и сервера. Нам нужно получить доступ к нашим файлам redis-client.js и api-server.js.
Redis-Client.js:
const redis = require('redis');
let client = null;
function setup() {
if (process.env.REDISCLOUD_URL) {
console.log('connecting to redis cloud');
client = redis.createClient(process.env.REDISCLOUD_URL);
}
else {
console.log('connecting to local redis');
client = redis.createClient();
}
client.on('connect', function() {
console.log('redis client emitted connect event');
});
client.on('error', function (err) {
console.error(err, 'redis error');
});
}
exports.getClient = () => client;
exports.setupRedis = setup;API-Server.js:
const express = require('express');
const {setupRedis, getClient} = require('./redis-client');
const app = express();
const port = process.env.PORT || 3000;
app.get('/', (req, res) => {
res.send('Hello World from Express.js!');
});
app.get('/redis-test', (req, res) => {
getClient().incr('inc-test', (err, result) => {
if (err) {
console.error(err);
res.send('Error connecting to redis');
}
else {
res.send(`New incremented value: ${result}`);
}
});
});
setupRedis();
app.listen(port, () => {
console.log('Express app listening on port 3000');
});В файле api-server.js можно увидеть, что мы создали новый маршрут /redis-test, который мы будем использовать для проверки того, может ли Redis увеличивать число с течением времени. Это покажет нам, действительно ли наша база данных работает. В этом нет ничего особенного, это простой тест на функциональность. Идите вперед и запустите свой сервер:
npm run nodemon src/api-server.js
Теперь, когда вы перезагружаете страницу, у вас должен появиться счетчик. При каждой перезагрузке значение ключа сохраняется в базе данных Redis и увеличивается. Чем чаще вы обновляете страницу, тем выше становится число!
Поздравляем! Мы приближаемся к нашему последнему шагу на сегодня!
Публикация нашего сервера Redis на Heroku
У Heroku есть концепция дополнений, которые помогают расширить возможности вашего сервера. В нашем случае мы хотим добавить бесплатный уровень сервера Redis. Обратите внимание, что на данный момент вы можете иметь только один бесплатный сервер Redis на аккаунт, поэтому если у вас уже где-то запущен такой сервер, вам нужно будет создать другой аккаунт Heroku или удалить другой. Готовы? Давайте перейдем в наш терминал.
heroku addons:create rediscloud:30 heroku config
Вы должны увидеть ваш REDISCLOUD_URL, который Heroku использует из вашего файла redis-client.js для подключения к облачной базе данных Redis. Давайте исполним наш последний танец git в этот день.
git add . git commit -m "Adds Redis, test route" git push heroku release:master heroku open
Теперь вы должны увидеть свой сайт Heroku. Перейдите к /redis-test на сайте Heroku, и вуаля, вы можете приступить к инкрементации!
Заключение
Поздравляю, что вы продвинулись так далеко. Вы можете сказать: “Но я всего лишь настроил несколько серверов!”. На самом деле вы создали основу вашей системы обмена сообщениями. Это кровеносная система для ваших сообщений, и она так же важна, как и остальные части системы.
Оригинал: “https://www.codementor.io/@codementorteam/build-a-whatsapp-messenger-clone-in-react-part-1-4l2o0waav”