Как объясняется через шесть этапов жизненного цикла разработки программного обеспечения
Многие из нас, вероятно, слышали о жизненном цикле разработки программного обеспечения. Он состоит из 6 этапов:
1. Исследования и анализ
2. Планирование
3. Дизайн
4. Реализация
5. Тестирование и интеграция
6. Развертывание и обслуживание
В этой статье мы собираемся исследовать, как каждый из этих 6 этапов относится конкретно к процессу веб-разработки. К концу вы должны лучше понимать различные процессы, связанные с созданием веб-сайта.
Исследования и анализ
Веб-разработка всегда начинается с исследований. Каковы лучшие практики для типа веб-сайта, который вы создаете? Кто ваши конкуренты (если есть)? Какие современные тенденции актуальны для веб-сайта, который вы создаете?
На этом этапе процесса веб-разработки мы просто собираем некоторую дополнительную информацию, которая поможет нам на этапе планирования. Стоит отметить, что исследования и анализ обычно являются повторяющимся процессом на протяжении всего жизненного цикла разработки любого проекта. Тем не менее, проведение адекватного уровня исследований перед написанием любого кода имеет решающее значение для долгосрочного успеха проекта.
Некоторые отличные инструменты для проведения исследований и анализа:
- "Переполнение стека"
- р/ВебДев
Кроме того, исследования и анализ не будут полными без надлежащего документирования ваших выводов. Моей рекомендацией для этого процесса будет Документы Google. Документы Google позволяют нескольким людям работать над одним и тем же документом одновременно, что идеально, если ваше исследование является совместным усилием.
Планирование
На втором этапе процесса веб-разработки мы начинаем планировать все, что будет задействовано в проекте.
Какой это тип веб-сайта? Сколько пользователей он будет обслуживать? Какие это будут пользователи? Какие функции будут на сайте? Будет ли он статическим или динамическим? Какие технологии мы будем использовать для его создания?
На все эти и другие вопросы следует ответить как можно раньше в проекте, чтобы можно было создать четкую дорожную карту для разработчиков, которой они должны следовать. Чем больше времени вы потратите на тщательное планирование своего проекта, тем больше времени вы сэкономите на его разработке.
Недостаточно просто знать ответы на эти вопросы в своей голове. Вся эта информация должна быть задокументирована организованным образом в месте, легкодоступном для всех участников проекта. Для этого есть много отличных онлайн-инструментов, но мой личный фаворит — Trello.
Trello позволяет быстро и легко создать доску управления проектами для вас и вашей команды. Он также допускает высокую степень настройки, позволяя вам создавать доску управления проектами, которая соответствует вашим конкретным потребностям. По своей сути Trello — это просто канбан-доска.
Дизайн
На этом этапе жизненного цикла веб-разработки вы знаете, что вы хотите создать, знаете, кто ваша целевая аудитория, и у вас есть план развития самого сайта. Если вы тщательно прошли этапы исследования, анализа и планирования, у вас также должно быть хорошее представление о том, как сайт должен выглядеть в целом с точки зрения цветовой палитры и макета.
Теперь пришло время объединить все эти знания и нарисовать картину того, как должен выглядеть конечный продукт. Как правило, проектирование представляет собой цикл из 5 этапов:
1. Сопереживание. Войдите в шкуру клиента, чтобы лучше понять, чего он хочет и ожидает от вашего веб-сайта.
2. Определите — установите, что именно ищут ваши клиенты.
3. Придумайте – начните мозговой штурм потенциальных идей того, как может выглядеть дизайн, на основе данных, которые вы собрали, сопереживая своему клиенту.
4. Прототип. Создайте несколько идей, которые вы придумали во время мозгового штурма.
5. Тестирование. Выполните соответствующее тестирование, чтобы убедиться, что ваш дизайн соответствует вашим потребностям, а затем вернитесь к шагу 1.
По правде говоря, я не очень хорошо разбираюсь в процессе веб-дизайна и предпочел бы работать в команде с кем-то, кто занимается этим. Однако, исходя из моего прошлого опыта разработки веб-сайтов, я бы порекомендовал инструменты Adobe XD или Figma. Для создания цветовых палитр я бы рекомендовал использовать Coolors.
Выполнение
После того, как мы закончили разработку нашего веб-сайта и точно знаем, как мы хотим, чтобы он выглядел, пришло время сломать кулаки и начать писать код. В зависимости от размера нашего веб-сайта, здесь могут возникнуть сложности. У вас все еще есть эта доска Trello? Хорошо, потому что это будет очень полезно на этом этапе.
Первым шагом в реализации дизайна веб-сайта является создание репозитория для отслеживания изменений в вашем коде. Для небольшого одностраничного проекта, где вы точно знаете, что делаете, вы можете обойтись без контроля версий. Но для более крупных проектов, которые постоянно меняются, это абсолютно необходимо.
После того, как вы настроили репозиторий, почти пришло время написать код, но сначала нам нужно заняться нашей доской управления проектом. Мне нравится настраивать свои проекты для разработки, чтобы иметь одну карточку для «Сделать», другую для «В процессе» и еще одну для «Завершено». Это может быть дополнительно расширено, чтобы включить «Проверку кода» и «Тестирование».
Как бы вы ни решили это сделать, пришло время заполнить вашу доску Trello задачами, которые необходимо выполнить. Как только это будет сделано, пришло время взять один из кучи и прикрепить его к вкладке «В процессе». Теперь, наконец, пришло время написать код.
Эти ранние этапы разработки особенно важны для крупных проектов. Вы хотите убедиться, что вы подходите к разработке своего веб-сайта упорядоченным образом, иначе вы рискуете застрять с огромной кучей спагетти-кода, который едва ли работает.
Я рекомендую начинать со стилей, а не с содержания. Создайте правила стиля для вашего заголовка, нижнего колонтитула, боковой панели (если применимо), основных и дополнительных цветов, любых CTA и т. д. Уже имея хорошее понимание правил стиля, которые потребуются перед заполнением сайта контентом, вы сможете создать веб-сайт более эффективно и с меньшим количеством повторений.
Убедитесь, что во время разработки этого веб-сайта вы также правильно используете git, используете ветки для отдельных функций, вносите изменения через регулярные промежутки времени, а не ждете и делаете все сразу, и закрываете ветки, когда они повторно больше не нужен. По мере разработки сайта обязательно обновляйте Trello. Застряли на чем-то, к чему вы вернетесь позже? Запишите это в Trello! Не позволяйте никаким TODO сообщениям попасть в производство.
Вот и все! Сейчас идет разработка сайта. Код будет сохранен благодаря реализации контроля версий git, а прогресс будет сохранен на вашей доске управления проектами Trello.
Что касается личных рекомендаций инструментов, которые вы можете использовать, чтобы помочь этому процессу, большинство из тех, которые будут вам полезны, я уже перечислил. Но один важный инструмент, который вам, конечно же, понадобится для эффективной разработки веб-сайта, — это достойный редактор кода. Вам не обязательно приобретать полноценную IDE для разработки веб-сайтов, но с теми инструментами, которые позволят вам работать наиболее продуктивно, вам захочется ознакомиться. Я использую Atom для всех моих потребностей редактирования кода. Atom известен как взламываемый текстовый редактор по той причине, что он легко настраивается.
Тестирование и интеграция
Этот этап имеет решающее значение для успешной разработки веб-сайта (или любого приложения в этом отношении). Вся работа, которую вы проделали до этого момента, будет бессмысленной, если она не будет работать так, как должна для ваших пользователей. Этот этап также включает в себя некоторые аспекты этапа разработки, хотя обычно более целенаправленно. Вы сформировали глину, теперь пришло время отшлифовать все недостатки.
Существует четыре ключевых области тестирования веб-приложения:
1. Функциональное тестирование
2. Регрессионное тестирование
3. Тестирование производительности
4. Кроссбраузерное тестирование
Каждая из этих четырех областей тестирования может быть автоматизирована, и в конце этого раздела я приведу пример программы, которая может выполнить такую задачу, однако веб-разработчик должен знать, как выполнять эти 4 типа вручную. тестов, поэтому я более подробно расскажу о каждом типе тестов ниже.
Функциональное тестирование
Функциональное тестирование заключается в проверке того, что различные функции вашего веб-сайта работают должным образом и что никакие ошибки или ошибки не мешают пользователю взаимодействовать с веб-сайтом.
Регрессионное тестирование
Регрессионное тестирование — это, по сути, повторное функциональное тестирование. Это гарантирует, что определенные функции на вашем веб-сайте останутся функциональными даже после обновления базы кода.
Тестирование производительности
Тестирование производительности гарантирует, что ваш веб-сайт может оставаться в рабочем состоянии даже в периоды повышенного трафика. Стресс-тестирование определяет верхние пределы способности вашего веб-сервера обрабатывать трафик, тогда как нагрузочное тестирование позволяет разработчику понять, как его веб-сайт будет реагировать на ожидаемую нагрузку.
Кроссбраузерное тестирование
Кроссбраузерное тестирование выполняется, чтобы убедиться, что ваш веб-сайт выглядит и работает одинаково во всех веб-браузерах и размерах экрана. Если ваш сайт выглядит хорошо в Firefox, но что-то не работает в Chrome, вы автоматически закрываете дверь для большей части своих потенциальных посетителей.
Помимо тестирования самого веб-приложения, в этом разделе также рассматривается «тестирование» веб-сервера. Если ваше веб-приложение не запускается на вашем веб-сервере из-за конфликта с какой-либо другой системой, то, опять же, вся ваша работа будет напрасной. Совместная работа этих различных приложений называется *интеграцией*.
Как я уже упоминал в начале этого раздела, я рекомендую для тестирования веб-приложений Selenium. Selenium предоставляет набор инструментов для тестирования веб-приложений с различными возможностями.
Развернуть и поддерживать
Давайте быстро подведем итоги. Мы провели исследование и анализ для нашего проекта разработки веб-сайта и обнаружили лучшие практики для того, что мы пытаемся создать, а также узнали, кто наши конкуренты.
После этого мы приступили к планированию дизайна и разработки нашего сайта. Мы выяснили, кто наша целевая аудитория, какие технологии мы будем использовать для ее создания и какой именно сайт мы создаем.
Имея план и проведенные исследования и анализ, у нас было достаточно информации, чтобы приступить к разработке нашего веб-сайта. После сопереживания нашим будущим клиентам и мозгового штурма потенциальных идей мы, наконец, выбрали дизайн, отвечающий нашим потребностям.
Получив дизайн, мы смогли открыть редактор кода и приступить к работе. Мы позаботились о том, чтобы подойти к этому методично, чтобы наш код оставался эффективным и свободным от избыточности.
После того, как мы закончили разработку нашего сайта, мы открыли Selenium, чтобы начать выполнять функциональные, регрессионные, производительные и кросс-браузерные тесты. После того, как эти тесты были завершены, мы вернулись к этапу разработки, чтобы устранить все обнаруженные проблемы. После того, как код выглядел хорошо, мы выполнили интеграционные тесты, чтобы убедиться, что наше веб-приложение сможет работать на нашем веб-сервере без каких-либо конфликтов.
Итак, теперь у нас есть работающее веб-приложение, спроектированное и разработанное именно так, как мы хотели. Что нам остается делать? Для начала, наше веб-приложение не принесет много пользы, если оно не станет общедоступным, поэтому давайте продолжим и развернем наше приложение. Развертывание веб-приложений выходит за рамки этой статьи, но процесс довольно прост: получите домен, получите хостинг, отправьте наш код на рабочий сервер и готово!
Однако после того, как наше веб-приложение развернуто, остается один последний и важный шаг. Было бы здорово, если бы разработав приложение, мы могли бы развернуть его и больше никогда не беспокоиться об этом, однако, к сожалению, это не так. Со временем все имеет свойство меняться. Языки программирования обновляются, браузеры развиваются, появляются новые функции. Чтобы гарантировать, что веб-приложение *остается* доступным, мы должны поддерживать его.
Сопровождение обычно включает в себя аспекты разработки и тестирования этапов жизненного цикла разработки. При разработке новых функций следует проводить регрессионные тесты для обеспечения совместимости.
Заключение
Вуаля! Теперь вы знаете основы жизненного цикла веб-разработки, а также некоторые из различных инструментов, которые используются в этом процессе. О каждом из этих этапов процесса разработки можно сказать гораздо больше, поэтому я рекомендую вам отправиться в Google, чтобы прочитать о них больше.
К счастью, теперь мы можем автоматизировать большую часть этого жизненного цикла. Если вы хотите узнать больше об автоматизации, ознакомьтесь с моей статьей Автоматизация рабочих процессов с помощью GitHub Actions.
Наконец, если у вас проблемы с запоминанием знаний, я бы порекомендовал прочитать мою статью Избегая чистилища учебников как разработчик программного обеспечения. Кривая обучения компьютерному программированию (независимо от вашей конкретной области) может быть невероятно сложной и часто заканчивается синдромом самозванца, из-за которого они могут отказаться от программирования как от призвания.
Если вам понравилась эта статья, мне всегда приятно слышать отзывы о моих статьях.
