Воплощение идеи в продукт – это очень увлекательный, но трудоемкий этап в любой новой компании. Это может помочь вам протестировать идеи для вашего цифрового продукта или услуги быстрым, безопасным и эффективным способом. Это вторая часть серии блогов Как создать цифровой прототип для вашего социального предприятия. В этой записи я представляю коллекцию учебных ресурсов, которые я использовал для создания нашего прототипа, чтобы вы могли следить за ними.

Возможно, вами движет технологическое любопытство или ограниченный бюджет. Я, конечно, был. Это мой путь от «не очень технического технического директора» до создания прототипа моего социального предприятия.

Я начал с выяснения того, что нужно нашему прототипу. Наши технические характеристики были довольно простыми. Нам требовалась защищенная среда для входа в систему, которая могла бы получить доступ к профилям предварительно проверенных социальных предприятий, функциям уведомлений и некоторым формам. Поговорив с агентствами, я был ошеломлен тем, сколько это будет стоить. Я также должен был учитывать текущие расходы на поддержку и зависеть от них для будущего развития.

В то же время сцена лондонского буткемпа по кодированию кипела. Это дало мне ощущение, что при должной приверженности делу и энтузиазме изучение веб-разработки станет достижимой целью.

Во-первых, я поговорил с некоторыми друзьями-разработчиками о своем плане научиться программировать и самому создать прототип. К моему удивлению, они очень ободряли и поддерживали мой план. Я решил дать себе 2 месяца полного дня программирования, чтобы увидеть, как далеко я смогу продвинуться.

Когда начать ?

Программирование — один из самых ценных навыков, которые вы можете приобрести в наши дни. Это полезно для создания MVP, смены карьеры или просто для разминки мозга. Это очень специфический способ решения проблем, который будет полезен во многих сферах вашей жизни и работы. Как сказал Стив Джобс: «Каждый должен научиться программировать компьютер, потому что он учит думать». В программировании вы должны очень тщательно анализировать проблемы. Таким образом, вы становитесь очень разборчивы в том, какие проблемы решать. Я считаю, что это те качества, которыми должны обладать социальные предприниматели.

Как только вы начнете программировать, вы навсегда останетесь студентом. Примите этот образ мышления.

Взгляд в информатику

Мне было очень полезно получить более широкое представление о компьютерных науках и о том, как обычно преподается эта область. Вот очень короткие, средние и длинные введения в информатику, которые мне очень понравились.

Определите свой стек технологий

Стек технологий — это набор технологий, языков программирования и программных продуктов, которые используются для создания веб-приложений или мобильных приложений. Типичное веб-приложение разделено на две части:

  • Backend (относительно серверной части)
  • Фронтенд (относительно клиентской части)

Стек серверных технологий

Backend — это общий термин для программирования бизнес-логики, работы с базой данных, настройки хостинга сервера и других развертываний. Это то, где живут ваши данные и как ваше приложение взаимодействует с данными.

Клиентская сторона (веб-сайт/приложение) взаимодействует с серверной частью для обработки пользовательских запросов — например, что происходит, когда пользователь нажимает кнопку.

Популярным выбором для прототипирования является Ruby on Rails. В Ruby on Rails есть много готовых решений для повторяющихся задач, требующих много времени. Такие вещи, как создание меню, таблиц или форм на веб-сайте, легко сделать с помощью Ruby on Rails.

Долгое время Javascript был в основном языком сценариев браузера. Но в последнее время его популярность как серверного языка программирования резко возросла. Полный стек на основе Javascript (включая интерфейс) под названием MEAN стал одним из наиболее популярных вариантов технического стека для MVP. MEAN означает MongoDB, Express.js, Angular.js и Node.js. Благодаря своей природе с открытым исходным кодом и наличию обширных библиотек многие современные веб-приложения строятся на стеке MEAN.

Не существует одного «лучшего» языка программирования, и как только вы выучите один, довольно легко подобрать другой, так что не слишком зацикливайтесь на выборе первого.

Одна вещь, которую стоит учитывать с самого начала, — это потребности вашего прототипа в поиске правильного стека. Некоторые технологии просто больше подходят для конкретных задач.

Технический стек внешнего интерфейса

