МИНОБРНАУКИ РОССИИ

Федеральное государственное бюджетное образовательное учреждение высшего образования

Н ИЖЕГОРОДСКИЙ ГОСУДАРСТВЕННЫЙ ТЕХНИЧЕСКИЙ

УНИВЕРСИТЕТ им. Р.Е.АЛЕКСЕЕВА

Институт радиоэлектроники и информационных технологий

Лабораторная работа №1 «Установка и настройка программного окружения»

ОТЧЕТ

по лабораторной работе № 1

по дисциплине

WEB-технологии

РУКОВОДИТЕЛЬ:

________________ Юматов М.А. (подпись) (фамилия, и.,о.)

СТУДЕНТ:

________________

(подпись) (фамилия, и.,о.)

(шифр группы)

Работа защищена «___» ____________

С оценкой ________________________

Нижний Новгород

20

Содержание

Цель работы

Установка и настройка программного окружения.

Задание

Установка и настройка необходимого ПО. Первый запуск приложения на Angular.

В процессе выполнения лабораторных работ будут использованы следующее ПО:

• Node.js

• Webpack

• Angular и Angular CLI

• TypeScript

• WebStorm

• JSON сервер

Описание работы

Для начала изучим данные программные продукты.

Node.js — это кроссплатформенная среда с открытым исходным кодом для разработки серверных и сетевых приложений. Приложения Node.js написаны на JavaScript и могут выполняться в среде исполнения Node.js на ОС X, Microsoft Windows и Linux. Node.js также предоставляет обширную библиотеку различных модулей JavaScript, что в значительной степени упрощает разработку веб-приложений. Node.js = Runtime Environment + JavaScript Library.

Платформа Node.js включает в себя инструмент npm (node package manager), с помощью которого можно легко устанавливать и управлять зависимостями для проекта. Он используется для скачивания пакетов из облачного сервера npm, либо для загрузки пакетов на эти сервера.

Webpack — это статический модульный сборщик для приложений на JavaScript.

Чем полезен Webpack:

Приложения, написанные на JavaScript, постоянно усложняются, поэтому хорошим выходом является использование сборщика (или бандлера). Подобные инструменты позволяют разработчикам упаковывать, компилировать и в целом организовывать все ресурсы, необходимые для проекта. Можно использовать не только сторонние библиотеки, но и собственные файлы. Подобная модульная система позволяет добиться лучшей организации проекта, так как получается, что он разбит на небольшие модули. Webpack на данный момент является одним из самых мощных подобных инструментов. Он имеет открытый исходный код и позволяет решать множество разных задач

Angular представляет фреймворк от компании Google для создания клиентских приложений. Прежде всего он нацелен на разработку SPA-решений (Single Page Application), то есть одностраничных приложений. В этом плане Angular является наследником другого фреймворка AngularJS. В то же время Angular это не новая версия AngularJS, а принципиально новый фреймворк.

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

Одной из ключевых особенностей Angular является то, что он использует в качестве языка программирования TypeScript.

Angular CLI – это интерфейс командной строки, который позволяет максимально быстро создать проект и начать работу с ним. Являет собой систематизацию подхода к разработке приложений, также позволяет стандартизировать структуру приложения, а также автоматизировать его сборку.

TypeScript — это расширенная версия языка JavaScript, главной целью которого является упрощение разработки крупных JS-приложений.

JSON сервер — библиотека, позволяющая создать макет JSON сервера в кратчайшие сроки.

WebStorm — мощная IDE для веб-разработки на JavaScript. Отличается удобным и умным редактором JavaSсript, HTML и CSS и поддержкой новых технологий и языков, таких как TypeScript, CoffeeScript, Dart, Less, Sass и Stylus.

Webpack, Angular, TypeScript и JSON сервер устанавливаются с помощью npm. Сначала я установила Node.js, а после использовала следующие команды для установки остального ПО:

• npm install -g @angular/cli

• npm install --save-dev webpack -g

• npm install json-server -g

• npm install -g typescript

Для проверки использовала следующие команды:

• webpack -v

• ng -v

• node -v

• npm -v

После этого был установлен редактор для разработки приложения Webstorm, с помощью бесплатной студенческой лицензии на продукты JetBrains.

После был произведен первый запуск приложения на Angular. Для этого было сделано следующее:

1. Запуск Webstorm, создание нового проекта «Angular CLI».

2. Настройка Webstorm. Открытие быстрого доступа к командам npm: View, Tool Windows, npm.

3. Start приложения.

4. Проверка работы приложения.

Вывод

В процессе выполнения данной работы было успешно установлено, подробно изучено и настроено необходимое ПО. Цели и задачи лабораторной работы были успешно выполнены.