МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РОССИЙСКОЙ ФЕДЕРАЦИИ федеральное государственное автономное образовательное учреждение высшего образования «САНКТ-ПЕТЕРБУРГСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ АЭРОКОСМИЧЕСКОГО ПРИБОРОСТРОЕНИЯ» КАФЕДРА 42 ПРАКТИЧЕСКАЯ РАБОТА ЗАЩИЩЕНА С ОЦЕНКОЙ РУКОВОДИТЕЛЬ ассистент должность, уч. степень, звание подпись, дата Д. О. Шевяков инициалы, фамилия ОТЧЕТ О ПРАКТИЧЕСКОЙ РАБОТЕ №3 « Создание приложения интернета вещей » по дисциплине: Основные положения интернет вещей РАБОТУ ВЫПОЛНИЛ СТУДЕНТ ГР. № М112 подпись, дата Санкт-Петербург 2023 Г.А. Бахвалов инициалы, фамилия 1. Цель работы Приобретение навыков создания и запуска приложения интернета вещей, а также организации обмена данными с удаленными устройствами. 2. Задание Создать приложение на Flask. Реализовать эмулятор одной любой вещи из первой практической работы. Отправленные с эмулятора данные вещи должны быть выведены в лог сервера. Полученные данные должны быть упакованы в json-объект и возвращены обратно эмулятору. 3. Код 3.1. Файл index.py from flask import Flask,render_template app = Flask(__name__) @app.route('/') def hello_world(): return render_template('garageSmart.html',title = 'Умный-гараж') @app.route('/open_gate') def open_gate(): print('Ворота открыты') return 'Статус: Ворота открыты ' @app.route('/close_gate') def close_gate(): print('Ворота закрыты') return 'Статус: Ворота закрыты' @app.route('/heating_on') def h_on(): print('Отопление включено') return 'Статус: Отопление включено' @app.route('/heating_off') def h_off(): print('Отопление выключено') return 'Статус: Отопление выключено' @app.route('/camera_on') def c_on(): print('Камеры включены') return 'Статус: Камеры включены' @app.route('/camera_off') def c_off(): print('Камеры выключены') return 'Статус: Камеры выключены' if __name__ == '__main__': app.run() 3.2. Файл garageSmart.html <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>{{ title }}</title> <link type="text/css" href="{{ url_for('static',filename = 'css/garageSmart.css') }}" rel="stylesheet" /> <script src="http://code.jquery.com/jquery-3.3.1.js"></script> <script src="../static/js/garageSmart.js"></script> </head> <body> <h1>{{ title }}</h1> <div id="monitoring_data"> <div> <h2>КАМЕРЫ</h2> <button onclick='camera_on()'>ВКЛЮЧИТЬ</button> <button onclick='camera_off()'>ВЫКЛЮЧИТЬ</button> </div> <div> <h2>Отопление гаража</h2> <button onclick='heating_on()'>ВКЛЮЧИТЬ</button> <button onclick='heating_off()'>ВЫКЛЮЧИТЬ</button> </div> <div> <h2>Ворота гаража</h2> <button onclick='open_gate()'>ВКЛЮЧИТЬ</button> <button onclick='close_gate()'>ВЫКЛЮЧИТЬ</button> </div> </div> </body> </html> 3.3. Файл garageSmart.js function camera_on(){ $.ajax({ type:'GET', url:'/camera_on', success:function (response){ console.log(response) } }) } function camera_off(){ $.ajax({ type:'GET', url:'/camera_off', success:function (response){ console.log(response) } }) } function open_gate(){ $.ajax({ type:'GET', url:'/open_gate', success:function (response){ console.log(response) } }) } function close_gate(){ $.ajax({ type:'GET', url:'/close_gate', success:function (response){ console.log(response) } }) } function heating_on(){ $.ajax({ type:'GET', url:'/heating_on', success:function (response){ console.log(response) } }) } function heating_off(){ $.ajax({ type:'GET', url:'/heating_off', success:function (response){ console.log(response) } }) } 3.4. Файл garageSmart.css body { font-family: Arial, sans-serif; background-image: url('/static/img/garaz.png'); background-size: cover; margin: 0; padding: 0; } h1 { text-align: center; color: white; } h2 { text-align: center; color: white; } #monitoring_data { width: 50%; margin: 20px auto; } button { display: block; width: 100%; padding: 10px; margin: 10px 0; border: none; background-color: #007bff; color: #fff; cursor: pointer; font-size: 16px; } button:hover { background-color: #0056b3; } 3.5. Файл garage.png 4. Скриншоты Скриншот 1 – главная веб-страничка Скриншот 2 – вывод работы на консоль веб-страницы Скриншот 3 – вывод работы на консоль pycharm 5. Выводы В файле "index.py" мы создали экземпляр приложения Flask. Затем мы определили несколько маршрутов с помощью декоратора `@app.route()`. К примеру, "/" - это корневой маршрут, который возвращает HTML-шаблон "garageSmart.html" с заголовком "Умный-гараж". Остальные маршруты отвечают за выполнение определенных действий в гараже, таких как открытие/закрытие ворот, включение/выключение камер и управление отоплением. Как видно, при обращении к ним, мы также выводим сообщение на сервер (например, "Ворота открыты"). Файл "garageSmart.html" представляет собой пользовательский интерфейс, содержащий заголовок, кнопки для управления камерами, отоплением и воротами гаража. Он также ссылается на внешние стили и скрипты с использованием механизма шаблонов Flask. Файл "garageSmart.js" содержит функции, которые выполняют AJAX-запросы к серверу Flask при нажатии на кнопки интерфейса. Например, функция `open_gate()` выполняет GET-запрос по адресу '/open_gate', что приводит к вызову функции `open_gate()` в "index.py" и выводу сообщения "Ворота открыты". В "garageSmart.css" мы определяем стилизацию для элементов пользовательского интерфейса, такие как кнопки, заголовки и область мониторинга данных. Мы также добавили фоновое изображение для страницы с помощью свойства `background-image`. Наконец, в "garage.png" мы храним изображение фона для страницы, которое используется в CSS. Все эти файлы взаимодействуют между собой, создавая функциональное и стильное веб-приложение для управления функциями гаража. Кроме того, эти файлы представляют важный концепт веб-разработки - использование серверного и клиентского кода, статических ресурсов, шаблонов и AJAX-запросов для создания интерактивных веб-приложений.