(И получать деньги, чтобы научиться это делать)
После недавнего окончания второго года обучения в области компьютерных наук я считал себя достаточно беглым программистом на Java и Python, имея некоторый опыт работы с HTML и CSS в небольших проектах до поступления в университет. Но я не знал ни JavaScript, ни веб-фреймворков вроде React, Angular или Vue.
Итак, когда я решил, что хочу попробовать свои силы в веб-разработке летом, это представляло собой серьезную проблему, которую нужно было преодолеть, прежде чем я мог даже начать.
Если, как и я, у вас есть некоторый опыт программирования и вы хотите заняться веб-разработкой, но не знаете конкретных необходимых технологий, эта статья для вас. Читайте дальше, чтобы узнать, какие шаги я предпринял, чтобы разобраться со стеком всего за несколько недель, создать свое первое веб-приложение, запустить его для тысяч пользователей и получить оплату от начала до конца.
Найти проект и клиента
Как вам платят за изучение новых технологий? Найдите того, кому нужно создать веб-приложение, и предложите ему свои услуги. Это убивает двух зайцев одним выстрелом, поскольку вы также получаете проект, на котором можно сосредоточить свои усилия, что может быть очень мотивирующим во время обучения.
В моем случае мне повезло. Некоммерческий природоохранный фонд дома в Южной Африке связался со мной через взаимную связь, чтобы спросить, могу ли я построить что-нибудь для них, так как они знали, что я раньше занимался веб-дизайном для компаний в их регионе (сайт брошюры Wordpress мелочи, ничего особенного). Но то, о чем они просили, было более сложным и требовало индивидуального решения. Wordpress не собирался его сокращать. Я давно хотел освоить некоторые технологии веб-разработки и знал, что это прекрасная возможность сделать это.
Поэтому я процитировал их, объяснил, почему Wix, на котором построен их основной веб-сайт, не будет достаточно мощным, и сказал им, что на его создание уйдет несколько месяцев. Имея некоторый опыт работы фрилансером, я знаю, сколько я мог бы предложить, чтобы найти баланс между большими деньгами для меня, студента, и подрывом любой профессиональной фирмы веб-разработки или разработчика-выпускника.
Если вы хотите узнать больше о моем опыте открытия бизнеса в области веб-дизайна, вы можете здесь:
Что особенно важно, я не дал понять, что не знаю ни одной из технологий или даже языка программирования, которые я буду использовать для создания их веб-сайта, или что часть времени, за которое я их цитировал, будет потрачено на изучение всего. того, что. Отказ от ответственности. Я не рекомендую этот подход, если только вы не уверены в своих силах. Как разработчики, мы постоянно изучаем новые вещи и можем делать это, одновременно создавая что-то, поэтому я не считаю этот подход нечестным, если только вы не чувствуете, что не сможете научиться достаточно быстро, чтобы создавать что-то стабильное и качественное, и доставить это вовремя.
Сосредоточьтесь на интерфейсе
Когда вы впервые погружаетесь в мир веб-разработки, самый быстрый способ вывести что-то на рынок и освоить навыки, наиболее востребованные среди младших разработчиков, — это полностью сосредоточиться на интерфейсе. Изучите JavaScript, HTML, CSS и фреймворк/библиотеку по вашему выбору, и оставьте бэкэнд, когда вы будете уверены в себе и захотите еще больше развить свои навыки. Я расскажу, как именно вы можете добиться этого с помощью Backend-as-a-Service (Baas) позже в этой статье.
HTML, CSS и JavaScript
Если вы ничего из этого не изучали в старшей школе или университете, есть много отличных онлайн-курсов, которые вы можете пройти бесплатно. Все, что я использовал, это бесплатный курс на Codecademy. Если вы уже знаете, как программировать, это идеальный вариант. У них также есть аналогичные курсы по HTML, CSS и JS-фреймворкам.
Выберите фреймворк
Как уже заметил проницательный читатель, я выбрал ReactJS — да, я знаю, что технически это библиотека, а не фреймворк. Почему? По той же причине, что и все остальные: он самый популярный. Почему он самый популярный? Потому что каждый выбирает это. Почему все выбирают его? Вы видите, к чему я клоню… Цикл положительной обратной связи.
В любом случае, эта статья не о том, какой из них выбрать. У каждого есть свои плюсы и минусы, и я знаю, что вы будете изучать это часами, независимо от того, что я скажу. Я выбрал тот, который, как я знаю, широко используется в компании, в которой я прохожу стажировку следующим летом, так как я полагал, что это даст мне фору. Я также использовал Codecademy, чтобы изучить его:
Кроме того, я посмотрел несколько видео на YouTube, которые показались мне очень полезными, в частности это:
Добавьте Bootstrap, чтобы сделать CSS немного менее головной болью, и все готово!
Обманывать бэкенд
Вместо того, чтобы разрабатывать сервер на Python или Java и создавать REST API с еще большим количеством фреймворков для изучения, таких как Flask или Spring соответственно, я решил делегировать все свои внутренние потребности. Я действительно хочу научиться бэкенд-разработке, но, поскольку у меня был клиент, это занятие было критичным по времени, а я все равно не хотел перегружать свой мозг. Backend-as-a-Service — это модель облачных сервисов, которая позволяет разработчикам сосредоточиться на внешнем интерфейсе своих приложений и эффективно передать все остальное на аутсорсинг.
Одним из таких сервисов, который я выбрал, является собственная Firebase от Google. Firebase предоставляет все: от баз данных, возможностей машинного обучения, мониторинга производительности и выпусков до хостинга. Большинство этих функций доступны на их бесплатном уровне для ограниченного количества вызовов API, загрузок, загрузок и т. д.
Я разместил приложение своего клиента полностью на Firebase бесплатно. У них уже был домен, поэтому я просто получил их данные cPanel и настроил субдомен — тоже бесплатно — связал его с хостингом Firebase, и мы были в бизнесе!
Опять же, эта статья не о том, чтобы восхвалять Firebase, но она довольно изящна. Если вы собираетесь использовать их план Blaze с оплатой по мере использования, обязательно тщательно проверьте, сколько вызовов API делает ваше приложение, вы не хотите закончить как эти парни, которые потратили 30 тысяч долларов на Firebase. через 72 часа. Но не волнуйтесь, с эффективным дизайном этого можно избежать.
Еще один классный вариант с открытым исходным кодом — Supabase, который работает по модели подписки, а не с оплатой по мере использования.
Создайте свое приложение
Итак, вы немного знаете HTML, CSS и JavaScript, вы выбрали и изучили основы фронтенд-фреймворка, и у вас есть бэкенд. Пришло время перейти к веселой части!
Я рекомендую начать с просмотра видеороликов на YouTube, где люди создают определенные функции, которые вы хотите использовать в своей структуре. Например, если вы знаете, что вам нужны функции регистрации/аутентификации/входа, посмотрите, как несколько человек создают это и копируют/адаптируют/объединяют то, что вы видите, и вскоре вы сможете реализовать это самостоятельно, не нуждаясь в рекомендациях.
Заворачивать
Навыки веб-разработки всегда будут востребованы, а создание приложений и веб-сайтов — это просто весело. Это был процесс, который я использовал для обучения, надеюсь, вы тоже сможете заставить его работать на вас! Выделение времени в наши дни для изучения нового навыка может быть пугающим и серьезным обязательством. Я работал на постоянной летней стажировке, изучая и создавая это приложение, поэтому в итоге я занимался им по вечерам. Вот почему я выступаю за то, чтобы найти способ получать деньги за это, если вы можете, это огромный мотиватор, и я почувствовал, что это стоит моего времени. Также помогает то, что я получил удовлетворение от осознания того, что мое творение действительно будет использоваться реальными людьми. Если бы не этот двойной удар, я, вероятно, все еще не нашел бы время, но я так рад, что сделал это.
Подпишитесь 📚 чтобы не пропустить новую статью от меня, а если вы еще не являетесь участником Medium, присоединяйтесь 🚀 чтобы прочитать все мои и тысячи других историй!
Рекомендации
- Codecademy https://www.codecademy.com/learn
- Bootstrap https://getbootstrap.com
- Что такое BaaS? https://www.cloudflare.com/en-gb/learning/serverless/glossary/backend-as-a-service-baas/
- Firebase https://firebase.google.com
- Супабаза https://supabase.com
Повышение уровня кодирования
Спасибо, что являетесь частью нашего сообщества! Перед тем, как ты уйдешь:
- 👏 Хлопайте за историю и подписывайтесь на автора 👉
- 📰 Смотрите больше контента в публикации Level Up Coding
- 🔔 Подписывайтесь на нас: Twitter | ЛинкедИн | "Новостная рассылка"
- 🚀👉 Вакансии для инженеров-программистов
