Разработка веб-приложения "Книга рецептов"

Размещено на http://www.allbest.ru/

МИНИСТЕРСТВО НАУКИ И ВЫСШЕГО ОБРАЗОВАНИЯ

РОССИЙСКОЙ ФЕДЕРАЦИИ

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

«Крымский федеральный университет имени В.И. Вернадского»

Таврический колледж

ОТЧЕТ

ПО УЧЕБНОЙ ПРАКТИКЕ

ПМ.03 «Участие в интеграции программных модулей»

Специальность 09.02.03 «Программирование в компьютерных системах»

Место практики Таврический колледж (структурное подразделение) ФГАОУ ВО «Крымский федеральный университет имени В.И. Вернадского»

Срок практики с 16 марта 2021 г. по 22 марта 2021 г.

Обучающеяся 4 курса группы 4ПКС13

форма обучения очная

Татош Марии Дмитриевны

г. Симферополь, 2021 г.

Содержание

Введение

Раздел 1. Общие сведения об организации

1.1 Информация о предприятии - базе учебной практики

1.2 Требования техники безопасности и охраны труда

1.3 Правила работы за компьютером

Раздел 2. Практическая часть

2.1 JavaScript

2.2 HTML5 и CSS3

2.3 Хостинг

2.4 Разработка приложения

2.5 Размещение на хостинге

Заключение

Список использованных источников

Введение

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

Результатом и целью прохождения учебной практики по профессиональному модулю является: разработка веб-приложения «Книга рецептов», осуществить размещение сайта на хостинг.

Для достижения цели нам необходимо решить следующие задачи:

- Повторить курс лекций по JavaScript

- Повторить курс лекций по HTML5 и CSS3

- Ознакомиться с хостингом и его работой

- Разместить сайт на хостинге

Раздел 1. Общие сведения об организации

1.1 Информация о предприятии - базе учебной практики

Учебная практика проходила на базе Таврического колледжа (структурное подразделение) ФГАОУ ВО «Крымский федеральный университет им. В.И. Вернадского».

Задачи Таврического колледжа:

1. обучение студентов различных факультетов;

2. поддержка работоспособности программного обеспечения, а также программного обеспечения учебного назначения;

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

4. техническое обслуживание компьютерной и периферийной техники;

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

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

7. поставка современного оборудования для организации и ускорения учебного процесса;

8. проектирование, развитие и обслуживание корпоративных компьютерных сетей колледжа обеспечение выхода колледжа в международную компьютерную сеть Интернет;

9. выработка концепции и проведение мероприятий по обеспечению информационной безопасности Таврического колледжа;

10. представление Таврического колледжа в сети Интернет. Разработка и поддержка информационного наполнения сайтов и порталов Таврического колледжа;

11. контроль эффективности использования технических средств обучения и средств компьютерной и множительной техники;

12. оказание содействия факультетам, кафедрам и другим структурным подразделениям Академии в разработке, освоении, использовании и развитии информационных технологий;

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

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

15. консультационная поддержка студентов и преподавателей.

1.2 Требования техники безопасности и охраны труда

Общие требования безопасности

Настоящая инструкция распространяется на персонал, эксплуатирующий средства вычислительной техники и периферийное оборудование. Инструкция содержит общие указания по безопасному применению электрооборудования в учреждении. Требования настоящей инструкции являются обязательными, отступления от нее не допускаются. К самостоятельной эксплуатации электроаппаратуры допускается только специально обученный персонал не моложе 18 лет, пригодный по состоянию здоровья и квалификации к выполнению указанных работ.

Требования безопасности перед началом работы

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

Требования безопасности во время работы

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

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

Запрещается под напряжением очищать от пыли и загрязнения электрооборудование.

Запрещается проверять работоспособность электрооборудования в неприспособленных для эксплуатации помещениях с токопроводящими полами, сырых, не позволяющих заземлить доступные металлические части.

Недопустимо под напряжением проводить ремонт средств вычислительной техники и периферийного оборудования. Ремонт электроаппаратуры производится только специалистами-техниками с соблюдением необходимых технических требований.

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

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

Требования безопасности в аварийных ситуациях:

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

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

3. во всех случаях поражения человека электрическим током немедленно вызывают врача. До прибытия врача нужно, не теряя времени, приступить к оказанию первой помощи пострадавшему;

4. необходимо немедленно начать производить искусственное дыхание, наиболее эффективным из которых является метод рот в рот или рот в нос, а также наружный массаж сердца;

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

На рабочем месте запрещается иметь огнеопасные вещества

В помещениях запрещается:

а) зажигать огонь;

б) включать электрооборудование, если в помещении пахнет газом;

в) курить;

г) сушить что-либо на отопительных приборах;

д) закрывать вентиляционные отверстия в электроаппаратуре.

Источниками воспламенения являются:

а) искра при разряде статического электричества;

б) искры от электрооборудования;

