Стек MEAN

Изучение стека MEAN / #1 - Создание сайта на Mongo, Express, Node и Angular

Изучение стека MEAN / #1 - Создание сайта на Mongo, Express, Node и Angular

В ходе данного курса вы научитесь создавать веб сайты с применением стека MEAN. Вы создадите сайт, который будет написан с использованием: MongoDb, Node JS, Express JS и Angular JS. Помимо создания сайта вы также выгрузите его в Интернет на удаленный сервер.

Видеоурок

Полезные ссылки:

  1. Курс по Node JS и Express JS;
  2. Курс по Angular JS;
  3. Курс по MongoDB;
  4. Официальный сайт Node JS;
  5. Официальный сайт MongoDB.


Приветствуем вас в новом видео курсе по изучению стека MEAN. В ходе курса мы научимся разрабатывать веб сайты с использованием MongoDb, Angular JS, Node js и express js. Прежде чем мы что-либо будем делать, давайте рассмотрим из чего состоит стек MEAN, почему он столь популярен и что именно мы изучим за время данного курса.

Из чего состоит стек MEAN?

Стек MEAN это аббревиатура, в которой каждая буква означает технологию, используемую в стеке. MEAN разделяется на 4 компонента:

  1. Mongo DB;
  2. Express JS;
  3. Angular JS;
  4. Node JS.

Каждый компонент отвечает за определенную роль при построении веб сайта. Так, MongoDB отвечает за базу данных, Express JS отвечает за маршрутизацию или, простыми словами, отслеживание URL-адресов, Angular JS отвечает за внешний вид приложения и Node JS отвечает за серверную часть разработки.

Построение веб сайтов в стеке MEAN происходит при использовании языка JavaScript. Поскольку Express JS, Angular JS и Node JS написаны с использованием языка JavaScript, то разработку MEAN-приложений можно писать лишь на этом языке программирования.

Как все работает?

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

На фото представлена схема работы стека MEAN. Здесь в первую очередь пользователь совершает некое действие через графический интерфейс, реализованный на Angular JS. Далее этот запрос принимается платформой Node JS. Обработка самого запроса, что произошло и что нужно выполнить, происходит через Express JS. Далее, если это необходимо, то происходит подключение к базе данных MongoDB и получение от неё какой-либо информации. После получения данных, информация обратно возвращается в Express JS, откуда она передается в платформу Node JS, которая, напомним, является серверной платформой и именно она обеспечивает корректную работу с сервером, и после всего вся полученная информация возвращается пользователю через графический интерфейс, что написан на Angular JS.

Почему это удобно?

Ранее при разработке веб сайтов особо выбирать не приходилось и все сайты строились на основе уже стандартных стеков, таких как: LAMP или же LEMP.


В стек LAMP входили такие технологии как ОС Linux, сервер Apache, MySQL и PHP. В стек LEMP входило все то же самое, за исключением сервера Apache. Его место занимал сервер Nginx.

Оба эти стека были привязаны к ОС Linux. Со стеком MEAN все по-другому, так как этот стек не привязывается к определенной ОС и является кроссплатформенным.  Стек MEAN держится на языке программирования JavaScript, который спокойно запускается как на Windows, так и на Mac и Linux.

Также в MEAN есть одно принципиальное различие. Для работы программ используется сервер, на котором происходит развертывание проекта (его создание). В MEAN роль сервера занимаем платформа Node JS, которая является гораздо большим, нежели просто сервер. При помощи Node сервер встраивается в само приложение, тем самым развертывание проекта становится куда проще, так как необходимая версия сервера всегда идет в комплекте с самим приложением.  

Что мы изучим в ходе курса?

Изначально стоит сказать, что прежде чем вы приступите к этому курсу, вам стоит изучить такие технологии, как: MongoDB, Express JS, Node JS и Angular JS. Все эти технологии можно изучить на нашем портале itProger.

В ходе курса мы научимся компоновать все эти технологии в одно целое. Мы создадим простой веб сайт, который будет реализовывать каждую из технологий. За курс вы укрепите свои знания в технологиях что входят в стек MEAN, а также изучите множество дополнительных технологий, таких как Mongoose, Password JS, JWT, CORS и многие другие. Все они очень облегчат вам задачу построения ваших будущих веб сайтов.

Материалы для курса

Чтобы скачивать материалы к видеокурсам необходимо оформить подписку на сайт

Исходный код

Весь код будет доступен после подписки на проект!

Задание к уроку

Пакет Nodemon

Выполните несколько действий:

  • выполните установку Nodemon через файл package.json;
  • удалите пакет Nodemon из проекта;
  • установите заново Nodemon, но уже через npm пакетный менеджер.
Посмотреть ответ

1) Чтобы установить Nodemon через package.json необходимо прописать новую зависимость в объект "dependencies":

"dependencies": {
	// Ваши дополнительные библиотеки могут идти здесь
	"nodemon": "^1.19.2",
}

После этого в терминале запустите команду npm install.


2) Чтобы удалить пакет Nodemon удалите соответствующую строку из package.json и в терминале запустите команду npm install.


3) Для установки Nodemon через npm пропишите следующую команду в терминале: npm install nodemon.

Обработчик ссылок

Добавьте обработчик ссылки "/contact". При переходе на такую страницу отобразите пользователю текст: "Страница контактов".

Посмотреть ответ

Вам необходимо добавить отслеживание новой URL ссылки через Express JS. Делается это так: 

app.get('/contact ', (req, res) => {
	res.send('Страница контактов');
});

Большое задание по курсу

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

Также стоит посмотреть

Уроки Node JS и Express для начинающих
17 уроков
Курс по React JS для начинающих
14 уроков
Создание приложения на React JS / Использование API
7 уроков
Изучение MongoDB / Работа с базой данных
8 уроков
Уроки Angular для начинающих
7 уроков
Комментарии для сайта Cackle