Итак, вы решили научиться писать веб-приложения. Поздравляем, это очень интересная профессия, в ней совмещаются творчество с поиском эффективных инженерных решений, развиваются здоровый перфекционизм и тяга к постоянному саморазвитию.
Наверняка вам не по себе от открывающихся просторов. Куда податься начинающему веб-разработчику? Что учить? С чего начать? Какие инструменты хватать и что с ними делать? Эта статья — пошаговое руководство по созданию вашего первого приложения, а в конце вас ждет список проектов, на которых можно отработать полученные знания.
Необходимый минимум
Разберёмся, без каких навыков не обойтись хорошему веб-разработчику. С чем точно стоит знакомиться сразу, так это с технологиями DevOps. Это методология создания ПО, которая автоматизирует многие функции и процедуры, упрощает работу в команде и ускоряет выпуск программы на рынок. В дальнейшей карьере вы обязательно столкнетесь с этими технологиями, так что лучше не откладывать эту встречу.
Разумеется, никакой веб-разработчик не обойдется без знаний HTML, CSS и JavaScript. Уже знакомые с джаваскриптом могут заняться изучением Node.js — это популярная платформа для бэкенд-разработки. В последовательно-параллельном режиме осваивайте Python (считается лучшим первым языком для программистов), PHP, Ruby, Go. Наконец, для создания iOS-приложений нужно знать Swift/Objective-C, а для Android — Java и Kotlin.
Слушатели курса по веб-разработке с нуля в SkillFactory получают все необходимые знания буквально за полгода. Всего несколько месяцев — и человек, который раньше не мог написать и строчки кода, готов выполнять реальные заказы.
Идея на миллион
Когда туториалы проштудированы, а «Hello, World’ы» написаны, наступает пора задуматься, какое приложение станет вашим первым детищем. Это одновременно и простой, и сложный выбор: нужно понять, какая область вас интересует больше всего, и выбрать в ней функцию, которую можно автоматизировать. Чем интереснее вам та или иная сфера, тем проще будет довести до конца проект. А мотивация — один из важнейших ресурсов хорошего веб-разработчика.
Какими приложениями вы пользуетесь каждый день? Любите игры или вам чаще приходится контролировать рабочие процессы? Нужно сформировать идею приложения и описать её одной фразой. Это станет основной функцией программы, ради которой вы и берётесь за разработку.
- Моё приложение будет ежедневно напоминать пользователю написать хайку.
- Я делаю калькулятор, чтобы рассчитывать количество корма для рыбок.
- Хочу создать чек-лист для сборов в поход.
Если такое приложение уже существует, не бросайте идею. Во-первых, вы просто учитесь. Во-вторых, когда перед глазами действующий образец, учиться даже проще.
Самое необходимое
Нужно определить, какие функции будут у вашего приложения. Главное — не пытаться спроектировать швейцарский нож и сосредоточиться на самом необходимом. Помните, что программы постоянно совершенствуются (вспомните, как часто обновляются приложения на вашем смартфоне). У вас ещё будет время, чтобы добавить любые функции, какие вам только придут в голову.
Тот же походный чек-лист вовсе не обязан делать публикации в Facebook. А помощник поэта-япониста обойдётся без доступа к камере. Раздутый набор функций — источник профессиональной фрустрации, а такие ошибки нередко губят даже самые интересные проекты.
Достаем двойные листочки
Итак, вы разобрались, зачем людям нужно ваше приложение и как оно будет решать их задачи. Можно переходить к визуализации.
Первый дизайн приложения можно набросать на бумаге. Нужно определиться, какие кнопки будут на экране, сколько места будут занимать разные элементы интерфейса. Возможно, это тоже поможет избавиться от лишних функций. Или вы наоборот захотите что-то добавить — когда перед глазами есть хоть какой-то дизайн, мысль двигается гораздо проще.
В качестве дополнительного задания можно спланировать развитие приложения на два-три этапа вперёд, чтобы предусмотреть в интерфейсе соответствующие изменения. Но золотое правило остается тем же: не перегружайте проект элементами и стремитесь к лаконичности. Если это сработало для Apple, сработает и для вас.
Из пункта А в пункт Б
Сидя над интерфейсом, вы неизбежно задумаетесь о том, как пользователь будет добираться до тех или иных функций. Необходимо подробно расписать эти цепочки действий, не забывая ни одного экрана.
Что видит пользователь, заходя в программу? Как он создает аккаунт? Откуда берутся данные на этом экране? Что делать, если он забыл пароль? Если алгоритмы действий получаются слишком длинными или запутанными, это повод вернуться на пару шагов и избавиться от лишнего груза.
Когда вы определитесь со всеми рабочими процессами приложения, станет понятно, какие данные нужны для его функционирования. Например, если пользователям нужно создавать учётную запись, вам придётся сохранять их логин, пароль, электронный адрес и другую информацию. Отношения разных узлов приложения нужно отрисовать в ERM-диаграмме (Entity Relationship Model — модель взаимоотношений сущностей/объектов).
Здесь нужно отобразить все процессы обмена данными с сервером или сторонними API. Благодаря наглядной визуализации вы сразу поймёте все особенности внутреннего устройства своего продукта.
Лицом к пользователю
Поздравляем, с бэкендом разобрались. Пора переходить к внешней стороне приложения. Если вы планируете профессионально заниматься фронтендом, стоит уделить время и силы отрисовке интерфейса. А если не хотите ничего рисовать сами, можно воспользоваться UI Cloud, Graphicburger или Spriters Resource, где есть много готовых решений. Разумеется, можно пока не выпиливать каждую мелочь из шаблона — у вас сейчас другая задача.
Код, код, код!
К этому моменту на руках уже есть готовый проект приложения со всеми нюансами. Как перевести это в код? Пришло время применить на практике самый главный навык программиста — владение поисковиками.
Посмотрите на свою систему и разделите её на функциональные блоки. Даже если вы создаете уникальное решение, наверняка кто-то где-то уже делал нечто подобное. Ищите такие решения, изучайте их и применяйте. GitHub — бесценный помощник на этом этапе. Затем переходите к созданию билдов. Последовательно выстраивайте приложение и не забывайте про тесты — причём создавать их лучше ещё до того, как та или иная функция будет написана. Советуем освоить систему контроля версий Git — мастхэв из арсенала веб-разработчика.
Не бойтесь ошибок и будьте готовы к тому, что отлов багов займёт в разы больше времени, чем создание кода. Стремитесь к лучшему, но не позволяйте мелочам тормозить процесс. И делайте перерывы — на свежую голову работается продуктивнее.
Как и обещали, заканчиваем статью примерами приложений, на которых можно набраться опыта.
- Планировщик проектов. Вы познакомитесь с распределением потоков, механизмом Drag&Drop, техниками создания новых объектов (карточки, списки), ввода и проверки данных. На стороне клиента: использование локального хранилища, сохранение и чтение данных. На стороне сервера: все основные операции с базами данных.
- Панель управления учётными записями. Вы научитесь создавать учётные записи и управлять ими, наладите обмен информацией с базами данных, познакомитесь со способами проверки вводимых данных и формами.
- Валютный калькулятор. Отличная возможность познакомиться с нативными приложениями (они предназначены только для одной платформы) и способами работы с API. Пишите на Swift, Objective-C, React Native, Java или Kotlin.
- Сборщик новостей. Вы узнаете, как делать одностраничные приложения и парсить для них контент через API. Для полного комплекта добавьте пользовательские профили и возможность комментирования.
- Планировщик задач. Лучший способ проверить, как вы владеете базовыми техниками JavaScript. Не забудьте предусмотреть фильтр задач: активные, выполненные, все.
- Список покупок с поддержкой Drag and Drop. Упражнение на создание гибких интерфейсов.
- Клон Facebook Messenger. Поможет вам понять особенности нативных веб-приложений, разобраться в веб-сокетах.
