Десктопные приложения на JavaScript. Часть 1
Ни для кого не секрет, что в наше время JavaScript стал одним из самых популярных языков программирования. В далекие 90е годы, в момент зарождения языка, когда он был создан с единственной целью добавить интерактивность веб страницам и улучшить процесс взаимодействия с пользователем, кто бы мог подумать, что он достигнет столь небывалых высот. Ведь сейчас на нем можно делать практически все что угодно. Хотите написать сайт: и бэкэнд и фронтэнд на JavaScript? пожалуйста! Хотите написать мобильное приложение на JavaScript? нет проблем. Программируете микроконтроллер – и тут вам на помощь придет JavaScript.
Есть конечно небольшие минусы в подходе использования JavaScript везде, но если поразмыслить, то сколько времени и сил можно сэкономить, изучив всего лишь одни язык, особенно, если то же самое приложение должно работать на разных платформах. Разных платформах говорите? Хм… Точно – разных платформах – теперь JS может позволить себе десктопные приложения для Windows, Linux, Mac, как спросите вы? Ответ прост: встречайте – NW.js.
По первым буквам можно прочитать – Node.js + Webkit, если данные понятия вам пока не знакомы, то скоро вы поймете о чем идет речь.
Node.js – программная платформа, основанная на движке V8, который транслирует наш скрипт в машинный код. Данная платформа была создана в 2009 году преимущественно для работы с бэкэндом сайтов.
WebKit — свободный движок, разработанный компанией Apple. Впервые был анонсирован в составе Safari в 2003 году
Итак, коду, написанному на JS для данной технологии, будут доступны как Node.js модули, так и стандартный браузерный API (соответственно WebKit)
Быстрый старт
Все это конечно хорошо, но с чего же начать? На github можно найти и скачать репозиторий с исходным кодом. Так же здесь можно найти прямые ссылки для скачивания под ту платформу, на которой будет вестись разработка. Помимо прочего нам понадобится установленная node.js.
После того, как необходимое ПО скачано и установлено, вы написали свое приложение на любимом JS (как это сделать читайте далее) и локализовали все в одну папку. Полдела сделано, теперь остается самое сложное и долгое – упаковать все в один файл и подготовить для распространения. Для упрощения вы можете воспользоваться готовыми библиотеками, например nw-builder. Установка библиотеки не составит труда, если вы уже работали с node.js. Как известно, в состав node.js входит менеджер пакетов npm, с которым нужно работать из командной строки. Для того, чтобы поставить какую-либо библиотеку, необходимо выполнить команду:
Обратите внимание, что библиотеку можно ставить, как локально, так и глобально, для локальной установки используйте опцию —save-dev, для глобальной -g. Таким образом поставим наш сборщик для NW.js глобально, выполнив команду:
Для того, чтобы собрать наше приложение, необходимо выполнить команду (с большим количеством опций можно ознакомиться в документации):
В качестве имени платформы могут быть следующие значения: win32, win64, osx32, osx64, linux32, linux64.
Во время разработки нет нужды каждый раз собирать приложение, можно просто запустить его как есть и оно откроется в отдельном окне. Для этого нужно запустить приложение nw.exe из командной строки и передать в качестве параметров путь к папке с вашим приложением. Кроме того, если вы работаете под Windows, можно просто методом drag-n-drop перетащить папку с исходным кодом приложения на JS (обратите внимание, что именно папку целиком) в nw.exe.
Hello, world!
Теперь, когда вы знаете, как запустить приложение, как собрать его в один файл, давайте напишем что-нибудь. По традиции знакомство с новой платформой начинается с написания приложения Hello, world.
Для данного приложения, нам даже не понадобится JavaScript, только HTML. Создадим папку с названием HelloWorld. Поместим внутрь файл index.html со следующей разметкой:
Кроме того для каждого приложения под NW.js необходим файл, который обязательно должен называться package.json. Из него будет браться информация для построения приложения. Создадим простейший вариант файла и поместим в папку HelloWorld. Итак:
Содержимое файла понятно без пояснений (обратите внимание, что обязательные поля только main и name). В main необходимо записать файл с разметкой, который будет являться точкой входа в приложение. Секция window настраивает параметры окна (в данном случае мы отключаем панель инструментов и задаем размеры окна 500×200).
Кроме того, можно настроить такие поля как (за полным списком опций обращайтесь в документацию):
Приложение написано, но в нем всего один div элемент и совсем нет логики, а что делать, если у нас богатая на элементы разметка и сложная логика? На помощь к нам приходит элемент конфигурационного файла toolbar, который мы установили в false. Для того, чтобы сделать доступными средства отладки, необходимо установить toolbar в true. Проделав это при запуске приложения мы получим следующее окно:
После нажатия на кнопку в верхнем правом углу откроется еще одно окно, в котором будут отображены знакомые инструменты разработчика:
Работа с нативными контролами
NW.js позволяет работать с нативными контролами. Рассмотрим работу на примере меню. Для работы с нативным UI контролами в nw.js необходимо использовать модуль nw.gui, который можно подключить следующим образом:
Общий шаблон для использования контролов:
Таким образом для создания элементов меню можно воспользоваться следующей конструкцией:
Кроме того любые свойства созданного нами объекта можно легко изменить стандартными конструкциями JS, например так:
Меню создано, теперь нужно его заполнить, для манипуляции дочерними элементами существуют методы:
Кроме того для более гибкого добавления элементов в menu можно воспользоваться методом insert, в параметрах которого необходимо передать MenuItem и номер позиции, куда его вставить (позиция перед первым элементом соответствует 0).
Для доступа к созданным элементам можно использовать свойство items:
Обратите внимание, что нельзя напрямую создавать элементы:
Самое главное при работе с нативными контролами, это помнить, что любая ошибка при работе с ними может привести к краху всего приложения, поэтому необходимо быть крайне внимательными и по возможности при удалении элементов, также присваивать переменной значение null. Таким образом для удаления контрола, можно выполнить следующее:
Для более удобной работы с контролами, они унаследованы от EventEmitter, поэтому хорошая новость в том, что мы можем легко работать с событиями, например так:
Меню было создано, но если запустить приложение, то никакого меню вы не увидите. Для отображения меню существует метод popup, в параметрах которого необходимо передать координаты для отображения меню.
Для демонстрации основных возможностей меню добавьте следующий скрипт к созданному ранее проекту Hello, world:
После запуска приложения, мы можем увидеть созданное контекстное меню для body. Таким образом, мы можем определить контекстное меню для любого элемента.
Итак, теперь кроссплатформенные приложения может создавать каждый, но за все нужно платить. В данном случае мы жертвуем как скоростью, так и занимаемым объемом памяти (собранное приложение получается достаточно большим, более 50 Мб). Список приложений, созданных, используя данную технологию можно найти на github.
Во второй части статьи мы рассмотрим технологию более подробно.
Краткое руководство. Создание первого приложения Node.js в Visual Studio
В этом кратком (5–10 мин) руководстве по использованию интегрированной среды разработки (IDE) Visual Studio показано, как создать простое веб-приложение Node.js.
Предварительные требования
Прежде чем начать, установите Visual Studio и настройте среду Node.js.
Установка Visual Studio и выбор рабочей нагрузки Node.js
Если вы еще не установили Visual Studio:
Перейдите на страницу загрузки Visual Studio, чтобы установить Visual Studio 2022 бесплатно.
В Visual Studio Installer выберите рабочую нагрузку Разработка Node.js и щелкните Установить.
Если вы уже установили Visual Studio:
В Visual Studio выберите Средства>Получить средства и компоненты.
В Visual Studio Installer выберите рабочую нагрузку Разработка Node.js и щелкните Изменить, чтобы скачать и установить рабочую нагрузку.
Настройка среды Node.js
Установите версию LTS среды выполнения Node.js. Версия LTS имеет наилучшую совместимость с другими платформами и библиотеками.
Хотя платформа Node.js создана для 32-разрядных и 64-разрядных архитектур, установщик Node.js поддерживает только одну установленную версию в определенный момент времени.
Visual Studio обычно обнаруживает установленную среду выполнения. В противном случае можно настроить проект так, чтобы он ссылался на установленную среду выполнения:
Создав проект, щелкните узел проекта правой кнопкой мыши.
Выберите Свойства и задайте путь к файлу Node.exe. Вы можете использовать глобальную установку Node.js или указать путь к локальному интерпретатору для любого проекта Node.js.
Установка Visual Studio
Установите Visual Studio 2019 бесплатно со страницы скачиваемых материалов Visual Studio, если еще не сделали этого.
Установка Visual Studio
Установите Visual Studio 2017 бесплатно со страницы скачиваемых материалов Visual Studio, если еще не сделали этого.
Настройка среды Node.js
Visual Studio может помочь в настройке среды, включая установку средств, общих с разработкой Node.js.
В Visual Studio выберите Средства>Получить средства и компоненты.
в Visual Studio Installer выберите рабочую нагрузку Разработка Node.js и щелкните Изменить, чтобы скачать и установить рабочую нагрузку.
Установите версию LTS среды выполнения Node.js. Мы рекомендуем использовать версию LTS для обеспечения лучшей совместимости с внешними платформами и библиотеками.
Несмотря на то, что Node.js создана для 32-разрядных и 64-разрядных архитектур, установщик Node.js поддерживает только одну установленную версию в каждый конкретный момент.
Если Visual Studio не обнаруживает установленную среду выполнения (обычно это не так), настройте проект так, чтобы он ссылался на установленную среду выполнения.
После создания проекта щелкните правой кнопкой мыши узел проекта.
Выберите Свойства и задайте путь к Node.exe. В каждом из проектов Node.js можно использовать глобальную установку Node.js или указать путь к локальному интерпретатору.
Создание проекта приложения
В Visual Studio создайте новый проект Node.js.
Запустите Visual Studio и нажмите клавишу ESC, чтобы закрыть начальное окно.
Нажмите клавиши CTRL+Q, а затем в поле поиска введите node.js.
Выберите Пустое веб-приложение Node.js.
В диалоговом окне выберите Создать.
Нажмите клавишу ESC, чтобы закрыть окно запуска.
Нажмите клавиши CTRL + Q, чтобы открыть поле поиска и введите Node.js.
В верхней строке меню последовательно выберите Файл > Создать > Проект.
В левой области диалогового окна Новый проект разверните узел JavaScript и выберите Node.js.
В средней области выберите Пустое веб-приложение Node.js и нажмите кнопку ОК.
Visual Studio создаст и откроет проект. Файл server.js проекта откроется в редакторе.
Если шаблон проекта Пустое веб-приложение Node.js отсутствует, вам нужно добавить рабочую нагрузку Разработка Node.js. Инструкции см. в разделе Предварительные требования.
Изучение интегрированной среды разработки
Visual Studio может помочь в настройке среды, включая установку средств, общих с разработкой Node.js.
В области справа просмотрите Обозреватель решений.
Чтобы установить пакеты npm или команды Node.js из командной строки, щелкните узел проекта правой кнопкой мыши и выберите Открыть командную строку здесь.
Чтобы проверить возможность перехода к исходному коду, выберите createServer в открытом файле server.js и нажмите клавишу F12 или щелкните createServer правой кнопкой мыши и в контекстном меню выберите пункт Перейти к определению. Эта команда выполняет переход к определению функции createServer в http.d.ts.
Вернитесь к файлу server.js, найдите строку кода res.end(‘Hello World\n’); и измените ее:
res.end(‘Hello World\n’ + res.connection.
res.end(‘Hello World\n’ + res.connection.localPort);
В области справа просмотрите Обозреватель решений.
Чтобы установить пакеты npm или команды Node.js из командной строки, щелкните узел проекта правой кнопкой мыши и выберите пункт Открыть командную строку здесь в контекстном меню.
Чтобы проверить возможность перехода к исходному коду, выберите http.createServer в открытом файле server.js и нажмите клавишу F12 или выберите Перейти к определению в контекстном меню. Эта команда выполняет переход к определению функции createServer в http.d.ts.
Вернитесь к файлу server.js, найдите строку кода res.end(‘Hello World\n’); и измените ее:
res.end(‘Hello World\n’ + res.connection.
res.end(‘Hello World\n’ + res.connection.localPort);
Запустите приложение
Чтобы запустить приложение, нажмите клавиши CTRL+F5 или выберите Отладка > Запустить без отладки.
Приложение откроется в браузере.
Убедитесь, что в браузере отображаются сообщение Hello World и номер локального порта.
Создаём своё первое десктопное приложение при помощи HTML, JS и Node-WebKit
В наше время при помощи JavaScript и HTML можно сделать практически всё. А благодаря Node-WebKit (недавно переименован в NW.js) можно делать даже десктопные приложения, которые выглядят, как нативные и имеют доступ ко всем частям ОС. Сегодня мы покажем, как создать простое десктопное приложение при помощи Node-WebKit, используя jQuery и несколько модулей для Node.js.
Node-WebKit — комбинация Node.js и встроенного браузера WebKit. Код JavaScript выполняется в особом окружении, из которого есть доступ и к стандартному API браузеров, и к Node.js.
Устанавливаем Node-WebKit
Для разработки нужно скачать исполняемый файл node-webkit и вызывать его из командной строки. Позже всё вместе упакуется в одну программу, которая будет запускаться пользователем.
Скачайте файлы, подходящие для вашей системы, и распакуйте их в подходящее место. Запускать их нужно так:
Откроется новое окно node-webkit, в которое будет выведено множество отладочных сообщений.
Первое приложение
Мы подготовили для вас тестовое приложение для примера. Оно скачивает последние статьи с Tutorialzine и делает из них карусельку при помощи jQuery Flipster.
структура каталогов
В архиве содержатся вышеуказанные файлы. Выглядят они как статический сайт, но работать в браузере при запуске index.html не будут – им нужны модули Node.js. Для запуска воспользуйтесь командой
Она и запустит наше превосходное приложение.
Как это сделано
Всё начинается с файла package.json, который node-webkit ищет при запуске. Там описано, что нужно загружать и даны разные настройки окна.
package.json
В свойстве window описана необходимость открыть окно размера 800 х 500 пикселей и спрятать у него тулбар. В него загрузится файл из свойства main. У нас это
index.html
И наконец, наш файлик с JavaScript. Вот где самое интересное.
В браузере нельзя получить доступ к информации на другом домене через jQuery. Но node-webkit убирает эти ограничения.
Использованные модули:
Также есть jQuery и плагин jQuery-flipster. И всё!
Пакуем и распространяем
Конечно, для удобства пользователя нужно запаковать всё это в отдельную программу, которую можно будет запускать простым двойным кликом.
Вручную это довольно муторно делать, особенно если вы хотите подготовить приложение для разных платформ. Но есть для этого и автоматические библиотеки.
Учебник. Создание приложения Node.js и Express в Visual Studio
В рамках этого учебника для разработки Visual Studio используются Node.js и Express. Изучая этот учебник, вы создадите простое веб-приложение Node.js, добавите код, ознакомитесь с некоторыми возможностями интегрированной среды разработки и запустите приложение.
В этом руководстве вы узнаете, как:
Прежде чем приступить к работе, изучите краткий список вопросов и ответов, который познакомит вас с некоторыми основными понятиями.
Что такое Node.js?
Node.js — это серверная среда выполнения JavaScript, выполняющая код JavaScript.
Что такое npm?
Диспетчер пакетов упрощает публикацию и совместное использование библиотек исходного кода Node.js. npm — это стандартный диспетчер пакетов Node.js. Диспетчер пакетов npm упрощает установку, обновление и удаление библиотек.
Что такое Express?
Express — это серверная платформа веб-приложений, которую использует Node.js для создания веб-приложений. С помощью Express можно использовать разные интерфейсные платформы для создания пользовательского интерфейса. В рамках этого руководства для интерфейсной платформы используется Pug (ранее — Jade).
Предварительные условия
Для работы с этим руководством требуется следующее:
Visual Studio с установленной рабочей нагрузкой «Разработка Node.js».
Если вы еще не установили Visual Studio:
Перейдите на страницу загрузки Visual Studio, чтобы установить Visual Studio бесплатно.
В Visual Studio Installer выберите рабочую нагрузку Разработка Node.js и щелкните Установить.
Если вы уже установили Visual Studio:
В Visual Studio выберите Средства > Получить средства и компоненты.
В Visual Studio Installer выберите рабочую нагрузку Разработка Node.js и щелкните Изменить, чтобы скачать и установить рабочую нагрузку.
Установленная среда выполнения Node.js:
Если у вас не установлена среда выполнения Node.js, установите версию LTS с веб-сайта Node.js. Версия LTS имеет наилучшую совместимость с другими платформами и библиотеками.
Средства Node.js в рабочей нагрузке Visual Studio Node.js поддерживают как 32-разрядные, так и 64-разрядные версии архитектуры Node.js. Для Visual Studio нужна только одна версия, а установщик Node.js не может работать с двумя версиями сразу.
Обычно Visual Studio обнаруживает установленную среду выполнения Node.js автоматически. В противном случае настройте свой проект, чтобы он ссылался на установленную среду выполнения. Для этого сделайте следующее:
После создания проекта щелкните правой кнопкой мыши узел проекта и выберите Панель свойств.
На панели Свойства задайте путь Node.exe для ссылки на глобальную или локальную установку Node.js. Вы можете указать путь к локальному интерпретатору в каждом из своих проектов Node.js.
Этот учебник был протестирован с Node.js 14.17.5.
Этот учебник был протестирован с Node.js 8.10.0.
Создание проекта Node.js
Visual Studio управляет файлами для отдельного приложения в проекте. Проект включает исходный код, ресурсы и файлы конфигурации.
В рамках этого учебника вы начнете работу с простого проекта, содержащего код для приложения Node.js и Express.
Откройте Visual Studio и нажмите клавишу ESC, чтобы закрыть начальное окно.
Если параметр Basic Azure Node.js Express 4 Application (Простое приложение Node.js Express 4 в Azure) не отображается, нужно установить рабочую нагрузку «Разработка Node.js». Соответствующие инструкции см. в разделе Предварительные требования.
В диалоговом окне Настроить новый проект выберите команду Создать.
Visual Studio создаст новое решение и откроет проект в области справа. Файл проекта app.js откроется в области редактора слева.
Структуру проекта можно изучить в Обозревателе решений в области справа.
На верхнем уровне находится решение (1), имя которого по умолчанию совпадает с именем проекта. Решение, представленное на диске файлом SLN, является контейнером для одного или нескольких связанных проектов.
Ваш проект (2) с именем, которое вы указали в диалоговом окне Настроить новый проект, выделен полужирным шрифтом. В файловой системе этот проект представляет собой файл .njsproj в папке вашего проекта.
Чтобы просмотреть и задать свойства проекта и переменные среды, щелкните проект правой кнопкой мыши и в контекстном меню выберите пункт Свойства. Вы можете использовать и другие средства разработки, так как файл проекта не вносит изменений в источник проекта Node.js.
В узле npm (3) представлены все установленные пакеты npm. Вы можете щелкнуть узел npm правой кнопкой мыши, чтобы найти и установить пакеты npm с помощью диалогового окна.
Вы можете установить и обновить пакеты с помощью параметров в package.json, или щелкнув узел npm правой кнопкой мыши.
Файлы проекта (4) отображаются в узле проекта. Файл запуска проекта (app.js) выделяется полужирным шрифтом.
Задать файл запуска можно, щелкнув правой кнопкой мыши файл в проекте и выбрав Задать как файл запуска Node.js.
Npm использует файл package.json (5) для управления зависимостями и версиями для локально установленных пакетов. Дополнительные сведения см. в разделе Управление пакетами npm.
Откройте узел npm и проверьте наличие необходимых пакетов npm.
Запустите Visual Studio.
Создайте новый проект.
Нажмите клавишу ESC, чтобы закрыть окно запуска. Нажмите CTRL+Q, чтобы открыть поле поиска, введите Node.js и выберите Create a new Basic Azure Node.js Express 4 application (Создать простое приложение Node.js Express 4 в Azure) (JavaScript). В появившемся диалоговом окне выберите Создать.
Если шаблон проекта Базовое приложение Azure Node.js Express 4 отсутствует, необходимо добавить рабочую нагрузку Разработка Node.js. Соответствующие инструкции см. в разделе Предварительные требования.
Visual Studio создаст решение и откроет проект в правой области. Файл app.js проекта откроется в редакторе (в левой области).
(1) Полужирным шрифтом выделен ваш проект, имя которого вы указали в окне Новый проект. В файловой системе этот проект представлен файлом NJSPROJ в папке проекта. Вы можете задать свойства и переменные среды, связанные с проектом, щелкнув его правой кнопкой мыши и выбрав пункт Свойства. Вы можете одновременно использовать и другие средства разработки, так как файл проекта не вносит изменения в источник проекта Node.js.
(2) На верхнем уровне находится решение, имя которого по умолчанию совпадает с именем проекта. Решение, представленное на диске файлом SLN, является контейнером для одного или нескольких связанных проектов.
(3) В узле npm представлены все установленные пакеты npm. Вы можете щелкнуть узел npm правой кнопкой мыши, чтобы найти и установить пакеты npm с помощью диалогового окна. Кроме того, установить и обновить пакеты можно с помощью параметров, доступных в файле package.json и контекстном меню узла npm.
(4) package.json — это файл, который npm использует для управления зависимостями и версиями пакетов для локально установленных пакетов. Дополнительные сведения см. в разделе Управление пакетами npm.
(5) Файлы проекта, такие как app.js, отображаются в узле проекта. app.js — это файл запуска проекта, поэтому он выделяется полужирным шрифтом. Задать файл запуска можно, щелкнув правой кнопкой мыши файл в проекте и выбрав Задать как файл запуска Node.js.
Откройте узел npm и проверьте наличие необходимых пакетов npm.
Если каких-либо пакетов не хватает (имеется значок с восклицательным знаком), можно щелкнуть правой кнопкой мыши узел npm и выбрать пункт Установить пакеты npm.
Запустите Visual Studio.
Создайте новый проект.
В верхней строке меню последовательно выберите Файл > Создать > Проект. В левой области диалогового окна Новый проект разверните узел JavaScript и выберите Node.js. В средней области выберите Базовое приложение Azure Node.js Express 4 и нажмите кнопку ОК.
Если шаблон проекта Базовое приложение Azure Node.js Express 4 отсутствует, необходимо добавить рабочую нагрузку Разработка Node.js. Соответствующие инструкции см. в разделе Предварительные требования.
Visual Studio создаст решение и откроет проект в правой области. Файл app.js проекта откроется в редакторе (в левой области).
(1) Полужирным шрифтом выделен ваш проект, имя которого вы указали в окне Новый проект. В файловой системе этот проект представлен файлом NJSPROJ в папке проекта. Вы можете задать свойства и переменные среды, связанные с проектом, щелкнув его правой кнопкой мыши и выбрав пункт Свойства. Вы можете одновременно использовать и другие средства разработки, так как файл проекта не вносит изменения в источник проекта Node.js.
(2) На верхнем уровне находится решение, имя которого по умолчанию совпадает с именем проекта. Решение, представленное на диске файлом SLN, является контейнером для одного или нескольких связанных проектов.
(3) В узле npm представлены все установленные пакеты npm. Вы можете щелкнуть узел npm правой кнопкой мыши, чтобы найти и установить пакеты npm с помощью диалогового окна. Кроме того, установить и обновить пакеты можно с помощью параметров, доступных в файле package.json и контекстном меню узла npm.
(4) package.json — это файл, который npm использует для управления зависимостями и версиями пакетов для локально установленных пакетов. Дополнительные сведения см. в разделе Управление пакетами npm.
(5) Файлы проекта, такие как app.js, отображаются в узле проекта. app.js — это файл запуска проекта, поэтому он выделяется полужирным шрифтом. Задать файл запуска можно, щелкнув правой кнопкой мыши файл в проекте и выбрав Задать как файл запуска Node.js.
Откройте узел npm и проверьте наличие необходимых пакетов npm.
Если каких-либо пакетов не хватает (имеется значок с восклицательным знаком), можно щелкнуть правой кнопкой мыши узел npm и выбрать пункт Установить пакеты npm.
Добавление кода
Приложение использует Pug в качестве внешней платформы JavaScript. Pug использует простой код разметки, который компилируется в HTML.
В Обозревателе решений откройте папку представлений, а затем выберите index.pug, чтобы открыть файл.
Замените содержимое файла указанным ниже исправлением.
Предыдущий код используется для динамического создания HTML-страницы с заголовком и приветственным сообщением. Страница также содержит код, позволяющий отображать изображение, которое изменяется при каждом нажатии кнопки.
В папке маршрутов откройте файл index.js.
Добавьте следующий код перед вызовом функции router.get :
Этот код создает объект данных, который передается на динамически созданную HTML-страницу.
Замените вызов функции router.get следующим кодом:
Предыдущий код задает текущую страницу с помощью объекта маршрутизатора Express и отображает ее, передавая объект заголовка и данных. Код задает файл index.pug в качестве страницы для загрузки при запуске index.js. Код app.js, не показанный здесь, настраивает index.js в качестве маршрута по умолчанию.
Использование IntelliSense
IntelliSense — это средство Visual Studio, которое помогает при написании кода.
В последней строке этого сообщения указывается, что интерпретатор JavaScript ожидал запятую.
В нижней области откройте вкладку Список ошибок и выберите Сборка и IntelliSense в раскрывающемся списке для типа сообщаемых проблем.
Панель отображает предупреждение и описание, а также имя файла и номер строки.
Исправленная строка кода должна выглядеть следующим образом: res.render(‘index’, < title: 'Express', "data": getData() >);
Запуск приложения
Затем запустите приложение с подключенным отладчиком Visual Studio. Но сначала задайте точку останова.
Установка точки останова
Точки останова — это один из самых простых и важных компонентов надежной отладки. Точка останова указывает, где решение Visual Studio должно приостановить выполняемый код. Так вы сможете проверить значения переменных или поведение памяти, а также узнать, выполняется ли определенная ветвь кода.
В файле index.js щелкните в левом внешнем поле перед следующей строкой кода, чтобы установить точку останова:
Запуск приложения в режиме отладки
Если вы уверены, что нужный вам целевой объект отладки доступен на компьютере, но его нет в списке вариантов, выберите пункт Просмотр с помощью из раскрывающегося списка целей отладки. Выберите в списке целевой браузер, который хотите установить по умолчанию, и щелкните пункт По умолчанию.
Для запуска приложения нажмите клавишу F5 или выберите пункты Отладка > Начать отладку.
Отладчик приостанавливается на заданной точке останова, чтобы вы могли проверить состояние приложения.
Нажмите клавишу F5 или выберите Отладка > Продолжить, чтобы продолжить работу с приложением.
Приложение откроется в браузере. В окне браузера вы увидите заголовок Express и фразу Welcome to Express в первом абзаце.
Нажмите кнопки One! (Один!), Two! (Два!) и Three! (Три!), чтобы просмотреть различные изображения.
Публикация в Службе приложений Azure (необязательно)
Щелкните правой кнопкой мыши проект в обозревателе решений и выберите пункт Опубликовать.
На первом экране Публикация выберите Azure, а затем щелкните Далее.
На следующем экране войдите в Azure, если это необходимо. Выберите подписку Azure, группу ресурсов и Службу приложений для публикации, а затем щелкните Готово.
Просмотрите конфигурацию публикации, а затем выберите Опубликовать.
В окне Вывод Visual Studio отображается ход развертывания Azure.
После успешного развертывания в браузере откроется приложение, запущенное в Службе приложений Azure. Нажмите соответствующую кнопку, чтобы отобразить изображение.
В обозревателе решений щелкните проект правой кнопкой мыши и выберите пункт Опубликовать.
Выберите цель Служба приложений Microsoft Azure.
В диалоговом окне Служба приложений можно войти в учетную запись Azure и подключиться к существующим подпискам Azure.
Выполните дальнейшие инструкции, чтобы выбрать подписку, выбрать или создать группу ресурсов, выбрать или создать план службы приложений, а затем, когда будет предложено, выполните инструкции по публикации в Azure. Более подробные инструкции см. на странице Публикация на веб-сайте Azure с помощью веб-развертывания.
В окне Вывод показан ход выполнения развертывания в Azure.
После успешного развертывания в браузере откроется приложение, выполняющееся в Службе приложений Azure. Нажмите кнопку, чтобы отобразить изображение.