в) искры от удара и трения;

г) открытое пламя.

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

Помещения с электрооборудованием должны быть оснащены огнетушителями типа ОУ-2 или ОУБ-3.

1.3 Правила работы за компьютером

Статья 212 ТК РФ обязывает работодателя разработать и утвердить инструкции по охране труда и обеспечить ознакомление с ними работников. Таким образом, в организации может быть утвержден специальный документ, предусматривающий правила выполнения трудовых операций с компьютерной техникой, который может называться, например, инструкцией по технике безопасности при работе за компьютером. Отдельные положения по данному вопросу могут содержаться в инструкции по охране труда для офисных работников.

В некоторых отраслях хозяйственной деятельности утверждаются типовые инструкции по охране труда. Например, Приказом Минсвязи РФ от 02.07.2001 N 162 утверждена Инструкция по охране труда при работе на персональном компьютере ТОИ Р-45-084-01.

Рассмотрим правила безопасности по каждому этапу работы с компьютером.

Перед тем, как включить компьютер, необходимо уделить пару минут следующим действиям:

· нужно убедиться в том, что в зоне досягаемости отсутствуют оголенные провода и различные шнуры;

· нельзя начинать работу на технике с видимым повреждением. В случае обнаружения трещины на корпусе или повреждений другого рода, нужно обратиться за помощью в сервисный центр. Это же относится к ПК с неисправным индикатором включения/выключения;

· предметы на столе не должны мешать обзору, пользованию мышкой и клавиатурой. Поверхность экрана должна быть абсолютно чистой;

· на системном блоке не должно находиться никаких предметов, так как в результате вибраций может нарушиться работа устройства. Нужно убедиться в том, что никакие посторонние предметы не мешают работе системе охлаждения;

· запрещается начинать работу в помещениях с повышенной влажностью, а также в случае, если рядом присутствуют открытые источники влажности (лужи, мокрый пол). Включить технику можно лишь после полного высыхания окружающих предметов.

Во время работы:

· необходимо аккуратно обращаться с проводами;

· запрещается работать с неисправным компьютером;

· нельзя заниматься очисткой компьютера, когда он находится под напряжением;

· недопустимо самостоятельно проводить ремонт оборудования при отсутствии специальных навыков;

· нельзя располагать рядом с компьютером жидкости, а также работать с мокрыми руками;

· нельзя в процессе работы с ПК прикасаться к другим металлическим конструкциям (например, батареям);

· не допускается курение и употребление пищи в непосредственной близости с ПК и др.

В аварийных ситуациях:

· при любых неполадках необходимо сразу отсоединить ПК от сети;

· в случае обнаружения оголенного провода незамедлительно оповестить всех работников и исключить контакт с проводом;

· в случае возникновения пожара принять меры по его тушению с использованием огнетушителей (работники должны знать, где они находятся);

· в случае поражения человека током оказать первую помощь и вызвать скорую медицинскую помощь.

По окончании работы:

1) выключить компьютер;

2) желательно провести влажную уборку рабочего места;

3) отключить электропитание.

Организация рабочего места

Постоянная работа за компьютером вызывает отклонения в здоровье работника, в частности:

1. нагрузка на зрение приводит к его ухудшению, покраснениям глаз, возникновению «синдрома сухого глаза»;

2. несоблюдение нормативов организации рабочего места может привести к искривлению позвоночника, заболеваниям суставов и болям различного характера;

3. длительная концентрация внимания на экране вызывает переутомление.

Порядок организации работы с компьютером определяется СанПиН 2.2.2/2.4.1340-03, введенными в действие с 30.06.2003.

Приведем некоторые требования, предъявляемые СанПиН к рабочему месту пользователя ПК

1. расстояние от монитора до глаз должно составлять от 600 до 700 мм, но не меньше 500;

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

3. высота стола - от 680 до 800 мм;

4. поверхность стола должна позволять оптимально разместить на ней все необходимое для работы и др.

Раздел 2. Практическая часть

2.1 JavaScript

Язык программирования JavaScript (JS) - это, в первую очередь, язык программирования, который придает веб-страницам возможность реагировать на действия пользователя и превращать статичные страницы в динамические. Таким образом, страницы становятся интерактивными и более удобными в использовании.

JavaScript не дает возможности для низкоуровневых средств работы с памятью, процессором, так как первостепенно был ориентирован на браузеры, в которых данная возможность не требуется.

Что касается возможностей языка JavaScript, то они зависят от окружения, в котором, собственно, и запущен сам JavaScript. В браузере JavaScript умеет делать все, что относится к каким-либо действиям со страницей, взаимодействию с клиентом сайта и, в некоторой мере, с сервером, например:

? менять стили элементов, скрывать, показывать элементы, удалять существующие HTML-теги, создавать новые HTML-теги и т.д.;

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

? посылать запросы на сервер и загружать данные без перезагрузки страницы с помощью технологии AJAX;

