Министерство сельского хозяйства Республики Казахстан Казахский агротехнический университет им. С. Сейфуллина Кафедра «ВЫЧИСЛИТЕЛНАЯ ТЕХНИКА И ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ» ОТЧЕТ ПО ПРОИЗВОДСТВЕННОЙ ПРАКТИКЕ Образовательная программа «Компьютерная инженерия» Направление подготовки 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
