вступление

Привет еще раз, это наш второй класс, и сегодня я собираюсь представить 3 новых материала:

  • HTTP: основы того, что это такое.
  • NPM: менеджер пакетов узла
  • Express.js: первые шаги по настройке базового приложения

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

И… где я могу найти код?

Полный код будет доступен на моем GitHub по адресу https://github.com/lucavgobbi/lwt-class2.

Нужна помощь?

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

ХТ Что? (HTTP)

HTTP означает протокол передачи гипертекста и является одним из протоколов, доступных на прикладном уровне модели OSI, но это тема для другого поста. Здесь нам следует позаботиться о том, для чего используется HTTP и насколько это важно для нас.

Проще говоря: HTTP предоставляет способ доступа к документам в Интернете через запросы, например: если вы наберете http://www.facebook.com в адресной строке вашего веб-браузера, он запросит документ (файл Facebook). домашняя страница) для одного из серверов Facebook. Конечно, здесь задействовано много всего, но для начала предположим, что вы ПОЛУЧАЕТЕ этот документ из Facebook. И когда вы вводите свое имя пользователя и пароль на странице Facebook и нажимаете Enter, вы POS отправляете введенный вами текст (и много другой информации) на сервер Facebook, который ответит другим документом с вашими результатами. GET и POST — это два из нескольких методов, доступных в HTTP для работы с онлайн-документами.

Адрес (http://www.facebook.com) является вашим URL, URL-адреса также могут содержать параметры, такие как https://www.facebook.com/lucavgobbi?fref=nf ?fref=nf говорит серверу Facebook, что значение fref равно nf, что бы это ни значило для их сервера. В этом случае fref сообщает новому документу, откуда вы пришли к этому документу, nf — это лента новостей, поэтому вы можете попробовать сами, откройте любую ссылку из своей ленты новостей на Facebook, и этот параметр может присутствовать. Такое поведение реализовано на сервере Facebook, что означает, что для других URL-адресов fref может означать что-то другое или, возможно, ничего не значит.

Таким образом, в самом общем виде HTTP — это протокол для запроса документов, который имеет несколько методов, таких как GET, POST, DELETE, PUT, где у каждого метода есть определенная функция. Доступ к документам можно получить через URL-адрес или адрес, и вы можете указать параметры для сервера.

Сейчас это выглядит странно? Не волнуйтесь, мы увидим, как это работает в реальной жизни, и я обещаю вам, что это будет иметь смысл ;).

NPM, диспетчер пакетов узлов

Если вы уже правильно установили node.js, NPM уже установлен на вашем компьютере. (Если нет, проверьте этот пост).

Давайте начнем проверять, установлен ли он у вас на компьютере. Сначала откройте свой terminal.app или cmd и введите:

npm -v

Если на терминале появятся какие-то цифры, все готово.

Но эта тема не об использовании NPM. Это о том, что это такое.

NPM — это менеджер пакетов, написанный на node.js, который содержит сотни тысяч пакетов javascript. С помощью простой команды вы можете установить, обновить или удалить пакет с вашего компьютера или проекта, не беспокоясь о зависимостях.

Зависимость? КАКИЕ?

Зависимость — это любой пакет, который может потребоваться вашему проекту или другому проекту. Например: если вашему проекту (P1) нужен математический пакет (M1) с функциями для вычисления экспоненциальной степени, а этому пакету требуется другой пакет (P2), в котором есть функции для умножения, то ваш проект (P1) зависит от M1, а M1 зависит на М2. Чтобы запустить ваш проект, вам нужно будет установить M1 и M2 на каждый сервер или компьютер, на котором вы хотите его запустить. Теперь подумайте об огромном проекте с множеством пакетов, решение этих зависимостей выглядит не очень хорошо, верно? NPM отвечает за решение всех зависимостей, которые может иметь пакет, например, позже в этом классе мы установим Express.js с помощью NPM, и у него много зависимостей, но NPM позаботится об этом!

Express.js

вступление

Express.js — веб-фреймворк для node.js; Он помогает программистам создавать веб-приложения быстрее и лучше с меньшим количеством кода, предлагая вам несколько классов, служебных методов и инструментов. В этой части занятия мы узнаем, как запустить наш проект и написать довольно простое приложение Express.js.

Инициализация NPM

Вы помните НПМ? Здорово! Мы собираемся использовать его прямо сейчас.

Сначала подумайте, что вам нужно сделать, это создать каталог, в котором будет сохранен ваш проект. Я рекомендую вам сделать это с помощью terminal.app. Теперь, когда вы становитесь программистом, вам нужно привыкнуть к этому. Итак, чтобы создать свой каталог, просто перейдите туда, где вы хотите создать его в своих каталогах, и введите (измените «NewDirectoryName» на все, что хотите):

mkdir “NewDirectoryName”

После этого давайте переместимся внутрь него:

cd “NewDirectoryName”

Чтобы запустить NPM и создать package.json, мы запустим эту команду в каталоге проекта.

npm init

Это выведет что-то вроде этого:

По сути, NPM задает вам несколько вопросов, чтобы создать файл package.json. В этот начальный момент вы можете принять все значения по умолчанию, нажав Enter.