? получать и устанавливать cookie, запрашивать данные, выводить сообщения.

Так же рассматривая язык программирования JavaScript необходимо знать, что такое HTML и CSS.

2.2 HTML5 и CSS3

HTML (HyperText Markup Language, «язык гипертекстовой разметки») - стандартизированный язык разметки документов во Всемирной паутине. Большинство веб-страниц содержит описание разметки на языке HTML (или XHTML).

В разработке данного WEB-приложения будет использоваться стандарт HTML5.

HTML5 - эволюция стандарта HTML, добавляющая новые теги и, что более важно, ряд новых возможностей браузерам.

Вот несколько примеров:

? Чтение/запись файлов на диск (в специальной «песочнице», то есть не любые)

? Встроенная в браузер база данных, которая позволяет хранить данные на компьютере пользователя

? Многозадачность с одновременным использованием нескольких ядер процессора.

? Проигрывание видео/аудио, без Flash

? 2D и 3D-рисование с аппаратной поддержкой, как в современных играх.

Многие возможности HTML5 все еще в разработке, но браузеры постепенно начинают их поддерживать.

CSS (англ. Cascading Style Sheets - каскадные таблицы стилей) - формальный язык описания внешнего вида документа, написанного с использованием языка разметки.

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

В чем разница между CSS и HTML? HTML используется для структурирования содержимого страницы, а CSS для форматирования этого структурированного содержимого.

Появление CSS стало революцией в мире веб-дизайна. Конкретные преимущества CSS:

? управление отображением множества документов с помощью одной таблицы стилей

? более точный контроль над внешним видом страниц

? различные представления для раных носителей информации (экран, печать и т.д.)

? сложная и проработанная техника дизайна

2.3 Хостинг

Хостинг сайтов - это онлайн услуга, которая позволяет публиковать ваш веб-сайт или веб-приложение в интернете. Когда вы подписываетесь на услугу хостинга, вы обычно арендуете пространство на сервере, на котором вы можете хранить все файлы и данные, необходимые для правильного функционирования вашего сайта.

Сервер - это физический компьютер, который работает без перерывов, чтобы ваш сайт был доступен всё время для тех, кто хочет его посетить. Ваш хостинг отвечает за поддержание работы сервера, защиту его от вредоносных атак и передачу вашего контента (текста, изображений, файлов) с сервера в браузеры ваших посетителей.

Когда вы решите запустить новый сайт, вам понадобиться найти хостинговую компанию, которая предоставит вам ресурсы на сервере. Ваш хостинг провайдер хранит все ваши файлы, ресурсы и базы данных на сервере. Всякий раз, когда кто-то вводит ваше доменное имя в адресную строку своего браузера, ваш хост передаёт все файлы, необходимые для обслуживания запроса.

2.4 Разработка приложения

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

Серверная часть будет располагаться и тестироваться на порте http://localhost:8000, а клиентская на http://localhost:3000.

Для начала пишем серверную часть. На рисунках 1, 2 видим простой сервер, который оснащен базовым функционалом CRUD (Create-Read-Update-Delete).

Рисунок 1 - Разработка серверной части приложения

Рисунок 2 - Маршрутизация

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

Рисунок 3 - Разработка клиентской части приложения

На следующих рисунках можем видеть получившееся приложение:

Рисунок 4 - Страница списка рецептов



Рисунок 5 - Страница добавления рецепта

Рисунок 6 - Страница рецепта

2.5 Размещение на хостинге

Для развертывания приложения будем использовать Heroku. Для начала отправим код в удаленные git-репозиторий (рис. 7).



Рисунок 7 - GitHub

Потом заходим на Heroku, нажимаем на «Create New App», добавляем приложение и выбираем регион. После нажимаем на Deployment Method - GitHub и выбираем приложение. Прокручиваем немного вниз и нажимаем на «Deploy Bench», после этого Heroku начнет собирать наше приложение и автоматически его развернет (рис. 8).

Рисунок 8 - Heroku

Заключение

В процессе прохождения учебной практики была достигнута поставленная цель, а именно: разработка приложения «Книга рецептов», осуществление размещения сайта на хостинг.

Также были выполнены следующие задачи:

- Повторить курс лекций по JavaScript

- Повторить курс лекций по HTML5 и CSS3

- Ознакомиться с хостингом и его работой

- Разместить сайт на хостинге

серверный сайт хостинг

Список использованных источников

1. Начало работы с HTML // MDN Web Docs

2. Справочник по HTML // htmlbook.ru

3. Руководство по CSS // MDN Web Docs

4. Современный учебник JavaScript // Современный учебник JavaScript

5. JavaScript Учебные материалы // MDN Web Docs

6. React Документация // React

7. React Router Dom Documentation // React Router Dom

8. Express Документация // Express

9. Mongoose Docs // Mongoose

Размещено на Allbest.ru

...