До начала

Введение

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

Предполагая, что вы знаете разницу между клиентской и серверной сферами, Node.js — это серверная веб-система, использующая Javascript. Короче говоря, это быстро и отлично подходит для приложений реального времени.

Если в какой-то момент вы запутаетесь или потеряетесь в этом руководстве, выполните быстрый поиск в Google по ключевым словам! Вы будете удивлены, сколько документации существует. :)

Узел обучения

Как им пользоваться?

  1. Начните с загрузки Node

Использовать Node просто. Подобно Apache, вы либо установите его на свой локальный компьютер, либо на свой сервер. У Node нет самого графического интерфейса, но он предоставляет нам все команды терминала, которые мы будем использовать для создания нашего приложения.

2. Создайте папку приложения

Теперь, когда у вас установлен Node. Мы можем начать с создания папки для нашего приложения. Для этой статьи я решил создать папку на рабочем столе моего компьютера с Windows с именем: medium-app (вы можете назвать ее как угодно, но старайтесь, чтобы она была простой и буквенно-цифровой).

3. Откройте папку приложения в выбранной вами среде IDE.

На данный момент моей IDE является Visual Studio Code, которую я предлагаю вам скачать. Это великолепно!

нпм? Что это?

4. Запустите npm init и запустите проект.

Отлично, теперь у нас установлен Node на нашем компьютере, и мы создали папку проекта, которую мы открыли в нашей IDE. Одной из лучших особенностей Node является то, что он вращается вокруг пакетов и поставляется с управляемым пакетом под названием Node Package Manager (npm). Это значительно упрощает процесс разработки и упрощает такие вопросы, как обновление зависимостей проекта и организации. Откройте встроенный терминал в Visual Studio Code (Ctrl + ` в Windows), и мы можем приступить к созданию нашего приложения Node. Когда терминал открыт, введите npm init и нажмите Enter. Вам будет предложено настроить различные параметры, но пока мы можем просто нажимать ввод, пока не дойдем до конца.

5. Установите зависимости приложения

В папке проекта теперь будет файл с именем package.json У каждого приложения Node есть файл пакета, который сообщает, какие пакеты и версии будут использовать наше приложение. Теперь мы установим зависимости, которые будет использовать наше приложение! В командной строке введите следующее: npm install express --save . Пока он устанавливает экспресс-пакет, давайте рассмотрим, что означает эта команда.

  • npm install — Сообщает терминалу, что мы собираемся установить пакет для использования в нашем приложении.
  • express — один из тысяч общедоступных модулей, который сделает настройку http-сервера нашего приложения невероятно простой.
  • сохранить — указывает npm, что этот пакет необходим для запуска нашего приложения.

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

Примечание о модулях npm и Node.

Одна из наиболее примечательных особенностей пакетов Node заключается в том, что при загрузке приложения в любое место, где вы не планируете запускать свое приложение, всегда удаляйте папку node_modules. Он может легко содержать более 15 000 файлов, и, как правило, включать его не рекомендуется. Когда вы или кто-то другой захочет запустить ваше приложение на своем сервере, он запустит npm install, который установит все модули Node в загруженное приложение.

Создание нашего приложения

Приступаем к кодированию!

6. Создайте index.js

Наконец-то мы установили наш первый пакет и готовы начать кодирование. Давайте начнем с быстрого просмотра package.json.

Если мы посмотрим на строку 5, мы увидим основные моменты index.js. Это означает, что index.js будет нашей точкой входа для нашего приложения, аналогично index.html или index.php в других серверных решениях. Вы можете изменить это на что угодно, но в этой статье мы оставим все как есть и начнем с создания index.js.

7. Создайте экспресс-сервер

Откройте index.js, и мы начнем с создания http-сервера, который может получать и отвечать на запросы! Ниже вы найдете готовый код приложения вместе с пояснениями.

const express = require("express");

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

const app = express();

Затем мы вызываем экспресс и сохраняем то, что он возвращает, в app.

const PORT = process.env.PORT || 3000;

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

app.get(“/”, function(req, res) {
res.send(“Welcome to my Express Page!”);
});

Теперь мы начинаем определять маршруты нашего сервера. Когда клиент запрашивает страницу на нашем сервере, здесь мы можем указать, как мы хотим, чтобы сервер отвечал. Когда пользователь запрашивает localhost:3000/ или localhost:3000, его приветствует текстовое сообщение, приветствующее его в вашем приложении.

Поскольку мы указали только корневой путь, наш сервер только знает, как реагировать, когда пользователь запрашивает корневую страницу. Если бы наш пользователь сделал запрос к localhost:3000/dogs, сервер вернул бы ошибку.

app.listen(PORT, function() {
console.log("Server is now listening on port " + PORT);
});

Этот метод — это то, как мы получаем экспресс, чтобы фактически начать прослушивание запросов. В противном случае это было бы похоже на попытку поговорить с кем-то без ушей. Здесь мы указываем, что он должен использовать ПОРТ, который мы определили ранее в качестве порта для приложения, а также печатать сообщение в консоли сервера, чтобы сообщить нам, что все получилось.

Тестирование нашего приложения

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

8. Запустите node index.js

Вернитесь к терминалу, чтобы мы могли указать Node запустить наш файл, набрав node index.js .

Если синтаксических ошибок нет и все работает, вы должны увидеть сообщение о том, что сервер был запущен и теперь прослушивает. Как здорово!

9. Зайдите в приложение и проверьте его

В зависимости от того, где вы запускаете проект, вам нужно посетить IP-адрес и порт, связанные с сетью машины. Поскольку я разработал свое приложение прямо на рабочем столе, я могу просматривать наше приложение на localhost:3000.

Вывод

Обзор

Разработка этого приложения научила нас настраивать проекты Node, устанавливать модули, запускать http-сервер и прослушивать запросы. Поэкспериментируйте с вашим новым приложением и посмотрите, сможете ли вы создать новые маршруты, которые реагируют по-разному, например. /собаки и /картинки

Куда пойти отсюда?

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

В будущем мы будем расширять это приложение, добавляя ему некоторые функциональные возможности и стиль.