Руководство для начинающих веб-разработчиков
Прошлым летом я решил, что буду учиться веб-разработке - за 3 месяца я перешел от написания простых HTML, CSS и JavaScript к завершению довольно сложного рабочего клона веб-плеера Spotify с помощью React. По сей день я все еще считаю этот проект одним из самых важных проектов, которые помогли мне получить мою первую работу веб-разработчика в течение года обучения программированию. Сегодня я подумаю о том, как я подошел к такому проекту, и расскажу о том, что я хотел бы знать, чтобы помочь вам начать создание вашего собственного проекта клона.
Зачем клонировать проекты?
Клонирование проектов дает вам работу - я
Для меня проект клонирования - это репликация хорошо зарекомендовавшего себя приложения как по форме, так и по функциям. Подобная деятельность по копированию того, что было хорошо сделано другими людьми, которые лучше вас, - отличный способ ускорить ваше собственное обучение (эта концепция применима ко многим различным дисциплинам).
Я считаю, что самый простой способ прорваться в индустрию программного обеспечения (если это ваша цель) - это поработать разработчиком программного обеспечения до того, как вы станете разработчиком программного обеспечения. Это может показаться нелогичным, но это просто означает, что вы должны убедиться, что ваша практика кодирования должна быть максимально похожа на работу, которую вы стремитесь получить. И наша основная работа как разработчиков программного обеспечения сводится к преобразованию требований в реализации кода. Попытка клонировать проект предъявляет конкретные и реальные требования, которые новичкам бывает сложно придумать самостоятельно.
Приложение, которое вы пытаетесь скопировать, также должно иметь хорошо продуманный пользовательский интерфейс, который очень полезен в портфолио. Люди часто предполагают, что вещи, которые хорошо выглядят, должны быть хорошими - это называется эффектом ореола, и вы можете использовать этот принцип в своих интересах. Когда я показываю свой проект-клон потенциальным работодателям, первое, что они часто говорят, - это то, что проект выглядит очень чистым и хорошо отполированным. Они никогда не видят мой код, но предполагается, что код должен быть хорошим, поскольку пользовательский интерфейс выглядит хорошо.
Шаг 0: Изучите основы
Работа над проектом клонирования - это довольно сложный процесс, который требует значительного времени. Из-за этого я не рекомендую новичкам браться за такой проект, потому что ваше обучение не будет максимальным. Вместо этого сначала ознакомьтесь с HTML, CSS и ванильным Javascript. Также рекомендуется использовать фреймворк javascript, такой как React, Angular или Vue, поскольку это значительно упростит вам жизнь. Из-за этого также рекомендуется знать некоторые основы выбранной вами структуры.
Шаг 1. Выберите проект
Во-первых, вам нужно начать с проекта. Я рекомендую выбрать то, что вам нравится использовать каждый день. Для меня это был Spotify - я использую его почти каждый день, и я был бы рад показать это другим. Подумайте о проекте, который вас вдохновляет и который вам знаком - это действительно поможет вам, когда дела станут тяжелыми и вы захотите бросить. Еще одна вещь, которая поможет вам выбрать проект, - это найти доступные API, что приведет к следующему шагу ...
Шаг 2. Вам нужны данные
Как фронтенд-разработчик, я не обладаю полными знаниями для разработки полной серверной инфраструктуры, поддерживающей мультимедийные приложения, такие как Spotify. Я также не хочу тратить на это время, поскольку моей целью не было быть полнофункциональным разработчиком. К счастью, эти проекты, которые вы пытаетесь скопировать, часто имеют общедоступный API - иногда даже тот же самый API, который используется для создания настоящего приложения. Опять же, преимущество проекта клонирования становится очевидным, потому что как разработчик внешнего интерфейса вы, вероятно, будете использовать API-интерфейсы для создания пользовательского интерфейса в работе.
Если официального API для конкретного продукта, который вы хотите создать, нет, то может быть другой, но похожий общедоступный API, который можно использовать в качестве замены. Например, вы можете использовать данные IMDB для клона Netflix. Если в вашем проекте нет мультимедийных компонентов, таких как изображения или видео, возможно, лучше попытаться сохранить свои собственные данные с помощью простого решения, такого как Google Cloud Storage.
Как только вы найдете подходящий API, потратьте некоторое время на ознакомление с документацией - это будет вашим другом на протяжении всего вашего проекта.
Вот список общедоступных API для вашего вдохновения.
Шаг 3. Определите масштаб вашего проекта
Перед тем, как приступить к работе над проектом, следует подумать об объеме работ. Вы можете спросить себя: хотите ли вы создать полный клон, в котором в конечном итоге будут отображаться все страницы и все функции приложения? Если ваша цель - добавить проект в свое портфолио, вам может понадобиться не все. Возможно, вам даже просто понадобится для работы целевая страница.
Думаю, цель любого проекта - узнать как можно больше. В этом случае вашей основной целью должно быть построение как можно большего количества сложных поведений пользовательского интерфейса для получения максимальной отдачи от времени, затраченного на проект. Объем выполняемой вами работы должен отражать это.
Шаг 4. Совместите внешний вид как можно ближе
Как я уже сказал, приложение, которое вы пытаетесь клонировать, скорее всего, имеет отличные UI-дизайнеры, работающие над ним. Итак, ваша работа - просто попытаться воспроизвести внешний вид, но вы решите стилизовать свой проект - CSS, Sass, Styled-component и т. Д. Я рекомендую простой CSS, если вы только начинаете, но все, с чем вы наиболее знакомы, подойдет.
Инструмент инспектора всегда доступен для поиска стилей CSS компонентов пользовательского интерфейса. Конечно, вы должны относиться к пользовательскому интерфейсу приложения почти как к макету, который вы пытаетесь воспроизвести в коде, и вам следует избегать проверки. Потратьте хотя бы 15 минут на попытки сделать что-то в первую очередь, прежде чем искать это в инспекторе для максимального изучения. Вы не хотите тратить больше времени, потому что вы можете тратить время на решение, которое не будет работать (конечно, это именно то, что происходит в реальном сценарии, но мы стараемся учиться как можно быстрее здесь ).
Шаг 5. Как можно точнее сопоставьте принцип работы
Вещи в приложении не только должны хорошо выглядеть, они должны хорошо работать. Попробуйте воспроизвести как можно больше действий приложения, которые вы видите - например, бесконечная прокрутка, поиск в реальном времени, панель воспроизведения и т. Д. Если вы застряли, в Интернете есть множество учебных пособий для любого поведения, которое вам нужно сделать. Хотя эти руководства могут не совсем соответствовать тому, что вы пытаетесь сделать, вы часто можете внести незначительные изменения в соответствии с вашими потребностями. Например, мне нужно было иметь список песен с бесконечной прокруткой в моем проекте Spotify, поэтому я просмотрел его и в конечном итоге использовал учебник от Web Dev Simplified на YouTube для выполнения задачи.
Шаг 6: Продолжайте, повторяйте, пока не закончите объем своей работы
Имейте в виду, что на протяжении всего проекта вы много раз теряете мотивацию, но продолжайте продолжать, потому что в конце концов все это того стоит. Как упоминалось в шаге 1, важно, чтобы вы выбрали проект, который вам нравится именно по этой причине. Это может быть сложно, но вы будете учиться почти так же, как на реальной работе, так что все это того стоит. Как только вы достигнете объема своей работы и все будет работать достаточно хорошо, без ошибок, этот проект готов и готов для включения в портфолио.
Заключение
Это от меня на сегодня. Надеюсь, я убедил вас, что попытка клонирования существующего проекта - одно из лучших занятий, которое вы можете сделать как начинающий разработчик. Он не только дает вам реальные конкретные требования, которым нужно следовать, но также учит, как все делается на уровне, готовом к производству. А теперь иди и создай этот проект!
Больше контента на plainenglish.io
