Министерство сельского хозяйства Республики Казахстан
Казахский агротехнический университет им. С. Сейфуллина
Кафедра «ВЫЧИСЛИТЕЛНАЯ ТЕХНИКА И ПРОГРАММНОЕ
ОБЕСПЕЧЕНИЕ»
ОТЧЕТ ПО ПРОИЗВОДСТВЕННОЙ ПРАКТИКЕ
Образовательная программа «Компьютерная инженерия»
Направление подготовки B057 – Информационные технологии
Тема: Разработка frontend-составляющей
Интернет-магазина
Дисциплина: Производственная практика
Выполнил: студент группы 20-11
Каирбеков
Адиль
Берикович
Проверила: Аканова А.С,
Отчет по производственной практике допущен(а) к защите
_______________
(подпись преподавателя)
Нур-Султан 2022
1
НАО «Казахский агротехнический университет имени С. Сейфуллина»
Факультет «Компьютерные системы и профессиональное обучение»
Кафедра «Вычислительная техника и программное обеспечение»
Образовательная программа «6B061 Компьютерная инженерия»
__________________________________________
ЗАДАНИЕ
на производственную практику:
Разработка frontend-составляющей интернет-магазина
Студент Каирбеков Адиль Берикович
Группа B05-057-2011
Тема работы (проекта): Разработка frontend-сост. и-магазина ______
Дата выдачи задания 25.04.2022___
___
Дата защиты работы (проекта) _17.06.2022__
____________
Руководитель проекта Аканова А.С.
Задание принял к исполнению 25.04.2022___________________
2
Содержание
Введение ……………………………………………………………………4
1.
2.
3.
4.
Разработка дизайна ……..………………………………………………….6
Поиск необходимых библиотек …………………………………………...6
Написание программного кода …………………………………………....6
Отладка и тестирование веб-приложения ………………………………..6
Заключение …………………………………………………………………7
Источники ………………………………………………………………….8
3
Введение
Интернет-магазин — сайт, торгующий товарами
посредством
сети Интернет. Позволяет пользователям онлайн, в своём браузере или
через мобильное приложение, сформировать заказ на покупку, выбрать
способ оплаты и доставки заказа, оплатить заказ. При этом продажа товаров
осуществляется дистанционным способом и она накладывает ограничения на
продаваемые товары. Так, в некоторых странах имеется запрет на интернетторговлю алкоголем, оружием, ювелирными изделиями и другими товарами.
Когда онлайн-магазин настроен на то, чтобы позволить компаниям
покупать у других компаний, этот процесс называется онлайн-магазинами
бизнес для бизнеса (B2B). Типичный интернет-магазин позволяет клиенту
просматривать ассортимент продуктов и услуг фирмы, просматривать
фотографии или изображения продуктов, а также информацию о технических
характеристиках продукта и ценах.
Интернет-магазины обычно позволяют покупателям использовать
функции «поиска», чтобы найти конкретные модели, бренды или предметы.
В
1992
году Чарльз
Стэк
основал первый
интернетмагазин books.com по продаже книг. В 1994 году появился интернетмагазин Amazon. В XXI веке интернет-торговля бурно развивается. Большую
роль в этом сыграла пандемия COVID-19.
4
1. Разработка дизайна Интернет-Магазина
Для создания дизайна я использовал приложение, как раз таки
предназначенное для этого – Figma.
Также использовал сайты для поиска референсов. Это:
- unsplash
- pinterest
- behance
- dribble
Вышел данный результат:
https://www.figma.com/file/6bz3zhLYZqdWuc9Lemk1vp/thrify?node-id=0%3A1
(ссылка на дизайн)
5
2. Поиск необходимых библиотек
Для написания кода веб-приложения интернет-магазина мне
потребовались данные библиотеки:
-
Swiper.js (слайдеры)
ValidateForms.js (проверка на валидацию форм)
onFocusVisible.js (проверка на активность инпута в формах)
Choices.js (селекты)
Подключил их с помощью npm и дальше приступил к самому
интересному…
6
3. Написание кода
Для написания кода я использовал приложение Visual Studio Code.
Мой стек разработки:
- gulp
- webpack
- html
- css
- scss
- js
- git
Результат:
https://qwertycamedy.ru/sites/trify/
( доказательство того, что это действительно моя работа:
https://www.weblancer.net/users/qwertycamedy/ )
7
4. Отладка и тестирование
Для отладки и тестирования с разных размеров экранов я использовал
панели разработчика в современных браузерах ( Chrome, Firefox, Safari )
Примерно так выглядит отладка на каждый экран:
Для отладки на смартфонах использовал режим смартфона:
8
9
Заключение
В заключение могу уверенно сказать, что усвоил навыки frontendразработчика и так как в будущем мечтаю именно им работать на постоянной
основе – мне это очень пригодится!
Для себя закрепил знания в написании кода в приложении vs code,
работе с консолью ( git, npm ).
Данную работу не стыдно будет показать и как проект в портфолио в
моем профиле на бирже Weblancer.
Благодарен университету за данную возможность взять знания
frontend-разработчика!
10
Источники
- https://www.behance.net/
- https://dribbble.com/
- https://unsplash.com/
- https://pinterest.com/
- https://swiperjs.com/
- https://www.npmjs.com/
- https://github.com/Choices-js/Choices
- https://figma.com
- https://justValidate.js.com
11