Фронтенд — это часть приложения, с которой взаимодействует пользователь. Это может быть сайт, интернет или мобильное приложение. При разработке для Интернета интерфейс состоит из трех технологий:

  • HTML — язык разметки
  • CSS — таблица стилей
  • Javascript — язык сценариев браузера

AngularJS от Google и ReactJS от Facebook — два самых популярных фреймворка Javascript для внешнего интерфейса на рынке сегодня. Вы можете связать их практически с любой бэкэнд-технологией.

На что обратить внимание при выборе стека?

Есть определенные вещи, которые вы должны рассмотреть, прежде чем принимать решение о своем стеке. В первую очередь нужно оценить сложность решаемой задачи. С каким объемом и какими данными вы работаете? Вам нужно запустить какую-либо сложную бизнес-логику? Вам нужно обслуживать большие объемы данных?

Затем подумайте о наличии талантов, к которым у вас есть доступ, при выборе технологии. Это может облегчить или затруднить наем технических специалистов на более позднем этапе процесса. Вы также хотите принять во внимание, насколько продвинута поддержка сообщества и кто поддерживает технологию. Наконец, вы должны рассмотреть, насколько хорошо ваша технология приспосабливается к масштабированию.

Что касается моей проблемы, большинство людей предлагали работать либо с Ruby on Rails, либо с Node.js. Я также решил создать свой MVP на React.js и Node.js, оба из которых основаны на JavaScript и являются очень популярными решениями для полнофункциональных веб-приложений с большим сообществом и множеством онлайн-ресурсов.

Создайте архитектуру своего приложения

Чтобы понять техническую сложность вашего проекта, создайте грубый набросок того, как может выглядеть архитектура вашего приложения. Приложения в основном основаны на многоуровневой архитектуре, которая состоит из трех уровней: уровня представления, бизнес-логики и уровня хранения данных. Уровень представления также известен как внешний интерфейс или GUI — графический пользовательский интерфейс. Второй уровень — это веб-сервер, и именно здесь хранится логика. Третий уровень представляет собой сервер базы данных. Второй и третий уровни вместе известны как серверная часть приложения. Набросайте свой пользовательский интерфейс, подумайте о том, как он может запрашивать и отправлять данные на ваш сервер, и где потенциально могут быть включены любые системы промежуточного программного обеспечения.

Начать писать код

И мы уходим! Я прошел буткемп Founders & Coders (F&C) в форме самообучения. Я начал с прохождения предварительных требований к курсу. Они дают вам общий обзор темы и некоторые концепции, необходимые для начала вашего путешествия. Я также добавил другие полезные ресурсы, прежде чем начать учебный курс F&C.

Это были основные элементы моего пути программирования:

  • Теория: чтение книг, интернет-ресурсов и документации.
  • Практика. Добейтесь достойного уровня программирования с помощью учебных пособий, а затем пройдите программу учебного курса по кодированию, например, от Founders and Coders.
  • Метод проб и ошибок. Реконструируйте чужой код, тестируйте каждую строку, чтобы увидеть, как он работает, пока не получите более полное представление о общей картине.
  • Проекты. Используйте полученные навыки в проектах. Я создал десятки небольших приложений, прежде чем перешел к реальным вещам.
  • Сохраняйте интерес. Поскольку я не участвовал в группе буткемпов по кодированию и учился самостоятельно, я слушал много выступлений и подкастов от основателей технологий и новичков в программировании.
  • Наставник. Когда у меня была грубая структура веб-приложения, я начал искать наставника, который будет направлять меня в моем путешествии, следить за моей работой и давать советы (и надежду). Я обратился к Твиттеру и нашел своего наставника Тима, который с тех пор провел со мной много времени в парном программировании, подбадривая меня на каждом этапе пути.

Ваша настройка

Чтобы писать, управлять и редактировать код, вам понадобится редактор кода. Я использую Visual Studio Code, бесплатный текстовый редактор с множеством удобных библиотек для настройки вашего программирования в зависимости от вашего языка, стиля и потребностей.

Основы

Как написал автор Нил Стивенсон, Вначале… была командная строка. Большую часть основ я изучил из серии книг Майкла Хартла Узнай достаточно, чтобы быть опасным. По его словам, технологии — это новая грамотность. Майкл Хартл фокусируется не только на обучении вас техническим темам и языкам программирования, но и на том, что он называет технической изощренностью.

