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

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

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

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

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

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

ОТЧЕТ

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

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

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

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

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

СТУДЕНТ:

________________ Какушкина О.В

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

23-ИСТ-1-1

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

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

С оценкой ________________________

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

2024

Оглавление

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

Цели и задачи 3

Описание проделанной работы 4

Вывод 8

Цели и задачи

Цель работы: установка и настройка программного окружения.

Задачи:

1. ознакомиться с программными компонентами

2. установить платформу Node.js

3. установить фреймфорк Angular

4. глобально установить Webpack, TypeScript и JSON сервер

5. установить редактор для разработки приложения Webstorm

6. произвести запуск приложения на Angular

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

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

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

Webpack — это статический модульный сборщик для JavaScript-приложений. Использование модульной системы способствует лучшей организации проекта, разбивая его на мелкие модули.

Angular — это фреймворк от Google, предназначенный для разработки клиентских приложений, особенно одностраничных (SPA). Angular предоставляет функции двустороннего связывания, что позволяет автоматически синхронизировать данные между интерфейсом и моделью. В качестве языка программирования Angular использует TypeScript.

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

Visual Studio Code (VS Code) — это популярная, бесплатная и открытая среда разработки от Microsoft. Она предназначена для работы с различными языками программирования, включая JavaScript, TypeScript, Python, C++, Java и многими другими. Первым этапом работы стала установка платформы Node.js с официального сайта https://nodejs.org/.

Рисунок 1. Установка Node.js

Следующий этап – установка Angular с помощью официального пакета.

Рисунок 2. Установка Angular

Для проверки все ли верно установилось, поочередно в командную строку вводим:

• webpack –v

• ng -v

• node -v

• npm -v

Рисунок 3 Установка IDE

Следующий этап – установка редактора для разработки приложения Visual Studio Code.

В соответствии с заданием, требовалось произвести первый запуск приложения на Angular. Для этого, после установки VS Code, был создан новый проект «Angular CLI».

Далее устанавливаем TypeScript и JSON сервер: npm i –g typescript и npm i –g json-server. Затем создаем проект командой ng new MyApp и выбираем нужный настройки показанные ниже.

Рисунок 4 Создание проекта и выбор настроек

Следующим шагом прописываем название файла и его сборку.

Рисунок 5 Путь к файлу и его запуск

Затем нажатием Cntl+клие в командной строке по http://localhost:4200/ открываетя приложение.

Рисунок 6 Запуск Проекта на сервере

Вывод

В ходе выполнения лабораторной работы я изучила следующие программные компоненты: Node.js, Webpack, Angular, Angular CLI, TypeScript, Visual Studio Code и JSON сервер. Я успешно установила и настроила все необходимые инструменты, что позволило мне создать и запустить приложение на Angular.