После того, как вы закончите, вы увидите окончательный вариант package.json.

Не волнуйтесь, у вас не будет такого же, как у меня, и вам не нужно об этом беспокоиться.

Теперь, если вы проверите папку своего проекта, вы сможете увидеть файл с именем package.json. Это файл, в котором NPM хранит некоторую конфигурацию и зависимости нашего проекта. Позже я объясню, насколько этот файл важен и как он сильно помогает нам при разработке.

Стать зависимым от Express.js

Итак, как добавить некоторые зависимости в package.json? Ну, есть два основных способа сделать это. Первая команда, которую мы будем использовать, — это каталог проекта:

npm install package-name --save

Первые 2 слова выглядят очевидными, верно? Третье — это имя пакета, в нашем случае — экспресс. Последняя часть команды: «— save» указывает npm сохранить этот пакет в наш файл package.json.

После запуска команды вы увидите такой вывод:

Все эти странные имена — это другие пакеты, которые Express требует для запуска, они являются зависимостями Express. А теперь подумайте на секунду, а что, если вам придется устанавливать все это вручную? Или, что еще хуже, что если для новой версии Express требуется другая версия одного из этих пакетов? Представляете, насколько хаотично было бы вручную обновлять все эти пакеты? И помните, мы только устанавливаем наш первый пакет.

Вы также можете просмотреть свой файл package.json. В конце был добавлен новый текст:

"dependencies": {
  "express": "^4.13.3"
}

Это просто сообщает NPM, что для запуска вашего проекта требуется эта версия Express.

Второй способ установить или добавить пакет в проект — отредактировать файл package.json. Вы могли бы добавить строки выше и вместо этого выполнить команду.

npm install

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

Кодирование вашего первого приложения

Наконец, пришло время :) вы напишете свое первое «настоящее» приложение и увидите результаты.

Если вы правильно выполнили описанный выше процесс, у вас должна быть такая структура папок без LICENSE и .gitignore в корневой папке:

Хорошо, теперь давайте создадим наш первый файл в проекте. Откройте ваш любимый редактор (если у вас его нет, проверьте некоторые предложения здесь) и создайте файл с именем index.js (позже в другом классе я объясню, почему это имя).

И напишите этот код в файле:

Итак, шаг за шагом:

var express = require('express');

Это включает (или требует) фреймворк Express для использования в нашем коде. require('package-name') — это функция, предоставляемая node.js, которая помогает нам загружать библиотеки и пакеты, позже мы увидим, как она работает, но сейчас давайте просто предположим, что она находит экспресс и присвоить его переменной.

var app = express();

Теперь мы получаем переменную app как экземпляр .express(). Эта переменная будет часто использоваться, и именно так express.js предоставляет нам свои методы. Обратите внимание, что вы можете использовать любое имя вместо app.

app.get('/', function (req, res) {
    res.status(200).send('Hello World!');
});

Видеть? Мы уже используем переменную app! Теперь мы сопоставляем первый маршрут нашего приложения '/', метод .get(…) в app сопоставляет URL-адрес, указанный в качестве первого параметра, с методом GET на HTTP для обратный вызов (подробнее о обратных вызовах в следующем классе). Так что теперь, если кто-то запросит документ на вашем сервере, используя метод GET HTTP, он получит ответ.

Обратный вызов в данном случае — это функция, которая получает два параметра: req и res, req — данные запроса, а res — это данные ответа. Помните, в начале этого класса я говорил вам, что браузер отправляет на сервер много данных? Ну, вы можете получить к нему доступ через переменную req!

Итак, внутри нашего обратного вызова мы вызываем два метода переменной res. Первый .status(200) добавляет к нашему ответу HTTP STATUS 200, в HTTP это означает, что все прошло нормально. А второй метод .send('Hello World!') отправляет Hello World! как ответ тому, кто его просил.

var server = app.listen(3000, function () {
    console.log('Hey I am running ;)');
});

И последнее, но не менее важное: нам нужно определить, какой порт будет использовать наш сервер, и начать его прослушивание. Метод .listen(…), предоставляемый переменной app. Первый параметр — это порт, на котором сервер будет слушать, второй — функция обратного вызова, когда сервер будет слушать.

Примечание. Обычно при доступе к веб-странице сервер работает через порт 80 или 443, это порты по умолчанию для HTTP.

Запуск вашего первого приложения

Теперь откройте свой terminal.app, перейдите в корневую папку вашего проекта и введите

node index.js

Откройте браузер и введите: http://localhost:3000 и вот оно ;)

Дополнительный

Итак, давайте проверим, выучили ли вы. Попробуйте добавить новый маршрут (URL) на сервер, маршрут будет http://localhost:3000/test, и он должен ответить Это другой маршрут.

Ответ опубликован в проекте GitHub, но я настоятельно рекомендую вам попробовать сделать это в одиночку. Если у вас есть сомнения, отправьте мне письмо по электронной почте [email protected] или твитните @lucavgobbi.

Надеюсь тебе понравилось. Увидимся на следующем занятии ;)

*Особая благодарность Луису Фернандо Судзуки за исправления на английском языке.