Техническая изощренность означает, что вам как разработчику требуется определенный набор навыков, чтобы улучшить свое общее видение и смотреть шире. Не обязательно быть технически опытным во всем, но хорошее понимание основ позволяет нам быстрее отлаживать и находить решения. Другими словами, сохраняйте спокойствие и гуглите сообщение об ошибке!

Вот первые курсы, которые я сделала из его материала:

  • "Текстовый редактор"
  • "Командная строка"
  • Гит

HTML

HTML означает язык гипертекстовой разметки и является стандартным языком разметки для веб-страниц. Его элементы являются строительными блоками HTML-страниц. HTML и CSS являются основными языками программирования для веб-разработки и дизайна. Почти все, что вы видите в Интернете, было отформатировано на этих двух языках. Понимание основ этих языков является важной отправной точкой.

CSS

CSS — сокращение от Каскадные таблицы стилей — это язык стилей для Всемирной паутины. С помощью CSS вы определяете, как выглядит веб-страница и как она себя ведет, включая расположение ее различных элементов в браузере.

JavaScript

JavaScript — это язык программирования для Интернета. Он может обновлять и изменять как HTML, так и CSS, а также вычислять, обрабатывать и проверять данные. JavaScript позволяет создавать интерактивные веб-сайты. JavaScript стал важной веб-технологией наряду с HTML и CSS, поскольку большинство браузеров реализуют JavaScript. Он считается универсальным, поскольку вы можете использовать его как во внешнем интерфейсе, так и в бэкэнде благодаря таким библиотекам, как React.js и Node.js. Подробнее об этом позже. Крайне важно понять основы этого языка программирования, прежде чем двигаться дальше.

React.js

Теперь, когда мы рассмотрели основы, мы немного ускорим темп. Я начал с пары общих вводных сведений о React, прежде чем приступить к созданию нескольких практических проектов. Когда я перешел к своему прототипу проекта, я разбил продукт на несколько ключевых технических элементов (среда входа в систему, формы, функции поиска, интеграция с информационными бюллетенями, авторизация и аутентификация). Для каждого из них я изучал решения с помощью следующих руководств:

Node.JS и экспресс

Теперь пришло время интегрировать серверную часть в приложение. Node.js будет считывать и записывать файлы в ваш бэкенд и взаимодействовать с базами данных или API. Вот когда я начал учебник Founders & Coders, в котором основное внимание уделяется Node.js и Express. Есть и другие отличные ресурсы, где вы можете узнать о Node.js:

MongoDB/PSQL в Express/альтернативные серверные части

Большинство прототипов используют решения с открытым исходным кодом, такие как MongoDB или PSQL, в качестве серверной части для хранения данных. Большая разница между ними заключается в том, что PSQL является объектно-реляционной базой данных, а MongoDB не содержит схемы (т. е. база данных NoSQL). Есть и другие варианты, особенно подходящие для прототипирования, такие как Airtable. Airtable — это веб-приложение, которое хранит данные и позволяет вам получать к ним доступ через веб-интерфейс. Это удобно, если членам вашей команды, не являющимся техническими специалистами, необходимо иметь возможность видеть содержимое вашей базы данных без необходимости создавать административную среду (или чтобы они изучали SQL!). У Airtable есть API, который позволяет обращаться с ним как с базой данных.

Аутентификация против авторизации

Если ваш прототип включает среду входа в систему, вам следует ознакомиться с концепциями аутентификации и авторизации. С точки зрения управления пользователями Google Firebase — очень удобное решение. Он позволяет добавлять и удалять пользователей через интерфейс, управлять шифрованием паролей и обрабатывать сбросы.

Стилизация вашего приложения

Когда дело доходит до эффективного оформления вашего приложения, существует множество решений. Многие решают использовать фреймворк CSS, такой как Bootstrap. Компоненты можно оптимизировать для мобильных устройств и всех современных браузеров, а также легко адаптировать под ваши требования. Отличным ресурсом для оптимизации внешнего вида или вашего прототипа является книга Рефакторинг пользовательского интерфейса, которая полна практических примеров того, как сделать ваше приложение красивым и профессиональным. Ниже приведены несколько отличных руководств по стилю:

Проектирование для веб-доступности и инклюзивности

При создании цифровых продуктов важно создавать продукты для пользователей с любыми способностями и опытом. Вот несколько отличных инструментов, которые помогут вам создать инклюзивный продукт:

Развертывание вашего приложения

Хватит локалхоста! Когда вы будете готовы выпустить свой продукт в реальный мир, наступит время развертывания (т. е. самый напряженный день в этом путешествии). Heroku — отличное решение для размещения вашего проекта. Он предоставляет предустановленную операционную систему и серверы, что избавляет от необходимости настраивать инфраструктуру. Даже человек, который плохо знаком с облачной платформой Heroku, может легко освоить ее при развертывании, не беспокоясь о проблемах управления инфраструктурой. Heroku — это продукт с оплатой по мере использования, и пользователи могут легко выбрать план подписки в соответствии со своими потребностями. Не забудьте протестировать приложение в разных браузерах!

Что дальше?

Как только ваше приложение будет запущено, вернитесь к первоначальной гипотезе, которую вы хотели проверить с помощью своего прототипа. Назначьте себе конкретные сроки для сбора отзывов и данных о производительности прототипа. Это можно сделать в цифровом виде с помощью таких продуктов, как Hotjar или трекеров событий, или с помощью сеансов исследования пользователей с вашими пользователями. Будьте честны и конкретны в отзывах и оцените, решает ли ваш прототип проблемы ваших пользователей, как ожидалось.

Некоторые заключительные мысли

Наконец, я хотел бы поделиться некоторыми мыслями, которые я получил в этом путешествии. Во-первых, чтобы научиться чему-то новому, особенно такому обширному и сложному, как программирование, вы должны посвятить время и сосредоточиться. Я знаю, что это клише, но стоит напомнить. Мой совет: постарайтесь уделять хотя бы час практике каждый день.

Для многих проблем, которые мне приходилось решать, я также узнал, что высока вероятность того, что кто-то должен был решить их до меня. Мое предложение по этому поводу: убедитесь, что вы не пытаетесь изобретать велосипед. Есть много отличных фреймворков или библиотек, которые уже решили множество распространенных проблем. Используйте их, а не стройте все с нуля.

Научиться программировать и создавать прототипы сложно и потребует от вас большой самоотверженности и мотивации. Для меня это была работа над чем-то, что меня очень заботило, что заставляло меня переживать множество трудных периодов. Страсть будет мотивировать вас пережить эти трудные времена, когда вы их настигнете. Если в вашем городе есть встречи для новичков в программировании, отправляйтесь на них и общайтесь с сообществом.

Существует множество путей и мнений о том, как создать прототип. После того, как вы приняли решение о пути, я предлагаю попытаться придерживаться плана, который вы составили с самого начала. Даже если комментарию Stackoverflow может не понравиться конкретный выбранный вами трек, вы всегда найдете массу поддержки для конкретного технического решения. В итоге выбрали то, что вам подходит. Вам придется с этим жить и работать.

Также покажите свой продукт для обратной связи. Не стесняйтесь и не защищайтесь, принимайте то, что говорят другие. У всех будет свое мнение о цветах кнопок, и очень немногие люди будут иметь мнение о дизайне ваших API, даже если вы потратили много времени и энергии на их работу. Что бы люди ни говорили, не принимайте это на свой счет.

Наконец, попытайтесь найти наставника. Мне очень повезло встретить Тима, который научил меня многому и с которым я провел много времени за парным программированием. Сообщество программистов полно людей, готовых помочь следующему поколению программистов. Hack.pledge() — это один из сайтов, который свяжет вас с наставником. Поищите кого-то, кто соответствует вашим целям, и, как только вы почувствуете, что готовы, попробуйте подписаться, чтобы взамен стать наставником кого-то другого. Наставничество других людей и обмен своим опытом помогут вам по-настоящему понять, как многие из этих вещей работают, при этом оплачивая их вперед.

Верена Виммер является соучредителем и техническим директором Supply Change
Supply Change разрабатывает решения для социальных предприятий, чтобы получать больше контрактов в государственном секторе и максимизировать социальную ценность в цепочках поставок государственного сектора.
www.supplychange.co.uk